Conversion of Raphaels Graffle

//Source code from Dmitry at http://raphaeljs.com/graffle.html 

Snap.plugin(  function( Snap, Element, Paper, global ) {

  Element.prototype.getTransformedBBox = function() {
                var bb = this.getBBox();
                var m = this.transform().globalMatrix;
                var tbb = {
                  x:  m.x( bb.x, bb.y ), 
                  y:  m.y( bb.x, bb.y ),
                  y2: m.y( bb.x2, bb.y2 ),
                  x2: m.x( bb.x2, bb.y2 ),
                }
                tbb['width' ] = tbb.x2-tbb.x;
                tbb['height'] = tbb.y2-tbb.y; 
                tbb['cx'] = tbb.x + tbb['width' ] / 2;
                tbb['cy'] = tbb.y + tbb['height' ] / 2;
                return tbb;
  };


Paper.prototype.connection = function (obj1, obj2, line, bg) {
    if (obj1.line && obj1.from && obj1.to) {
        line = obj1;
        obj1 = line.from;
        obj2 = line.to;
    }
    var bb1 = obj1.getTransformedBBox(),
        bb2 = obj2.getTransformedBBox(),
        p = [{x: bb1.x + bb1.width / 2, y: bb1.y - 1},
        {x: bb1.x + bb1.width / 2, y: bb1.y + bb1.height + 1},
        {x: bb1.x - 1, y: bb1.y + bb1.height / 2},
        {x: bb1.x + bb1.width + 1, y: bb1.y + bb1.height / 2},
        {x: bb2.x + bb2.width / 2, y: bb2.y - 1},
        {x: bb2.x + bb2.width / 2, y: bb2.y + bb2.height + 1},
        {x: bb2.x - 1, y: bb2.y + bb2.height / 2},
        {x: bb2.x + bb2.width + 1, y: bb2.y + bb2.height / 2}],
        d = {}, dis = [];
     
    for (var i = 0; i < 4; i++) {
        for (var j = 4; j < 8; j++) {
            var dx = Math.abs(p[i].x - p[j].x),
                dy = Math.abs(p[i].y - p[j].y);
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                dis.push(dx + dy);
                d[dis[dis.length - 1]] = [i, j];
            }
        }
    }
    if (dis.length == 0) {
        var res = [0, 4];
    } else {
        res = d[Math.min.apply(Math, dis)];
    }
    var x1 = p[res[0]].x,
        y1 = p[res[0]].y,
        x4 = p[res[1]].x,
        y4 = p[res[1]].y;
    dx = Math.max(Math.abs(x1 - x4) / 2, 10);
    dy = Math.max(Math.abs(y1 - y4) / 2, 10);
    var x2 = [x1, x1, x1 - dx, x1 + dx][res[0]].toFixed(3),
        y2 = [y1 - dy, y1 + dy, y1, y1][res[0]].toFixed(3),
        x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx][res[1]].toFixed(3),
        y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4][res[1]].toFixed(3);
    var path = "M" + x1.toFixed(3) + "," + y1.toFixed(3) + "C" + [ x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join();
    if (line && line.line) {
        line.bg && line.bg.attr({path: path});
        line.line.attr({path: path});
    } else {
        var color = typeof line == "string" ? line : "yellow";
        return {
            bg: bg && bg.split && this.path(path).attr({stroke: bg.split("|")[0], fill: "none", "stroke-width": bg.split("|")[1] || 3}),
           line: this.path(path).attr({stroke: color, fill: "none"}),
            from: obj1,
            to: obj2
        };
    }
}

});


var el;
(function () {

 s = Snap('#svgout');
 
 var r1 = s.rect(50,50,50,50).attr({ fill: 'red', opacity: 0.4 });
 var c1 = s.circle(50,50,5).attr({ fill: 'red' }).addClass('join');
 var g1 = s.g().append(r1).append(c1)
 
 var g2 = g1.clone().transform('t200,200')
 
 var connections = []
 connections.push( s.connection(g1.select('.join'),  g2.select('.join'),'blue') )
 
 g1.drag( dragMove, dragStart );
 g2.drag( dragMove, dragStart )
 
 function dragMove(dx,dy) {
   this.attr({ transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy] });
   for (var i = connections.length; i--;) {
     s.connection(connections[i]);
   }
   
 }

 function dragStart () {
   this.data('origTransform', this.transform().local );
 }

})();




   


        Edit/Run