Skip to main content

Release 6.9.0

· 3 min read
Simon Porritt
Simon Porritt
JsPlumb core team

NEW FUNCTIONALITY​

  • Support for generating edge routing information was added to the Hierarchy layout.

  • New plugin edgeRouting added. This plugin can ingest the edge routing information generated by a Hierarchy layout and adjust the routes of the edges in the UI, with support for separated orthogonal, bus orthogonal and direct line modes.

  • Support for the number input type was added to Dialogs

  • Support for the number input type was added to Inspectors

UPDATES​

  • A fix was added to the Orthogonal connector's geometry import routine to catch an unexpected formatting error in the geometry.

  • We've made some internal updates to reduce the number of classes created by connectors and connections, instead using more plain old javascript objects.

BREAKING​

  • The Community ingest code has been removed. The Community and Toolkit editions in fact diverged several versions back and this code was likely not working in many scenarios. No Toolkit licensees use(d) this code.

  • Constant TYPE_CONNECTOR_SEGMENTED was renamed to CONNECTOR_TYPE_SEGMENTED

Edge routing​

Edge routing is a feature that people have been asking about for a while, and we're introducing it in stages, starting with support built in to the Hierarchy layout.

To setup edge routing you need to instruct your Hierarchy layout to generate routing information, and you need to configure the new edge routing plugin:

toolkit.render(someElement, {
    ...,
    layout:{
        type:HierarchyLayout.type,
        options:{
            generateRouting:true
        }
    },
    plugins:[
        {
            type:EdgeRoutingPlugin.type,
            options:{
                mode:'orthogonal' or 'direct',
                orthogonalMode:'bus' or 'separate'
            }
        }
    ]
})

Orthogonal routing​

Orthogonal routing is the practise of organising an edge into a series of horizontal and vertical segments.

Separate routes per edge​

In the orthogonal routing mode, lines are stacked across the channels in the layout to keep them separate:

Hierarchy layout with orthogonal edge routing - JsPlumb, build diagrams and rich visual UIs fast

Bus routing​

In the bus mode for orthogonal routing, lines are grouped together instead of being stacked individually:

Hierarchy layout with orthogonal edge bus routing - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

Direct routing​

Here we see the same dataset rendered in direct mode - we still assign a separate location on each vertex for each edge, but we do not route the edges in an orthogonal way:

Hierarchy layout with direct edge routing - JsPlumb, leading alternative to GoJS, JointJS and ReactFlow

You can see all of these in action in the Hierarchy layout demonstration, and to find out how to setup edge routing in your own apps, checkout the edge routing plugin page in our documentation.

Number inputs​

We've added support for inputs of type number to both our dialogs and inspectors. The inspector will respond to change events caused by the user clicking on the increment/decrement buttons, enter keypress events, and blur events.

You can see number inputs in use in our Image Processor starter app, for some of the various transformations and filters:

number input on invert filter - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Start a free trial

Sending your evaluation request...

Interested in the concepts discussed in this article? Start a free trial and see how JsPlumb can help bring your ideas to market in record time.

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.