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.

Angular Performance​

In release 6.29.0 we have refactored our Angular integration to provide a significant performance enhancement, particularly with large datasets, by decoupling the setup for the Surface and Miniview components from Angular's change detection.

You can switch off this change via a [runInsideAngular="true"] input on the surface or miniview components, but if you find yourself needing to do that we'd be interested in hearing more about the specific use case.

At the time of writing, JsPlumb has a test suite consisting of almost 11 000 unit tests, covering every aspect of the library including its integrations with Angular, React, Vue and Svelte. We like having this many unit tests: it gives us confidence both in the quality of the library and in making updates. When we develop new features we first add a bunch of tests that break and then we update the code until our new tests - and all of the tests we had previously - work.

How do you test a UI built with JsPlumb, though? What are the sorts of things you might like to test? A non-exhaustive list:

• Are my nodes/groups being rendered the way I expect?
• Can users drag edges in the way I expect them to be able to?
• Is node dragging behaving the way I expect?
• Can users edit nodes with an inspector?
• Are events firing in the way I expect?
• Is the integrity of my dataset ok?

Unit testing​

Release 6.28.0 see the addition of our jsPlumbToolkitTestHarness class to JsPlumb's public API. This is an extremely useful helper class you can use to manage model-level manipulations of your JsPlumb setup inside unit/component tests.

Auto pan​

The Surface component will now, by default, automatically pan the canvas when a node or group is dragged out of the visible area. This is a great new feature that will improve the UX for your users.

Try dragging the nodes in the canvas below - the black border marks the edge of the canvas. When a node reaches the border, the canvas is panned:

HierarchyLayout​

• The Hierarchy layout has been updated to support groups which themselves do not have outgoing edges but which have one or more child vertices that do:

Release 6.25.0 is a minor release that contains an update to how evaluation bundles are packaged. No functionality was added or changed between 6.24.0 and 6.25.0.

6.24.0 has turned out to be quite a large release, with a lot of useful new functionality. Here's the high level overview of what's now available:

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 - check it out in the new Network Topology Demonstration

html2canvas is a project that's been around for quite some time now and over the years we've seen people have varying degrees of success using it with JsPlumb. This week we decided to take a look and see if we could get it to work, and the good news is that we could... except with one minor caveat: you'll have to use our patched version of the library (@jsplumb/html2canvas). More on that below.

Drag the boxes around until you have something you like and then hit Export. The contents of the JsPlumb instance will be rendered into a canvas element below.