Merge pull request #2212 from plotly/resize-id

allow use of element ID in Plots.resize

Author: alexcjohnson

src/plots/plots.js

@@ -191,6 +191,7 @@ plots.getSubplotCalcData = function(calcData, type, subplotId) {
 // the text is at first, so it needs to draw it,
 // then wait a little, then draw it again
 plots.redrawText = function(gd) {
+    gd = Lib.getGraphDiv(gd);
 
     // do not work if polar is present
     if((gd.data && gd.data[0] && gd.data[0].r)) return;
@@ -211,6 +212,8 @@ plots.redrawText = function(gd) {
 
 // resize plot about the container size
 plots.resize = function(gd) {
+    gd = Lib.getGraphDiv(gd);
+
     return new Promise(function(resolve, reject) {
 
         function isHidden(gd) {

test/jasmine/tests/plot_promise_test.js

@@ -461,6 +461,8 @@ describe('Plotly.___ methods', function() {
             Plotly.plot(initialDiv, data, {}).then(done);
         });
 
+        afterEach(destroyGraphDiv);
+
         it('should return a resolved promise of the gd', function(done) {
             Plotly.Plots.resize(initialDiv).then(function(gd) {
                 expect(gd).toBeDefined();
@@ -469,14 +471,30 @@ describe('Plotly.___ methods', function() {
             }).then(done);
         });
 
-        it('should return a rejected promise with no argument', function(done) {
-            Plotly.Plots.resize().then(function() {
+        it('should return a rejected promise if gd is hidden', function(done) {
+            initialDiv.style.display = 'none';
+            Plotly.Plots.resize(initialDiv).then(function() {
+                expect(1).toBe(0, 'We were supposed to get an error.');
+            }, function(err) {
+                expect(err).toBeDefined();
+                expect(err.message).toBe('Resize must be passed a displayed plot div element.');
+            }).then(done);
+        });
+
+        it('should return a rejected promise if gd is detached from the DOM', function(done) {
+            destroyGraphDiv();
+            Plotly.Plots.resize(initialDiv).then(function() {
                 expect(1).toBe(0, 'We were supposed to get an error.');
             }, function(err) {
                 expect(err).toBeDefined();
                 expect(err.message).toBe('Resize must be passed a displayed plot div element.');
             }).then(done);
         });
+
+        it('errors before even generating a promise if gd is not defined', function() {
+            expect(function() { Plotly.Plots.resize(); })
+                .toThrow(new Error('DOM element provided is null or undefined'));
+        });
     });
 
 });

test/jasmine/tests/plots_test.js

@@ -6,6 +6,7 @@ var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var supplyAllDefaults = require('../assets/supply_defaults');
+var failTest = require('../assets/fail_test');
 
 
 describe('Test Plots', function() {
@@ -369,7 +370,7 @@ describe('Test Plots', function() {
                 .then(done);
         });
 
-        afterEach(destroyGraphDiv);
+        afterAll(destroyGraphDiv);
 
         it('should resize the plot clip', function() {
             var uid = gd._fullLayout._uid;
@@ -385,6 +386,7 @@ describe('Test Plots', function() {
 
         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],
@@ -397,6 +399,9 @@ describe('Test Plots', function() {
         });
 
         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;
 
@@ -406,6 +411,18 @@ describe('Test Plots', function() {
             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();
+
+            Plotly.Plots.resize(gd.id)
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('Plots.purge', function() {