C

ComponentLayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>

Show Usages
Specifies custom data for the ComponentLayout.
Inheritance Hierarchy

Members

Show:

Constructors

ComponentLayoutData

()

Parameters

Properties

affectedComponents

: ItemCollection<TNode>
Gets or sets a collection of nodes that determine the components that shall be laid out.
Note that components will be laid out if and only if at least one of the nodes is in this collection.
conversionfinal

Examples

Defining the subset of components that should be laid out can be done in various ways, mostly depending on which option is more convenient for a particular use case. You can use the ItemCollection<TItem>'s source property to use any .NET collection or IEnumerable<T>:

Setting a collection of nodes to define the components to layout
layoutData.affectedComponents = graphComponent.selection.nodes

Alternatively, ItemCollection<TItem> also has an items property, which is a collection that already exists, in case the items may have to be added one by one. This can be more convenient than defining an own list and setting it to source:

Adding individual nodes to define components to layout
layoutData.affectedComponents.items.add(node1)
layoutData.affectedComponents.items.add(node2)

A powerful option that doesn't use a collection is to use the predicate to set a custom delegate that returns for every node whether it is contained in the set or not:

Using a delegate to determine whether a node belongs to a component to layout
// We assume here that all nodes have a CustomData instance as their tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.affectedComponents = (node) => node.tag

See Also

Developer's Guide
API
AFFECTED_COMPONENTS_DATA_KEY

componentIds

: ItemMapping<TNode, IComparable>
Gets or sets the mapping from nodes to their component comparable that is used to sort the components.
Most layout algorithms cannot handle disconnected components (only the HierarchicalLayout and EdgeRouter can handle such components). Hence, you should not assign the same component ID to nodes of different connected components for algorithms that cannot handle the disconnected components.
conversionfinal

Examples

Since this mapping has to be complete most of the time, the easiest way is usually to use a delegate:
Setting a component ID for every node
// Split components according to the node's color
layoutData.componentIds = (node) =>
  (node.style as ShapeNodeStyle).fill!.toString()

See Also

Developer's Guide
API
COMPONENT_ID_DATA_KEY, ConnectedComponents, connectedComponents

componentLayouts

: ItemMapping<TNode, ILayoutAlgorithm>
Gets or sets the mapping from nodes to the ILayoutAlgorithm used to arrange the content of their component.

This property 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 ItemMapping<TItem, TValue> is applied to all nodes within that component.

conversionfinal

Examples

Using a mapping to determine layout algorithms for components
// Assign at least one node per component to a layout algorithm with which the component should be arranged
// (component1, component2 and component3 are assumed to be arrays containing INode instances)
layoutData.componentLayouts.mapper.set(
  component1[0],
  new HierarchicalLayout(),
)
layoutData.componentLayouts.mapper.set(component2[0], new OrganicLayout())
layoutData.componentLayouts.mapper.set(component3[0], new TreeLayout())

See Also

Developer's Guide
API
COMPONENT_LAYOUT_DATA_KEY

nodeMargins

: ItemMapping<TNode, Insets>
Gets or sets the mapping from nodes to their margins.
Node margins allow reserving space around nodes.
conversionfinal

Examples

The easiest option is to reserve the same space around all nodes, by setting a constant value:

Using constant space around all nodes
layoutData.nodeMargins = new Insets(20)

Handling only certain nodes differently can be done easily by using the mapper property:

Using a mapper to set margins for certain nodes
// node1 only reserves space above and below
layoutData.nodeMargins.mapper.set(node1, new Insets(20, 10, 0, 0))
// node2 has space all around
layoutData.nodeMargins.mapper.set(node2, new Insets(25))
// all other nodes don't get extra space

In cases where the nodeMargins for each node can be determined by looking at the node itself, it's often easier to just set a mapperFunction instead of preparing a mapper:

Using a delegate to determine margins for all nodes
// Retrieve the space around the node from its tag property
layoutData.nodeMargins = (node: INode): Insets =>
  new Insets(parseFloat(node.tag))

See Also

Developer's Guide
API
NODE_MARGIN_DATA_KEY

nodeTypes

: ItemMapping<TNode, any>
Gets or sets the mapping from nodes to an object defining the node type, which is considered by selected component arrangement styles such that components that contain nodes of the same type are placed close to each other.

If all, or almost all nodes of a component have the same node type, the component is considered to be of that type, too. Components with the same type are then preferably put next to each other.

Only the component arrangement 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.

To place components in multiple rows and such that one row can only contain components of the same node type, specify the arrangement style MULTI_ROWS_TYPE_SEPARATED.
conversionfinal

See Also

API
NODE_TYPE_DATA_KEY, ROWS, SINGLE_ROW, SINGLE_COLUMN, MULTI_ROWS_TYPE_SEPARATED

Methods

combineWith

(data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>): LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
Combines this instance with the given layout data.
This keeps the current instance unmodified and instead returns a new instance that dynamically combines the contents of all involved instances.
final

Parameters

data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
The LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> to combine this instance with.

Return Value

LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
The combined layout data.

See Also

Developer's Guide
API
CompositeLayoutData, GenericLayoutData