C

TabularLayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>

Show Usages
Specifies custom data for the TabularLayout.
Inheritance Hierarchy

Members

Show:

Constructors

TabularLayoutData

()

Parameters

Properties

freeNodeComparator

: function(TNode, TNode): number
Gets or sets the comparison that defines the order in which the free nodes are placed in the table.

The nodes are arranged in the table in a row-wise fashion using the order provided by this comparison, i.e., the first row is filled from left to right, then the second row is filled, again from left to right etc.

Nodes that are mapped to specific LayoutGridCellDescriptor are considered to be fixed and are not sorted using this function. This only applies when using policy FIXED_SIZE. Furthermore, if FROM_SKETCH is active, this property is ignored.

final

Property Value

the comparison that defines the node order or null if the order should be defined by the internal node indices

Default Value

The default value is: null
The nodes are sorted with respect to their indices of the graph structure.

See Also

Developer's Guide

layoutGridCellDescriptorsResult

: IMapper<TNode, LayoutGridCellDescriptor>
readonly
Gets a mapper from nodes to their assigned layout grid cell descriptors.
This property can be used after the layout to retrieve the layout grid cell descriptors assigned by the TabularLayout. This is useful when the row/column mapping is not explicitly provided, but automatically computed by the layout running in mode AUTO_SIZE or mode FROM_SKETCH.
readonlyfinal

Examples

Retrieving grid cell information after a layout
const tabularLayout = new TabularLayout()
const layoutData = new TabularLayoutData()

graph.applyLayout(tabularLayout, layoutData)

for (const node of graph.nodes) {
  const descriptor = layoutData.layoutGridCellDescriptorsResult.get(node)!
  console.log(
    `Node ${node} has been placed in row ${descriptor.row.index}, column ${descriptor.column.index}`,
  )
}

See Also

API
LAYOUT_GRID_CELL_DESCRIPTOR_RESULT_DATA_KEY

layoutGridData

: LayoutGridData<TNode, TEdge, TNodeLabel, TEdgeLabel>
Gets or sets the layout grid data.
How the grid is used by TabularLayout depends on the use case and the chosen layout policy:
  • When using AUTO_SIZE, it is not necessary to define a layout grid at all. If a grid is specified, its existing rows and columns will be cleared and the grid is filled with the data resembling the computed layout. That allows to query information about the rows and columns using classes LayoutGridRow and LayoutGridColumn (e.g. query computed position of row/column).
  • For policy FIXED_SIZE, it is necessary to define a layout grid instance. The size of the given grid defines the size of the computed tabular layout. A node can be mapped to a specific grid cell to manually define its location in the layout.
  • Policy FROM_SKETCH: the same as for AUTO_SIZE applies with respect to the necessity of the layout grid. That means that the grid is optional and only necessary if the resulting dimension shall be queried after the layout.
final

See Also

Developer's Guide

nodeDescriptors

: ItemMapping<TNode, TabularLayoutNodeDescriptor>
Gets or sets the mapping of nodes to their TabularLayoutNodeDescriptor that defines custom node placement settings.
If a node is mapped to null, then the default descriptor applies for that node.
conversionfinal

See Also

Developer's Guide
API
NODE_DESCRIPTOR_DATA_KEY

nodeMargins

: ItemMapping<TNode, Insets>
Gets or sets the mapping from nodes to their margins.
Node margins allow to reserve space around nodes.
conversionfinal

Examples

The easiest option is to reserve the same space around all nodes, by setting a constant value:

Using constant space around all nodes
layoutData.nodeMargins = new Insets(20)

Handling only certain nodes differently can be done easily by using the mapper property:

Using a mapper to set margins for certain nodes
// 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 space

In 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:

Using a delegate to determine margins for all nodes
// Retrieve the space around the node from its tag property
layoutData.nodeMargins = (node: INode): Insets =>
  new Insets(parseFloat(node.tag))

See Also

API
NODE_MARGIN_DATA_KEY

Methods

combineWith

(data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>): LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
Combines this instance with the given layout data.
This keeps the current instance unmodified and instead returns a new instance that dynamically combines the contents of all involved instances.
final

Parameters

data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
The LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> to combine this instance with.

Return Value

LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>
The combined layout data.

See Also

Developer's Guide
API
CompositeLayoutData, GenericLayoutData