Example_D3_part1

DynamicArc.js

App.prototype.makeDynamicArc = function (data) {
    var rowLen = data.rowLen;
    var shape0_x,
        shape0_y;
    var shape0_w = data.tag.w,
        shape0_h = data.tag.h;
    var shapeType = data.shape.shapeType,
        shapeW = data.shape.w,
        shapeH = data.shape.h;

    var isTagCoordsUpdated = false;


    return d3.behavior.drag()
        .on("drag", function() {
            var tag = d3.select(this.parentNode).select('.tag');

            if ( ! isTagCoordsUpdated ) {
                var tag_coords = d3.transform(tag.attr("transform")).translate;
                shape0_x = tag_coords[0];
                shape0_y = tag_coords[1];
            }

            var curveTool = d3.select(this);

            var x_center, y_center, r;
            var shapes =  d3.select(this.parentNode).selectAll('g.point');

            shapes[0].unshift(tag[0][0]);

            var shapesLength = shapes[0].length;

            var point1 = shapes[0][0];
            var coords1 = d3.transform(d3.select(point1).attr("transform"));
            var x1 = parseInt(coords1.translate[0],10),
                y1 = parseInt(coords1.translate[1],10);


            var point2 = shapes[0][shapesLength - 1];
            var coords2 = d3.transform(d3.select(point2).attr("transform"));
            var x2 = parseInt(coords2.translate[0],10),
                y2 = parseInt(coords2.translate[1],10);

            var p = d3.mouse(this);
            var current_coordinates = d3.transform(curveTool.attr('transform')).translate;
            current_coordinates[1] += p[1];

            var x0 = parseInt(current_coordinates[0],10),
                y0 = parseInt(current_coordinates[1],10);

            var delimoe = ((x1-x0)*(Math.pow(x2,2)-Math.pow(x0,2)+Math.pow(y2,2)-Math.pow(y0,2))-(x2-x0)*(Math.pow(x1,2)-Math.pow(x0,2)+Math.pow(y1,2)-Math.pow(y0,2)));
            var delitel = 2*((y2-y0)*(x1-x0)-(y1-y0)*(x2-x0));
            y_center = delimoe / delitel;
            x_center = (Math.pow(x1,2)-Math.pow(x0,2)+2*y_center*(y0-y1)+Math.pow(y1,2)-Math.pow(y0,2))/(2*(x1-x0));

            r = Math.sqrt(Math.pow((x_center-x0),2)+Math.pow((y_center-y0) ,2));

            if ( ! r ) {
                return;
            }

            var x = rowLen/2 - shape0_w/2;
            var y = y_center - shape0_y - shape0_h/2;
            var angle = 2 * Math.asin( x / r) / (shapesLength - 1);
            var alpha, TH, HO;
            var delta_y = 0;
            var topIsReached = false;

            shapes.each(function (d, i) {
                var d = d || {'w': shape0_w, 'h': shape0_h, type: 'tag'};
                alpha = angle * (shapesLength / 2 - 0.5 - i);
                TH = Math.sin(alpha) * r;
                HO = Math.sqrt(Math.pow(r, 2) - Math.pow(TH, 2));

                new_y = parseInt(shape0_y - (HO - y), 10);
                new_x = parseInt(shape0_x + rowLen/2 - TH);

                d['x'] = new_x - shape0_w/2; 
                d['y'] = new_y + shape0_h/2;

                if (i == 0 && (d['x'] != shape0_x || d['y'] != shape0_y)) {
                    delta_y = d['y'] - shape0_y;
                    topIsReached = true;
                }
                if (topIsReached) {
                    d['y'] -= delta_y;
                }

                d['rotate'] = - 180 * alpha / Math.PI;

                d3.select(this).attr("transform", function() {
                    if (shapeType === 'rect' && d.type != 'tag') {
                        d['x'] -= (shapeW - shape0_w);
                    }
                    if (shapeType === 'circle' && d.type != 'tag') {
                        d['x'] -= (shapeW/2 - shape0_w);
                    }                   
                    var rotate_x_center = parseInt(d['x'], 10) + parseInt(d['w'], 10) /2;
                    var rotate_y_center = parseInt(d['y'], 10) + parseInt(d['h'], 10) /2;
                    return "rotate(" + d['rotate'] +  "," + rotate_x_center + "," + rotate_y_center + ") translate(" + [ d['x'], d['y'] ] + ")";
                });
            });

            curveTool.attr("transform", function() {
                var x = current_coordinates[0],
                    y = current_coordinates[1] - shape0_h - delta_y,
                    rotate = 0;
                if (shapeType === 'circle') {
                    y -= shapeW/2;
                } else {
                    rotate = 90 * angle / Math.PI;
                }
                return "translate(" + [ x , y ] + ") rotate(" + rotate + ")";
            });

            if (shapeType === 'rect') {
                var parentCoords = d3.transform(d3.select(this.parentNode).attr("transform")).translate;
                var parent_angle = - 90 * angle / Math.PI;
                d3.select(this.parentNode).attr("transform", function(d) {
                    return "translate(" + [ parentCoords[0] , parentCoords[1] ] + ") rotate(" + parent_angle + ")";
                });
            }

            isTagCoordsUpdated = true;
        })
        .on("dragend", function(d) {
            self.saveGraph();
            isTagCoordsUpdated = false;
        });
};