Skip to main content

Release 6.24.0

· 6 min read
Simon Porritt
Simon Porritt
JsPlumb core team

6.24.0 has turned out to be quite a large release, with a lot of useful new functionality. Here's the high level overview of what's now available:

Vertex Drawing Plugin​

This plugin allows your users to draw new nodes/groups onto the canvas with the mouse or with touch events, and lasso existing objects on the canvas to add to new groups. It can be used stand alone, or fully integrated with a shape library palette. It's super cool and useful - check it out in the new Network Topology Demonstration

Drawing vertices with the vertex drawing plugin - JsPlumb - Angular, React, Vue, Svelte diagramming library

New Demonstrations​

We've released an Angular version of our Gantt chart starter app, and also a brand new Network Topology Demonstration

network topology demonstration JsPlumb - When you've reached the limit with ReactFlow, we can help! - JsPlumb - Angular, React, Vue, Svelte diagramming library

ControlsComponent​

  • Added support for optionally hiding the zoom to extents, clear, and undo/redo buttons.
  • Added support for an optional list of extra buttons to render alongside the default buttons
  • Added support for an optional orientation parameter, allowing you to draw the controls as a column instead of a row.
  • We've also updated the jsplumbtoolkit-controls.css stylesheet to give the controls component a fresh new look.

controls component - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Angular Integration​

  • Added support for injecting values into @Inputs on nodes/group components from inside your view. Imagine you had this Angular component, for instance:
export class NodeComponent extends BaseNodeComponent {
  @Input() title:string
}

In 6.24.0 you can map a function in your view that will generate a suitable value for this title input at runtime:

view:{
    nodes:{
        default:{
            component:NodeComponent,
            inputs:{
                title:(n:Node) => 'here you can return any string you like'
            }
        }
    }
}

Shape Libraries​

  • In a ShapeSet you can now mark individual shape types as mapping to groups in your UI instead of just nodes. So the ShapeLibraryPalette can now allow your users to drag and drop new groups onto the canvas.

  • The ShapeLibraryPalette now allows you to provide fill and outline in the dataGenerator. Previously these values were overwritten by the palette's class-level defaults.

  • You can show labels on icons in a shape library palette now, via the showLabels:true setting. Read more about this in the shape library palette docs linked below.

  • The ShapeLibraryPalette offers integration with a vertex drawing plugin, allowing your users to select a shape to draw from the palette, then either click on the canvas or click and hold to add a new vertex. When drawing a group using this functionality you can snag existing vertices and add them to your new group, easy as pie. We're excited to see what people build with this new functionality, we think it's quite useful.

SVG/PNG/JPG Export​

  • SVG/PNG/JPG export now supports exporting groups.

  • We've wrapped up the SVG/PNG/JPG export functionality from our flowchart starter app into a new component - ExportControlsComponent.

export controls component - JsPlumb - Angular, React, Vue, Svelte diagramming library

Layouts​

  • The GridLayout was updated so that if there is only a single row/column of content, the entries are allowed to take up different heights/widths, meaning they are grouped together. Previously in a grid layout with a single row or column, each entry was allotted the same amount of space as the largest entry, which is fine when there is actually a grid but not the best aesthetically when there's only a single row or column.

  • We've added RowLayout and ColumnLayout, which are specialized instances of GridLayout with the appropriate orientation and limits on row count/column count set for you. These layouts can of course be achieved via appropriate options on a GridLayout: they are wrappers for convenience.

Element dragging​

  • Added support for elementsDraggable:boolean in group definitions. You can set this to false to prevent child members of some group from being draggable. By default this flag is set to true, meaning child members of a group are draggable within the group.

Drawing Tools​

  • The drawing tools plugin can now trigger resize of an elastic group, if the current vertex is a child of an elastic group. See this in action in our network topology diagram demonstration.

Resizing vertices inside an elastic group - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

Lasso Plugin​

  • The LassoPlugin can now be given an optional cssClass parameter, which will be written into the lasso's DOM element's class.

CSS​

  • Some new CSS vars were added to the default stylesheet
  • box-sizes:border-box set on .jtk-node and .jtk-group elements.

Miscellaneous​

  • The internals of the undo/redo manager were updated to collapse multiple update events fired during a transaction into a single event. This reduces the memory footprint and improves performance when executing an undo or redo.

  • Bugfix: when dragging a group that has descendants in the current selection, those descendants are not also dragged. Previously all the elements were dragged, causing the descendants to shift positions inside the group.

BREAKING​

  • The third argument of ControlsComponent is now an object containing options, where previously it was an optional clear message. clearMessage is now an optional field in the options.

  • Groups will now not allow "shrink from origin" by default. After discussion with several licensees we reached the conclusion that this behaviour was unexpected, and, while it should be possible, it should not be the default. For more information see the documentation (link below).

  • The DrawingToolsPlugin now uses width and height for size attributes by default, instead of w and h. We do not expect this to break anything for anyone, as all of the demos and starter apps we have written actually set these values to width and height.

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.