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.

These decorations are managed independently of the graph elements by 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, this includes moving and resizing items and clipboard functions (copy, cut, paste).

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 diamond shapes for its bends. A selected port is visualized by a small square.

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, 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 (or tap), marquee, or lasso selection as described in Selection.

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

Per default, the focus decoration is only used when an item was focused via keyboard navigation. This behavior can be changed by setting a different ShowFocusPolicy as FocusIndicatorManager<T>.showFocusPolicy

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. By default, it is 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 blue dotted hatched painted line.

Customizing the decorations is explained in the Styling Selection, Focus, and Highlight chapter.