HighlighterSelectionFrameList

HighlighterSelectionFrameList is a collection of cell highlighters to be used with Selection.

It extends the SelectionFrameList.

To read more about selection frames and how to use them, see the selection tutorial.

constructor

new HighlighterSelectionFrameList(options?: HighlighterSelectionFrameList.Options)

It accepts the following options:

highlighter

highlighter: typeof dia.HighlighterView<any>;

The highlighter view class to be used to highlight the cells.

const frameList = new HighlighterSelectionFrameList({
    highlighter: highlighters.mask
});

selector

selector?: HighlighterSelector;

A selector (or a function that returns a selector) to be used to highlight the node specified by the selector.

const frameList = new HighlighterSelectionFrameList({
    highlighter: highlighters.mask,
    selector: (cell) => cell.isElement() ? 'body' : 'line'
});

options

options?: HighlighterOptions;

The options for the highlighter view.

const frameList = new HighlighterSelectionFrameList({
    highlighter: highlighters.addClass,
    options: {
        className: 'selected-cell'
    }
});

Types

The following types are used in the HighlighterSelectionFrameList API:

HighlighterSelector

type HighlighterSelector =
    string |
    ((cell: dia.Cell, frameList: HighlighterSelectionFrameList) => string);

HighlighterOptions

type HighlighterOptions =
    dia.HighlighterView.Options |
    ((cell: dia.Cell, frameList: HighlighterSelectionFrameList) => dia.HighlighterView.Options);

Options

interface Options {
    highlighter: typeof dia.HighlighterView<any>;
    selector?: HighlighterSelector;
    options?: HighlighterOptions
}