Skip to main content

Release 6.6.5

· 3 min read
Simon Porritt
Simon Porritt
JsPlumb core team

What's new?​

Neighbourhood views starter app​

We've added a new starter app - Neighbourhood views which showcases JsPlumb's ability to render dynamically changing selections. For some selected element, we provide a popup window showing either the element's parent, children, siblings or its parent and children.

Neighbourhood views JsPlumb, build diagrams and rich visual UIs fast - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

This starter app showcases several features of JsPlumb Toolkit:

  • The Hierarchy layout makes it a snap to arrange items in a hierarchical view
  • Our popups render a dynamically changing Selection to provide a window on some aspect of the dataset
  • The Surface element has a number of helper methods to let you navigate around the dataset. In this app we take advantage of the Surface's ability to smoothly pan to a specific element.
  • We use the ElementDragger helper class to configure DOM elements which are not part of the canvas to be draggable by the user.
  • For rendering in this app we use HTML elements, which we can easily style.
  • We use a Custom tag to render the formula in elements that have one, but if you're using one of our library integrations - Angular, React, Vue or Svelte - you can of course achieve the same thing with a component.

The functionality shown in this app is something that can be very useful if you're displaying a diagram or application with a large number of elements.

ElementDragger​

  • As mentioned above, we have a new helper class - ElementDragger - which you can use to configure DOM elements outside of your canvas to be draggable.

Updates​

We've made a few miscellaneous updates in this release:

  • Fixed an issue in the Svelte integration whereby a missing component mapping could cause an error.
  • Fixed an issue with the centerOn method that was introduced by some refactoring in 6.6.4.
  • Added support for getRootNode() method on HierarchyLayout, allowing you to dynamically specify the root node each time the layout is run.
  • Improvements to Hierarchy layout placement when the dataset consists of a set of unconnected nodes

Start a free trial

Interested in the concepts discussed in this article? JsPlumb is now in maintenance mode, but the good news is that we've released a bigger and better library - VisuallyJs. If you can do it in JsPlumb you can do it more easily in VisuallyJs.

To read more about VisuallyJs, check out the home page, or if you want to get started on a trial right now, head over to the trial page at https://visuallyjs.com/trial

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.