For each of the canvases, mouse up, mouse down, mouse move and mouse out events will be defined that will enable the user to start dragging and stop dragging the line canvases.
Each time the line canvases will be dragged, the columns will resize themselves according to the position of the canvases.
The new column sizes will have to be validated.
For the full source code click here.

These days I needed in one of my applications to draw some dashed and dotted lines. After doing some research, I realized that there is no line style that would enable one to draw lines like this.
So I started implementing an algorithm that would draw a dashed/dotted line given two points. Drawing a dashed line is determined by setting the length of the dash and the length of the gap.

I decided drawing my dashed line by drawing smaller lines and adding gaps after each one of them.


private function drawDashedLine (x1:Number, y1:Number, x2:Number,y2:Number, dashLength:int, gapLength:int, color:uint):void
{
var lineLength:Number=0;
//counts the current length of the dashed line
startLength = 0;
//the container where the dashed line will be added
drawingCanvas = new UIComponent();
//set up the line style of the dashed line
drawingCanvas.graphics.lineStyle(3,color,1);
//move mouse to starting point
drawingCanvas.graphics.moveTo(x1,y1);

//start drawing dash
lineLength = Math.sqrt((Math.pow((x1-x2),2)+Math.pow((y1-y2),2)));
//while have the necessary space dashes and gaps can be drawn
while ((lineLength-startLength)>=(dashLength+gapLength))
{
drawDash(x1,x2,y1,y2,lineLength,dashLength);
drawGap(x1,x2,y1,y2,lineLength,gapLength);
}

//if there is not enough space to draw another dash, just draw part of the dash
if ((lineLength-startLength)<=dashLength)
{
drawingCanvas.graphics.lineTo(x2,y2)
}
else
{
drawDash(x1,x2,y1,y2,lineLength,dashLength);
}

try
{
cnvContainer.addChild(drawingCanvas);
}
catch (e:Error)
{
trace(”child adding failed “)
}

}

The dash is drawn by determining the coordinates of the ending point of the dash.

//calculate the point where the dash ends and draw line
private function drawDash(x1:Number,x2:Number,y1:Number,y2:Number,lineLength:Number, dashLength:Number):void
{

var proportionDash:Number = 0;
startLength = startLength + dashLength;
//the percentage of the line(relative to the starting point)
//at wich the end point of the dash will be found
proportionDash = (startLength*100)/lineLength;

var retPoint:Point = getCoordinatesForProportion(x1,x2,y1,y2,proportionDash);
drawingCanvas.graphics.lineTo(retPoint.x,retPoint.y);

}

The gap is also implemented by moving the mouse cursor to the starting point of a new dash.

//calculate the point where the gap ends and move mouse cursor
private function drawGap(x1:Number,x2:Number,y1:Number,y2:Number,lineLength:Number, gapLength:Number):void
{
var proportionGap:Number = 0;
startLength = startLength + gapLength;
//the percentage of the line(relative to the starting point)
//at wich the end point of the gap will be found
proportionGap = (startLength*100)/lineLength;

var retPoint:Point = getCoordinatesForProportion(x1,x2,y1,y2,proportionGap);
drawingCanvas.graphics.moveTo(retPoint.x,retPoint.y);

}

Next I use a function that will determine the coordinates of the point located at a certain distance (in percents) from the starting point of the line. This does mostly what the Point.interpolate method of the framework does.

private function getCoordinatesForProportion(x1:Number,x2:Number,y1:Number,y2:Number,proportion:Number):Point
{
var newX:Number = 0;
var newY:Number = 0;
var retPoint:Point = new Point(0,0);

if (x1>=x2)
newX = x1 – Math.abs(x1-x2)*proportion/100;
else
newX = x1 + Math.abs(x1-x2)*proportion/100;

if (y1>=y2)
newY = y1 – Math.abs(y1-y2)*proportion/100;
else
newY = y1 + Math.abs(y1-y2)*proportion/100;

retPoint.x = newX;
retPoint.y = newY;

return retPoint;
}

You can download the source code here.

When dragging an item from the DataGrid, no matter how many columns the row has,usually all the information in the grid item will be dragged.
For ex the drag proxi when dragged will contain : Original Cast , Camelot , 12,99.

We will use the Drag Manager component of the framework and enable the drag and drop properties for the data grid :

dragEnabled="true"
dropEnabled="true"
mouseMove="dragIt(event,' ','name')"

Next we will handle the mouseMove event for the DataGrid by using the dragIt handler with the format parameter “name” :

private function dragIt(event:MouseEvent, text:String, format:String):void
{
try
{
// Get the drag initiator component from the event object.
var dragInitiator: * = event.target;

// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, ds, event, canvasProxy);
}
catch (er:Error)
{
trace("selection not finished yet")}
}

For the two Canvases the dragEnter and dragDrop events will be handled by adding the parameters that will help identify which label is the drop target.

//for the first canvas
dragEnter="doDragEnter(event)
dragDrop="doDragDrop(event,1)
//for the second canvas
dragEnter="doDragEnter(event)"
dragDrop="doDragDrop(event,2)"

The doDragEnter function will be called if the user drags the proxi onto the drop target canvas.

private function doDragEnter(event:DragEvent):void {
// Get the drop target component from the event object.
var dropTarget:Canvas=Canvas(event.currentTarget);

// Accept the drag only if the user is dragging data
// identified by the 'name' format value.
if (event.dragSource.hasFormat('name')) {
DragManager.acceptDragDrop(dropTarget);
}
}

The doDragDrop function will be called if the target accepts the dragged object and the user releases the mouse button while over the canvas. Here is identified which canvas responded to the event, and according to its parameter the label contained will be updated.

private function doDragDrop(event:DragEvent, index:int):void {
// Get the data identified by the name format
// from the drag source.
var data:Object = event.dragSource.dataForFormat('name');;
//Set the text of the label on the target Canvas
if (index==1)
Label(cv1.getChildAt(0)).text = data.toString();
if (index==2)
Label(cv2.getChildAt(0)).text = data.toString();
}


To view the application click here. For the source code click here(zip archive).