jointjs/docs/src/joint/api/dia/attributes/magnetSelector.html

JavaScript diagramming library

<p>Designate another subelement of the cell as a proxy target for the cell's magnet, whenever this subelement (the one on which this attribute is defined) becomes the source/target of a link. (Usually, this attribute needs to be defined on the `'root'` subelement of the cell, since that is the default target for the cell's magnet.) Expects a selector.</p>

<p>A change in the cell's magnet affects the following characteristics of the cell view:
    <ul>
        <li>link anchor</li>
        <li>link connection point</li>
        <li>connector</li>
        <li>router</li>
    </ul>
</p>

<p>It has no effect on the connection validation, magnet highlighter and the <code>source</code> and <code>target</code> link model attributes.</p>

<pre><code>// `standard.Rectangle` has `root`, `body` and `label` subelements
const rect = new joint.shapes.standard.Rectangle();
// we want to have the `label` on the outside and under the `body` of the rectangle:
rect.attr(['label'], { refY: '100%', textVerticalAnchor: 'top' });
// normally, links would connect to the `root` subelement (the wrapper of `body` and `label`)
// however, we want links to connect only to the `body` subelement, so we need to specify it as a proxy for `root`:
rect.attr(['root','magnetSelector'], 'body');</code></pre>