Adorners

CGI Studio offers the option to use adorners for an easy manipulation of the nodes inside layouters. The adorners gizmos can affect the following properties: Vertical Alignment, Horizontal Alignment, Size and Margin(Left, Top, Right, Bottom) in the Layout category and the Position in the Transformations category. This editing can now be done using the mouse and keyboard without having to manually change the node properties values.

Enable layout edit mode

There are two ways to enter in the layout edit mode. The first one is to click on the dedicated icon from the menu bar:

The second option is to press the 'L' key.

In order for the adorners gizmo to be active, it is also required to meet at least one of the following conditions:

the parent of the node is a Layouter of type BaseLine, Grid, Overlay, Stack or DockPanel
the node is a 2D Bitmap Node with a 9-Patch image on it
the node is a Canvas Sprite and has a Texture with a 9-Patch image set on it
the node is a 2D TextNode or a 3D Canvas Text.

So for 9-Patch images and text nodes, the gizmo works even when the node is outside of a layouter. For other types of nodes, the effect of selecting the adorners gizmo will be the same as selecting clicking on the Select edit mode.

When the adorners gizmo is active, the element is surounded by a dashed rectangle with 8 active points on its corners and middle of edges. If node is inside a layouter 4 small chain buttons also appear on the edges of the layout area. The orange circle indicates the Pivot Point. The yellow rectangle represents the layout area which is computed based on the layouter type and its properties.

: In 3D the usage of the gizmo does not change the Z axis values on any of the transformable properties.

Moving nodes

When hovering over the node, the cursor changes.

The adorners gizmo allows to drag the object around, just like in translation mode. If inside a layouter, the Margin property of the node is changed together with its Position. It is also possible to move the object using the keyboard by holding the Shift key and then pressing any of the arrow keys.

: While moving an object using the adorners gizmo, if the object is dragged over another layouter, the user will not have the option to switch the layout parent of the dragged object.

Aligning and resizing nodes

The active points on the dashed rectangle can be dragged to change the Layout Size and Margin and/or Position of the node. Pressing the Shift key while dragging active points causes the gizmo to function differently. For example if the Shift key is pressed when dragging upward the upper middle active point of a node inside a stack layouter, the effect will be the same as if manually changing the Layout Size property and keeping the same Position. If the Shift key is not pressed and the upper middle active node is dragged upward, then both the Layout Size and Position of the node will be modified.

: The effect of the Shift key and the functioning of the adorners in general depends on whether the size properties of the layouter and its children are auto or not and on the layout type. The current document does not aim to explain all the possible combinations of properties.

The chain buttons allow the user to set the desired Layout Vertical Alignment and/or Horizontal Alignment. By default all chains are enabled (closed). Breaking (opening) one chain (the left for example) will close the one opposite to it (the right one in the example), unless the Shift key is pressed. So in order to be able to open both left and right chains, the Shift key needs to be used.

Left chain	Right chain	Horizontal Alignment
closed	closed	Stretch
closed	open	Left
open	closed	Right
open	open (use Shift key)	Center

The same logic goes for the top and bottom chains.

When the node is inside a layouter, the chains buttons have values next to them. If the chain is open, then no value is shown.

: The values next to the chain nodes indicate the effective distance in pixels between the layouter area edges (arrange area) and the edges of the dashed rectangle of the node.

These values are always positive and are not the same as the values of the Margin properties which can be negative. The chain values stay the same even when the scale of the parent layouter or its ancestors changes.

: If the LayoutDirection of the parent layouter is changed, then the behavior of the gizmo is going to be adapted according to the new direction. For instance, if the LayoutDirection of the parent layouter changes from LeftToRightDirection to RightToLeftDirection, the gizmo functionality will be horizontally reversed. So if a node was previously Left aligned, it will become Righ aligned.

The current culture Text Direction also affects the the LayoutDirection of text nodes. When changing the current culture from a left to right culture to a right to left one, an initially Left aligned node, will become Right aligned.

: While editing the node using the adorners the status bar shows the values of the property being modified (Size when dragging active points, Position when moving the node inside the layout area).

Snapping of 2D Nodes

A prerequisite for this functionality is to enable the Snap to Objects option in File -> Preferences -> Editor -> 2D . When in layout edit mode, the effect will be to align the dragged object to the layout area as well as to other sibbling nodes in the same layout space based on the snapping sensitivity.

In the above image the horizontal blue line represents the snapping of the text node in the right to the lower edge of the layout area. The vertical blue line represents the snapping of the text node in the right relatively to the left text node.

: If the node has rotation, it will snap only relatively to other nodes having the same rotation.