Routing further processes the edge's waypoints vertices, adding additional points when necessary, and then returns the processed points (excluding the start and end points of the edge). For example, after orth routing, each segment of the edge is a horizontal or vertical orthogonal segment.

X6 has the following built-in routing options.

When using, you can set the routing for an edge:

const edge = graph.addEdge({
  source,
  target,
  router: {
    name: 'oneSide',
    args: {
      side: 'right',
    },
  },
})

When the router has no parameters, it can also be simplified to:

const edge = graph.addEdge({
  source,
  target,
  router: 'oneSide',
})

You can also call the method to set the routing:

edge.setRouter('oneSide', { side: 'right' })

When creating a canvas, you can set a global default routing through the connecting option (the default routing for the canvas is 'normal'):

new Graph({
  connecting: {
    router: {
      name: 'oneSide',
      args: {
        side: 'right',
      },
    },
  },
})

When the router has no parameters, it can also be simplified to:

new Graph({
  connecting: {
    router: 'orth',
  },
})

Now let's take a look at how to use the built-in routing and how to define and register custom routing.

Built-in Routing

normal

The system's default routing, which returns the input vertices path points as is.

orth

Orthogonal routing, which adds extra points along the path to ensure that each line segment of the edge is horizontally or vertically orthogonal.

The supported parameters are as follows:

SideOptions is defined as follows:

export type SideOptions =
  | number
  | {
      vertical?: number
      horizontal?: number
      left?: number
      top?: number
      right?: number
      bottom?: number
    }

For example:

graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],
  router: {
    name: 'orth',
    args: {
      padding: {
        left: 50,
      },
    },
  },
})

oneSide

The oneSide routing is a restricted version of the orthogonal routing orth, which generates a strict three-segment route: starting from the side side of the starting node, passing through the middle segment, and ending at the side side of the target node. It is important to note that when using this routing, do not specify vertices at the same time, as it will result in poor routing performance.

The supported parameters are as follows:

For example:

graph.addEdge({
  source,
  target,
  router: {
    name: 'oneSide',
    args: { side: 'right' },
  },
})

manhattan

The Manhattan routing 'manhattan' is an intelligent version of the orthogonal routing 'orth', consisting of horizontal or vertical orthogonal line segments that automatically avoid other nodes (obstacles) along the path.

We provide a rich set of options for this routing algorithm:

For example:

graph.addEdge({
  source,
  target,
  router: {
    name: 'manhattan',
    args: {
      startDirections: ['top'],
      endDirections: ['bottom'],
    },
  },
})

metro

The metro routing metro is a variant of the Manhattan routing manhattan, consisting of horizontal or vertical orthogonal line segments and diagonal segments, similar to a subway map, and automatically avoids other nodes (obstacles) along the path. Its options are the same as manhattan, but the default value of maxDirectionChange is 45, indicating that the maximum slope angle of the routing line segment is 45 degrees.

For example:

graph.addEdge({
  source,
  target,
  router: {
    name: 'metro',
    args: {
      startDirections: ['top'],
      endDirections: ['bottom'],
    },
  },
})

er

The entity-relationship routing er consists of zigzag diagonal segments, commonly used to represent connections between entities in an ER diagram.

The supported parameters are as follows:

For example:

graph.addEdge({
  source,
  target,
  router: {
    name: 'er',
    args: {
      offset: 24,
    },
  },
})

Custom Routing

In addition to built-in routing, we can also create custom routing according to certain rules, for example, implementing random routing:

// Routing parameters
interface RandomRouterArgs {
  bounces?: number
}

function randomRouter(
  vertices: Point.PointLike[],
  args: RandomRouterArgs,
  view: EdgeView,
) {
  const bounces = args.bounces || 20
  const points = vertices.map((p) => Point.create(p))

  for (var i = 0; i < bounces; i++) {
    const sourceCorner = view.sourceBBox.getCenter()
    const targetCorner = view.targetBBox.getCenter()
    const randomPoint = Point.random(
      sourceCorner.x,
      targetCorner.x,
      sourceCorner.y,
      targetCorner.y,
    )
    points.push(randomPoint)
  }

  return points
}

Graph.registerRouter('random', randomRouter)
edge.setRouter('random', { bounces: 3 })