Adds a stroke around an arbitrary cell view's SVG node.
It's an alternative to the stroke highlighter.
Pros:
- more precise - equidistant padding along the node
- more powerful - ability to draw a stroke around the descendant nodes or draw a stroke around a path with no fill
Cons:
- lesser performance - uses SVG masking to find the outline
- no fill - the color inside the mask must stay transparent.
- no dasharray - the stroke patterns of dashes and gaps are not applicable.
Available options:
- layer - the stacking order of the highlighter. See dia.Highlighter for supported values.
- padding - the space between the stroke and the node
- deep - if the node is a container element (e.g. SVGGroupElement), draw the mask around its descending nodes. Otherwise a rectangular mask is drawn.
- attrs - an object with SVG attributes to be set on the mask element
- maskClip - 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 20 (20 pixels around the node's bounding box).
Example usage:
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
}
});