Export to SVG, PNG and JPG
This is an exciting new capability that the Toolkit offers. When using a Shape library to render the nodes in your UI, you can now export the Surface canvas to either SVG, PNG or JPG.
We've added support for this to our Flowchart builder starter app:
When you click one of these you'll see a preview window, from which you can download the export:
The Toolkit offers a lightweight UI to assist with the export, as shown above, which is easily customised via CSS, and also a lower-level programmatic API if you want to do something more bespoke.
Read more about SVG, PNG and JPG export in the Toolkit documentation.
Also checkout the the Angular integration documentation for a discussion of some useful methods related to this that we added to the Toolkit's angular service.
The Angular service was augmented with new methods to support exporting to SVG/PNG/JPG - see the Angular integration documentation for details.
The ShapeLibrary component now supports rendering labels to shapes as part of their SVG element. Previously a user was required to separately manage labels, but the shape library can now handle that for you. For documentation on this, see the shape libraries documentation
A new flag
useHTMLElementis supported on Label overlays. Setting to false will result in the Toolkit using an SVG
textelement for the label overlay, rather than an HTML element.
A new flag
useHTMLLabelwas added to edge definitions, which you can use to override the new default behaviour of using an SVG text element for the default label.
ShapeLibraryPaletteno longer registers a
jtk-shapetag on the associated Surface. Instead, the shape library needs to be passed in the render options to the Surface. See the shape libraries documentation for details.
When you specify a
labelin an edge type, the Toolkit now creates an SVG
textelement for it, rather than an HTML element.
By default, hover events are now switched off in the UI layer. We expect this change to affect almost nobody at all. For a full discussion of the reasoning behind this, see the documentation on rendering at https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/rendering.
- Fixed an issue with the lasso plugin that would cause it to fail on devices with touch + pointer input methods.
- Fixed an issue whereby a
cssClassdefined on an edge mapping would not be applied to a newly created edge.
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 firstname.lastname@example.org.
Not a user of the jsPlumb Toolkit but thinking of checking it out? Head over to https://jsplumbtoolkit.com/trial. It's a good time to get started with jsPlumb.