Ensure cross-hair rendered upon moving pixel sized shape is sharp [2038]

Author: rmoestl

src/components/shapes/draw.js

@@ -435,13 +435,14 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
             var visualCues = shapeLayer.selectAll('.visual-cue').data([0]);
 
             // Enter
+            var strokeWidth = 1;
             visualCues.enter()
               .append('path')
               .attr({
                   'fill': '#fff',
                   'fill-rule': 'evenodd',
                   'stroke': '#000',
-                  'stroke-width': 1
+                  'stroke-width': strokeWidth
               })
               .classed('visual-cue', true);
 
@@ -457,6 +458,9 @@ function setupDragElement(gd, shapePath, shapeOptions, index, shapeLayer) {
                 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) +
               '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';
 

src/components/shapes/helpers.js

@@ -96,3 +96,26 @@ exports.getPixelToData = function(gd, axis, isVertical) {
 
     return pixelToData;
 };
+
+/**
+ * Based on the given stroke width, transforms 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
+ * that a stroke positioned at the returned position isn't rendered
+ * blurry due to anti-aliasing.
+ *
+ * In case of an even stroke width (e.g. 2), this measure ensures
+ * that the position value is transformed to a full pixel value
+ * so that anti-aliasing doesn't take effect either.
+ *
+ * @param {number} pos The raw position value to be transformed
+ * @param {number} strokeWidth The stroke width
+ * @returns {number} either an integer or a .5 decimal number
+ */
+exports.transformPosForSharpStrokeRendering = function(pos, strokeWidth) {
+    var strokeWidthIsOdd = Math.round(strokeWidth % 2) === 1;
+    var posValAsInt = Math.round(pos);
+
+    return strokeWidthIsOdd ? posValAsInt + 0.5 : posValAsInt;
+};