From version 1.0.3, the Toolkit supports tracing a path between a given source and target node using an Overlay.
// setup two nodes and connect
var toolkit = jsPlumbToolkit.newInstance();
var renderer = toolkit.render({
container:"myElement"
});
toolkit.load({
data:{
nodes: [ a bunch of nodes. let's pretend they have IDs from 1 - 34 ],
edges:[ a bunch of edges ]
}
});
var traced = renderer.tracePath({
source:1,
target:23,
overlay:"Arrow"
});
if (!traced) alert("There was no such path");
In this example we've attempted to trace an arrow overlay along the shortest path from node 1 to node 23, using the default animation options, which are:
You can change the default animation options if you need to:
var traced = renderer.tracePath({
source:1,
target:23,
overlay:"Arrow",
options:{
speed: 25, // pixels per second
rate: 60 // frames per second
dwell: 50 // dwell on intermediate elements for 50 milliseconds
}
});
The two examples given so far do not mandate any specific Path to travel from the source to the target, so the Toolkit will pick the shortest path (which is controlled by both number of hops and edge cost if you have provided that for any of your edges). However, you can supply any Path to this method, should you want to.
To get a Path that is not the shortest path you will need to make use of a nodeFilter
and/or edgeFilter
when you
call getPath
on some Toolkit instance, as discussed on this page. An example:
var path = toolkit.getPath({
source:1,
target:23,
edgeFilter:function(edge) {
return !edge.data.type == "aTypeIWouldIgnore"
}
});
This path can then be passed to tracePath
instead of providing a source
and target
:
renderer.tracePath({
path:path,
overlay:"Arrow",
options:{
speed: 25, // pixels per second
rate: 60 // frames per second
dwell: 50 // dwell on intermediate elements for 50 milliseconds
}
});
During the lifetime of a path traversal, the following classes are used:
Class | Assigned To | Purpose |
---|---|---|
jtk-animate-node-traversing | Nodes | Indicates the path is currently dwelling on the given Node |
jtk-animate-edge-traversing | EdgesIndicates the Edge is currently being traversed |
These events will be fired by the renderer during a path traversal:
Event | Description | Parameters |
---|---|---|
startOverlayAnimation | Fired at the beginning of the traversal. | connection:Connection |
endOverlayAnimation | Fired at the very end of the traversal. | connection:Connection |
startNodeTraversal | Fired when a node has been reached and is being traversed. | {connection:Connection, element:DOM Element} |
endNodeTraversal | Fired at the end of traversing a Node. | {connection:Connection, element:DOM Element} |