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

Interface EdgeRoutingPluginOptions

Options for the edge routing plugin.

Members

mode:
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.

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