Highlighter

Node/edge highlighters used to highlight specified elements. X6 includes the following types of highlighters.

When creating a Graph, you can specify the highlighting style triggered by certain interactions through the highlighting option, such as:

new Graph({
  highlighting: {
    // When a magnet is available for linking, render a 2px wide red rectangle around the magnet
    magnetAvailable: {
      name: 'stroke',
      args: {
        padding: 4,
        attrs: {
          'stroke-width': 2,
          stroke: 'red',
        },
      },
    },
  },
})

Supported highlighting configuration options include:

• 'default' Default highlighting option, used when the following highlighting configurations are not specified.
• 'embedding' Used when dragging a node for embedding and the node can be embedded.
• 'nodeAvailable' Used during the linking process when a node can be linked.
• 'magnetAvailable' Used during the linking process when a magnet can be linked.
• 'magnetAdsorbed' Used during the linking process when automatically snapping to a magnet.

Built-in Highlighters

Stroke

The border highlighter renders a highlighted border along the bounding box of the element.

ClassName

The style name highlighter highlights elements by adding an additional style name.

Custom Highlighters

A highlighter is an object with the following signature, containing two methods: highlight and unhighlight, which are used to highlight and unhighlight elements, respectively.

export interface Definition<T> {
  highlight: (cellView: CellView, magnet: Element, options: T) => void
  unhighlight: (cellView: CellView, magnet: Element, options: T) => void
}

Now, let’s define a highlighter named opacity, which adds a 'highlight-opacity' style name to the element.

export interface OpacityHighlighterOptions {}

const className = 'highlight-opacity'

export const opacity: Highlighter.Definition<OpacityHighlighterOptions> = {
  highlight(cellView, magnet) {
    Dom.addClass(magnet, className)
  },

  unhighlight(cellView, magnetEl) {
    Dom.removeClass(magnetEl, className)
  },
}

After defining it, we can register our highlighter:

Graph.registerHighlighter('opacity', opacity, true)

Then we can use this highlighter with the string opacity:

new Graph({
  highlighting: {
    magnetAvailable: {
      name: 'opacity',
    },
  },
})