Attachment

在Java版本中提供的iconAttachment机制可以在网元的任意位置放置n个图标或文字，如下图所示

在Flex版本中，用于也可以通过以下方式实现在网元上显示icon的功能

1
server1.setStyle(Styles.ICONS_NAMES, ["att5","att6", "att7","att8"]);
2
server1.setStyle(Styles.ICONS_POSITION, Consts.POSITION_BOTTOMRIGHT_TOPRIGHT);
3
server1.setStyle(Styles.ICONS_ORIENTATION, Consts.ORIENTATION_TOP);
4
server1.setStyle(Styles.ICONS_XOFFSET, 5);


Flex版本的默认实现并没有提供在多个postion添加icon的功能
但是借助FlexMVC设计非常好的灵活性，可以很容易的扩展出这个功能，如下图所示


主要借助了TWaver中的Attachment机制，可以创建多个iconAttachment用来显示不同位置的图标

代码下载
attachment

有兴趣的同学也可以实现下不同位置不同方向的attachment
主要修改CustomIconAttachment的以下两个方法即可
private function getIconsSize(names:Array, orientation:String, xgap:Number, ygap:Number):Size
override public function draw(graphics:Graphics):void

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				creationComplete="init();"
				layout="absolute"
				width="100%"
				height="100%"
				xmlns:tw="http://www.servasoftware.com/2009/twaver/flex">
	<mx:Script>
		<![CDATA[
			import attachment.CustomNode;

			import twaver.Consts;
			import twaver.Node;
			import twaver.Styles;
			import twaver.Utils;
			[Embed(source="images/1.png")]
			public static const image1:Class;
			[Embed(source="images/2.png")]
			public static const image2:Class;
			[Embed(source="images/3.png")]
			public static const image3:Class;
			[Embed(source="images/4.png")]
			public static const image4:Class;
			[Embed(source="images/5.png")]
			public static const image5:Class;
			[Embed(source="images/6.png")]
			public static const image6:Class;
			[Embed(source="images/7.png")]
			public static const image7:Class;

			private function init():void {
				Utils.registerImageByClass("image1", image1);
				Utils.registerImageByClass("image2", image2);
				Utils.registerImageByClass("image3", image3);
				Utils.registerImageByClass("image4", image4);
				Utils.registerImageByClass("image5", image5);
				Utils.registerImageByClass("image6", image6);
				Utils.registerImageByClass("image7", image7);

				var n:CustomNode=new CustomNode();
				n.width=100;
				n.height=100;

				createAttachment(n, Consts.POSITION_BOTTOM);
				createAttachment(n, Consts.POSITION_TOP);
				createAttachment(n, Consts.POSITION_LEFT);
				createAttachment(n, Consts.POSITION_RIGHT);
				network.elementBox.add(n);
			}

			private function createAttachment(n:CustomNode, p:String):void {
				var c:int=int(Math.random() * 4 + 3);
				for (var i:int=1; i < c; i++) {
					n.addIconAttachment("image" + i, p);
				}
			}
		]]>
	</mx:Script>
	<tw:Network id="network"
				backgroundColor="0xFFFFFF"
				width="100%"
				height="100%"/>
</mx:Application>

package attachment {
	import flash.display.Graphics;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.geom.Rectangle;

	import twaver.*;
	import twaver.network.ui.Attachment;
	import twaver.network.ui.ElementUI;

	public class CustomIconAttachment extends Attachment {
		private var _icons:ICollection;
		private var _postion:String;

		public function CustomIconAttachment(elementUI:ElementUI, showInAttachmentCanvas:Boolean=false) {
			super(elementUI, showInAttachmentCanvas);
		}


		public function get postion():String {
			return _postion;
		}

		public function set postion(value:String):void {
			_postion=value;
		}

		public function get icons():ICollection {
			return _icons;
		}

		public function set icons(value:ICollection):void {
			_icons=value;
		}

		private function getIconsSize(names:Array, orientation:String, xgap:Number, ygap:Number):Size {
			var x:Number=0;
			var y:Number=0;
			var rect:Rectangle=null;
			var imageAsset:IImageAsset=null;
			var unionRect:Rectangle=null;
			for each (var name:String in names) {
				imageAsset=Utils.getImageAsset(name, false);
				if (imageAsset == null) {
					continue;
				}
				if (orientation == Consts.ORIENTATION_RIGHT) {
					rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
					x+=rect.width + xgap;
				} else if (orientation == Consts.ORIENTATION_LEFT) {
					rect=new Rectangle(x - imageAsset.width, y, imageAsset.width, imageAsset.height);
					x-=rect.width + xgap;
				} else if (orientation == Consts.ORIENTATION_TOP) {
					rect=new Rectangle(x, y - imageAsset.height, imageAsset.width, imageAsset.height);
					y-=rect.height + ygap;
				} else if (orientation == Consts.ORIENTATION_BOTTOM) {
					rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
					y+=rect.height + ygap;
				} else {
					throw new Error("Can not resolve '" + orientation + "' orientation");
				}
				if (unionRect == null) {
					unionRect=rect;
				} else {
					unionRect=unionRect.union(rect);
				}
			}
			if (unionRect != null) {
				return new Size(Math.abs(unionRect.width), Math.abs(unionRect.height));
			}
			return null;
		}

		/**
		 * @inheritDoc
		 *
		 */
		override public function draw(graphics:Graphics):void {
			super.draw(graphics);

			if (icons == null || icons.count == 0) {
				return;
			}

			var orientation:String=element.getStyle(Styles.ICONS_ORIENTATION);
			var xoffset:Number=element.getStyle(Styles.ICONS_XOFFSET);
			var yoffset:Number=element.getStyle(Styles.ICONS_YOFFSET);
			var xgap:Number=5; 
			var ygap:Number=5; 
			var iconsSize:Size=getIconsSize(icons.toArray(), orientation, xgap, ygap);
			var location:Point=this.network.getPosition(this.postion, this.elementUI, iconsSize, xoffset, yoffset);
			if (orientation == Consts.ORIENTATION_TOP) {
				location.y+=iconsSize.height;
			} else if (orientation == Consts.ORIENTATION_LEFT) {
				location.x+=iconsSize.width;
			}

			var x:Number=0;
			var y:Number=0;
			var index:int=0;
			for each (var name:String in icons.toArray()) {
				var rect:Rectangle=null;
				var imageAsset:IImageAsset=Utils.getImageAsset(name, false);
				if (imageAsset == null) {
					continue;
				}
				if (orientation == Consts.ORIENTATION_RIGHT) {
					rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
					x+=rect.width + xgap;
				} else if (orientation == Consts.ORIENTATION_LEFT) {
					rect=new Rectangle(x - imageAsset.width, y, imageAsset.width, imageAsset.height);
					x-=rect.width + xgap;
				} else if (orientation == Consts.ORIENTATION_TOP) {
					rect=new Rectangle(x, y - imageAsset.height, imageAsset.width, imageAsset.height);
					y-=rect.height + ygap;
				} else if (orientation == Consts.ORIENTATION_BOTTOM) {
					rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
					y+=rect.height + ygap;
				} else {
					throw new Error("Can not resolve '" + orientation + "' orientation");
				}
				rect.x+=location.x;
				rect.y+=location.y;

				var matrix:Matrix=new Matrix();
				matrix.translate(rect.x, rect.y);
				graphics.lineStyle();
				graphics.beginBitmapFill(imageAsset.getBitmapData(), matrix, false);
				graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
				graphics.endFill();
			}
		}
	}
}

package attachment {
	import flash.utils.Dictionary;

	import twaver.Collection;
	import twaver.Consts;
	import twaver.ICollection;
	import twaver.Node;

	public class CustomNode extends Node {
		private var attMap:Dictionary=new Dictionary();

		public function CustomNode(id:Object=null) {
			super(id);
		}

		public function addIconAttachment(icon:String, position:String):void {
			var list:ICollection=attMap[position] as Collection;
			if (list == null) {
				list=new Collection();
				attMap[position]=list;
			}
			list.addItem(icon);
			this.dispatchPropertyChangeEvent("iconAttachment", true, false);
		}

		public function removeIconAttachment(icon:String, position:String):void {
			var list:ICollection=attMap[position] as Collection;
			if (list == null) {
				return;
			}
			if (list.contains(icon)) {
				list.removeItem(icon);
				this.dispatchPropertyChangeEvent("iconAttachment", true, false);
			}
		}

		public function get iconAttachments():Dictionary {
			return attMap;
		}

		override public function get elementUIClass():Class {
			return CustomNodeUI;
		}
	}
}

package attachment {
	import flash.utils.Dictionary;

	import twaver.Collection;
	import twaver.ICollection;
	import twaver.Node;
	import twaver.network.Network;
	import twaver.network.ui.NodeUI;

	public class CustomNodeUI extends NodeUI {
		public function CustomNodeUI(network:Network, node:Node) {
			super(network, node);
		}

		override public function checkAttachments():void {
			super.checkAttachments();
			checkIconAttachment();
		}

		private var attMap:Dictionary=new Dictionary();

		private function checkIconAttachment():void {

			var cNode:CustomNode=node as CustomNode;
			var atts:Dictionary=cNode.iconAttachments;

			var key:Object;
			for (key in atts) {
				var attList:ICollection=atts[key] as Collection;
				createAttachment(attList, key.toString());
			}

			for (key in attMap) {
				if (atts[key] == null) {
					var att:CustomIconAttachment=attMap[key];
					this.removeAttachment(att);
				}
			}
		}

		private function createAttachment(icons:ICollection, position:String):CustomIconAttachment {
			var iconAtt:CustomIconAttachment
			if (attMap[position] != null) {
				iconAtt=attMap[position];
				iconAtt.icons=icons;
				iconAtt.postion=position;
			} else {
				iconAtt=new CustomIconAttachment(this);
				iconAtt.icons=icons;
				iconAtt.postion=position;
				attMap[position]=iconAtt;
				this.addAttachment(iconAtt);
			}


			return iconAtt;
		}
	}
}