2D Laying Out

Laying out is a feature specific to 2D scenes. Once a layouter 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 layouted, 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 layouters: Stack, Grid, Baseline, Overlay, and DockPanel each layouter 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 layouter 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 layouter was set.

After the creation of a layouter, 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 layouter 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 layouter 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

Horizontal Alignment: Each layout-able element can specify its horizontal alignment inside the area which is available by the parent layouter.

Vertical Alignment: Each layoutable element can specify its vertical alignment inside the area which is available by the parent layouter.

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 Behaviour

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.

Back to the menu

Stack Layouter

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 layouted group.

Configuring the Stack Layouter:

Select the Group holding the nodes to be layouted 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 Layouter

In a Grid layout, every node part of the layouted 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 Layouter:

Select the Group holding the nodes to be layouted 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 Layouter" 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 layouter 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:

Candera::GridLayouter

General

the

Stack Layouter

Grid Layouter

Baseline Layouter

The layout type "Baseline" realizes a stacked laying out in the horizontal direction. It behaves similar to the Horizontal Stack Layouter. 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 layouted group.

Configure the Baseline Layouter by following these steps:

Select the Group holding the nodes to be layouted 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:

Candera::BaseLineLayouter

Overlay Layouter

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 layouted group.

Configuring the Overlay Layouter:

Select the Group holding the nodes to be layouted 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:

Candera::OverlayLayouter

DockPanel Layouter

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 Layouter by following these steps:

Select the Group holding the nodes to be layouted 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:

Candera::DockPanelLayouter