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.

Data Loading

View

In the View, we configure the appearance of Edges and Nodes, and we also handle node clicks to instigate
path traversals. See below for a discussion of how path traversals are handler.

varview={edges:{"default":{paintStyle:{lineWidth:1,strokeStyle:'#89bcde'},overlays:[["Arrow",{fillStyle:"#89bcde",width:10,length:10,location:1}]]},"bidirectional":{overlays:[["Arrow",{fillStyle:"#89bcde",width:10,length:10,location:0,direction:-1}]]}},nodes:{"default":{events:{tap:function(params){// on node click...if(source==null){//... either set the current path source. here we also add a class// so you can see its selected.source=params;jsPlumb.addClass(source.el,"jtk-animate-source");}else{// ...or trace a path from the current source to the clicked node.vartraced=renderer.tracePath({source:source.node,target:params.node,overlay:["Diamond",{width:15,length:15,fillStyle:"#89bcde"}],options:{speed:250}});// cleanup the source for the next one.jsPlumb.removeClass(source.el,"jtk-animate-source");source=null;if(!traced){alert("No path found!");}}}}}}};

Path Tracing

when a user taps a node and no previous node has been selected, that node becomes the source

when a user taps a node and there is already a source selected, the path is computed and traversed.

The tap event is captured and handled inside the view:

tap:function(params){// on node click...if(source==null){//... either set the current path source. here we also add a class// so you can see its selected.source=params;jsPlumb.addClass(source.el,"jtk-animate-source");}else{// ...or trace a path from the current source to the clicked node.vartraced=renderer.tracePath({source:source.node,target:params.node,overlay:["Diamond",{width:15,length:15,fillStyle:"#89bcde"}],options:{speed:250}});// cleanup the source for the next one.jsPlumb.removeClass(source.el,"jtk-animate-source");source=null;if(!traced){alert("No path found!");}}}