C

AlignmentStageData<TNode, TEdge, TNodeLabel, TEdgeLabel>

Show Usages
Specifies custom data for the AlignmentStage.
Inheritance Hierarchy

Remarks

Type Parameters

TNode

TEdge

TNodeLabel

TEdgeLabel

Examples

The following example shows how to create a new instance of AlignmentStageData<TNode, TEdge, TNodeLabel, TEdgeLabel> and use it with an AlignmentStage:

Creating an instance of AlignmentStageData
const data = new AlignmentStageData()
// define a node halo for each non-group node, reserving space at the bottom side
data.nodeMargins = (node) =>
  graph.isGroupNode(node) ? Insets.EMPTY : new Insets(0, 0, 40, 0)
graphComponent.graph.applyLayout(new AlignmentStage(coreLayout), data)

In many cases the complete initialization of AlignmentStageData<TNode, TEdge, TNodeLabel, TEdgeLabel> can also be done in a single object initializer:

Using an object initializer for easy creation of AlignmentStageData
const grid = new LayoutGrid(3, 3)
const data = new AlignmentStageData({
  // specify the layout grid which is to be obeyed by the stage
  layoutGridData: new LayoutGridData({
    layoutGridCellDescriptors:
      // node1 is assigned to the first row (index 0)
      // all other nodes are assigned to the second row (index 1)
      (node) => grid.createCellDescriptor(node == node1 ? 0 : 1, 0),
  }),
})

graphComponent.graph.applyLayout(new AlignmentStage(coreLayout), data)

See Also

Developer's Guide

Members

Show:

Constructors

AlignmentStageData

()

Parameters

Properties

layoutGridData

: LayoutGridData<TNode, TEdge, TNodeLabel, TEdgeLabel>
Gets or sets the LayoutGrid 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.
final

See Also

Developer's Guide

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

Developer's Guide
API
NODE_MARGIN_DATA_KEY

snapOffsets

: ItemMapping<TNode, IPoint>
Gets or sets the mapping from nodes to the points relative to the center that are aligned.
Each non-group or empty group node is aligned with the specified point. Its coordinates are defined relatively to the node's center. It is required that the specified point lies within the boundary of the node or on the boundary. If the point is not defined, the node is aligned with its center, that is (0, 0).
If a point lies outside of the bounds of the node, it is projected on the boundary of the node. In particular, the points (-Number.MAX_VALUE,-Number.MAX_VALUE), (Number.MAX_VALUE,-Number.MAX_VALUE), (Number.MAX_VALUE,Number.MAX_VALUE) and (-Number.MAX_VALUE,Number.MAX_VALUE) are mapped to the top-left, top-right, bottom-right, and bottom-left corner of the node, respectively.
conversionfinal

Examples

The easiest way to define the same snap offset point for all items is by using a constant:

Defining the top-left corner as snap point for all nodes
// 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:

Define different snap offsets using a delegate
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 in 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

Developer's Guide
API
SNAP_OFFSET_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