Help W/ Drag & Drop MC & Connected Lines

programming flash
1

I have the following code that creates a starting point onclick and then subsequent points onclick. Basically, like how the pen tool in Photoshop works or how Google Earth provides the ability to select the Tools > Ruler and draw a point to point path on the map.

Here is an example of how the code currently works:
[COLOR=#336699]http://www.mapyourhike.com/Test/PenTool.html[/COLOR]

Here is the code:

[FONT=Courier New]
var routeContainer:Sprite;
var pointContainer:Sprite;
var mcObjectArray:Array = new Array();
var pointSpriteNameCounter:Number;
var fillColor:uint;
var colorTransform:ColorTransform;
var pointColor:uint;
var isRouteStart:Boolean;

setDrawingMode();

function setDrawingMode():void
{
pointSpriteNameCounter = 0;

routeContainer = new Sprite();
routeContainer.graphics.beginFill(0xCCCCCC,1);
routeContainer.graphics.drawRect(0,0,400,400);
routeContainer.graphics.endFill();
addChild(routeContainer);

pointContainer = new Sprite();
addChild(pointContainer);

routeContainer.addEventListener(MouseEvent.MOUSE_D OWN, addPoint);
}

function createStartPoint():Sprite
{
var pointMC:MovieClip = new MovieClip();
fillColor = 0x2ee03e;
pointMC.graphics.lineStyle(1,0x000000,1,true,LineS caleMode.VERTICAL,CapsStyle.ROUND,JointStyle.ROUND ,2);
pointMC.graphics.beginFill(fillColor,1);
pointMC.graphics.drawCircle(0,0,10);
pointMC.x = mouseX;
pointMC.y = mouseY;
mcObjectArray.push(pointMC);

pointMC.addEventListener(MouseEvent.MOUSE_DOWN,sta rtDragListener);
pointMC.addEventListener(MouseEvent.MOUSE_UP,endDr agListener);
return pointMC;
}

function createEndPoint():Sprite
{
var pointMC:MovieClip = new MovieClip();
fillColor = 0xe82626;
pointMC.graphics.lineStyle(1,0x000000,1,true,LineS caleMode.VERTICAL,CapsStyle.ROUND,JointStyle.ROUND ,2);
pointMC.graphics.beginFill(fillColor,1);
pointMC.graphics.drawCircle(0,0,10);
pointMC.x = mouseX;
pointMC.y = mouseY;
mcObjectArray.push(pointMC);

pointMC.addEventListener(MouseEvent.MOUSE_DOWN,sta rtDragListener);
pointMC.addEventListener(MouseEvent.MOUSE_UP,endDr agListener);

return pointMC;
}

function addPoint(e:MouseEvent):void
{
pointColor = 0x000000;

pointSpriteNameCounter +=1;

if(pointSpriteNameCounter==1)
{
isRouteStart = true;
addChild(createStartPoint());
}
else
{
isRouteStart = false;
addChild(createEndPoint());
}

if(mcObjectArray.length > 1)
{
routeContainer.graphics.lineStyle(2,0x000000,1,tru e);
routeContainer.graphics.moveTo(mcObjectArray[mcObjectArray.length-1].x, mcObjectArray[mcObjectArray.length-1].y);
routeContainer.graphics.lineTo(mcObjectArray[mcObjectArray.length-2].x, mcObjectArray[mcObjectArray.length-2].y);

if(pointSpriteNameCounter>2)
{
//recolor the points b/w start and end points
colorTransform = mcObjectArray[mcObjectArray.length-2].transform.colorTransform;
colorTransform.color = pointColor;
mcObjectArray[mcObjectArray.length-2].transform.colorTransform = colorTransform;
mcObjectArray[mcObjectArray.length-2].scaleX = .15;
mcObjectArray[mcObjectArray.length-2].scaleY = .20;
}
}
}

function startDragListener(e:MouseEvent):void
{
e.currentTarget.startDrag();
}

function endDragListener(e:MouseEvent):void
{
e.currentTarget.stopDrag();
}

[/FONT]
The requirements of how I want the tool to work are below:

  1. Provide ability to select a point on the path and drag and drop it and the line(s) connected to it follow it.

  2. Provide ability to right click a point on the path and get a menu w/ an option to delete the point. Deleting the point would remove any lines connected to it.

Thanks alot for the input and help!