Specifies custom data for the ComponentLayout.
Examples
The following example shows how to create a new instance of ComponentLayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> and use it with an ComponentLayout:
const layoutData = new ComponentLayoutData()
// Only process components that contain a selected node
layoutData.affectedComponents = graphComponent.selection.nodes
// Reserve additional space around nodes
layoutData.nodeMargins = new Insets(15)
graphComponent.graph.applyLayout(new ComponentLayout(), layoutData)In many cases the complete initialization of ComponentLayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> can also be done in a single object initializer:
const layoutData = new ComponentLayoutData({
// Only process components that contain a selected node
affectedComponents: graphComponent.selection.nodes,
// Reserve additional space around nodes
nodeMargins: new Insets(15),
})
graphComponent.graph.applyLayout(new ComponentLayout(), layoutData)Type Parameters
- TNode
- TEdge
- TNodeLabel
- TEdgeLabel
Type Details
- yFiles module
- algorithms
Constructors
Parameters
A map of options to pass to the method.
- affectedComponents - ItemCollection<TNode>
- A collection of nodes that determine the components that shall be laid out. This option either sets the value directly or recursively sets properties to the instance of the affectedComponents property on the created object.
- componentIds - ItemMapping<TNode,IComparable>
- The mapping from nodes to their component comparable that is used to sort the components. This option either sets the value directly or recursively sets properties to the instance of the componentIds property on the created object.
- nodeMargins - ItemMapping<TNode,Insets>
- The mapping from nodes to their margins. This option either sets the value directly or recursively sets properties to the instance of the nodeMargins property on the created object.
- nodeTypes - ItemMapping<TNode,any>
- 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. This option either sets the value directly or recursively sets properties to the instance of the nodeTypes property on the created object.
- componentLayouts - ItemMapping<TNode,ILayoutAlgorithm>
- The mapping from nodes to the ILayoutAlgorithm used to arrange the content of their component. This option either sets the value directly or recursively sets properties to the instance of the componentLayouts property on the created object.
Properties
Gets or sets a collection of nodes that determine the components that shall be laid out.
Remarks
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>:
layoutData.affectedComponents = graphComponent.selection.nodesAlternatively, 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:
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:
// We assume here that all nodes have a CustomData instance as their tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.affectedComponents = (node) => node.tagSee Also
Gets or sets the mapping from nodes to their component comparable that is used to sort the components.
Examples
// Split components according to the node's color
layoutData.componentIds = (node) =>
(node.style as ShapeNodeStyle).fill!.toString()See Also
Gets or sets the mapping from nodes to the ILayoutAlgorithm used to arrange the content of their component.
Remarks
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.
Examples
// 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
Gets or sets the mapping from nodes to their margins.
Remarks
Examples
The easiest option is to reserve the same space around all nodes, by setting a constant value:
layoutData.nodeMargins = new Insets(20)Handling only certain nodes differently can be done easily by using the mapper property:
// 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 spaceIn 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:
// Retrieve the space around the node from its tag property
layoutData.nodeMargins = (node: INode): Insets =>
new Insets(parseFloat(node.tag))See Also
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.
Remarks
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.
See Also
Methods
combineWith
(data: LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>…) : LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>Combines this instance with the given layout data.
Remarks
Parameters
A map of options to pass to the method.
- data - LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>
- The LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel> to combine this instance with.
Returns
- ↪LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>
- The combined layout data.