Rendering Order Demo

Rendering Order

Sometimes it is necessary to change the render order of graph, e.g. when labels should be rendered in front of their owner but behind another item. This demo shows how to use GraphModelManager to configure the rendering order for grouped graphs as well as layer policies for labels and ports.

Hierarchic Nesting

Each item type is assigned to a specific canvas object group. These groups have a default rendering order from back to front. See The Z-order of Graph Elements for more information about the different ICanvasObjectGroups and their default rendering order.

For grouped graphs, we provide some nesting policies to structure nodes and edges in more complex hierarchies. In these cases, some of the canvas object groups may not be used.

Demo Configurations

Default: The rendering order that is used by default.
Labels / Ports at Owner: The labels and ports are rendered on the same z-order as their owner.
Edges on Top: Edges are rendered on top of the nodes. Note in this case, we also enabled the labels and ports at owner configuration.
Group Nodes: Maintains the rendering order according to the nesting depth for group nodes while nodes and edges are placed in the separate groups and are not interleaved in the rendering.
None: Items are placed in their respective canvas object group without considering the nesting hierarchy of the nodes. Usually, this setting is only used when the z-order is managed by a different mechanism.