several improvements to responsive charts

- move cleanup code into Plots.purge
- attach responsive handlers synchronously earlier in the drawing sequence
- honors Plotly.react
- add several tests

Author: antoinerg

src/lib/clear_responsive.js

@@ -0,0 +1,21 @@
+/**
+* Copyright 2012-2018, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+/**
+ * Clear responsive handlers (if any).
+ *
+ * @param {DOM node or object} gd : graph div object
+ */
+module.exports = function clearResponsive(gd) {
+    if(gd._responsiveChartHandler) {
+        window.removeEventListener('resize', gd._responsiveChartHandler);
+        delete gd._responsiveChartHandler;
+    }
+};

src/lib/index.js

@@ -118,6 +118,8 @@ lib.clearThrottle = throttleModule.clear;
 
 lib.getGraphDiv = require('./get_graph_div');
 
+lib.clearResponsive = require('./clear_responsive');
+
 lib.makeTraceGroups = require('./make_trace_groups');
 
 lib._ = require('./localize');

src/plot_api/plot_api.js

@@ -191,6 +191,15 @@ exports.plot = function(gd, data, layout, config) {
         gd.calcdata[i][0].trace = gd._fullData[i];
     }
 
+    // make the figure responsive
+    if(gd._context.responsive && !gd._responsiveChartHandler) {
+        // Keep a reference to the resize handler to purge it down the road
+        gd._responsiveChartHandler = function() {Plots.resize(gd);};
+
+        // Listen to window resize
+        window.addEventListener('resize', gd._responsiveChartHandler);
+    }
+
     /*
      * start async-friendly code - now we're actually drawing things
      */
@@ -385,15 +394,6 @@ function emitAfterPlot(gd) {
         fullLayout._redrawFromAutoMarginCount--;
     } else {
         gd.emit('plotly_afterplot');
-
-        // make the figure responsive
-        if(gd._context.responsive && !gd._responsiveChartHandler) {
-            // Keep a reference to the resize handler to purge it down the road
-            gd._responsiveChartHandler = function() {Plots.resize(gd);};
-
-            // Listen to window resize
-            window.addEventListener('resize', gd._responsiveChartHandler);
-        }
     }
 }
 
@@ -2243,6 +2243,9 @@ exports.react = function(gd, data, layout, config) {
             gd._context = undefined;
             setPlotContext(gd, config);
             configChanged = diffConfig(oldConfig, gd._context);
+
+            // remove responsive handler
+            Lib.clearResponsive(gd);
         }
 
         gd.data = data || [];
@@ -3164,11 +3167,6 @@ exports.purge = function purge(gd) {
     var fullData = gd._fullData || [];
     var calcdata = gd.calcdata || [];
 
-    // remove responsive handler
-    if(gd._responsiveChartHandler) {
-        window.removeEventListener('resize', gd._responsiveChartHandler);
-    }
-
     // remove gl contexts
     Plots.cleanPlot([], {}, fullData, fullLayout, calcdata);
 

src/plots/plots.js

@@ -1536,6 +1536,9 @@ plots.purge = function(gd) {
     // remove any planned throttles
     Lib.clearThrottle();
 
+    // remove responsive handler
+    Lib.clearResponsive(gd);
+
     // data and layout
     delete gd.data;
     delete gd.layout;

test/jasmine/tests/config_test.js

@@ -533,10 +533,12 @@ describe('config argument', function() {
 
     describe('responsive figure', function() {
         var gd;
+        var startWidth = 960, startHeight = 400;
+        var newWidth = 400, newHeight = 700;
         var data = [{x: [1, 2, 3, 4], y: [5, 10, 2, 8]}];
 
         beforeEach(function() {
-            viewport.reset();
+            viewport.set(startWidth, startHeight);
             gd = createGraphDiv();
 
             // Make the graph fill the parent
@@ -546,10 +548,27 @@ describe('config argument', function() {
 
         afterEach(function() {
             destroyGraphDiv();
-            // Reset window size
             viewport.reset();
         });
 
+        function testResponsive(promise) {
+            return promise
+            .then(function() {
+                checkLayoutSize(startWidth, startHeight);
+            })
+            // Resize viewport
+            .then(function() {
+                viewport.set(newWidth, newHeight);
+            })
+            // Wait for resize to happen (Plotly.resize has a 100ms timeout)
+            .then(delay(200))
+            // Check final figure size
+            .then(function() {
+                checkLayoutSize(newWidth, newHeight);
+            })
+            .catch(failTest);
+        }
+
         function checkLayoutSize(width, height) {
             expect(gd._fullLayout.width).toBe(width);
             expect(gd._fullLayout.height).toBe(height);
@@ -560,17 +579,60 @@ describe('config argument', function() {
         }
 
         it('should resize when the viewport width/height changes', function(done) {
-            var newWidth = 400, newHeight = 700;
-            Plotly.newPlot(gd, data, {}, {responsive: true})
+            var promise = Plotly.plot(gd, data, {}, {responsive: true});
+
+            testResponsive(promise)
+            .then(done);
+        });
+
+        it('should still be responsive if the plot is redrawn', function(done) {
+            var promise = Plotly.plot(gd, data, {}, {responsive: true})
+            .then(function() {
+                Plotly.restyle(gd, 'y[0]', data[0].y[0] * 2);
+            });
+
+            testResponsive(promise)
+            .then(done);
+        });
+
+        it('should still be responsive if the plot is purged and replotted', function(done) {
+            var promise = Plotly.plot(gd, data, {}, {responsive: true})
+            .then(function() {
+                Plotly.newPlot(gd, data, {}, {responsive: true});
+            });
+
+            testResponsive(promise)
+            .then(done);
+        });
+
+        it('should become responsive if configured to be so by Plotly.react', function(done) {
+            var promise = Plotly.plot(gd, data, {}, {responsive: false})
+            .then(function() {
+                Plotly.react(gd, data, {}, {responsive: true});
+            });
+
+            testResponsive(promise)
+            .then(done);
+        });
+
+        it('should stop being responsive if configured to be so by Plotly.react', function(done) {
+            Plotly.plot(gd, data, {}, {responsive: true})
+            // Check initial size
+            .then(function() {
+                checkLayoutSize(startWidth, startHeight);
+            })
+            // Turn off responsiveness
+            .then(function() {
+                Plotly.react(gd, data, {}, {responsive: false});
+            })
             // Resize viewport
             .then(function() {
                 viewport.set(newWidth, newHeight);
             })
-            // Wait for resize to happen (Plotly.resize has a 100ms timeout)
             .then(delay(200))
-            // Check final figure size
+            // Check final figure size hasn't changed
             .then(function() {
-                checkLayoutSize(newWidth, newHeight);
+                checkLayoutSize(startWidth, startHeight);
             })
             .catch(failTest)
             .then(done);