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

JavaScript diagramming library

<p>The <code>'metro'</code> router is a modification of the <code>'manhattan'</code> <a href="#routers.manhattan">router</a> that produces an octolinear route (i.e. a route consisting of orthogonal and diagonal line segments, akin to the London Underground map design). It also avoids obstacles, and accepts the same <code>router.args</code> as <code>'manhattan'</code>, with a few modifications:</p>

<table>
    <tr>
        <th>maximumLoops</th>
        <td><i>number</i></td>
        <td>Does not use the <code>'orthogonal'</code> router as fallback if path cannot to be found in the given number of iterations. Instead, a custom octolinear fallback route is used that does not avoid obstacles.</td>
    </tr>
    <tr>
        <th>maxAllowedDirectionChange</th>
        <td><i>number</i></td>
        <td>Default changes to <code>45</code>.</td>
    </tr>
    <tr>
        <th>startDirection</th>
        <td><i>Array&lt;string&gt;</i></td>
        <td>Same as <code>'manhattan'</code> (i.e. only the four orthogonal directions are accepted as start directions).</td>
    </tr>
    <tr>
        <th>endDirection</th>
        <td><i>Array&lt;string&gt;</i></td>
        <td>Same as <code>'manhattan'</code> (i.e. only the four orthogonal directions are accepted as end directions).</td>
    </tr>
</table>

<p>Example:</p>

<pre><code>link.router('metro', {
    excludeEnds: ['source'],
    excludeTypes: ['myNamespace.MyCommentElement'],
    startDirections: ['top'],
    endDirections: ['bottom']
});</code></pre>