Using IAnchorable interface

IAnchorable is the interface implemented by a node renderer to give it link anchoring capabilities. It allows to specify anchors positions via an AnchorsDescriptor instance. The anchors will be set as links end points if the property useStrictAnchoring is set to true, otherwise they are only used to activate LinkAction.

Using AnchorsDescriptor to define anchors

Anchors are described using an AnchorsDescriptor instance. They can represent a list of ports or a whole path.

Anchors described by a list of ports

To define a list of anchors, the AnchorsDescriptor instance should have the type property set to 'list'. The anchors positions are described in the property anchorsList, which is a vector concatenating anchors coordinates x and y are between 0 and 1 to describe the position relatively to total width and total height respectively. The following example declares a list of anchors:

var myAnchorsDescriptor:AnchorsDescriptor = new AnchorsDescriptor();
myAnchorsDescriptor.anchorPoints = Vector.<Number>([0.5,0,1,0.5,0.5,1,0,0.5]);
myAnchorsDescriptor.type = 'list';

Anchors described by a path

Anchors can be defined by a path so that every point in the path can be set as an endpoints for a link. In this case, the AnchorsDescriptor instance should have the type property set to 'path'. The anchors are defined by a path vector and a commands path that will be used to draw it. The following example describes an anchoring path:

var myAnchorsDescriptor:AnchorsDescriptor = new AnchorsDescriptor();
myAnchorsDescriptor.path = Vector.<Number>([0,0,width,0,width,height,0,height,0,0]);
myAnchorsDescriptor.commands = Vector.<int>([1,2,2,2,2])
myAnchorsDescriptor.type = 'path';

The following file defines a node renderer implementing IAnchorable.

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  implements="fr.kapit.visualizer.renderers.IAnchorable"
		  width="100" height="50">
	<fx:Script>
		<![CDATA[
			import fr.kapit.visualizer.renderers.IAnchorable;
			import fr.kapit.visualizer.utils.AnchorsDescriptor;
			
			private var _anchors:AnchorsDescriptor;

			public function get anchors():AnchorsDescriptor
			{
				var anchorsList:Vector.<Number> = Vector.<Number>([0.5,0,1,0.5,0.5,1,0,0.5]);
				if(!_anchors)
					_anchors = new AnchorsDescriptor();
				_anchors.anchorPoints = anchorsList;
				_anchors.type = 'list';
				return _anchors;
			}

			public function set anchors(value:AnchorsDescriptor):void
			{
				_anchors = value;
			}

			private var _useStrictAnchoring:Boolean=true;

			public function get useStrictAnchoring():Boolean
			{
				return _useStrictAnchoring;
			}

			public function set useStrictAnchoring(value:Boolean):void
			{
				_useStrictAnchoring = value;
			}

		]]>
	</fx:Script>
</s:Button>