Node Alignment

This demo shows how to automatically align nodes in rows and columns using the AlignmentStage layout algorithm.

The AlignmentStage assigns nodes to rows and columns and places all nodes in a column/row centered on a vertical/horizontal line. Two nodes belong to the same column/row, if the horizontal/vertical distance between the centers of said nodes is less than or equal to the value of the snapDistance property.

When aligning nodes, the horizontal distance between nodes in a shared row and the vertical distance between nodes in a shared column can only increase. As a result, reducing the minimumNodeDistance will not move existing rows and columns closer together.

Things to Try

• Drag a node template from the demo's palette into the demo's graph component. While dragging the template over the graph component, gray columns and rows are shown in the background. These stripes represent the snap distance to the vertical and horizontal lines of alignment for the existing rows. Dragging the mouse into one of these stripe will turn the corresponding stripe into a darker shade of gray. Dropping the template inside a darkened stripe will force the new node and the existing nodes in that stripe to be aligned.
• Click on free space to create a new node or move a node to another position. If the center of this node is close enough to an existing node, the nodes in the graph will be aligned automatically.
• Change one of the property values in the Settings panel and observe how the graph is re-aligned. Since AlignmentStage only increases distances between nodes, decreasing the Minimum Node Distance will have no immediate effect.