Specifies custom data for the ComponentLayout.
Examples
The following example shows how to create a new instance of ComponentLayoutData and use it with an ComponentLayout:
const layoutData = new ComponentLayoutData()
// Only process components that contain a selected node
layoutData.affectedComponents = graphComponent.selection.selectedNodes
// Reserve additional space around nodes
layoutData.nodeHalos.constant = NodeHalo.create(15)
graphComponent.graph.applyLayout(new ComponentLayout(), layoutData)In many cases the complete initialization of ComponentLayoutData can also be done in a single object initializer:
const layoutData = new ComponentLayoutData({
// Only process components that contain a selected node
affectedComponents: graphComponent.selection.selectedNodes,
// Reserve additional space around nodes
nodeHalos: NodeHalo.create(15)
})
graphComponent.graph.applyLayout(new ComponentLayout(), layoutData)Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.layout.ComponentLayoutData
Constructors
Creates a new instance of ComponentLayoutData which helps configuring ComponentLayout.
Parameters
A map of options to pass to the method.
- affectedComponents - ItemCollection<INode>
A collection of nodes that determine the components that shall be laid out. This option sets the affectedComponents property on the created object.
- componentIds - ItemMapping<INode,IComparable>
The mapping from nodes to their component comparable that is used to sort the components. This option sets the componentIds property on the created object.
- nodeHalos - ItemMapping<INode,NodeHalo>
- nodeTypes - ItemMapping<INode,Object>
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 sets the nodeTypes property on the created object.
- abortHandler - AbortHandler
The AbortHandler used during the layout. This option sets the abortHandler property on the created object.
Properties
Gets or sets the AbortHandler used during the layout.
Remarks
An AbortHandler can be used to gracefully stop or cancel a running layout and offers options for automatically doing so after a predetermined time.
An AbortHandler configured or set here overrides the one on LayoutExecutor.
Examples
The most common use case would be to just configure the AbortHandler here, e.g. to set timeouts for a graceful stop or canceling the running layout:
layoutData.abortHandler.stopDuration = TimeSpan.fromSeconds(10) layoutData.abortHandler.cancelDuration = TimeSpan.fromSeconds(30)layoutData.abortHandler!.stopDuration = TimeSpan.fromSeconds(10) layoutData.abortHandler!.cancelDuration = TimeSpan.fromSeconds(30)
If there's already an AbortHandler instance that's pre-configured or will be used in a different place to, e.g., cancel the layout when the user presses a button, you can also set one explicitly:
layoutData.abortHandler = abortHandlerSee Also
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.selectedNodesAlternatively, 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 delegate 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.fill.toString()// Split components according to the node's color
layoutData.componentIds = (node: INode): any =>
(node.style as ShapeNodeStyle).fill!.toString()See Also
Gets or sets the mapping from nodes to their NodeHalo.
Remarks
Examples
The easiest option is to reserve the same space around all nodes, by setting a constant NodeHalo:
layoutData.nodeHalos.constant = NodeHalo.create(20)Handling only certain nodes differently can be done easily by using the mapper property:
// node1 only reserves space above and below
layoutData.nodeHalos.mapper.set(node1, NodeHalo.create(20, 0, 0, 10))
// node2 has space all around
layoutData.nodeHalos.mapper.set(node2, NodeHalo.create(25))
// all other nodes don't get extra spaceIn cases where the NodeHalo for each node can be determined by looking at the node itself it's often easier to just set a delegate instead of preparing a mapper:
// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node) => NodeHalo.create(parseFloat(node.tag))// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node: INode): NodeHalo =>
NodeHalo.create(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 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
Combines this instance with the given layout data.
Remarks
Parameters
A map of options to pass to the method.
- data - LayoutData
- The LayoutData to combine this instance with.
Returns
- ↪LayoutData
- The combined layout data.