Members
Constructors
Properties
Gets or sets the mapping from edges to their bend cost.
1, which is used for edges that do not have an individual bend cost.Examples
When there are only a few edges to customize bend costs for, the easiest way is usually to use the mapper:
// Try harder to prevent bends for edge1
layoutData.edgeBendCosts.mapper.set(edge1, 1.5)
// Bends for edge2 are not as bad
layoutData.edgeBendCosts.mapper.set(edge2, 0.2)If the bend cost can readily be computed from the edge itself, the mapperFunction is often the more convenient option:
// The more labels an edge has, the more important it is to
// prevent bends
layoutData.edgeBendCosts = (edge: IEdge): number => 1 + edge.labels.sizeSee Also
Developer's Guide
API
- EDGE_BEND_COST_DATA_KEY
Gets or sets the mapping from edges to their crossing cost.
1, which is used for edges which do not have an individual crossing cost.Examples
When there are only a few edges to customize crossing costs for, the easiest way is usually to use the mapper:
// Try harder to prevent crossings with edge1
layoutData.edgeCrossingCosts.mapper.set(edge1, 1.5)
// Crossings with edge2 are not as bad
layoutData.edgeCrossingCosts.mapper.set(edge2, 0.2)If the crossing cost can readily be computed from the edge itself, the mapperFunction is often the more convenient option:
// The more labels an edge has, the more important it is to
// prevent crossing with it
layoutData.edgeCrossingCosts = (edge: IEdge): number =>
1 + edge.labels.sizeSee Also
Developer's Guide
API
- EDGE_CROSSING_COST_DATA_KEY
Gets or sets the mapping from edges to their OrthogonalLayoutEdgeDescriptor.
null, the default descriptor is used.See Also
Developer's Guide
API
- OrthogonalLayoutEdgeDescriptor, EDGE_DESCRIPTOR_DATA_KEY
Gets or sets the mapping from edges to their directedness, which is considered for the detection of substructures.
The directedness is only considered for the detection of substructures in the input graph i.e., trees, chains, and cycles. A substructure is only identified as such if all edges are either undirected or consistently directed with respect to the specified directedness.
- A directedness value of
1indicates that the edge is considered to be directed from source to target. - A directedness value of
-1indicates that the edge is considered to be directed from target to source. - A directedness value of
0indicates that the edge is considered to be undirected.
All edges are undirected by default.
0.Examples
The easiest option is to define all edges with the same directedness:
layoutData.edgeDirectedness = 1Handling only certain edges differently can be done easily by using the mapper property:
// edge1 should be considered directed
layoutData.edgeDirectedness.mapper.set(edge1, 1)
// edge2 should be considered directed against the flow
layoutData.edgeDirectedness.mapper.set(edge2, -1)
// All other edges not set in the mapper are treated as undirectedIn cases where the directedness 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:
// Treat edges as directed or undirected based on their style's arrowhead
layoutData.edgeDirectedness = (edge: IEdge): 0 | 1 | -1 => {
const style = edge.style as PolylineEdgeStyle
// edges with either no arrows on both ends or an arrow on both ends should be considered undirected
if (
(style.sourceArrow === null && style.targetArrow === null) ||
(style.sourceArrow !== null && style.targetArrow !== null)
) {
return 0
}
// edges with only a target arrow are directed from source to target
if (style.targetArrow !== null) {
return 1
}
// edges with only a source arrow are directed from target to source
if (style.sourceArrow !== null) {
return -1
}
return 0
}See Also
Developer's Guide
API
- EDGE_DIRECTEDNESS_DATA_KEY
Gets or sets the mapping that provides an EdgeLabelPreferredPlacement instance for edge labels.
Examples
Depending on how much customization is needed, some ways of setting EdgeLabelPreferredPlacements are more convenient than others. For example, to set the same descriptor for all labels, you can just use the constant property:
layoutData.edgeLabelPreferredPlacements = new EdgeLabelPreferredPlacement(
{
// Place labels along the edge
angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
angle: 0,
// ... on either side
edgeSide: LabelEdgeSides.LEFT_OF_EDGE | LabelEdgeSides.RIGHT_OF_EDGE,
// ... with a bit of distance to the edge
distanceToEdge: 5,
},
)If some labels should use custom placement or this has to be configured ahead of time, you can use the mapper instead:
// Place label1 orthogonal to the edge anywhere on it
layoutData.edgeLabelPreferredPlacements.mapper.set(
label1,
new EdgeLabelPreferredPlacement({
placementAlongEdge: LabelAlongEdgePlacements.ANYWHERE,
angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
angle: Math.PI / 2,
}),
)
// Place label2 near the edge's source on either side of it, and make it parallel to the edge
layoutData.edgeLabelPreferredPlacements.mapper.set(
label2,
new EdgeLabelPreferredPlacement({
placementAlongEdge: LabelAlongEdgePlacements.AT_SOURCE,
edgeSide: LabelEdgeSides.RIGHT_OF_EDGE | LabelEdgeSides.LEFT_OF_EDGE,
angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
angle: 0,
}),
)When the preferred placement can be inferred from the label itself, a delegate is usually the easiest choice:
layoutData.edgeLabelPreferredPlacements = (
label: ILabel,
): EdgeLabelPreferredPlacement => {
const customData = label.tag as CustomData
return new EdgeLabelPreferredPlacement({
angle: 0,
angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
// If the tag says to place the label in the center, put it in the center parallel to the edge's path
// All other labels can be placed anywhere, but on the side of the edge.
placementAlongEdge: customData.placeInCenter
? LabelAlongEdgePlacements.AT_CENTER
: LabelAlongEdgePlacements.ANYWHERE,
edgeSide: customData.placeInCenter
? LabelEdgeSides.ON_EDGE
: LabelEdgeSides.LEFT_OF_EDGE | LabelEdgeSides.RIGHT_OF_EDGE,
})
}Note that the preferred placement can also be inferred from an arbitrary ILabelModelParameter:
layoutData.edgeLabelPreferredPlacements =
EdgeLabelPreferredPlacement.fromParameter(
NinePositionsEdgeLabelModel.CENTER_CENTERED,
)See Also
Gets or sets the mapping from edges to their orientation, specifying how they should be routed with respect to the main layout direction.
The orientation of an edge is 1 if it should be routed in the main layout direction, -1 if it should be routed against the main layout direction, or 0 if it should be routed independently of the main layout direction.
The main layout orientation can be set using method layoutOrientation.
Examples
The easiest option is to define all edges with the same orientation:
// Specify all edges to be oriented in the main layout direction
layoutData.edgeOrientation = 1Handling only certain edges differently can be done easily by using the mapper property:
layoutData.edgeOrientation.mapper.set(edge1, 1)
layoutData.edgeOrientation.mapper.set(edge2, -1)In cases where the directedness 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:
layoutData.edgeOrientation = (edge) => edge.tag.edgeOrientationSee Also
Developer's Guide
API
- EDGE_ORIENTATION_DATA_KEY
Gets or sets the mapping from nodes to their margins.
Examples
The easiest option is to reserve the same space around all nodes, by setting a constant value:
layoutData.nodeMargins = new Insets(20)Handling only certain nodes differently can be done easily by using the mapper property:
// 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 spaceIn 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:
// 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
Gets or sets the mapping from nodes to an object defining the node type, which is considered for the detection of tree, chain, and cycle substructures.
If node types are defined, only nodes of the same type can form a substructure.
Node types are only considered when using the substructure features treeSubstructureStyle, chainSubstructureStyle, or cycleSubstructureStyle.
See Also
Developer's Guide
API
- NODE_TYPE_DATA_KEY
Gets or sets the sub-data that provides a way of influencing the placement of the ports.
The port placement can be influenced by specifying EdgePortCandidates for the source and target of an edge, as well as by specifying NodePortCandidates at the nodes.
In addition, it is possible to specify that ports should be grouped at the source or target.
If both EdgePortCandidates and NodePortCandidates are specified, the layout algorithm tries to match them. An edge port candidate matches a node port candidate if
- their matchingIds are equal or one type is
null, - they belong to a common side or one side is ANY, and
- if both candidates are fixed, they describe the same positions.
The position of a port candidate is defined by offset or the actual offset of the edge endpoint for fixed-from-sketch candidates. When there is no match, the port candidate with the lowest costs specified for the edge is chosen.
Gets or sets a mapping from edges to an object representing their source edge group.
Examples
One simple way to use source groups is to use the edge's source node as group ID which effectively groups all edges with the same source together:
layoutData.sourceGroupIds = (edge: IEdge) => edge.sourceNodeAnother useful way to use a delegate here would be grouping edges by some commonality, such as the same color:
layoutData.sourceGroupIds = (edge: IEdge) => {
const style = edge.style
if (style instanceof PolylineEdgeStyle) {
return style.stroke!.fill
}
return null
}If only certain edges should be grouped it may sometimes be easier to use the mapper to set the group IDs:
for (const group of edgeGroups) {
for (const edge of group) {
// Use the collection as group ID, since it's common to all edges in it
layoutData.sourceGroupIds.mapper.set(edge, group)
}
}See Also
Developer's Guide
API
- targetGroupIds, SOURCE_EDGE_GROUP_ID_DATA_KEY
Gets or sets a mapping from edges to an object representing their target edge group.
Examples
One simple way to use source groups is to use the edge's target node as group ID which effectively groups all edges with the same target together:
layoutData.targetGroupIds = (edge: IEdge) => edge.targetNodeAnother useful way to use a delegate here would be grouping edges by some commonality, such as the same color:
layoutData.targetGroupIds = (edge: IEdge) => {
const style = edge.style
if (style instanceof PolylineEdgeStyle) {
return style.stroke!.fill
}
return null
}If only certain edges should be grouped it may sometimes be easier to use the mapper to set the group IDs:
for (const group of edgeGroups) {
for (const edge of group) {
// Use the collection as group ID, since it's common to all edges in it
layoutData.targetGroupIds.mapper.set(edge, group)
}
}See Also
Developer's Guide
API
- sourceGroupIds, TARGET_EDGE_GROUP_ID_DATA_KEY
Methods
combineWith
(data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>): LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>Combines this instance with the given layout data.
combineWith
(data: LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>): LayoutData<TNode, TEdge, TNodeLabel, TEdgeLabel>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