Skip to main content

Release 6.11.0

· 4 min read
Simon Porritt

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 Toolkit, industry standard diagramming and rich visual UI Javascript library

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 Toolkit instance, to an SVG/PNG/JPG:

exporting a selection to SVG - jsPlumb Toolkit, leading alternative to GoJS and JointJS

Grid Layout

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

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

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 - the Toolkit 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, the Toolkit 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/6.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.