Styling Selection, Focus, and Highlight

In this section, we describe how to use element styles for the visualization of the indicators for selected elements, the focused item, and for custom highlighting. These indicators are introduced in section Selection, Focus, and Highlight.

First, we show an easy way to set custom styles per item type, followed by a description on how to use zoom-invariant rendering for those styles.

After that a different way to use custom styles on a per item base is shown.

The chapter Custom Item Indication explains the technical details and classes that are responsible for the visualization and shows further ways to customize indications.

Using Different Theme Colors for the Indicators

The default visualization templates of the selection, focus and highlight use the primaryColor, secondaryColor, and/or backgroundColor of the current CanvasComponent.theme.

Using a Theme with different colors has a quick Effects on Selection, Effects on Focus and Effects on Highlight:

Using CSS Styling for the Indicators

All default visualization templates of the selection, focus and highlight have the following CSS classes:

• yfiles-selection-template
• yfiles-focus-template
• yfiles-highlight-template

Additionally, item specific classes are assigned as well:

The selection indicator also visualizes bends with a separate template that provides the yfiles-bend-template CSS class. By default, highlight and focus indicators do not visualize bends.

The Selection and Focus Template

The default selection and focus visuals consist of a single SVG rect element with a hatched or solid stroke (see Selection, Focus, and Highlight) that can be changed with the above CSS classes.

The Highlight Template

The default highlight visual appears as a double stroked border (see Selection, Focus, and Highlight) that is created by three superimposed SVG rect elements with different sizes to create the double stroked border. The CSS classes are assigned as follows (similar for stripe highlight):

<g>
	<rect stroke="#000000" stroke-width="1" fill="none" class="yfiles-highlight-template yfiles-node-highlight-template yfiles-node-highlight-inner-template"/>
	<rect stroke="#FFFFFF" stroke-width="1" fill="none" class="yfiles-node-highlight-middle-template"/>
	<rect stroke="#000000" stroke-width="1" fill="none" class="yfiles-highlight-template yfiles-node-highlight-template yfiles-node-highlight-outer-template"/>
</g>

The following example shows how to use the CSS classes to create a gray node selection with no focus indicator and a gray highlight:

.yfiles-node-selection-template {
  stroke: lightgray;
}
.yfiles-node-focus-template {
  opacity: 0;
}
.yfiles-node-highlight-template {
  stroke: lightgray;
}

Using Styles for the Indicators

yFiles for HTML contains three specialized model managers that allow you to use any node, edge, label or port style as visualization for the selection, focus, and highlight of a node, edge, label, or port, respectively.

GraphSelectionIndicatorManager

Uses style properties to render the selection of nodes, edges, labels and ports.

GraphFocusIndicatorManager

Uses style properties to render the focus of a node, edge, label or port.

GraphHighlightIndicatorManager

Uses style properties to render the highlight of nodes, edges, labels and ports.

All three of these classes can be used in the same way:

• Create a new instance of the manager and set your style to it.
• Replace the existing manager on the GraphComponent with the new instance.

The following example sets custom styles as selection indicators for all nodes, edges and labels:

/**
 * @param {!GraphComponent} graphComponent
 */
function customizeSelection(graphComponent) {
  const selectionNodeStyle = new ShapeNodeStyle({ fill: 'green' })
  const selectionEdgeStyle = new PolylineEdgeStyle({ stroke: '2px green' })
  const selectionLabelStyle = new DefaultLabelStyle({ textFill: 'green' })

  graphComponent.selectionIndicatorManager = new GraphSelectionIndicatorManager({
    nodeStyle: selectionNodeStyle,
    edgeStyle: selectionEdgeStyle,
    labelStyle: selectionLabelStyle
  })
}function customizeSelection(graphComponent: GraphComponent): void {
  const selectionNodeStyle = new ShapeNodeStyle({ fill: 'green' })
  const selectionEdgeStyle = new PolylineEdgeStyle({ stroke: '2px green' })
  const selectionLabelStyle = new DefaultLabelStyle({ textFill: 'green' })

  graphComponent.selectionIndicatorManager = new GraphSelectionIndicatorManager({
    nodeStyle: selectionNodeStyle,
    edgeStyle: selectionEdgeStyle,
    labelStyle: selectionLabelStyle
  })
}

Since all indicators are rendered in front of the graph elements by default, setting styles with an opaque fill will hide the original element. If that is not desired, either use a style that just draws the border or change the default z-order of the rendering.If you want to use geometric shapes as indicators, the ShapeNodeStyle is a good choice. For labels, combine it with the NodeStyleLabelStyleAdapter and for ports with NodeStylePortStyleAdapter.

Zoom-invariant rendering

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.

The following configuration options are available for the indicator style decorators.

zoomPolicy

Available on IndicatorNodeStyleDecorator, IndicatorEdgesStyleDecorator, IndicatorLabelStyleDecorator, and IndicatorPortStyleDecorator.Specifies how the zoom level affects the rendering. Either, the visualization scales like graph elements when zooming or it keeps a fixed size like the default indicators and handles in yFiles.

padding

Available on IndicatorNodeStyleDecorator and IndicatorLabelStyleDecorator.Specifies additional padding around the node or label layout. The bounds rendered by the style are the original node or label layout enlarged by this padding. This option is not available for edges or ports.

The Selection Styling demo shows how to use the GraphSelectionIndicatorManager with a IndicatorNodeStyleDecorator, IndicatorEdgeStyleDecorator and IndicatorLabelStyleDecorator.

Per-item styling

Using GraphSelectionIndicatorManager, only one node style can be set as selection indication for all nodes, but sometimes you want to decide which selection style to use on a per item base.

For customizations per item, graph decoration can be used. For technical reasons the selectionDecorator, focusIndicatorDecorator and highlightDecorator take specialized ICanvasObjectInstaller to customize the indications, so we have to use the NodeStyleDecorationInstaller implementation to set our custom style here.

In the following example, different green node styles are used for decorating normal and group nodes. Those are registered via decorator pattern using NodeStyleDecorationInstaller.

const graphDecorator = graphComponent.graph.decorator
graphDecorator.nodeDecorator.selectionDecorator.setFactory((node) => {
  const selectionNodeStyle = graphComponent.graph.isGroupNode(node)
    ? new GroupNodeStyle({ tabFill: 'rgba(50, 200, 100, 0.5)' })
    : new ShapeNodeStyle({ fill: 'green' })
  const nodeSelectionDecorator = new NodeStyleDecorationInstaller({
    nodeStyle: selectionNodeStyle,
    zoomPolicy: StyleDecorationZoomPolicy.WORLD_COORDINATES,
    margins: Insets.EMPTY
  })
  return nodeSelectionDecorator
})

Although this chapter only mentions different node style indications, the same mechanism and according methods and classes can be used for different edge, label or port styles.