Draw bar instead of anchor cross when moving hybrid-sized shapes [2038]

rmoestl · rmoestl · commit e34212b9bccf · 2018-05-09T14:01:29.000+02:00
- When moving a shape that is pixel-sized in one dimension and
  data-sized or paper-sized in the other dimension a centered vertical
  or horizontal bar is rendered instead of the anchor cross.
- Thereby fix a bug in `extractPathCoords` to return numerical values
  instead of numbers represented as strings.
- Also introduce the statistical `midRange` function in lib.
diff --git a/src/components/shapes/draw.js b/src/components/shapes/draw.js
@@ -447,24 +447,39 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
               .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]);
-
-            anchorX = helpers.transformPosForSharpStrokeRendering(anchorX, strokeWidth);
-            anchorY = helpers.transformPosForSharpStrokeRendering(anchorY, strokeWidth);
-
-            var crossHairPath = 'M' + (anchorX - 1) + ',' + (anchorY - 1) +
-              'h-8v2h8 v8h2v-8 h8v-2h-8 v-8h-2 Z';
-
-            visualCues.attr('d', crossHairPath);
+            var posX = x2p(
+              xPixelSized ?
+                shapeOptions.xanchor :
+                Lib.midRange(
+                  isNotPath ?
+                    [shapeOptions.x0, shapeOptions.x1] :
+                    helpers.extractPathCoords(shapeOptions.path, constants.paramIsX))
+            );
+            var posY = y2p(
+              yPixelSized ?
+                shapeOptions.yanchor :
+                Lib.midRange(
+                  isNotPath ?
+                    [shapeOptions.y0, shapeOptions.y1] :
+                    helpers.extractPathCoords(shapeOptions.path, constants.paramIsY))
+            );
+
+            posX = helpers.roundPositionForSharpStrokeRendering(posX, strokeWidth);
+            posY = helpers.roundPositionForSharpStrokeRendering(posY, strokeWidth);
+
+            if(xPixelSized && yPixelSized) {
+                var crossPath = 'M' + (posX - 1 - strokeWidth) + ',' + (posY - 1 - strokeWidth) +
+                  'h-8v2h8 v8h2v-8 h8v-2h-8 v-8h-2 Z';
+                visualCues.attr('d', crossPath);
+            } else if(xPixelSized) {
+                var vBarPath = 'M' + (posX - 1 - strokeWidth) + ',' + (posY - 9 - strokeWidth) +
+                  'v18 h2 v-18 Z';
+                visualCues.attr('d', vBarPath);
+            } else {
+                var hBarPath = 'M' + (posX - 9 - strokeWidth) + ',' + (posY - 1 - strokeWidth) +
+                  'h18 v2 h-18 Z';
+                visualCues.attr('d', hBarPath);
+            }
         }
     }
 
diff --git a/src/components/shapes/helpers.js b/src/components/shapes/helpers.js
@@ -11,6 +11,8 @@
 
 var constants = require('./constants');
 
+var Lib = require('../../lib');
+
 // 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,
@@ -50,7 +52,7 @@ exports.extractPathCoords = function(path, paramsToUse) {
         var params = segment.substr(1).match(constants.paramRE);
         if(!params || params.length < relevantParamIdx) return;
 
-        extractedCoordinates.push(params[relevantParamIdx]);
+        extractedCoordinates.push(Lib.cleanNumber(params[relevantParamIdx]));
     });
 
     return extractedCoordinates;
@@ -98,7 +100,7 @@ exports.getPixelToData = function(gd, axis, isVertical) {
 };
 
 /**
- * Based on the given stroke width, transforms the passed
+ * Based on the given stroke width, rounds the passed
  * position value to represent either a full or half pixel.
  *
  * In case of an odd stroke width (e.g. 1), this measure ensures
@@ -113,7 +115,7 @@ exports.getPixelToData = function(gd, axis, isVertical) {
  * @param {number} strokeWidth The stroke width
  * @returns {number} either an integer or a .5 decimal number
  */
-exports.transformPosForSharpStrokeRendering = function(pos, strokeWidth) {
+exports.roundPositionForSharpStrokeRendering = function(pos, strokeWidth) {
     var strokeWidthIsOdd = Math.round(strokeWidth % 2) === 1;
     var posValAsInt = Math.round(pos);
 
diff --git a/src/lib/index.js b/src/lib/index.js
@@ -67,6 +67,7 @@ var statsModule = require('./stats');
 lib.aggNums = statsModule.aggNums;
 lib.len = statsModule.len;
 lib.mean = statsModule.mean;
+lib.midRange = statsModule.midRange;
 lib.variance = statsModule.variance;
 lib.stdev = statsModule.stdev;
 lib.interp = statsModule.interp;
diff --git a/src/lib/stats.js b/src/lib/stats.js
@@ -56,6 +56,11 @@ exports.mean = function(data, len) {
     return exports.aggNums(function(a, b) { return a + b; }, 0, data) / len;
 };
 
+exports.midRange = function(numArr) {
+    if(numArr === undefined || numArr.length === 0) return undefined;
+    return (exports.aggNums(Math.max, null, numArr) + exports.aggNums(Math.min, null, numArr)) / 2;
+};
+
 exports.variance = function(data, len, mean) {
     if(!len) len = exports.len(data);
     if(!isNumeric(mean)) mean = exports.mean(data, len);
diff --git a/test/jasmine/tests/lib_test.js b/test/jasmine/tests/lib_test.js
@@ -108,12 +108,12 @@ describe('Test lib.js:', function() {
     });
 
     describe('mean() should', function() {
-        it('toss out non-numerics (strings):', function() {
+        it('toss out non-numerics (strings)', function() {
             var input = [1, 2, 'apple', 'orange'],
                 res = Lib.mean(input);
             expect(res).toEqual(1.5);
         });
-        it('toss out non-numerics (NaN):', function() {
+        it('toss out non-numerics (NaN)', function() {
             var input = [1, 2, NaN],
                 res = Lib.mean(input);
             expect(res).toEqual(1.5);
@@ -125,6 +125,34 @@ describe('Test lib.js:', function() {
         });
     });
 
+    describe('midRange() should', function() {
+        it('should calculate the arithmetic mean of the maximum and minimum value of a given array', function() {
+            var input = [1, 5.5, 6, 15, 10, 13],
+                res = Lib.midRange(input);
+            expect(res).toEqual(8);
+        });
+        it('toss out non-numerics (strings)', function() {
+            var input = [1, 2, 'apple', 'orange'],
+                res = Lib.midRange(input);
+            expect(res).toEqual(1.5);
+        });
+        it('toss out non-numerics (NaN)', function() {
+            var input = [1, 2, NaN],
+                res = Lib.midRange(input);
+            expect(res).toEqual(1.5);
+        });
+        it('should be able to deal with array of length 1', function() {
+            var input = [10],
+                res = Lib.midRange(input);
+            expect(res).toEqual(10);
+        });
+        it('should return undefined for an empty array', function() {
+            var input = [],
+                res = Lib.midRange(input);
+            expect(res).toBeUndefined();
+        });
+    });
+
     describe('variance() should', function() {
         it('return 0 on input [2, 2, 2, 2, 2]:', function() {
             var input = [2, 2, 2, 2],
