LayoutAnchoringStageData<TNode,TEdge,TNodeLabel,TEdgeLabel>

Specifies custom data for the LayoutAnchoringStage.

Inheritance Hierarchy

LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>

LayoutAnchoringStageData

Examples

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

Creating an instance of GraphAnchoringStageData

// Create layout data for both the LayoutAnchoringStage and the layout that's actually being run
const organicLayout = new OrganicLayout()

// first create and configure the actual layout data object
const organicLayoutData = new OrganicLayoutData()
// Configure the organic layout data object ...

const layoutAnchoringStage = new LayoutAnchoringStage(organicLayout)
const layoutAnchoringStageData = new LayoutAnchoringStageData()
layoutAnchoringStageData.nodeAnchoringPolicies = (node) =>
  graphComponent.selection.nodes.includes(node)
    ? LayoutAnchoringPolicy.CENTER
    : LayoutAnchoringPolicy.NONE
// Wrap both into a single layout data
const layoutData =
  layoutAnchoringStageData.combineWith(organicLayoutData)

// Run the layout
graphComponent.graph.applyLayout(layoutAnchoringStage, layoutData)

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

Using an object initializer for easy creation of GraphAnchoringStageData

// Create layout data for both the LayoutAnchoringStage and the layout that's actually being run
const organicLayoutData = new OrganicLayoutData({
  // Configure the other layout data object ...
})

const layoutAnchoringStageData = new LayoutAnchoringStageData({
  nodeAnchoringPolicies: (node) =>
    graphComponent.selection.includes(node)
      ? LayoutAnchoringPolicy.CENTER
      : LayoutAnchoringPolicy.NONE,
})

// Wrap both into a CompositeLayoutData
const layoutData = graphComponent.graph.createCompositeLayoutData(
  layoutAnchoringStageData,
  organicLayoutData,
)

// Run the layout
graphComponent.graph.applyLayout(
  new LayoutAnchoringStage(new OrganicLayout()),
  layoutData,
)

Type Parameters

TNode
TEdge
TNodeLabel
TEdgeLabel

Type Details

yFiles module: algorithms

Constructors

LayoutAnchoringStageData

()

ParametersOptions Overload

options - Object
A map of options to pass to the method.

nodeAnchoringPolicies - ItemMapping<TNode,LayoutAnchoringPolicy>: The mapping of nodes to LayoutAnchoringPolicy values, specifying which part of the node should be used to calculate the anchor point. This option either sets the value directly or recursively sets properties to the instance of the nodeAnchoringPolicies property on the created object.
edgeAnchoringPolicies - ItemMapping<TEdge,LayoutAnchoringPolicy>: The mapping of edges to LayoutAnchoringPolicy values, specifying which part of the edge should be used to calculate the anchor point. This option either sets the value directly or recursively sets properties to the instance of the edgeAnchoringPolicies property on the created object.
nodeLabelAnchoringPolicies - ItemMapping<TNodeLabel,LayoutAnchoringPolicy>: The mapping of node labels to LayoutAnchoringPolicy values, specifying which part of the node label should be used to calculate the anchor point. This option either sets the value directly or recursively sets properties to the instance of the nodeLabelAnchoringPolicies property on the created object.
edgeLabelAnchoringPolicies - ItemMapping<TEdgeLabel,LayoutAnchoringPolicy>: The mapping of edge labels to LayoutAnchoringPolicy values, specifying which part of the edge label should be used to calculate the anchor point. This option either sets the value directly or recursively sets properties to the instance of the edgeLabelAnchoringPolicies property on the created object.

Properties

edgeAnchoringPolicies

: ItemMapping<TEdge,LayoutAnchoringPolicy>

Gets or sets the mapping of edges to LayoutAnchoringPolicy values, specifying which part of the edge should be used to calculate the anchor point.

Remarks

The default policy for an edge is NONE, indicating the edge is not used.
If a single edge is used, it retains its exact coordinates, while the surrounding graph adjusts during layout.
If multiple items are used, an initial anchor point between them is calculated. After the coreLayout algorithm returns, the graph is moved as a whole, to where an anchor point calculated in the same way coincides with the initial anchor point.

Examples

The most common use case is to anchor the graph at a specific edge. In this case, using mapper is appropriate:

Using a mapper to set policies for a certain edge

layoutData.edgeAnchoringPolicies.mapper.set(
  anchorEdge,
  LayoutAnchoringPolicy.UPPER_LEFT,
)

However, if you need the properties of the edges or their user data to determine if they should be declared as anchor edges, it is often better to use mapperFunction. This option is also particularly good when all edges of a specific set should be used as anchor edges:

Using a delegate to determine policies for all edges

layoutData.edgeAnchoringPolicies = (edge) =>
  graphComponent.selection.includes(edge)
    ? LayoutAnchoringPolicy.CENTER
    : LayoutAnchoringPolicy.NONE

If you want to anchor the graph as a whole, using mapperFunction is the best choice:

Using constant policy for all edges

layoutData.edgeAnchoringPolicies = LayoutAnchoringPolicy.UPPER_LEFT

edgeLabelAnchoringPolicies

: ItemMapping<TEdgeLabel,LayoutAnchoringPolicy>

Gets or sets the mapping of edge labels to LayoutAnchoringPolicy values, specifying which part of the edge label should be used to calculate the anchor point.

Remarks

The default policy for an edge label is NONE, indicating the label is not used.
If a single edge label is used, it retains its exact coordinates, while the surrounding graph adjusts during layout.
If multiple items are used, an initial anchor point between them is calculated. After the coreLayout algorithm returns, the graph is moved as a whole, to where an anchor point calculated in the same way coincides with the initial anchor point.

Examples

The most common use case is to anchor the graph at a specific edge label. In this case, using mapper is appropriate:

Using a mapper to set policies for a certain edge label

layoutData.edgeLabelAnchoringPolicies.mapper.set(
  anchorLabel,
  LayoutAnchoringPolicy.UPPER_LEFT,
)

However, if you need the properties of the edge labels or their user data to determine if they should be declared as anchor labels, it is often better to use mapperFunction. This option is also particularly good when all edge labels of a specific set should be anchor labels:

Using a delegate to determine policies for all edge labels

layoutData.edgeLabelAnchoringPolicies = (label) =>
  graphComponent.selection.includes(label)
    ? LayoutAnchoringPolicy.CENTER
    : LayoutAnchoringPolicy.NONE

If you want to anchor the graph as a whole, using mapperFunction is the best choice:

Using constant policy for all edge labels

layoutData.edgeLabelAnchoringPolicies = LayoutAnchoringPolicy.UPPER_LEFT

nodeAnchoringPolicies

: ItemMapping<TNode,LayoutAnchoringPolicy>

Gets or sets the mapping of nodes to LayoutAnchoringPolicy values, specifying which part of the node should be used to calculate the anchor point.

Remarks

The default policy for a node is NONE, indicating the node is not used.
If a single node is used, it retains its exact coordinates, while the surrounding graph adjusts during layout.
If multiple items are used, an initial anchor point between them is calculated. After the coreLayout algorithm returns, the graph is moved as a whole, to where an anchor point calculated in the same way coincides with the initial anchor point.

Examples

The most common use case is to anchor the graph at a specific node. In this case, using mapper is appropriate:

Using a mapper to set policies for a certain node

layoutData.nodeAnchoringPolicies.mapper.set(
  anchorNode,
  LayoutAnchoringPolicy.UPPER_LEFT,
)

However, if you need the properties of the nodes or their user data to determine if they should be declared as anchor nodes, it is often better to use mapperFunction. This option is also particularly good when all nodes of a specific set should be used as anchor nodes:

Using a delegate to determine policies for all nodes

layoutData.nodeAnchoringPolicies = (node) =>
  graphComponent.selection.includes(node)
    ? LayoutAnchoringPolicy.CENTER
    : LayoutAnchoringPolicy.NONE

If you want to anchor the graph as a whole, using mapperFunction is the best choice:

Using constant policy for all nodes

layoutData.nodeAnchoringPolicies = LayoutAnchoringPolicy.UPPER_LEFT

Sample Graphs

nodeLabelAnchoringPolicies

: ItemMapping<TNodeLabel,LayoutAnchoringPolicy>

Gets or sets the mapping of node labels to LayoutAnchoringPolicy values, specifying which part of the node label should be used to calculate the anchor point.

Remarks

The default policy for a node label is NONE, indicating the label is not used.
If a single node label is used, it retains its exact coordinates, while the surrounding graph adjusts during layout.
If multiple items are used, an initial anchor point between them is calculated. After the coreLayout algorithm returns, the graph is moved as a whole, to where an anchor point calculated in the same way coincides with the initial anchor point.

Examples

The most common use case is to anchor the graph at a specific node label. In this case, using mapper is appropriate:

Using a mapper to set policies for a certain node label

layoutData.nodeLabelAnchoringPolicies.mapper.set(
  anchorLabel,
  LayoutAnchoringPolicy.UPPER_LEFT,
)

However, if you need the properties of the node labels or their user data to determine if they should be declared as anchor labels, it is often better to use mapperFunction. This option is also particularly good when all node labels of a specific set should be anchor labels:

Using a delegate to determine policies for all node labels

layoutData.nodeLabelAnchoringPolicies = (label) =>
  graphComponent.selection.includes(label)
    ? LayoutAnchoringPolicy.CENTER
    : LayoutAnchoringPolicy.NONE

If you want to anchor the graph as a whole, using mapperFunction is the best choice:

Using constant policy for all node labels

layoutData.nodeLabelAnchoringPolicies = LayoutAnchoringPolicy.UPPER_LEFT

Methods

combineWith

(data: LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>…) : LayoutData<TNode,TEdge,TNodeLabel,TEdgeLabel>

Combines this instance with the given layout data.

Remarks

This keeps the current instance unmodified and instead returns a new instance that dynamically combines the contents of all involved instances.

Parameters

options - Object
A map of options to pass to the method.

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

Returns

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

Defined in

LayoutData

LayoutAnchoringStageData<TNode,TEdge,TNodeLabel,TEdgeLabel>

Examples

Type Parameters

Type Details

Constructors

LayoutAnchoringStageData

ParametersOptions Overload

Properties

edgeAnchoringPolicies

Remarks

Examples

See Also

edgeLabelAnchoringPolicies

Remarks

Examples

See Also

nodeAnchoringPolicies

Remarks

Examples

See Also

Sample Graphs

nodeLabelAnchoringPolicies

Remarks

Examples

See Also

Methods

combineWith

Remarks

Parameters

Returns

See Also

Defined in