Layout Grid

This demo application lets you experience the usage of a LayoutGrid for hierarchical and organic layout calculations.

Nodes are assigned to columns/rows by their fill color (gray nodes are unassigned) and the calculated layout grid is visualized after a layout run to show the effect of the node assignment to the layout.

Things to Try

• Click the Hierarchical or Organic button of the toolbar to trigger the corresponding layout algorithm based on the current node assignment. Note that, the Organic layout does not support stretching of a group node if it contains child nodes assigned to different rows or columns. In this case, the Organic layout button will be disabled.
• Change the layout cell of a (non-gray) node by moving it to a different layout cell. For the gray nodes that do not have currently active restrictions, select the desired ones and press the grid_4x4-button from the toolbar to add restrictions based on their current location. Then, move them to other layout cells, if desired. Nodes that are positioned outside the layout grid do not receive a restriction.
• Add/remove active restrictions to/from the selected nodes, using buttons grid_4x4 or remove of the toolbar.
• Configure the layout grid using the settings panel on the right.
• Remove a row/column from the layout grid, by right-clicking on a cell that belongs to the desired row/column and use the "Delete Row" or "Delete Column" of the settings panel on the right.