This layout algorithm arranges graphs in an orthogonal fashion.
Remarks
Layout Style
This layout algorithm arranges the nodes of a given graph such that each edge is drawn as an alternating sequence of horizontal and vertical segments.
It produces compact drawings with no overlapping nodes, few crossings and few bends and is well suited for small and medium-sized sparse graphs.
Orthogonal drawings are common in engineering applications since they are able to provide clear representations of complex networks that can also be optimal with respect to diverse objective functions such as bend minimization or area minimization. Application domains of orthogonal drawings include software engineering, database schema representation, system management, knowledge representation, VLSI circuits and floor planning applications.
This algorithm also optionally supports directed edge drawings (although not in combination with hierarchically nested graphs or the non-default layoutMode). Application domains of directed orthogonal drawings include, for example, software engineering, database schema and system management.
Also, this algorithm supports hierarchically nested graphs (although not in combination with the directed edge drawings, the from sketch option, or the non-default layoutMode):
Concept
The orthogonal layout algorithm is based on the topology-shape-metrics approach and runs in three phases:
- Planarization – A planar embedding is computed.
- Orthogonalization – The bends and the angles are computed.
- Compaction – The coordinates for the nodes and edges are determined.
Features
There exist several different main layout modes that the orthogonal layout algorithm supports depending on whether the edges should be routed completely orthogonally, or whether the original size of the nodes should be maintained. The modes are STRICT, FORCED_STRAIGHT_LINE, RELAXED, and can be specified via property layoutMode.
OrthogonalLayout is able to consider edge label data when arranging a graph. This means that the layout algorithm will determine the positions of the nodes and edges such that the edge labels do not overlap with the rest of the layout. Integrated edge labeling can be activated with the edgeLabelPlacement property.
OrthogonalLayoutEdgeDescriptor instances can be used for specifying individual information (e.g. distances) for each edge in the graph. The descriptors are bound to the graph via the layout data property edgeDescriptors. If there is no descriptor assigned to some edges, a default descriptor will be used. To set default descriptors, use defaultEdgeDescriptor.
OrthogonalLayout tries to optimize diverse objective functions such as bend minimization, number of edge crossings, edge length minimization or face maximization. Depending on the qualityTimeRatio and the specified time limit, all or only some of the optimization steps are executed.
For input graphs without group nodes, this layout algorithm is able to detect some specific substructures. If desired, it can handle and arrange them explicitly, making the structure easy to recognize. Supported substructures are trees, chains and cycles. See the corresponding style properties for details: treeSubstructureStyle, chainSubstructureStyle and cycleSubstructureStyle. For the detection of substructures, it is optionally possible to consider nodeTypes, such that only nodes of the same user-defined type can form a substructure.
This layout algorithm handles port placement constraints by applying the PortPlacementStage as a postprocessing step.
Layout Stages
This class provides a configurable pipeline that contains various ILayoutStages. Each ILayoutStage can incorporate preprocessing or postprocessing steps into the layout calculation to streamline the input graph and enhance the resulting layout. Additionally, custom ILayoutStages can be added and executed either before or after the predefined ones.
The following default ILayoutStages are included:
- PortPlacementStage: Assigns edges to ports. The property routeCorrectionPolicy is set to LOCAL_ORTHOGONAL.
- GroupHidingStage: Removes group nodes and their adjacent edges before layout processing, and reinserts them afterward. The property hidingEmptyGroupNodes is set to
falseand resetEdgePaths is set totrue. Note: This stage is disabled by default. - SubgraphLayoutStage: Filters a graph to include only specific nodes and edges from a subgraph while maintaining the positions of excluded elements. Note: This stage is disabled by default.
- ComponentLayout: Arranges graph components with customizable styles.
- GenericLabeling: Efficiently places node and edge labels. The property fillEmptyScope is set to
falseand stopDuration is set to ZERO. - OrientationStage: Changes the layout orientation in four possible directions, with or without mirroring on the x or y-axis. The property edgeLabelPlacement is set to IGNORE.
- SelfLoopRouter: Routes self-loops in a graph, allowing for either orthogonal or rounded routing styles. Note: This stage is disabled by default.
- ParallelEdgeRouter: Routes multiple edges between the same nodes in parallel. Note: This stage is disabled by default.
With these layoutStages the layout algorithm is configured well, so they usually don't need to be changed.
Default Values of Properties
| alignDegreeOneNodes | false | Degree-one nodes with the same neighbor are not aligned with each other. |
| chainSubstructureStyle | NONE | Chains are not handled explicitly. |
| cycleSubstructureStyle | NONE | Cycles are not handled explicitly. |
| edgeLabelPlacement | INTEGRATED | Edge labels are placed by the layout algorithm. |
| fromSketchMode | false | The initial coordinates of the nodes are not considered. |
| gridSpacing | 20 | |
| nodeLabelPlacement | CONSIDER | Node labels are considered. |
| qualityTimeRatio | 0.6 | Quality is a bit more important than fast running time. |
| stopDuration | MAX_VALUE | The layout algorithm runs unrestricted. |
| treeSubstructureStyle | NONE | Subtrees are not arranged in a special way. |
| uniformPortAssignment | false |
Type Details
- yFiles module
- algorithms
See Also
Constructors
Creates a new OrthogonalLayout instance with default settings.
Parameters
A map of options to pass to the method.
- stopDuration - TimeSpan
- The preferred time limit. This option sets the stopDuration property on the created object.
- qualityTimeRatio - number
- The ratio of layout quality versus running time. This option sets the qualityTimeRatio property on the created object.
- uniformPortAssignment - boolean
- Whether the layout algorithm should try to obtain a uniform port assignment of the edges incident to the same node side. This option sets the uniformPortAssignment property on the created object.
- treeSubstructureStyle - OrthogonalLayoutTreeSubstructureStyle
- The arrangement style for tree substructures. This option sets the treeSubstructureStyle property on the created object.
- treeSubstructureSize - number
- The minimum size (number of nodes) a subtree needs to have to be detected and explicitly handled as a tree substructure. This option sets the treeSubstructureSize property on the created object.
- treeSubstructureOrientation - SubstructureOrientation
- The desired orientation for tree substructure layouts. This option sets the treeSubstructureOrientation property on the created object.
- chainSubstructureStyle - OrthogonalLayoutChainSubstructureStyle
- The arrangement style for chain substructures. This option sets the chainSubstructureStyle property on the created object.
- chainSubstructureSize - number
- The minimum size (number of nodes) a chain needs to have to be detected and handled as a chain substructure. This option sets the chainSubstructureSize property on the created object.
- cycleSubstructureStyle - OrthogonalLayoutCycleSubstructureStyle
- The arrangement style for cycle substructures. This option sets the cycleSubstructureStyle property on the created object.
- cycleSubstructureSize - number
- The minimum size (number of nodes) a cycle needs to have to be detected and explicitly handled as a cycle substructure. This option sets the cycleSubstructureSize property on the created object.
- preferParallelRoutes - boolean
- Whether parallel routes for parallel edges (multi-edges) are preferred over independent routes. This option sets the preferParallelRoutes property on the created object.
- defaultEdgeDescriptor - OrthogonalLayoutEdgeDescriptor
- The OrthogonalLayoutEdgeDescriptor instance used for all those edges that do not have a specific descriptor assigned. This option either sets the value directly or recursively sets properties to the instance of the defaultEdgeDescriptor property on the created object.
- nodeLabelPlacement - NodeLabelPlacement
- How the layout handles the position of node labels. This option sets the nodeLabelPlacement property on the created object.
- edgeLabelPlacement - EdgeLabelPlacement
- How the layout handles the position of edge labels. This option sets the edgeLabelPlacement property on the created object.
- componentLayout - ComponentLayout
- The ComponentLayout from the layoutStages of this instance. This option either sets the value directly or recursively sets properties to the instance of the componentLayout property on the created object.
- layoutOrientation - LayoutOrientation
- The layoutOrientation of the OrientationStage. This option sets the layoutOrientation property on the created object.
- alignDegreeOneNodes - boolean
- Whether degree-one nodes that have the same neighbor should be aligned. This option sets the alignDegreeOneNodes property on the created object.
- gridSpacing - number
- The equidistant spacing between the horizontal and vertical grid lines. This option sets the gridSpacing property on the created object.
- layoutMode - OrthogonalLayoutMode
- The main layout mode for this algorithm. This option sets the layoutMode property on the created object.
- fromSketchMode - boolean
- Whether the existing drawing should be used as a sketch of the resulting orthogonal layout. This option sets the fromSketchMode property on the created object.
Properties
Gets or sets whether degree-one nodes that have the same neighbor should be aligned.
Default Value
false.Degree-one nodes with the same neighbor are not aligned with each other.
Property Value
true if the degree-one nodes are aligned, false otherwiseSample Graphs
Gets or sets the minimum size (number of nodes) a chain needs to have to be detected and handled as a chain substructure.
Gets or sets the arrangement style for chain substructures.
Remarks
A chain is a simple edge path where the degree of the nodes is less than or equal to 2.
Property chainSubstructureSize defines the minimum length a chain needs to have to be handled explicitly.
If there are user-defined nodeTypes, a chain substructure contains only nodes of the same type or only nodes without a type (i.e. null as type). This way, node types can be used to control which elements are allowed to form a substructure.
Default Value
Property Value
See Also
Gets or sets the ComponentLayout from the layoutStages of this instance.
Remarks
Throws
- Exception({ name: 'InvalidOperationError' })
- If there is no instance of the respective type in the
Gets or sets the minimum size (number of nodes) a cycle needs to have to be detected and explicitly handled as a cycle substructure.
Gets or sets the arrangement style for cycle substructures.
Remarks
A cycle is a simple edge path where the first and last node are identical. The algorithm only considers cycles where at most one edge connects a cycle node with the rest of the graph (i.e. isolated cycles that are connected with one edge).
If there are user-defined nodeTypes, a cycle contains only nodes of the same type or only nodes without a type (i.e. null as type). This way, node types can be used to control which elements are allowed to form a substructure.
Default Value
Property Value
See Also
Gets or sets the OrthogonalLayoutEdgeDescriptor instance used for all those edges that do not have a specific descriptor assigned.
Default Value
Property Value
Throws
- Exception({ name: 'ArgumentError' })
- if the specified
is null
See Also
Gets or sets how the layout handles the position of edge labels.
Default Value
Property Value
See Also
Sample Graphs
Gets or sets whether the existing drawing should be used as a sketch of the resulting orthogonal layout.
Remarks
Default Value
false.The initial coordinates of the nodes are not considered.
Property Value
true if the existing drawing is used as a sketch, false otherwiseSee Also
Sample Graphs
Gets or sets the equidistant spacing between the horizontal and vertical grid lines.
Remarks
Each node will be placed on a grid point. Edges will be routed such that all segments but the first and last one lie on grid lines. (The first and last segments of an edge may or may not lie on grid lines.) Edges consisting of a single segment always lie on grid lines.
The grid spacing has to be greater than 0.
Default Value
20.Property Value
Throws
- Exception({ name: 'ArgumentError' })
- if the grid spacing is negative
See Also
Sample Graphs
Gets or sets the main layout mode for this algorithm.
Default Value
Property Value
See Also
Gets or sets the layoutOrientation of the OrientationStage.
Gets the mutable stack of ILayoutStage that will be applied to this layout.
Gets or sets how the layout handles the position of node labels.
Default Value
Property Value
See Also
Sample Graphs
Gets or sets whether parallel routes for parallel edges (multi-edges) are preferred over independent routes.
Remarks
When enabled, the algorithm routes multi-edges (edges that connect the same pair of nodes) in parallel, i.e., these edges connect to the same side of the nodes and have the same or a similar path. Note that the path is not always exactly the same since the algorithm has to omit label-edge intersections if edgeLabelPlacement is set to INTEGRATED. If this setting is disabled, the edges are simply independent and might as well connect to different node sides and get very different paths.
A parallel routing is suitable for a lot of diagrams (especially larger ones) as it helps to better recognize multi-edge structures. However, there are scenarios where the routes of such edges might as well be independent. For small examples the structure can also be clear if the edges connect to other node sides, especially when they are in consecutive order around the node.
Default Value
true.The algorithm tries to route parallel edges in parallel.
Property Value
true if parallel edges are routed in parallel, false otherwiseSample Graphs
Gets or sets the ratio of layout quality versus running time.
Remarks
The larger the ratio, the better the quality of the resulting layout but the longer it may take to perform the layout calculation.
The value needs to lie within [0,1].
Default Value
0.6.Quality is a bit more important than fast running time.
Property Value
0.0 (low quality, fast) and 1.0 (high quality, slow)Throws
- Exception({ name: 'ArgumentError' })
- if the specified ratio is outside the interval
[0,1]
See Also
Gets or sets the preferred time limit.
Remarks
Depending on the specified value and the size of the input graph, the layout algorithm may automatically disable some internal optimization steps that can improve the layout quality but also increase the runtime, especially for larger graphs. If the time limit is set to MAX_VALUE, the layout algorithm runs unrestricted.
Values have to be greater or equal to ZERO.
Default Value
Property Value
Throws
- Exception({ name: 'ArgumentError' })
- if the stop duration is negative
See Also
Gets or sets the desired orientation for tree substructure layouts.
Remarks
Default Value
Property Value
See Also
Gets or sets the minimum size (number of nodes) a subtree needs to have to be detected and explicitly handled as a tree substructure.
Gets or sets the arrangement style for tree substructures.
Remarks
null as type). This way, node types can be used to control which elements are allowed to form a substructure.Default Value
Property Value
See Also
Gets or sets whether the layout algorithm should try to obtain a uniform port assignment of the edges incident to the same node side.
Remarks
Default Value
false.Property Value
true if the port assignment is uniform, false otherwiseSee Also
Sample Graphs
Methods
Calculates an orthogonal layout for the given graph.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
See Also
Implements
Calculates an orthogonal layout for the given graph.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
createLayoutData
(graph: LayoutGraph) : OrthogonalLayoutData<LayoutNode,LayoutEdge,LayoutNodeLabel,LayoutEdgeLabel>Returns an instance of LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> that can be used to perform item-specific configurations for the OrthogonalLayout.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the graph that determines the generic type arguments of the created layout data
Returns
- ↪OrthogonalLayoutData<LayoutNode,LayoutEdge,LayoutNodeLabel,LayoutEdgeLabel>
- an instance of layout data that can be used to perform item-specific configurations for the given OrthogonalLayout.
Returns an instance of LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> that can be used to perform item-specific configurations for the OrthogonalLayout.
Remarks
Parameters
A map of options to pass to the method.
- graph - IGraph
- the graph that determines the generic type arguments of the created layout data
Returns
- ↪OrthogonalLayoutData<INode,IEdge,ILabel,ILabel>
- an instance of layout data that can be used to perform item-specific configurations for the given OrthogonalLayout.
LayoutExecutor type is available at runtime.Constants
A data key for providing bend costs for each edge.
Remarks
1.See Also
A data key for providing crossing costs for each edge.
Remarks
1.See Also
A data key for providing layout information for each edge.
Remarks
Assign OrthogonalLayoutEdgeDescriptor an edge descriptor that provides layout information to each edge, or null if the default defaultEdgeDescriptor should be used.
If no edge descriptor is mapped for an edge, defaultEdgeDescriptor is used.
See Also
A data key for specifying the orientation of edges with respect to the main layout orientation.
Remarks
The orientation of an edge is 1 if it should be routed in the main layout direction, -1 if it should be routed against the main layout direction or 0 if it should be routed independently of the main layout direction.
The main layout orientation can be set using method layoutOrientation.