A ComponentLayout arranges the connected components of a graph.
Remarks
Layout Style
The components can be arranged using different styles. All styles except NONE place the components without overlaps.
Concept
ComponentLayout is a ILayoutStage that can wrap another layout algorithm. That way, it allows handling disconnected graphs for the wrapped core layout algorithm.
The following steps outline the concept of ComponentLayout:
- Determine the connected components of the graph
- Hide all graph components
- Apply the following steps to each component separately
- Unhide the component
- Apply the core layout algorithm to the component
- Hide the component
- Unhide all graph components
- Optionally arrange the components
Features
To arrange the subgraphs of the components, ComponentLayout uses the specified core layout algorithm. If there is no core layout algorithm specified, it will keep the locations in the subgraph and arrange the components as they are.
Hierarchically grouped graphs are handled in a special way. The contents of a group node will always belong to the same component as the group node itself. To change that behavior grouping can be disabled.
By default, the components consist of the connected nodes in a graph. To choose custom subgraphs to form components, register a IDataProvider with COMPONENT_ID_DP_KEY and assign component IDs to the nodes.
When arranging components, node types (see NODE_TYPE_DP_KEY) can be considered. If all nodes of a component have the same node type, the component is considered to be of that type. Components with same type are preferably put next to each other. Note, however, that only the styles ROWS, SINGLE_ROW, SINGLE_COLUMN and MULTI_ROWS_TYPE_SEPARATED handle types such that an ordering by type is realized. Other styles aim at more important optimization criteria (e.g. compactness) such that components of the same type are not guaranteed to be close to each other.
Default Values of Properties
| componentArrangement | true | The components are arranged relative to each other. |
| componentSpacing | 45 | |
| considerGrouping | true | Grouping information is considered for determining the components. |
| considerLabels | true | Node and edge labels are included in the bounds of the components. |
| gridSpacing | 0 | No grid is considered. |
| preferredSize | YDimension | Both preferred width and height are 400. |
| style | ROWS |
Type Details
- yfiles module
- layout-core
- yfiles-umd modules
- All layout modules, view-layout-bridge
- Legacy UMD name
- yfiles.layout.ComponentLayout
See Also
Constructors
Creates a new ComponentLayout instance with an optional core layout algorithm.
Parameters
A map of options to pass to the method.
- coreLayout - ILayoutAlgorithm
- The core layout algorithm.
- preferredSize - YDimension
The preferred size of the layout. This option sets the preferredSize property on the created object.
- considerLabels - boolean
Whether or not to take node and edge labels into account when calculating the bounding box of the graph components. This option sets the considerLabels property on the created object.
- componentArrangement - boolean
Whether or not the separately arranged components of the input graph should be arranged relative to each other. This option sets the componentArrangement property on the created object.
- gridSpacing - number
The current grid spacing. This option sets the gridSpacing property on the created object.
- componentSpacing - number
The distance between the bounding boxes of the components. This option sets the componentSpacing property on the created object.
- considerGrouping - boolean
Whether or not grouping information bound to the graph should be considered when determining the graph components. This option sets the considerGrouping property on the created object.
- style - ComponentArrangementStyles
How the components are arranged. This option sets the style property on the created object.
Properties
Gets or sets whether or not the separately arranged components of the input graph should be arranged relative to each other.
Remarks
Default Value
true.The components are arranged relative to each other.
See Also
Sample Graphs
Gets or sets the distance between the bounding boxes of the components.
Remarks
Default Value
45.Throws
- Exception({ name: 'ArgumentError' })
- if the spacing is negative
See Also
Sample Graphs
Gets or sets whether or not grouping information bound to the graph should be considered when determining the graph components.
Default Value
true.Grouping information is considered for determining the components.
See Also
Sample Graphs
Gets or sets whether or not to take node and edge labels into account when calculating the bounding box of the graph components.
Default Value
true.Node and edge labels are included in the bounds of the components.
See Also
Sample Graphs
Gets or sets the core layout algorithm that is wrapped by this stage.
Gets or sets the current grid spacing.
Remarks
Components will be moved by multiples of this value, thus keeping their offset to the grid. That way, components or parts of them that were placed on a grid before, will stay on their original grid. The grid spacing also influences the distance between the components.
The spacing needs to be a non-negative value. If the grid spacing is set to 0, the grid won't be considered at all.
Default Value
0.No grid is considered.
Throws
- Exception({ name: 'ArgumentError' })
- if the given spacing is negative
See Also
Sample Graphs
Gets or sets the preferred size of the layout.
Remarks
The layout size also defines the desired aspect ratio (width/height).
The width and height need to be greater than zero.
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the specified width or height is negative or zero or the given dimension is
null
Sample Graphs
Gets or sets how the components are arranged.
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if the specified style is unknown
See Also
Methods
Delegates the layout calculation for each component separately to the core layout algorithm and optionally arranges the components.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
See Also
Implements
Invokes the layout process of the core layout algorithm.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
See Also
Defined in
arrangeComponents
(graph: LayoutGraph, nodes: YNodeList[], edges: EdgeList[], bbox: YRectangle[], boxes: Rectangle2D[])Produces a component graph layout.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
- nodes - YNodeList[]
- the nodes of the components; the i-th list contains the nodes of the i-th component
- edges - EdgeList[]
- the edges of the components; the i-th list contains the edges of the i-th component
- bbox - YRectangle[]
- the bounds of the components; the i-th rectangle describes the bounding box of the i-th component
- boxes - Rectangle2D[]
- the extended bounds of the components; the i-th rectangle describes the bounding box of the i-th component extended by the spacing between components. The method arranges these boxes in such a way that they do not overlap. Then, the i-th graph component must be placed inside the i-th box
See Also
arrangeFields
(graph: LayoutGraph, nodes: YNodeList[], edges: EdgeList[], bbox: YRectangle[], boxes: Rectangle2D[], circular: boolean, fill: boolean, fromSketch: boolean)Arranges the bounding boxes of the components.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
- nodes - YNodeList[]
- the nodes of the components; the i-th list contains the nodes of the i-th component
- edges - EdgeList[]
- the edges of the components; the i-th list contains the edges of the i-th component
- bbox - YRectangle[]
- the bounds of the components; the i-th rectangle describes the bounding box of the i-th component
- boxes - Rectangle2D[]
- the extended bounds of the components; the i-th rectangle describes the bounding box of the i-th component
- circular - boolean
trueif the arrangement should be circular,falseif it should be rectangular- fill - boolean
trueif it is allowed to place components in empty spaces inside other components,falseotherwise- fromSketch - boolean
trueif the initial coordinates should be considered,falseotherwise
Calculates the bounding box of a graph component including NodeHalos.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the subgraph containing the nodes and edges of a component
Returns
- ↪Rectangle2D
- the bounding box of the component
See Also
Determines which nodes belong to the same graph component.
Remarks
This implementation uses the graph connectivity to sort the nodes into different components. Nodes that are not connected by a path will be in separate components.
This method is called by applyLayout. It may be overridden to choose another approach to find components that will be passed to the core layout algorithm. However, most of the layout algorithms cannot handle disconnected graphs. Also, edges between custom components will be ignored.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
- compNumber - INodeMap
- a map that will be filled with the zero-based index of the component to which the node belongs
Domain YNode Values number the zero-based index of the component to which the node belongs
Returns
- ↪number
- the number of connected components of this graph
See Also
setOrigin
(graph: LayoutGraph, nodes: YNodeList, edges: EdgeList, origin: YPoint, rectangle: YRectangle)Moves the subgraph containing the given nodes and edges to the specified origin.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
- nodes - YNodeList
- the nodes in the moving subgraph
- edges - EdgeList
- the edges in the moving subgraph
- origin - YPoint
- the new origin of the graph
- rectangle - YRectangle
- the current bounds of the subgraph
Constants
A data provider key for specifying which nodes should be arranged.
Remarks
| Domain | YNode | |
| Values | boolean | true if the node should be arranged by the false otherwise |
See Also
A data provider key for specifying custom graph components.
| Domain | YNode | |
| Values | IComparable | the component ID of the node or null if the component of the node should be determined automatically |