documentationfor yFiles for HTML 2.6

AlignmentStage

AlignmentStage places the nodes of the given layout on automatically determined horizontal and/or vertical lines.

Inheritance Hierarchy
LayoutStageBase
AlignmentStage
Implemented Interfaces

Remarks

The AlignmentStage arranges the nodes on vertical and horizontal lines that are derived from the given layout. It can be used to automatically snap nodes to the same x- or y-coordinates to obtain a grid-like structure. When rearranging the layout, the stage moves the nodes as little as possible.

Input graph. The nodes have been horizontally and vertically aligned.

Concept

The nodes are aligned on heuristically determined lines in two phases.

In the first phase, the nodes are assigned to lines such that the following criteria are taken into account:

  • The nodes maintain their order along the x- and y-axis, if possible.
  • Nodes that are assigned to the same grid line have similar coordinates in the initial layout.
  • The number of lines is minimized.

In the second phase, the positions of these lines and consequently their assigned nodes are determined. The positions are chosen such that the overall movement of the nodes is minimized.

Features

Alignment policy

AlignmentStage supports the alignment of the nodes in horizontal direction, vertical direction or in both directions. The mode is determined by the alignment policy. If a single direction, i.e., SNAP_X or SNAP_Y is selected, the nodes do not move in the orthogonal direction. The nodes have been aligned horizontally, but not vertically.

Snap Distance

The snap distance can be used to balance the trade-off between maintaining the initial graph layout and the grid-like structure produced by the stage. More specifically, the snap distance describes the maximum distance between two nodes that may still be snapped to the same grid line. Therefore, large snap distances produce a more emphasized grid structure, while giving up more of the initial layout compared to smaller snap distances.

Minimum Node Distance

The minimum node distance determines the compactness of the result. The distance is enforced in the same direction as the nodes are snapped to (horizontal, vertical, both). It prevents any two nodes on different grid lines from being placed closer to one another. The minimum node distance is set to 15px. The minimum node distance is set to 80px.

Stripe Separation

If stripe separation is enabled, the nodes of two consecutive grid lines are strictly separated by a line L that has the same orientation as the two grid lines, i.e., the nodes of the two grid lines lie on opposite sides of L. For example, when aligning nodes horizontally with stripe separation, the nodes of two consecutive grid lines are separated by a horizontal line H such that the nodes of one grid line lie above H and the others lie below H. Further, if stripe separation is enabled, the minimum node distance is enforced such that any two nodes of different grid lines are separated by at least the given distance. The nodes have been aligned horizontally and vertically using alignment separation.

Node Halos and Node Labels

The automatic alignment stage supports node halos as well as considering node labels when calculating the distances between nodes.

Node Overlaps

In case that nodes mutually overlap, applying the stage will resolve these overlaps resulting in a layout without overlaps. However, no guarantees are given how the nodes are rearranged such that it may lead to undesired artifacts. Generally, it is recommended that the initial layout should be free of node overlaps and adhere to the specified minimum node distance as much as possible. To that end, an overlap removal stage can be applied to the layout before this stage.

Default Values of Properties

alignmentPolicySNAP_X_YNodes are aligned horizontally and vertically.
considerNodeLabelstrueNode labels are considered for resolving overlaps when determining the alignment of the nodes.
gridSpacing0.0Nodes are aligned on an irregular grid.
minimumNodeDistance15.0
separateStripesfalseRows and Columns are not strictly separated and may overlap.
snapDistance50.0

Type Details

yfiles module
layout-core
yfiles-umd modules
All layout modules, view-layout-bridge
Legacy UMD name
yfiles.layout.AlignmentStage

See Also

This stage is particularly designed as a post-processing step for layouts without overlapping nodes. In case that the input layout has overlapping nodes, this stage may lead to large displacements of the nodes.

Partition Grid

The automatic alignment stage supports the use of a partition grid. It is required that the nodes do not span multiple cells. In particular, it is required that the child nodes of a group node are assigned to the same cell as the group node. In case that the alignment stage is applied only to one dimension, the partition grid is only changed in that dimension, while the other dimension remains unchanged.

Constructors

Properties

Methods

Constants