Selection, Focus, and Highlight

By default, yFiles for HTML provides three different decorative mechanisms to mark elements in the GraphComponent in a certain way: selection, focus, and highlight.

They are managed independently of the graph elements by so-called model managers in the GraphComponent. There is a manager for each type of decorative element.

Selection marks a single element or multiple elements as selected. The majority of interactive features in yFiles for HTML operates on the selection by default, for example moving and resizing items, clipboard functions (copy, cut, paste), and so on.

In the default configuration, the selection for nodes and labels is visualized by a hatched painted rectangle around the item. Edge selection uses a hatched painted line with the bend selection using a white diamond shape. A selected port is visualized by an ellipse.

Similar to the application focus in a UI framework, the GraphComponent’s focus marks a single item as the currently focused item.

In the default configuration, the current item property of the GraphComponent represents the focused item. Setting the current item programmatically will also change the focused item and its decorations.

The focused item is also the target of many interactive features by default, for example for extending the selection, zooming to a specific item, or navigating a nested graph.

By default, the focused item can only be a node, and it is visualized by a thin rectangle with a dashed stroke.

When a GraphViewerInputMode or GraphEditorInputMode is used, graph elements can be selected via click, marquee or lasso selection as described in Selection.

The focused item can change via click selection or keyboard navigation as described in Keyboard Input.

Both input modes can also be configured to forbid selection and/or focus handling for all graph elements:

// gim is a GraphViewerInputMode or GraphEditorInputMode

// disable selection
gim.selectableItems = GraphItemTypes.NONE
// disable focus for items
gim.focusableItems = GraphItemTypes.NONE

Item highlighting is another form of decoration for individual items. It is by default not bound to any interaction like selection or focus and instead is set programmatically. It is up to the application programmer to add or remove highlights to the items in the graph.

There are various highlight styles for some items. For example, the highlight for edges is a gray dashed line.

Styling of Selection, Focus and Highlight

An easy ways to use a custom styling is to set item styles to the style properties for nodes, edges, labels and ports of the classes GraphSelectionIndicatorManager, GraphFocusIndicatorManager and GraphHighlightIndicatorManager.

The following code sets a blue round rectangle as node selection style:

const selectionNodeStyle = new RectangleNodeStyle({
  fill: 'transparent',
  stroke: '3px deepskyblue',
  cornerStyle: 'round',
  cornerSize: 3.5
})

graphComponent.selectionIndicatorManager = new GraphSelectionIndicatorManager({
  nodeStyle: selectionNodeStyle
})

To render the selection style zoom-invariant or keep a distance to the node bounds, wrap an IndicatorNodeStyleDecorator around the node style and set its zoomPolicy and padding properties.

const styleWithPadding = new IndicatorNodeStyleDecorator({
  wrapped: selectionNodeStyle,
  padding: 5
})
graphComponent.selectionIndicatorManager = new GraphSelectionIndicatorManager({
  nodeStyle: styleWithPadding
})

The Selection Styling shows customized selecting painting of nodes, edges and labels by decorating these items with a corresponding style.

The Customizing Indicators chapter explains selection, focus and highlight styling in more detail.