InfiView Grouping

What is Grouping

When drawing advanced diagrams/graphs the visual representation could be improved and more easily understandable if the possibility to group nodes exist. Groups can be used to move several nodes at the same time and also to hide nodes to reduce complexity and clutter. Hiding away nodes into collapsed groups also saves memory since those nodes no longer has to be visible on-screen. InfiView has two different kind of group mechanisms that could be used by the developer to enable such features in an InfiView application.

Grouping in InifView

Grouping in InfiView is implemented using a set of special group nodes. These group nodes are simply ordinary InfiView nodes with some additional properties. The most important extra property of group nodes is the “members” property which is a list of nodes that are members of the group. Because group nodes are just standard nodes they can be given custom graphical appearance.

In InfiView there are two different types of groups namely:

Size and “memberArea”

The size and position of a group node is the area that surrounds its member nodes plus an extra member margin.

If you want to give yourself some extra marginal space inside the group, you can do this with the “memberArea” property. This can be very useful for situations when you want special controls attached to the group itself, such as buttons and labels. Member area margin is defined by the four properties; “memberAreaLeft”, “memberAreaTop”, “memberAreaRight” and “memberAreaBottom”.

InfiView Groups

The various memberArea and size properties of group nodes in InfiView

The Foldable Group

This is a type of group that can be collapsed and expanded to hide and show members.

InfiView Foldable Groups

Two foldable groups: expanded to the left and collapsed to the right

Creating a Foldable Group

A foldable group node can be defined in the InfiView markup by using the "GroupNodeType" tag and specifying properties for member area margin.


<iv:GroupNodeType 
	id="group" memberAreaTop="60" memberAreaLeft="10" 	
	memberAreaRight="10" memberAreaBottom="10">
	<iv:Viewport>
		var l = new BiLabel;
		l.setBorder(new BiBorder(1, "dashed", "#888888"));
		l.setBackColor("#DDDDDD");
		l.setOpacity(0.5); //Otherwise the edges wouldn't show.
		return l;
	</iv:Viewport>      
</iv:GroupNodeType>

Once a real node is created out of this GroupNodeType you get a GroupNode object of type &infiview.GroupNode&. The GroupNode contains methods for adding and removing members but also expanding and collapsing the group.

Observe that when a group of this type is collapsed the visual representation of the members is disposed. It is up to you to decide when the group is to be collapsed or expanded. This can be done by calling methods on the GroupNode object. It is also possible to toggle the folding mode by posting an &expandcollapse& event to the GroupNode's visual representation. It can be done like this:


<iv:GroupNodeType ... >
	<iv:Viewport >
		var l = new BiLabel;
		l.addEventListener("click", function(e) { 
			e.getTarget().dispatchEvent("expandcollapse"); 
		});
...

The ZommFactor Dependent (ZFD) Group

A ZFD group will destroy the visual representation of its members when certain zoom factory criteria are met. This can be useful for example when you have zoomed out to the extent where the nodes become too small to be usable. At this point it is might be better to destroy the nodes visual representation to not consume valuable memory resources. This is what the ZFD group does automatically for you.

Creating a ZFD group

A ZFD group can be defined in the InfiView markup by using the “ZoomGroupNodeType ” and supplying properties for member area margin and “zoomFactorLimit ”.


<iv:ZoomGroupNodeType id="zoomGroup" zoomFactorLimit="0.25">
   <iv:Viewport>
       var l = new BiLabel;
       l.setBorder(new BiBorder(1, "dashed", "#888888"));
       l.setBackColor("#DDDDDD");
       return l;
   </iv:Viewport>
      </iv:ZoomGroupNodeType>

The default node instance created by the ZoomGroupNodeType will be of type "infiview.ZoomGroupNode". When the zoomfactor of the viewport is less than or equal to the zoomFactorLimit of the ZFD group; its visual representation will be unavailable.

Limitations

Tips

The ZFD group can be used to improve the performance when a huge amount of nodes is about to visible when zooming out. If a simple html representation is used (like a BiLabel) for the group, the performance will be improved even more.

Manual Grouping Demo

CLICK to run the GroupTest demo

Step 1

InfiView Groups

Step 2

InfiView Groups

Step 3

InfiView Groups

Automatic Zoom-Based Grouping Demo

CLICK to run the ZoomGroupTester demo

Step 1

InfiView Groups

Step 2

InfiView Groups