Manipulating Components
Manipulating components can be done with both the mouse and the keyboard. You can move components around, resize them, and rotate them.
Moving
To move the component, click on it once then drag it anywhere within the container's bounds.
Resizing
When you click on the component you want to resize, you'll see eight handles displayed around the edge of the selection. When you click on a handle, the mouse cursor will change to a two-way arrow. Use the mouse to drag the handle and change the size of the component. You can also select multiple components and resize them together. To resize around the center of the current selection, hold down Shift.
You can also resize the current selection using the keyboard. To nudge the right or bottom edge of the selection in or out, use Shift combined with the arrow keys, which resizes by the nudge distance, which defaults to one pixel at a time. To nudge the top or left edge of the selection, use Ctrl-Shift combined with arrow keys.

Aligning
New alignment tools are available in the Perspective Designer Toolbar. These tools allow easy alignment of selected components within a Coordinate container including align top, bottom, left, right, as a row, and as a stack. Align as row, and align as stack include a normalize version, that adjusts the size of the selected components to match the component that was selected first. Rotated components being aligned will correctly align along the top-most, bottom-most, left-most, right-most point of the rotated component. If a rotated component is being normalized is within the group that is being aligned, normalizing the component will adjust the pre-rotated dimensions.
Icon | Function | Description |
---|
| Align Left | Align the left edges of a group of components. |
| Align Right | Align the right edges of a group of components. |
| Align Top | Align the top edges of a group of components. |
| Align Bottom | Align the bottom edges of a group of components. |
| Align Centers Horizontal | Aligns all of the selected components horizontally on their centers. |
| Align Centers Vertical | Aligns all of the selected components vertically on their centers. |
| Align as Row | Aligns all of the components on their centers as a row, and will add padding between them that you can select. |
| Align as Row and Normalize | Aligns all of the components on their centers as a row, and changes the size of all of the components to the first selected component. If a rotated component is within the group that is being aligned, normalizing the component will adjust the pre-rotated dimensions. |
| Align as Stack | Aligns all of the components on their centers as a stack, and will add padding between them that you can select. |
| Align as Stack and Normalize | Aligns all of the components on their centers as a stack, and changes the size of all of the components to the first selected component. If a rotated component is within the group that is being aligned, normalizing the component will adjust the pre-rotated dimensions. |
| Center Horizontally | Centers the currently selected components horizontally. |
| Center Vertically | Centers the currently selected components vertically. |
Align and Normalize Example
Click here for the Align and Normalize Example
Alignment Guides
When you drag a component near another component in a container, Alignment Guidelines appear to help you better align your elements.
- A dashed red line will appear to guide alignment to the center of the components or to the right or left edge, depending on where you drag.
- A solid red line indicates distance, in pixels, between components.

The Designer also has Vertical and Horizontal guide that can be set up to help you align components. For more information, see Vertical and Horizontal Guides.
Alignment Guides Example
Rotating
Components place on coordinate containers can be rotated. The Rotate property is located on Position Properties section of the Perspective Property Editor. For a definition of all the position properties see the individual container pages. Rotated components being aligned to other components will correctly align along the top-most, bottom-most, left-most, right-most point of the rotated component.
There are two ways to rotate a component:
- Enter a rotation angle in the props.rotate.angle property.
- Grab the rotation handle on the component and drag it with your mouse until the component is rotates as you'd like.
The rotation anchor sets the point of rotation around which the component will be rotated.
Note: If a component is smaller than 28px by 28px, the rotation handle and anchor + symbol are not displayed. Use the property editor to set rotation and anchor properties in this case.
Rotation Examples
Click here for the Rotation examples
Example 1
The following example shows icon component at default (no rotation), at 18 degrees rotation, and then at 39deg rotation with the rotation anchor (point of rotation) placed over the earth image. In the latter, the icon has a better angle in relation to the earth graphic.

Example 2
If a rotated component is within the group that is being aligned, normalizing the component will adjust the pre-rotated dimensions. The component on the left of the following image are not aligned but were resized at some point. The components on the right show what they look like after align stack and normalize.
