use drawTIcks, drawGrid and drawLabels to draw polar axes

etpinard · etpinard · commit 38c6ad8deb43 · 2018-11-16T16:38:08.000-05:00
- call full updateRadialAxis on radial drag
  and call full updateAngularAxis on angular drag.
- no need to nest grid lines into extra &lt;g&gt; (that was an
  artifact from doTicksSingle.
- ... more cleanup to come.
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -2425,6 +2425,11 @@ axes.makeLabelFns = function(ax, shift, angle) {
         labelStandoff += 0.2 * ax.tickfont.size;
     }
 
+    // TODO get rid of!
+    ax._pad = pad;
+    ax._labelStandoff = labelStandoff;
+    ax._labelShift = labelShift;
+
     var out = {};
     var x0, y0, ff, flipIt;
     if(axLetter === 'x') {
@@ -2620,6 +2625,7 @@ axes.drawLabels = function(gd, ax, opts) {
 
     ax._tickLabels = tickLabels;
 
+    // TODO ??
     if(isAngular(ax)) {
         tickLabels.each(function(d) {
             d3.select(this).select('text')
diff --git a/src/plots/polar/polar.js b/src/plots/polar/polar.js
@@ -16,10 +16,10 @@ var Lib = require('../../lib');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 var Plots = require('../plots');
+var Axes = require('../../plots/cartesian/axes');
 var setConvertCartesian = require('../cartesian/set_convert');
 var setConvertPolar = require('./set_convert');
 var doAutoRange = require('../cartesian/autorange').doAutoRange;
-var doTicksSingle = require('../cartesian/axes').doTicksSingle;
 var dragBox = require('../cartesian/dragbox');
 var dragElement = require('../../components/dragelement');
 var Fx = require('../../components/fx');
@@ -65,7 +65,7 @@ function Polar(gd, id) {
         .attr('class', id);
 
     // unfortunately, we have to keep track of some axis tick settings
-    // so that we don't have to call doTicksSingle with its special redraw flag
+    // as polar subplots do not implement the 'ticks' editType
     this.radialTickLayout = null;
     this.angularTickLayout = null;
 }
@@ -141,11 +141,9 @@ proto.updateLayers = function(fullLayout, polarLayout) {
                     break;
                 case 'radial-grid':
                     sel.style('fill', 'none');
-                    sel.append('g').classed('x', 1);
                     break;
                 case 'angular-grid':
                     sel.style('fill', 'none');
-                    sel.append('g').classed('angularaxis', 1);
                     break;
                 case 'radial-line':
                     sel.append('line').style('fill', 'none');
@@ -167,14 +165,15 @@ proto.updateLayers = function(fullLayout, polarLayout) {
  *
  * - this.radialAxis
  *   extends polarLayout.radialaxis, adds mocked 'domain' and
- *   few other keys in order to reuse Cartesian doAutoRange and doTicksSingle,
+ *   few other keys in order to reuse Cartesian doAutoRange and the Axes
+ *   drawing routines.
  *   used for calcdata -> geometric conversions (aka c2g) during the plot step
  *   + setGeometry setups ax.c2g for given ax.range
  *   + setScale setups ax._m,ax._b for given ax.range
  *
  * - this.angularAxis
  *   extends polarLayout.angularaxis, adds mocked 'range' and 'domain' and
- *   a few other keys in order to reuse Cartesian doTicksSingle,
+ *   a few other keys in order to reuse the Axes drawing routines.
  *   used for calcdata -> geometric conversions (aka c2g) during the plot step
  *   + setGeometry setups ax.c2g given ax.rotation, ax.direction & ax._categories,
  *                 and mocks ax.range
@@ -247,8 +246,6 @@ proto.updateLayout = function(fullLayout, polarLayout) {
     var cyy = _this.cyy = cy - yOffset2;
 
     _this.radialAxis = _this.mockAxis(fullLayout, polarLayout, radialLayout, {
-        _axislayer: layers['radial-axis'],
-        _gridlayer: layers['radial-grid'],
         // make this an 'x' axis to make positioning (especially rotation) easier
         _id: 'x',
         // convert to 'x' axis equivalent
@@ -261,8 +258,6 @@ proto.updateLayout = function(fullLayout, polarLayout) {
     });
 
     _this.angularAxis = _this.mockAxis(fullLayout, polarLayout, angularLayout, {
-        _axislayer: layers['angular-axis'],
-        _gridlayer: layers['angular-grid'],
         side: 'right',
         // to get auto nticks right
         domain: [0, Math.PI],
@@ -311,12 +306,7 @@ proto.mockAxis = function(fullLayout, polarLayout, axLayout, opts) {
     var commonOpts = {
         // to get _boundingBox computation right when showticklabels is false
         anchor: 'free',
-        position: 0,
-        _pos: 0,
-        // dummy truthy value to make doTicksSingle draw the grid
-        _counteraxis: true,
-        // don't use automargins routine for labels
-        automargin: false
+        position: 0
     };
 
     var ax = Lib.extendFlat(commonOpts, axLayout, opts);
@@ -392,18 +382,18 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
     // rotate auto tick labels by 180 if in quadrant II and III to make them
     // readable from left-to-right
     //
-    // TODO try moving deeper in doTicksSingle for better results?
+    // TODO try moving deeper in Axes.drawLabels for better results?
     if(ax.tickangle === 'auto' && (a0 > 90 && a0 <= 270)) {
         ax.tickangle = 180;
     }
 
     // easier to set rotate angle with custom translate function
-    ax._transfn = function(d) {
+    var transFn = function(d) {
         return 'translate(' + (ax.l2p(d.x) + innerRadius) + ',0)';
     };
 
     // set special grid path function
-    ax._gridpath = function(d) {
+    var gridPathFn = function(d) {
         return _this.pathArc(ax.r2p(d.x) + innerRadius);
     };
 
@@ -415,14 +405,50 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
 
     if(hasRoomForIt) {
         ax.setScale();
-        doTicksSingle(gd, ax, true);
+
+        var vals = Axes.calcTicks(ax);
+        var valsClipped = Axes.clipEnds(ax, vals);
+        var labelFns = Axes.makeLabelFns(ax, 0);
+
+        var sideOpposite = {x: 'top', y: 'right'}[ax._id];
+        var tickSign = [-1, 1, ax.side === sideOpposite ? 1 : -1];
+        if((ax.ticks !== 'inside') === (ax._id === 'x')) {
+            tickSign = tickSign.map(function(v) { return -v; });
+        }
+
+        Axes.drawTicks(gd, ax, {
+            // TODO right? No need to clip here ever?
+            vals: vals,
+            layer: layers['radial-axis'],
+            path: Axes.makeTickPath(ax, 0, tickSign[2]),
+            transFn: transFn
+        });
+
+        Axes.drawGrid(gd, ax, {
+            vals: valsClipped,
+            layer: layers['radial-grid'],
+            path: gridPathFn,
+            transFn: transFn
+        });
+
+        Axes.drawLabels(gd, ax, {
+            vals: vals,
+            layer: layers['radial-axis'],
+            shift: 0,
+            transFn: transFn,
+            labelXFn: labelFns.labelXFn,
+            labelYFn: labelFns.labelYFn,
+            labelAnchorFn: labelFns.labelAnchorFn,
+            skipTitle: true
+        });
     }
 
     // stash 'actual' radial axis angle for drag handlers (in degrees)
     var angle = _this.radialAxisAngle = _this.vangles ?
         rad2deg(snapToVertexAngle(deg2rad(radialLayout.angle), _this.vangles)) :
         radialLayout.angle;
 
+    // TODO no more "draw-and-then-tweak" !!!
     var trans = strTranslate(cx, cy) + strRotate(-angle);
 
     updateElement(
@@ -431,6 +457,7 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
         {transform: trans}
     );
 
+    // TODO !!
     // move all grid paths to about circle center,
     // undo individual grid lines translations
     updateElement(
@@ -514,16 +541,8 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
         ax.dtick = rad2deg(ax.dtick);
     }
 
-    // Use tickval filter for category axes instead of tweaking
-    // the range w.r.t sector, so that sectors that cross 360 can
-    // show all their ticks.
-    if(ax.type === 'category') {
-        ax._tickFilter = function(d) {
-            return Lib.isAngleInsideSector(t2g(d), _this.sectorInRad);
-        };
-    }
-
-    ax._transfn = function(d) {
+    // TODO break up into two functions!
+    var transFn = function(d) {
         var sel = d3.select(this);
         var hasElement = sel && sel.node();
 
@@ -541,17 +560,18 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
         return out;
     };
 
-    ax._gridpath = function(d) {
+    var gridPathFn = function(d) {
         var rad = t2g(d);
         var cosRad = Math.cos(rad);
         var sinRad = Math.sin(rad);
         return 'M' + [cx + innerRadius * cosRad, cy - innerRadius * sinRad] +
             'L' + [cx + radius * cosRad, cy - radius * sinRad];
     };
 
+    Axes.makeLabelFns(ax, 0);
     var offset4fontsize = (angularLayout.ticks !== 'outside' ? 0.7 : 0.5);
 
-    ax._labelx = function(d) {
+    var labelXFn = function(d) {
         var rad = t2g(d);
         var labelStandoff = ax._labelStandoff;
         var pad = ax._pad;
@@ -564,7 +584,7 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
         return offset4tx + offset4tick;
     };
 
-    ax._labely = function(d) {
+    var labelYFn = function(d) {
         var rad = t2g(d);
         var labelStandoff = ax._labelStandoff;
         var labelShift = ax._labelShift;
@@ -576,7 +596,8 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
         return offset4tx + offset4tick;
     };
 
-    ax._labelanchor = function(angle, d) {
+    // TODO maybe switch angle, d ordering ??
+    var labelAnchorFn = function(angle, d) {
         var rad = t2g(d);
         return signSin(rad) === 0 ?
             (signCos(rad) > 0 ? 'start' : 'end') :
@@ -590,13 +611,57 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
     }
 
     ax.setScale();
-    doTicksSingle(gd, ax, true);
+
+    var vals = Axes.calcTicks(ax);
+    // Use tickval filter for category axes instead of tweaking
+    // the range w.r.t sector, so that sectors that cross 360 can
+    // show all their ticks.
+    var tickVals = ax.type === 'category' ?
+        vals.filter(function(d) { return Lib.isAngleInsideSector(t2g(d), _this.sectorInRad); }) :
+        vals;
+
+    if(ax.visible) {
+        // TODO dry!!
+        var sideOpposite = 'right';
+        var tickSign = [-1, 1, ax.side === sideOpposite ? 1 : -1];
+        if((ax.ticks !== 'inside') === false) {
+            tickSign = tickSign.map(function(v) { return -v; });
+        }
+
+        var pad = tickSign[2] * (ax.linewidth || 1) / 2;
+        var len = tickSign[2] * ax.ticklen;
+
+        Axes.drawTicks(gd, ax, {
+            vals: tickVals,
+            layer: layers['angular-axis'],
+            path: 'M' + pad + ',0h' + len,
+            transFn: transFn
+        });
+
+        Axes.drawGrid(gd, ax, {
+            vals: tickVals,
+            layer: layers['angular-grid'],
+            path: gridPathFn,
+            transFn: transFn
+        });
+
+        Axes.drawLabels(gd, ax, {
+            vals: tickVals,
+            layer: layers['angular-axis'],
+            shift: 0,
+            transFn: transFn,
+            labelXFn: labelXFn,
+            labelYFn: labelYFn,
+            labelAnchorFn: labelAnchorFn,
+            skipTitle: true
+        });
+    }
 
     // angle of polygon vertices in geometric radians (null means circles)
     // TODO what to do when ax.period > ax._categories ??
     var vangles;
     if(polarLayout.gridshape === 'linear') {
-        vangles = ax._vals.map(t2g);
+        vangles = vals.map(t2g);
 
         // ax._vals should be always ordered, make them
         // always turn counterclockwise for convenience here
@@ -1044,29 +1109,25 @@ proto.updateRadialDrag = function(fullLayout, polarLayout, rngIndex) {
             return;
         }
 
+        var fullLayoutNow = gd._fullLayout;
+        var polarLayoutNow = fullLayoutNow[_this.id];
+
         // update radial range -> update c2g -> update _m,_b
         radialAxis.range[rngIndex] = rprime;
         radialAxis._rl[rngIndex] = rprime;
-        radialAxis.setGeometry();
-        radialAxis.setScale();
+        _this.updateRadialAxis(fullLayoutNow, polarLayoutNow);
 
         _this.xaxis.setRange();
         _this.xaxis.setScale();
         _this.yaxis.setRange();
         _this.yaxis.setScale();
 
-        doTicksSingle(gd, radialAxis, true);
-        layers['radial-grid']
-            .attr('transform', strTranslate(cx, cy))
-            .selectAll('path').attr('transform', null);
-
         var hasRegl = false;
 
         for(var traceType in _this.traceHash) {
             var moduleCalcData = _this.traceHash[traceType];
             var moduleCalcDataVisible = Lib.filterVisible(moduleCalcData);
             var _module = moduleCalcData[0][0].trace._module;
-            var polarLayoutNow = gd._fullLayout[_this.id];
             _module.plot(gd, _this, moduleCalcDataVisible, polarLayoutNow);
             if(Registry.traceIs(traceType, 'gl') && moduleCalcDataVisible.length) hasRegl = true;
         }
@@ -1140,6 +1201,7 @@ proto.updateAngularDrag = function(fullLayout) {
     function moveFn(dx, dy) {
         var fullLayoutNow = _this.gd._fullLayout;
         var polarLayoutNow = fullLayoutNow[_this.id];
+
         var x1 = x0 + dx;
         var y1 = y0 + dy;
         var a1 = xy2a(x1, y1);
@@ -1158,7 +1220,6 @@ proto.updateAngularDrag = function(fullLayout) {
 
             layers.bg.attr('transform', trans);
             layers['radial-grid'].attr('transform', trans);
-            layers['angular-line'].select('path').attr('transform', trans);
             layers['radial-axis'].attr('transform', trans2);
             layers['radial-line'].select('line').attr('transform', trans2);
             _this.updateRadialAxisTitle(fullLayoutNow, polarLayoutNow, rrot1);
@@ -1184,10 +1245,7 @@ proto.updateAngularDrag = function(fullLayout) {
 
         // update rotation -> range -> _m,_b
         angularAxis.rotation = Lib.modHalf(rot1, 360);
-        angularAxis.setGeometry();
-        angularAxis.setScale();
-
-        doTicksSingle(gd, angularAxis, true);
+        _this.updateAngularAxis(fullLayoutNow, polarLayoutNow);
 
         if(_this._hasClipOnAxisFalse && !Lib.isFullCircle(_this.sectorInRad)) {
             scatterTraces.call(Drawing.hideOutsideRangePoints, _this);
diff --git a/test/jasmine/tests/polar_test.js b/test/jasmine/tests/polar_test.js
@@ -428,7 +428,7 @@ describe('Test relayout on polar subplots:', function() {
         .then(toggle(
             'polar.angularaxis.showgrid',
             [true, false], [8, 0],
-            '.angular-grid > .angularaxis > path', assertCnt
+            '.angular-grid > path', assertCnt
         ))
         .then(toggle(
             'polar.angularaxis.showticklabels',
@@ -608,7 +608,7 @@ describe('Test relayout on polar subplots:', function() {
             }
 
             assertLetterCount('.plotbg > path');
-            assertLetterCount('.radial-grid > .x > path');
+            assertLetterCount('.radial-grid > path');
             assertLetterCount('.angular-line > path');
         }
 
@@ -1303,7 +1303,7 @@ describe('Test polar *gridshape linear* interactions', function() {
         var dragCoverNode;
         var p1;
 
-        var layersRotateFromZero = ['.plotbg > path', '.radial-grid', '.angular-line > path'];
+        var layersRotateFromZero = ['.plotbg > path', '.radial-grid'];
         var layersRotateFromRadialAxis = ['.radial-axis', '.radial-line > line'];
 
         function _assertTransformRotate(msg, query, rot) {
