The SDON Cookbook

13/17 Page

Arranging Shapes in Rows and Columns

Using the ShapeContainer object allows you arrange a collection of shapes in a row across the page.

One example where you might want to do this is an application where you read a list of tables from a database and you want to represent them as a list of shapes. You could show this list as a row of shapes across the page using a ShapeContainer.

The one shape in the SDON object has a ShapeContainer property with a Shape defined for each shape in the row:

{
"Shape": {
"ShapeContainer": 
                {
                 "Arrangement":"Row",
                 "Shapes": [
                           {"Label":"Table 1"},
                           {"Label":"Table 2"},
                           {"Label":"Table 3"},
                           {"Label":"Table 4"},
                           {"Label":"Table 5"},
                           {"Label":"Table 6"},
                           {"Label":"Table 7"}
                           ]
                }
       }
}
SDON shape row

Note that the ShapeContainer has an Arrangement set to "Row". By default the ShapeContainer Arrangement is "Square" which attempts to make a square matrix arrangement. Omitting the "Arrangement" property, or replacing it with "Arrangement":"Square" gives:

SDON rows and columns

You can control the maximum number of shapes in each row using a "Wrap" property combined with the Row Arrangement. Here we set the rows to wrap at every fourth shape:

{
"Shape": {
"ShapeContainer": 
{
"Arrangement":"Row",
"Wrap":4,
"Shapes": [
{"Label":"Table 1"},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5"},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
}
SDON shape two rows

Setting the Arrangement to "Column" gives:

{
"Shape": {
"ShapeContainer": 
{
"Arrangement":"Column",
"Shapes": [
{"Label":"Table 1"},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5"},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
}
SDON shape column

The Wrap property can also be used to control the maximum number of shapes in a column.

Hiding the Parent Shape

In our example of showing a shape for each table in a database you probably don't want to actually display the parent shape as a border around the seven shapes. You can remove the parent shape using the "Hide" property:

{
"Shape": {

"Hide":true,
"ShapeContainer":
{
"Arrangement":"Row",
"Shapes": [
{"Label":"Table 1"},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5"},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
}
SDON row hidden parent

Controlling the Spacing Between Shapes

By default the space between each shape in a ShapeContainer, and the space between the shapes and their container is 0,5 inches (50/100). The ShapeContainer properties HorizontalSpacing and VerticalSpacing are used to override the default of 50/100.

{
"Shape": {
"ShapeContainer": 
{
"HorizontalSpacing":25,
"VerticalSpacing":75,
"Shapes": [
{"Label":"Table 1"},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5"},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
}
SDON row spacing

Arranging Shapes that are Different Sizes

In all of our examples so far the shapes in the ShapeContainer are all the same size but in most applications this is not true. If shapes of different height are in the same row how are they arranged relative to each other? Likewise for shapes with different widths in a column.

Rows of shapes with different heights can be arranged so their tops, middles or bottoms align. You control this with the "ShapesAlignV" property of the ShapeContainer. This is "Top" by default.

Columns of shapes with different widths can be arranged so the lefts, centers or rights align.You control this with the "ShapesAlignH" property of the ShapeContainer. This is "Center" by default.

The following script shows the default behavior.

{
"Shape": {
"ShapeContainer": 
{

"Shapes": [
{"Label":"Table 1","MinHeight":150},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5","MinWidth":300},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
}
SDON row shape sizing

Setting "ShapesAlignV" to "Middle" and "ShapesAlignH" to "Left" gives this:

{
"Shape": {
"ShapeContainer": 
{
"ShapesAlignV":"Middle",
"ShapesAlignH":"Left",
"Shapes": [
{"Label":"Table 1","MinHeight":150},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5","MinWidth":300},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
}
SDON row shape sizing

Drawing Lines Between Shapes in a Container

Extending our example of shapes representing tables in a database, we might want to connect shapes with a line showing relationships between tables. For example suppose there is a one to many relationship between Table 1 and Tables 5 and 7.

You create these lines using the "Returns" array.

{
"Shape": {

"Hide":true,
"ShapeContainer": 
{
"Arrangement":"Row",

"Wrap":4
"Shapes": [
{"Label":"Table 1"},
{"Label":"Table 2"},
{"Label":"Table 3"},
{"Label":"Table 4"},
{"Label":"Table 5"},
{"Label":"Table 6"},
{"Label":"Table 7"}
]
}
}
"Returns":[{"StartID":1,"EndID":2,"EndArrow":8,"EndDirection":"Top"},
           {"StartID":1,"EndID":3,"EndArrow":8,"EndDirection":"Top"}]
}
SDON shape row with connectors

Note that the "EndArrow" is one of the custom arrowheads (8).

13/17 Page