Represents a layout algorithm that arranges the connected components of a graph, allowing for the use of different layout styles and customization for component and edge arrangement.
Remarks
Layout Style
The arrangement of components can be customized through various styles. Most styles, except NONE and KEEP_CENTERS, ensure that components are placed without overlapping. These styles allow for flexible and clear visual arrangements of subgraphs.
Concept
ComponentLayout is a ILayoutStage that can wrap and work with another ILayoutAlgorithm. This enables support for disconnected graphs by applying the layout algorithm to each component (subgraph) individually. The wrapped coreLayout handles each component's internal arrangement.
The general process followed by ComponentLayout includes:
- Identify the connected components within the graph.
- Temporarily hide all components of the graph.
- For each component:
- Unhide the component.
- Apply the coreLayout to arrange the component.
- Hide the component again.
- Unhide all components after processing.
- If a style other than NONE is specified, arrange the components in the layout space.
- Compute routes for edges that connect nodes from different components. The routing of these "inter-edges" can be customized via the interEdgeRouter property.
Features
To arrange the subgraphs of the components, ComponentLayout uses mappings defined by the componentLayouts, which can specify a distinct ILayoutAlgorithm for each component. If no specific algorithm is assigned, the coreLayout is used. If the core layout is not specified, components maintain their existing locations while being arranged spatially.
Grouped graphs are treated specially. All contents of a group node remain part of the same component as the group itself, ensuring internal consistency. To alter this behavior, grouping can be disabled via the considerGrouping property.
By default, components correspond to connected nodes in the graph. Custom subgraphs can be defined by assigning component IDs to nodes using the layout data property componentIds.
Node types, as defined by nodeTypes, can also be used to influence the arrangement. If all nodes in a component share the same node type, the component is classified under that type. Components of the same type are typically positioned near each other, but only certain styles — such as ROWS, SINGLE_ROW, SINGLE_COLUMN, and MULTI_ROWS_TYPE_SEPARATED — actively prioritize type-based ordering. Other styles focus on different criteria, such as compactness, and may not guarantee proximity of similar types.
Default Values of Properties
| componentSpacing | 45 | |
| considerGrouping | true | Grouping information is considered for determining the components. |
| edgeLabelPlacement | CONSIDER | Edge labels are considered |
| gridSpacing | 0 | No grid is considered. |
| interEdgeRouter | null | Edges are routed as straight lines from source to target. |
| nodeLabelPlacement | CONSIDER | Node labels are considered |
| preferredSize | Size | Both preferred width and height are 400. |
| style | ROWS |
Type Details
- yFiles module
- algorithms
See Also
Constructors
Initializes a new instance of the ComponentLayout class with an optional coreLayout.
Remarks
Parameters
A map of options to pass to the method.
- coreLayout - ILayoutAlgorithm
- The core layout algorithm to be used for arranging the layout. If
null, the default behavior is to keep the component subgraphs' locations unchanged unless specified otherwise by the componentLayouts. - preferredSize - Size
- The preferred size of the layout. This option sets the preferredSize property on the created object.
- interEdgeRouter - ILayoutAlgorithm
- The current edge routing algorithm for handling inter-edges between different components, which may exist when customizing the component assignment using custom componentIds This option sets the interEdgeRouter property on the created object.
- edgeLabelPlacement - BasicEdgeLabelPlacement
- Whether to take node and edge labels into account when calculating the bounds of the graph components. This option sets the edgeLabelPlacement property on the created object.
- nodeLabelPlacement - BasicNodeLabelPlacement
- Whether to take node labels into account when calculating the bounds of the graph components. This option sets the nodeLabelPlacement 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 bounds 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 - ComponentArrangementStyle
- How the components are arranged. This option sets the style property on the created object.
- fromSketchMode - boolean
- A value indicating whether the components should be arranged based on the current sketch. This option sets the fromSketchMode property on the created object.
- enabled - boolean
Properties
Gets or sets the distance between the bounds of the components.
Remarks
Default Value
45.Property Value
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.
Property Value
true if the nesting structure of the graph is considered when determining the components, false otherwiseSee Also
Sample Graphs
Gets or sets the core ILayoutAlgorithm that is wrapped by this stage.
Default Value
null.Property Value
See Also
Implements
Gets or sets a value that determines whether this stage should do anything but execute the coreLayout.
Remarks
By default, when constructed, stages should be enabled. Users may disable a stage's functionality by setting this property to false.
Stages that can guarantee that the graph will not change can choose to not even execute the coreLayout when disabled.
See Also
Implements
Gets or sets a value indicating whether the components should be arranged based on the current sketch.
Remarks
true, the layout will maintain the positions of components relative to each other in the context of the selected style, otherwise the order of the components can be changed during the component arrangement.Default Value
false.From sketch mode is disabled.
See Also
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.
Property Value
Throws
- Exception({ name: 'ArgumentError' })
- if the given spacing is negative
See Also
Sample Graphs
Gets or sets the current edge routing algorithm for handling inter-edges between different components, which may exist when customizing the component assignment using custom componentIds
Remarks
Default Value
null.Edges are routed as straight lines from source to target.
Property Value
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
Property 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
Property Value
See Also
Methods
Implementation of the ILayoutAlgorithm interface and main entry point for the layout calculation.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- The graph to apply the layout to.
See Also
Implements
Delegates the layout calculation for each component separately to the coreLayout and optionally arranges the components.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- The input graph
See Also
Implements
Produces a component graph layout.
Remarks
This method is called by applyLayoutImpl in case style is set to another value than NONE.
It moves the components such that their bounds do not overlap.
Subclasses may want to override this method to introduce custom component arrangement styles. This involves calculating a new position for each component and moving them accordingly. You can use setComponentLocation to move a component with all of its elements, including nodes, edges, and labels to the new location.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
- components - SubgraphComponent[]
- the components (subgraphs) of the input graph
See Also
Calculates the bounds of a graph component including node margins.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the subgraph containing the nodes and edges of a component
Returns
- ↪Rect
- the bounds of the component
See Also
createLayoutData
(graph: LayoutGraph) : ComponentLayoutData<LayoutNode,LayoutEdge,LayoutNodeLabel,LayoutEdgeLabel>Returns an instance of LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> that can be used to perform item-specific configurations for the ComponentLayout.
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
- ↪ComponentLayoutData<LayoutNode,LayoutEdge,LayoutNodeLabel,LayoutEdgeLabel>
- an instance of layout data that can be used to perform item-specific configurations for the given ComponentLayout.
Returns an instance of LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> that can be used to perform item-specific configurations for the ComponentLayout.
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
- ↪ComponentLayoutData<INode,IEdge,ILabel,ILabel>
- an instance of layout data that can be used to perform item-specific configurations for the given ComponentLayout.
LayoutExecutor type is available at runtime.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 applyLayoutImpl. It may be overridden to choose another approach to find components that will be passed to the coreLayout. 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 - IMapper<LayoutNode,number>
- an IMapper<K,V> that will be filled with the zero-based index of the component to which the node belongs
Returns
- ↪number
- the number of connected components of this graph
See Also
Reroutes the given inter-edges using the current edge routing algorithm.
Remarks
This method is called after calculating the overall layout when the positions of all nodes and normal edges are fixed.
If no inter-edge router is specified, this method resets the path of all inter-edges.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
- interEdges - IEnumerable<LayoutEdge>
- the edges that connect nodes of different components
See Also
Moves the top-left corner of the subgraph containing the specified nodes and edges to the given location.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- The graph containing the component to be moved.
- component - SubgraphComponent
- The component (subgraph) consisting of the nodes and edges that should be repositioned.
- location - Point
- The new top-left location to which the subgraph should be moved.
Constants
A data key for specifying which components should be arranged.
Remarks
Assign true to a node if its component should be arranged by the coreLayout, or false otherwise.
If no IMapper<K,V> is registered with this key, all components will be laid out by the core layout algorithm.
See Also
A data key for specifying custom graph components.
Remarks
null if the component of the node should be determined automatically.See Also
A data key for arranging the nodes of each component with an individual layout algorithm.
Remarks
This mapping defines the ILayoutAlgorithm used to arrange the content of the component to which a node belongs. If no specific ILayoutAlgorithm is assigned to a component, the coreLayout will be used by default.
It is important to note that the first non-null ILayoutAlgorithm defined by the IMapper<K,V> is applied to all nodes within that component.