<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
    <mx:Script>
      <![CDATA[
      // import DrawingClasses.Designer;
      import mx.core.DragSource;
      import mx.managers.DragManager;
      import mx.events.DragEvent;
      import com.adobe.viewsource.ViewSource;
      
      [Bindable]
      [Embed(source="graphic-flex-diagram-assets-line.png")] 
      public var linePicture:Class; 
      [Bindable]
      [Embed(source="graphic-flex-diagram-assets-box.png")] 
      public var boxPicture:Class; 
      
      private var xOff:Number;
      private var yOff:Number;          
      private var designer:graphic_flex_diagram_class_Designer = new graphic_flex_diagram_class_Designer();   
      
      public function initApp():void{
        designer.setDesignArea(designArea);
      }
      // this methods sets x,y coordinate of new box
      public function pictureDragDrop(event:DragEvent):void{                    
        var x:int = event.currentTarget.mouseX - xOff;
        var y:int = event.currentTarget.mouseY - yOff;       
        designer.addBox(x,y);           
      } 
      // this method gets x and y coordinate of template box image
      private function myoffset(img:Image):void {
        xOff = img.mouseX;
        yOff = img.mouseY;
      }
  
      // this method does acceptable draging box image
      public function pictureDragEnter(event:DragEvent):void{
        DragManager.acceptDragDrop(Canvas(event.target));        
      }
      
      // this method supply drag box when mose move on the design area 
      private function dragPicture(event:MouseEvent, img1:Image,format:String):void{
        var dragInitiator:Image=Image(event.currentTarget);
        var ds:DragSource = new DragSource();
        ds.addData(img1,format);
        var imageProxy:Image = new Image();
        imageProxy.source = img1.source;            
        imageProxy.height= 150;
        imageProxy.width= 150;
        DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
      }      
      // this method works when click on the line button 
      // it is make enable to draw line
             public function doDrawEnable():void{
               designer.setIsDrawEnable(true);
             }
      ]]>
    </mx:Script>
    <mx:Canvas id="MainArea" width="100%" height="100%">
        <mx:Image id="box" source="@Embed(source='graphic-flex-diagram-assets-box.png')" mouseMove="dragPicture(event, box, 'img');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
        <mx:Label text="Drag this picture on the gray area" x="10" y="36"></mx:Label>
        <mx:Canvas id="lineContanier" width="28" height="28" backgroundColor="#c0c0c0" x="279" y="10">
        </mx:Canvas>
        <mx:Label text="Click for draw line between two box" x="225" y="36"></mx:Label>
      <mx:Canvas id="designArea" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" top="55" width="100%" height="100%" backgroundColor="#c0c0c0">      
      </mx:Canvas>
      <mx:Image id="line" source="@Embed(source='graphic-flex-diagram-assets-line.png')" width="28" height="28" click="doDrawEnable()" x="279" y="10"></mx:Image>
    </mx:Canvas>
  </mx:Application>