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 layout styles). 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 layout styles) feature:
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 layout styles that the orthogonal layout algorithm supports depending on whether or not the edges should be routed completely orthogonal, or whether or not the original size of the nodes should be maintained. Such layout styles are NORMAL, UNIFORM, BOX, MIXED, FIXED_BOX, FIXED_MIXED and can be applied using method layoutStyle.
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 using method integratedEdgeLabeling.
OrthogonalLayoutEdgeLayoutDescriptor instances can be used for specifying individual information (e.g. distances) for each edge in the graph. The descriptors are bound to the graph using IDataProviders registered with key EDGE_LAYOUT_DESCRIPTOR_DP_KEY. If there is no descriptor assigned to some edges, a default descriptor will be used. To set default descriptors, use edgeLayoutDescriptor.
OrthogonalLayout tries to optimize diverse objective functions such as bend minimization, number of edge crossings, edge length minimization or face maximization. These settings can be enabled using the corresponding methods optimizePerceivedBends, crossingReduction, edgeLengthReduction, and faceMaximization, respectively. The drawback when these settings are enabled is that the running time of the algorithm may be drastically increased.
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: treeStyle, chainStyle and cycleStyle. For the detection of substructures, it is optionally possible to consider node types, such that only nodes of the same user-defined type can form a substructure.
Default Values of Properties
| alignDegreeOneNodes | false | Degree-one nodes with the same neighbor are not aligned with each other. |
| chainStyle | NONE | Chains are not handled explicitly. |
| componentLayoutEnabled | true | The stage that arranges connected graph components is activated. |
| considerNodeLabels | false | Node labels are ignored. |
| crossingReduction | true | The number of edge crossings is reduced. |
| cycleStyle | NONE | Cycles are not handled explicitly. |
| edgeLengthReduction | true | The overall edge length is reduced. |
| fromSketchMode | false | The initial coordinates of the nodes are not considered. |
| gridSpacing | 20 | |
| hideGroupsStageEnabled | true | The stage responsible for hiding group nodes is activated. |
| integratedEdgeLabeling | false | Integrated edge labeling is disabled. |
| layoutStyle | NORMAL | |
| maximumDuration | <code>0x7FFFFFFF</code> | The layout algorithm runs unrestricted. |
| optimizePerceivedBends | true | The number of perceived bends will be minimized. |
| orientationLayoutEnabled | true | The orientation |
| parallelEdgeRouterEnabled | false | The stage that routes parallel edges is activated. |
| randomization | true | A randomization strategy is applied. |
| selfLoopRouterEnabled | false | The stage that routes self-loops is activated. |
| treeStyle | NONE | Subtrees are not arranged in a special way. |
| uniformPortAssignment | false |
Type Details
- yfiles module
- layout-orthogonal
- yfiles-umd modules
- layout-orthogonal-compact, layout-orthogonal, layout
- Legacy UMD name
- yfiles.orthogonal.OrthogonalLayout
See Also
Constructors
Creates a new OrthogonalLayout instance with default settings.
Parameters
A map of options to pass to the method.
- maximumDuration - number
The preferred time limit in milliseconds. This option sets the maximumDuration property on the created object.
- uniformPortAssignment - boolean
Whether or not 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.
- treeStyle - TreeLayoutStyle
The tree layout style that defines the basic arrangement style for subtrees. This option sets the treeStyle property on the created object.
- treeSize - 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 treeSize property on the created object.
- treeOrientation - SubstructureOrientation
The desired orientation for subtree layouts. This option sets the treeOrientation property on the created object.
- chainStyle - ChainLayoutStyle
The chain layout style that defines how chain substructures are arranged. This option sets the chainStyle property on the created object.
- chainSize - 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 chainSize property on the created object.
- cycleStyle - CycleLayoutStyle
The cycle layout style that defines how cycle substructures are arranged. This option sets the cycleStyle property on the created object.
- cycleSize - 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 cycleSize property on the created object.
- preferParallelRoutes - boolean
Whether or not parallel routes for parallel edges (multi-edges) are preferred over independent routes. This option sets the preferParallelRoutes property on the created object.
- edgeLayoutDescriptor - OrthogonalLayoutEdgeLayoutDescriptor
The OrthogonalLayoutEdgeLayoutDescriptor instance used for all those edges that do not have a specific layout descriptor assigned. This option sets the edgeLayoutDescriptor property on the created object.
- considerNodeLabels - boolean
Whether or not the layout algorithm considers node labels when calculating node positions to avoid overlaps. This option sets the considerNodeLabels property on the created object.
- integratedEdgeLabeling - boolean
Whether or not the layout algorithm preserves space and places edge labels. This option sets the integratedEdgeLabeling property on the created object.
- randomization - boolean
Whether or not a randomization strategy should be performed. This option sets the randomization property on the created object.
- alignDegreeOneNodes - boolean
Whether or not degree-one nodes that have the same neighbor should be aligned. This option sets the alignDegreeOneNodes property on the created object.
- faceMaximization - boolean
Whether or not one face of the embedding of the graph should be maximized. This option sets the faceMaximization property on the created object.
- crossingReduction - boolean
Whether or not the number of edge crossings should be reduced. This option sets the crossingReduction property on the created object.
- optimizePerceivedBends - boolean
Whether or not the number of perceived bends should be minimized. This option sets the optimizePerceivedBends 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.
- layoutStyle - OrthogonalLayoutStyle
The layout style for this layout algorithm. This option sets the layoutStyle property on the created object.
- edgeLengthReduction - boolean
Whether or not the overall edge length should be optimized. This option sets the edgeLengthReduction property on the created object.
- fromSketchMode - boolean
Whether or not the existing drawing should be used as a sketch of the resulting orthogonal layout. This option sets the fromSketchMode property on the created object.
- componentLayoutEnabled - boolean
Whether or not the ILayoutStage used for arranging the components of the graph is activated. This option sets the componentLayoutEnabled property on the created object.
- hideGroupsStageEnabled - boolean
Whether or not the ILayoutStage used for hiding group nodes is activated. This option sets the hideGroupsStageEnabled property on the created object.
- orientationLayoutEnabled - boolean
Whether or not the ILayoutStage that modifies the orientation of the layout is activated. This option sets the orientationLayoutEnabled property on the created object.
- labeling - ILayoutStage
The ILayoutStage that places the labels of the input graph. This option sets the labeling property on the created object.
- selfLoopRouter - ILayoutStage
The ILayoutStage that routes self-loops. This option sets the selfLoopRouter property on the created object.
- parallelEdgeRouter - ILayoutStage
The ILayoutStage that routes parallel edges. This option sets the parallelEdgeRouter property on the created object.
- componentLayout - ILayoutStage
The ILayoutStage that arranges the connected components of an input graph. This option sets the componentLayout property on the created object.
- subgraphLayout - ILayoutStage
The ILayoutStage that constrains the layout process to a subgraph of the input graph. This option sets the subgraphLayout property on the created object.
- hideGroupsStage - ILayoutStage
The ILayoutStage that hides the group nodes of the input graph. This option sets the hideGroupsStage property on the created object.
- orientationLayout - ILayoutStage
The ILayoutStage that modifies the orientation of a computed layout. This option sets the orientationLayout property on the created object.
- layoutOrientation - LayoutOrientation
The main orientation of the layout. This option sets the layoutOrientation property on the created object.
- selfLoopRouterEnabled - boolean
Whether or not the ILayoutStage used for routing self-loops is activated. This option sets the selfLoopRouterEnabled property on the created object.
- labelingEnabled - boolean
Whether or not the ILayoutStage used for placing the labels of the input graph is activated. This option sets the labelingEnabled property on the created object.
- parallelEdgeRouterEnabled - boolean
Whether or not the ILayoutStage used for routing parallel edges is activated. This option sets the parallelEdgeRouterEnabled property on the created object.
- subgraphLayoutEnabled - boolean
Whether or not the ILayoutStage used for constraining the layout process to a subgraph of the input graph is activated. This option sets the subgraphLayoutEnabled property on the created object.
Properties
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 chain layout style that defines how chain substructures are arranged.
Remarks
A chain is a simple edge path where the degree of the nodes is less than or equal to 2.
Property chainSize defines the minimum length a chain needs to have to be handled explicitly.
If there are user-defined node types, 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
Throws
- Exception({ name: 'ArgumentError' })
- if an unknown chain style is given
See Also
Gets or sets the ILayoutStage that arranges the connected components of an input graph.
Default Value
See Also
Defined in
Sets whether or not the ILayoutStage used for arranging the components of the graph is activated.
Default Value
true.The stage that arranges connected graph components is activated.
See Also
Overrides
Gets or sets whether or not the layout algorithm considers node labels when calculating node positions to avoid overlaps.
Remarks
true.Default Value
false.Node labels are ignored.
Throws
- Exception({ name: 'InvalidOperationError' })
- if no properly configured
is registered even though this property was enabled earlier (can happen when manually specifying the ).
See Also
Sample Graphs
Gets or sets whether or not the number of edge crossings should be reduced.
Remarks
Default Value
true.The number of edge crossings is reduced.
See Also
Sample Graphs
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 cycle layout style that defines how cycle substructures are arranged.
Remarks
If there are user-defined node types, 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.
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).
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if an unknown cycle style is given
See Also
Gets or sets the OrthogonalLayoutEdgeLayoutDescriptor instance used for all those edges that do not have a specific layout descriptor assigned.
Remarks
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the specified
is null
See Also
Gets or sets whether or not the overall edge length should be optimized.
Remarks
Default Value
true.The overall edge length is reduced.
See Also
Sample Graphs
Gets or sets whether or not one face of the embedding of the graph should be maximized.
Remarks
An embedding of a graph is uniquely specified by the cyclic order of edges incident to the same node in a graph drawing.
In any planar drawing of a planar graph, the edges divide the plane into different regions called faces. If one of these faces (the outer face) gets maximized, all other faces will be more compact.
Default Value
false.No face of the embedding is maximized.
See Also
Sample Graphs
Gets or sets whether or not 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.
See 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.Throws
- Exception({ name: 'ArgumentError' })
- if the grid spacing is negative
See Also
Sample Graphs
Gets or sets the ILayoutStage that hides the group nodes of the input graph.
Default Value
See Also
Defined in
Sets whether or not the ILayoutStage used for hiding group nodes is activated.
Default Value
true.The stage responsible for hiding group nodes is activated.
See Also
Overrides
Gets or sets whether or not the layout algorithm preserves space and places edge labels.
Remarks
To define the desired placement for each label add a PreferredPlacementDescriptor on IEdgeLabelLayout.
This method also assures that the labeling algorithm is of type LabelLayoutTranslator and translateEdgeLabels is set to true.
Default Value
false.Integrated edge labeling is disabled.
Throws
- Exception({ name: 'InvalidOperationError' })
- if no properly configured
is registered even though integrated labeling was enabled earlier (can happen when manually specifying the ).
See Also
Sample Graphs
Gets or sets the ILayoutStage that places the labels of the input graph.
Default Value
See Also
Defined in
Gets or sets whether or not the ILayoutStage used for placing the labels of the input graph is activated.
Remarks
Default Value
false.The stage responsible for label placement is deactivated.
See Also
Defined in
Gets or sets the main orientation of the layout.
Remarks
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the specified orientation does not match a default layout orientation
See Also
Defined in
Gets or sets the preferred time limit in milliseconds.
Remarks
Depending on the specified value and the size of the input graph, the layout algorithm may automatically disable properties randomization, edgeLengthReduction, optimizePerceivedBends and crossingReduction. These properties improve the layout quality but also increase the runtime, especially for larger graphs. If the time limit is set to 0x7FFFFFFF, the layout algorithm runs unrestricted.
Values have to be greater or equal to 0.
Default Value
<code>0x7FFFFFFF</code>.The layout algorithm runs unrestricted.
Throws
- Exception({ name: 'ArgumentError' })
- if the maximum duration is negative
See Also
Gets or sets whether or not the number of perceived bends should be minimized.
Remarks
Default Value
true.The number of perceived bends will be minimized.
See Also
Sample Graphs
Gets or sets the ILayoutStage that modifies the orientation of a computed layout.
Default Value
See Also
Defined in
Sets whether or not the ILayoutStage that modifies the orientation of the layout is activated.
Default Value
true.The orientation
See Also
Overrides
Gets or sets the ILayoutStage that routes parallel edges.
Default Value
See Also
Defined in
Gets or sets whether or not the ILayoutStage used for routing parallel edges is activated.
Remarks
Default Value(Overrides the default value defined in MultiStageLayout)
false.The stage that routes parallel edges is activated.
See Also
Defined in
Gets or sets whether or not 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 integrated labeling is enabled. 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.
Sample Graphs
Gets or sets whether or not a randomization strategy should be performed.
Remarks
Default Value
true.A randomization strategy is applied.
See Also
Gets or sets the ILayoutStage that routes self-loops.
Default Value
See Also
Defined in
Gets or sets whether or not the ILayoutStage used for routing self-loops is activated.
Remarks
Default Value(Overrides the default value defined in MultiStageLayout)
false.The stage that routes self-loops is activated.
See Also
Defined in
Gets or sets the ILayoutStage that constrains the layout process to a subgraph of the input graph.
Default Value
See Also
Defined in
Gets or sets whether or not the ILayoutStage used for constraining the layout process to a subgraph of the input graph is activated.
Remarks
Default Value
false.The stage that constrains the input graph to a subgraph is deactivated.
See Also
Defined in
Gets or sets the desired orientation for subtree layouts.
Remarks
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the given layout orientation is unknown
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 tree layout style that defines the basic arrangement style for subtrees.
Remarks
null as type). This way, node types can be used to control which elements are allowed to form a substructure.Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if an unknown tree style is given
See Also
Gets or sets whether or not the layout algorithm should try to obtain a uniform port assignment of the edges incident to the same node side.
Remarks
Default Value
false.See Also
Sample Graphs
Methods
Appends the given ILayoutStage to the layout pipeline.
Remarks
Parameters
A map of options to pass to the method.
- stage - ILayoutStage
- the ILayoutStage instance to be added
See Also
Defined in
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
Overrides
Calculates an orthogonal layout for the given graph.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
Implements
Checks the sizes of the nodes to be non-zero.
Parameters
A map of options to pass to the method.
- g - LayoutGraph
- The graph to check.
Defined in
Returns a new OrthogonalLayoutEdgeLayoutDescriptor instance that will be used during the various phases of the layout algorithm to determine the drawing details of the edges of the graph.
Remarks
Returns
null.Deactivates all predefined ILayoutStages so that upon applyLayout only the layout algorithm will be executed.
See Also
Defined in
Prepends the given ILayoutStage to the layout pipeline.
Remarks
Parameters
A map of options to pass to the method.
- stage - ILayoutStage
- the ILayoutStage instance to be added
See Also
Defined in
Removes the given ILayoutStage from the layout pipeline.
Remarks
Parameters
A map of options to pass to the method.
- stage - ILayoutStage
- a ILayoutStage to be removed from the layout pipeline
See Also
Defined in
Constants
A data provider key for marking edges which should be routed such that they point to the main layout orientation.
Remarks
| Domain | Edge | |
| Values | boolean | true if the edge should point to the main layout orientation, false or null otherwise |
See Also
A data provider key for providing bend costs for each edge.
Remarks
1.| Domain | Edge | |
| Values | number | the non-negative cost of an edge during the bend minimization phase |
See Also
A data provider key for providing crossing costs for each edge.
Remarks
1.| Domain | Edge | |
| Values | number | the non-negative cost of an edge during the crossing minimization phase |
See Also
A data provider key for specifying the directedness of edges for the detection of substructures.
Remarks
- A directedness value of
1indicates that the edge is considered to be directed from source to target. - A directedness value of
-1indicates that the edge is considered to be directed from target to source. - A directedness value of
0indicates that the edge is considered to be undirected.
| Domain | Edge | the edges of the input graph |
| Values | number | the directedness of the edge |
See Also
A data provider key for providing layout information for each edge.
Remarks
| Domain | Edge | |
| Values | OrthogonalLayoutEdgeLayoutDescriptor | an edge layout descriptor that provides layout information for each edge or null if the default |