jointjs/docs/src/joint/api/routers/custom.html

JavaScript diagramming library

<p>New routers can be defined in the <code>joint.routers</code> namespace (e.g. <code>joint.routers.myRouter</code>) or passed directly as a function to the <code>router</code> property of a link (or to the <code>defaultRouter</code> <a href="#dia.Paper.prototype.options.defaultRouter">option of a paper</a>).</p>

<p>In either case, the router function must return an array of route points that the link should go through (not including the start/end connection points). The function is expected to have the form <code>function(vertices, args, linkView)</code>:</p>

<table>
    <tr>
        <th>vertices</th>
        <td><i>Array&lt;g.Point&gt;</i></td>
        <td>The vertices of the route.</td>
    </tr>
    <tr>
        <th>args</th>
        <td><i>object</i></td>
        <td>An object with additional optional arguments passed to the router method by the user when it was called (the <code>args</code> property).</td>
    </tr>
    <tr>
        <th>linkView</th>
        <td><i>dia.LinkView</i></td>
        <td>The LinkView of the connection. The Link model can be accessed as the <code>model</code> property; this may be useful for writing conditional logic based on link attributes.</td>
    </tr>
</table>

<p>Example of a router defined in the <code>joint.routers</code> namespace:</p>

<pre><code>joint.routers.randomWalk = function(vertices, args, linkView) {

    var NUM_BOUNCES = args.numBounces || 20;

    vertices = joint.util.toArray(vertices).map(g.Point);

    for (var i = 0; i < NUM_BOUNCES; i++) {

        var sourceCorner = linkView.sourceBBox.center();
        var targetCorner = linkView.targetBBox.center();

        var randomPoint = g.Point.random(sourceCorner.x, targetCorner.x, sourceCorner.y, targetCorner.y);
        vertices.push(randomPoint)
    }

    return vertices;
}

var link = new joint.shapes.standard.Link();
link.source(source);
link.target(target);

link.router('randomWalk', {
    numBounces: 10
});</code></pre>

<p>An example of a router passed as a function is provided below. Notice that this approach does not enable passing custom <code>args</code> nor can it be serialized with the <code>graph.toJSON()</code> <a href="#dia.Graph.prototype.toJSON">function</a>.</p>

<pre><code>var link = new joint.shapes.standard.Link();
link.source(source);
link.target(target);

link.router(function(vertices, args, linkView) {

    var NUM_BOUNCES = 20;

    vertices = joint.util.toArray(vertices).map(g.Point);

    for (var i = 0; i < NUM_BOUNCES; i++) {

        var sourceCorner = linkView.sourceBBox.center();
        var targetCorner = linkView.targetBBox.center();

        var randomPoint = g.Point.random(sourceCorner.x, targetCorner.x, sourceCorner.y, targetCorner.y);
        vertices.push(randomPoint)
    }

    return vertices;
});</code></pre>