Skip to main content

Edge routing plugin

In version 6.9.0 a new capability was added to the Hierarchy layout - the ability to generate routing information for the edges. This routing information generates paths in such a way that each edge avoids any nodes in the UI, and this is the first step towards supporting edge avoidance across the whole Toolkit.

We're very interested in hearing any feedback you may have on this, both on what we have built so far and on what direction to take this in.

The Edge Routing plugin can take routing information generated by the Hierarchy layout, and render edge paths such that they avoid the nodes in the UI.

Setup

You add this plugin as you would any other:

import { EdgeRoutingPlugin } from "@jsplumbtoolkit/browser-ui"

const surface = toolkit.render(someElement, {

plugins:[
{
type:EdgeRoutingPlugin.type
}
]
})

Configuration

The edge routing plugin operates in one of two modes - either 'direct' or 'orthogonal'. Additionally, in orthogonal mode, you can switch on bus routing

Home > @jsplumbtoolkit/browser-ui > EdgeRoutingPluginOptions

EdgeRoutingPluginOptions interface

Options for the edge routing plugin.

Signature:

export interface EdgeRoutingPluginOptions extends SurfacePluginOptions 

Extends: SurfacePluginOptions

Properties

PropertyModifiersTypeDescription
mode'direct' | 'orthogonal'Mode to use to draw edges. 'orthogonal' is like the orthogonal connector - segments that are either vertical or horizontal. direct draws straight lines through regions. Both modes assign a separate anchor point to each edge.
orthogonalMode?OrthogonalRouterMode(Optional)
orthogonalPadding?number(Optional)

Direct routing

This is the default you'll get when you configure an edge routing plugin on your surface.

{
layout:{
type:HierarchyLayout.type,
options:{
generateRouting:true
}
},
plugins:[
{
type:EdgeRoutingPlugin.type
}
]
}
Direct routing

Orthogonal routing

Orthogonal routing uses horizontal and vertical line segments and ensures that lines do not overlap.

{
layout:{
type:HierarchyLayout.type,
options:{
generateRouting:true
}
},
plugins:[
{
type:EdgeRoutingPlugin.type
options:{
mode:'orthogonal'
}
}
]
}
Orthogonal routing

Bus routing

Bus routing is orthogonal routing where instead of assigning a separate slot for each edge, edges travelling along the same path are grouped as a bus.

{
layout:{
type:HierarchyLayout.type,
options:{
generateRouting:true
}
},
plugins:[
{
type:EdgeRoutingPlugin.type
options:{
mode:'orthogonal',
orthogonalMode:OrthogonalRouterModes.bus
}
}
]
}
Bus routing