Drag a point in flash, and have lines, connected other points move

Question

I have a set of dots displayed on the canvas (key bits of code pulled out):

// Drop points based on x y coords
for (var i = 0; i < 50; i++) {
    itemPoint[i] = new mcDot();
    itemPoint[i].x = 500*Math.random();
    itemPoint[i].y = 500*Math.random();

    // Set up drag & drop
    initDragger(itemPoint[i]);
    itemPoint[i].buttonMode = true;

    addChild(itemPoint[i]);
}

I then connect the dots - one dot could have 50 connections

// Draw connections
for (i = 0; i < 50; i++) {
         for (j = 0; j < 50; j++) {
        // Is there a connection in the matrix? 
        if (connectMatrix[i][j] > 0) {
            itemConnect[k] = new Shape();

            itemConnect[k].graphics.lineStyle(1, 0x000000);

           // Connect the line to the dots
            itemConnect[k].graphics.moveTo(itemPoint[i].x, itemPoint[i].y);
            itemConnect[k].graphics.lineTo(itemPoint[j].x, itemPoint[j].y);
            addChild(itemConnect[k++]);
        }
    }
}

I have drag and drop working for the dot:

/** Drag and drop functions */
function initDragger(mc:MovieClip):void {
    mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    mc.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseDownHandler(e:MouseEvent):void {
    e.currentTarget.startDrag();
}
function mouseUpHandler(e:MouseEvent):void {
    e.currentTarget.stopDrag();
}

However, I am really stuck on how to redraw the lines as I move a dot. Also there could be many lines connected to any single dot. Do I need to somehow register which lines are connected to which dot? How do I redrew the lines based on this?

Thanks

Answer 1

I tried duplicating the same functionality. And this is what I got: This is Dot class for drawing dots.

package {
  import flash.display.Sprite;
  public class Dot extends Sprite {
    public static var counter:Number = 0;
    public var id:Number;
    public function Dot():void {
      this.graphics.beginFill(0);
      this.graphics.drawCircle(5,5,5);
      this.graphics.endFill();
      id = counter++;
    }
  }
}

And this is Test class.

package {
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.events.MouseEvent;
  import flash.display.Shape;

public class Test extends Sprite {
var num:Number = 5; 
var item:Array = new Array(num);
var connection:Array = new Array(num);

public function Test():void{
  initItem();
  initConnection();
}

private function initItem():void {
  for (var i:Number = 0; i<num; i++) {
    item[i]= new Dot();
    item[i].x = 500*Math.random();
    item[i].y = 350*Math.random();
    addChild(item[i]);
    initDragger(item[i]);
  }
}

private function initDragger(dot:Dot):void {
  dot.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
  dot.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
}

function mouseDownHandler(e:MouseEvent):void {
  e.currentTarget.startDrag();
  e.target.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
}
function mouseUpHandler(e:MouseEvent):void {
  e.currentTarget.stopDrag();
  e.target.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
  redrawLines(e.target.id);
}
function redrawLines(i:Number):void {
  for (var j:Number = 0; j< num; j++) {
    if(connection[i][j] != null) {
      removeChild(connection[i][j]);
      connection[i][j] = new Shape();
      connection[i][j].graphics.lineStyle(1, 0x000000);
      connection[i][j].graphics.moveTo(item[i].x, item[i].y);
      connection[i][j].graphics.lineTo(item[j].x, item[j].y);
      addChild(connection[i][j]);
      connection[j][i] = connection[i][j];
    }
  }
}
function onMouseMove(e:MouseEvent):void {
  redrawLines(e.target.id);
}

private function initConnection():void {
  for (var i:Number = 0; i<num; i++) {
    connection[i] = new Array(num);
    for (var j:Number = 0; j<num; j++) {
      if (j != i) {
        if (connection[j] != undefined) {
          connection[i][j] = connection[j][i];
          trace("Duplicate");
        }
        else if (Math.random() > 0.5){
        connection[i][j] = new Shape();
        connection[i][j].graphics.lineStyle(1, 0x000000);
        connection[i][j].graphics.moveTo(item[i].x, item[i].y);
        connection[i][j].graphics.lineTo(item[j].x, item[j].y);
        addChild(connection[i][j]);
        }
        else {
          connection[i][j] = null;
        }
      }
      else {
        connection[i][j] = null;
      }
      trace("connecting " + i + " to " + j +" with " + connection[i][j]);
    }
  }
  trace(connection);
}

}
}