C

LayoutAnchoringStageData<TNode, TEdge, TNodeLabel, TEdgeLabel>

Specifies custom data for the LayoutAnchoringStage.
Inheritance Hierarchy

Members

Show:

Constructors

Parameters

Properties

Gets or sets the mapping of edges to LayoutAnchoringPolicy values, specifying which part of the edge should be used to calculate the anchor point.
  • 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.
The LayoutAnchoringStage does not alter the layout calculated by its coreLayout. It only moves the entire graph as a post-processing step. For use cases requiring an incremental layout, where the algorithm should only arrange some items while others remain unchanged (or change only slightly), please refer to the PartialLayout, the HierarchicalLayout (see mode fromSketchMode), or the OrganicLayout (see property scope).
conversionfinal

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

See Also

API
EDGE_ANCHORING_POLICY_DATA_KEY
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.
  • 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.
The LayoutAnchoringStage does not alter the layout calculated by its coreLayout. It only moves the entire graph as a post-processing step. For use cases requiring an incremental layout, where the algorithm should only arrange some items while others remain unchanged (or change only slightly), please refer to the PartialLayout, the HierarchicalLayout (see mode fromSketchMode), or the OrganicLayout (see property scope).
conversionfinal

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

See Also

API
EDGE_LABEL_ANCHORING_POLICY_DATA_KEY
Gets or sets the mapping of nodes to LayoutAnchoringPolicy values, specifying which part of the node should be used to calculate the anchor point.
  • 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.
The LayoutAnchoringStage does not alter the layout calculated by its coreLayout. It only moves the entire graph as a post-processing step. For use cases requiring an incremental layout, where the algorithm should only arrange some items while others remain unchanged (or change only slightly), please refer to the PartialLayout, the HierarchicalLayout (see mode fromSketchMode), or the OrganicLayout (see property scope).
conversionfinal

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

ShownSetting: Anchoring the graph at a single node in different layouts

See Also

API
NODE_ANCHORING_POLICY_DATA_KEY
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.
  • 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.
The LayoutAnchoringStage does not alter the layout calculated by its coreLayout. It only moves the entire graph as a post-processing step. For use cases requiring an incremental layout, where the algorithm should only arrange some items while others remain unchanged (or change only slightly), please refer to the PartialLayout, the HierarchicalLayout (see mode fromSketchMode), or the OrganicLayout (see property scope).
conversionfinal

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

See Also

API
NODE_LABEL_ANCHORING_POLICY_DATA_KEY

Methods

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