Programmatic Tools

Zoom

Node zoom limit

Decorator zoom limit

The nodeZoomLimit and decoratorZoomLimit are two properties of the Visualizer used to control the maximum ratio for nodes and decorators. This ratio limit should be superior or equal to 1.

This is useful to display data that should be centred and visible to the user whatever the zoom level is (Map drill down for example).

The following example gives an idea about how to use these properties:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:visualizer="fr.kapit.visualizer.*"
			   >
	<fx:Declarations>
		<fx:XML id="dp" xmlns="">
			<graphml>
				<node id="n1" name="Ilyes" age="28"/>
				<node id="n2" name="Cyril" age="50"/>
				<node id="n3" name="Jack" age="45"/>
				<node id="n4" name="Steeve" age="25"/>
				<edge id="e1" source="n1" target="n2"/>
				<edge id="e2" source="n2" target="n3"/>
				<edge id="e3" source="n2" target="n4"/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	<visualizer:Visualizer id="vis" width="100%" height="100%"
						   dataProvider="{dp}"
						   layout="hierarchicalCyclic"
						   nodeLabelFields="name"
						   nodeDecoratorLabelFields="age"
						   nodeZoomLimit="2"
						   decoratorZoomLimit="3"
						   />
</s:Application>

View Constraints

The viewConstraints is a property of the Visualizer used to add conditions to the Visualizer zoom policies when a custom layer is added.
Thus, all custom layer children would be displayed according to these constraints.

This property takes an instance of ViewContraints class which has the following properties:

Property Description
leftOffset Left minimum limit for the custom layer display.
rightOffset Right minimum limit for the custom layer display.
topOffset Top minimum limit for the custom layer display.
bottomOffset Bottom minimum limit for the custom layer display.
considerGraph Indicates if the Diagram should be considered in bounds computation.
useBitmapComputation Indicates if bounds should be computed using visual items bounds.

The following example gives an idea about how to use these constraints:

The Custom Layer BackLayer

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" >
	<s:Rect width="100%" height="100%">
		<s:fill>
			<s:SolidColor color="0xFF0000"/>
		</s:fill>
	</s:Rect>
</s:Group>

Test Application

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:visualizer="fr.kapit.visualizer.*" 
			   width="100%" height="100%"
			   creationComplete="creationCompleteHandler(event)">
	<fx:Declarations>
		<fx:XML id="dp" xmlns="">
			<graphml>
				<node id="n1" name="Ilyes" age="28"/>
				<node id="n2" name="Cyril" age="50"/>
				<node id="n3" name="Jack" age="45"/>
				<node id="n4" name="Steeve" age="25"/>
				<edge id="e1" source="n1" target="n2"/>
				<edge id="e2" source="n2" target="n3"/>
				<edge id="e3" source="n2" target="n4"/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import fr.kapit.visualizer.layers.CustomLayer;
			import fr.kapit.visualizer.managers.beans.ViewContraints;
			
			import mx.events.FlexEvent;
			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				var constraints:ViewContraints = new ViewContraints();
				constraints.topOffset = 100;
				constraints.rightOffset =100;
				constraints.bottomOffset = 100;
				constraints.leftOffset = 100;
				constraints.considerGraph = true;
				constraints.useBitmapComputation = true;
				
				vis.viewConstraints = constraints;
			}
			
			protected var cLayer:CustomLayer;
			protected var bLayer:BackLayer;
			protected function vis_preinitialize(event:FlexEvent):void
			{
				bLayer = new BackLayer();
				cLayer = vis.addLayerAt() as CustomLayer;
				cLayer.addChild(bLayer);
				bLayer.width = width;
				bLayer.height = height;
			}
			
		]]>
	</fx:Script>
	<visualizer:Visualizer id="vis" width="100%" height="100%" 
						   dataProvider="{dp}"
						   nodeLabelFields="name"
						   minZoomRatio="0.01"
						   nodeDecoratorLabelFields="age"
						   preinitialize="vis_preinitialize(event)"
						   />
</s:Application>