highlighting
- Configure which highlighter to use (if any) for each type of interaction.
Name | Enum | Description | Default |
---|---|---|---|
default | joint.dia.CellView.Highlighting.DEFAULT | the default highlighter to use (and options) when none is specified |
|
connecting | joint.dia.CellView.Highlighting.CONNECTING | when a valid link connection can be made to an element | Not defined. The default is used. |
embedding | joint.dia.CellView.Highlighting.EMBEDDING | when a cell is dragged over another cell in embedding mode | Not defined. The default is used. |
magnetAvailability | joint.dia.CellView.Highlighting.MAGNET_AVAILABILITY | when showing all magnets to which a valid connection can be made |
|
elementAvailability | joint.dia.CellView.Highlighting.ELEMENT_AVAILABILITY | when showing all elements to which a valid connection can be made |
|
If a type is set to false
, no highlighter is used.
If a type is set to null | undefined
, the default highlighter is used.
Example usages:
new joint.dia.Paper({
highlighting: {
'default': {
name: 'stroke', // `joint.highlighters.stroke`
options: {
padding: 2
}
},
'connecting': {
name: 'addClass', // `joint.highlighters.addClass`
options: {
className: 'highlight-connecting'
}
},
// Disable highlighter for embedding
'embedding': false
}
});
new joint.dia.Paper({
// Disable all highlighters
highlighting: false
});
List of available highlighters and their options:
If you need to highlight an element or a link differently based on the cell type or one of its attribute, you can disable the paper highlighting and add a highlighter manually.
// Disable Embedding
paper.options.highlighting.embedding = false;
const MyHighlighters = {
EMBEDDING: 'embedding-highlighter'
};
paper.on('cell:highlight', (cellView, node, { type }) => {
if (type === joint.dia.CellView.Highlighting.EMBEDDING) {
const isLink = cellView.model.isLink();
joint.highlighters.mask.add(cellView, node, MyHighlighters.EMBEDDING, {
attrs: {
'stroke': isLink ? 'red' : 'blue'
}
});
}
});
paper.on('cell:unhighlight', (cellView, node, { type }) => {
if (type === joint.dia.CellView.Highlighting.EMBEDDING) {
joint.highlighters.mask.remove(cellView, MyHighlighters.EMBEDDING);
}
});
By default, when a user connects a link, the target node for the highlighter is either the root of the cell or a magnet. To change this use highlighterSelector attribute.
const element = new joint.shapes.standard.Rectangle({
attrs: {
root: {
highlighterSelector: 'body'
}
}
});
// When a user tries to connect a link to the element.
paper.on('cell:highlight', (elementView, node) => {
assert.notOk(node === elementView.el);
assert.ok(node === elementView.el.querySelector('[joint-selector="body"]');
});