Layout operates in a context, which is the siblings of the bind:layout element.
Every sibling element with graphical content (anything visual) with the same bind:group is part of the layout.
Any relationships between the elements (parent-child, and so on) are visible as lines drawn between the visual elements.
Because layout operates on siblings it is common to place the layout command within a group:
<g>
<bind:layout name="tree"/>
<rect bind:container="true" width="1"
height="1" stroke="blue" fill="none"/>
<rect width="50" height="25"/>
<circle r="25" stroke="blue" fill="none" />
</g>
The bind:layout operates against the second rectangle and the circle. The first rectangle has bind:container=true specified. When a rectangle is tagged with bind:container, it is excluded from the layout. After layout is completed the bound of the laid-out graphics is computed, and the container rectangle is stretched to fit around them. This provides a convenient way of wrapping automatically laid-out graphics.
It’s frequent to want only the wrapping behavior and no other layout. Just specify name="wrap" in your bind:layout command if you want this. We often want to apply automatic layout to only those elements that have been automatically generated by a variant of the bind:template element.
You can place the bind:layout element inside a bind:template (or bind:children) element, as follows:
<g>
<bind:children graphic="Nodes__Classic#node" depth="2">
<bind:layout name="ortho"/>
</bind:children>
<rect bind:container="true" width="1" height="1"
stroke="blue" fill="none"/>
<circle r="25" stroke="blue" fill="none" />
</g>
The rect and circle elements are not automatically laid out. Only visual elements generated by the bind:children command are.
Bind layout attributes:
resize: Most layout methods move the child objects, as necessary.
It is often desirable that a parent figure wrap the children, after layout.
By default the bind engine attempts to resize the parent object; otherwise, it searches for a bind:container element.
bind:group: Group tag for elements that should be laid out.
As with templates, a default group is present.
name: Uses the named layout algorithm.
First, this looks for saved layouts. If an appropriate layout is found, it is used. Otherwise, the following are possible:
tree
hier
circle
balloon
grip
organic
grid
|
Property |
Default |
Description |
|---|---|---|
|
columns |
4 |
The number of columns in the grid. |
|
columnWidth |
100 |
The width of the columns that are created. |
|
rowHeight |
130 |
The height of the rows that are created. |
|
gap |
5 |
Gap between rows and columns. |
wrap
Wraps a rectangular shape around the other children being laid out.
This is generally used to surround a group of child objects with a rectangle after the child objects have been laid out.
The rectangular object should have the bind:container attribute set to True so wrap will know which shape to adjust.
|
Property |
Default |
Description |
|---|---|---|
|
pad |
3 |
Sets overall padding when wrapping a rectangular shape around another. |
|
xpad |
0 |
Sets padding on the left and right when wrapping. |
|
ypad |
|
Sets padding on the top and bottom when wrapping. |
flow
|
Property |
Default |
Description |
|---|---|---|
|
width |
400 |
If specified, ensures that the resulting layout will be the specified width. This is an easy way to flow a series of elements into a grouping, which will wrap if they cannot fit into the width specified. |
border
When border is specified, the child elements can have a constraint attribute. This attribute should be one of north, east, south, west, or center.
Elements on the edges are pushed to that edge. The element labeled center occupies the rest of the space.
table
If none is specified, a default of hier is used.
Table performs box layout on subelements. The syntax is somewhat different from a conventional table layout, as we should ensure that the SVG engine can “see” the graphic elements we are arranging. Instead of putting our graphical elements inside and elements, we put our table bindings inside the graphical elements. If a width or height attribute is provided for a tableRow or tableColumn, that row or column is set to that width. Otherwise, the maximum height and/or width for the column/row is used.
<g> <rect bind:container="true" width="100" height="100"/> <bind:layout name="table"/> <g> <bind:tableRow/> <text>Column 1</text> <text>Column 2</text> <text>Column 3</text> </g> <g> <bind:tableRow/> <g><circle radius="25"><bind:condition/></circle></g> <g><circle radius="50"><bind:conditiongradient/></circle></g> <g> <bind:layout name="table"/> <g> <bind:tableRow/> <text>Column 1</text> <text>Column 2</text> <text>Column 3</text> </g> </g> </g> </g>
path: An element reference (as above, minus 3 and 4). If specified, it indicates that the cloned objects are laid out alone the specified shape’s path. Implies type="path".
spacing: One of alpha, log, sigma, or a number indicated the fixed spacing number to use.
When cloned objects are laid out along a path, the specified curve is used to distribute them.
If a fixed spacing number is provided, objects are spaced according to that until the length of the path is used up. Subsequent objects are discarded.
stroke: As in SVG, specifies the stroke paint used to draw connections. This can be a color, or any other legal SVG paint.
stroke-width: As in SVG, specifies the width of the strokes used to draw connections.
stroke-opacity: Transparency of connection strokes.
stroke-dasharray: Specifies dash pattern for connections.
stroke-dashoffset: Dash pattern offset for connections.
stroke-linecap: Endpoint specification for connections.
stroke-linejoin: Join specification for connections.
stroke-miterlimit: Miter spec for connection joins.
marker-start: Start point marker.
marker-mid: Marker used for each vertex on connectors, except the first and last.
marker-end: Marker used on the last point of a connection.