replace dragmode: 'pan' with annulus-shaped dragger

Author: etpinard

src/components/modebar/manage.js

@@ -116,12 +116,15 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
     var allAxesFixed = areAllAxesFixed(fullLayout),
         dragModeGroup = [];
 
-    if(((hasCartesian || hasGL2D) && !allAxesFixed) || hasTernary || hasPolar) {
+    if(((hasCartesian || hasGL2D) && !allAxesFixed) || hasTernary) {
         dragModeGroup = ['zoom2d', 'pan2d'];
     }
     if(hasMapbox || hasGeo) {
         dragModeGroup = ['pan2d'];
     }
+    if(hasPolar) {
+        dragModeGroup = ['zoom2d'];
+    }
     if(isSelectable(fullData)) {
         dragModeGroup.push('select2d');
         dragModeGroup.push('lasso2d');

src/plots/cartesian/dragbox.js

@@ -109,7 +109,7 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
     recomputeAxisLists();
 
-    var dragger = makeDragger(plotinfo, ns + ew + 'drag', cursor, x, y, w, h);
+    var dragger = makeRectDragger(plotinfo, ns + ew + 'drag', cursor, x, y, w, h);
 
     // still need to make the element if the axes are disabled
     // but nuke its events (except for maindrag which needs them for hover)
@@ -781,21 +781,26 @@ function makeDragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     return dragger;
 }
 
-function makeDragger(plotinfo, dragClass, cursor, x, y, w, h) {
+function makeDragger(plotinfo, nodeName, dragClass, cursor) {
     var dragger3 = plotinfo.draglayer.selectAll('.' + dragClass).data([0]);
 
-    dragger3.enter().append('rect')
+    dragger3.enter().append(nodeName)
         .classed('drag', true)
         .classed(dragClass, true)
         .style({fill: 'transparent', 'stroke-width': 0})
         .attr('data-subplot', plotinfo.id);
 
-    dragger3.call(Drawing.setRect, x, y, w, h)
-        .call(setCursor, cursor);
+    dragger3.call(setCursor, cursor);
 
     return dragger3.node();
 }
 
+function makeRectDragger(plotinfo, dragClass, cursor, x, y, w, h) {
+    var dragger = makeDragger(plotinfo, 'rect', dragClass, cursor);
+    d3.select(dragger).call(Drawing.setRect, x, y, w, h);
+    return dragger;
+}
+
 function isDirectionActive(axList, activeVal) {
     for(var i = 0; i < axList.length; i++) {
         if(!axList[i].fixedrange) return activeVal;
@@ -1044,6 +1049,7 @@ module.exports = {
     makeDragBox: makeDragBox,
 
     makeDragger: makeDragger,
+    makeRectDragger: makeRectDragger,
     makeZoombox: makeZoombox,
     makeCorners: makeCorners,
 

src/plots/polar/constants.js

@@ -29,6 +29,7 @@ module.exports = {
     ],
 
     radialDragBoxSize: 50,
+    angularDragBoxSize: 30,
     cornerLen: 25,
     cornerHalfWidth: 2,