Creating lib process via Drop Action and nodeRendererFunction

A custom Lib process can be created by combining DropAction and nodeRendererFunction property. In fact, a simple way to do this is to use a simple List component whose elements have the property elementProperty. When we drop the element in a Diagrammer that has a node rendering function, the element data can be used in the function to create an itemRenderer for the created node according to elementProperty. The following example illustrates better what is described above:

<?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:diagrammer="fr.kapit.diagrammer.*">
	<fx:Script>
		<![CDATA[
			import fr.kapit.visualizer.base.ISprite;
			import fr.kapit.visualizer.events.VisualizerEvent;
			
			import mx.containers.Canvas;
			private function myRendererFunction(value:Object):Canvas
			{
				var o:Canvas = new Canvas();
				o.setStyle('backgroundColor',value.color);
				o.setStyle('cornerRadius',value.roundRadius);
				o.width=60;
				o.height=60;
				return o;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:ArrayCollection id="myLib">
			<fx:Object type="RectangleBlue" color="0x0000FF" roundRadius="0"/>
			<fx:Object type="RectangleRed" color="0xFF0000" roundRadius="0"/>
			<fx:Object type="EllipseBlue" color="0x00FFFF" roundRadius="30"/>
			<fx:Object type="RoundRectangle" color="0xFF00FF" roundRadius="5"/>
		</s:ArrayCollection>
	</fx:Declarations>
	<mx:HBox width="100%" height="100%">
		<mx:VBox width="200" height="100%">
			<s:List dataProvider="{myLib}" dragEnabled="true" labelField="type"/>
			<s:Label text="Note : Drag and Drop items from the List"/>
		</mx:VBox>
		<diagrammer:Diagrammer
			width="100%"
			height="100%"
			nodeRendererFunction="myRendererFunction"
			/>
	</mx:HBox>
	
</s:Application>