Controller interaction

Controllers are used to allow the user to interact with Diagrammer elements, for instance nodes, links and decorators. Nodes and decorators controllers allow resizing by dragging their knobs, while links controllers allow changing the link path by dragging knobs which correspond to control points.

Customizing controllers

Controllers can be customized by using Diagrammer styles related to nodes controllers and links controllers such as nodeControllerBorderColor, nodeControllerBorderThicknes, nodeControllerBorderAlpha, nodeControllerKnobColor, linkControllerKnobColor and linkControllerKnobBorderColor. If an advanced rendering capability is needed, for example if we want to use an image for knobs, a new knob class that implement the IKnob interface, and integrate in Diagrammer through the DiagramFactory class. We also can create a new controller class that implements IController for nodes or the IDiagramLinkController interface for links and integrate it through the DiagramFactory class.

The following example gives an idea about how to create a new controller with node rotation:
package editionExperience.controllerInteraction
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import fr.kapit.diagrammer.artifacts.IKnob;
	import fr.kapit.diagrammer.controls.IController;
	import fr.kapit.visualizer.base.IItem;
	import fr.kapit.visualizer.base.ISprite;
	
	public class CustomNodeController extends Sprite implements IController
	{
		public function CustomNodeController()
		{
			super();
			addEventListener(Event.ADDED_TO_STAGE,handleAddedToStage);
		}
		
		private var _item:IItem;
		public function get item():IItem
		{
			return _item;
		}
		
		public function set item(value:IItem):void
		{
			_item = value;
		}

		protected function handleAddedToStage(event:Event):void
		{
			addChildren();
		}
		
		private var knob:IKnob;
		private function addChildren():void
		{
			knob = _item.visualizer.itemsFactory.getObject('spriteKnob') as IKnob;
			knob.placement = 0;
			knob.length = 5;
			knob.shape = 'circle';
			DisplayObject(knob).addEventListener(MouseEvent.MOUSE_DOWN,handleStartRotation);
			addChild(DisplayObject(knob));
		}
		
		private function handleStartRotation(event:MouseEvent):void
		{
			stage.addEventListener(MouseEvent.MOUSE_MOVE,handleRotate);
			stage.addEventListener(MouseEvent.MOUSE_UP,handleEndRotation);
		}
		private function handleEndRotation(event:MouseEvent):void
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE,handleRotate);
			stage.removeEventListener(MouseEvent.MOUSE_UP,handleEndRotation);
		}
		private function handleRotate(event:MouseEvent):void
		{
			DisplayObject(_item).rotation+=5;
			rotation = DisplayObject(_item).rotation;
		}
		public function draw():void
		{
			knob.x = ISprite(_item).width;
			knob.y = ISprite(_item).height;
			knob.draw();
		}
		
	}
}
The following code integrates the previous custom node controller in a project using Diagrammer:
<?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" minWidth="955" minHeight="600" xmlns:visualizer="fr.kapit.visualizer.*" xmlns:diagrammer="fr.kapit.diagrammer.*"
			   
			   >
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

			protected function diagrammer1_creationCompleteHandler(event:FlexEvent):void
			{
				diagramer.itemsFactory.addOrReplaceClassReference('spriteController',CustomNodeController);
			}

		]]>
	</fx:Script>
	<fx:Declarations>
		<fx:XML id="dp" xmlns="">
			<graphml>
				<node id="n1" name="Michael" age="30"/>	
				<node id="n2" name="Jack" age="45"/>	
				<node id="n3" name="Steeve" age="25"/>
				<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="e3" source="n2" target="n1"/>
				<edge id="e4" source="n5" target="n3"/>
			</graphml>
		</fx:XML>
	</fx:Declarations>
	<diagrammer:Diagrammer id="diagrammer" width="100%" height="100%" dataProvider="{dp}" layout="hierarchicalTree" creationComplete="diagrammer1_creationCompleteHandler(event)"/>
</s:Application>