TransformContainer

Overview

The TransformContainer adds dragging and transformation support to its children elements.

Creating the TransformContainer Component

The TransformContainer extends the Flex SDK SkinnableContainer class, and thus can be added to any container that implements IVisualElementContainer.

Using the TransformContainer Component

All elements that implement IVisualElementContainer can be added as children, but only children elements that dispatch mouse events can be selected and transformed.

By default, all selectable children can be selected, dragged, and transformed via the selection 'pips'.

Selection

When elements are hovered, if "showHoverIndicator" is true, then the "hoverIndicatorFactoryPart" skin part is displayed.

Upon selection, if "showSelectionIndicators" is true, a selectionIndicatorFactoryPart skin part will be displayed over all selected elements. Also, selected elements will have a series of 9 transformation pips displayed around them for transforming the selected elements.

Multiple elements can be selected if "allowMultipleSelection" is true, and the SHIFT or CTRL key is down while elements are moused down.

Selected elements can be retrieved via the "selectedElements" property, and selection can be cleared via clearSelection() or by setting the "selectedElements" property to null.

Dragging

If the "dragEnabled" property is true (default true), then selected elements can be dragged.

Excluded Pips

Use the "excludedPips" property to exclude certain pips from selected elements and remove certain transformation options. Supply an array with values ranging from 0 (NORTH_WEST) to 7 (WEST) and 8 (ROTATE).

• 0 = NORTH_WEST
• 1 = NORTH
• 2 = NORTH_EAST
• 3 = EAST
• 4 = SOUTH_EAST
• 5 = SOUTH
• 6 = SOUTH_WEST
• 7 = WEST
• 8 = ROTATE

Transformation Modes

"none" applies no transformation and does not display the transformation pips.

"postScale" applies transform scaling to the selected element(s) after applying all other transformations. This mode can add large amounts of skew to transformed elements. This is the only mode allowed when multiple elements are selected.

"preScale" mode applies scaling before applying any other transformations and does not change the element's skew.

"explicit" applies changes in size to explicit width and height values. "explicit" is useful for text or containers when distortion is not desired. The element's scaling is not changed and the element's minWidth, maxWidth, minHeight, and maxHeight settings will be respected.

"postScale" allows the user to skew elements while "preScale" and "explicit" mode will not add additional skew.

The default transformMode is "preScale".

For multiple selection, this property is irrelevant. If multiple elements are selected, the "postScale" transformMode is applied automatically.

Locked Aspect Ratio

To resize elements and maintain the aspect ratio, either set the "lockAspectRatio" property to true or hold down the SHIFT key while transforming.

z Level

To change the z level of elements, use their "depth" property.

Layout

The TransformContainer does use a Spark layout class for layout to support depth and proper child initialization.

Thus, avoid providing elements with anchor layout settings. This will give child elements the freedom to be dragged around and transformed.

For example, avoid:

<shapes:Star top="10" width="50%"/>

In the example above the layout would alter user changes to the "y" position of the elements and its width. Instead use the following:

<shapes:Star y="10" width="200"/>

Focus

When selected elements are de-selected, they will lose focus.

Cursors

The TransformContainer uses 3 custom cursors:

The Resize Cursor is defined by the "resizeCursorFactoryPart" skin part. The reason this cursor uses a skin part is so that it can be transformed to align with rotated elements.

The Rotate and Move cursors are defined in CSS. See the "rotateCursor" and "moveCursor" styles.

All cursors are routed through the NativeCursorManager for native display.

Selected Custom Events

HOVERED_ELEMENT_CHANGED
flash.events.Event
Dispatched when the hovered element changes.

CHANGE
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched when the selection changes.

ELEMENT_DRAG_START
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched when a visual element drag begins.

ELEMENT_DRAGGING
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched while a visual element is being dragged.

ELEMENT_DRAG_END
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched when a visual element drag ends.

TRANSFORM_DRAG_START
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched when a transform begins.

TRANSFORM_DRAGGING
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched when a transform is in progress.

TRANSFORM_DRAG_END
ardisia.components.transformContainer.events.TransformContainerEvent
Dispatched when a transform ends.

Selected Custom Styles

rotateCursor
Embedded graphics class for the cursor used to rotate layers. If not set, will use the DefaultCursor.

moveCursor
Embedded graphics class for the cursor used to move layers. If not set, will use the DefaultCursor.

borderVisible
default true
True to display a border.

Themes & Skinning

Skins and styles are provided for the Spark theme.

Example

See the TransformContainer demo application for example code.

Back To Top