Changelog
6.81.0
October 14th 2024
Updates
- The inspector component was updated so that it does not write empty strings for values that previously had no value in the data for the object being edited.
- Added JS docs for the
deleteButtonLocationanddeleteButtonClassoptions on an edge editor - When an EdgePathEditor is attached to a surface, dragging a new edge no longer results in a separate path edit action on the undo/redo stack.
- When an edge that has no geometry is deleted and subsequently reinstated via undo/redo, no geometry is written to the edge, so it is in its original state
6.80.0
October 4th 2024
In 6.80.0 we've given our Svelte integration a major overhaul, bringing it up to speed with our Angular, Vue and React integrations.
New functionality
-
Added
SurfaceProvider, an element that provides context for various other elements, allowing things like the miniview or controls components to find the surface to attach to. -
Added
MiniviewComponent, which provides a miniview attached to some surface. -
Added
ControlsComponent, which provides a set of controls with basic operations such as zoom to extents, undo/redo, etc. -
Added
ExportControlsComponent, which provides a set of buttons from which users can export a diagram to SVG, PNG or JPG. -
Added
PaletteComponent, a component from which users can drag new nodes/groups onto the canvas. -
Added
ShapeLibraryPaletteComponent, a specialized version ofPaletteComponentthat renders the contents of a shape library, from which users can drag shapes onto the canvas. -
Added
ShapeComponent, an SVG shape renderer. -
Added
InspectorComponent, a Svelte wrapper around JsPlumb'sInspector. -
Added
EdgeTypePickerComponent, a component that renders samples of a list of edge types, and allows a user to select one. -
The Svelte
SurfaceComponentwill now render a default component for nodes/groups if no explicit mapping is found in the view. This is great for rapid prototyping. -
Added full JS docs for all interfaces in the Svelte integration.
Breaking
-
The props for the Svelte
SurfaceComponenthave changed:renderParamsis nowrenderOptionsviewParamsis nowviewOptionstoolkitParamsis nowmodelOptions
-
You'll now need to use, at a minimum, Svelte 3.55. But we recommend using Svelte 4.
6.72.0
September 24th 2024
The focus of this release was on improving the JS docs, in conjunction with a major upgrade to https://docs.jsplumbtoolkit.com
New functionality
- Added
onVertexAddedinput to AngularShapeLibraryPalettecomponent.
Breaking
- The
AnimationEventsenum was removed and its members (EVENT_END_OVERLAY_ANIMATIONetc) are now just exposed as constants.
6.71.0
September 16th 2024
-
In this release 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 asCONNECTOR_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. -
The
adHocLayoutmethod 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 theadHocLayoutmethod can arbitrarily move any vertex. -
Added optional
dataandurlinputs to thejsplumb-surfacecomponent in the Angular integration. -
Added
CubicBezierConnectoralias toBezierConnector. In 7.xBezierConnectorwill not be present and you'll need to useCubicBezierConnectorinstead -
Added
QuadraticBezierConnectoralias toStateMachineConnector. In 7.xStateMachineConnectorwill not be present and you'll need to useQuadraticBezierConnectorinstead
6.70.1
September 10th 2024
- Fixed an issue with types in the Angular view options. This was not a functionality; in 6.60.2 we inadvertently introduced an issue with types that caused Angular apps to fail to compile unless the component mappings were cast to
any.
6.70.0
September 6th 2024
In 6.70.0 we've added a number of updates to our Vue 3 integration to make it easier to use.
UPDATES
-
None of the Vue 3 components require a
surface-idprop anymore. For the vast majority of apps, having a single surface, that means you can rely on the defaults and remove a bunch of boilerplate from your templates. -
If you do not provide a
componentto map a node or a group, the Vue 3 integration will now use a default component. -
Vue 3's
loadSurfacemethod now makessurfaceIdoptional: if you omit it, JsPlumb will use the default surface id. -
We've added a
ControlsComponentto our Vue 3 integration -
We've added an
ExportControlsComponentto our Vue 3 integration -
We've added an
ExportControlsComponentto our React integration -
Our Vue 3 docs have been updated to be easier to follow and to find the things you need.
-
The
ControlsComponentin the React integration was updated to honour anorientationprop set on it. -
You can pass an optional
typeParameterand/orcategoryParameterto the constructor ofShapeLibraryImpl. This allows you to override the parameters the shape library will use from each vertex's data to resolve the shape to use.
BREAKING
A few components were renamed in the Vue 3 integration:
jsplumb-toolkitis nowSurfaceComponentjsplumb-miniviewis nowMiniviewComponentjsplumb-shapeis nowShapeComponentjsplumb-shape-paletteis nowShapePaletteComponentjsplumb-edge-type-pickeris nowEdgeTypePicker
In the Vue 3 SurfaceComponent:
renderParamswas renamed torenderOptionsviewwas renamed toviewOptionstoolkitParamswas renamed totoolkitOptions
6.60.2
September 3rd 2024
- Updates to Angular apidocs.
6.60.1
September 2nd 2024
- Updates to bundling for Angular evaluation packages
6.60.0
August 26th 2024
UPDATES
- In the Angular integration, it is no longer necessary to supply
toolkitIdandsurfaceIdto the various components. A default value is used when you do not supply a value. This reduces boilerplate code: only an app with more than one surface actually needs to specify the ID of the surface to attach to. BaseNodeComponentin Angular integration has been rewritten to expose the underlying data object as a signal (objSignal).BaseGroupComponentadded to Angular integration. This component is identical toBaseNodeComponentexcept it expects to render a model object of typeGroup.BasePortComponentin Angular integration has been rewritten to expose the underlying data object as a signal (objSignal).
BREAKING
A few classes were renamed in the Angular integration (although note their selectors were unchanged):
jsPlumbSurfaceComponentis nowSurfaceComponentjsPlumbMiniviewComponentis nowMiniviewComponentjsPlumbSurfaceDropComponentis nowSurfaceDropComponentjsPlumbDragDropComponentis nowDragDropComponent- The original
BaseNodeComponentis nowLegacyBaseNodeComponent - The original
BasePortComponentis nowLegacyBasePortComponent
6.50.0
August 23rd 2024
UPDATES
-
The algorithm used to select a Dynamic anchor was adjusted to not add the delta between some anchor and the element's center to its calculations.
-
A new
ShapeComponentwas added to the React integration. This component is functional and takes as a prop thectxthat the Surface passes to the mapping your view. -
The
ShapeLibraryPaletteComponentin the React integration no longer needs to be provided with ashapeLibraryas a prop - it retrieves the shape library from the Surface it is attached to. -
We've introduced a
JsxWrapperPropsinterface to define thectxmember that the surface passes in to JSX mapped in your viewOptions.
BREAKING
-
In the React integration, the original
ShapeComponenthas been renamed toLegacyShapeComponent. -
In
jsplumbtoolkit.css, the.jtk-miniviewclass is now specifiedposition:absoluteinstead ofposition:relative. This better reflects how a miniview is typically used in the majority of UIs.
6.40.0
August 16th 2024
NEW FUNCTIONALITY
6.40.0 sees a big update to our React integration, with the introduction of Contexts and Providers, which will allow you to greatly simplify the code you need to write to create a UI with JsPlumb.
-
SurfaceContextadded to project. A Context that provides a Surface for other components to access. -
SurfaceProvideradded to project. This provides a SurfaceContext. -
SurfaceComponentadded. This is a new version ofJsPlumbToolkitSurfaceComponentwhich is context aware, and which itself can act as a surface provider for other components. -
MiniviewComponentandControlsComponenthave been updated to be functional components, and to be context aware. For the most part these components can now simply be declared in your JSX with no configuration or mounting necessary. -
JsPlumbProvideradded to project. This provides an instance ofJsPlumbToolkitto any descendant components. Although not such a common use case, this provider can be used to render one instance of JsPlumb in multiple surfaces. -
PaletteComponentadded. This is a new, functional, version of the originalSurfaceDropComponent. It is context aware and can discover a Surface provided either from aSurfaceComponentor aSurfaceProvider. -
ShapeLibraryPaletteComponentis now a functional component that is context aware and can function within any context that provides a surface.
UPDATES
-
We've made several improvements to the algorithm that repaints an orthogonal connector when its source or target is moved.
-
Updated the Hierarchy layout to support edges that are from ports on nodes/groups, not just edges from nodes/groups themselves.
-
Added optional
filtertoInspector, allowing you to control which elements the inspector will edit -
Fixed an issue in the
Inspectorwhere in some cases the "active" css class was being added to its container even though there was no object to edit. -
The Angular and React integrations now use a default node/group mapping if you do not provide one in your view. This lets you prototype things more quickly without having to get bogged down in details.
BREAKING
- The default layout for a Surface is now the
AbsoluteLayout, where previously it wasEmptyLayout. - The default endpoint is now
BlankEndpoint, where previously it wasDotEndpoint. - The default anchor is now
Continuous, where previously it wasAnchorLocations.Bottom.
React Integration
In the React integration a few components have been renamed and several marked deprecated, due to the new components discussed below. Specifically, the changes are:
- The original
ShapeLibraryPaletteComponentis nowJsPlumbToolkitShapeLibraryPaletteComponent - The original
ControlsComponentis nowJsPlumbToolkitControlsComponent - The original
MiniviewComponentis nowJsPlumbToolkitMiniviewComponent
It may not be evident that these changes have occurred since for each of the classes renamed we have created new versions with the original names, as functional components that are able to operate inside the SurfaceProvider which was introduced in 6.40.0.
Props and state for each of these components were also renamed - where you see something prefixed with JsPlumbToolkit, you know it's now legacy code and will be removed in a future release.
6.30.0
June 26th 2024
UPDATES
- Fixed issue with port update in Angular integration, when the port was not rendered as a separate component.
6.29.0
June 25th 2024
UPDATES
- We've made some changes to the Angular integration to provide a significant performance enhancement, particularly for larger datasets: the Surface and Miniview are now decoupled from the automatic change detection, and change detection is managed via behind the scenes injection of
ChangeDetectorRefs to node/group/port components. As unlikely as it seems, if this change affects your app negatively, you can setrunInsideAngular="true"as an Input on yourjsplumb-surfaceelement to disable the change. It would also be great if you'd contact us and let us know.
BREAKING
- In light of the change mentioned above, if you use an Angular component as an overlay but you do not extend
BaseAngularOverlayComponent, you will now need to inject aChangeDetectorRefinto your overlay component in order for it to automatically update when its associated Edge is updated.
6.28.0
June 23rd 2024
UPDATES
-
Updated the Angular
ControlsComponentto run change detection after init and avoid a console debug (in dev only) advising that an expression was changed after it had been checked. Although this was never an issue in prod mode, it did also cause Karma to bail out when the test included a ControlsComponent. -
Improved jsDoc for the
jsPlumbToolkitTestHarnessclass.
6.27.0
June 20th 2024
UPDATES
- The Surface canvas now supports "auto pan": when a vertex is dragged outside the visible area, the canvas is panned such that the vertex is still visible.
- Updates to the Hierarchy layout to better support edge routing when there is more than one root.
- The
PanButtonsPluginhas been resurrected. - Updated the React
ControlsComponentto not add a 'lasso' button when no associated plugin is registered on the surface.
6.26.0
June 18th 2024
UPDATES
- Updates to the Hierarchy layout to support groups which themselves do not have outgoing edges but which have one or more child vertices that do.
- Added
alignContent,alignContentTop,alignContentLeft,alignContentRightandalignContentBottommethods to Surface. - Fixed issue with the React ControlsComponent not firing events for custom buttons.
- Added support for optional
alignXandalignYarguments to thezoomToFitandzoomToFitIfNecessarymethods on the Surface.
6.25.0
June 11th 2024
- Fixed an evaluation packaging issue with 6.24.0
6.24.0
June 6th 2024
NEW FUNCTIONALITY
Vertex Drawing Plugin
This plugin allows your users to draw new nodes/groups onto the canvas with the mouse or with touch events, and lasso existing objects on the canvas to add to new groups. It can be used stand alone, or fully integrated with a shape library palette. It's super cool and useful.
ControlsComponent
- Added support for optionally hiding the zoom to extents, clear, and undo/redo buttons.
- Added support for an optional list of extra buttons to render alongside the default buttons
- Added support for an optional
orientationparameter, allowing you to draw the controls as a column instead of a row.
Angular Integration
- Added support for injecting values into @Inputs on nodes/group components from inside your view.
Shape Libraries
-
In a
ShapeSetyou can now mark individual shape types as mapping to groups in your UI instead of just nodes. So theShapeLibraryPalettecan now allow your users to drag and drop new groups onto the canvas. -
The
ShapeLibraryPalettenow allows you to providefillandoutlinein thedataGenerator. Previously these values were overwritten by the palette's class-level defaults. -
You can show labels on icons in a shape library palette now, via the
showLabels:truesetting. Read more about this in the shape library palette docs linked below.
SVG/PNG/JPG Export
-
SVG/PNG/JPG export now supports exporting groups.
-
We've wrapped up the SVG/PNG/JPG export functionality from our flowchart starter app into a new component -
ExportControlsComponent.
Layouts
-
The
GridLayoutwas updated so that if there is only a single row/column of content, the entries are allowed to take up different heights/widths, meaning they are grouped together. Previously in a grid layout with a single row or column, each entry was allotted the same amount of space as the largest entry, which is fine when there is actually a grid but not the best aesthetically when there's only a single row or column. -
We've added
RowLayoutandColumnLayout, which are specialized instances ofGridLayoutwith the appropriate orientation and limits on row count/column count set for you. These layouts can of course be achieved via appropriate options on aGridLayout: they are wrappers for convenience.
Element dragging
- Added support for
elementsDraggable:booleanin group definitions. You can set this to false to prevent child members of some group from being draggable. By default this flag is set totrue, meaning child members of a group are draggable within the group.
Drawing Tools
- The drawing tools plugin can now trigger resize of an elastic group, if the current vertex is a child of an elastic group. See this in action in our network topology diagram demonstration.