Visual Representation of Graph Elements

The visual representation of group nodes in a folding-enabled graph typically provides some kind of handle to enable a user to interactively toggle a group node's collapse/expand state.

Class CollapsibleNodeStyleDecorator is a special INodeStyle implementation that allows to decorate arbitrary node styles such that they support an additional collapse/expand handle. By default, this handle is rendered as a plus ("+") sign when in collapsed state, and a minus ("-") sign when in expanded state.

Example 5.7, “Setting the default group node style in the master graph” presents the setup for a group node style using this decorator.

Example 5.7. Setting the default group node style in the master graph

// 'fm' is of type yWorks.yFiles.UI.Model.FoldingManager.

fm.MasterGroupedGraph.GroupNodeDefaults.Style =
  new CollapsibleNodeStyleDecorator(new PanelNodeStyle(Colors.LightSkyBlue));


In order to get the additional collapse/expand handle for the expanded group nodes in a managed view, CollapsibleNodeStyleDecorator needs to be set for the original (expanded) group nodes in the master graph already. This is due to the FoldingManager's scheme for populating managed views where graph elements from the master graph are copied over using the original element's style.

Figure 5.10, “Group node representation using CollapsibleNodeStyleDecorator” shows the resulting group node representation for an expanded empty group node and a collapsed group node side by side. The collapse/expand state is indicated in the upper left corner of the group nodes: the plus sign for the collapsed state means that there is more to see (there is hidden content).

Figure 5.10. Group node representation using CollapsibleNodeStyleDecorator

Group node representation using CollapsibleNodeStyleDecorator.


The visual representations for a group node's collapsed state and expanded state do not need to be identical. Initially, however, the style that is used to render a collapsed group node in a managed view is the style of the original (expanded) group node from the master graph.

This is the default behavior when using DefaultDummyNodeConverter as the dummy node converter with the FoldingManager. See also the section called “Class FoldingManager”.

To adjust the visualization of the handle that toggles a group node's collapse/expand state, a custom <Style> resource can be registered using the ResourceKey CollapseButtonStyleKey.