highlighting - Configure which highlighter to use (if any) for each type of interaction.

List of highlighting interactions
Name Enum Description Default
default joint.dia.CellView.Highlighting.DEFAULT the default highlighter to use (and options) when none is specified
{
    name: 'stroke',
    options: {
        padding: 3
    }
}
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
{
    name: 'addClass',
    options: {
        className: 'available-magnet'
    }
}
elementAvailability joint.dia.CellView.Highlighting.ELEMENT_AVAILABILITY when showing all elements to which a valid connection can be made
{
    name: 'addClass',
    options: {
        className: 'available-cell'
    }
}

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"]');
});