Overview

The Overview component is a tool that can be used in association with a visualizer to have an overview on all the visualizer nodes, groups and links. A rectangle inside the overview indicates the visible region on the visualizer.

The following example gives an idea about how to use the overview component:
<?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.*"
			   xmlns:overview="fr.kapit.visualizer.tools.overview.*"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<fx:XML id="dp" xmlns="">
			<graphml>
				<node id="n1" name="Group1">	
					<graph id="n1">
						<node id="n2" name="Jack" age="45"/>	
						<node id="n3" name="Steeve" age="25"/>
						
					</graph>
				</node>
				<node id="n4" name="Ilyes" age="28"/>
				<node id="n5" name="Cyril" age="50"/>
				<edge id="e1" source="n5" target="n2"/>
				<edge id="e2" source="n2" target="n4"/>
				<edge id="e4" source="n5" target="n3"/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	<visualizer:Visualizer id="vis" width="100%" height="100%"
						   dataProvider="{dp}"
						   layout="hierarchicalCyclic"
						   groupLabelField="name"
						   />
	<s:Panel title="Overview">
		<overview:Overview id="ov" visualizer="{vis}" x="0" y="0" width="100" height="100"/>
	</s:Panel>	
</s:Application>

Overview rendering

Overview rendering refers to the way overview nodes and links are drawn. Default node rendering and link rendering is customizable through style properties such as itemColors, linkColor and selectedItemColors. The developer can also create his own item renderer for the overview and specify it using the nodeRendererClass property. The item renderer should implement the IOverviewItemRenderer interface. If we also want to display highlighted and selected status on overview, the item renderer class should implement the ISelected interface.

The following example shows a custom item renderer for the overview:
package overview
{
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.geom.Matrix;
	import flash.text.TextField;
	
	import fr.kapit.visualizer.tools.overview.IOverviewItemRenderer;
	
	import mx.core.UIComponent;
	
	public class OverviewNodeRenderer extends Sprite implements IOverviewItemRenderer
	{
		private var _width:Number;
		private var _height:Number;
		
		private var _isGroup:Boolean;
		public function set isGroup(value:Boolean):void
		{
			_isGroup = value;
		}
		private var _data:Object
		public function set data(value:Object):void
		{
			_data= value
			if(!_data)
				return;
			draw();
			
		}
		public  function get data():Object
		{
			return _data;
			
		}
		public override function get width():Number
		{
			return _width;
		}
		
		public override function set width(value:Number):void
		{
			_width = value;
		}
		
		public override function get height():Number
		{
			return _height;
		}
		
		public override function set height(value:Number):void
		{
			_height = value;
		}
		public function OverviewNodeRenderer()
		{			
		}
		
		private var text:TextField;
		public function draw():void
		{
			var g:Graphics = graphics;
			var gradientMatrix:Matrix = new Matrix();
			gradientMatrix.createGradientBox(_width, _height,Math.PI*0.5,0,0);
			g.clear();
			g.lineStyle(1,0,1);
			if(_isGroup)
				g.drawEllipse(0,0,_width,_height);
			else
			{
				g.beginGradientFill('linear',[0x555500,0xaaaa00],[1,0.3],[0,255],gradientMatrix);
				g.drawEllipse(0,0,_width,_height);
				g.endFill();
			}		
		}
	}
}