Skip to main content

Release 6.11.0

· 4 min read
Simon Porritt
Simon Porritt
JsPlumb core team

Version 6.11.0 has some nice new functionality.

Nested Elastic Groups​

We've continued the work that we began in 6.10.0 on elastic groups, by adding support for nested elastic groups:

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

When an elastic group is inside some other elastic group and the user is dragging a child element, they are shown a preview of how all the groups will resize as a result of the drag. In the gif above we show two levels of nested groups but this works to an arbitrary depth...it's turtles all the way down.

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.

Exporting a selection or path as SVG/PNG/JPG​

You can now export a selection, path, or the current selection for some JsPlumb instance, to an SVG/PNG/JPG:

exporting a selection to SVG - JsPlumb - Angular, React, Vue, Svelte diagramming library

Grid Layout​

We've added a handy new layout in 6.11.0 - the GridLayout:

nested elastic group resizing - JsPlumb, industry standard diagramming and rich visual UI Javascript library

A number of different alignment options are available, and you can optionally fix the number of rows or columns the grid will use. Documentation for this layout is available here.

Ad-hoc group layouts​

You can now run an ad-hoc layout on a group:


someSurface.adHocGroupLayout(aGroup, {
    type:GridLayout.type,
    options:{
        horizontalAlignment:GridLayoutHorizontalAlignments.right
    }
})

Vertex sizes in model​

One of our most popular starter apps is the Flowchart Builder, in which users can resize elements. This width/height information is stored in the model, and prior to 6.11.0 had to be explicitly referenced by your vertex templates:

<div style="width:{{width}}px;height:{{height}}px">{{label}}</div>

In 6.11.0 we have introduced a useModelForSizes flag, along with a bunch of default size settings, which allows you to do away with the style shown in the template above - JsPlumb will take care of the size:


const surface = myToolkit.render(someElement, {
    ...,
    useModelForSizes:true,
    ...
})

Now our template can just focus on what it needs to focus on:

<div>{{label}}</div>

When a given vertex does not have width/height information, it can be supplied either from a node/group definition in your view, or from instance defaults. If all else fails and you haven't provided a value anywhere, JsPlumb will use something it considers reasonable.

This is discussed in detail in our docs.

Changelog​

New functionality​

  • Added support for exporting a Path or Selection (including the current selection for some Toolkit instance) to an SVG/PNG/JPG.

  • New layout GridLayout added. This layout places elements into a grid, optionally with a fixed number of rows or columns, and with the ability to align items to the left/top/bottom/right of each cell.

  • Group size preview pane shown when dragging an element inside an elastic group is now displayed on ancestors of the group if they are also elastic.

  • Added the ability to run an ad-hoc layout on a group, via the adHocGroupLayout method on a surface.

  • Support for setting node/group sizes from the model has been added, including support for specifying default node/group sizes in the event that the vertex data does not contain size information. Read more about this in our docs - https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/nodes-and-groups#setting-nodegroup-size

Updates​

  • Internal updates to React integration to improve performance and reduce code duplication.
  • Refactoring of various positioning methods to remove duplicated code
  • Improvements to group auto sizing when nested groups are expanded or collapsed.

Breaking changes​

  • React integration no longer supports setting asynchronous to false on the JsPlumbToolkitSurfaceComponent. Asynchronous is mandated.

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.