Release 6.23.0

GANTT CHART DEMONSTRATION

We're excited to bring you our new Gantt chart demonstration - a fully featured Gantt chart component that uses a few of JsPlumb's advanced UI features to very slick effect.

Check it out at the link above, or if you want to grab the code and start hacking, head over to Github and clone it!

SVG/PNG/JPG EXPORT

• The SVG/PNG/JPG exporter code will now export any background grid that is in effect, by default. You can instruct the exporter to omit the grid if you wish.

DECORATORS

6.23.0 introduces some useful new functionality to JsPlumb's Decorators

• When fixing elements in a decorator you can now provide horizontal/vertical alignment hints for the element, enabling you to fix an element's right and/or bottom edge at some location (in previous versions you could only fix the left and/or top edges)

• You can provide an id when registering an element via the fixElement method of a surface, and subsequently retrieve a handle for the fixed element via getFixedElement. Fixed element handles can be used to adjust the canvas panning to reset it so that all content is visible.

• New method zoomToDecorator was added to the surface component. This method uses zoomToExtents internally to instruct the surface to zoom such that all of the canvas content and any elements added by the given decorator are visible.

DRAWING TOOLS

• The drawing tools plugin now supports resizeX and resizeY in its options, allowing you to switch off resize in some given axis.

• You can now write a jtk-resizable="false" attribute on any node/group element that you wish to exclude from the drawing tools plugin.

MISCELLANEOUS

• New method zoomToExtents was added to the surface component. You can use this method to instruct the surface to zoom to some specific area on the canvas.

• The optional constrainFunction on a surface's drag options is now also passed the current position of the element that is being dragged.

• The centerOn method in the Surface (and its variants centerOnHorizontally, centerOnVertically and centerOnAndZoom) have been updated to correctly center the display when the focus vertex is a child of a group.

• The drawing tools plugin now supplies a reason of "drawingToolsResize" in the update event that it posts to JsPlumb.

• Updated the miniview destroy method to ensure the window resize listener has been detached.

• Updated element drag code to draw all edges after all elements have been repositioned. This allows the orthogonal connector router to determine when both elements in a connection have been dragged by the same amount, meaning the path does not need to be recalculated, only shifted.

BREAKING

• The EventGenerator class's bind method no longer accepts an array of event names as its first argument. It only accepts a single event name now: if you're invoking this method with an array of event names you'll need to iterate the events yourself and call bind for each one.

---

Further reading

• Checkout the Gantt chart demonstration here, and clone it from Github here

• Read up on the various ways you can navigate around a surface canvas in our docs here https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/navigating-the-canvas

---

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.