HighlighterView

The base class for highlighters. The HighlighterView class does not implement any particular visual emphasis. It takes care of the management of the instances and introduce mechanisms for displaying, updating and cleaning arbitrary markings added to the SVGElements of cellViews.

The class is not meant to be initialized with the constructor.

Properties

MOUNTABLE

MOUNTABLE

If the property is true, the highlighter view is attached to the DOM.

If the property is false, it is not attached upon highlight.

The default is true.

const ChildView = dia.HighlighterView.extend({

    // HighlighterView `el` is not meant to be appended
    MOUNTABLE: false,

    highlight(cellView, node) {
        node.setAttribute('my-attribute', String(cellView.model.get('highlightAttribute')));
    },

    unhighlight(cellView, node) {
        node.removeAttribute('my-attribute');
    }

});

UPDATABLE

UPDATABLE

If the property is true, the highlighter is updated (highlight() function is called) every time when the related cellView requires an update.

If the property is false, the highlight() method is called only once when the highlighter is added.

The default is true.

const ChildView = dia.HighlighterView.extend({

    MOUNTABLE: false,
    UPDATABLE: false,

    highlight(_cellView, node) {
        node.classList.add('my-class');
    },

    unhighlight(_cellView, node) {
        node.classList.remove('my-class');
    }

});

UPDATE_ATTRIBUTES

UPDATE_ATTRIBUTES

The highlighter is updated (highlight() function is called) every time any of the attributes from the list change.

The value could be an array of strings or a function returning an array of strings.

The default is [].

const ColorHighlighter = dia.HighlighterView.extend({

    UPDATE_ATTRIBUTES: ['color'],

    highlight(cellView, node) {
        node.style.fill = cellView.model.get('color');
    },

    unhighlight(_cellView, node) {
        node.style.fill = '';
    }

});

ColorHighlighter.add(rectangle.findView(paper), 'body', 'color-highlighter');
rectangle.set('color', 'gray'); // will call highlight()

Methods

highlight()

highlighter.highlight(cellView: dia.CellView, node: SVGElement): void;

Mark/Emphasize the node (SVGElement) of the cellView. e.g. render a rectangle above the node, add a class to the node.

unhighlight()

highlighterunhighlight(cellView: dia.CellView, node: SVGElement): void;

Remove marks made by highlight() from the node (SVGElement) of the cellView.

Static methods

add()

HighlighterView.add<T extends HighlighterView>(
    this: HighlighterView.Constructor<T>,
    cellView: dia.CellView,
    selector: HighlighterView.NodeSelector,
    id: string,
    options?: any
): T;

Create an instance of the highlighter and add it to the cellView.

id is a unique identifier of the highlighter. Only single highlighter with given id can exist on the CellView at one time. If a highlighter with the same id exists on the CellView, it is removed and a new highlighter is added and returned. You can check if a highlighter already exists by calling HighlighterView.get().

get()

HighlighterView.get<T extends HighlighterView>(
    this: HighlighterView.Constructor<T>,
    cellView: dia.CellView,
    id?: string
): T | null;

Return an array of highlighters on the cellView. Only highlighters, which are instances of this class are returned. If id is presented, return the highlighter with given id on the cellView.

remove()

HighlighterView.remove(cellView: dia.CellView, id?: string): void;

Remove all the highlighters from the cellView. Only highlighters, which are instances of this class are removed. If id is presented, remove the highlighter with given id from the cellView.

removeAll()

HighlighterView.removeAll(paper: dia.Paper, id?: string): void;

Remove all the highlighters on paper. Only highlighters, which are instances of this class are removed. If id is presented, remove all the highlighters with given id on the paper.

Options

There are several common options for different highlighters.

layer

layer - the stacking context of the highlighter. Applicable for mountable highlighters only.

null	Render the highlighter above the cell. It can be hidden by a cell with a higher z index.
'back'	Render the highlighter behind all the cells.
'front'	Render the highlighter in front of all the cells.

z

z - the stacking order (z-index) of the highlighter in the given stacking context. Applicable for mountable highlighters only.

Types

NodeSelector

This types specifies the format of selector for using with selector parameter in add() function.

type NodeSelectorJSON = {
    selector?: string;
    port?: string;
    label?: number;
};

type NodeSelector = string | SVGElement | NodeSelectorJSON;

• It can be a string selector from the shape's markup.

'root'
'body'

• It can be an object with property selector, which is a selector from the (cell/label/port) markup. There is additional property port (id of a port) available for dia.ElementView. And property label (index of a label) is available for dia.LinkView.

{ selector: 'body' } // cells
{ port: 'port1', selector: 'portBody' } // elements
{ label: 1, selector: 'labelBody' } // links

• It can be an SVGElement, the descendant of cellView.el or the root itself.

cellView.el // the root
cellView.el.querySelector('rect') // an SVGRectangle