Merge pull request #2758 from plotly/plots-resize-sanitize-margins

Sanitize margin after 'autosize' relayouts

Author: etpinard

src/plots/plots.js

@@ -345,6 +345,7 @@ plots.supplyDefaults = function(gd, opts) {
 
         if(!newLayout.width) newFullLayout.width = oldWidth;
         if(!newLayout.height) newFullLayout.height = oldHeight;
+        plots.sanitizeMargins(newFullLayout);
     }
     else {
 
@@ -357,7 +358,7 @@ plots.supplyDefaults = function(gd, opts) {
             initialAutoSize = missingWidthOrHeight && (autosize || autosizable);
 
         if(initialAutoSize) plots.plotAutoSize(gd, newLayout, newFullLayout);
-        else if(missingWidthOrHeight) plots.sanitizeMargins(gd);
+        else if(missingWidthOrHeight) plots.sanitizeMargins(newFullLayout);
 
         // for backwards-compatibility with Plotly v1.x.x
         if(!autosize && missingWidthOrHeight) {

test/jasmine/tests/plots_test.js

@@ -289,74 +289,100 @@ describe('Test Plots', function() {
         });
     });
 
-    describe('Plots.resize', function() {
+    describe('Plots.resize:', function() {
         var gd;
 
-        beforeAll(function(done) {
-            gd = createGraphDiv();
+        describe('on graph div DOM style changes', function() {
+            beforeAll(function(done) {
+                gd = createGraphDiv();
 
-            Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }])
-                .then(function() {
-                    gd.style.width = '400px';
-                    gd.style.height = '400px';
+                Plotly.plot(gd, [{ x: [1, 2, 3], y: [2, 3, 4] }])
+                    .then(function() {
+                        gd.style.width = '400px';
+                        gd.style.height = '400px';
 
-                    return Plotly.Plots.resize(gd);
-                })
-                .then(done);
-        });
+                        return Plotly.Plots.resize(gd);
+                    })
+                    .then(done);
+            });
 
-        afterAll(destroyGraphDiv);
+            afterAll(destroyGraphDiv);
 
-        it('should resize the plot clip', function() {
-            var uid = gd._fullLayout._uid;
+            it('should resize the plot clip', function() {
+                var uid = gd._fullLayout._uid;
 
-            var plotClip = document.getElementById('clip' + uid + 'xyplot'),
-                clipRect = plotClip.children[0],
-                clipWidth = +clipRect.getAttribute('width'),
-                clipHeight = +clipRect.getAttribute('height');
+                var plotClip = document.getElementById('clip' + uid + 'xyplot'),
+                    clipRect = plotClip.children[0],
+                    clipWidth = +clipRect.getAttribute('width'),
+                    clipHeight = +clipRect.getAttribute('height');
 
-            expect(clipWidth).toBe(240);
-            expect(clipHeight).toBe(220);
-        });
+                expect(clipWidth).toBe(240);
+                expect(clipHeight).toBe(220);
+            });
 
-        it('should resize the main svgs', function() {
-            var mainSvgs = document.getElementsByClassName('main-svg');
-            expect(mainSvgs.length).toBe(2);
+            it('should resize the main svgs', function() {
+                var mainSvgs = document.getElementsByClassName('main-svg');
+                expect(mainSvgs.length).toBe(2);
 
-            for(var i = 0; i < mainSvgs.length; i++) {
-                var svg = mainSvgs[i],
-                    svgWidth = +svg.getAttribute('width'),
-                    svgHeight = +svg.getAttribute('height');
+                for(var i = 0; i < mainSvgs.length; i++) {
+                    var svg = mainSvgs[i],
+                        svgWidth = +svg.getAttribute('width'),
+                        svgHeight = +svg.getAttribute('height');
 
-                expect(svgWidth).toBe(400);
-                expect(svgHeight).toBe(400);
-            }
-        });
+                    expect(svgWidth).toBe(400);
+                    expect(svgHeight).toBe(400);
+                }
+            });
+
+            it('should update the axis scales', function() {
+                var mainSvgs = document.getElementsByClassName('main-svg');
+                expect(mainSvgs.length).toBe(2);
 
-        it('should update the axis scales', function() {
-            var mainSvgs = document.getElementsByClassName('main-svg');
-            expect(mainSvgs.length).toBe(2);
+                var fullLayout = gd._fullLayout,
+                    plotinfo = fullLayout._plots.xy;
 
-            var fullLayout = gd._fullLayout,
-                plotinfo = fullLayout._plots.xy;
+                expect(fullLayout.xaxis._length).toEqual(240);
+                expect(fullLayout.yaxis._length).toEqual(220);
 
-            expect(fullLayout.xaxis._length).toEqual(240);
-            expect(fullLayout.yaxis._length).toEqual(220);
+                expect(plotinfo.xaxis._length).toEqual(240);
+                expect(plotinfo.yaxis._length).toEqual(220);
+            });
+
+            it('should allow resizing by plot ID', function(done) {
+                var mainSvgs = document.getElementsByClassName('main-svg');
+                expect(mainSvgs.length).toBe(2);
+
+                expect(typeof gd.id).toBe('string');
+                expect(gd.id).toBeTruthy();
 
-            expect(plotinfo.xaxis._length).toEqual(240);
-            expect(plotinfo.yaxis._length).toEqual(220);
+                Plotly.Plots.resize(gd.id)
+                .catch(failTest)
+                .then(done);
+            });
         });
 
-        it('should allow resizing by plot ID', function(done) {
-            var mainSvgs = document.getElementsByClassName('main-svg');
-            expect(mainSvgs.length).toBe(2);
+        describe('on styled graph div', function() {
+            afterEach(destroyGraphDiv);
 
-            expect(typeof gd.id).toBe('string');
-            expect(gd.id).toBeTruthy();
+            it('should sanitize margins', function(done) {
+                gd = createGraphDiv();
+                gd.style.width = '150px';
+                gd.style.height = '150px';
 
-            Plotly.Plots.resize(gd.id)
-            .catch(failTest)
-            .then(done);
+                function _assert(exp) {
+                    var margin = gd._fullLayout.margin || {};
+                    for(var k in exp) {
+                        expect(margin[k]).toBe(exp[k], ' - margin.' + k);
+                    }
+                }
+
+                Plotly.plot(gd, [], {})
+                    .then(function() { _assert({l: 74, r: 74, t: 82, b: 66}); })
+                    .then(function() { return Plotly.Plots.resize(gd); })
+                    .then(function() { _assert({l: 74, r: 74, t: 82, b: 66}); })
+                    .catch(failTest)
+                    .then(done);
+            });
         });
     });