Font Awesome, jsplumbtoolkit-demo.css, and app.css are used for this demo and are not jsPlumb Toolkit requirements. jsplumbtoolkit-defaults.css is recommended for
all apps using the Toolkit, at least when you first start to build your app. This stylesheet contains sane defaults for the various widgets in the Toolkit.

Creating the Toolkit instance

Data Loading

Nodes for this demonstration consist of a list of Ports, each of which has the name of two animals randomly selected
from a list. The code to generate Nodes is as follows (but note that this code is demo-specific; it exists purely
for this demo):

View

There is a single Node type ("default") defined, mapped to the template shown above, and a single Edge, which contains
rendering instructions for the Connector, its Endpoints, and the type of Anchor to use.

Active Filtering

The activeFiltering:true parameter set on the render call instructs the Surface to invoke the beforeConnect function
declared on the Toolkit for every combination of Node/Port whenever the user starts to drag a new Edge. Whenever
beforeConnect does not return true, the related target is disabled.

beforeConnect

beforeConnect:function(source,target){// ignore node->node connections; our UI is not configured to produce them. we could catch it and// return false, though, which would ensure that nodes could not be connected programmatically.if(source.objectType!=="Node"&&target.objectType!=="Node"){// cannot create loopback connectionsif(source===target){returnfalse;}// cannot connect to Ports on the same Node as the Edge sourceif(source.getNode()===target.getNode()){returnfalse;}varsourceData=source.getNode().data,targetData=target.getNode().data;// attempt to match animals.varsourceItem=sourceData.items[source.id];vartargetItem=targetData.items[target.id];if(sourceItem.entries&&targetItem.entries){for(vari=0;i<sourceItem.entries.length;i++){if(targetItem.entries.indexOf(sourceItem.entries[i])!==-1){returntrue;}}}returnfalse;}}

CSS

In this demonstration, disabled targets are made more transparent and their text color is changed to light grey. This is
achieved via a CSS class:

.jtk-target-disabled{color:#999;opacity:0.3;outline:none;}

jtk-target-disabled is set on a connection target by jsPlumb whenever the target is disabled.

Adding New Nodes

The + button in the top left corner can be used to add a new Node. Here's the code that sets up the listener and
adds the new Node:

//// assign a class to a new node which brings the user's attention to it. then a little while later,// take it off.//functionflash(el){jsPlumb.addClass(el,"hl");setTimeout(function(){jsPlumb.removeClass(el,"hl");},1950);}jsPlumb.on(mainElement,"tap","[add]",function(){varnode=newNode();renderer.zoomToFit();flash(renderer.getRenderedElement(node));});

We add the Node to the data model first via the newNode function we saw above. Then we instruct the Surface to resize
so it fits all the content, and then we use getRenderedElement(node) on our Surface widget to retrieve the DOM
element that was rendered for the given Node. We then use a little helper function to draw the user's attention to
the new Node.

The tap listener extracts the desired mode from the button that was clicked and sets it on the renderer. This causes
a modeChanged event to be fired, which is picked up by the modeChanged event listener in the View.

Note that here we could have used a click listener, but tap works better for mobile devices.

Lasso Operation

The lasso works in two ways: when you drag from left to right, any node that intersects your lasso will be selected. When you drag from right to left, only nodes that are enclosed by your lasso will be selected.

Exiting Select Mode

The Surface widget automatically exits select mode once the user has selected something. In this application we also listen to clicks on the whitespace in the widget and switch back to pan mode when we detect one. This is the events argument to the render call:

events:{canvasClick:function(e){toolkit.clearSelection();}}

clearSelection clears the current selection and switches back to Pan mode.