Specifies custom data for the AlignmentStage.
Examples
The following example shows how to create a new instance of AlignmentStageData and use it with an AlignmentStage:
const data = new AlignmentStageData()
// define a node halo for each non-group node, reserving space at the bottom side
data.nodeHalos = (node) =>
graph.isGroupNode(node)
? NodeHalo.ZERO_HALO
: NodeHalo.create(0, 0, 40, 0)
graphComponent.graph.applyLayout(new AlignmentStage(coreLayout), data)In many cases the complete initialization of AlignmentStageData can also be done in a single object initializer:
const grid = new PartitionGrid(3, 3)
const data = new AlignmentStageData({
// specify the partition grid which is to be obeyed by the stage
partitionGridData: new PartitionGridData({
grid: grid,
cellIds: (node) =>
node == node1
? // node1 is assigned to the first row (index 0)
grid.createCellId(0, 0)
: // all other nodes are assigned to the second row (index 1)
grid.createCellId(1, 0)
})
})
graphComponent.graph.applyLayout(new AlignmentStage(coreLayout), data)const grid = new PartitionGrid(3, 3)
const data = new AlignmentStageData({
// specify the partition grid which is to be obeyed by the stage
partitionGridData: new PartitionGridData({
grid: grid,
cellIds: (node: INode) =>
node == node1
? // node1 is assigned to the first row (index 0)
grid.createCellId(0, 0)
: // all other nodes are assigned to the second row (index 1)
grid.createCellId(1, 0)
})
})
graphComponent.graph.applyLayout(new AlignmentStage(coreLayout), data)Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.layout.AlignmentStageData
See Also
Constructors
Creates a new instance of AlignmentStageData which helps configuring AlignmentStage.
Parameters
A map of options to pass to the method.
- snapOffsets - ItemMapping<INode,IPoint>
The mapping from nodes to the points relative to the center that are aligned. This option sets the snapOffsets property on the created object.
- nodeHalos - ItemMapping<INode,NodeHalo>
- partitionGridData - PartitionGridData
The partition grid layout data which allows to define a grid that is respected by the AlignmentStage so that nodes that are not in the same column/row may not be aligned. This option sets the partitionGridData 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 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 partition grid layout data which allows to define a grid that is respected by the AlignmentStage so that nodes that are not in the same column/row may not be aligned.
See Also
Gets or sets the mapping from nodes to the points relative to the center that are aligned.
Remarks
Examples
The easiest way to define the same snap offset point for all items is by using a constant:
// Specify that the snap point for all nodes should be the top-left corner
layoutData.snapOffsets = new Point(-Number.MAX_VALUE, -Number.MAX_VALUE)A convenient way to define different points for specific nodes is to use a delegate like so:
layoutData.snapOffsets = (node) => {
if (node == node1) {
// Align this node using its bottom-right corner
return new Point(Number.MAX_VALUE, Number.MAX_VALUE)
}
if (node == node2) {
// Align this node using the point on the center of the left border
return new Point(-Number.MAX_VALUE, 0)
}
// Align all other nodes using the center coordinates
return new Point(0, 0)
}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.