Release 7.3.0

This release contains several updates that bring an extra level of professionalism to your flowchart/diagram apps.

Multiline SVG labels

We updated the ShapeLibrary to add support for multiline labels on shapes, and updated our Flowchart Builder starter app to include this new functionality.

Recent color history in inspectors

When working with inspectors, it is extremely useful to be able to choose a color from a list of recent colors - JsPlumb now provides support for this out of the box. You can use multiple color pickers and they all share the same context - here's the node inspector in our flowchart builder now:

and here's the edge inspector:

Cloning vertices in the Surface canvas

Another feature of professional flowchart builders is the ability to clone some existing vertex - this has been added to JsPlumb in version 7.3.0, and we use it in the flowchart builder starter app:

Save/load data and Surface state

In 7.3.0 you can now call exportData() on a Surface, not just on the model. When you call it on a Surface, the returned payload contains the dataset along with the current pan/zoom for the Surface, and also any context information stored by attached inspectors. Coupled with the new load method on the Surface, you can now save and restore the UI to the exact state it was in.

Summary

The full changelog can be found here, but this is a summary:

• Added support for a list of recently selected colors in the inspectors.
• Added support for a context object in inspectors - shared state for the various UI components in the inspector.
• Added support for casting the return value of select elements and radio buttons in the inspector to numbers.
• Added support for persisting inspector context to the dataset generated by the Surface's exportData method
• Added cloneVertex method to the Surface - quickly clone some vertex, optionally supplying a new position and making it the Toolkit's current selection
• Added flashVertex(...) method to the Surface - flash some vertex to bring it to the user's attention.
• Added flashSelection(...) method to the Surface - flash some set of vertices to bring them to the user's attention.
• Added exportData, save and load methods to the Surface, allowing you to save not just the dataset but also the pan/zoom settings for the surface, as well as any context that an inspector might have attached (such as the list of recent colors in a color picker)
• Angular: added cloneNode() to BaseNodeComponent and cloneGroup() to BaseGroupComponent.
• Angular: added flashNode() to BaseNodeComponent and flashGroup() to BaseGroupComponent.
• Fixed issue with painting loopback connectors when using continuous anchors - the source anchor would erroneously be resolved to [0,0]
• Fixed issue where changing lineWidth on edge did not change the line width in the hover paint style
• Updated SVG exporter to export the line width of each edge, instead of using a default.
• Updated the flowchart builder starter apps to use color history in inspectors
• Added the ability to set the line width of edges and the outline width of vertices in flowchart builder
• Use multiline labels in flowchart builder starter app
• Updated inspector docs
• Updated Angular quick start to fix an error in the recommended template, and to show how to include the default jsplumbtoolkit.css and jsplumbtoolkit-angular stylesheets.

---

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.

Your name

Email address

Company website

Phone number

Message

I have seen the purchase pageI have seen and acknowledge the license agreement

---

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.