jsPlumb connecting raphael element's - raphael

Question

I used raphael.js to draw some element's, and now I want to connect them,
how to connect raphael elements with jsplumb ?
For example, in the JSFiddle below : I'm trying to create connections between 2 circles, but I can't, because the circles have no id, my code .
i can't use this :
jsPlumb.connect({source:"id1", target:"id2"})

Answer 1

I finally found a solution to connect raphael elements with jsplumb, I want to thank Mr: # Simon Porritt (jsPlumb creator) for his help: the solution
jsPlumb.ready(function(){
jsPlumb.Defaults.Container = "drawing_board";
// Create a 480 x 640 canvas.
var paper = Raphael('drawing_board');
// of 90 pixels.
var circle1 = paper.circle(140, 110, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var circle2 = paper.circle(400, 180, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var rect = paper.rect(50, 280, 90, 70).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var ellipse = paper.ellipse(300, 420, 90, 70).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var offsetCalculators = {
"CIRCLE":function(el, parentOffset) {
var cx = parseInt(el.attr("cx"), 10),
cy = parseInt(el.attr("cy"), 10),
r = parseInt(el.attr("r"), 10);
return {
left: parentOffset.left + (cx - r),
top:parentOffset.top + (cy - r)
};
},
"ELLIPSE":function(el, parentOffset) {
var cx = parseInt(el.attr("cx"), 10),
cy = parseInt(el.attr("cy"), 10),
rx = parseInt(el.attr("rx"), 10),
ry = parseInt(el.attr("ry"), 10);
return {
left: parentOffset.left + (cx - rx),
top:parentOffset.top + (cy - ry)
};
},
"RECT":function(el, parentOffset) {
var x = parseInt(el.attr("x"), 10),
y = parseInt(el.attr("y"), 10);
return {
left: parentOffset.left + x,
top:parentOffset.top + y
};
}
};
var sizeCalculators = {
"CIRCLE":function(el) {
var r = parseInt(el.attr("r"), 10);
return [ r * 2, r * 2 ];
},
"ELLIPSE":function(el) {
var rx = parseInt(el.attr("rx"), 10),
ry = parseInt(el.attr("ry"), 10);
return [ rx * 2, ry * 2 ];
},
"RECT":function(el) {
var w = parseInt(el.attr("width"), 10),
h = parseInt(el.attr("height"), 10);
return [ w, h ];
}
};
jsPlumb.CurrentLibrary.getOffset = function(el) {
el = $(el);
var del = el[0], tn = del.tagName.toUpperCase();
if (offsetCalculators[tn]) {
var so = el.parent().offset();
return offsetCalculators[tn](el, so);
}
else
return el.offset();
};
jsPlumb.CurrentLibrary.getSize = function(el) {
el = $(el);
var del = el[0], tn = del.tagName.toUpperCase();
if (sizeCalculators[tn]) {
return sizeCalculators[tn](el);
}
else
return [ el.outerWidth(), el.outerHeight() ];
};
jsPlumb.connect({source:circle1.node, target:circle2.node, anchor:"Center", connector:"Straight"});
jsPlumb.connect({source:circle1.node, target:rect.node, anchors:["Center", "Top"], connector:"Straight"});
jsPlumb.connect({source:circle2.node, target:ellipse.node, anchor:"Center"});
//raphael draggable
var start = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
},
move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
jsPlumb.repaint(this.node);
},
up = function () { };
paper.set(circle1, circle2).drag(move, start, up); });