Port support in Community Edition 4.x Port support in Community Edition 4.x
25 Aug 2020
Nested group support in Community Edition 4.x Nested group support in Community Edition 4.x
28 Jul 2020
Community Edition 4.x Beta Release Community Edition 4.x Beta Release
20 Jun 2020
World Cup 2018, Part 2 World Cup 2018, Part 2
26 Jun 2018
World Cup 2018, Part 1 World Cup 2018, Part 1
25 Jun 2018
Community Edition 2.2.2 Release Community Edition 2.2.2 Release
20 Oct 2016
Connecting SVG Shapes (Raphael, Highcharts etc) (update) Connecting SVG Shapes (Raphael, Highcharts etc) (update)
20 Oct 2016
Writing a Layout Decorator Writing a Layout Decorator
25 Jul 2015
Toolkit Edition 1.0.0 Toolkit Edition 1.0.0
23 Jul 2015
Community Edition 1.7.6 Community Edition 1.7.6
23 Jul 2015
Connecting SVG Shapes (Raphael, Highcharts etc) Connecting SVG Shapes (Raphael, Highcharts etc)
22 Jul 2015
The beforeDrag Interceptor The beforeDrag Interceptor
15 Jan 2015
Integrating Jekyll and YUIDoc Integrating Jekyll and YUIDoc
28 Jan 2014
Dragging Multiple Elements Dragging Multiple Elements
17 Jan 2014
Custom Connectors Custom Connectors
22 Dec 2013

Port support in Community Edition 4.x

The Toolkit edition of jsPlumb has, since its first release, had support for the concept of "ports" - logical connection points on nodes or groups. Consider, for instance, a question node in a flowchart:

There are two outputs here - "yes" and "no". In the Toolkit edition we can address each of these individually:

toolkit.connect({
    source:"myNode.yes",
    target:"myOtherNode"
})

In addition, using the Toolkit's template mechanism (or Angular/Vue/React), we can setup the UI to make use of these ports. For instance, this might be the template for some node that has a separate area to drag a "yes" edge or a "no" edge:

<div>
    <div class="yesDragArea"></div>
    <div class="noDragArea"></div>
    <jtk-source port-id="yes" filter=".yesDragArea"></jtk-source>
    <jtk-source port-id="no" filter=".noDragArea"></jtk-source>
</div>

The equivalent to a jtk-source element in the Community edition is the makeSource method. So imagine you'd rendered a node like this:

<div>
    <div class="yesDragArea"></div>
    <div class="noDragArea"></div>
</div>

You could then use makeSource to configure each of these:

jsPlumbInstance.makeSource(someElement, {
    filter:".yesDragArea",
    parameters:{
        type:"yes"
    }
});

jsPlumbInstance.makeSource(someElement, {
    filter:".noDragArea",
    parameters:{
        type:"no"
    }
});

Note how we use the parameters option of makeSource to provide some context for the connection dragging. This is roughly modelling the 'ports' concept from the Toolkit edition.

Community Edition Limitations

There are a couple of things you cannot currently do in the Community edition with this stuff:

  • connect the 'yes' or 'no' area to some other element programmatically
  • configure multiple target areas on some element

The first limitation is directly due to the lack of some scheme to address the 'yes' or 'no' area. The second is kind of related.

Ports in 4.x Community

From release 4.0.0-RC19 of the 4.x branch of the Community Edition now supports the concept of "ports", with which the limitations listed above can be overcome. Let's first rewrite the makeSource calls from above:

jsPlumbInstance.makeSource(someElement, {
    filter:".yesDragArea",
    portId:"yes"
});

jsPlumbInstance.makeSource(someElement, {
    filter:".noDragArea",
    portId:"no"
});

With this, we can now programmatically address each of these areas, for instance:

jsPlumbInstance.connect({
    source:someElement,
    target:someOtherElement,
    ports:["yes", null]
});

Here we've connected the "yes" port of someElement to someOtherElement, via the ports array:

ports:[ "yes", null ]

A value of null means "connect to the element". You might have guessed, though, that if we''ve come this far, perhaps we can also associate a port with a makeTarget:

jsPlumbInstance.makeTarget(someOtherElement, {
    portId:"input1",
    filter:".someSelector"
});

There are two new concepts for makeTarget shown here:

  • portId allows us to associate some logical port with part of the element
  • filter allows us to restrict where connections can be dropped on the element

So here we''ve configured someOtherElement to accept connections dropped on any part of the element that matches .someSelector, and when a connection is dropped there, it is associated with the logical port input.

We can now programmatically connect our two elements:

jsPlumbInstance.connect({
    source:someElement,
    target:someOtherElement,
    ports:["yes", "input"]
});