EdgeRouterData

Specifies custom data for the EdgeRouter.

Inheritance Hierarchy

EdgeRouterData

Examples

The following example shows how to create a new instance of EdgeRouterData and use it with an EdgeRouter:

Creating an instance of EdgeRouterData

const layoutData = new EdgeRouterData()

// group edges by color on their source side
layoutData.sourceGroupIds = (edge) =>
  edge.style instanceof PolylineEdgeStyle ? edge.style.stroke.fill : {}

// route only the selected edges
layoutData.affectedEdges = graphComponent.selection.selectedEdges

const edgeRouter = new EdgeRouter()
edgeRouter.scope = EdgeRouterScope.ROUTE_AFFECTED_EDGES

graphComponent.graph.applyLayout(edgeRouter, layoutData)const layoutData = new EdgeRouterData()

// group edges by color on their source side
layoutData.sourceGroupIds = (edge: IEdge) =>
  edge.style instanceof PolylineEdgeStyle ? edge.style.stroke!.fill : {}

// route only the selected edges
layoutData.affectedEdges = graphComponent.selection.selectedEdges

const edgeRouter = new EdgeRouter()
edgeRouter.scope = EdgeRouterScope.ROUTE_AFFECTED_EDGES

graphComponent.graph.applyLayout(edgeRouter, layoutData)

In many cases the complete initialization of EdgeRouterData can also be done in a single object initializer:

Using an object initializer for easy creation of EdgeRouterData

const layoutData = new EdgeRouterData({
  // group edges by color on their source side
  sourceGroupIds: (edge) =>
    edge.style instanceof PolylineEdgeStyle ? edge.style.stroke.fill : {},
  // route only the selected edges
  affectedEdges: graphComponent.selection.selectedEdges
})

const edgeRouter = new EdgeRouter()
edgeRouter.scope = EdgeRouterScope.ROUTE_AFFECTED_EDGES

graphComponent.graph.applyLayout(edgeRouter, layoutData)const layoutData = new EdgeRouterData({
  // group edges by color on their source side
  sourceGroupIds: (edge: IEdge): any =>
    edge.style instanceof PolylineEdgeStyle ? edge.style.stroke!.fill : {},
  // route only the selected edges
  affectedEdges: graphComponent.selection.selectedEdges
})

const edgeRouter = new EdgeRouter()
edgeRouter.scope = EdgeRouterScope.ROUTE_AFFECTED_EDGES

graphComponent.graph.applyLayout(edgeRouter, layoutData)

Type Details

yfiles module: view-layout-bridge
yfiles-umd modules: view-layout-bridge
Legacy UMD name: yfiles.router.EdgeRouterData

Constructors

EdgeRouterData

()

Creates a new instance of EdgeRouterData which helps configuring EdgeRouter.

ParametersOptions Overload

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

affectedEdges - DpKeyItemCollection<IEdge>: The collection of affected edges. This option sets the affectedEdges property on the created object.
affectedNodes - DpKeyItemCollection<INode>: The collection of affected nodes. This option sets the affectedNodes property on the created object.
ignoredLabels - ItemCollection<ILabel>: The collection of labels of nodes or fixed edges that are ignored by the router. This option sets the ignoredLabels property on the created object.
edgeLayoutDescriptors - ItemMapping<IEdge,EdgeRouterEdgeLayoutDescriptor>: The mapping of edges to their EdgeRouterEdgeLayoutDescriptor This option sets the edgeLayoutDescriptors property on the created object.
labelCrossingPenaltyFactors - ItemMapping<ILabel,number>: A mapping from labels to a crossing penalty factor. This option sets the labelCrossingPenaltyFactors property on the created object.
nodeHalos - ItemMapping<INode,NodeHalo>: The mapping from nodes to their NodeHalo. This option sets the nodeHalos property on the created object.
sourcePortConstraints - ItemMapping<IEdge,PortConstraint>: A mapping from edges to their source PortConstraint. This option sets the sourcePortConstraints property on the created object.
targetPortConstraints - ItemMapping<IEdge,PortConstraint>: A mapping from edges to their target PortConstraint. This option sets the targetPortConstraints property on the created object.
sourcePortCandidates - ItemMapping<IEdge,ICollection<PortCandidate>>: A mapping from edges to a collection of their source port candidates. This option sets the sourcePortCandidates property on the created object.
targetPortCandidates - ItemMapping<IEdge,ICollection<PortCandidate>>: A mapping from edges to a collection of their target port candidates. This option sets the targetPortCandidates property on the created object.
nodePortCandidateSets - ItemMapping<INode,PortCandidateSet>: A mapping from nodes to their PortCandidateSet. This option sets the nodePortCandidateSets property on the created object.
sourceGroupIds - ItemMapping<IEdge,Object>: A mapping from edges to an object representing their source edge group. This option sets the sourceGroupIds property on the created object.
sourcePortGroupIds - ItemMapping<IEdge,Object>: A mapping from edges to an object representing their source port group. This option sets the sourcePortGroupIds property on the created object.
targetGroupIds - ItemMapping<IEdge,Object>: A mapping from edges to an object representing their target edge group. This option sets the targetGroupIds property on the created object.
targetPortGroupIds - ItemMapping<IEdge,Object>: A mapping from edges to an object representing their target port group. This option sets the targetPortGroupIds property on the created object.
buses - ItemCollectionMapping<IEdge,EdgeRouterBusDescriptor>: The mapping from edges to their bus descriptor. This option sets the buses property on the created object.
abortHandler - AbortHandler: The AbortHandler used during the layout. This option sets the abortHandler property on the created object.
partitionGridData - PartitionGridData: The partition grid layout data. This option sets the partitionGridData property on the created object.
edgeLabelPreferredPlacement - ItemMapping<ILabel,PreferredPlacementDescriptor>: The mapping that provides a PreferredPlacementDescriptor instance for edge ILabels. This option sets the edgeLabelPreferredPlacement property on the created object.

Properties

abortHandler

: AbortHandler

Gets or sets the AbortHandler used during the layout.

Remarks

An AbortHandler can be used to gracefully stop or cancel a running layout and offers options for automatically doing so after a predetermined time.

An AbortHandler configured or set here overrides the one on LayoutExecutor.

Examples

The most common use case would be to just configure the AbortHandler here, e.g. to set timeouts for a graceful stop or canceling the running layout:

layoutData.abortHandler.stopDuration = TimeSpan.fromSeconds(10)
layoutData.abortHandler.cancelDuration = TimeSpan.fromSeconds(30)layoutData.abortHandler!.stopDuration = TimeSpan.fromSeconds(10)
layoutData.abortHandler!.cancelDuration = TimeSpan.fromSeconds(30)

If there's already an AbortHandler instance that's pre-configured or will be used in a different place to, e.g., cancel the layout when the user presses a button, you can also set one explicitly:

layoutData.abortHandler = abortHandler

affectedEdges

: DpKeyItemCollection<IEdge>

Gets or sets the collection of affected edges.

Remarks

This collection is only used by the router if the scope is set to ROUTE_AFFECTED_EDGES.

Examples

Defining the subset of edges that should be laid out can be done in various ways, mostly depending on which option is more convenient for a particular use case. You can use the ItemCollection<TItem>'s source property to use any .NET collection or IEnumerable<T>:

Setting a collection of affected edges

layoutData.affectedEdges = graphComponent.selection.selectedEdges

Alternatively, ItemCollection<TItem> also has an items property, which is a collection that already exists, in case the items may have to be added one by one. This can be more convenient than defining an own list and setting it to source:

Adding individual affected edges

layoutData.affectedEdges.items.add(edge1)
layoutData.affectedEdges.items.add(edge2)

A powerful option that doesn't use a collection is to use the delegate to set a custom delegate that returns for every edge whether it is contained in the set or not:

Using a delegate to determine whether an edge is affected or not

// We assume here that all edges have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.affectedEdges = (edge) => edge.tag.includeInLayout// We assume here that all edges have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.affectedEdges = (edge: IEdge): boolean => edge.tag.includeInLayout

affectedNodes

: DpKeyItemCollection<INode>

Gets or sets the collection of affected nodes.

Remarks

This collection is only used by the router if the scope is set to ROUTE_EDGES_AT_AFFECTED_NODES.

Examples

Defining the subset of nodes that should be laid out can be done in various ways, mostly depending on which option is more convenient for a particular use case. You can use the ItemCollection<TItem>'s source property to use any .NET collection or IEnumerable<T>:

Setting a collection of affected nodes

layoutData.affectedNodes = graphComponent.selection.selectedNodes

Adding individual affected nodes

layoutData.affectedNodes.items.add(node1)
layoutData.affectedNodes.items.add(node2)

A powerful option that doesn't use a collection is to use the delegate to set a custom delegate that returns for every node whether it is contained in the set or not:

Using a delegate to determine whether a node is affected or not

// We assume here that all nodes have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.affectedNodes = (node) => node.tag.includeInLayout// We assume here that all nodes have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.affectedNodes = (node: INode): boolean => node.tag.includeInLayout

buses

: ItemCollectionMapping<IEdge,EdgeRouterBusDescriptor>

Gets or sets the mapping from edges to their bus descriptor.

Remarks

All edges associated to the same bus descriptor are routed in a bus-like style, sharing a common backbone. A bus consist of segments that are shared by multiple edges to which shorter segments that connect to the actual nodes are attached to. Observe that using such a bus representation with multiple edges drawn on top of each other, information like the individual edge direction might be occluded. Bus routing can, for example, be very useful in parts of a diagram where each node is connected to each other node.

The EdgeRouterBusDescriptor instance allows to configure the bus formed by the associated edges. To conveniently define buses use the add method of this property. It takes the bus descriptor as parameter and allows to define the edges associated to the bus using the returned ItemCollection<TItem>.

Examples

Assigning a list of edges to a bus

// create a bus descriptor and, optionally, configure it
const busDescriptor = new EdgeRouterBusDescriptor({
  minimumBackboneSegmentLength: 200
})
// retrieve an ItemCollection which defines the edges that should belong to the bus
const busEdgesCollection = edgeRouterData.buses.add(busDescriptor)
// busEdgesList is an ICollection which contains all edges that should be part of the bus
busEdgesCollection.items = busEdgesList

edgeLabelPreferredPlacement

: ItemMapping<ILabel,PreferredPlacementDescriptor>

Gets or sets the mapping that provides a PreferredPlacementDescriptor instance for edge ILabels.

Examples

Depending on how much customization is needed, some ways of setting PreferredPlacementDescriptors are more convenient than others. For example, to set the same descriptor for all labels, you can just use the constant property:

Setting the same PreferredPlacementDescriptor for all labels

layoutData.edgeLabelPreferredPlacement = new PreferredPlacementDescriptor({
  // Place labels along the edge
  angleReference: LabelAngleReferences.RELATIVE_TO_EDGE_FLOW,
  angle: 0,
  // ... on either side
  sideOfEdge: LabelPlacements.LEFT_OF_EDGE | LabelPlacements.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:

Customizing the placement of certain labels individually via a mapper

// Place label1 orthogonal to the edge anywhere on it
layoutData.edgeLabelPreferredPlacement.mapper.set(
  label1,
  new PreferredPlacementDescriptor({
    placeAlongEdge: LabelPlacements.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.edgeLabelPreferredPlacement.mapper.set(
  label2,
  new PreferredPlacementDescriptor({
    placeAlongEdge: LabelPlacements.AT_SOURCE,
    sideOfEdge: LabelPlacements.RIGHT_OF_EDGE | LabelPlacements.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:

Configuring preferred placement for all labels with a delegate

layoutData.edgeLabelPreferredPlacement = (label) => {
  const customData = label.tag
  return new PreferredPlacementDescriptor({
    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.
    placeAlongEdge: customData.placeInCenter
      ? LabelPlacements.AT_CENTER
      : LabelPlacements.ANYWHERE,
    sideOfEdge: customData.placeInCenter
      ? LabelPlacements.ON_EDGE
      : LabelPlacements.LEFT_OF_EDGE | LabelPlacements.RIGHT_OF_EDGE
  })
}layoutData.edgeLabelPreferredPlacement = (
  label: ILabel
): PreferredPlacementDescriptor => {
  const customData = label.tag
  return new PreferredPlacementDescriptor({
    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.
    placeAlongEdge: customData.placeInCenter
      ? LabelPlacements.AT_CENTER
      : LabelPlacements.ANYWHERE,
    sideOfEdge: customData.placeInCenter
      ? LabelPlacements.ON_EDGE
      : LabelPlacements.LEFT_OF_EDGE | LabelPlacements.RIGHT_OF_EDGE
  })
}

Note that the preferred placement can also be inferred from an arbitrary ILabelModelParameter:

Configuring preferred placement from a label model parameter

layoutData.edgeLabelPreferredPlacement =
  PreferredPlacementDescriptor.fromParameter(
    NinePositionsEdgeLabelModel.CENTER_CENTERED
  )

edgeLayoutDescriptors

: ItemMapping<IEdge,EdgeRouterEdgeLayoutDescriptor>

Gets or sets the mapping of edges to their EdgeRouterEdgeLayoutDescriptor

Remarks

If an edge is mapped to null, the default descriptor is used.

ignoredLabels

: ItemCollection<ILabel>

Gets or sets the collection of labels of nodes or fixed edges that are ignored by the router.

Examples

Defining the subset of labels that should be ignored can be done in various ways, mostly depending on which option is more convenient for a particular use case. You can use the ItemCollection<TItem>'s source property to use any .NET collection or IEnumerable<T>:

Setting a collection of labels to ignore

// Ignore all labels of selected nodes
layoutData.ignoredLabels = graphComponent.selection.selectedNodes.flatMap(
  (node) => node.labels
)

Adding individual labels to ignore

layoutData.ignoredLabels.items.add(label1)
layoutData.ignoredLabels.items.add(label2)

A powerful option that doesn't use a collection is to use the delegate to set a custom delegate that returns for every label whether it should be ignored or not:

Using a delegate to determine whether to ignore a label

// We assume here that all labels have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.ignoredLabels = (label) => !label.tag.includeInLayout// We assume here that all labels have a CustomData instance as their Tag,
// which then has a boolean property 'IncludeInLayout'.
layoutData.ignoredLabels = (label: ILabel): boolean =>
  !label.tag.includeInLayout

labelCrossingPenaltyFactors

: ItemMapping<ILabel,number>

Gets or sets a mapping from labels to a crossing penalty factor.

Remarks

The crossing penalty factor of a label is multiplied with the basic penalty for an edge crossing the label so crossing a label with a higher cost factor is stronger avoided then crossing one with a lower factor.

Examples

When there are only a few labels to customize penalties for, the easiest way is usually to use the mapper:

Defining label crossing penalties via a mapper

// Try harder to prevent crossings with label1
layoutData.labelCrossingPenaltyFactors.mapper.set(label1, 1.5)
// Crossings with label2 are not as bad
layoutData.labelCrossingPenaltyFactors.mapper.set(label2, 0.2)

If the penalty can readily be computed from the label itself, the delegate is often the more convenient option:

Defining label crossing penalties via a delegate

// The more upper-case letters a label has, the more important it must be
// and crossings should be based on that metric
layoutData.labelCrossingPenaltyFactors = (label) =>
  label.text.match(/[A-Z]/g).length// The more upper-case letters a label has, the more important it must be
// and crossings should be based on that metric
layoutData.labelCrossingPenaltyFactors = (label: ILabel): number =>
  label.text.match(/[A-Z]/g)!.length

nodeHalos

: ItemMapping<INode,NodeHalo>

Gets or sets the mapping from nodes to their NodeHalo.

Remarks

NodeHalos allow to reserve space around nodes.

Examples

The easiest option is to reserve the same space around all nodes, by setting a constant NodeHalo:

Using constant space around all nodes

layoutData.nodeHalos.constant = NodeHalo.create(20)

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

Using a mapper to set halos for certain nodes

// node1 only reserves space above and below
layoutData.nodeHalos.mapper.set(node1, NodeHalo.create(20, 0, 0, 10))
// node2 has space all around
layoutData.nodeHalos.mapper.set(node2, NodeHalo.create(25))
// all other nodes don't get extra space

In cases where the NodeHalo 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 halos for all nodes

// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node) => NodeHalo.create(parseFloat(node.tag))// Retrieve the space around the node from its Tag property
layoutData.nodeHalos = (node: INode): NodeHalo =>
  NodeHalo.create(parseFloat(node.tag))

nodePortCandidateSets

: ItemMapping<INode,PortCandidateSet>

Gets or sets a mapping from nodes to their PortCandidateSet.

Remarks

If an edge has port candidates registered (via sourcePortCandidates or targetPortCandidates), and connects to a node with a PortCandidateSet, the EdgeRouter tries to match both collections in order to find an appropriate port. In case there is no matching port candidate, one that is specified for the edge is preferred. Note that the routing algorithm doesn't consider custom IPortCandidateMatcher implementations.

Examples

The simplest way to define node port candidate sets is to use the same PortCandidateSet for all nodes, if suitable for the use case:

Defining the same port candidates for all nodes

// All nodes get only a candidate for the lower (South) side with capacity 10
const constantPortCandidates = new PortCandidateSet()
constantPortCandidates.add(
  PortCandidate.createCandidate(PortDirections.SOUTH, 10)
)
layoutData.nodePortCandidateSets.constant = constantPortCandidates

The same effect can be achieved with a delegate as well, however, a more useful way to use a delegate would be to decide whether a node should get a port candidate set based on some data at the node, e.g., found in its tag:

Defining port candidate sets with a delegate

// Create a PortCandidateSet with capacity 2 for the upper side (North) and capacity 1 for the lower side (South)
const pcs = new PortCandidateSet()
pcs.add(PortCandidate.createCandidate(PortDirections.NORTH), 2)
pcs.add(PortCandidate.createCandidate(PortDirections.SOUTH), 1)
// Specify the node port candidates for diamond nodes, i.e. for nodes with the string "diamond" in their tag
layoutData.nodePortCandidateSets = (node) =>
  node.tag === 'diamond' ? pcs : null// Create a PortCandidateSet with capacity 2 for the upper side (North) and capacity 1 for the lower side (South)
const pcs = new PortCandidateSet()
pcs.add(PortCandidate.createCandidate(PortDirections.NORTH), 2)
pcs.add(PortCandidate.createCandidate(PortDirections.SOUTH), 1)
// Specify the node port candidates for diamond nodes, i.e. for nodes with the string "diamond" in their tag
layoutData.nodePortCandidateSets = (node) =>
  node.tag === 'diamond' ? pcs : null!

If specific nodes should get a certain PortCandidateSet, it may sometimes be easier to use the mapper to set them:

Defining port candidate sets with a mapper

// Create a PortCandidateSet with capacity 2 for the upper side (North) and capacity 1 for the lower side (South)
const pcs1 = new PortCandidateSet()
pcs1.add(PortCandidate.createCandidate(PortDirections.NORTH), 2)
pcs1.add(PortCandidate.createCandidate(PortDirections.SOUTH), 1)
// Create another set with candidates for the left (West) and right side (East)
const pcs2 = new PortCandidateSet()
pcs2.add(PortCandidate.createCandidate(PortDirections.EAST), 4)
pcs2.add(PortCandidate.createCandidate(PortDirections.WEST), 4)
// Specify the port candidate sets for two specific nodes
layoutData.nodePortCandidateSets.mapper.set(node1, pcs1)
layoutData.nodePortCandidateSets.mapper.set(node2, pcs2)

partitionGridData

: PartitionGridData

Gets or sets the partition grid layout data.

sourceGroupIds

: ItemMapping<IEdge,any>

Gets or sets a mapping from edges to an object representing their source edge group.

Remarks

Edges sharing a source group identifier will share a common bus near the source or at a common source node if possible.

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:

Grouping all edges on the source side

layoutData.sourceGroupIds = (edge) => edge.sourceNodelayoutData.sourceGroupIds = (edge: IEdge) => edge.sourceNode

Another useful way to use a delegate here would be grouping edges by some commonality, such as the same color:

Grouping edges by color

layoutData.sourceGroupIds = (edge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke.fill
  }
  return null
}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:

Grouping certain edges with a mapper

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)
  }
}

sourcePortCandidates

: ItemMapping<IEdge,ICollection<PortCandidate>>

Gets or sets a mapping from edges to a collection of their source port candidates.

Remarks

Port constraints allow to define where an edge can connect to its source node and allow fine control over port placement.

If all that is needed is to fix the source port in its location or on a node side, port constraints are easier to work with, since they are a slightly simpler concept.

Examples

Source port candidates are effectively a collection of possible port placements with different costs and the layout algorithm is free to choose the candidate that fits best into the overall layout, while also preferring candidates with a lower cost. To set the same candidate list for all edges, it's easiest to use the constant property:

Setting the same set of source port candidates for all edges

layoutData.sourcePortCandidates.constant = new List([
  // Prefer the center position and route the edge downwards if possible (no cost for this candidate)
  PortCandidate.createCandidate(0, 0, PortDirections.SOUTH),
  // Alternatively, use any position at the bottom border of the node, but with a higher cost
  PortCandidate.createCandidate(PortDirections.SOUTH, 1),
  // If that fails, use either the left or the right side
  PortCandidate.createCandidate(PortDirections.WEST, 2),
  PortCandidate.createCandidate(PortDirections.EAST, 2)
])

If certain edges need specific port candidates, it's usually convenient to use the mapper property:

Setting different source port candidates for certain edges

// edge1 should leave the source node preferably on the node side in flow direction,
// but can also use a fixed port location on the left of the node.
layoutData.sourcePortCandidates.mapper.set(
  edge1,
  new List([
    PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
    PortCandidate.createCandidate(-0.5, 0.25, PortDirections.WEST, 1)
  ])
)

// edge2 should leave the source node anywhere on the upper side of the node
layoutData.sourcePortCandidates.mapper.set(
  edge2,
  new List([PortCandidate.createCandidate(PortDirections.NORTH)])
)

For cases when the desired configuration of port candidates can be readily created from the edge itself, the delegate is often the most convenient option:

Setting different source port candidates for each edge with a delegate

// Assuming a flowchart, the "yes" edge should leave the decision in flow direction,
// and the "no" edge may leave either left or right of the flow direction.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.sourcePortCandidates = (edge) => {
  // Only handle decision nodes here
  if (edge.sourceNode.tag instanceof FlowChartDecision) {
    switch (edge.labels.get(0).text) {
      case 'Yes':
        return new List([
          PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW)
        ])
      case 'No':
        return new List([
          PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW),
          PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW)
        ])
    }
  }
  return null
}// Assuming a flowchart, the "yes" edge should leave the decision in flow direction,
// and the "no" edge may leave either left or right of the flow direction.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.sourcePortCandidates = (
  edge: IEdge
): ICollection<PortCandidate> => {
  // Only handle decision nodes here
  if (edge.sourceNode!.tag instanceof FlowChartDecision) {
    switch (edge.labels.get(0).text) {
      case 'Yes':
        return new List([
          PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW)
        ])
      case 'No':
        return new List([
          PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW),
          PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW)
        ])
    }
  }
  return null!
}

Sample Graphs

sourcePortConstraints

: ItemMapping<IEdge,PortConstraint>

Gets or sets a mapping from edges to their source PortConstraint.

Remarks

Port constraints allow to define where an edge attaches to its source node and can either restrict that to one of the node's sides, or to a fixed port position.

A more general concept which allows finer control over where ports are placed, are port candidates.

Examples

If all edges should exit their source node on the same side, you can simply set a constant constraint for all edges:

Setting the same port constraint for all edges

// All source ports should be on the bottom side
layoutData.sourcePortConstraints.constant = PortConstraint.create(
  PortSide.SOUTH
)

To change the constraints for individual edges, it's usually easiest to use the mapper:

Using a mapper to set different port constraints for certain edges

// edge1 should leave the source node on the left side, while keeping its exact port position (strong port constraint)
layoutData.sourcePortConstraints.mapper.set(
  edge1,
  PortConstraint.create(PortSide.WEST, true)
)
// edge2 should leave the source node downwards, but the port may be placed anywhere along that node border
layoutData.sourcePortConstraints.mapper.set(
  edge2,
  PortConstraint.create(PortSide.SOUTH)
)

If a PortConstraint can readily be created from an edge, using a delegate is often easier:

Using a delegate to set a different port constraint for each edge

// Source ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.sourcePortConstraints = (edge) =>
  PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)// Source ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.sourcePortConstraints = (edge: IEdge): PortConstraint =>
  PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)

Sample Graphs

sourcePortGroupIds

: ItemMapping<IEdge,any>

Gets or sets a mapping from edges to an object representing their source port group.

Remarks

All edges with the same port id at a node will share the same port location. However, they will be routed independently and in contrast to source groups will deviate from a common path as soon as possible instead of sharing as much of a common path as possible.

Examples

The simplest way to use source port groups is to use the same object as group ID for all edges. Since grouping is done per node, this has the effect of grouping all edges with the same source node together:

Grouping all edges on the source side

layoutData.sourcePortGroupIds.constant = {}

The same effect can be achieved with a delegate as well, by returning the source node as group ID for each edge. However, a more useful way to use a delegate here would be grouping edges by some commonality, such as the same color:

Grouping edges by color

layoutData.sourcePortGroupIds = (edge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke.fill
  }
  return null
}layoutData.sourcePortGroupIds = (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:

Grouping certain edges with a mapper

for (const group of edgePortGroups) {
  for (const edge of group) {
    // Use the collection as group ID, since it's common to all edges in it
    layoutData.sourcePortGroupIds.mapper.set(edge, group)
  }
}

targetGroupIds

: ItemMapping<IEdge,any>

Gets or sets a mapping from edges to an object representing their target edge group.

Remarks

Edges sharing a target group identifier will share a common bus near the target or at a common target node if possible.

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:

Grouping all edges on the target side

layoutData.targetGroupIds = (edge) => edge.targetNodelayoutData.targetGroupIds = (edge: IEdge) => edge.targetNode

Another useful way to use a delegate here would be grouping edges by some commonality, such as the same color:

Grouping edges by color

layoutData.targetGroupIds = (edge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke.fill
  }
  return null
}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:

Grouping certain edges with a mapper

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)
  }
}

targetPortCandidates

: ItemMapping<IEdge,ICollection<PortCandidate>>

Gets or sets a mapping from edges to a collection of their target port candidates.

Remarks

Port constraints allow to define where an edge can connect to its target node and allow fine control over port placement.

If all that is needed is to fix the target port in its location or on a node side, port constraints are easier to work with, since they are a slightly simpler concept.

Examples

Target port candidates are effectively a collection of possible port placements with different costs and the layout algorithm is free to choose the candidate that fits best into the overall layout, while also preferring candidates with a lower cost. To set the same candidate list for all edges, it's easiest to use the constant property:

Setting the same set of target port candidates for all edges

layoutData.targetPortCandidates.constant = new List([
  // Prefer the center position and enter the node from the top if possible (no cost for this candidate)
  PortCandidate.createCandidate(0, 0, PortDirections.NORTH),
  // Alternatively, use any position at the top border of the node, but with a higher cost
  PortCandidate.createCandidate(PortDirections.NORTH, 1),
  // If that fails, use either the left or the right side
  PortCandidate.createCandidate(PortDirections.WEST, 2),
  PortCandidate.createCandidate(PortDirections.EAST, 2)
])

If certain edges need specific port candidates, it's usually convenient to use the mapper property:

Setting different target port candidates for certain edges

// edge1 should enter the target node preferably on the node side in flow direction,
// but can also use a fixed port location on the left of the node.
layoutData.targetPortCandidates.mapper.set(
  edge1,
  new List([
    PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
    PortCandidate.createCandidate(-0.5, -0.25, PortDirections.WEST, 1)
  ])
)

// edge2 should enter the target node anywhere on the bottom side of the node
layoutData.targetPortCandidates.mapper.set(
  edge2,
  new List([PortCandidate.createCandidate(PortDirections.SOUTH)])
)

For cases when the desired configuration of port candidates can be readily created from the edge itself, the delegate is often the most convenient option:

Setting different target port candidates for each edge with a delegate

// Assuming a flowchart, edges connecting to a terminal on the target side should enter that node either
// in flow direction (preferred) or from one of the sides.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.targetPortCandidates = (edge) => {
  // Only handle terminal nodes here
  if (edge.targetNode.tag instanceof FlowChartTerminal) {
    return new List([
      PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
      PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW, 1),
      PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW, 1)
    ])
  }
  return null
}// Assuming a flowchart, edges connecting to a terminal on the target side should enter that node either
// in flow direction (preferred) or from one of the sides.
// This also ensures that the layout still looks natural if the layout uses different orientations.
layoutData.targetPortCandidates = (
  edge: IEdge
): ICollection<PortCandidate> => {
  // Only handle terminal nodes here
  if (edge.targetNode!.tag instanceof FlowChartTerminal) {
    return new List([
      PortCandidate.createCandidate(PortDirections.WITH_THE_FLOW),
      PortCandidate.createCandidate(PortDirections.RIGHT_IN_FLOW, 1),
      PortCandidate.createCandidate(PortDirections.LEFT_IN_FLOW, 1)
    ])
  }
  return null!
}

Sample Graphs

targetPortConstraints

: ItemMapping<IEdge,PortConstraint>

Gets or sets a mapping from edges to their target PortConstraint.

Remarks

Port constraints allow to define where an edge attaches to its target node and can either restrict that to one of the node's sides, or to a fixed port position.

A more general concept which allows finer control over where ports are placed, are port candidates.

Examples

If all edges should exit their source node on the same side, you can simply set a constant constraint for all edges:

Setting the same port constraint for all edges

// All target ports should be on the top side
layoutData.targetPortConstraints.constant = PortConstraint.create(
  PortSide.NORTH
)

To change the constraints for individual edges, it's usually easiest to use the mapper:

Using a mapper to set different port constraints for certain edges

// edge1 should enter the target node on the right side, while keeping its exact port position (strong port
// constraint)
layoutData.targetPortConstraints.mapper.set(
  edge1,
  PortConstraint.create(PortSide.EAST, true)
)
// edge2 should enter the target node from the top, but the port may be placed anywhere along that node border
layoutData.targetPortConstraints.mapper.set(
  edge2,
  PortConstraint.create(PortSide.NORTH)
)

If a PortConstraint can readily be created from an edge, using a delegate is often easier:

Using a delegate to set a different port constraint for each edge

// Target ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.targetPortConstraints = (edge) =>
  PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)// Target ports will be placed on the right side and use a property in the edge's tag
// to determine whether ports will stay fixed at their position.
layoutData.targetPortConstraints = (edge: IEdge): PortConstraint =>
  PortConstraint.create(PortSide.EAST, edge.tag.fixPorts)

Sample Graphs

targetPortGroupIds

: ItemMapping<IEdge,any>

Gets or sets a mapping from edges to an object representing their target port group.

Remarks

Examples

The simplest way to use target port groups is to use the same object as group ID for all edges. Since grouping is done per node, this has the effect of grouping all edges with the same target node together:

Grouping all edges on the target side

layoutData.targetPortGroupIds.constant = {}

The same effect can be achieved with a delegate as well, by returning the target node as group ID for each edge. However, a more useful way to use a delegate here would be grouping edges by some commonality, such as the same color:

Grouping edges by color

layoutData.targetPortGroupIds = (edge) => {
  const style = edge.style
  if (style instanceof PolylineEdgeStyle) {
    return style.stroke.fill
  }
  return null
}layoutData.targetPortGroupIds = (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:

Grouping certain edges with a mapper

for (const group of edgePortGroups) {
  for (const edge of group) {
    // Use the collection as group ID, since it's common to all edges of it
    layoutData.targetPortGroupIds.mapper.set(edge, group)
  }
}

Methods

combineWith

(data: LayoutData…) : LayoutData

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: The LayoutData to combine this instance with.

Returns

↪LayoutData: The combined layout data.

Defined in

LayoutData

EdgeRouterData

Examples

Type Details

See Also

Constructors

EdgeRouterData

ParametersOptions Overload

Properties

abortHandler

Remarks

Examples

See Also

affectedEdges

Remarks

Examples

See Also

affectedNodes

Remarks

Examples

See Also

buses

Remarks

Examples

See Also

edgeLabelPreferredPlacement

Examples

See Also

edgeLayoutDescriptors

Remarks

See Also

ignoredLabels

Examples

See Also

labelCrossingPenaltyFactors

Remarks

Examples

See Also

nodeHalos

Remarks

Examples

See Also

nodePortCandidateSets

Remarks

Examples

See Also

partitionGridData

See Also

sourceGroupIds

Remarks

Examples

See Also

sourcePortCandidates

Remarks

Examples

See Also

Sample Graphs

sourcePortConstraints

Remarks

Examples

See Also

Sample Graphs

sourcePortGroupIds

Remarks

Examples

See Also

targetGroupIds

Remarks

Examples

See Also

targetPortCandidates

Remarks

Examples

See Also

Sample Graphs

targetPortConstraints

Remarks

Examples

See Also

Sample Graphs

targetPortGroupIds