Merge pull request #3746 from plotly/toimage-current-graph-width-height

Add way for `toImage` to export images with current graph width/height

Author: etpinard

Diff for: src/components/modebar/buttons.js

@@ -6,7 +6,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var Registry = require('../../registry');
@@ -44,7 +43,6 @@ var modeBarButtons = module.exports = {};
  * @param {boolean} [toggle]
  *      is the button a toggle button?
  */
-
 modeBarButtons.toImage = {
     name: 'toImage',
     title: function(gd) {
@@ -67,7 +65,7 @@ modeBarButtons.toImage = {
         }
 
         ['filename', 'width', 'height', 'scale'].forEach(function(key) {
-            if(toImageButtonOptions[key]) {
+            if(key in toImageButtonOptions) {
                 opts[key] = toImageButtonOptions[key];
             }
         });

Diff for: src/plot_api/to_image.js

@@ -8,6 +8,8 @@
 
 'use strict';
 
+var isNumeric = require('fast-isnumeric');
+
 var plotApi = require('./plot_api');
 var Lib = require('../lib');
 
@@ -27,15 +29,17 @@ var attrs = {
         min: 1,
         description: [
             'Sets the exported image width.',
-            'Defaults to the value found in `layout.width`'
+            'Defaults to the value found in `layout.width`',
+            'If set to *null*, the exported image width will match the current graph width.'
         ].join(' ')
     },
     height: {
         valType: 'number',
         min: 1,
         description: [
             'Sets the exported image height.',
-            'Defaults to the value found in `layout.height`'
+            'Defaults to the value found in `layout.height`',
+            'If set to *null*, the exported image height will match the current graph height.'
         ].join(' ')
     },
     scale: {
@@ -87,23 +91,27 @@ function toImage(gd, opts) {
     var data;
     var layout;
     var config;
+    var fullLayout;
 
     if(Lib.isPlainObject(gd)) {
         data = gd.data || [];
         layout = gd.layout || {};
         config = gd.config || {};
+        fullLayout = {};
     } else {
         gd = Lib.getGraphDiv(gd);
         data = Lib.extendDeep([], gd.data);
         layout = Lib.extendDeep({}, gd.layout);
         config = gd._context;
+        fullLayout = gd._fullLayout || {};
     }
 
     function isImpliedOrValid(attr) {
         return !(attr in opts) || Lib.validate(opts[attr], attrs[attr]);
     }
 
-    if(!isImpliedOrValid('width') || !isImpliedOrValid('height')) {
+    if((!isImpliedOrValid('width') && opts.width !== null) ||
+        (!isImpliedOrValid('height') && opts.height !== null)) {
         throw new Error('Height and width should be pixel values.');
     }
 
@@ -132,8 +140,16 @@ function toImage(gd, opts) {
 
     // extend layout with image options
     var layoutImage = Lib.extendFlat({}, layout);
-    if(width) layoutImage.width = width;
-    if(height) layoutImage.height = height;
+    if(width) {
+        layoutImage.width = width;
+    } else if(opts.width === null && isNumeric(fullLayout.width)) {
+        layoutImage.width = fullLayout.width;
+    }
+    if(height) {
+        layoutImage.height = height;
+    } else if(opts.height === null && isNumeric(fullLayout.height)) {
+        layoutImage.height = fullLayout.height;
+    }
 
     // extend config for static plot
     var configImage = Lib.extendFlat({}, config, {

Diff for: src/snapshot/download.js

@@ -6,11 +6,10 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var toImage = require('../plot_api/to_image');
-var Lib = require('../lib'); // for isIE
+var Lib = require('../lib');
 var fileSaver = require('./filesaver');
 
 /** Plotly.downloadImage

Diff for: test/jasmine/tests/modebar_test.js

@@ -11,7 +11,6 @@ var destroyGraphDiv = require('../assets/destroy_graph_div');
 var selectButton = require('../assets/modebar_button');
 var failTest = require('../assets/fail_test');
 
-
 describe('ModeBar', function() {
     'use strict';
 
@@ -960,10 +959,11 @@ describe('ModeBar', function() {
                 Plotly.plot(gd, {data: [], layout: {}})
                 .then(function() {
                     selectButton(gd._fullLayout._modeBar, 'toImage').click();
-                    expect(Registry.call).toHaveBeenCalledWith('downloadImage', gd,
-                        {format: 'png'});
-                    done();
-                });
+                    expect(Registry.call)
+                        .toHaveBeenCalledWith('downloadImage', gd, {format: 'png'});
+                })
+                .catch(failTest)
+                .then(done);
             });
 
             it('should accept overriding defaults', function(done) {
@@ -973,13 +973,27 @@ describe('ModeBar', function() {
                         filename: 'x',
                         unsupported: 'should not pass'
                     }
-                } })
+                }})
                 .then(function() {
                     selectButton(gd._fullLayout._modeBar, 'toImage').click();
-                    expect(Registry.call).toHaveBeenCalledWith('downloadImage', gd,
-                        {format: 'svg', filename: 'x'});
-                    done();
-                });
+                    expect(Registry.call)
+                        .toHaveBeenCalledWith('downloadImage', gd, {format: 'svg', filename: 'x'});
+                })
+                .catch(failTest)
+                .then(done);
+            });
+
+            it('should accept overriding defaults with null values', function(done) {
+                Plotly.plot(gd, {data: [], layout: {}, config: {
+                    toImageButtonOptions: {width: null, height: null}
+                }})
+                .then(function() {
+                    selectButton(gd._fullLayout._modeBar, 'toImage').click();
+                    expect(Registry.call)
+                        .toHaveBeenCalledWith('downloadImage', gd, {format: 'png', width: null, height: null});
+                })
+                .catch(failTest)
+                .then(done);
             });
         });
 

Diff for: test/jasmine/tests/toimage_test.js

@@ -115,6 +115,24 @@ describe('Plotly.toImage', function() {
         .then(done);
     });
 
+    it('should use width/height of graph div when width/height are set to *null*', function(done) {
+        var fig = Lib.extendDeep({}, subplotMock);
+
+        gd.style.width = '832px';
+        gd.style.height = '502px';
+
+        Plotly.plot(gd, fig.data, fig.layout).then(function() {
+            expect(gd.layout.width).toBe(undefined, 'user layout width');
+            expect(gd.layout.height).toBe(undefined, 'user layout height');
+            expect(gd._fullLayout.width).toBe(832, 'full layout width');
+            expect(gd._fullLayout.height).toBe(502, 'full layout height');
+        })
+        .then(function() { return Plotly.toImage(gd, {width: null, height: null}); })
+        .then(function(url) { return assertSize(url, 832, 502); })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('should create proper file type', function(done) {
         var fig = Lib.extendDeep({}, subplotMock);