misc. polar fixup after AJ's review:

- fixup angular drag xy -> angle calculations
- decrease min drag value for radial drag box,
  to catch smaller dx/dy
  that can determine rotateMove vs rerangeMove
- better annulus path
- typo in scatterpolar test

Author: etpinard

src/plots/polar/polar.js

@@ -528,9 +528,9 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
 
 proto.updateFx = function(fullLayout, polarLayout) {
     if(!this.gd._context.staticPlot) {
-        this.updateMainDrag(fullLayout, polarLayout);
         this.updateAngularDrag(fullLayout, polarLayout);
         this.updateRadialDrag(fullLayout, polarLayout);
+        this.updateMainDrag(fullLayout, polarLayout);
     }
 };
 
@@ -858,6 +858,10 @@ 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;
+
     dragElement.init(dragOpts);
 };
 
@@ -871,17 +875,18 @@ proto.updateAngularDrag = function(fullLayout, polarLayout) {
     var cxx = _this.cxx;
     var cyy = _this.cyy;
     var sector = polarLayout.sector;
+    var dbs = constants.angularDragBoxSize;
 
     var angularDrag = dragBox.makeDragger(layers, 'path', 'angulardrag', 'move');
     var dragOpts = {element: angularDrag, gd: gd};
 
     d3.select(angularDrag)
-        .attr('d', pathAnnulus(radius, radius + constants.angularDragBoxSize, sector))
+        .attr('d', pathAnnulus(radius, radius + dbs, sector))
         .attr('transform', strTranslate(cx, cy))
         .call(setCursor, 'move');
 
     function xy2a(x, y) {
-        return Math.atan2(cyy - y, x - cxx);
+        return Math.atan2(cyy + dbs - y, x - cxx - dbs);
     }
 
     // scatter trace, points and textpoints selections
@@ -909,6 +914,10 @@ proto.updateAngularDrag = function(fullLayout, polarLayout) {
             strTranslate(_this.xOffset2, _this.yOffset2) + strRotate([-da, cxx, cyy])
         );
 
+        _this.clipPaths.circle.select('path').attr('transform',
+            strTranslate(cxx, cyy) + strRotate(da)
+        );
+
         // 'un-rotate' marker and text points
         scatterPoints.each(function() {
             var sel = d3.select(this);
@@ -1111,29 +1120,42 @@ function pathSectorClosed(r, sector) {
         (isFullCircle(sector) ? '' : 'L0,0Z');
 }
 
-// inspired by https://gist.github.com/buschtoens/4190516
-function pathAnnulus(r0, r1, _sector) {
-    var sector = _sector.slice();
-    var s0 = deg2rad(sector[0]);
-    var s1 = deg2rad(sector[1]);
-
-    // make a small cut on full sectors so that the
-    // inner region isn't filled
-    if(isFullCircle(sector)) s1 -= 1e-3;
+// TODO recycle this routine with the ones used for pie traces.
+function pathAnnulus(r0, r1, sector) {
+    var largeArc = Math.abs(sector[1] - sector[0]) <= 180 ? 0 : 1;
+    // sector angle at [s]tart, [m]iddle and [e]nd
+    var ss, sm, se;
 
-    var p00 = [r0 * Math.cos(s0), -r0 * Math.sin(s0)];
-    var p01 = [r0 * Math.cos(s1), -r0 * Math.sin(s1)];
-    var p10 = [r1 * Math.cos(s0), -r1 * Math.sin(s0)];
-    var p11 = [r1 * Math.cos(s1), -r1 * Math.sin(s1)];
+    function pt(r, s) {
+        return [r * Math.cos(s), -r * Math.sin(s)];
+    }
 
-    var largeArc = Math.abs(sector[1] - sector[0]) <= 180 ? 0 : 1;
+    function arc(r, s, cw) {
+        return 'A' + [r, r] + ' ' + [0, largeArc, cw] + ' ' + pt(r, s);
+    }
 
-    return 'M' + p00 +
-        'L' + p10 +
-        'A' + [r1, r1] + ' ' + [0, largeArc, 0] + ' ' + p11 +
-        'L' + p01 +
-        'A' + [r0, r0] + ' ' + [0, largeArc, 1] + ' ' + p00 +
-        'Z';
+    if(isFullCircle(sector)) {
+        ss = 0;
+        se = 2 * Math.PI;
+        sm = Math.PI;
+        return 'M' + pt(r0, ss) +
+            arc(r0, sm, 0) +
+            arc(r0, se, 0) +
+            'Z' +
+            'M' + pt(r1, ss) +
+            arc(r1, sm, 1) +
+            arc(r1, se, 1) +
+            'Z';
+    } else {
+        ss = deg2rad(sector[0]);
+        se = deg2rad(sector[1]);
+        return 'M' + pt(r0, ss) +
+            'L' + pt(r1, ss) +
+            arc(r1, se, 0) +
+            'L' + pt(r0, se) +
+            arc(r0, ss, 1) +
+            'Z';
+    }
 }
 
 function isFullCircle(sector) {

test/jasmine/tests/polar_test.js

@@ -922,12 +922,12 @@ describe('Test polar interactions:', function() {
         .then(_assertBase)
         .then(function() { return _drag(dragPos0, [-20, -20]); })
         .then(function() {
-            _assert(7.7, 'move counterclockwise');
+            _assert(9.9, 'move counterclockwise');
         })
         .then(_reset)
         .then(function() { return _drag(dragPos0, [20, 20]); })
         .then(function() {
-            _assert(-6.3, 'move clockwise');
+            _assert(-8.4, 'move clockwise');
         })
         .then(_reset)
         .then(function() {

test/jasmine/tests/scatterpolar_test.js

@@ -86,7 +86,7 @@ describe('Test scatterpolar hover:', function() {
         nums: 'r: 4.022892\nθ: 2.239991',
         name: 'Trial 3'
     }, {
-        desc: 'on work on log radial axis',
+        desc: 'on log radial axis',
         patch: function(fig) {
             fig.layout.polar.radialaxis.type = 'log';
             return fig;