Changing the displaying order of a graph's items (z-order)

Questions & Answers

Summary

This article shows how to access the ICanvasObjects of IModelItems and how to change the order in which they are painted (e.g. forcing one object to be drawn in front of other objects)

This article was written for an older version. It is only online as a reference for customers using this old version. The information it contains is probably out of date.

The latest information can be found in the yFiles documentation

Description

Since version 1.7 yFiles FLEX provides a comprehensive z-Order support which should be preferred over the methods provided in this article. See the developer's guide for more details. The RenderOrderDemo which is part of the yFiles FLEX source code demos shows the different aspects of the new z-Order support.

To gain control over some details of the drawing of items as nodes and edges, like the drawing order, one can use the various methods of com.yworks.canvas.ICanvasObject:

See the API documentation for more.

To get the ICanvasObject for an item, use the com.yworks.graph.model.GraphModelManager's method getCanvasObjects(item:IModelItem):Array, which returns an Array of the canvas objects which are related to the item. The GraphModelManager can be obtained from the com.yworks.ui.GraphCanvasComponent's property graphModelManager. Thus, the complete code to get the item's canvas objects is (where gcc is the GraphCanvasComponent): var canvasObjects:Array = gcc.graphModelManager.getCanvasObjects( item );

Using canvas object groups

Canvas object groups, described by com.yworks.canvas.ICanvasObjectGroup offer the same functionality as com.yworks.canvas.ICanvasObjects, i.e. you can, for example, put whole groups into the back by calling toBack() on a ICanvasObjectGroup. Some important object groups are

Other important object groups can be acessed via the com.yworks.graph.model.GraphModelManager: Where gmm is the instance of the GraphModelManager

Note that changing the display order does not change the order for hit testing.

Draw edges behind grouped nodes

When using a grouped graph, edges are drawn in front of nodes.Since yFiles FLEX 1.5 the GraphModelManager offers the property drawEdgesBehindGroupedNodes that can be set to true to render the edges behind the nodes.

Categories this article belongs to:
yFiles FLEX > Displaying and Editing Graphs > Graph Structure
yFiles FLEX > Displaying and Editing Graphs > Visual Representation of Graph Elements
Applies to:
yFiles FLEX: 1.3, 1.4, 1.5, 1.6
Keywords:
ICanvasObject - ICanvasObjectGroup - drawing order - z-order - GraphModelManager - to front - to back - toFront - toBack