how to draw multiple arrow lines in extjs grid panel - extjs

Question

i am tryting to draw multiple arrow lines between two grid panels, but i am able to draw only one arrow, when i start to draw the second arrow the first arrow is not showing.below is the code which i have tried.
This is where i am creating a arrow
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
// alert("raphael");
var angle = Math.atan2(x1-x2,y2-y1);
angle = (angle / (2 * Math.PI)) * 360;
var arrowPath = this.path("M" + x2 + " " + y2 + " L" + (x2 - size) + " " + (y2 - size) + " L" + (x2 - size) + " " + (y2 + size) + " L" + x2 + " " + y2 ).attr("fill","black").rotate((90+angle),x2,y2);
var linePath = this.path("M" + x1 + " " + y1 + " L" + x2 + " " + y2);
return [linePath,arrowPath];
};
drag initialization
onInitDrag : function(x,y){
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
//alert("this.ddel :"+this.ddel.innerHTML);
this.proxy.update(this.ddel);
// fire start drag?
//i would say yes ;-)
this.onStartDrag(x,y);
},
/*
* onStartDrag is called when you initiate the drag action
* it stores the mouse coordinates and create the SVG canvas
*/
onStartDrag : function(x, y){
alert(Ext.getCmp('leftGridId'));
this.arrowStart = {x:x, y:y};
alert("on Start Drag :"+x+","+y);
this.raphaelCanvas = new Raphael(0,0,2000,2000); //could be better...
//apply body.no-cursor (cursor : none) to hide the cursor
//cursor:pointer is nice too
//alert("after StartDrag :"+x+","+y);
},
/*
* onDrag is called on mousemove
* it clears the canvas and draw the arrow again
*/
onDrag : function(e){
//alert("on drag");
//alert("raphael arrow");
this.raphaelCanvas.clear();
var arrow = this.raphaelCanvas.arrow(this.arrowStart.x, this.arrowStart.y, e.xy[0], e.xy[1],8);
// alert("after mapping");
},
/*
* onEndDrag is called when you drop whatever you were dragging
* it removes the SVG canvas from the document
*/
onEndDrag : function(){
alert("on end drag");
//this.raphaelCanvas.remove();
//delete this.raphaelCanvas;
this.raphaelCanvas.renderfix();
if(!onStartDrag){
/this.raphaelCanvas.remove();
//delete this.raphaelCanvas;
}
else{
onStartDrag();
}
}

Answer 1

There can be serious improvements to your code but try these quick changes if at;east your two arrows start appearing ....
Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
// alert("raphael");
var angle = Math.atan2(x1-x2,y2-y1);
angle = (angle / (2 * Math.PI)) * 360;
var arrowPath = this.path("M" + x2 + " " + y2 + " L" + (x2 - size) + " " + (y2 - size) + " L" + (x2 - size) + " " + (y2 + size) + " L" + x2 + " " + y2 ).attr("fill","black").rotate((90+angle),x2,y2);
var linePath = this.path("M" + x1 + " " + y1 + " L" + x2 + " " + y2);
return [linePath,arrowPath];
};
this.raphaelCanvas = new Raphael(0,0,2000,2000);
this.raphaelCanvas.renderfix();
drag initialization
onInitDrag : function(x,y){
var data = this.dragData;
this.ddel.innerHTML = this.grid.getDragDropText();
//alert("this.ddel :"+this.ddel.innerHTML);
this.proxy.update(this.ddel);
// fire start drag?
//i would say yes ;-)
this.onStartDrag(x,y);
},
/*
* onStartDrag is called when you initiate the drag action
* it stores the mouse coordinates and create the SVG canvas
*/
onStartDrag : function(x, y){
alert(Ext.getCmp('leftGridId'));
this.arrowStart = {x:x, y:y};
alert("on Start Drag :"+x+","+y);
//this.raphaelCanvas = new Raphael(0,0,2000,2000); //could be better...
//apply body.no-cursor (cursor : none) to hide the cursor
//cursor:pointer is nice too
//alert("after StartDrag :"+x+","+y);
},
/*
* onDrag is called on mousemove
* it clears the canvas and draw the arrow again
*/
onDrag : function(e){
//alert("on drag");
//alert("raphael arrow");
//this.raphaelCanvas.clear();
var arrow = this.raphaelCanvas.arrow(this.arrowStart.x, this.arrowStart.y, e.xy[0], e.xy[1],8);
// alert("after mapping");
},
/*
* onEndDrag is called when you drop whatever you were dragging
* it removes the SVG canvas from the document
*/
onEndDrag : function(){
alert("on end drag");
//this.raphaelCanvas.remove();
//delete this.raphaelCanvas;
//this.raphaelCanvas.renderfix();
if(!onStartDrag){
//this.raphaelCanvas.remove();
//delete this.raphaelCanvas;
}
else{
onStartDrag();
}
}