Release 6.81.0 contains a few nice ergonomic improvements to the Inspector, and to undo/redo functionality.

Release 6.80.0 is a major update to our Svelte integration, with the introduction of a host of new components, plus a surface provider, making it easier than ever before to rapidly build visual connectivity apps.

This is a minor release, with the focus being on improving the JS docs, in conjunction with a major upgrade to https://docs.jsplumbtoolkit.com

New functionality​

• Added onVertexAdded input to Angular ShapeLibraryPalette component.

Breaking​

• The AnimationEvents enum was removed and its members (EVENT_END_OVERLAY_ANIMATION etc) are now just exposed as constants.

In this release:

Connectors​

• We've "undeprecated" the usage of static connector type names, such as OrthogonalConnector.type. Where previously we'd deprecated these in favour of string constants (such as CONNECTOR_TYPE_ORTHOGONAL), we - and some licensees - have found that in some situations using the string constant causes a tree shaker to leave the connector code out. This was particularly prevalent in Angular apps. We recommend now using the static type names, even if you're not using Angular.

Adhoc Layouts​

• The adHocLayout method of the Surface now clears the geometry of all the edges in the canvas, because edited edge paths are intrinsically linked to the position of their source and target vertices, and the adHocLayout method can arbitrarily move any vertex.

Angular integration​

• We added optional data and url inputs to the jsplumb-surface component in the Angular integration. You can now do things like this in your templates:

<jsplumb-surface [toolkitParams]="toolkitParams"
    [renderParams]="renderParams"
    [view]="view"
    url="/assets/dataset.json"></jsplumb-surface>

or

<jsplumb-surface [toolkitParams]="toolkitParams"
                 [renderParams]="renderParams"
                 [view]="view"
                 [data]="data"></jsplumb-surface>

instead of having to declare a @ViewChild and load the data afterwards.

In release 6.70.0 we've updated our Vue 3 integration to make it more modern and easier to use, with reduced boilerplate and better documentation.

It is now optional to set surfaceId on the SurfaceComponent, MiniviewComponent, ControlsComponent, ExportControlsComponent and ShapePaletteComponent - the components will use a default value if not provided.

With these changes you can now get up and running with JsPlumb Vue quicker than ever:

In release 6.60.0 we've updated our Angular integration to make it more modern and easier to use, with support for signals, reduced boilerplate, and better documentation. The @jsplumbtoolkit/browser-ui-angular package now requires Angular 16 or later. Don't worry, though, if you're on a version of Angular older than 16: we've renamed our existing Angular integration to @jsplumbtoolkit/browser-ui-angular-legacy, and you can still use it.

This release sees a few more updates to our React integration to make it easier than ever to use:

• The ShapeLibraryPaletteComponent in the React integration no longer needs to be provided with a shapeLibrary as a prop - it retrieves the shape library from the Surface it is attached to.

• A new ShapeComponent was added to the React integration. This component is functional and takes as a prop the ctx that the Surface passes to the mapping your view.

• We've introduced a JsxWrapperProps interface to define the ctx member that the surface passes in to JSX mapped in your viewOptions.

Release 6.40.0 is a fairly big release, containing:

• A major update to our React integration, with the introduction of contexts and providers, making it easier than ever before to rapidly build visual connectivity apps.

• A vastly improved algorithm for repainting orthogonal connectors when the source or target node is dragged

• Default node components in the Angular and React integration, allowing you to quickly prototype something without needing to focus on too many details upfront

• Improvements to our documentation to make it easier to see how to achieve specific tasks with different integrations. This is an ongoing process but we've hit upon a basic structure now that we think works nicely.

• A couple of bugfixes

• An update to the Hierarchy layout to support ports.

Introduction​

Web Components have been around for quite some time now, but it's probably fair to say that they have not reached the widespread adoption that in the early days it seemed they might. I never really started using them for various reasons:

• Incomplete browser support JsPlumb needs to work on as many browsers as possible and does not have the luxury of requiring the latest browsers. It took quite some time for all of the major browsers to bring their web components support up to the spec.
• Relatively poor documentation Nowadays there's a wealth of articles discussing web components, including a great one on MDN, but this was not the case at first.
• Clunky developer interface This is of course a subjective viewpoint, but it's certainly not just me who thought so. One of the fundamental issues for me was trying to figure out how they could be composed as easily as something like React/Angular etc, particularly when the only input to a web component is through its attributes, and they have to be strings.

Recently I've been looking at web components anew: with the upcoming 7.x release of JsPlumb we're keen to explore all opportunities to use up-to-date technologies, and we thought web components deserved a second look. There seems to be a groundswell of people adopting them, and so we're interested in exploring if there's any value for our licensees in us adding some kind of web components support.

Specifically, we're wondering if we can support something like this:

Many libraries offer the ability to drag elements around, but JsPlumb's drag handler is a little more advanced than most: there are a number of options you can set on JsPlumb to get very fine-grained control of how your users drag elements around. One of these - the constrainFunction - is the focus of our post today, and we'll show you how it can be used to make a simple tile game with the minimum of effort.

Constrain functions​

In this first canvas, you can drag around each of the nodes as you please: