Shapes: add startDrag, moveShape and endDrag

Author: n-riesco

src/components/shapes/index.js

@@ -358,65 +358,72 @@ function setupDragElement(gd, shapePath, shapeOptions, index) {
 
     var dragOptions = {
         element: shapePath.node(),
-        prepFn: function() {
-            setCursor(shapePath, 'move');
+        prepFn: startDrag,
+        doneFn: endDrag
+    };
 
-            xa = Axes.getFromId(gd, shapeOptions.xref);
-            ya = Axes.getFromId(gd, shapeOptions.yref);
+    dragElement.init(dragOptions);
 
-            x2p = getDataToPixel(gd, xa);
-            y2p = getDataToPixel(gd, ya, true);
-            p2x = getPixelToData(gd, xa);
-            p2y = getPixelToData(gd, ya, true);
+    function startDrag() {
+        setCursor(shapePath, 'move');
 
-            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';
-            }
+        xa = Axes.getFromId(gd, shapeOptions.xref);
+        ya = Axes.getFromId(gd, shapeOptions.yref);
 
-            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);
+        x2p = getDataToPixel(gd, xa);
+        y2p = getDataToPixel(gd, ya, true);
+        p2x = getPixelToData(gd, xa);
+        p2y = getPixelToData(gd, ya, true);
 
-                var moveY = function moveY(y) { return p2y(y2p(y) + dy); };
-                if(ya && ya.type === 'date') moveY = encodeDate(moveY);
+        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';
+        }
 
-                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);
-            }
+        update = {};
 
-            shapePath.attr('d', getPathString(gd, shapeOptions));
-        },
-        doneFn: function(dragged) {
-            setCursor(shapePath);
-            if(dragged) {
-                Plotly.relayout(gd, update);
-            }
+        dragOptions.moveFn = moveShape;
+    }
+
+    function endDrag(dragged) {
+        setCursor(shapePath);
+        if(dragged) {
+            Plotly.relayout(gd, update);
         }
-    };
+    }
 
-    dragElement.init(dragOptions);
+    function moveShape(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));
+    }
 }
 
 function getShapeLayer(gd, index) {