Implement draggable shapes

src/components/shapes/index.js

@@ -17,6 +17,8 @@ var Axes = require('../../plots/cartesian/axes');
 var Color = require('../color');
 var Drawing = require('../drawing');
 
+var dragElement = require('../dragelement');
+var setCursor = require('../../lib/setcursor');
 
 var shapes = module.exports = {};
 
@@ -299,15 +301,7 @@ function updateShape(gd, index, opt, value) {
     var options = handleShapeDefaults(optionsIn, gd._fullLayout);
     gd._fullLayout.shapes[index] = options;
 
-    var attrs = {
-            'data-index': index,
-            'fill-rule': 'evenodd',
-            d: shapePath(gd, options)
-        },
-        clipAxes;
-
-    var lineColor = options.line.width ? options.line.color : 'rgba(0,0,0,0)';
-
+    var clipAxes;
     if(options.layer !== 'below') {
         clipAxes = (options.xref + options.yref).replace(/paper/g, '');
         drawShape(gd._fullLayout._shapeUpperLayer);
@@ -332,6 +326,14 @@ function updateShape(gd, index, opt, value) {
     }
 
     function drawShape(shapeLayer) {
+        var attrs = {
+                'data-index': index,
+                'fill-rule': 'evenodd',
+                d: getPathString(gd, options)
+            },
+            lineColor = options.line.width ?
+                options.line.color : 'rgba(0,0,0,0)';
+
         var path = shapeLayer.append('path')
             .attr(attrs)
             .style('opacity', options.opacity)
@@ -343,9 +345,80 @@ function updateShape(gd, index, opt, value) {
             path.call(Drawing.setClipUrl,
                 'clip' + gd._fullLayout._uid + clipAxes);
         }
+
+        if(gd._context.editable) setupDragElement(gd, path, options, index);
     }
 }
 
+function setupDragElement(gd, shapePath, shapeOptions, index) {
+    var update;
+    var x0, y0, x1, y1, astrX0, astrY0, astrX1, astrY1;
+    var pathIn, astrPath;
+    var xa, ya, x2p, y2p, p2x, p2y;
+
+    var dragOptions = {
+        element: shapePath.node(),
+        prepFn: function() {
+            setCursor(shapePath, 'move');
+
+            xa = Axes.getFromId(gd, shapeOptions.xref);
+            ya = Axes.getFromId(gd, shapeOptions.yref);
+
+            x2p = getDataToPixel(gd, xa);
+            y2p = getDataToPixel(gd, ya, true);
+            p2x = getPixelToData(gd, xa);
+            p2y = getPixelToData(gd, ya, true);
+
+            var astr = 'shapes[' + index + ']';
+            if(shapeOptions.type === 'path') {
+                pathIn = shapeOptions.path;
+                astrPath = astr + '.path';
+            }
+            else {
+                x0 = x2p(shapeOptions.x0);
+                y0 = y2p(shapeOptions.y0);
+                x1 = x2p(shapeOptions.x1);
+                y1 = y2p(shapeOptions.y1);
+
+                astrX0 = astr + '.x0';
+                astrY0 = astr + '.y0';
+                astrX1 = astr + '.x1';
+                astrY1 = astr + '.y1';
+            }
+
+            update = {};
+        },
+        moveFn: function(dx, dy) {
+            if(shapeOptions.type === 'path') {
+                var moveX = function moveX(x) { return p2x(x2p(x) + dx); };
+                if(xa && xa.type === 'date') moveX = encodeDate(moveX);
+
+                var moveY = function moveY(y) { return p2y(y2p(y) + dy); };
+                if(ya && ya.type === 'date') moveY = encodeDate(moveY);
+
+                shapeOptions.path = movePath(pathIn, moveX, moveY);
+                update[astrPath] = shapeOptions.path;
+            }
+            else {
+                update[astrX0] = shapeOptions.x0 = p2x(x0 + dx);
+                update[astrY0] = shapeOptions.y0 = p2y(y0 + dy);
+                update[astrX1] = shapeOptions.x1 = p2x(x1 + dx);
+                update[astrY1] = shapeOptions.y1 = p2y(y1 + dy);
+            }
+
+            shapePath.attr('d', getPathString(gd, shapeOptions));
+        },
+        doneFn: function(dragged) {
+            setCursor(shapePath);
+            if(dragged) {
+                Plotly.relayout(gd, update);
+            }
+        }
+    };
+
+    dragElement.init(dragOptions);
+}
+
 function getShapeLayer(gd, index) {
     var shape = gd._fullLayout.shapes[index],
         shapeLayer = gd._fullLayout._shapeUpperLayer;
@@ -375,7 +448,52 @@ function decodeDate(convertToPx) {
     return function(v) { return convertToPx(v.replace('_', ' ')); };
 }
 
-function shapePath(gd, options) {
+function encodeDate(convertToDate) {
+    return function(v) { return convertToDate(v).replace(' ', '_'); };
+}
+
+function getDataToPixel(gd, axis, isVertical) {
+    var gs = gd._fullLayout._size,
+        dataToPixel;
+
+    if(axis) {
+        var d2l = dataToLinear(axis);
+
+        dataToPixel = function(v) {
+            return axis._offset + axis.l2p(d2l(v, true));
+        };
+
+        if(axis.type === 'date') dataToPixel = decodeDate(dataToPixel);
+    }
+    else if(isVertical) {
+        dataToPixel = function(v) { return gs.t + gs.h * (1 - v); };
+    }
+    else {
+        dataToPixel = function(v) { return gs.l + gs.w * v; };
+    }
+
+    return dataToPixel;
+}
+
+function getPixelToData(gd, axis, isVertical) {
+    var gs = gd._fullLayout._size,
+        pixelToData;
+
+    if(axis) {
+        var l2d = linearToData(axis);
+        pixelToData = function(p) { return l2d(axis.p2l(p - axis._offset)); };
+    }
+    else if(isVertical) {
+        pixelToData = function(p) { return 1 - (p - gs.t) / gs.h; };
+    }
+    else {
+        pixelToData = function(p) { return (p - gs.l) / gs.w; };
+    }
+
+    return pixelToData;
+}
+
+function getPathString(gd, options) {
     var type = options.type,
         xa = Axes.getFromId(gd, options.xref),
         ya = Axes.getFromId(gd, options.yref),
@@ -501,6 +619,29 @@ shapes.convertPath = function(pathIn, x2p, y2p) {
     });
 };
 
+function movePath(pathIn, moveX, moveY) {
+    return pathIn.replace(segmentRE, function(segment) {
+        var paramNumber = 0,
+            segmentType = segment.charAt(0),
+            xParams = paramIsX[segmentType],
+            yParams = paramIsY[segmentType],
+            nParams = numParams[segmentType];
+
+        var paramString = segment.substr(1).replace(paramRE, function(param) {
+            if(paramNumber >= nParams) return param;
+
+            if(xParams[paramNumber]) param = moveX(param);
+            else if(yParams[paramNumber]) param = moveY(param);
+
+            paramNumber++;
+
+            return param;
+        });
+
+        return segmentType + paramString;
+    });
+}
+
 shapes.calcAutorange = function(gd) {
     var fullLayout = gd._fullLayout,
         shapeList = fullLayout.shapes,