`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:

- joint.highlighters.mask
- joint.highlighters.stroke
- joint.highlighters.addClass
- joint.highlighters.opacity

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