The Scene Graph

All objects rendered by the CanvasComponent are maintained in the "scene graph." The CanvasComponent's renderTree provides the infrastructure that holds the model of graphical objects. The scene graph is a tree-like structure where each leaf represents an object to render, such as a graph item like a node, a decoration to highlight selected elements, or a background image.

A leaf is always of type IRenderTreeElement and bundles the object to render, the tag, and the IObjectRenderer<TRenderTag>. The tag holds data specific to a given graphical object, such as a node, or a rectangle that represents the size and location of the object in the canvas. The IObjectRenderer<TRenderTag> is used by the CanvasComponent to obtain the logic related to rendering and interaction aspects for the corresponding render tree element.

Usually, the IRenderTreeElements are maintained automatically. For example, the GraphModelManager transparently creates IRenderTreeElements with the proper render tags and renderers for each graph item. Section Visualizing Arbitrary Objects explains how to add custom visualizations.

The IRenderTreeElements are arranged in groups of type IRenderTreeGroup. A scene graph has at least one group, the rootGroup. The scene graph also determines the rendering order. It is traversed in a depth-first manner when a redraw is requested. The rendering of render tree elements is done in the order they are traversed. 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 render tree elements 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 IRenderTreeGroups for different rendering purposes.

From front to back, the predefined groups are:

1. foregroundGroup. It contains visualizations that should be drawn in front of everything else and is empty by default.
2. inputModeGroup. It contains visualizations created by the input modes (such as handles).
3. highlightGroup. It contains the highlight indication.
4. focusGroup. It contains the focus indication.
5. selectionGroup. It contains the selection indication.
6. 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.
7. backgroundGroup. It contains visualizations that should be drawn behind everything else and is empty by default.

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