Visualization of Graph Elements: Styles

The visual appearance for the graph elements is created by so-called styles in yFiles for HTML.

Before the GraphComponent can display an object on the canvas, it needs to know what it should look like. In the case of graph items, styles are the managing entities for creating the visual appearance as well as for updating them when the model has changed. Each type of graph element (except for bends) has an appropriate style interface. For example, the style interface for nodes is INodeStyle.

Even though the style is a property of the model item itself, the model is independent of the visualization. For example, the same graph model can be visualized using completely different styles without affecting the model at all.

displaying the graph styles intro — Two different styles for the same graph model

As with all model item properties, the graph that the items reside in is responsible for managing those items. This means that the properties on the items are read-only and can only be set via the graph instance.

Applying styles to graph elements

// create a node with a given style
const node1 = graph.createNode(
  [0, 0, 40, 40],
  new ShapeNodeStyle({
    shape: 'rectangle',
    fill: 'white',
    stroke: 'black'
  })
)

// set a style to a given node
graph.setStyle(
  node2,
  new RectangleNodeStyle({
    fill: 'orange',
    stroke: 'darkgoldenrod',
    cornerSize: 5,
    cornerStyle: 'round'
  })
)

// same for edges: create an edge with a given style
graph.createEdge(node1, node2, new PolylineEdgeStyle({ targetArrow: 'default' }))
// set a style to a given edge
graph.setStyle(edge2, new BezierEdgeStyle())

In the process of the visualization, the style receives the item that the visual appearance is to be created for, the bounds within which the visualization should be painted, and some more contextual information. It does not hold any information about the item itself and thus instances of styles are generally meant to be shareable among various items.

The graph has default settings for styles that are applied when items are created for which no specific style was given. In the default configuration, this default style is a single instance that is shared among all items created in such a way.

Sharing styles has the advantage of a better memory usage, but also the trait that every change to a property of a shared style is immediately reflected in all items that share this style.

yFiles for HTML comes with a wide array of predefined styles for all styleable graph elements. You can use these styles out-of-the-box. Some of the most prominent ones for nodes are the ShapeNodeStyle for basic geometric shapes and the GroupNodeStyle for group nodes.

Only graph elements have associated styles; other elements in the view (for example the selection markers or handles) are visualized using a different mechanism as described in the section Styling Selection, Focus, and Highlight.

Bends do not have an associated style interface because they are visualized as part of the edge visualization (if at all).

Instead of overburdened interfaces, the common interfaces for the styles are very small and each style implementation has its own set of properties to configure the resulting visual (for example the colors).

Component for Graph Outline Node Styles