Orthogonal Layout of Grouped Graphs

Class OrthogonalGroupLayouter is an orthogonal layout provider specialized for laying out grouped graphs.

Those parts of a graph that belong to the same group will be placed in a way that they share a common rectangular area in the layout space. The positions and sizes of these group nodes will be calculated by the algorithm.

The layout algorithm is well suited for medium-sized sparse graphs. It produces compact drawings with no overlaps, few crossings, and few bends.

Figure 10.59. Sample group layouts produced by class OrthogonalGroupLayouter

Sample group layouts produced by class OrthogonalGroupLayouter
Sample group layouts produced by class OrthogonalGroupLayouter
A diagram with four groups and edges connecting nodes within these groups. A diagram with grouped groups.

Supplemental Layout Data

Class OrthogonalGroupLayouter knows a number of data provider keys which are used to retrieve supplemental layout data for a graph's elements. The data is bound to the graph by means of a data provider, which is registered using a given look-up key. Table 10.45, “Data provider look-up keys” lists all look-up keys for OrthogonalGroupLayouter.

Binding supplemental layout data to a graph is described in the section called “Providing Supplemental Layout Data”.

Table 10.45. Data provider look-up keys

Key Element Type Value Type Description
GroupDpKey node bool For each node a boolean value indicating whether it is a group node or not.
NodeIdDpKey node object For each node an object that serves as a unique ID.
ParentNodeIdDpKey node object For each node an object indicating the group node it belongs to. The object matches the unique ID of a group node that is in the same graph.
GroupNodeInsetsDpKey node Insets For each group node an Insets object that encodes the group node's insets.
MinimumNodeSizeDpKey node YDimension For each group node a YDimension object that specifies the group node's minimum size constraint.
EdgeLabelLayoutDpKey edge LabelLayoutData[] For each edge an array of LabelLayoutData objects that encode size and preferred placement for all labels of the edge.
EdgeLayoutDescriptorDpKey edge EdgeLayoutDescriptor For each edge an EdgeLayoutDescriptor object that configures edge-related options.
NodeHaloDpKey node NodeHalo A NodeHalo object that specifies the halo sizes at each side of a node.
AbortHandlerDpKey graph AbortHandler An AbortHandler instance that will be queried by the layout algorithm to determine whether layout calculation shall be terminated.

Setup of a grouped graph's hierarchy of nodes (using GroupDpKey, NodeIdDpKey, and ParentNodeIdDpKey) is done transparently by the IGraph-related adapter mechanisms. See also the section called “Setup for Layout” and Chapter 8, Using yFiles for Silverlight Algorithms Functionality.

Layout Options

Unlike the more general orthogonal layout algorithm this specialized layout algorithm provides only a few options.

int Grid { get; set; }
Description Defines the virtual grid spacing used by the layouter. Each node will be placed in such a way that its center point lies on a grid point. Edges will be routed in such a way that their segments lie on grid lines, if the terminal nodes of the edges allow to place the ports accordingly.
Layout Quality
double LayoutQuality { get; set; }
Description Sets the desired layout quality. Higher values result in less connection crossings and smaller layout area, but also increased computation time.

The additional size requirements of group nodes (e.g., special insets or space for custom labels) can be specified by the use of a data provider that provides Insets objects for each group node. The data provider must be registered with the input graph using the key GroupNodeInsetsDpKey.

When calculating a layout for a grouped graph, OrthogonalGroupLayouter also supports minimum size constraints for group nodes. A minimum size constraint can be conveniently used in order for the group node to accommodate for the size of its label. If a data provider is registered with the graph using the look-up key MinimumNodeSizeDpKey, any minimum size constraints for group nodes held by this data provider are respected by default.

Class EdgeLayoutDescriptor can be used to specify further edge-related layout options. An instance of this class is held by OrthogonalGroupLayouter to store and retrieve default values for edges.

OrthogonalGroupLayouter provides access to the default EdgeLayoutDescriptor instance through:

Edge Layout Descriptor
EdgeLayoutDescriptor EdgeLayoutDescriptor { get; set; }
Description Edge-related layout options.

In addition to the instance held directly by OrthogonalGroupLayouter, layout descriptors can also be associated with single edges in order to specify individual settings for them. Setting individual descriptors for edges is done through a data provider that is bound to the graph. See Related Classes.

In addition to these options, OrthogonalGroupLayouter by default also supports node halos as soon as they are declared using the data provider key NodeHaloDpKey.

Label Handling

Besides the generic labeling support as described in the section called “Generic Labeling”, which is available with all yFiles layout algorithms, OrthogonalGroupLayouter additionally supports integrated labeling. Furthermore, it can also be set up to take node labels into account during layout.

Integrated Labeling

Integrated labeling is available for edge labels. They are taken into consideration when determining both node placement and edge path generation. With this strategy it is guaranteed that no edge label will overlap other objects in the diagram.

Integrated labeling can be enabled or disabled using the following property:

bool IntegratedEdgeLabeling { get; set; }
Description Determines whether integrated labeling is enabled.

See also the section called “Integrated Labeling”.


Optimal label placement with integrated labeling can be achieved using FreeEdgeLabelModel as the label model for the edges. As explained in the section called “Label Models”, this edge label model is ideally suited in combination with integrated labeling and yields the best match for a label location that is computed by OrthogonalGroupLayouter.

Node Label Awareness

OrthogonalGroupLayouter provides support for node label-aware orthogonal layout. Node labels do not need to be placed, but instead their size needs to be considered for the placement of adjacent graph elements. Taking node labels into consideration during layout calculation guarantees that they will not overlap nodes in the diagram.

Consider Node Labels
bool ConsiderNodeLabels { get; set; }
Description Enables node label-aware layout calculation.

Related Classes

Class EdgeLayoutDescriptor can be used to configure edge-related layout options. The following options can be set for edges:

Minimum Length of First and Last Segment
double MinimumFirstSegmentLength { get; set; }
double MinimumLastSegmentLength { get; set; }
Description Determine the minimum length of the first (at the source) and last (at the target) edge segment.

An EdgeLayoutDescriptor instance can be specified individually for single edges by means of a data provider that is bound to the graph. The data provider is expected to be registered with the graph using key EdgeLayoutDescriptorDpKey. In the absence of an individual descriptor for an edge, the default EdgeLayoutDescriptor instance that is registered with OrthogonalGroupLayouter will be used.

The following table lists the data provider look-up keys that are recognized by OrthogonalGroupLayouter in conjunction with individual layout settings for edges.

Table 10.46. Data provider look-up keys

Key Element Type Value Type Description
EdgeLayoutDescriptorDpKey edge EdgeLayoutDescriptor For each edge an EdgeLayoutDescriptor object that configures edge-related options.

Applicable Layout Stages

Table 10.47, “Layout Stages” lists layout stages that can be used to enhance the layout process of class OrthogonalGroupLayouter.

Table 10.47. Layout Stages

Classname Description
PolylineLayoutStage With class OrthogonalGroupLayouter as the core layouter, this stage adds octilinear edge routing to the diagram that results from the orthogonal layout calculation.

Tutorial Demo Code

The layout module class OrthogonalLayoutModule.cs from the LayoutModulesWindow demo application presents the setup of class OrthogonalGroupLayouter in an application context.