jointjs/docs/src/joint/api/linkTools/intro.html

JavaScript diagramming library

<p>A link tool is a view that renders a certain type of control elements on top of the <a href="#dia.LinkView">LinkView</a> it is attached to; for example the <a href="#linkTools.Vertices">Vertices tool</a> creates an interactive handle above every vertex (these handles then allow the user to move and/or delete each vertex). Link tools all inherit from the <code>joint.dia.ToolView</code> <a href="#dia.ToolView">class</a>. A collection of tools is added to a <a href="#dia.ToolsView">ToolsView</a>; a tools view is then added to the linkView with the <code>linkView.addTools()</code> <a href="#dia.LinkView.addTools">function</a>.

<p>The JointJS library comes with a collection of pre-made link tool definitions in the <code>joint.linkTools</code> namespace:

<ul>
    <li><code>Vertices</code> - <a href="#linkTools.Vertices">adds handles above link vertices</a></li>
    <li><code>Segments</code> - <a href="#linkTools.Segments">adds handles above link segments</a></li>
    <li><code>SourceArrowhead</code> - <a href="#linkTools.SourceArrowhead">adds a handle above link source</a></li>
    <li><code>TargetArrowhead</code> - <a href="#linkTools.TargetArrowhead">adds a handle above link target</a></li>
    <li><code>SourceAnchor</code> - <a href="#linkTools.SourceAnchor">adds a handle above link source anchor</a></li>
    <li><code>TargetAnchor</code> - <a href="#linkTools.TargetAnchor">adds a handle above link target anchor</a></li>
    <li><code>Boundary</code> - <a href="#linkTools.Boundary">shows link bbox</a></li>
    <li><code>Remove</code> - <a href="#linkTools.Remove">adds an interactive remove button</a></li>
</ul>

<p>To create a new link tool, we call its constructor. Example:</p>

<pre><code>var verticesTool = new joint.linkTools.Vertices({
    snapRadius: 10
});</code></pre>

<p>In addition, the <code>joint.linkTools</code> namespace contains a customizable button class:</p>

<ul>
    <li><code>Button</code> - <a href="#linkTools.Button">adds a customizable button</a></li>
</ul>

<p>Example:</p>

<pre><code>var infoTool = new joint.linkTools.Button({
    markup: [{
        tagName: 'circle',
        selector: 'button',
        attributes: {
            'r': 7,
            'fill': '#001DFF',
            'cursor': 'pointer'
        }
    }, {
        tagName: 'path',
        selector: 'icon',
        attributes: {
            'd': 'M -2 4 2 4 M 0 3 0 0 M -2 -1 1 -1 M -1 -4 1 -4',
            'fill': 'none',
            'stroke': '#FFFFFF',
            'stroke-width': 2,
            'pointer-events': 'none'
        }
    }],
    distance: 60,
    offset: 0,
    action: function(evt) {
        alert('View id: ' + this.id + '\n' + 'Model id: ' + this.model.id);
    }
});</code></pre>

<p>All of the built-in link tools accept the following optional argument, in addition to their own arguments:</p>

<table>
    <tr>
        <th>focusOpacity</th>
        <td><i>number</i></td>
        <td>What should be the opacity of the tool when it is focused (e.g. with the <code>toolView.focus</code> <a href="#dia.ToolView.prototype.focus">function</a>)? Default is <code>undefined</code>, meaning that the tool's opacity is kept unchanged.</td>
    </tr>
</table>

<p>Example:</p>

<pre><code>var verticesTool = new joint.linkTools.Vertices({
    focusOpacity: 0.5
});</code></pre>