handle width:null|height:null as toImage valid args

... where in that case, we use graph's current width/height
    (as found in gd._fullLayout) for the exported dimensions.

Author: etpinard

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

@@ -65,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: test/jasmine/tests/modebar_test.js

@@ -982,6 +982,19 @@ describe('ModeBar', function() {
                 .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);
+            });
         });
 
         describe('cartesian handlers', function() {

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);