<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 xmlns:diagctl="com.kapit.diagram.controls. 
 xmlns:diagview="com.kapit.diagram.view.
 layout="absolute" preinitialize="init();" xmlns:proxies="com.kapit.diagram.proxies.>
 
<mx:XML xmlns="" id="svglib">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:k="http://schemas.kapit.fr/svg/2007/" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.0" width="1024" height="800" id="sgvlib">
<defs id="defs1">
<style type="text/css">
<![CDATA[
.basic { 
action-accept:annotation;
}
.bg { 
action-click:link;
action-accept:link;
}
]]>
</style>
</defs>
<g
 k:spriteid="rounded-rectangle"
 k:groupid="Basic"
 id="grrectangle"
 class="basic" transform="translate(116.20044,0)">
 <rect
  style="fill:#e1eaf5;fill-opacity:0.8;stroke:#6996cf;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
  id="rect3157"
  y="18.47105" x="137.22656"
  rx="10" ry="10"
  height="60.609154" width="98.994949" />
    <path
       class="bg"
       id="rect31552"
       style="fill:none;fill-opacity:0;stroke:#6996cf;stroke-width:3;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0"
       d="M 137.22656,18.47105 L 236.22151,18.47105 L 236.22151,79.080204 L 137.22656,79.080204 L 137.22656,18.47105 z" />  
</g>
</svg>
</mx:XML> 
<mx:Script>
 <![CDATA[

  import com.kapit.diagram.library.SVGAssetLibrary;

  import com.kapit.diagram.proxies.KDLProxy;
  import com.kapit.diagram.layouts.utils.Constants;  

  private var proxy:KDLProxy;
            
        [Bindable]
        public var LAYOUT_ARRAY:Array = [
            {label:"Circular", data:Constants.CIRCULAR_LAYOUT},
            {label:"Hierarchical Tree", data:Constants.HIERARCHICAL_LAYOUT},
            {label:"Radial", data:Constants.RADIAL_LAYOUT},
            {label:"Balloon", data:Constants.BALLOON_LAYOUT},
            {label:"Hierarchical-Cyclic", data:Constants.SUGIYAMA_LAYOUT}, 
            {label:"Static Organic", data:Constants.STATIC_GEM_LAYOUT},
            {label:"Animated Organic", data:Constants.ANIMATED_FORCEDIRECTED_LAYOUT},
            {label:"Orthogonal", data:Constants.ORTHOGONAL_LAYOUT}            
        ];
            
  public function init():void
  {
   var lib:SVGAssetLibrary=new SVGAssetLibrary(svglib);
  }
  public function initDiagram():void
  {
   diagram.multipanel=false;
   diagram.selectionenabled=true;
   diagram.keyboardenabled=true;
   diagram.dragenabled=true;
   diagram.dropenabled=true;   
   
   proxy = new KDLProxy(diagram);
   proxy.importGraph();
   proxy.exportGraph(LAYOUT_ARRAY[0].data);
   params.diagramProxy = proxy;
  } 
   
        private function closeHandler(event:Event):void {
   proxy.exportGraph(ComboBox(event.target).selectedItem.data);
   params.diagramProxy = proxy;
        }   
 ]]>
</mx:Script>
<mx:ApplicationControlBar  width="100%" height="50" horizontalAlign="right">
<diagctl:SVGAssetLibraryGroupButton width="150" groupid="Basic" 
  cornerRadius="10" paddingLeft="8" paddingBottom="0" paddingTop="0"
  useHandCursor="true" toolTip="Drag & drop" labelPlacement="right" textAlign="left"/>
</mx:ApplicationControlBar>
<mx:HBox left="10" top="60" bottom="10" right="10" horizontalGap="10">
<mx:VBox>
        <mx:ComboBox dataProvider="{LAYOUT_ARRAY}" width="150" color="0x000000"
            close="closeHandler(event);"/>
<proxies:GenericDialog id="params" autoLayout="true"> 
</proxies:GenericDialog>
</mx:VBox>

<diagview:DiagramView width="100%" height="100%" id="diagram" creationComplete="initDiagram();">
</diagview:DiagramView>
</mx:HBox>
</mx:Application>