75 posts tagged with "toolkit"

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.

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:

Release 6.30.0 contains a small update to the Angular integration that fixes an issue that can arise when updating ports inside an Angular component that were not rendered via the BasePortComponent. An example of that can be seen in our Angular Chatbot demo.