Skip to main content

Release 6.90.0

This is a significant release for JsPlumb, with the introduction of some powerful new fundamental functionality:

We've also fixed a few niggling issues and we continue to work on refactoring our code to improve efficiency.

This release contains a couple of breaking change related to the Segmented and Straight connectors (tlwr; we renamed SegmentedConnector to StraightConnector), but there are no breaking changes related to functionality.

Lastly, we've made a bunch of updates to our API documentation to group related concepts, which makes them more navigable for users.

New Functionality​

Vertex avoidance for edges​

This is a major new capability that can give an extra level of professionalism to your apps, and we're looking forward to seeing what people build with it. If you want to give it a spin right now we have a few examples on this page, but we've also rewritten our Flowchart Builder and Schema Builder to use this new capability.

In this canvas, try dragging node 2 around and observe how the edge avoids passing through node 3:


note

It isn't always possible for an edge to avoid vertices - if some element is overlapping some other element, the vertex avoidance will switch off for the element that is being overlapped.

Groups​

Vertex avoidance works seamlessly with groups:


Routing styles​

Vertex avoidance works with the Straight connector, and paths can be constrained in a few ways, which is set as an option on the connector. Above we saw orthogonal paths, in which segments are horizontal or vertical lines, for which our connector setup is this:

{
    connector:{
        type:StraightConnector.type,
        options:{
            constrain:"orthogonal",
            stub:30
        }
    }    
}

Note the stub - we do recommend using a stub with vertex avoidance.

Diagonal ("metro") routing​

With diagonal routing (also known as Metro routing in some libraries, and you can use the alias metro with JsPlumb), path segments are horizontal, vertical, or 45 degree lines:


{
    connector:{
        type:StraightConnector.type,
        options:{
            constrain:"diagonal",
            stub:30
        }
    }    
}
No constraint​

With no movement constraint paths are a series of straight lines having any angle:


{
    connector:{
        type:StraightConnector.type,
        options:{
            stub:30
        }
    }    
}
Smooth lines​

When you have no movement constrain set you can set smooth:true, and JsPlumb will smooth the path to a series of Bezier curves:


{
    connector:{
        type:StraightConnector.type,
        options:{
            smooth:true               // no stub for smooth lines; it makes for a better aesthetic effect
        }
    }    
}

Magnetizer Trackback​

When running the magnetizer in constant mode, elements are pushed out of the way of the element that is being dragged. This is very useful and cool, but once an element has been pushed from its original location it doesn't go back, and so its easy to accidentally scatter your elements all over the canvas. Enter trackback mode: when this is switched on, the magnetizer attempts to revert any moved elements back to their location at the start of an element drag. This is super slick and we're pretty pleased with it.

Try dragging node 1 through the gap between nodes 2 and 3 in this canvas - they'll move out of the way as node 1 moves through, and then spring back:


Once you release the mouse button, the position of each node is fixed. The canvas above was created with these render options:

{
    magnetize:{
        constant:true,
        trackback:true
    }
}

but trackback mode is always available to your users when constant is switched on, even if you do not set trackback:true - they just need to hold down the shift key while dragging. Try it yourself here: when you drag node 1 this time, nodes 2 and 3 will move out of the but they will not spring back, initially. Hold down the shift key, though, and you will see the trackback mechanism kick in:


This canvas was created with only constant switched on:

{
    magnetize:{
        constant:true
    }
}

Finally, note that if you do have trackback:true, your users can hold down the shift key to temporarily switch it off. It can be useful for your users to be able to move some element using the magnetizer which they do not want to revert.

Simplified dataGenerator​

When using the SurfaceDropManager two updates have been made to simplify matters:

  • it is no longer necessary to provide a dataGenerator to create a payload for items a user is dragging. By default, JsPlumb will prepare a payload derived from any data-jtk-*** attribute found on the element. For instance, if you write data-jtk-type and data-jtk-label attributes on the elements your users can drag, the initial payload will be a JS object with matching type and label values.

  • JsPlumb will use a default selector of data-jtk-type, meaning you do not need to provide one.

These changes have been applied also to the Angular, React, Svelte and Vue 2/3 integrations.

Prior to 6.90.0 you might have had some setup like this, for instance:

<div class="palette">
  <div data-type="foo">FOO</div>
  <div data-type="bar">BAR</div>
</div>

With these options for a drop manager:

{
    container:someDOMElement,
    selector:"[data-type]",
    dataGenerator:(el) => {
        return {
            type:el.getAttribute("data-type")
        }
    }
}

In 6.90.0 you can simplify that down to this:

<div class="palette">
  <div data-jtk-type="foo">FOO</div>
  <div data-jtk-type="bar">BAR</div>
</div>
{
    container:someDOMElement
}

The selector and dataGenerator options are no longer required. What's cool also is that JsPlumb will pick up any data-jtk-... attributes and put them in your payload with no intervention required on your part:

<div class="palette">
  <div data-jtk-type="foo" data-jtk-label="A new FOO">FOO</div>
  <div data-jtk-type="bar" data-jtk-label="A New Bar" data-jtk-custom="Only BAR elements have this">BAR</div>
</div>

Connector updates​

Refactoring/renames​

The Segmented connector was renamed to Straight (this is also listed in the breaking changes section below). We made this change because a Segmented connector that had a single segment behaved identically to a Straight connector; we have in fact really just enhanced our Straight connector to support multiple segments.

Path constraint​

The Straight connector now supports an optional constrain configuration option, with possible values "orthogonal", "diagonal" and "none", with "none" being the default. When constrain:"orthogonal" is set, the Straight connector behaves the same as an Orthogonal connector. When constrain:diagonal is set the connector chooses horizontal/vertical or diagonal paths.

Orthogonal connector​

Internally, the Orthogonal connector is now just an alias to Straight with constrain:orthogonal set. But you do not need to worry about that - if your app uses an Orthogonal connector you don't need to make any changes.

Default edge outlines​

You can now instruct JsPlumb to paint an outline of some specific size by default on all of your edges, using two new default keys:

  • paintConnectorOutline (default value false)
  • connectorOutlineWidth (default value 10)

When paintConnectorOutline is set to true, a 10 pixel transparent path will be drawn behind each edge, which makes it much easier for your users to interact with your edges.

Updates​

  • Fix applied to orthogonal connector to fix occasional paint issue when removing short segments.

  • An improvement was made to the continuous anchor location selection algorithm to reduce flicker.

  • The drop manager was updated to fix an issue whereby drop on edge would not occur if the element to drop was hovering over some vertex, even if dropping on the vertex was not permitted.

  • The SurfaceRenderOptions interface was updated to use BrowserJsPlumbDefaults instead of JsPlumbDefaults for the optional defaults value.

  • Internal refactoring of Orthogonal and Straight connectors to improve reuse between the two.

  • AngularViewOptions interface updated to fix missing group inheritance. When defining groups in your Angular view it was previously necessary to cast the view to any to use group flags.

  • Internally, the ControlsComponent uses the BrowserElement interface instead of HTMLElement. This makes it easier to integrate when using methods like querySelector and Typescript.

  • Updated SVGExporter/ImageExporter to fix an error thrown when there is no ShapeLibrary registered and the default SVG renderer would be used.

  • Fixed an issue with Angular overlay components - our previous way of instantiating them no longer works with Angular 18. We've updated the code to support a different way of instantiating them (which is backwards compatible with Angular 17 and 16).

Breaking changes​

  • Support for the ORTHOGONAL_CONNECTOR_RECALC_STRATEGY_LEGACY recalculation strategy was removed, having been previously deprecated. ORTHOGONAL_CONNECTOR_RECALC_STRATEGY_MODERN and OrthogonalRecalcStrategy were also both removed, being no longer necessary.

  • The SegmentedConnector has been renamed to StraightConnector. Wherever your app uses SegmentedConnector.type you'll need to update the code. Note, though, that this new StraightConnector is the default connector, so if you currently use SegmentedConnector without any config options you can simply remove that code.

We do not expect any change in functionality for apps that either currently use the default connector or that specify Straight as the connector type, as the new Straight connector is a drop-in replacement for the original Straight connector, when it has only a single segment.

  • The original StraightConnector has been renamed to LegacyStraightConnector, and is now deprecated.

API docs updates​

We spent some time going through the Typedocs documentation prior to releasing 6.90.0, and we've updated our API docs with categories and groups, to gather together related concepts and generally make it easier to get around. Finding what you're looking for is now more straightforward, but with this new structure it's also possible just to browse around a little and discover things you may not have known about.