jsPlumb connecting raphael element's

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);  });