47 posts tagged with "toolkit"

Nested instances​

• Support was added for zooming in nested instances (eg. when some node in a given instance has another instance of JsPlumb embedded in it).

• Support was added for dragging edges in nested instances.

You can see these new capabilities in action in our Nested instances demonstration.

Inspectors​

• Inspectors were updated to ensure they are cleaned up when the port they are inspecting is removed from the dataset, or the node/group which the port they are inspecting belongs to has been removed from the dataset.

Drag/drop improvements​

• Surface Drop manager was updated to not assign active/hover classes to nodes and groups in the canvas when allowDropOnNode or allowDropOnGroup is set to false.

Miscellaneous​

• Events bound on a Surface via bindModelEvents are invoked in a timeout, which better isolates event binding behaviour from the Surface's lifecycle.

• ControlsComponent consumes events it has handled instead of allowing them to bubble.

Further reading​

• Check out the source code for the nested instances demo here: https://github.com/jsplumb-demonstrations/nested-instances

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

This release consists of updates to packaging and JS docs. We've really only published this page for completeness...there isn't very much to say.

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

Get in touch!​

If you'd like to discuss anything related to JsPlumb we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.

This is a minor release which contains a fix for an issue with the surface component using a selection as its data source.

The ability to render some selection of your dataset, as opposed to the entire dataset, is a powerful concept that can be used to create some very advanced apps, such as our Collapsible Hierarchy demonstration:

and also the Neighbourhood Views demonstration:

Further reading​

• Check out the source code for the collapsible hierarchy demo here: https://github.com/jsplumb-demonstrations/collapsible-hierarchy

• Check out the source code for the neighbourhood views demo here: https://github.com/jsplumb-demonstrations/neighbourhood-views

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

The main change in 6.18.0 is that we've introduced a brand new home for JsPlumb's apidocs - https://apidocs.jsplumbtoolkit.com. This site is far easier to navigate than our previous apidocs pages, with a cleaner layout and a search bar, and we've taken steps to setup our URL scheme such that going forward it will be easy to access the apidocs for some specific version.

Using Typedoc for our apidocs has also enabled us to embed snippets of our apidocs into the main documentation, safe in the knowledge that these snippets will always be current:

Updates​

In 6.18.0 we've also:

• Fixed an issue with the type of a new port not being set correctly on the Port object via the addNewPort method on a JsPlumb Toolkit instance. The type was set on the backing data but no on the Port itself.
• Fixed an issue whereby dragging multiple nodes would cause the miniview to fail to update properly, when in activeTracking mode
• Fixed issue with Firefox wheel direction being opposite to other browsers
• Made some updates to the endpoints and anchor docs

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

Release 6.17.0 contains a few nice updates to the miniview component:

• Zoom to canvas location

• Click an element to center it in the surface

• Update miniview as elements are being dragged

Zoom to canvas location​

In the images below keep your eye on the mouse pointer over the miniview - when it is stationary, we are performing a wheel zoom. From 6.17.0 onwards the surface is zoomed in/out at the same point as the miniview:

Click to center nodes/groups​

You can now click a node/group in a miniview and JsPlumb will scroll the related node/group in the surface to the center of the viewport - in the gif below, our user is clicking on individual elements in the miniview with the mouse (it also works with touch devices of course) :

This behaviour can be controlled via the clickToCenter flag in your miniview options. See below for a link to the miniview docs.

Tracking dragged elements​

A further nice update in 6.17.0 is that the miniview now actively updates the view as nodes/groups are dragged in the related surface - watch the miniview in the image below:

This behaviour can be controlled via the activeTracking flag in your miniview options. See below for a link to the miniview docs.

Further reading​

• Read more about the miniview here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/miniview

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

Orthogonal connector paths​

We've made a major improvement to orthogonal connector path editing in version 6.16.0. In a nutshell, it's now far harder for a user to inadvertently get the UI into the situation that a connector doubles back onto itself underneath a vertex, which makes for a more intuitive experience. This is how the editor behaves in 6.16.0:

and this is how the editor behaves in versions prior to 6.16.0:

We think the behaviour in 6.16.0 is much nicer.

Vue 2 / Vue 3 integration​

• It's no longer necessary to declare the BaseNodeComponent or BaseGroupComponent mixin when using the Vue2 or Vue3 integration packages. These mixins are automatically added by JsPlumb if not specified in your component.

Miscellaneous updates​

As we inch ever closer to our 7.x release we are continuing the work of reducing duplication and cruft from the codebase.

• Several events that were previously fired by the UI layer but not consumed by the Surface have been removed, as have their associated constants.
• The UI rendering layer's "lists" package has been removed. This package was part of the Community edition and was not exposed via the Toolkit API.

Further reading​

• Read more about the orthogonal connector editor here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/editing-paths#orthogonal-editors

• Try the orthogonal connector editor in action here: https://jsplumbtoolkit.com/demonstrations/flowchart-builder

• Read more about JsPlumb's Vue 2 integration here https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue2-integration or Vue 3 integration here https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/vue3-integration

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

New Functionality​

• When a new node is dropped onto some existing node via the drop manager, the onVertexAdded callback on SurfaceDropManager now passes back information about the vertex on which the new node was dropped.

• Support for the onVertexAdded callback was added to ShapeLibraryPalette

• Added new panWithMetaKey option to Surface render params. With this flag you can instruct a Surface to only pan when the user is holding down the "meta" key (command key on Macs, ctrl key on Windows).

Further reading​

• Read more about the onVertexAdded option on ShapeLibraryPalette here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/shape-libraries#getting-notification-of-a-new-vertex

• Read more about the dropTarget option on SurfaceDropManager here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/drag-and-drop#getting-notification-of-a-new-vertex

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

New Functionality​

• Added support for optional cornerRadius to Segmented connector

Updates​

• Added a fix for a very specific orthogonal geometry loading issue, involving nodes in a straight line that are close together.
• Updated setPan method to fire a pan event.

Further reading​

• Read more about the cornerRadius option on Segmented connectors here: https://docs.jsplumbtoolkit.com/toolkit/6.x/lib/connectors#rounded-corners

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

Recently a licensee who is still using version 2.x of JsPlumb wanted to upgrade their app to use Angular 16, but did not have the bandwidth to undertake an upgrade to the latest 6.x version of JsPlumb. So we pulled down 2.4.16 (the last version in the 2.x line), dusted it off to support Angular 16+, and released it as 2.50.0.

Version 2.50.0 is available to all licensees who currently have access to downloads (including new licensees). We don't recommend using 2.50.0 in preference to 6.x, but if you find yourself in a similar situation you might like to consider it.

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.

Updates​

• Fixed issue with path editor incorrectly trying to edit an edge that had been aborted by a beforeStart interceptor.

Start a free trial

Not a user of jsPlumb but thinking of checking it out? There's a whole lot more to discover and it's a great time to get started!

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.