2D Laying Out
Laying out is a feature specific to 2D scenes. Once a layout is applied to a 2D group, all children of that group will be affected by the given layout strategy.
-
If the user does not want any laying out support, thus normal editing procedure is applied and no laying out is set. If the user enables laying out for some nodes, and he does not want to move by mistake any of the child nodes which are laid out, the "strict laying out" option can be enabled from File-Preferences menu, Editor - 2D section. On-demand laying out is available by pressing CTRL+ L or by calling "Edit" > "Do-Layout" menu option to trigger Candera to layout all objects in the scene
Candera supports four built-in layouts: Stack, Grid, Baseline, Overlay, and DockPanel each layout having some specific configuration parameters.
General Layout Properties
The following properties can be set to any node which is arranged by a parent layouter.
A layout can only be set on a group, having some specific properties, while final laying out is determined by the properties set on all the arrangeable items that are contained in any group on which a layout was set.
After the creation of a layout, the borders of the grid cells - including bounding boxes - can be visualized simultaneously in the Scene editor. Actually, the border of every cell of the layout will be visible as a yellow line.
This border is visible if the entire group is selected or if just one single cell is selected.
Two different secondary borders - the bounding box of the parent node, and the bounding box of the effective node - will be visible, marked with blue, if some values are set.
The effective bounding box will become visible if layout values - like margin of the element - are added in Properties panel.
Row, Column Number
If the parent layout is a grid, the elements position in the grid can be changed. This has same effects like arranging a node in the Grid Editor Dialog.
Alignment
Vertical Alignment: Each layout-able element can specify its vertical alignment inside the area which is available by the parent layout.
The sample images below were created using an OverlayLayout (sized 200x100px) containing an image (sized 151x52px). The image's StretchBehavior property is set to Uniform and its HorizontalAlignment remains at the default value.
To demonstrate the impact of different VerticalAlignment settings, this property has been varied across all options (from VTop to VStretchBottom).
Horizontal Alignment: Each layout-able element can specify its horizontal alignment inside the area which is available by the parent layout.
The sample images below were created using an OverlayLayout (sized 100x200px) containing an image (sized 52x151px). The image's StretchBehavior property is set to Uniform and its VerticalAlignment remains at the default value.
To demonstrate the impact of different HorizontalAlignment settings, this property has been varied across all options (from VLeft to VStretchRight).
Size
Specify a fixed size for an element by setting the width and height. In case the element won't be asked for its preferred size.
- Note:
- Minimum Size and Maximum Size is taken into account! If the preferred size of the element should be taken set value -1;-1.
Minimum Size: An element won't get smaller than its minimum size.
Maximum Size: An element won't get larger than its maximum size. If more space is available, it will be placed according to its alignment parameter (see above).
-
A fixed size can be defined by setting the same values for minimum and maximum size. (tbd: default value)
Margin
The margin for an element defines some extra space around itself. Different values can be set for left, top, right and bottom margin.
Stretch Behavior
If the items size (size of an image, text, or colored rectangle) is smaller than the available space one of the following stretch behaviors can be set:
- None: The item will not be stretched; it will be rendered in its original size,
- Fill: The item will be stretched (or shrunk) to fill the exact available space.
- Uniform: The original aspect ratio of the item will not be changed, but all of the item will be shown. Therefore the item might not fill the whole width or height of the available space.
- UniformToFill: The original aspect ratio of the item will not be changed, but the whole available space will be filled. The image will be cut off on the right or bottom side, when Candera_Layout_Clipping is enabled.
Stack Layout
The layout type "Stack" realizes a stacked laying out either in horizontal or vertical direction. The order of the stack elements is given by the order of the child nodes within the laid out group.
Configuring the Stack Layout:
- Select the Group holding the nodes to be laid out in the Scene Tree panel
- Choose LayoutType "Stack" from the Properties panel
- Choose "Horizontal" or "Vertical" value for property Arrangement in the Properties panel, depending on the desired laying out
- Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the Edit - Do-Layout menu
Grid Layout
In a Grid layout, every node part of the laid out group is assigned to a cell of the grid. A Grid Layout Editor is available to configure the grid and to arrange nodes in the grid's cells by drag & drop operation.
Configuring the Grid Layout:
- Select the Group holding the nodes to be laid out in the Scene Tree panel
- Choose LayoutType "Grid" from the Properties panel
- Optional: Set the number of rows and columns of the grid by editing the properties RowCount and ColumnCount in the Properties panel
- Use the context menu item "Configure Layout" on the selected Group in the Scene Tree panel to open the "Grid Layout Editor" dialog
Optional: Use the buttons "+","-" to configure the desired number of rows and columns in the "Grid layout editor" dialog, if not done already in the Properties panel.
Arrange the nodes of the group in the grid's cells by drag & drop operation.
Configure width and height for rows and columns by editing the values on the border of the grid. Values within the range [0...1] are considered as percentages and values greater than 1 as dimensions.
Confirm the layout configuration by pressing the "OK" button of the dialog "Grid layout editor".
Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the "Edit" > "Do-Layout" menu.
See also:
Baseline Layout
The layout type "Baseline" realizes a stacked laying out in the horizontal direction. It behaves similar to the Horizontal Stack Layout. The major difference consists in its given reference: it aligns the objects to a line instead of aligning them to the client area. The main purpose of this layouter is to align different sizes formatted texts along the same baseline. For instance, if the center is chosen for alignment, the baseline of the text will be aligned to the given line (= baseline offset). The order of the elements is given by the order of the child nodes within the laid out group.
Configure the Baseline Layout by following these steps:
- Select the Group holding the nodes to be laid out in the Scene Tree panel
- Choose LayoutType "Baseline" from the Properties panel
- Set any value for property Base Line Offset in the Properties panel, depending on the desired laying out
- Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the Edit - Do-Layout menu
See also:
Overlay Layout
The layout type "Overlay" arranges the objects by laying out them on top of each other or by aligning the nodes according to their general layout properties. The order of the elements is given by the order of the child nodes within the laid out group.
Configuring the Overlay Layout:
- Select the Group holding the nodes to be laid out in the Scene Tree panel
- Choose LayoutType "Overlay" from the Properties panel
- Call the Do-Layout command using the shortcut keys "Ctrl+L" or from the Edit - Do-Layout menu
See also:
DockPanel Layout
The "DockPanel" layout provides a layout area within it is possible to arrange child elements around the edge of the screen based on four direction: Top, Bottom, Left, and Right.
This type of layout arranges the elements by laying out them in the remaining space after the previous element was set. To dock an element to the center of the panel, it must be the last child of the panel.
Configure the DockPanel Layout by following these steps:
- Select the Group holding the nodes to be laid out in the Scene Tree panel
- Choose Layout Type "DockPanel" from the Properties panel
- For any node inside the Group a new property will become available: "Dock Side". Select it and choose any of the fours available laying outs: "DockLeft", "DockTop", DockRight", "DockBottom".
See also: