10 Replies Latest reply on May 30, 2010 11:26 PM by satyasuppu

    Connect the multiple text values on the canvas with arrows using flex

    satyasuppu Level 1

          Hi,,

       


      Since so many days i am struggling with this issue..Could you please any one help me out on this issue..  

       

      I have a datagrid with some data..I draaged data from datagrid to the Canvas as text value..

       


      What i need to do iss::

       

          Connect these dragged values with arrows and design some flow diagram by adding these values with arrows...want to move these values on canvas to other place in the canvas(drag and drop somewhere in the canvas area.)..Can you please provide me sample example for doing thisss...

       

      Please Please help on this....

       

       

       

      Thanks in advance

        • 1. Re: Connect the multiple text values on the canvas with arrows using flex
          David_F57 Level 5

          hi,

           

          What you are asking for is an application, if you can't find something providing source with a google search you will have to break up your request into the areas of your application that you need advice on, with samples of your code that doesn't behave the way you expected.

           

          David.

          • 2. Re: Connect the multiple text values on the canvas with arrows using flex
            satyasuppu Level 1

            Thanks for your reply..

             

            I am new to flex.Just learning stage..I didn't develop any application..I don't know how to do it flex.I seached in google..but i didn't find any solution..Thats y i asked just sample piece of code to connect these text values with arrows....I just need info how can

            i connect text values which are dragged on canves using arrows..

             

            This is what i did in my application..Please help me on this issue...

             

            <?xml version="1.0" encoding="utf-8"?>


            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="absolute" name="Drag and Drop Tutorial"
              creationComplete="init()" >
              <mx:Script>
                <![CDATA[
                  import mx.controls.Image;
                  import mx.core.DragSource;
                  import mx.core.IUIComponent;
                  import mx.managers.DragManager;
                  import mx.events.DragEvent;
                  import mx.controls.Alert;
                  import mx.controls.Text;
                  import flash.geom.Point;
                 
                  import mx.rpc.events.FaultEvent;
                  import mx.rpc.events.ResultEvent;
                  import mx.collections.ArrayCollection;
                  import oracle.ondemand.diagrammer.*;
                  private var templateLine:Link;
                  [Bindable]
                  private var pictureData:ArrayCollection = new ArrayCollection([
                    {JobName:"A"},{JobName:"B"},{JobName:"C"}, {JobName:"D"},{JobName:"E"},{JobName:"F"},{JobName:"G"}]);

             

                  public function init():void
                  {
                    // a mouseDown event will start the drag     
                    list.dataProvider = pictureData;
                         // accepting a drag/drop operation...
                    this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                    // handling the drop...
                    this.area.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                   // this.area.addEventListener(Event.ADDED, handleAdded);
                    //this.area.addEventListener(Event.REMOVED, handleRemoved);
                   
                  }
                  public function get isLinking():Boolean {
                        return this.templateLine.fromNode != null;
                    }
                  public function beginDrag( mouseEvent:MouseEvent ):void
                  {
                       
                    var dragInitiator:Text = mouseEvent.currentTarget as Text;
                    var dragSource:DragSource = new DragSource();
                   // dsource.addData(this, 'node');
                    dragSource.addData(this.mouseX, 'mouseX');
                    dragSource.addData(this.mouseY, 'mouseY');
                    //parent.addChild(dragImg);
                    //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                    var dragProxy:Text=new Text();
                    dragProxy.text = mouseEvent.currentTarget.text;
                   // Alert.show("Text isss"+dragProxy.text);
                   dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget.height)
                 
                    // ask the DragManger to begin the drag
                    DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy );       
                 
                  }
                 
                  public function acceptDrop( dragEvent:DragEvent ):void
                  {
                    if (dragEvent.dragSource.hasFormat("items"))
                    {
                      DragManager.showFeedback( DragManager.COPY );
                      DragManager.acceptDragDrop(Canvas(dragEvent.currentTarget));
                    }
                  }
                 
                  public function handleDrop( dragEvent:DragEvent ):void
                  {
                    var dragInitiator:IUIComponent = dragEvent.dragInitiator;
                    var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
                    var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                    var pt:Point = new Point(dragEvent.localX, dragEvent.localY); 
                    pt = dragEvent.target.localToContent(pt);
                    var img:Text = new Text();
                      img.x=dragEvent.localX;   img.y=dragEvent.localY;
                   // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                      //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                    img.width = 50;
                    img.height=50;
                    // img.fontSize=20;     // img.source="assets/" + items[0].id + ".png";
                    img.text=items[0].JobName.toString();

             

                    img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);
                    area.addChild(img);
                   
                  }     
                 
                  public var xOff:Number;
                  public var yOff:Number;
                 
                ]]>
              </mx:Script>


              <mx:DataGrid id="list" width="152" height="200" labelField="JobName"
                dragEnabled="true" dataProvider="{pictureData}" mouseDown="beginDrag(event)" dragMoveEnabled="true" y="109" x="39"/>
                <!--<mx:columns>
                  <mx:DataGridColumn dataField="id" id="code"/>
                  <mx:DataGridColumn id="picture" draggable="true" >
                    <mx:itemRenderer>
                      <mx:Component>
                        <mx:Image source="assets/{data.id}.png" mouseDown="outerDocument.beginDrag(event)"/>
                      </mx:Component>
                    </mx:itemRenderer>
                  </mx:DataGridColumn>
                </mx:columns>
              </mx:DataGrid>-->
              <mx:Canvas id="area" width="730" height="520"
                backgroundColor="white" dragDrop="handleDrop(event)"   x="209" y="10">
               
               
              </mx:Canvas>
            </mx:Application>
            • 3. Re: Connect the multiple text values on the canvas with arrows using flex
              TanweerHq

              Hi Satya,

               

              Try this. I have added few lines in your code. Now it will  draw lines between the items as soon as u drop them in canvas.

               

              <?xml  version="1.0" encoding="utf-8"?>
              <mx:Application  xmlns:mx="http://www.adobe.com/2006/mxml"
                 layout="absolute" name="Drag and Drop Tutorial"
                 creationComplete="init()" >
                <mx:Script>
                   <![CDATA[
                    import mx.controls.Image;
                    import  mx.core.DragSource;
                    import mx.core.IUIComponent;
                     import mx.managers.DragManager;
                    import mx.events.DragEvent;
                     import mx.controls.Alert;
                    import mx.controls.Text;
                     import flash.geom.Point;
                  
                    import  mx.rpc.events.FaultEvent;
                    import mx.rpc.events.ResultEvent;
                     import mx.collections.ArrayCollection;
                   /*  import  oracle.ondemand.diagrammer.*;
                    private var templateLine:Link; */
                     [Bindable]
                    private var pictureData:ArrayCollection = new  ArrayCollection([
                      {JobName:"A"},{JobName:"B"},{JobName:"C"},  {JobName:"D"},{JobName:"E"},{JobName:"F"},{JobName:"G"}]);

               

               

               

                    public  function init():void
                    {
                      // a mouseDown event will  start the drag    
                      list.dataProvider = pictureData;
                            // accepting a drag/drop operation...
                       this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                       // handling the drop...
                      this.area.addEventListener(  DragEvent.DRAG_DROP, handleDrop );
                     //  this.area.addEventListener(Event.ADDED, handleAdded);
                       //this.area.addEventListener(Event.REMOVED, handleRemoved);
                    }
                     public function get isLinking():Boolean {
                          return  false;//this.templateLine.fromNode != null;
                      }
                    public  function beginDrag( mouseEvent:MouseEvent ):void
                    {
                         
                      var dragInitiator:Text = mouseEvent.currentTarget as Text;
                       var dragSource:DragSource = new DragSource();
                     //  dsource.addData(this, 'node');
                       dragSource.addData(this.mouseX, 'mouseX');
                       dragSource.addData(this.mouseY, 'mouseY');
                       //parent.addChild(dragImg);
                       //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                       var dragProxy:Text=new Text();
                      dragProxy.text =  mouseEvent.currentTarget.text;
                     // Alert.show("Text  isss"+dragProxy.text);
                      dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget  .height)
                  
                      // ask the DragManger to begin the drag
                       DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy  );      
                  
                    }
                  
                    public function  acceptDrop( dragEvent:DragEvent ):void
                    {
                      if  (dragEvent.dragSource.hasFormat("items"))
                      {
                         DragManager.showFeedback( DragManager.COPY );
                         DragManager.acceptDragDrop(Canvas(dragEvent.currentTarget));
                      }
                     }
                  
                   var pt:Point;
                    public function handleDrop(  dragEvent:DragEvent ):void
                    {
                      var  dragInitiator:IUIComponent = dragEvent.dragInitiator;
                      var  dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
                       var items:Array  = dragEvent.dragSource.dataForFormat("items") as  Array;
                      pt = new Point(dragEvent.localX, dragEvent.localY);
                       pt = dragEvent.target.localToContent(pt);
                      var img:Text = new  Text();
                        img.x=dragEvent.localX;   img.y=dragEvent.localY;
                      // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                         //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                       img.width = 50;
                      img.height=50;
                      //  img.fontSize=20;     // img.source="assets/" + items[0].id + ".png";
                       img.text=items[0].JobName.toString();

               

               

               

                       img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);
                       area.addChild(img);
                     
                      pt.x = pt.x+5;
                       pt.y = pt.y+10;
                         
                       if(area.getChildren().length>1){
                          end = pt;
                           drawLine();
                          start = end;
                      }
                      else{
                           start = pt;
                      }
                    
                    }    
                  
                     public var xOff:Number;
                    public var yOff:Number;
                  
                   protected function drawLine() : void
                      {
                          var  g:Graphics = ui.graphics;
                          //g.clear();

                           var lt:Number = 2;

               

                          g.lineStyle(lt, 0xAADDFF, 0.5);
                           createLine(g, start, end, false);
                      }
                     
                       public static function createLine(g:Graphics, start:Point, end:Point,
                                                       dashed:Boolean = false, dashLength:Number = 10):void {
                           g.moveTo(start.x, start.y);
                          g.lineTo(end.x, end.y);
                       }
                         
                  ]]>
                </mx:Script>

               


                 <mx:DataGrid id="list" width="152" height="200" labelField="JobName"
                   dragEnabled="true" dataProvider="{pictureData}"  mouseDown="beginDrag(event)" dragMoveEnabled="true" y="217" x="28"/>
                   <!--<mx:columns>
                    <mx:DataGridColumn dataField="id"  id="code"/>
                    <mx:DataGridColumn id="picture"  draggable="true" >
                      <mx:itemRenderer>
                         <mx:Component>
                          <mx:Image  source="assets/{data.id}.png"  mouseDown="outerDocument.beginDrag(event)"/>
                         </mx:Component>
                      </mx:itemRenderer>
                     </mx:DataGridColumn>
                  </mx:columns>
                 </mx:DataGrid>-->
                <mx:UIComponent width="700"  height="320"  id="ui" x="199" y="217"/>
                <mx:Canvas id="area"  width="700" height="320" alpha="0.5"
                  backgroundColor="white"  dragDrop="handleDrop(event)"   x="199" y="217">
                
                
                 </mx:Canvas>
               

              </mx:Application>

              1 person found this helpful
              • 4. Re: Connect the multiple text values on the canvas with arrows using flex
                satyasuppu Level 1

                Hi,

                 

                  Thank you very much for your quick answer...But this is not useful for me in my situation...

                 

                User will drag and drop the values on the canvas..after dropping all the values user will decide,which values shold be connected by the arrows not as soon as he drops on the canvas..

                 

                Colud you please help me on this..

                 

                 

                 

                Thank you so much in advance...

                 

                Please help me...

                • 5. Re: Connect the multiple text values on the canvas with arrows using flex
                  TanweerHq Level 2

                  Here it is ----

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    layout="absolute" name="Drag and Drop Tutorial"
                    creationComplete="init()" >
                    <mx:Script>
                      <![CDATA[
                        import mx.controls.Image;
                        import mx.core.DragSource;
                        import mx.core.IUIComponent;
                        import mx.managers.DragManager;
                        import mx.events.DragEvent;
                        import mx.controls.Alert;
                        import mx.controls.Text;
                        import flash.geom.Point;
                      
                        import mx.rpc.events.FaultEvent;
                        import mx.rpc.events.ResultEvent;
                        import mx.collections.ArrayCollection;
                       /*  import oracle.ondemand.diagrammer.*;
                        private var templateLine:Link; */
                        [Bindable]
                        private var pictureData:ArrayCollection = new ArrayCollection([
                          {JobName:"A"},{JobName:"B"},{JobName:"C"}, {JobName:"D"},{JobName:"E"},{JobName:"F"},{JobName:"G"}]);

                   

                   

                   

                        public function init():void
                        {
                          // a mouseDown event will start the drag    
                          list.dataProvider = pictureData;
                               // accepting a drag/drop operation...
                          this.area.addEventListener( DragEvent.DRAG_ENTER, acceptDrop );
                          // handling the drop...
                          this.area.addEventListener( DragEvent.DRAG_DROP, handleDrop );
                         // this.area.addEventListener(Event.ADDED, handleAdded);
                          //this.area.addEventListener(Event.REMOVED, handleRemoved);
                        }
                        public function get isLinking():Boolean {
                              return false;//this.templateLine.fromNode != null;
                          }
                        public function beginDrag( mouseEvent:MouseEvent ):void
                        {
                            
                          var dragInitiator:Text = mouseEvent.currentTarget as Text;
                          var dragSource:DragSource = new DragSource();
                         // dsource.addData(this, 'node');
                          dragSource.addData(this.mouseX, 'mouseX');
                          dragSource.addData(this.mouseY, 'mouseY');
                          //parent.addChild(dragImg);
                          //dragSource.addData(mouseEvent.currentTarget.text, "txt");
                          try{
                              var dragProxy:Text=new Text();
                              dragProxy.text = mouseEvent.currentTarget.text;
                                 // Alert.show("Text isss"+dragProxy.text);
                                 dragProxy.setActualSize(mouseEvent.currentTarget.width,mouseEvent.currentTarget.height)
                          
                              // ask the DragManger to begin the drag
                              DragManager.doDrag( dragInitiator, dragSource, mouseEvent, dragProxy ); 
                          }
                          catch(e){}    
                      
                        }
                      
                        public function acceptDrop( dragEvent:DragEvent ):void
                        {
                          if (dragEvent.dragSource.hasFormat("items"))
                          {
                            DragManager.showFeedback( DragManager.COPY );
                            DragManager.acceptDragDrop(Canvas(dragEvent.currentTarget));
                          }
                        }
                      
                        var pt:Point;
                        public function handleDrop( dragEvent:DragEvent ):void
                        {
                          var dragInitiator:IUIComponent = dragEvent.dragInitiator;
                          var dropTarget:IUIComponent = dragEvent.currentTarget as IUIComponent;
                          var items:Array  = dragEvent.dragSource.dataForFormat("items") as Array;
                          pt = new Point(dragEvent.localX, dragEvent.localY);
                          pt = dragEvent.target.localToContent(pt);
                          var img:Text = new Text();
                            img.x=dragEvent.localX;   img.y=dragEvent.localY;
                         // img.x=pt.x - Number(dragEvent.dragSource.dataForFormat("mouseX"));
                            //img.y=pt.y - Number(dragEvent.dragSource.dataForFormat("mouseY"));
                          img.width = 50;
                          img.height=50;
                          img.setStyle("fontSize",20);     // img.source="assets/" + items[0].id + ".png";
                          img.text=items[0].JobName.toString();
                         
                           img.buttonMode = true;
                           img.mouseChildren = false;
                         
                          img.addEventListener(MouseEvent.MOUSE_MOVE,beginDrag);
                          img.addEventListener(MouseEvent.CLICK,onSelect);
                         
                          pt.x = pt.x+5;
                          pt.y = pt.y+15;
                         
                          img.name = pt.x + "$" + pt.y;
                         
                          area.addChild(img);
                         
                          /* if(area.getChildren().length>1){
                              end = pt;
                              drawLine();
                              start = end;
                          }
                          else{
                              start = pt;
                          } */
                        
                        }    
                      
                        public var xOff:Number;
                        public var yOff:Number;
                      
                           private var bSelected:Boolean = false;   
                          private var start:Point = new Point(50, 150);
                          private var end:Point = new Point(350, 150);
                          protected function drawLine() : void
                          {
                              var g:Graphics = ui.graphics;
                              //g.clear();

                              var lt:Number = 5;

                   

                              g.lineStyle(lt, 0xAADDFF, 0.5);
                              createLine(g, start, end, false);
                          }
                         
                          public static function createLine(g:Graphics, start:Point, end:Point,
                                                          dashed:Boolean = false, dashLength:Number = 10):void {
                              g.moveTo(start.x, start.y);
                              g.lineTo(end.x, end.y);
                          }
                         
                          private function onSelect(event:Event):void{
                              var arr:Array;
                              arr = event.currentTarget.name.split("$");
                                 
                              if(!bSelected){
                                  start.x = arr[0];
                                  start.y = arr[1];
                                  bSelected = true;
                              }
                              else
                              {
                                  end.x = arr[0];
                                  end.y = arr[1];
                                  drawLine();
                                  start = end.clone();
                              }
                          }
                             
                      ]]>
                    </mx:Script>

                   


                    <mx:DataGrid id="list" width="152" height="200" labelField="JobName"
                      dragEnabled="true" dataProvider="{pictureData}" mouseDown="beginDrag(event)" dragMoveEnabled="true" y="217" x="28"/>
                      <!--<mx:columns>
                        <mx:DataGridColumn dataField="id" id="code"/>
                        <mx:DataGridColumn id="picture" draggable="true" >
                          <mx:itemRenderer>
                            <mx:Component>
                              <mx:Image source="assets/{data.id}.png" mouseDown="outerDocument.beginDrag(event)"/>
                            </mx:Component>
                          </mx:itemRenderer>
                        </mx:DataGridColumn>
                      </mx:columns>
                    </mx:DataGrid>-->
                    <mx:UIComponent width="700" height="320"  id="ui" x="199" y="217"/>
                    <mx:Canvas id="area" width="700" height="320" alpha="0.5"
                      backgroundColor="white" dragDrop="handleDrop(event)" x="199" y="217">
                    
                    
                    </mx:Canvas>
                   

                  </mx:Application>

                   

                  Please mark the reply if its usefull.

                  1 person found this helpful
                  • 6. Re: Connect the multiple text values on the canvas with arrows using flex
                    satyasuppu Level 1

                    Hi TanweerHq,

                     

                      Thanks alot for your help...I would be greatful for your help..Its working fine now...

                     

                      One clarrification..Is is possible if i want to remove the links..suppose if i drawn a line incorrectly..i want to remove that link..is it possible in this case...Could you please tell me..

                     

                     

                    Thank you so much...

                    • 7. Re: Connect the multiple text values on the canvas with arrows using flex
                      TanweerHq Level 2

                      You can clear the area and create it again.

                       

                      Thanks

                      tanweer

                      • 8. Re: Connect the multiple text values on the canvas with arrows using flex
                        satyasuppu Level 1

                           Do i need to clear the whole canvas area..Is there any poosibilty to remove only that perticular link....

                         

                         

                        Thanks

                        • 9. Re: Connect the multiple text values on the canvas with arrows using flex
                          TanweerHq Level 2

                          Yes its looks dificult.

                           

                          just try this - Replace the functions

                           

                          private var g:Graphics;
                                 
                                  protected function drawLine() : void
                                  {
                                      g = area.graphics;
                                     
                                      var lt:Number = 5;

                           

                                      g.lineStyle(lt, 0x0119fc,1);
                                      createLine(g, start, end);
                                  }
                                 
                                  public static function createLine(g:Graphics, start:Point, end:Point):void {
                                      g.moveTo(start.x, start.y);
                                      g.lineTo(end.x, end.y);
                                  }

                           

                           

                          private function onClear():void{
                                      g.clear(); //
                                      area.removeAllChildren();
                                      bSelected = false
                                  }

                           

                          ====================

                           

                          <!-- <mx:UIComponent width="700" height="320"  id="ui" x="199" y="217"/>   -->

                            <mx:Canvas id="area" width="700" height="320" alpha="0.1" verticalScrollPolicy="off"
                              backgroundColor="white" dragDrop="handleDrop(event)" x="199" y="217">
                            </mx:Canvas>
                           
                            <mx:Button x="835" y="227" label="Clear" click="onClear()"/>

                          • 10. Re: Connect the multiple text values on the canvas with arrows using flex
                            satyasuppu Level 1

                            Hi,

                             

                               Thank you so much for your quick help...Its working..But it is clearing whole canvas area..

                             

                             

                             

                            Thanks alot...