Class: SC.ViewDesigner


Extends SC.Object.

A Designer class provides the core editing functionality you need to edit a view in the UI. When your app loads in design.mode, a peer Designer instance is created for every view using the class method Designer or SC.ViewDesigner if the view class does not define a Designer class.

Whenever you put your app into design mode, all events will be routed first to the peer designer for an object, which will have an opportunity to prosent a design UI.

Likewise, the designer palettes provided by the view builder will focus on the designer instead of the view itself.

Designer UI

The basic ViewDesigner class automatically handles the UI interaction for layout. You can also double click on the view to perform a default action.

For views with isContainerView set to YES, double clicking on the view will automatically "focus" the view. This allows you to select the view's children instead of the view itself.

Defined in: view_designer.js

Since:
SproutCore 1.0

Field Summary

Instance Methods

Field Detail

acceptRootDesigner
set this property to `YES` if you want your designer to become Root
canReposition
Allows moving.
canResizeHorizontal
Set to `NO` to hide horizontal resize handles
canResizeVertical
Set to `NO` to resize vertical handles
designIsEnabled
Set to `YES` if this particular designer should not be enabled.
Defined in: object_designer.js.
designIsSelected
Set to `YES` if the object is currently selected for editing.
Defined in: object_designer.js.
designProperties

Array of properties that can be encoded directly. This is an easy way to add support for simple properties that need to be written to the design without added code. These properties will be encoded by encodeDesignProperties().

You can add to this array in your subclasses.


Defined in: object_designer.js.
encodeChildViews Boolean

If set to NO, the default childView encoding will not run. You can use this option, for example, if your view creates its own childViews.

Alternatively, you can override the encodeChildViewsDesign() and encodeChildViewsLoc() methods.

localizedProperties

Array of localized that can be encoded directly. This is an easy way to add support for simple properties that need to be written to the localization without added code. These properties will be encoded by encodeLocalizedProperties().

You can add to this array in your subclasses.


Defined in: object_designer.js.
maxHeight
Determines maximum allowed height. `null` means no limit
maxWidth
Determines maximum allowed width. `null` means no limit
minHeight
Determines the minimum allowed height
minWidth
Determines the minimum allowed width
object
The object managed by this designer.
Defined in: object_designer.js.
objectClass
The class for the design. Set when the object is created.
Defined in: object_designer.js.
view
The view managed by this designer.
viewClass
The class for the design. Set when the view is created.

Instance Method Detail

addView(view)

over-ride this method in your designers to customize drop operations default just calls appendChild

TODO: Come up with a better name for this method.

Parameters:
view
anchorLocation(key, value)

The current anchor location. This determines which of the other dimension metrics are actually used to compute the layout. The value may be one of:

TOP_LEFT, TOP_CENTER, TOP_RIGHT, TOP_HEIGHT, CENTER_LEFT, CENTER_CENTER, CENTER_RIGHT, CENTER_HEIGHT BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT, BOTTOM_HEIGHT, WIDTH_LEFT, WIDTH_CENTER, WIDTH_RIGHT, WIDTH_HEIGHT, null

Parameters:
key
value
awakeDesign()

This method is invoked when the designer is instantiated. You can use this method to reload any state saved in the object. This method is called before any observers or bindings are setup to give you a chance to configure the initial state of the designer.


Defined in: object_designer.js.
designController()
The design controller from the page. Comes from page
Defined in: object_designer.js.
designIsSelectedDidChange()
destroy()
didCreateLayer()
Update the layer to add any design-specific marking
didUpdateLayer()
Update the layer to add any design-specific marking
dragDataForType(drag, dataType)
Parameters:
drag
dataType
dragDidBegin(drag, loc)

This method is called when the drag begins. You can use this to do any visual highlighting to indicate that the receiver is the source of the drag.

Parameters:
drag SC.Drag
The Drag instance managing this drag.
loc Point
The point in *window* coordinates where the drag began. You can use convertOffsetFromView() to convert this to local coordinates.
dragDidEnd(drag, loc, op)

This method is called when the drag ended. You can use this to do any cleanup. The operation is the actual operation performed on the drag.

Parameters:
drag SC.Drag
The drag instance managing the drag.
loc Point
The point in WINDOW coordinates where the drag ended.
op DragOp
The drag operation that was performed. One of SC.DRAG_COPY, SC.DRAG_MOVE, SC.DRAG_LINK, or SC.DRAG_NONE.
dragDidMove(drag, loc)

This method is called whenever the drag image is moved. This is similar to the dragUpdated() method called on drop targets.

Parameters:
drag SC.Drag
The Drag instance managing this drag.
loc Point
The point in *window* coordinates where the drag mouse is. You can use convertOffsetFromView() to convert this to local coordinates.
dragSourceOperationMaskFor(dropTarget, drag)

This method must be overridden for drag operations to be allowed. Return a bitwise OR'd mask of the drag operations allowed on the specified target. If you don't care about the target, just return a constant value.

Parameters:
dropTarget SC.View
The proposed target of the drop.
drag SC.Drag
The SC.Drag instance managing this drag.
editableProperties()
encodeChildViewsDesign(coder)

Encodes the design for child views. The default implementation loops through child views. If you store your child views elsewhere in your config (for example as named properties), then you may want to override this method with your own encoding.

Parameters:
coder
encodeChildViewsLoc(coder)

Encodes the design for child views. The default implementation loops through child views. If you store your child views elsewhere in your config (for example as named properties), then you may want to override this method with your own encoding.

Parameters:
coder
encodeDesign(coder)

Invoked by a design coder to encode design properties. The default implementation invoked encodeDesignProperties() and encodeChildViewsDesign(). You can override this method with your own additional encoding if you like.


Defined in: object_designer.js.
Parameters:
coder
encodeDesignAttributeProperties(coder)
Parameters:
coder
encodeDesignProperties(coder)

Encodes the design properties for the object. These properties are simply copied from the object onto the coder. As an optimization, the value of each property will be checked against the default value in the class. If they match, the property will not be emitted.


Defined in: object_designer.js.
Parameters:
coder
encodeLoc(coder)

Invoked by a localization coder to encode design properties. The default implementation invoked encodeLocalizedProperties() and encodeChildViewsLoc(). You can override this method with your own additional encoding if you like.


Defined in: object_designer.js.
Parameters:
coder
encodeLocalizedProperties(coder)

Encodes the localized properties for the object. These properties are simply copied from the object onto the coder. As an optimization, the value of each property will be checked against the default value in the class. If they match, the property will not be emitted.


Defined in: object_designer.js.
Parameters:
coder
encodeSimpleProperties(props, coder)

Encodes any simple properties that can just be copied from the object onto the coder. This is used by encodeDesignProperties() and encodeLocalizedProperties().


Defined in: object_designer.js.
Parameters:
props
coder
init()
isRootDesignerDidChange()
layout(key, value)

Returns the current layout for the view. Set this property to update the layout. Direct properties are exposed a well. You will usually want to work with those instead.

Parameters:
key
value
layoutBottom(key, value)
Returns the bottom offset of the current layout or `null` if not defined
Parameters:
key
value
layoutCenterX(key, value)
Returns the centerX offset of the current layout or `null` if not defined
Parameters:
key
value
layoutCenterY(key, value)
Returns the centerY offset of the current layout or `null` if not defined
Parameters:
key
value
layoutHeight(key, value)
Returns the height offset of the current layout or null if not defined
Parameters:
key
value
layoutLeft(key, value)
Returns the left offset of the current layout or `null` if not defined
Parameters:
key
value
layoutRight(key, value)
Returns the right offset of the current layout or `null` if not defined
Parameters:
key
value
layoutTop(key, value)
Returns the top offset of the current layout or `null` if not defined
Parameters:
key
value
layoutWidth(key, value)
Returns the width offset of the current layout or `null` if not defined
Parameters:
key
value
mouseDown(evt)

Select on mouseDown. If metaKey or shiftKey is pressed, add to selection. Otherwise just save starting info for dragging

Parameters:
evt
mouseDragged(evt)

mouse dragged will resize or reposition depending on the settings from mousedown.

Parameters:
evt
mouseReposition(evt, info)
Called by `designerController` to reposition the view
Parameters:
evt
info
mouseUp(evt)
On `mouseUp` potentially change selection and cleanup.
Parameters:
evt
page()
The current page. Comes from the object.
Defined in: object_designer.js.
parentDesignerIsRoot()
prepareReposition(info)
Parameters:
info
resignRootDesigner()
shouldReleaseRootDesigner(evt)
Parameters:
evt
tryToPerform(methodName, arg1, arg2)
Parameters:
methodName
arg1
arg2
unknownProperty(key, value)

The unknownProperty handler will pass through to the object by default. This will often provide you the support you need without needing to customize the Designer. Just make sure you don't define a conflicting property name on the designer itself!


Defined in: object_designer.js.
Parameters:
key
value
viewDidChange()

Invoked whenever the view changes. This will observe all property changes on the new view.

viewPropertyDidChange(view, key)

Invoked whenever a property on the view has changed. The passed key will be '*' when the entire view has changed. The default implementation here will notify the property as changed on the receiver if the property value is undefined on the receiver.

It will notify all properties changed for '*'. You may override this method with your own behavior if you like.

Parameters:
view
key
willDestroyLayer()
Update the layer to add any design-specific marking
Documentation generated by JsDoc Toolkit 2.4.0 on Wed Apr 08 2015 10:02:21 GMT-0600 (CST)