documentationfor yFiles for HTML 2.6

The Scene Graph

All objects which are rendered by the CanvasComponent are maintained in the so-called "scene graph". This is the supporting infrastructure that holds the model of graphical objects. The scene graph is a tree-like structure where each leaf represents an object to render, e.g. a graph item like a node, a decoration to highlight selected elements, or a background image.

A leaf always is of type ICanvasObject and bundles the object to render, the userObject and the ICanvasObjectDescriptor. The intention of the former is to hold any data specific to a given graphical object, like, e.g. a node, or a rectangle which represents the size and its location of the object in the canvas. The latter is used by the CanvasComponent to obtain the actual logic related to all rendering and interaction aspects for the corresponding canvas object.

Usually, the ICanvasObjects are maintained automatically. For example, the GraphModelManager transparently creates ICanvasObjects with the proper user objects and descriptors for each graph item. Section Visualizing Arbitrary Objects explains how to add own visualizations.

The ICanvasObjects are arranged in groups of type ICanvasObjectGroup. A scene graph has at least one group, the rootGroup. The scene graph also determines the rendering order. It is traversed in depth-first manner when a redraw is requested. The rendering of canvas objects is done in the order they are traversed, i.e., objects that are traversed later are drawn in front of earlier traversed ones.

Initially, the rendering order can be determined by the order in which canvas objects are added to a group and the order in which groups are added to another group. Section Changing the Z-order describes the default render order and how to change it in detail.

By default there are dedicated ICanvasObjectGroups for different render purposes.

From front to back, the predefined groups are:

  1. inputModeGroup. It contains visualizations created by the input modes (such as handles).
  2. highlightGroup. It contains the highlight indication.
  3. focusGroup. It contains the focus indication.
  4. selectionGroup. It contains the selection indication.
  5. contentGroup. It contains the visualizations of all graph elements. This group is maintained by the GraphModelManager. More details can be found in section Changing the Z-order.
  6. backgroundGroup. It contains visualizations that should be drawn behind everything else and is empty by default.

Section Visualizing Arbitrary Objects describes how developer can add their own visualizations.