Skip to main content

19 posts tagged with "network topology diagram"

View All Tags

· 2 min read
Simon Porritt

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.

nested instances desktop - JsPlumb - Angular, React, Vue, Svelte diagramming library

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


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.

· One min read
Simon Porritt

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.

· One min read
Simon Porritt

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:

collapsible hierarchy language browser - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

and also the Neighbourhood Views demonstration:

neighbourhood views chemical element browser - JsPlumb, industry standard diagramming and rich visual UI Javascript library


Further reading


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.

· 2 min read
Simon Porritt

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.

apidocs for JsPlumb 6.18.0 - JsPlumb, industry standard diagramming and rich visual UI Javascript library

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:

embedded apidocs for JsPlumb 6.18.0 - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

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.

· 2 min read
Simon Porritt

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

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:

miniview adjusts surface transform origin when zooming - JsPlumb, build diagrams and rich visual UIs fast

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) :

click node/group in miniview to center it - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts and more

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:

miniview updates dragged elements as they are dragged - JsPlumb, industry standard diagramming and rich visual UI Javascript library

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


Further reading


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.

· 2 min read
Simon Porritt

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:

orthogonal connector vertex avoid - JsPlumb, industry standard diagramming and rich visual UI Javascript library

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

orthogonal connector vertex overlap - JsPlumb, build diagrams and rich visual UIs fast

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


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.

· One min read
Simon Porritt

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


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.

· One min read
Simon Porritt

New Functionality

  • Added support for optional cornerRadius to Segmented connector

cornerRadius property on Segmented connector - JsPlumb - Angular, React, Vue, Svelte diagramming library

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


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.

· One min read
Simon Porritt

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.

· One min read
Simon Porritt

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.