jointjs/docs/src/joint/api/highlighters/mask.html

JavaScript diagramming library

<p>Adds a stroke around an arbitrary cell view's SVG node.</p>

<div class="docs-important-note">
    <p>It's an alternative to the <a href="#highlighters.stroke">stroke</a> highlighter.</p>
    <b>Pros:</b>
    <ul>
        <li><b>more precise</b> - equidistant padding along the node</li>
        <li><b>more powerful</b> - ability to draw a stroke around the descendant nodes or draw a stroke around a path with no fill</li>
    </ul>
    <b>Cons:</b>
    <ul>
        <li><b>lesser performance</b> - uses <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask" target="_blank">SVG masking</a> to find the outline</li>
        <li><b>no fill</b> - the color inside the mask must stay transparent.</li>
        <li><b>no dasharray</b> - the stroke patterns of dashes and gaps are not applicable.</li>
    </ul>
</div>

<p>Available options:</p>
<ul>
    <li><b>layer</b> - the stacking order of the highlighter. See <a href="#dia.HighlighterView.prototype.options.layer">dia.Highlighter</a> for supported values.</li>
    <li><b>padding</b> - the space between the stroke and the node</li>
    <li><b>deep</b> - if the node is a container element (e.g. <i>SVGGroupElement</i>), draw the mask around its descending nodes. Otherwise a rectangular mask is drawn.</li>
    <li><b>attrs</b> - an object with SVG attributes to be set on the mask element</li>
    <li><b>maskClip</b> - it determines the area which is affected by a mask. The painted content of an element must be restricted to this area. It defaults to <i>20</i> (20 pixels around the node's bounding box).</li>
</ul>

<p>Example usage:</p>
<pre><code>joint.highlighters.mask.add(cellView, 'body', 'my-highlighter-id', {
    padding: 5,
    attrs: {
        'stroke-width': 3,
        'stroke': '#FF0000',
        // round the mask at the corners of paths
        'stroke-linejoin': 'round',
        // round the mask at the end of open subpaths
        'stroke-linecap': 'round'
        // to change the opacity use `rgba` color format
        // 'stroke': 'rgba(255, 0, 0, 0.5)',
        // this would affect the opacity of the stroke and the padding
        // 'stroke-opacity': 0.5
    }
});</code></pre>