even more robust relayout

Author: etpinard

src/plots/polar/polar.js

@@ -51,8 +51,8 @@ function Polar(gd, id) {
 
     this.clipIds.circle = clipIdBase + '-circle';
     this.clipPaths.circle = fullLayout._clips.append('clipPath')
-        .attr('id', this.clipIds.circle)
-        .append('path');
+        .attr('id', this.clipIds.circle);
+    this.clipPaths.circle.append('path');
 
     this.framework = fullLayout._polarlayer.append('g')
         .attr('class', id);
@@ -242,7 +242,7 @@ proto.updateLayout = function(fullLayout, polarLayout) {
     })
     .call(Color.fill, polarLayout.bgcolor);
 
-    _this.clipPaths.circle
+    _this.clipPaths.circle.select('path')
         .attr('d', pathSectorClosed(radius, sector))
         .attr('transform', strTranslate(cx - xOffset2, cy - yOffset2));
 };
@@ -304,7 +304,7 @@ proto.updateRadialAxis = function(fullLayout, polarLayout) {
         return pathSector(r, sector);
     };
 
-    var newTickLayout = radialLayout.ticks + radialLayout.showticklabels;
+    var newTickLayout = strTickLayout(radialLayout);
     if(_this.radialTickLayout !== newTickLayout) {
         layers['radial-axis'].selectAll('.xtick').remove();
         _this.radialTickLayout = newTickLayout;
@@ -505,7 +505,7 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
             'middle';
     };
 
-    var newTickLayout = angularLayout.ticks + angularLayout.showticklabels;
+    var newTickLayout = strTickLayout(angularLayout);
     if(_this.angularTickLayout !== newTickLayout) {
         layers['angular-axis'].selectAll('.angulartick').remove();
         _this.angularTickLayout = newTickLayout;
@@ -708,7 +708,7 @@ proto.updateMainDrag = function(fullLayout, polarLayout) {
             strTranslate(xOffset2, yOffset2) + strRotate([-dangle, cxx, cyy])
         );
 
-        _this.clipPaths.circle.attr('transform',
+        _this.clipPaths.circle.select('circle').attr('transform',
             strTranslate(cxx, cyy) + strRotate(dangle)
         );
 
@@ -987,6 +987,10 @@ function setScale(ax, axLayout, fullLayout) {
     ax.setScale();
 }
 
+function strTickLayout(axLayout) {
+    return axLayout.ticks + String(axLayout.ticklen) + String(axLayout.showticklabels);
+}
+
 // Finds the bounding box of a given circle sector,
 // inspired by https://math.stackexchange.com/q/1852703
 //

test/jasmine/tests/polar_test.js

@@ -113,6 +113,22 @@ describe('Test polar plots defaults:', function() {
         expect(layoutOut.polar.radialaxis.type).toBe('linear', 'not date');
         expect(layoutOut.polar.angularaxis.type).toBe('linear', 'not category');
     });
+
+    it('should propagate axis *color* settings', function() {
+        _supply({
+            polar: {
+                angularaxis: {color: 'red'},
+                radialaxis: {color: 'blue'}
+            }
+        });
+
+        expect(layoutOut.polar.angularaxis.linecolor).toBe('red');
+        expect(layoutOut.polar.angularaxis.gridcolor).toBe('rgb(255, 153, 153)', 'blend by 60% with bgcolor');
+
+        expect(layoutOut.polar.radialaxis.titlefont.color).toBe('blue');
+        expect(layoutOut.polar.radialaxis.linecolor).toBe('blue');
+        expect(layoutOut.polar.radialaxis.gridcolor).toBe('rgb(153, 153, 255)', 'blend by 60% with bgcolor');
+    });
 });
 
 describe('Test relayout on polar subplots:', function() {
@@ -399,4 +415,35 @@ describe('Test relayout on polar subplots:', function() {
         .then(done);
     });
 
+    it('should clean up its framework, clip paths and info layers when getting deleted', function(done) {
+        var gd = createGraphDiv();
+        var fig = Lib.extendDeep({}, require('@mocks/polar_scatter.json'));
+
+        function _assert(exp) {
+            expect(d3.selectAll('g.polar').size()).toBe(exp.subplot, '# subplot layer');
+            expect(d3.selectAll('g.g-polartitle').size()).toBe(exp.rtitle, '# radial title');
+
+            var clipCnt = 0;
+            d3.selectAll('clipPath').each(function() {
+                if(/polar-circle$/.test(this.id)) clipCnt++;
+            });
+            expect(clipCnt).toBe(exp.clip, '# clip paths');
+        }
+
+        Plotly.plot(gd, fig).then(function() {
+            _assert({subplot: 1, clip: 1, rtitle: 1});
+
+            return Plotly.restyle(gd, 'visible', false);
+        })
+        .then(function() {
+            _assert({subplot: 0, clip: 0, rtitle: 0});
+
+            return Plotly.restyle(gd, 'visible', true);
+        })
+        .then(function() {
+            _assert({subplot: 1, clip: 1, rtitle: 1});
+        })
+        .catch(fail)
+        .then(done);
+    });
 });