Merge pull request #2931 from plotly/fix-download-from-graph-id

Fix Plotly.download using graph id as 1st argument

Author: etpinard

src/snapshot/download.js

@@ -13,24 +13,26 @@ var toImage = require('../plot_api/to_image');
 var Lib = require('../lib'); // for isIE
 var fileSaver = require('./filesaver');
 
-/**
- * @param {object} gd figure Object
- * @param {object} opts option object
- * @param opts.format 'jpeg' | 'png' | 'webp' | 'svg'
- * @param opts.width width of snapshot in px
- * @param opts.height height of snapshot in px
- * @param opts.filename name of file excluding extension
+/** Plotly.downloadImage
+ *
+ * @param {object | string | HTML div} gd
+ *   can either be a data/layout/config object
+ *   or an existing graph <div>
+ *   or an id to an existing graph <div>
+ * @param {object} opts (see ../plot_api/to_image)
+ * @return {promise}
  */
 function downloadImage(gd, opts) {
+    var _gd;
+    if(!Lib.isPlainObject(gd)) _gd = Lib.getGraphDiv(gd);
 
     // check for undefined opts
     opts = opts || {};
-
     // default to png
     opts.format = opts.format || 'png';
 
     return new Promise(function(resolve, reject) {
-        if(gd._snapshotInProgress) {
+        if(_gd && _gd._snapshotInProgress) {
             reject(new Error('Snapshotting already in progress.'));
         }
 
@@ -43,19 +45,19 @@ function downloadImage(gd, opts) {
             reject(new Error('Sorry IE does not support downloading from canvas. Try {format:\'svg\'} instead.'));
         }
 
-        gd._snapshotInProgress = true;
+        if(_gd) _gd._snapshotInProgress = true;
         var promise = toImage(gd, opts);
 
         var filename = opts.filename || gd.fn || 'newplot';
         filename += '.' + opts.format;
 
         promise.then(function(result) {
-            gd._snapshotInProgress = false;
+            if(_gd) _gd._snapshotInProgress = false;
             return fileSaver(result, filename);
         }).then(function(name) {
             resolve(name);
         }).catch(function(err) {
-            gd._snapshotInProgress = false;
+            if(_gd) _gd._snapshotInProgress = false;
             reject(err);
         });
     });

test/jasmine/tests/download_test.js

@@ -61,6 +61,24 @@ describe('Plotly.downloadImage', function() {
         downloadTest(gd, 'svg', done);
     }, LONG_TIMEOUT_INTERVAL);
 
+    it('should work when passing graph div id', function(done) {
+        downloadTest('graph', 'svg', done);
+    }, LONG_TIMEOUT_INTERVAL);
+
+    it('should work when passing a figure object', function(done) {
+        var fig = {
+            data: [{y: [1, 2, 1]}]
+        };
+        Plotly.downloadImage(fig)
+        .then(function() {
+            expect(document.createElement).toHaveBeenCalledWith('canvas');
+            expect(gd._snapshotInProgress)
+                .toBe(undefined, 'should not attach _snapshotInProgress to figure objects');
+        })
+        .catch(failTest)
+        .then(done);
+    }, LONG_TIMEOUT_INTERVAL);
+
     it('should produce the right SVG output in IE', function(done) {
         // mock up IE behavior
         spyOn(Lib, 'isIE').and.callFake(function() { return true; });
@@ -127,16 +145,26 @@ function downloadTest(gd, format, done) {
         });
     });
 
-    Plotly.plot(gd, textchartMock.data, textchartMock.layout).then(function(gd) {
+    Plotly.plot(gd, textchartMock.data, textchartMock.layout).then(function(_gd) {
         // start observing dom
         // configuration of the observer:
         var config = { childList: true };
 
         // pass in the target node and observer options
         observer.observe(target, config);
 
-        return Plotly.downloadImage(gd, {format: format, height: 300, width: 300, filename: 'plotly_download'});
-    }).then(function(filename) {
+        var promise = Plotly.downloadImage(gd, {
+            format: format,
+            height: 300,
+            width: 300,
+            filename: 'plotly_download'
+        });
+
+        expect(_gd._snapshotInProgress).toBe(true, 'should attach _snapshotInProgress to graph divs');
+
+        return promise;
+    })
+    .then(function(filename) {
         // stop observing
         observer.disconnect();
         // look for an added and removed link
@@ -150,11 +178,11 @@ function downloadTest(gd, format, done) {
 
         // check that link removed
         expect(linkadded).toBe(linkdeleted);
-        done();
-    });
+    })
+    .catch(failTest)
+    .then(done);
 }
 
-
 // Only chrome supports webp at the time of writing
 function checkWebp(cb) {
     var img = new Image();