Specifies the layout data for the GenericPartitionGridStage.
Examples
The following example shows how to create a new instance of GenericPartitionGridStageData and use it with a GenericPartitionGridStage:
const layoutData = new GenericPartitionGridStageData()
// Define partition grid from custom data
layoutData.partitionGridData.rowIndices = (node) => node.tag.rowIndex
layoutData.partitionGridData.columnIndices = (node) => node.tag.columnIndex
// Define split edges from custom data
layoutData.splitEdges = (edge) => edge.tag.isSplitEdge
// Combine the layout data of the stage and the core layout
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graph.applyLayout(
new GivenCoordinatesStage(coreLayout),
compositeLayoutData
)const layoutData = new GenericPartitionGridStageData()
// Define partition grid from custom data
layoutData.partitionGridData.rowIndices = (node: INode): number =>
node.tag.rowIndex
layoutData.partitionGridData.columnIndices = (node: INode): number =>
node.tag.columnIndex
// Define split edges from custom data
layoutData.splitEdges = (edge) => edge.tag.isSplitEdge
// Combine the layout data of the stage and the core layout
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graph.applyLayout(
new GivenCoordinatesStage(coreLayout),
compositeLayoutData
)In many cases the complete initialization of GenericPartitionGridStageData can also be done in a single object initializer:
const layoutData = new GenericPartitionGridStageData({
// Define partition grid from custom data
partitionGridData: new PartitionGridData({
rowIndices: (node) => node.tag.rowIndex,
columnIndices: (node) => node.tag.columnIndex
}),
// Define split edges from custom data
splitEdges: (edge) => edge.tag.isSplitEdge
})
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graph.applyLayout(
new GenericPartitionGridStage(coreLayout),
compositeLayoutData
)const layoutData = new GenericPartitionGridStageData({
// Define partition grid from custom data
partitionGridData: new PartitionGridData({
rowIndices: (node) => node.tag.rowIndex,
columnIndices: (node) => node.tag.columnIndex
}),
// Define split edges from custom data
splitEdges: (edge: IEdge): boolean => edge.tag.isSplitEdge
})
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graph.applyLayout(
new GenericPartitionGridStage(coreLayout),
compositeLayoutData
)Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.layout.GenericPartitionGridStageData
See Also
Constructors
Creates a new instance of GenericPartitionGridStageData which helps configuring GenericPartitionGridStage.
Parameters
A map of options to pass to the method.
- partitionGridData - PartitionGridData
The partitionGridData that allows to configure the PartitionGrid for the layout stage. This option sets the partitionGridData property on the created object.
- splitEdges - ItemCollection<IEdge>
The collection of edges that should not be considered when calculating the sub-components. This option sets the splitEdges property on the created object.
Properties
Gets or sets the partitionGridData that allows to configure the PartitionGrid for the layout stage.
Examples
The following sample shows how to assign nodes to partition grid cells simply via cell indices:
// Create four nodes and place them in grid cells in the following way
// +--+--+--+
// | 1| 2| 3|
// +--+--+--+
// | 4|
// +--+
const gridData = layoutData.partitionGridData
const node1 = graph.createNode()
const node2 = graph.createNode()
const node3 = graph.createNode()
const node4 = graph.createNode()
// Assign the nodes to their rows and columns.
// Note that don't have to create or use PartitionGrid directly in this case.
// Setting the indices is enough.
gridData.rowIndices.mapper.set(node1, 0)
gridData.rowIndices.mapper.set(node2, 0)
gridData.rowIndices.mapper.set(node3, 0)
gridData.rowIndices.mapper.set(node4, 1)
gridData.columnIndices.mapper.set(node1, 0)
gridData.columnIndices.mapper.set(node2, 1)
gridData.columnIndices.mapper.set(node3, 2)
gridData.columnIndices.mapper.set(node4, 1)
const compositeLayoutData = new CompositeLayoutData(
coreLayoutData,
layoutData
)
graph.applyLayout(
new GenericPartitionGridStage(coreLayout),
compositeLayoutData
)When used this way there is no need to create a PartitionGrid instance or work with it directly. For more flexibility, e.g. to use cells that span multiple columns or rows, the PartitionGrid can be used as well:
// Create three nodes and place them in grid cells in the following way
// +--+--+
// | 1| 2|
// +--+--+
// | 3 |
// +--+--+
const gridData = layoutData.partitionGridData
const node1 = graph.createNode(new Rect(0, 0, 50, 50))
const node2 = graph.createNode(new Rect(0, 0, 50, 50))
const node3 = graph.createNode(new Rect(0, 0, 125, 50))
// Create a new PartitionGrid with two rows and two columns
const grid = new PartitionGrid(2, 2)
gridData.grid = grid
// Assign the nodes to their cells
gridData.cellIds.mapper.set(node1, grid.createCellId(0, 0))
gridData.cellIds.mapper.set(node2, grid.createCellId(0, 1))
gridData.cellIds.mapper.set(node3, grid.createRowSpanId(1))
graph.applyLayout(
new GenericPartitionGridStage(coreLayout),
new CompositeLayoutData(coreLayoutData, layoutData)
)Gets or sets the collection of edges that should not be considered when calculating the sub-components.
Remarks
Examples
If only a few edges should be removed during the calculation of the sub-components, the easiest way is often to add them one by one via the items collection:
layoutData.splitEdges.items.add(edge1)
layoutData.splitEdges.items.add(edge2)If you already have a collection or IEnumerable<T> for those edges, the source property is usually easier:
// Consider selected edges
layoutData.splitEdges = graphComponent.selection.selectedEdgesIf it can be inferred directly from the edge itself whether it should be routed that way, a delegate is often most convenient:
layoutData.splitEdges = (edge) => edge.tag.isSplitEdgeMethods
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.