The Toolkit offers a number of Angular components that you can drop straight in to your app.

The ability to map a node/group type to an Angular component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Angular offers.

Our jsPlumb Angular service can be injected anywhere in your app and offers access not only to Toolkit instances and surfaces, but also SVG/PNG/JPG export and a get/set data storage mechanism.

In our demo applications repository you can find our Angular flowchart, chatbot, schema builder and mindmap.

The Toolkit offers a number of React components that you can drop straight in to your app. Both component based and Hooks based UIs are supported seamlessly.

The ability to map a node/group type to a React component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power React offers.

In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap.

We offer tight integration with both Vue 2 and Vue 3, including Vue 3's composition API. The ability to map a node/group type to a Vue component means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Vue offers.

In our demo applications repository you can find our React flowchart, chatbot, schema builder and mindmap.

We're big fans of Svelte ourselves and are pleased to offer a solid integration between the Toolkit and Svelte. The ability to map a node/group type to Svelte components means you can rapidly build very complex interfaces with great isolation of concerns, and take advantage of all the underlying power Svelte offers.

In our demo applications repository you can find our Svelte flowchart, chatbot, schema builder and mindmap.

The Toolkit ships with four popular automatic positioning layouts:

• Force directed
• Circular
• Hierarchy
• Balloon

As well as an Absolute layout, in which the elements of your UI are positioned according to left/top values in the data model.

Many rich graphical UI applications offer the user the ability to manage the position of the elements themselves, making the Absolute layout a common choice, but when a user has not placed an element you'll need to use an automatic placement layout to put that element somewhere.

All of the Toolkit's layouts have the feature of being backed by the Absolute layout - meaning, if a user has chosen where an element should go, it goes there, and if they haven't, it gets placed automatically. Best of both worlds!

Creating a custom layout is a straightforward process - extend AbstractLayout, implement a few lifecycle methods, and don't forget to tell the Toolkit when you're done!

A great example of the ease with which this can be achieved is demonstrated by our mindmap builder, for which there are versions in vanilla Javascript, Angular, React, Vue 2, Vue 3 and Svelte.

At various points in the lifecycle of the UI you can trigger a magnetizer to make minor adjustments to the positions of your nodes and groups.

The default behaviour of the magnetizer is to treat every node/group as a charged magnetic particle and to push them all away from each other.

You can magnetize around some specific point in the canvas, or around some element, or at the position identified by some mouse event. You can also run the magnetizer in "gather" mode, in which elements are drawn in to gather around some specific location.

The Toolkit's surface widget provides a canvas with infinite pan onto which your nodes, edges and groups are rendered.

• Infinite pan
• Zoom with mouse wheel or pinch on touch devices
• Clamp pan/zoom so content never disappears from view
• Numerous plugins supported (drawing tools, miniview, pan buttons, backgrounds)
• Comprehensive set of events published

The miniview plugin for the surface component tracks the nodes and groups in your canvas, allowing you to see the whole dataset at a glance. A panner shows how the visible area of the canvas maps to the full dataset, and you can pan and zoom directly on the miniview to control the surface.

We use the miniview plugin in many of our demos - the flowchart builder, chatbot, mindmap builder and many more.

Use any markup of your choice to render a set of items that you want to enable your users to drag onto your canvas.

Then create a SurfaceDropManager, give it a CSS selector that identifies what should be draggable, and you're done!

The drop manager can be configured to allow drop on the canvas and/ onto nodes, groups and edges. You can switch it on and off with a single method call, and we ship wrapper components for all of our library integrations - Angular, Svelte, React, Vue 2 and Vue3.

This helper component can either be dropped directly into your app or used as a basis for your own implementation. Manage surface mode, lasso, undo/redo all in one place.

The controls component is very easily skinned via CSS, and we ship a component version of it for Angular, Vue and React.

Originally written for our demonstration pages, the Toolkit's Dialogs are a lightweight solution that integrate nicely with the data model and the Surface widget.

Each dialog consists of some HTML that you create, and you map input fields to fields in your data via a set of attributes. Easily styled and easy to integrate.

Inspectors listen for selection events on an underlying Toolkit, and then provide your users

Sometimes you'll build a UI with the Toolkit that has some elements which are not on your canvas but which you would like your users to be able to drag around. We had this requirement ourselves recently while building our Neighbourhood views demonstration, so we created the Element Dragger to help with the task.

Features include:

• Optional filter to denote parts of your element that should not kick off a drag
• Optional constrain function, to implement fine grained control over where your users can drag elements to
• Optional containment specifier - limit drag to parent element, either fully or partially, and optionally prevent dragging into the negative axis.

The Toolkit thinks of the world in terms of nodes, groups, ports and edges, all of which belong to a graph.

You can query the graph and operate on it without concerning yourself with the UI, knowing that the Toolkit will keep everything in sync.

Want to know if some node is connected to another? Easily done. Or maybe you want to find the shortest path from some node to another node? Find all the edges for which some element is the source? The Toolkit can tell you all of these things.

Every operation in the Toolkit is pushed onto an undo/redo stack, which, by default, has a limitless size, although you can specify a maximum if you'd like to.

A full set of events is fired by the Toolkit in response to operations on the undo/redo stack, allowing you to very easily maintain the state of any UI components you've got linked to it.

Undo stacks of a fixed size, when full, can either reject new operations, replace the most recent operation, or throw away the oldest operation to accomodate a new one.

Undo/redo is used in many of our demonstrations.

Rich graphical UIs are complex beasts, involving a lot of moving parts. When a user changes one thing in the UI it often causes a bunch of other stuff to update too.

For instance, say you delete a shape in a diagram. Any edges attached to that shape must also be deleted, and the Toolkit wraps all of those deletions into a single transaction, so that the entire operation can be undone at once.

The Toolkit automatically wraps several other common operations inside transactions, but you can also access the transaction API yourself. Maybe you want to move a bunch of nodes around, update the properties of some of them, add a new edge - you can do all of that in one atomic operation via the Toolkit's transaction API.

The Toolkit has a graph at its core, allowing you to ask questions like "what is the shortest path from A to B?" or "is C connected to D?" and so on. Once you have a path object, you can instruct the surface widget to animate an overlay along it - with a full transport mechanism available.

Baked right in to the Toolkit's data model is the concept of a Selection - a set of one or more nodes, groups and edges. The Toolkit offers a full set of methods to select objects and to then perform operations on the set as a whole - you can update everything in the selection at once, delete everything, iterate through the objects - selections are very powerful.

The surface widget can be created with a selection as its data source, allowing you to display some subset of the entire dataset but with the ability to apply a layout and to pan/zoom the content. When you create a selection with a generator function, you can subsequently reload the selection and the surface will update itself accordingly.

We use the concept of a selection as a surface's datasource in our Neighbourhood views demonstration, in which we have four popups that are each driven by a selection, and which listen to selection events from the Toolkit. When the user clicks on an element, each of the selections is reloaded and the popups seamlessly keep themselves up to date.

The Toolkit contains an implementation of an Inverted Index, which is a data structure used at the core of most search engines. It offers fast retrieval and random access.

Full text search of all your domain objects - nodes, groups and/or edges - is offered, across either all fields or a set of fields of your choice.

Copy and paste is built in to the surface widget, with an easy to use API. Grab a set of nodes, groups and/or edges from one part of your diagram, copy them to the clipboard, and then paste them elsewhere. The surface will clone all of the items in the clipboard and place them in your new location.

When pasting the contents of the clipboard you can specify an x/y location yourself, or you can provide a mouse event, which the surface will automatically map to a location on the canvas.

Groups - to an arbitrary depth - are, by default, copied with copies of all of their child elements.

The clipboard offers in-depth control over how edges are pasted - what happens if you have an edge in your clipboard but not both of the nodes it is attached to? The Toolkit's clipboard provides a detailed API for handling every case.

A shape library is a set of named shapes that you will use to render SVG inside the vertices in your application. These are an ideal solution for all sorts of diagrams.

Drag the corners of nodes and groups to resize them using the Drawing Tools plugin.

Touch events are supported without any intervention required. Easily skinned via CSS.

With the lasso plugin you can snag a set of nodes, groups and/or edges and have them automatically added to the Toolkit's current selection.

Items added to the current selection will be automatically detected by various other parts of the Toolkit's ecosystem - the surface will add CSS classes in response, and any attached inspectors will respond too.

Use the lasso in standard mode as shown above, or in "mask" mode - the inverse of the image above, where the unselected parts of the UI are masked.

Nodes and groups snagged by the lasso are automatically added to the surface's current drag group.

The Toolkit's powerful and intuitive path editors enable you to fine tune the appearance of your applications and diagrams.

Touch events are fully supported with no extra libraries or setup required.

The snaplines plugin draws snaplines on the canvas when elements are within some threshold, helping your users to get their diagram layouts just so. As with all our plugins, the Snaplines plugin is easily skinned via CSS.