Skip to main content

Release 6.6.5

· 2 min read
Simon Porritt

What's new?​

Neighbourhood views starter app​

We've added a new starter app - Neighbourhood views which showcases the Toolkit'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 Toolkit, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

This starter app showcases several features of the 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

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.