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

JavaScript diagramming library

<p>New connection point function can be defined in the <code>joint.connectionPoints</code> namespace (e.g. <code>joint.connectionPoints.myConnectionPoint</code>) or passed directly as a function to the <code>connectionPoint</code> property of link source/target (or to the <code>defaultConnectionPoint</code> <a href="#dia.Paper.prototype.options.defaultConnectionPoint">option of a paper</a>).</p>

<p>In either case, the connection point function must return the connection point as a Point. The function is expected to have the form <code>function(endPathSegmentLine, endView, endMagnet, args)</code>:</p>

<table>
    <tr>
        <th>endPathSegmentLine</th>
        <td><i>g.Line</i></td>
        <td>The link path segment at which we are finding the connection point. If we are calling this method for a source connection point, it is the first segment (source anchor - first vertex, or source anchor - target anchor). If we are calling this method for a target connection point, it is the last segment (last vertex - target anchor, or source anchor - target anchor).</td>
    </tr>
    <tr>
        <th>endView</th>
        <td><i>dia.ElementView</i></td>
        <td>The ElementView to which we are connecting. The Element model can be accessed as <code>endView.model</code>; this may be useful for writing conditional logic based on element attributes.</td>
    </tr>
    <tr>
        <th>endMagnet</th>
        <td><i>SVGElement</i></td>
        <td>The SVGElement in our page that contains the magnet (element/subelement/port) to which we are connecting.</td>
    </tr>
    <tr>
        <th>args</th>
        <td><i>object</i></td>
        <td>An object with additional optional arguments passed to the connection point method by the user when it was called (the <code>args</code> property).</td>
    </tr>
</table>