Skip to main content

Release 6.0.0

· 6 min read
Simon Porritt

This morning we've released version 6.0.0 of both the Toolkit and Community editions of jsPlumb.

What's new?​

There is no functional change between version 6.0.0 and the last 5.x version, 5.13.7. What has changed, though, is the way that jsPlumb is packaged.

In 5.x we distributed both the Toolkit and Community editions as a set of packages, with the intention being that users could keep their code size down by omitting packages they did not need. In practice, though, all Toolkit users needed the core Toolkit packages - which were the largest - and all Community users needed the core Community packages, also the largest. The gain of distributing the code amongst several packages was negligible.

From a development perspective, the practice of spreading code around the various packages meant that the developer needed to know which package to go to in order to import something. For Toolkit users in particular, this could get tedious. Is the import in the Toolkit edition core? The Community edition core? Common? A renderer? etc.

So in 6.x we're distributing everything in a single Toolkit package and a single Community package, and users of each edition need only import one single package - either @jsplumbtoolkit/browser-ui or @jsplumb/browser-ui.

The packages contain a Common JS module, an ES6 module, and a UMD. For users who have a tree shaker incorporated in their build chain this setup will be good for their bundle sizes: exporting everything from a single package means the tree shaker can be very granular.

These packages are available now. For Community Edition users, @jsplumb/browser-ui version 6.0.0 is in the public NPM repository.

For Toolkit users who have an active subscription to new releases and to our NPM repository, @jsplumbtoolkit/browser-ui version 6.0.0 is in our NPM repository and can be downloaded from the download page.

We're still catching up on updating the docs and demonstrations - expect to see these changes over the next few days.

How to migrate?​

The process of migrating to 6.x is straightforward.

Toolkit Edition​

We've created a 6.x branch of the Flowchart Builder demonstration.

There were three things we needed to do:

  1. Update dependencies:

Previously:

"dependencies": {
    "@jsplumbtoolkit/browser-ui-vanilla-2": "^5.12.0",
    "@jsplumbtoolkit/drop": "^5.12.0",
    "@jsplumbtoolkit/labels": "^5.12.0",
    "@jsplumbtoolkit/print": "^5.12.0",
    "@jsplumbtoolkit/dialogs": "^5.12.0",
    "@jsplumbtoolkit/connector-editors-orthogonal": "^5.12.0",
    "@jsplumbtoolkit/connector-orthogonal": "^5.12.0",
    "@jsplumbtoolkit/browser-ui-plugin-drawing-tools": "^5.12.0",
    "@jsplumbtoolkit/browser-ui-plugin-miniview": "^5.12.0",
    "@jsplumbtoolkit/browser-ui-plugin-lasso": "^5.12.0",
    "@jsplumbtoolkit/browser-ui-plugin-background": "^5.12.0"
}

Now:

"dependencies": {
    "@jsplumbtoolkit/browser-ui": "^6.0.0"
}
  1. Update imports:

Previously:

import * as Dialogs from "@jsplumbtoolkit/dialogs"

import {
    SurfaceRenderOptions,
    Surface,
    EVENT_TAP,
    EVENT_CANVAS_CLICK,
    EVENT_SURFACE_MODE_CHANGED,
    SurfaceMode,
    Connection,
    BlankEndpoint,
    ArrowOverlay,
    LabelOverlay,
    AnchorLocations,
    DEFAULT,
    ready,
    newInstance
} from "@jsplumbtoolkit/browser-ui-vanilla-2"

import {
    Edge,
    Vertex,
    ObjectInfo,
    AbsoluteLayout,
    uuid,
    forEach,
    EVENT_UNDOREDO_UPDATE,
    UndoRedoUpdateParams,
    ObjectData,
    extend
} from "@jsplumbtoolkit/core"

import { EdgePathEditor } from "@jsplumbtoolkit/connector-editors"
import { createSurfaceManager } from "@jsplumbtoolkit/drop"
import { registerHandler } from "@jsplumbtoolkit/print"
import {DrawingToolsPlugin} from "@jsplumbtoolkit/browser-ui-plugin-drawing-tools"
import {MiniviewPlugin} from "@jsplumbtoolkit/browser-ui-plugin-miniview"
import {OrthogonalConnector} from "@jsplumbtoolkit/connector-orthogonal"

import * as ConnectorEditorOrthogonal from "@jsplumbtoolkit/connector-editors-orthogonal"
import {LassoPlugin} from "@jsplumbtoolkit/browser-ui-plugin-lasso"
import {CancelFunction} from "@jsplumbtoolkit/dialogs"

import {GeneratedGridBackground, GridTypes, BackgroundPlugin} from "@jsplumbtoolkit/browser-ui-plugin-background"

ConnectorEditorOrthogonal.initialize()

Now:

import {
    Dialogs,
    SurfaceRenderOptions,
    Surface,
    EVENT_TAP,
    EVENT_CANVAS_CLICK,
    EVENT_SURFACE_MODE_CHANGED,
    SurfaceMode,
    Connection,
    BlankEndpoint,
    ArrowOverlay,
    LabelOverlay,
    AnchorLocations,
    DEFAULT,
    ready,
    newInstance,Edge,
    Vertex,
    ObjectInfo,
    AbsoluteLayout,
    uuid,
    forEach,
    EVENT_UNDOREDO_UPDATE,
    UndoRedoUpdateParams,
    ObjectData,
    EdgePathEditor,
    createSurfaceDropManager,
    registerHandler,
    DrawingToolsPlugin,
    MiniviewPlugin,
    OrthogonalConnector,
    LassoPlugin,
    CancelFunction,
    GeneratedGridBackground,
    GridTypes,
    BackgroundPlugin
} from "@jsplumbtoolkit/browser-ui"

Note also that it is not necessary to invoke ConnectorEditorOrthogonal.initialize() in version 6.x of the Toolkit.

  1. Update the Dialogs constructor

Since everything is exported from a single package there were a few method name clashes - multiple packages, for example, exported a newInstance method. Most of those newInstance methods were just convenience methods and didn't do anything particularly useful. For example, this is how we rewrote the code that creates a Dialogs instance:

Previously:

const dialogs = Dialogs.newInstance({
    ...    
})

Now:

const dialogs = new Dialogs ({
    ...
});

Sometime over the next few days we'll merge all of the 6.x demonstration branches into main.

Community Edition​

All of the Community Edition demonstrations have been ported to use 6.0.0 now on the main branch. Here's what we did to migrate the Flowchart demonstration (this is for the Typescript demonstration):

  1. Update dependencies

Previously:

  "dependencies": {
    "@jsplumb/browser-ui": "^5.0.0",
    "@jsplumb/connector-flowchart": "^5.0.0"
  },

Now:

  "dependencies": {
    "@jsplumb/browser-ui": "^6.0.0"
  },
  1. Update imports

Previous:

import {
    ContainmentType,
    EVENT_CLICK,
    EVENT_CONNECTION_ABORT,
    EVENT_CONNECTION_DRAG,
    newInstance,
    ready
} from "@jsplumb/browser-ui"

import {AnchorLocations, AnchorSpec,} from "@jsplumb/common"

import {
    Connection,
    ConnectionDetachedParams,
    ConnectionMovedParams,
    DotEndpoint,
    EVENT_CONNECTION_DETACHED,
    EVENT_CONNECTION_MOVED,
    LabelOverlay
} from "@jsplumb/core"

import {FlowchartConnector} from "@jsplumb/connector-flowchart"

Now:

import {
    ContainmentType,
    EVENT_CLICK,
    EVENT_CONNECTION_ABORT,
    EVENT_CONNECTION_DRAG,
    newInstance,
    ready,
    AnchorLocations, 
    AnchorSpec, 
    Connection,
    ConnectionDetachedParams,
    ConnectionMovedParams,
    DotEndpoint,
    EVENT_CONNECTION_DETACHED,
    EVENT_CONNECTION_MOVED,
    LabelOverlay,
    FlowchartConnector
} from "@jsplumb/browser-ui"

What are the breaking changes?​

We'll be updating the changelog in the documentation over the next few days, but for convenience here we include the changelog for each edition.

Toolkit breaking changes​

  • Support for the original templates syntax (where variable interpolations are of the form ${...}) has been dropped, throughout the Vanilla toolkit and the dialogs. The code from the previous templates-2, dialogs-2 and browser-ui-vanilla-2 packages has been retained in the @jsplumbtoolkit/browser-ui package, and the code from templates, dialogs and browser-ui-vanilla has been dropped.

  • The Spring layout has been removed. Use ForceDirected instead.

In order to support the single @jsplumbtoolkit/browser-ui package, several factory methods were renamed/removed:

  • newInstance(surface) in previous @jsplumbtoolkit/browser-ui-anim removed. Use new SurfaceAnimator(surface) instead.

  • createManager in previous @jsplumbtoolkit/drop package is now exposed as createDropManager in @jsplumbtoolkit/browser-ui

  • createSurfaceManager in previous @jsplumbtoolkit/drop package is now exposed as createSurfaceDropManager in @jsplumbtoolkit/browser-ui

  • newInstance(surface:Surface, options?:ConnectorEditorOptions) from previous @jsplumbtoolkit/connector-editors method removed - use new EdgePathEditor(surface:Surface, options?:ConnectorEditorOptions) instead.

  • initialize() method from previous @jsplumbtoolkit/connector-editors-bezier is now exposed as initializeBezierConnectorEditors() on @jsplumbtoolkit/browser-ui.

  • initialize() method from previous @jsplumbtoolkit/connector-editors-orthogonal is now exposed as initializeOrthogonalConnectorEditors() on @jsplumbtoolkit/browser-ui.

  • newInstance(params:DialogsOptions) from the previous @jsplumbtoolkit/dialogs-2 package has been removed. To instantiate Toolkit dialogs now, use new Dialogs(params).

  • The HORIZONTAL and VERTICAL axis identifiers from the HierarchicalLayout have been moved into the enum HierarchicalLayoutOrientations.

  • The code from the related -drop package for each library integration (@jsplumbtoolkit/browser-ui-angular-drop etc) has now been pulled into the library integration's main package

Community breaking changes​

  • newInstance method removed from @jsplumb/browser-ui-lists. Use new JsPlumbListManager(instance, params) instead.

  • BeforeStartDetachInterceptor renamed to BeforeStartConnectionDetachInterceptor

  • BeforeDetachInterceptor renamed to BeforeConnectionDetachInterceptor

  • BeforeDropInterceptor renamed to BeforeConnectionDropInterceptor

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.

Not a user of the jsPlumb Toolkit but thinking of checking it out? Head over to https://jsplumbtoolkit.com/trial. It's a good time to get started with jsPlumb.