highlighters

The namespace provides several built-in highlighters to use in your diagram.

All highlighters are classes which inherit from dia.HighlighterView. All highlighters except for list can be used by calling corresponding static methods of the base HighlighterView class. To know how to use list highlighter you can visit our learn page.

All highlighters use special options to be used when adding a highlighter using add() method

Classes

The plugin provides the following classes:

addClass

Toggles a class name on an arbitrary cell view's SVG node.

Available options

• className - the class name to toggle on the cell's node

highlighters.addClass.add(cellView, 'root', 'my-highlighter-id', {
    className: 'some-custom-class'
});

list

Adds a list of arbitrary SVGElements to the cell view.

Available options

• layer - the stacking order of the highlighter. See dia.HighlighterView for supported values.
• attribute - the name of the model attribute to read the list items from (and automatically update the list when the attribute changes). The option is mandatory and it's an array of items (each item is then passed as is to the createListItem) method.
• gap - the space between items. Expects a number.
• size - the size of each item. It's either a number or an object with width and height properties.
• direction - specifies how list items are placed in the list container defining the main axis. It's either row (for growth on x coordinate) or column (for growth on y coordinate).
• position - specifies the position and the alignment of the list container. The value is a position name. Using one of the position values sets the list anchor and the position within the item view to that value. For instance the bottom-right value positions the list by its bottom-right corner to the bottom-right corner of the element.
• margin - the space around the list container. It's a number or an object with left, top, right, bottom properties.

Protected Methods

createListItem()

You need to override this method when extending list class.

protected createListItem(item: any, itemSize: dia.Size, itemEl: SVGElement | null): SVGElement;

It accepts the item (a value at a position from the model attributes's array), the normalized size object and currentListItem SVGElement if such a node was created in a previous call. It returns an SVGElement.

The list optimizes the updates i.e. the method is not executed if the particular item does not change.

mask

Adds a stroke around an arbitrary cell view's SVG node.

Available options

• layer - the stacking order of the highlighter. See dia.HighlighterView for supported values.
• padding - the space between the stroke and the node
• deep - if the node is a container element (e.g. SVGGroupElement), draw the mask around its descending nodes. Otherwise a rectangular mask is drawn.
• attrs - an object with SVG attributes to be set on the mask element
• maskClip - it determines the area which is affected by a mask. The painted content of an element must be restricted to this area. It defaults to 20 (20 pixels around the node's bounding box).

highlighters.mask.add(cellView, 'body', 'my-highlighter-id', {
    padding: 5,
    attrs: {
        'stroke-width': 3,
        'stroke': '#FF0000',
        // round the mask at the corners of paths
        'stroke-linejoin': 'round',
        // round the mask at the end of open subpaths
        'stroke-linecap': 'round'
        // to change the opacity use `rgba` color format
        // 'stroke': 'rgba(255, 0, 0, 0.5)',
        // this would affect the opacity of the stroke and the padding
        // 'stroke-opacity': 0.5
    }
});

opacity

Changes the opacity of an arbitrary cell view's SVG node.

Available options

• alphaValue - a value that represents the degree to which content behind an element is hidden. It's a number in the range 0.0 to 1.0, inclusive. The default is 0.3.

highlighters.opacity.add(cellView, 'body', 'my-highlighter-id', {
    alphaValue: 0.4
});

stroke

Adds a stroke around an arbitrary cell view's SVG node.

Available options

• layer - the stacking order of the highlighter. See dia.HighlighterView for supported values.
• padding - the space between the stroke and the element
• rx - the stroke's border radius on the x-axis
• ry - the stroke's border radius on the y-axis
• attrs - an object with SVG attributes to be set on the highlighter element
• useFirstSubpath - draw the stroke by using the first subpath of the target el compound path.
• nonScalingStroke - when enabled the stroke width of the highlighter is not dependent on the transformations of the paper (e.g. zoom level). It defaults to false.

highlighters.stroke.add(cellView, 'body', 'my-highlighter-id', {
    padding: 10,
    rx: 5,
    ry: 5,
    useFirstSubpath: true,
    attrs: {
        'stroke-width': 3,
        'stroke': '#FF0000'
    }
});