Customizing or disabling default item decorations

Introduction and Motivation

You might want to change the appearance of these decorations to match your application's style, or you might not want to display a visualization for a certain state at all. To modify a specific visualization, it's important to understand what aspects you want to change.

Note: This text examines decorations for nodes. However, other item types (labels, edges, bends) are treated in a similar way.

Identifying the item decoration

The following are the default indication visualizations: For a visualization of these indications, please see the following developer guide article Selection, Focus, and Highlight.

• A thick hatched border indicates an item is selected.
• A thin dotted border indicates an item is focused.
• A black-and-white border at the corners indicates an item is highlighted.

Disabling the default item decoration

Indication decorations all work in a similar manner. For each indication type, there is a dedicated manager class that handles the decoration. These manager classes are FocusIndicatorManager, SelectionIndicatorManager, and HighlightIndicatorManager.

The default implementations of these manager classes are found in the following properties of GraphComponent: focusIndicatorManager, selectionIndicatorManager, and highlightIndicatorManager.

For example, to disable the focus indication for a graphComponent, set the enabled flag on the respective manager class instance:

graphComponent.focusIndicatorManager.enabled = false;

Customizing the default item decoration

The visualization of indicators can be customized. There are convenience classes that allow you to use any item style as a visualization for the selection, focus, and highlight states of an item. The respective decorators focusRenderer, selectionRenderer, and highlightRenderer on GraphComponent can be set to achieve this.

For example, a custom selection visualization can be set like this:

// myNodeStyle is the custom INodeStyle
const decorationRenderer = new NodeStyleIndicatorRenderer();
decorationRenderer.nodeStyle = myNodeStyle;
graph.decorator.nodes.selectionRenderer.addConstant(decorationRenderer);

For an in-depth explanation of the related concepts, please read the article Customizing Selection, Focus, and Highlight.