Adorners

CGI Studio には、レイアウター内のノードを簡単に操作するために、装飾を使用するオプションが用意されています。装飾ギズモは、レイアウトカテゴリの垂直方向の配置、水平方向の配置、サイズ、マージン (左、上、右、下)、および変換カテゴリの位置のプロパティに影響を与える可能性があります。この編集は、ノードプロパティの値を手動で変更しなくても、マウスとキーボードを使用して実行できるようになりました。

レイアウト編集モードを有効にする

レイアウト編集モードに入るには 2 つの方法があります。1 つ目は、メニューバーから専用のアイコンをクリックすることです。

2 番目のオプションは、'L' キーを押すことです。

アドナーギズモをアクティブにするには、次の条件の少なくとも 1 つを満たす必要があります。

ノードの親は、BaseLine、Grid、Overlay、Stack、または DockPanel タイプの Layouter です。
ノードは 9-Patch イメージを持つ 2D ビットマップノードです
ノードは Canvas Sprite で、9-Patch 画像が設定された Texture があります
ノードは 2D TextNode または 3D Canvas Text です。

そのため、9-Patch 画像とテキストノードの場合、ノードがレイアウターの外にある場合でもギズモは機能します。他のタイプのノードの場合、装飾ギズモを選択する効果は、[選択] 編集モードでクリックして選択するのと同じです。

アドナーギズモがアクティブな場合、要素は、コーナーとエッジの中央に 8 つのアクティブポイントを持つ破線の長方形で囲まれます。ノードがレイアウター内にある場合、4 つの小さなチェーンボタンもレイアウト領域の端に表示されます。オレンジ色の円はピボットポイントを示します。黄色の四角形は、レイアウタータイプとそのプロパティに基づいて計算されるレイアウト領域を表します。

: 3D では、ギズモを使用しても、変換可能なプロパティの Z 軸の値は変更されません。

ノードの移動

ノードにカーソルを合わせると、カーソルが変化します。

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

この機能の前提条件は、 File -> Preferences -> Editor -> 2Dで Snap to Objects オプションを有効にすることです。レイアウト編集モードの場合、ドラッグされたオブジェクトは、スナップ感度に基づいて、同じレイアウトスペース内の他の兄弟ノードだけでなく、レイアウトエリアにも配置されます。

上の画像では、水平の青い線は、右側のテキストノードがレイアウト領域の下端にスナップしていることを表しています。垂直の青い線は、左側のテキストノードに対する右側のテキストノードのスナップを表します。

: ノードに回転がある場合、同じ回転を持つ他のノードに対してのみスナップします。