Skip to main content

Release 6.10.0

· 5 min read
Simon Porritt
Simon Porritt
JsPlumb core team

6.10.0 is a significant release for JsPlumb, with a great new "elastic groups" feature, plus an overhaul of how group sizing works in general. In addition we've added a few new useful things such as the ability to enable/disable the snaplines plugin, the ability to provide a style block for an SVG export, and a bunch of other things.

Under the hood we continue to refactor the codebase to make it faster and more streamlined, as we steadily approach our 7.x release, and we've put in a couple of minor updates to ensure JsPlumb works with SvelteKit SSR.

Elastic Groups​

We are pleased to announce that we now support "elastic" group sizing:

elastic group resizing - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

As users drag child elements around inside a group, the size of the child content is computed and a frame appears showing the user how the group's size/position will change on mouseup. If you have a minSize or maxSize set on a group the elastic resizer will take that into account (in the video below the group has a minimum size of 250px in each axis).

You can read more about elastic groups in our documentation.

Play around with our groups starter app to get a feel for how elastic groups sizing works.

Snaplines Plugin​

A new method setEnabled(boolean) was added to the Snaplines plugin, allowing you to switch it on and off during the lifecycle of your app.

elastic group resizing - JsPlumb, build diagrams and rich visual UIs fast

Svelte Kit SSR​

From 6.10.0 onwards JsPlumb is fully compatible with Svelte Kit SSR.

SVG export styles​

We've added the capability to the SVG exporter to take a styles parameter, either as a string or a JS object, which is then injected into the SVG that we export:


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

const exporter = new SvgExporter(surface)

const svg = exporter.export({
    style:`@font-face {
          font-family: 'FiraSans';
          font-style: normal;
          font-weight: 400;
          src:url(https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf)
       }
       text {
        font-family: FiraSans;
        fill: black;
       }`
})
import { SvgExporter } from "@jsplumbtoolkit/browser-ui"
const svgExport = new SvgExporter(surface).export({
    style: {
        "@font-face": {
            "font-family": "'FiraSans'",
            "font-style": "normal",
            "font-weight": 400,
            "src": "url(https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf)"
        },
        "text": {
            "font-family": "FiraSans",
            "fill": "black"
        }
    }
})

Changelog​

New functionality​

  • New flag elastic available for group rendering. An elastic group shrinks and grows as the nodes/groups inside of it are dragged around.

  • Added new panFilter optional function to Surface options, allowing you to control at runtime whether or not panning should be enabled.

  • Added support for optional minSize parameter in group definitions in the view. This is of type Size.

  • Added support for optional padding parameter in group definitions in the view. When autoSize is set on a group, this padding will be set around the child nodes/groups of an auto sized group. Default value is 0.

  • Added support for optional allowShrinkFromOrigin flag on group definitions in the view. Implicitly true when autoShrink or autoSize is true, you can set this to default if you don't want your groups to be able to shrink from the left/top edge.

  • When dragging a child element from a group, the parent group is assigned a CSS class of .jtk-drag-original-group. You can attach a z-index rule for this class to ensure that nodes/groups you drag from a given group will appear on top of any target group.

  • Added setEnabled(boolean) method to the Snaplines plugin, allowing you to enable/disable the plugin at runtime.

  • Added support for passing in styles to SVG exporter, for inclusion in a style element in the SVG export.

Updates​

  • Improvements to orthogonal routing to handle vertical alignment in Hierarchy layout

  • Updates to the browser UI core code to fix a couple of issues that were causing the code to fail to load in SvelteKit SSR.

  • The behaviour of autoShrink and autoSize has been improved to support shrinking a group from its left/top edge where applicable. Previous versions of JsPlumb could only shrink a group from its right/bottom edges.

  • Fixed an issue with group auto size when an element is dragged into the negative axis. Previous versions of JsPlumb would size the group to fit the new content bounds but leave the dragged element hanging out of the group. In 6.10.0 the group is shifted to adjust for this.

  • Several improvements were made to the interaction between a Toolkit instance and its associated undo/redo manager, to ensure that not stray commands are tracked by the undo/redo manager during data load/append.

Breaking changes​

  • The maxSize option to group definitions is now a Size object, with a w and h property, instead of an array of [w,h].

  • autoSize switches on autoShrink by default now. Consider just using autoGrow if this is not what you want.

  • When autoSize or autoShrink is set, groups may now adjust their left/top edges to fit the content (taking into account any minSize set on a group). You can set allowShrinkFromOrigin:false to suppress this behaviour.

  • When dragging an element that is a child of a group, the original group is now assigned .jtk-drag-active and .jtk-drag-hover CSS classes, where in previous versions it was not. We think this provides a better experience for users but if you prefer the old behaviour you can use the fact that the .jtk-drag-original-group class is now added to the parent group to setup rules to mimic the old behaviour.

Further reading​

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.