C

GivenCoordinatesLayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>

Show Usages
Specifies custom layout data for the GivenCoordinatesLayout.
Inheritance Hierarchy

Members

Show:

Constructors

GivenCoordinatesLayoutData

()
Creates a new instance of GivenCoordinatesLayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel> which helps to configure GivenCoordinatesLayout.

Parameters

Properties

edgePaths

: ItemMapping<TEdge, IEnumerable<IPoint>>
Gets or sets a mapping from edges to their initial edge paths.

Before calling the core layout algorithm, the GivenCoordinatesLayout sets the path of each edge to the mapped point path. The path must contain the source port location, followed by the bends (if any), followed by the target port location.

If an empty path is specified, the current path will be reset (all bends are cleared, the current source/target port locations are kept). The path of edges that have no associated path are not changed by the stage.

conversionfinal

Examples

The easiest option is to reset all paths, by setting a constant empty path:

Using the same path for all edges
// reset all edge paths
layoutData.edgePaths = IEnumerable.from([])

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

Using a mapper to set the path for certain edges
// reset the edge paths of edge1
layoutData.edgePaths.mapper.set(edge1, IEnumerable.from([]))
// and edge2
layoutData.edgePaths.mapper.set(edge2, IEnumerable.from([]))
// all other edges don't change their paths

In cases where the path for each edge can be determined by looking at the edge itself it's often easier to just set a delegate instead of preparing a mapper:

Using a delegate to determine the path for all edge
// make all edge orthogonal
layoutData.edgePaths = (edge: IEdge): IEnumerable<IPoint> => {
  const sourceLocation = edge.sourcePort.location
  const targetLocation = edge.targetPort.location
  return new List<IPoint>([
    sourceLocation,
    new Point(sourceLocation.x, targetLocation.y),
    targetLocation,
  ])
}

See Also

API
EDGE_PATH_DATA_KEY

nodeLocations

: ItemMapping<TNode, IPoint>
Gets or sets the mapping from nodes to their initial location.
Before calling the core layout algorithm, the GivenCoordinatesLayout places the top-left corner of each node on the specified point location. Nodes that do not have a mapping are not changed by the stage.
conversionfinal

Examples

The easiest option is to place all nodes at the same location, by setting a constant location:

Using the same location for all nodes
// place all nodes to the center of the GraphComponent
layoutData.nodeLocations = graphComponent.viewport.center

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

Using a mapper to set the locations for certain nodes
// node1 get the initial location (10, 20)
layoutData.nodeLocations.mapper.set(node1, new Point(10, 20))
// and node2 (50, 70)
layoutData.nodeLocations.mapper.set(node2, new Point(50, 70))
// all other nodes don't change their initial locations

In cases where the location 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:

Using a delegate to determine the locations for all nodes
// Align all nodes horizontally to x = 0
layoutData.nodeLocations = (node: INode): IPoint =>
  new Point(0, node.layout.y)

See Also

API
NODE_LOCATION_DATA_KEY

nodeSizes

: ItemMapping<TNode, ISize>
Gets or sets the mapping from nodes to their sizes.
Before calling the core layout algorithm, the GivenCoordinatesLayout sets the size of each node to the specified dimension. The size of nodes without associated value is not changed by the stage.
conversionfinal

Examples

The easiest option is to resize all nodes to the same dimension, by setting a constant size:

Using the same dimension for all nodes
// resize all nodes to (30, 30)
layoutData.nodeSizes = new Size(30, 30)

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

Using a mapper to set the dimension for certain nodes
// node1 get the size (10, 20)
layoutData.nodeSizes.mapper.set(node1, new Size(10, 20))
// and node2 (50, 70)
layoutData.nodeSizes.mapper.set(node2, new Size(50, 70))
// all other nodes don't change their dimensions

In cases where the dimension 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:

Using a delegate to determine the dimension for all nodes
// all nodes grow by 50%
layoutData.nodeSizes = (node: INode): ISize =>
  node.layout.toSize().multiply(1.5)

See Also

API
NODE_SIZE_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