diff --git a/src/lib/index.js b/src/lib/index.js index 850b8aa88e6..639360bb294 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1171,3 +1171,8 @@ lib.formatPercent = function(ratio, n) { } return str; }; + +lib.isHidden = function(gd) { + var display = window.getComputedStyle(gd).display; + return !display || display === 'none'; +}; diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js index 33a1a000cb7..3dd530abf6d 100644 --- a/src/plot_api/plot_api.js +++ b/src/plot_api/plot_api.js @@ -182,7 +182,7 @@ function plot(gd, data, layout, config) { if(gd._context.responsive) { if(!gd._responsiveChartHandler) { // Keep a reference to the resize handler to purge it down the road - gd._responsiveChartHandler = function() { Plots.resize(gd); }; + gd._responsiveChartHandler = function() { if(!Lib.isHidden(gd)) Plots.resize(gd); }; // Listen to window resize window.addEventListener('resize', gd._responsiveChartHandler); diff --git a/src/plots/plots.js b/src/plots/plots.js index 541c3333826..2bbd3727724 100644 --- a/src/plots/plots.js +++ b/src/plots/plots.js @@ -75,12 +75,7 @@ plots.resize = function(gd) { gd = Lib.getGraphDiv(gd); return new Promise(function(resolve, reject) { - function isHidden(gd) { - var display = window.getComputedStyle(gd).display; - return !display || display === 'none'; - } - - if(!gd || isHidden(gd)) { + if(!gd || Lib.isHidden(gd)) { reject(new Error('Resize must be passed a displayed plot div element.')); } @@ -88,7 +83,7 @@ plots.resize = function(gd) { gd._redrawTimer = setTimeout(function() { // return if there is nothing to resize or is hidden - if(!gd.layout || (gd.layout.width && gd.layout.height) || isHidden(gd)) { + if(!gd.layout || (gd.layout.width && gd.layout.height) || Lib.isHidden(gd)) { resolve(gd); return; } diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js index 004d77c70b5..25084472885 100644 --- a/test/jasmine/tests/config_test.js +++ b/test/jasmine/tests/config_test.js @@ -771,6 +771,23 @@ describe('config argument', function() { .catch(failTest) .then(done); }); + + it('should not resize if gd is hidden', function(done) { + spyOn(Plotly.Plots, 'resize').and.callThrough(); + + fillParent(1, 1); + Plotly.plot(gd, data, {}, {responsive: true}) + .then(function() { + gd.style.display = 'none'; + viewport.set(width / 2, height / 2); + }) + .then(delay(RESIZE_DELAY)) + .then(function() { + expect(Plotly.Plots.resize.calls.count()).toBe(0); + }) + .catch(failTest) + .then(done); + }); }); });