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

JavaScript diagramming library

<p>New anchor functions can be defined in the <code>joint.anchors</code> namespace (e.g. <code>joint.anchors.myAnchor</code>) or passed directly as a function to the <code>anchor</code> property of link source/target (or to the <code>defaultAnchor</code> <a href="#dia.Paper.prototype.options.defaultAnchor">option of a paper</a>).</p>

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

<table>
    <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 rowspan="2">anchorReference</th>
        <td><i>g.Point</i></td>
        <td>A reference to another component of the link path that may be necessary to find this anchor point. If we are calling this method for a source anchor, it is the first vertex, or if there are no vertices the target anchor. If we are calling this method for a target anchor, it is the last vertex, or if there are no vertices the source anchor...</td>
    </tr>
    <tr>
        <td><i>SVGElement</i></td>
        <td>...if the anchor in question does not exist (yet), it is that link end's magnet. (The built-in methods usually use this element's center point as reference.)</td>
    </tr>
    <tr>
        <th>args</th>
        <td><i>object</i></td>
        <td>An object with additional optional arguments passed to the anchor method by the user when it was called (the <code>args</code> property).</td>
    </tr>
</table>