Render anchor point when moving a pixel sized shape [2038]

- Reason: resizing a pixel sized shape is changing the distance to its
  anchor point. The anchor point not being visible caused
  misleading perceptions in case of auto-ranged axis because the
  auto-range algorithm takes both anchor point and pixel coordinates of
  shape into account.
- Even works for `path` shapes and shapes where only one dimension
  is pixel sized.

Author: rmoestl

src/components/shapes/calc_autorange.js

@@ -62,7 +62,7 @@ function calcPaddingOptions(lineWidth, sizeMode, v0, v1, path, isYAxis) {
 
     if(sizeMode === 'pixel') {
         var coords = path ?
-          extractPathCoords(path, isYAxis ? constants.paramIsY : constants.paramIsX) :
+          helpers.extractPathCoords(path, isYAxis ? constants.paramIsY : constants.paramIsX) :
           [v0, v1];
         var maxValue = Lib.aggNums(Math.max, null, coords),
             minValue = Lib.aggNums(Math.min, null, coords),
@@ -79,23 +79,6 @@ function calcPaddingOptions(lineWidth, sizeMode, v0, v1, path, isYAxis) {
     }
 }
 
-function extractPathCoords(path, paramsToUse) {
-    var extractedCoordinates = [];
-
-    var segments = path.match(constants.segmentRE);
-    segments.forEach(function(segment) {
-        var relevantParamIdx = paramsToUse[segment.charAt(0)].drawn;
-        if(relevantParamIdx === undefined) return;
-
-        var params = segment.substr(1).match(constants.paramRE);
-        if(!params || params.length < relevantParamIdx) return;
-
-        extractedCoordinates.push(params[relevantParamIdx]);
-    });
-
-    return extractedCoordinates;
-}
-
 function shapeBounds(ax, v0, v1, path, paramsToUse) {
     var convertVal = (ax.type === 'category') ? ax.r2c : ax.d2c;
 

src/components/shapes/draw.js

@@ -152,7 +152,8 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
             element: sensoryElement.node(),
             gd: gd,
             prepFn: startDrag,
-            doneFn: endDrag
+            doneFn: endDrag,
+            clickFn: abortDrag
         },
         dragMode;
 
@@ -295,18 +296,24 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
 
         // setup dragMode and the corresponding handler
         updateDragMode(evt);
+        renderVisualCues(shapeLayer, shapeOptions);
         deactivateClipPathTemporarily(shapePath, shapeOptions, gd);
         dragOptions.moveFn = (dragMode === 'move') ? moveShape : resizeShape;
     }
 
     function endDrag() {
         setCursor(shapePath);
+        removeVisualCues(shapeLayer);
 
         // Don't rely on clipPath being activated during re-layout
         setClipPath(shapePath, gd, shapeOptions);
         Registry.call('relayout', gd, update);
     }
 
+    function abortDrag() {
+        removeVisualCues(shapeLayer);
+    }
+
     function moveShape(dx, dy) {
         if(shapeOptions.type === 'path') {
             var noOp = function(coord) { return coord; },
@@ -347,6 +354,7 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
         }
 
         shapePath.attr('d', getPathString(gd, shapeOptions));
+        renderVisualCues(shapeLayer, shapeOptions);
     }
 
     function resizeShape(dx, dy) {
@@ -411,6 +419,52 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
         }
 
         shapePath.attr('d', getPathString(gd, shapeOptions));
+        renderVisualCues(shapeLayer, shapeOptions);
+    }
+
+    function renderVisualCues(shapeLayer, shapeOptions) {
+        if(xPixelSized || yPixelSized) {
+            renderAnchor();
+        }
+
+        function renderAnchor() {
+            var isNotPath = shapeOptions.type !== 'path';
+
+            // d3 join with dummy data to satisfy d3 data-binding
+            var visualCues = shapeLayer.selectAll('.visual-cue').data([0]);
+
+            // Enter
+            visualCues.enter()
+              .append('path')
+              .attr({
+                  'fill': '#fff',
+                  'fill-rule': 'evenodd',
+                  'stroke': '#000',
+                  'stroke-width': 1
+              })
+              .classed('visual-cue', true);
+
+            // Update
+            var anchorX = x2p(xPixelSized ?
+              shapeOptions.xanchor :
+              isNotPath ?
+                shapeOptions.x0 :
+                helpers.extractPathCoords(shapeOptions.path, constants.paramIsX)[0]);
+            var anchorY = y2p(yPixelSized ?
+              shapeOptions.yanchor :
+              isNotPath ?
+                shapeOptions.y0 :
+                helpers.extractPathCoords(shapeOptions.path, constants.paramIsY)[0]);
+
+            var crossHairPath = 'M' + (anchorX - 1) + ',' + (anchorY - 1) +
+              'l-8,0 l0,-2 l8,0  l0,-8 l2,0 l0,8  l8,0 l0,2 l-8,0  l0,8 l-2,0 Z';
+
+            visualCues.attr('d', crossHairPath);
+        }
+    }
+
+    function removeVisualCues(shapeLayer) {
+        shapeLayer.selectAll('.visual-cue').remove();
     }
 
     function deactivateClipPathTemporarily(shapePath, shapeOptions, gd) {

src/components/shapes/helpers.js

@@ -9,6 +9,8 @@
 
 'use strict';
 
+var constants = require('./constants');
+
 // special position conversion functions... category axis positions can't be
 // specified by their data values, because they don't make a continuous mapping.
 // so these have to be specified in terms of the category serial numbers,
@@ -37,6 +39,23 @@ exports.encodeDate = function(convertToDate) {
     return function(v) { return convertToDate(v).replace(' ', '_'); };
 };
 
+exports.extractPathCoords = function(path, paramsToUse) {
+    var extractedCoordinates = [];
+
+    var segments = path.match(constants.segmentRE);
+    segments.forEach(function(segment) {
+        var relevantParamIdx = paramsToUse[segment.charAt(0)].drawn;
+        if(relevantParamIdx === undefined) return;
+
+        var params = segment.substr(1).match(constants.paramRE);
+        if(!params || params.length < relevantParamIdx) return;
+
+        extractedCoordinates.push(params[relevantParamIdx]);
+    });
+
+    return extractedCoordinates;
+};
+
 exports.getDataToPixel = function(gd, axis, isVertical) {
     var gs = gd._fullLayout._size,
         dataToPixel;