add clampFn option to dragElement & use it for radial drag box

- by default, dragElement clamps small x,y displacement to 0
  independently
- for radial drag box, using d(x,y) to determine 'small' displacements
  to clamp prove more advantageous.

Author: etpinard

src/components/dragelement/index.js

@@ -76,6 +76,10 @@ dragElement.unhoverRaw = unhover.raw;
  *          numClicks is how many clicks we've registered within
  *          a doubleclick time
  *          e is the original mousedown event
+ *      clampFn (optional, function(dx, dy) return [dx2, dy2])
+ *          Provide custom clamping function for small displacements.
+ *          By default, clamping is done using `minDrag` to x and y displacements
+ *          independently.
  */
 dragElement.init = function init(options) {
     var gd = options.gd;
@@ -99,6 +103,14 @@ dragElement.init = function init(options) {
     element.onmousedown = onStart;
     element.ontouchstart = onStart;
 
+    function _clampFn(dx, dy, minDrag) {
+        if(Math.abs(dx) < minDrag) dx = 0;
+        if(Math.abs(dy) < minDrag) dy = 0;
+        return [dx, dy];
+    }
+
+    var clampFn = options.clampFn || _clampFn;
+
     function onStart(e) {
         // make dragging and dragged into properties of gd
         // so that others can look at and modify them
@@ -145,12 +157,11 @@ dragElement.init = function init(options) {
 
     function onMove(e) {
         var offset = pointerOffset(e);
-        var dx = offset[0] - startX;
-        var dy = offset[1] - startY;
         var minDrag = options.minDrag || constants.MINDRAG;
+        var dxdy = clampFn(offset[0] - startX, offset[1] - startY, minDrag);
+        var dx = dxdy[0];
+        var dy = dxdy[1];
 
-        if(Math.abs(dx) < minDrag) dx = 0;
-        if(Math.abs(dy) < minDrag) dy = 0;
         if(dx || dy) {
             gd._dragged = true;
             dragElement.unhover(gd);

src/plots/polar/constants.js

@@ -33,6 +33,8 @@ module.exports = {
     cornerLen: 25,
     cornerHalfWidth: 2,
 
+    // pixels to move mouse before you stop clamping to starting point
+    MINDRAG: 8,
     // smallest radial distance [px] allowed for a zoombox
     MINZOOM: 20,
     // distance [px] off (r=0) or (r=radius) where we transition

src/plots/polar/polar.js

@@ -858,9 +858,13 @@ proto.updateRadialDrag = function(fullLayout, polarLayout) {
         dragBox.clearSelect(fullLayout._zoomlayer);
     };
 
-    // decrease min drag value to be able to catch smaller dx/dy that
-    // can determine rotateMove vs rerangeMove
-    dragOpts.minDrag = 2;
+    dragOpts.clampFn = function(dx, dy) {
+        if(Math.sqrt(dx * dx + dy * dy) < constants.MINDRAG) {
+            dx = 0;
+            dy = 0;
+        }
+        return [dx, dy];
+    };
 
     dragElement.init(dragOpts);
 };