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:
- 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"
}
- 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.
- 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):
- Update dependencies
Previously:
"dependencies": {
"@jsplumb/browser-ui": "^5.0.0",
"@jsplumb/connector-flowchart": "^5.0.0"
},
Now:
"dependencies": {
"@jsplumb/browser-ui": "^6.0.0"
},
- 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 previoustemplates-2
,dialogs-2
andbrowser-ui-vanilla-2
packages has been retained in the@jsplumbtoolkit/browser-ui
package, and the code fromtemplates
,dialogs
andbrowser-ui-vanilla
has been dropped.The
Spring
layout has been removed. UseForceDirected
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. Usenew SurfaceAnimator(surface)
instead.createManager
in previous@jsplumbtoolkit/drop
package is now exposed ascreateDropManager
in@jsplumbtoolkit/browser-ui
createSurfaceManager
in previous@jsplumbtoolkit/drop
package is now exposed ascreateSurfaceDropManager
in@jsplumbtoolkit/browser-ui
newInstance(surface:Surface, options?:ConnectorEditorOptions)
from previous@jsplumbtoolkit/connector-editors
method removed - usenew EdgePathEditor(surface:Surface, options?:ConnectorEditorOptions)
instead.initialize()
method from previous@jsplumbtoolkit/connector-editors-bezier
is now exposed asinitializeBezierConnectorEditors()
on@jsplumbtoolkit/browser-ui
.initialize()
method from previous@jsplumbtoolkit/connector-editors-orthogonal
is now exposed asinitializeOrthogonalConnectorEditors()
on@jsplumbtoolkit/browser-ui
.newInstance(params:DialogsOptions)
from the previous@jsplumbtoolkit/dialogs-2
package has been removed. To instantiate Toolkit dialogs now, usenew Dialogs(params)
.The
HORIZONTAL
andVERTICAL
axis identifiers from theHierarchicalLayout
have been moved into the enumHierarchicalLayoutOrientations
.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
. Usenew JsPlumbListManager(instance, params)
instead.BeforeStartDetachInterceptor
renamed toBeforeStartConnectionDetachInterceptor
BeforeDetachInterceptor
renamed toBeforeConnectionDetachInterceptor
BeforeDropInterceptor
renamed toBeforeConnectionDropInterceptor
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.