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.

Release 5.13.1 of JsPlumb Toolkit is now available. This is a minor release consisting mainly of updates to the Hierarchy layout that came about through work on our series of World Cup visualizations.

Breaking changes​

• The Group class's getAllEdges method does not return edges connected to children of the group as of this release; this method behaves the same for Group as it does for Node now. It's not very likely that users of the API would be using this method.

Updates​

• We made some improvements to the way the Hierarchy layout places elements when invert is switched on.
• We added a groupUnattachedRoots flag to the options for the Hierarchy layout. When a dataset contains one or more elements that have no child elements, the layout will ordinarily place these elements such that they do not intersect the area that the space child elements of the previous root take up. But when groupUnattachedRoots is set, these root nodes will be placed next to the previous root node. You can see this behaviour in the high level tournament view from our World Cup site:

Today we released version 5.10.8 of the Toolkit edition of JsPlumb. In fact we're released a few versions in rapid succession as we've honed the API for a new piece of functionality: generated grid backgrounds.

We're excited to have added this functionality to JsPlumb - it provides a polish to applications using JsPlumb with an extremely easy to use API. The backgrounds themselves consist of a single SVG element with a repeated pattern, and so are very performant.

The full documentation for generated grid backgrounds can be found here

But here's a quick example:

One of the core concepts when working with components in Angular is that of @Inputs and @Outputs. For instance, maybe you have some component that expects to be told what text to use as its title, and which will output an event when the user clicks a button:

@Component({
    selector:"app-my-component",
    template:`
        <div>
            <h1>{{title}}</h1>
            <button class="btnEmit" (click)="emitEvent('test')">Click Me</button>
        </div>    
    `
})
export class MyComponent {
  @Input() title:string

  @Output() outputEvent = new EventEmitter<string>()

  emitEvent(value:string) {
    this.outputEvent.emit(value)
  }
}

From version 5.6.2, JsPlumb's Angular integration now offers a couple of ways of working with these that earlier versions did not support.

The jsPlumb Toolkit has five connector types available:

• Bezier
• Straight
• Orthogonal
• StateMachine
• Segmented

Together these connectors cater for quite a few use cases, but if none of these are exactly what you need, it is possible to define your own custom connectors. In this post we'll take a look at how to do that, by defining a connector that provides a line taking the form of a triangle wave between its two endpoints.

Version 5.4.0 of the JsPlumb Toolkit has support for a new concept - the ability to specify at drag start/stop what the location of an anchor should be. This functionality is exposed to users of the Toolkit edition by supporting anchorPositionFinder values in the view.

After several months of development we are pleased to announce that version 5.0.0 of both the Toolkit and Community editions of JsPlumb have recently been released. The 5.x releases are:

• smaller
• faster
• tree shakeable
• better documented

and offer a simpler, more standardised API - without sacrificing any features. The new codebase for JsPlumb provides a solid platform for us to go on and build the next evolution.

Following on from part 1 of this series, in which we created a visualisation for the progress of each of the group stages, in today's installment we're going to take a look at drawing the post-group stages using JsPlumb's Hierarchical layout.

It's world cup time again and I've been looking for a good overview of how it's all progressing in the group stages. Being a computer programmer I of course spent a small amount of time looking for one done by someone else, and then decided to just do it myself. With the trusty jsPlumb Toolkit at my disposal I figure it'll be a doddle.