Specifies a PartitionGrid for a layout.
Remarks
The PartitionCellId mapping has to be specified by either setting the cellIds property, or either or both of the rowIndices and columnIndices properties. When cellIds is set, either the grid property has to be set as well or a LayoutExecutor with automatic table configuration has to be used. Otherwise when rowIndices and columnIndices are used, the size of the grid may be induced by the maximum returned row and column indices. The size is then used to extend the grid if necessary or create a new PartitionGrid if grid is not specified.
Note that cell spanning is only supported using the cellIds.
Default Values of Properties
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 = new 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)
// Run a layout with the PartitionGridData. Note that the layout-specific
// LayoutData classes that support partition grids (e.g. HierarchicLayoutData)
// also contain a PartitionGridData that can be used directly.
graph.applyLayout(new HierarchicLayout(), gridData)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 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.
const rowIndicesMapper = new Mapper()
rowIndicesMapper.set(node1, 0)
rowIndicesMapper.set(node2, 0)
rowIndicesMapper.set(node3, 0)
rowIndicesMapper.set(node4, 1)
const columnIndicesMapper = new Mapper()
columnIndicesMapper.set(node1, 0)
columnIndicesMapper.set(node2, 1)
columnIndicesMapper.set(node3, 2)
columnIndicesMapper.set(node4, 1)
const gridData = new PartitionGridData({
rowIndices: rowIndicesMapper,
columnIndices: columnIndicesMapper
})
// Run a layout with the PartitionGridData. Note that the layout-specific
// LayoutData classes that support partition grids (e.g. HierarchicLayoutData)
// also contain a PartitionGridData that can be used directly.
graph.applyLayout(new HierarchicLayout(), gridData)// Create three nodes and place them in grid cells in the following way
// +---+---+
// | 1 | 2 |
// +---+---+
// | 3 |
// +-------+
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.
const rowIndicesMapper = new Mapper<INode, number>()
rowIndicesMapper.set(node1, 0)
rowIndicesMapper.set(node2, 0)
rowIndicesMapper.set(node3, 0)
rowIndicesMapper.set(node4, 1)
const columnIndicesMapper = new Mapper<INode, number>()
columnIndicesMapper.set(node1, 0)
columnIndicesMapper.set(node2, 1)
columnIndicesMapper.set(node3, 2)
columnIndicesMapper.set(node4, 1)
const gridData = new PartitionGridData({
rowIndices: rowIndicesMapper,
columnIndices: columnIndicesMapper
})
// Run a layout with the PartitionGridData. Note that the layout-specific
// LayoutData classes that support partition grids (e.g. HierarchicLayoutData)
// also contain a PartitionGridData that can be used directly.
graph.applyLayout(new HierarchicLayout(), gridData)Type Details
- yfiles module
- view-layout-bridge
- yfiles-umd modules
- view-layout-bridge
- Legacy UMD name
- yfiles.layout.PartitionGridData
See Also
Constructors
Creates a new instance of PartitionGridData which helps configuring PartitionGrid.
Parameters
A map of options to pass to the method.
- grid - PartitionGrid
The partition grid. This option sets the grid property on the created object.
- cellIds - ContextItemMapping<INode,PartitionCellId,PartitionGrid>
The mapping from nodes to PartitionCellId using the partition grid as context. This option sets the cellIds property on the created object.
- rowIndices - ItemMapping<INode,number>
The mapping from a node to its row index. This option sets the rowIndices property on the created object.
- columnIndices - ItemMapping<INode,number>
The mapping from a node to its column index. This option sets the columnIndices property on the created object.
- optimizeRowOrder - boolean
A value indicating whether or not the order of the rows should be chosen automatically to minimize edge lengths. This option sets the optimizeRowOrder property on the created object.
- optimizeColumnOrder - boolean
A value indicating whether or not the order of the columns should be chosen automatically to minimize edge lengths. This option sets the optimizeColumnOrder property on the created object.
Properties
Gets or sets the mapping from nodes to PartitionCellId using the partition grid as context.
Remarks
A node is placed inside the columns/rows defined by the corresponding PartitionCellId identifier. Instances can be shared among multiple nodes, but don't have to be shared. Multi-cell identifiers (i.e., an identifier that represents multiple columns/rows) are not allowed to overlap each other.
In case every node has a specific single cell, there's also the possibility to set row and column indices which will configure the partition grid based on the observed indices. This may be easier in some cases.
Examples
There are different ways of defining the PartitionCellIds via this property, depending on which option is the most convenient to work with. If the desired PartitionCellIds can readily be inferred from the nodes themselves, then the most convenient option would be the contextDelegate property:
gridData.cellIds = (node, grid) => {
const customData = node.tag
return grid.createCellId(customData.row, customData.column)
}gridData.cellIds = (node: INode, grid: PartitionGrid): PartitionCellId => {
const customData = node.tag
return grid.createCellId(customData.row, customData.column)!
}This is mostly equivalent to the following usage of the delegate property:
const grid = gridData.grid
gridData.cellIds = (node) => {
const customData = node.tag
return grid.createCellId(customData.row, customData.column)
}const grid = gridData.grid
gridData.cellIds = (node: INode) => {
const customData = node.tag
return grid.createCellId(customData.row, customData.column)!
}The differences are that the contextDelegate also works correctly when the PartitionGrid comes pre-configured from another source, such as tableLayoutConfigurator and is not always the same instance as grid.
When setting PartitionCellIds for only some nodes manually it's often easier to use the mapper property:
const grid = gridData.grid
gridData.cellIds.mapper.set(node1, grid.createCellId(0, 0))
gridData.cellIds.mapper.set(node2, grid.createCellId(2, 0))See Also
Gets or sets the mapping from a node to its column index.
Remarks
When using rowIndices or columnIndices, the partition grid is configured automatically with the required number of rows and columns.
If nodes must be placed so that they span multiple cells in the partition grid, then cellIds must be used and the partition grid prepared accordingly.
Examples
When the row and column indices can be readily inferred from the nodes, then the easiest option is usually to use the delegate:
gridData.rowIndices = (node) => node.tag.row
gridData.columnIndices = (node) => node.tag.columnIn case only some nodes need to be mapped to their respective row/column indices, it's sometimes easier to use the mapper:
gridData.rowIndices.mapper.set(node1, 0)
gridData.columnIndices.mapper.set(node1, 1)
gridData.rowIndices.mapper.set(node2, 1)
gridData.columnIndices.mapper.set(node2, 1)See Also
Gets or sets the partition grid.
Remarks
Examples
When creating a custom PartitionGrid this property can be set and subsequently used in cellIds:
const gridData = new PartitionGridData({
grid: new PartitionGrid(2, 2)
})The PartitionGrid from this property can also be modified and subsequently used. It will be created on first access to the property:
const row1 = gridData.grid.addRow()
const row2 = gridData.grid.addRow()
const column1 = gridData.grid.addColumn()
const column2 = gridData.grid.addColumn()See Also
Gets or sets a value indicating whether or not the order of the columns should be chosen automatically to minimize edge lengths.
Remarks
For all columns where indexFixed is set to true, the relative ordering given by the indices is preserved. The remaining columns may be sorted again so that the overall edge lengths are minimized.
If explicitly set, this value is propagated to the PartitionGrid's optimizeColumnOrder property.
Default Value
true.The order is chosen automatically.
Sample Graphs
Gets or sets a value indicating whether or not the order of the rows should be chosen automatically to minimize edge lengths.
Remarks
For all rows where indexFixed is set to true, the relative ordering given by the indices is preserved. The remaining rows may be sorted again so that the overall edge lengths are minimized.
If explicitly set, this value is propagated to the PartitionGrid's optimizeRowOrder property.
Default Value
true.The order is chosen automatically.
Sample Graphs
Gets or sets the mapping from a node to its row index.
Remarks
When using rowIndices or columnIndices, the partition grid is configured automatically with the required number of rows and columns.
If nodes must be placed so that they span multiple cells in the partition grid, then cellIds must be used and the partition grid prepared accordingly.
Examples
When the row and column indices can be readily inferred from the nodes, then the easiest option is usually to use the delegate:
gridData.rowIndices = (node) => node.tag.row
gridData.columnIndices = (node) => node.tag.columnIn case only some nodes need to be mapped to their respective row/column indices, it's sometimes easier to use the mapper:
gridData.rowIndices.mapper.set(node1, 0)
gridData.columnIndices.mapper.set(node1, 1)
gridData.rowIndices.mapper.set(node2, 1)
gridData.columnIndices.mapper.set(node2, 1)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.