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
- acceptRootDesigner
- canReposition
- canResizeHorizontal
- canResizeVertical
- designIsEnabled
- designIsSelected
- designProperties
- encodeChildViews
- localizedProperties
- maxHeight
- maxWidth
- minHeight
- minWidth
- object
- objectClass
- view
- viewClass
- Fields borrowed from SC.Object:
- concatenatedProperties, isDestroyed, isObject, nextProperty, property, target, toInvalidate
- Fields borrowed from SC.Observable:
- isObservable
Instance Methods
- addView(view)
- anchorLocation(key, value)
- awakeDesign()
- designController()
- designIsSelectedDidChange()
- destroy()
- didCreateLayer()
- didUpdateLayer()
- dragDataForType(drag, dataType)
- dragDidBegin(drag, loc)
- dragDidEnd(drag, loc, op)
- dragDidMove(drag, loc)
- dragSourceOperationMaskFor(dropTarget, drag)
- editableProperties()
- encodeChildViewsDesign(coder)
- encodeChildViewsLoc(coder)
- encodeDesign(coder)
- encodeDesignAttributeProperties(coder)
- encodeDesignProperties(coder)
- encodeLoc(coder)
- encodeLocalizedProperties(coder)
- encodeSimpleProperties(props, coder)
- init()
- isRootDesignerDidChange()
- layout(key, value)
- layoutBottom(key, value)
- layoutCenterX(key, value)
- layoutCenterY(key, value)
- layoutHeight(key, value)
- layoutLeft(key, value)
- layoutRight(key, value)
- layoutTop(key, value)
- layoutWidth(key, value)
- mouseDown(evt)
- mouseDragged(evt)
- mouseReposition(evt, info)
- mouseUp(evt)
- page()
- parentDesignerIsRoot()
- prepareReposition(info)
- resignRootDesigner()
- shouldReleaseRootDesigner(evt)
- tryToPerform(methodName, arg1, arg2)
- unknownProperty(key, value)
- viewDidChange()
- viewPropertyDidChange(view, key)
- willDestroyLayer()
Field Detail
acceptRootDesignerArray 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.
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.
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.
Instance Method Detail
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
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
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.
Defined in: object_designer.js.
- Parameters:
- drag
- dataType
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.
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.
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.
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.
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
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
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
- Parameters:
- 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
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
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
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
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
- Parameters:
- key
- value
- Parameters:
- key
- value
- Parameters:
- key
- value
- Parameters:
- key
- value
- Parameters:
- key
- value
- Parameters:
- key
- value
- Parameters:
- key
- value
- Parameters:
- key
- value
Select on mouseDown. If metaKey or shiftKey is pressed, add to
selection. Otherwise just save starting info for dragging
- Parameters:
- evt
mouse dragged will resize or reposition depending on the settings from mousedown.
- Parameters:
- evt
- Parameters:
- evt
- info
- Parameters:
- evt
Defined in: object_designer.js.
- Parameters:
- info
- Parameters:
- evt
- Parameters:
- methodName
- arg1
- arg2
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
Invoked whenever the view changes. This will observe all property changes on the new view.
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