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

JavaScript diagramming library

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

<p>In either case, the connector function must return a <a href="geometry.html#g.Path">g.Path</a> representing the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d">SVG path data</a> that will be used to render the link. The function is expected to have the form <code>function(sourcePoint, targetPoint, routePoints, args)</code>:</p>

<table>
    <tr>
        <th>sourcePoint</th>
        <td><i>g.Point</i></td>
        <td>The source connection point.</td>
    </tr>
    <tr>
        <th>targetPoint</th>
        <td><i>g.Point</i></td>
        <td>The target connection point.</td>
    </tr>
    <tr>
        <th>routePoints</th>
        <td><i>Array&lt;g.Point&gt;</i></td>
        <td>The points of the route, as returned by the router in use.</td>
    </tr>
    <tr>
        <th>args</th>
        <td><i>object</i></td>
        <td>An object with additional optional arguments passed to the connector method by the user when it was called (the <code>args</code> property).</td>
    </tr>
</table>

<p>Example of a connector defined in the <code>joint.connectors</code> namespace:</p>

<pre><code>joint.connectors.wobble = function(sourcePoint, targetPoint, vertices, args) {

    var SPREAD = args.spread || 20;

    var points = vertices.concat(targetPoint)
    var prev = sourcePoint;
    var path = new g.Path(g.Path.createSegment('M', prev));

    var n = points.length;
    for (var i = 0; i < n; i++) {

        var next = points[i];
        var distance = prev.distance(next);

        var d = SPREAD;
        while (d < distance) {
            var current = prev.clone().move(next, -d);
            current.offset(
                Math.floor(7 * Math.random()) - 3,
                Math.floor(7 * Math.random()) - 3
            );
            path.appendSegment(g.Path.createSegment('L', current));
            d += SPREAD;
        }

        path.appendSegment(g.Path.createSegment('L', next));
        prev = next;
    }

    return path;
}

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

link.connector('wobble', {
    spread: 10
});</code></pre>

<p>An example of a connector 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.connector(function(sourcePoint, targetPoint, vertices, args) {

    var SPREAD = 20;

    var points = vertices.concat(targetPoint)
    var prev = sourcePoint;
    var path = new g.Path(g.Path.createSegment('M', prev));

    var n = points.length;
    for (var i = 0; i < n; i++) {

        var next = points[i];
        var distance = prev.distance(next);

        var d = SPREAD;
        while (d < distance) {
            var current = prev.clone().move(next, -d);
            current.offset(
                Math.floor(7 * Math.random()) - 3,
                Math.floor(7 * Math.random()) - 3
            );
            path.appendSegment(g.Path.createSegment('L', current));
            d += SPREAD;
        }

        path.appendSegment(g.Path.createSegment('L', next));
        prev = next;
    }

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