Skip to main content

Release 7.0.0

· 11 min read
Simon Porritt
Simon Porritt
JsPlumb core team

We are pleased to announce the release of version 7.0.0 of JsPlumb Toolkit, in which we have introduced three major new capabilities:

  • Vertex avoidance JsPlumb can now automatically route edges around nodes and groups. Various options for the routing strategy are supported, and groups are handled seamlessly.

  • Magnetizer trackback A new mode for the magnetizer in which elements that have been moved out of the way of some element that is being dragged will attempt to snap back to their original positions - like a crowd parting for you on your way back from the bar.

  • Edge snapping When dragging edges, you can instruct JsPlumb to snap to nearby drag targets.

We've also made a host of small updates to improve the usability of JsPlumb's API, documentation and starter apps. This is a big release, so get comfortable!

New Functionality​

Vertex avoidance​

In JsPlumb 7.0.0 you can configure edges to avoid vertices - try dragging node 1 or 2 around in this canvas and see how the connector avoids node 3.


info

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:


Further reading​

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:


Further reading​

Edge Snapping​

You can instruct JsPlumb to snap edges to the nearest drag target that lies within some threshold - try dragging from the blue circles in this canvas:


This is the simplest example, in which we've switched on edge snap in the render options:

{    
    edgeSnap:{
        enabled:true    
    }    
}

There are a number of ways you can configure edge snapping for more advanced usage, including setting the snap threshold and specifying whether to snap to the edge of some element or its center, as well as only enabling snap to particular targets. See the link below for details.

Further reading​

Simplified dataGenerator​

When using the SurfaceDropManager (or one of its library wrappers) 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 integrations.

Connector updates​

We've made a number of changes to our connectors, the most notable being that the Straight and Segmented connectors were folded into one

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.

Bezier connector​

  • Support for gap was added to CubicBezierConnector

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.

Angular updates​

  • Added ExportControlsComponent to the Angular integration. This component can export an SVG based UI to SVG, PNG or JPG.

  • Added support for onVertexAdded, dragSize, canvasDropFilter and canvasSelector input to the jsplumb-surface-drop component in the Angular integration.

DrawingTools plugin​

  • The DrawingTools plugin was updated to support resizing elements by dragging their border. Borders can be visible or transparent.

React updates​

  • Added support for onVertexAdded, dragSize, canvasDropFilter and canvasSelector input to the PaletteComponent in the React integration.

Inspectors​

  • Added support for showCloseButton option on Inspectors. When clicked, the inspector is made inactive and JsPlumb's selection is cleared

Updates/Fixes​

Miscellaneous​

  • 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 controls component 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 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).

  • Updated the DrawingTools plugin to automatically register appropriate drag filters on the underlying surface. Previously it was the user's responsibility to do this via the dragOptions of the surface, and failure to set this up would result in a transaction error at the start of a resize.

  • The drop manager was updated to provide a nicer user experience when dragging a node/group from the palette - the element being dragged is centered around the mouse/touch event location now.

CSS Updates​

  • We now ship the source scss files that we use to create jsplumbtoolkit.css in the /scss directory of the @jsplumbtoolkit/browser-ui package.

  • A few useful updates were made to the jsplumbtoolkit.css default stylesheet:

    • When an edge is dragging, the canvas cursor is set to default, where previously it would be drag. This makes for a nicer visual cue for users.
    • Nodes and groups are assigned the move cursor by default
    • When elementsDraggable:false is set on a surface, nodes and groups are assigned the default cursor.
    • When an individual node/group is marked as not draggable, it is assigned the default cursor.

Demo updates​

  • Updated various demonstrations to give them a more fresh look and feel
  • Added an Inspector to our Angular Gantt chart
  • Updated Flowchart Builder to use vertex avoidance for edges instead of editable edge paths, and magnetizer trackback.

API docs updates​

We spent some time going through the Typedoc documentation prior to releasing version 7.0.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.

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.

  • margin was removed from StateMachine and Bezier connectors. Use the pre-existing gap option instead.

  • The CSS classes added to groups that are a drag target or the current hover target for other groups or nodes being dragged have changed from jtk-drag-active and jtk-drag-hover to jtk-vertex-drag-active and jtk-vertex-drag-hover. This is to distinguish them from the active/hover classes used when dragging edges.

  • The initializeSegmentedConnectorEditors method was renamed to initializeStraightConnectorEditors

  • The CSS classes related to the previous segmented connector editor have been renamed, eg. where we'd have .jtk-segmented-segment-delete, for example, we now have .jtk-straight-segment-delete.

  • The contents of the jsplumbtoolkit-connector-editors.css stylesheet was folded in to jsplumbtoolkit.css and jsplumbtoolkit-connector-editors.css was removed.

  • The contents of the jsplumbtoolkit-edge-type-picker.css stylesheet was folded in to jsplumbtoolkit.css and jsplumbtoolkit-edge-type-picker.css was removed.

  • The contents of the jsplumbtoolkit-dialogs.css stylesheet was folded in to jsplumbtoolkit.css and jsplumbtoolkit-dialogs.css was removed.

  • The contents of the jsplumbtoolkit-browser-ui-plugin-background.css stylesheet was folded in to jsplumbtoolkit.css and jsplumbtoolkit-browser-ui-plugin-background.css was removed.

  • The contents of the jsplumbtoolkit-controls.css stylesheet was folded in to jsplumbtoolkit.css and jsplumbtoolkit-controls.css was removed.

  • The ExportControlsComponent constructor has changed - the third argument is now options instead of a ShapeLibrary. if you need to pass in a shape library you can do it inside the options, but it should not be necessary as the component gets the shape library from the surface you pass in.

Changelog​

You can find the full changelog here - https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/changelog

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.