C

ComponentLayout

Show Usages
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.

Layout with orthogonal components using MULTI_ROWS_COMPACT

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:

  1. Identify the connected components within the graph.
  2. Temporarily hide all components of the graph.
  3. For each component:
    1. Unhide the component.
    2. Apply the coreLayout to arrange the component.
    3. Hide the component again.
  4. Unhide all components after processing.
  5. If a style other than NONE is specified, arrange the components in the layout space.
  6. 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

NameDefaultDescription
componentSpacing45
considerGroupingtrue
Grouping information is considered for determining the components.
coreLayoutnull
edgeLabelPlacementBasicEdgeLabelPlacement.CONSIDER
Edge labels are considered
gridSpacing0
No grid is considered.
interEdgeRouternull
Edges are routed as straight lines from source to target.
nodeLabelPlacementBasicNodeLabelPlacement.CONSIDER
Node labels are considered
preferredSizeSize
Both preferred width and height are 400.
styleComponentArrangementStyle.ROWS

See Also

Developer's Guide

Members

Show:

Constructors

ComponentLayout

(coreLayout?: ILayoutAlgorithm)
Initializes a new instance of the ComponentLayout class with an optional coreLayout.
The ComponentLayout class is responsible for arranging components, or subgraphs, in the layout. Each component can have its own layout algorithm, which is specified via the componentLayouts mapping. If no specific ILayoutAlgorithm is assigned to a component, the coreLayout provided in this constructor is used. If no core layout algorithm is supplied, the components will maintain their current positions, and only the arrangement of the components themselves will be performed.

Parameters

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.

Properties

componentSpacing

: number
Gets or sets the distance between the bounds of the components.
The spacing needs to be non-negative.
final

Property Value

the component spacing

Throws

Exception ({ name: 'ArgumentError' })
if the spacing is negative

Default Value

The default value is: 45

Sample Graphs

ShownSetting: 45

See Also

Developer's Guide

considerGrouping

: boolean
Gets or sets whether or not grouping information bound to the graph should be considered when determining the graph components.
The grouping is never considered if custom component Ids are specified.
final

Property Value

true if the nesting structure of the graph is considered when determining the components, false otherwise

Default Value

The default value is: true
Grouping information is considered for determining the components.

Sample Graphs

ShownSetting: false

See Also

Developer's Guide

coreLayout

: ILayoutAlgorithm
Gets or sets the core ILayoutAlgorithm that is wrapped by this stage.
final

Property Value

the core layout routine

Default Value

The default value is: null

edgeLabelPlacement

: BasicEdgeLabelPlacement
Gets or sets whether to take node and edge labels into account when calculating the bounds of the graph components.
conversionfinal

Property Value

CONSIDER if the layout algorithm considers edge labels, and IGNORE if the edge labels should be ignored.

Default Value

The default value is: BasicEdgeLabelPlacement.CONSIDER
Edge labels are considered

Sample Graphs

ShownSetting: IGNORE

See Also

Developer's Guide
API
EdgeLabelPreferredPlacement

enabled

: boolean
Gets or sets a value that determines whether this stage should do anything but execute the coreLayout.

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.

final

fromSketchMode

: boolean
Gets or sets a value indicating whether the components should be arranged based on the current sketch.
If set to 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.
This property has no effect, unless the style is set to SINGLE_ROW or SINGLE_COLUMN
final

Default Value

The default value is: false
From sketch mode is disabled.

See Also

API
style

gridSpacing

: number
Gets or sets the current grid spacing.

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.

This option keeps existing grid locations intact and won't correct the location of a component with respect to the grid specified here.
final

Property Value

the grid spacing

Throws

Exception ({ name: 'ArgumentError' })
if the given spacing is negative

Default Value

The default value is: 0
No grid is considered.

Sample Graphs

ShownSetting: The initial graph

See Also

Developer's Guide

interEdgeRouter

: ILayoutAlgorithm
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
During layout, edges that connect nodes of different components are temporarily hidden. Hence, these edges have to be routed after restoring the original graph structure using this edge routing algorithm.
final

Property Value

the edge routing algorithm for inter-edges

Default Value

The default value is: null
Edges are routed as straight lines from source to target.

nodeLabelPlacement

: BasicNodeLabelPlacement
Gets or sets whether to take node labels into account when calculating the bounds of the graph components.
conversionfinal

Property Value

CONSIDER if the layout stage considers node labels when moving elements, and IGNORE if the node labels should be ignored.

Default Value

The default value is: BasicNodeLabelPlacement.CONSIDER
Node labels are considered

Sample Graphs

ShownSetting: IGNORE

See Also

Developer's Guide

preferredSize

: Size
Gets or sets the preferred size of the layout.

The layout size also defines the desired aspect ratio (width/height).

The width and height need to be greater than zero.

NONE, KEEP_CENTERS, SINGLE_ROW and SINGLE_COLUMN do not consider the preferred layout size.
conversionfinal

Property Value

the preferred size of the calculated graph layout

Throws

Exception ({ name: 'ArgumentError' })
if the specified width or height is negative or zero or the given dimension is null

Default Value

The default value is: Size
Both preferred width and height are 400.

Sample Graphs

ShownSetting: Size 100x400

style

: ComponentArrangementStyle
Gets or sets how the components are arranged.
With graphs that contain large unconnected components, the styles PACKED_CIRCLE, PACKED_COMPACT_CIRCLE, PACKED_RECTANGLE, and PACKED_COMPACT_RECTANGLE can require noticeably more time to calculate than other arrangement styles.
The style will have no effect if style is set to NONE.
conversionfinal

Property Value

one of the valid style specifiers

Default Value

The default value is: ComponentArrangementStyle.ROWS

See Also

Developer's Guide

Methods

applyLayout

(graph: LayoutGraph)
Implementation of the ILayoutAlgorithm interface and main entry point for the layout calculation.
This implementation checks the enabled state and when it's not enabled, will delegate to the coreLayout, directly. When the stage is enabled, all the work will be delegated to applyLayoutImpl, instead.
final

Parameters

graph: LayoutGraph
The graph to apply the layout to.

applyLayoutImpl

(graph: LayoutGraph)
protected
Delegates the layout calculation for each component separately to the coreLayout and optionally arranges the components.
protected

Parameters

graph: LayoutGraph
The input graph

arrangeComponents

(graph: LayoutGraph, components: SubgraphComponent[])
protected
Produces a component graph layout.

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.

Depending on the chosen arrangement strategy, this layout algorithm takes the ratio of the overall layout area into account. NONE, KEEP_CENTERS, SINGLE_ROW and SINGLE_COLUMN are excluded.
protected

Parameters

graph: LayoutGraph
the input graph
components: SubgraphComponent[]
the components (subgraphs) of the input graph

See Also

API
findGraphComponents, setComponentLocation

calculateComponentBounds

(graph: LayoutGraph): Rect
protected
Calculates the bounds of a graph component including node margins.
This method will be invoked for each component of the graph. Depending on the state of the properties BasicNodeLabelPlacement and BasicEdgeLabelPlacement , the returned bounds will also include node and edge labels, respectively. It may be overridden to extend the bounds to reserve space for other elements.
protected

Parameters

graph: LayoutGraph
the subgraph containing the nodes and edges of a component

Return Value

Rect
the bounds of the component

See Also

API
BasicNodeLabelPlacement, BasicEdgeLabelPlacement

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.
The generic type arguments of the created layout data are compatible with instances of LayoutGraph, but the layout data is not bound to a specific graph instance. Therefore, the created layout data still has to be passed as an argument of applyLayout in order to be applied.

Parameters

graph: LayoutGraph
the graph that determines the generic type arguments of the created layout data

Return Value

ComponentLayoutData<LayoutNode, LayoutEdge, LayoutNodeLabel, LayoutEdgeLabel>
an instance of layout data that can be used to perform item-specific configurations for the given ComponentLayout.

createLayoutData

(graph?: IGraph): ComponentLayoutData<INode, IEdge, ILabel, ILabel>
Returns an instance of LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> that can be used to perform item-specific configurations for the ComponentLayout.
The generic type arguments of the created layout data are compatible with instances of IGraph, but the layout data is not bound to a specific graph instance. Therefore, the created layout data still has to be passed as an argument of applyLayout in order to be applied.
This method is not available unless the module view-layout-bridge is loaded. Either load the module 'view-layout-bridge' explicitly or ensure that the LayoutExecutor type is available at runtime.

Parameters

graph?: IGraph
the graph that determines the generic type arguments of the created layout data

Return Value

ComponentLayoutData<INode, IEdge, ILabel, ILabel>
an instance of layout data that can be used to perform item-specific configurations for the given ComponentLayout.

findGraphComponents

(graph: LayoutGraph, compNumber: IMapper<LayoutNode, number>): number
protected
Determines which nodes belong to the same graph component.

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.

Additionally to normal connectedness, a group node and all of its children will belong to the same component.
protected

Parameters

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

Return Value

number
the number of connected components of this graph

See Also

API
connectedComponents

setComponentLocation

(
graph: LayoutGraph
component: SubgraphComponent
location: Point
)
protected
Moves the top-left corner of the subgraph containing the specified nodes and edges to the given location.
This method is typically called by arrangeComponents to reposition components in a way that avoids overlaps. It adjusts the entire subgraph (nodes and edges) by translating it to the new top-left position provided.
protected

Parameters

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

All constants are filtered. Go to Filters.