Using IAnchorable interface

This interface allows to define for each node the positions, called anchors, where links can be anchored. These anchors can be used when adding links programmatically by specifying the sourceAnchorIndex and targetAnchorIndex arguments in the addLinkElements method. When a node is resized or displaced, the anchoring position does not change.

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 so that 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.([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 every point in the path can be set as an end point 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 describe an anchoring path:

<?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>