Outlining Elements
highlighters.mask is a native JointJS API from @joint/core. In React, it fits naturally with useMarkup() and <Paper>'s hover-event props: useMarkup() gives the highlighter a stable SVG selector to target, and the onElementMouseEnter / onElementMouseLeave handlers give you the elementView needed to add or remove the outline.
This is most useful for SVG element parts, where you want an outline to follow the actual node geometry instead of drawing a generic box around the whole element.
Basic usage​
This example renders three different SVG shapes (a hexagon, a pill, and a diamond) and outlines each on hover. The important part is the named body selector, which gives highlighters.mask a stable target on every element regardless of its underlying path.
The outline follows the actual path registered as body, not just the element's rectangular bounds.
Why selectors matter​
highlighters.mask works best when it targets a named selector such as 'body'.
That is why the example uses useMarkup():
const { selectorRef } = useMarkup();
<path ref={selectorRef('body')} ... />
Selectors are preferable to raw DOM node references because they stay stable across rerenders and fit the same selector model used elsewhere in JointJS. See Element Selectors for the underlying pattern.
Why use mask​
highlighters.mask is useful when you need a precise padded outline around an arbitrary SVG node.
Compared with simpler approaches, it has a few practical tradeoffs:
- it does not fill the highlighted area
- it does not support
dasharray - it is heavier than simpler highlighters because it uses SVG masking
For the full option surface, see the highlighters API.
Cleanup​
Remove one outline from one view with:
highlighters.mask.remove(elementView, 'hover');
If you need to clear the same mask across the whole paper, use:
highlighters.mask.removeAll(paper, 'hover');
Stable IDs such as hover, selection, or focus make that cleanup easier.
The underlying highlighter lifecycle is documented in the dia.HighlighterView API.