Feature/snapshot

snapshot.md

@@ -0,0 +1,48 @@
+# Plotly Snapshots
+
+## Purpose
+The purpose of this markdown document is to document exploration of how to best attach the `Plotly.Snapshot.toImage` function to the plot/`div` itself most fully discussed in [issue 83](https://github.com/plotly/plotly.js/issues/83).  Another very nice ability would be to offer resize options for the snapshot.
+
+
+
+## Questions
+Where do we attach toImage on the graph div?
+    Is it _toImage?
+    Do we just require /snapshot and bind to `this`?
+
+Will any of the chart types require special snapshot abilities or features?
+
+What is the expected use case of our new ability?
+
+How do we piggyback on the snapshot button in the toolbar?
+
+How do we ask for new size?
+
+Are there reference points from other libraries that we could mimic or learn from?
+
+
+## Thoughts
+
+- `Plotly.Snapshot.clone` could be used to resize by adding this to `options` when/if we use `Plotly.plot` with our cloned `div`.  We could also dynamically show a resulting view in a modal or something similar and adjust with `Plotly.relayout`.
+
+- `Plotly.Snapshot.clone` by default sets `staticPlot:true` in `config`.
+
+- A very basic way to attach this assuming there is a modebar would be to do something like this.  See [codepen](http://codepen.io/timelyportfolio/pen/ZWvyYM).
+```
+gd._toImage = function(){
+  this._fullLayout._modeBar.buttons.filter(
+    function(btn){return btn[0].name==="toImage"
+  })[0][0].click(this)
+}
+```
+
+- `Plotly.Snapshot.clone` already has thumbnail ability by specifying [options tileClass:"thumbnail"](https://github.com/plotly/plotly.js/blob/master/src/snapshot/cloneplot.js#L76) for the specific thumbnail use case.
+
+
+
+- Quick code to experiment from R
+```
+library(plotly)
+
+ggplotly(ggplot(cars,aes(speed,dist))+geom_point())
+```

src/components/modebar/buttons.js

@@ -64,12 +64,12 @@ modeBarButtons.toImage = {
         gd._snapshotInProgress = true;
         Lib.notifier('Taking snapshot - this may take a few seconds', 'long');
 
-        var ev = Snapshot.toImage(gd, {format: format});
+        var promise = Snapshot.toImage(gd, {format: format});
 
         var filename = gd.fn || 'newplot';
         filename += '.' + format;
 
-        ev.once('success', function(result) {
+        promise.then(function(result) {
             gd._snapshotInProgress = false;
 
             var downloadLink = document.createElement('a');
@@ -80,16 +80,12 @@ modeBarButtons.toImage = {
             downloadLink.click();
             document.body.removeChild(downloadLink);
 
-            ev.clean();
-        });
-
-        ev.once('error', function(err) {
+        })
+        .catch(function(err) {
             gd._snapshotInProgress = false;
 
             Lib.notifier('Sorry there was a problem downloading your ' + format, 'long');
             console.error(err);
-
-            ev.clean();
         });
     }
 };

src/snapshot/index.js

@@ -34,7 +34,8 @@ var Snapshot = {
     clone: require('./cloneplot'),
     toSVG: require('./tosvg'),
     svgToImg: require('./svgtoimg'),
-    toImage: require('./toimage')
+    toImage: require('./toimage'),
+    toSnapshot: require('./tosnapshot')
 };
 
 module.exports = Snapshot;

src/snapshot/svgtoimg.js

@@ -9,62 +9,61 @@
 
 'use strict';
 
-var EventEmitter = require('events').EventEmitter;
-
 function svgToImg(opts) {
 
-    var ev = opts.emitter ? opts.emitter : new EventEmitter();
-
-    var Image = window.Image;
-    var Blob = window.Blob;
-
-    var svg = opts.svg;
-    var format = opts.format || 'png';
-    var canvas = opts.canvas;
-
-    var ctx = canvas.getContext('2d');
-    var img = new Image();
-    var DOMURL = window.URL || window.webkitURL;
-    var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
-    var url = DOMURL.createObjectURL(svgBlob);
-
-    canvas.height = opts.height || 150;
-    canvas.width = opts.width || 300;
-
-    img.onload = function() {
-        var imgData;
-
-        DOMURL.revokeObjectURL(url);
-        ctx.drawImage(img, 0, 0);
-
-        switch(format) {
-            case 'jpeg':
-                imgData = canvas.toDataURL('image/jpeg');
-                break;
-            case 'png':
-                imgData = canvas.toDataURL('image/png');
-                break;
-            case 'webp':
-                imgData = canvas.toDataURL('image/webp');
-                break;
-            case 'svg':
-                imgData = svg;
-                break;
-            default:
-                return ev.emit('error', 'Image format is not jpeg, png or svg');
-        }
-
-        ev.emit('success', imgData);
-    };
-
-    img.onerror = function(err) {
-        DOMURL.revokeObjectURL(url);
-        return ev.emit('error', err);
-    };
-
-    img.src = url;
-
-    return ev;
+    var promise = new Promise(function(resolve, reject) {
+
+        var Image = window.Image;
+        var Blob = window.Blob;
+
+        var svg = opts.svg;
+        var format = opts.format || 'png';
+        var canvas = opts.canvas;
+
+        var ctx = canvas.getContext('2d');
+        var img = new Image();
+        var DOMURL = window.URL || window.webkitURL;
+        var svgBlob = new Blob([svg], {type: 'image/svg+xml;charset=utf-8'});
+        var url = DOMURL.createObjectURL(svgBlob);
+
+        canvas.height = opts.height || 150;
+        canvas.width = opts.width || 300;
+
+        img.onload = function() {
+            var imgData;
+
+            DOMURL.revokeObjectURL(url);
+            ctx.drawImage(img, 0, 0);
+
+            switch(format) {
+                case 'jpeg':
+                    imgData = canvas.toDataURL('image/jpeg');
+                    break;
+                case 'png':
+                    imgData = canvas.toDataURL('image/png');
+                    break;
+                case 'webp':
+                    imgData = canvas.toDataURL('image/webp');
+                    break;
+                case 'svg':
+                    imgData = svg;
+                    break;
+                default:
+                    reject(new Error('Image format is not jpeg, png or svg'));
+            }
+
+            resolve(imgData);
+        };
+
+        img.onerror = function(err) {
+            DOMURL.revokeObjectURL(url);
+            reject(err);
+        };
+
+        img.src = url;
+    });
+
+    return promise;
 }
 
 module.exports = svgToImg;

src/snapshot/toimage.js

@@ -10,7 +10,6 @@
 
 'use strict';
 
-var EventEmitter = require('events').EventEmitter;
 var Plotly = require('../plotly');
 
 /**
@@ -19,64 +18,73 @@ var Plotly = require('../plotly');
  * @param opts.format 'jpeg' | 'png' | 'webp' | 'svg'
  */
 function toImage(gd, opts) {
-
-    // first clone the GD so we can operate in a clean environment
-    var Snapshot = Plotly.Snapshot;
-    var ev = new EventEmitter();
-
-    var clone = Snapshot.clone(gd, {format: 'png'});
-    var clonedGd = clone.td;
-
-    // put the cloned div somewhere off screen before attaching to DOM
-    clonedGd.style.position = 'absolute';
-    clonedGd.style.left = '-5000px';
-    document.body.appendChild(clonedGd);
-
-    function wait() {
-        var delay = Snapshot.getDelay(clonedGd._fullLayout);
-
-        setTimeout(function() {
-            var svg = Plotly.Snapshot.toSVG(clonedGd);
-
-            var canvasContainer = window.document.createElement('div');
-            var canvas = window.document.createElement('canvas');
-
-            // window.document.body.appendChild(canvasContainer);
-            canvasContainer.appendChild(canvas);
-
-            canvasContainer.id = Plotly.Lib.randstr();
-            canvas.id = Plotly.Lib.randstr();
-
-            ev = Plotly.Snapshot.svgToImg({
-                format: opts.format,
-                width: clonedGd._fullLayout.width,
-                height: clonedGd._fullLayout.height,
-                canvas: canvas,
-                emitter: ev,
-                svg: svg
+    var promise = new Promise(function(resolve, reject) {
+        // check for undefined opts
+        opts = (opts) ? opts : {};
+        // default to png
+        opts.format = (opts.format) ? opts.format : 'png';
+
+        // first clone the GD so we can operate in a clean environment
+        var Snapshot = Plotly.Snapshot;
+
+        var clone = Snapshot.clone(gd, {format: 'png', height: opts.height, width: opts.width});
+        var clonedGd = clone.td;
+
+        // put the cloned div somewhere off screen before attaching to DOM
+        clonedGd.style.position = 'absolute';
+        clonedGd.style.left = '-5000px';
+        document.body.appendChild(clonedGd);
+
+        function wait() {
+            var delay = Snapshot.getDelay(clonedGd._fullLayout);
+
+            return new Promise(function(resolve, reject) {
+                setTimeout(function() {
+                    var svg = Plotly.Snapshot.toSVG(clonedGd);
+
+                    var canvasContainer = window.document.createElement('div');
+                    var canvas = window.document.createElement('canvas');
+
+                    // window.document.body.appendChild(canvasContainer);
+                    canvasContainer.appendChild(canvas);
+
+                    canvasContainer.id = Plotly.Lib.randstr();
+                    canvas.id = Plotly.Lib.randstr();
+
+                    Plotly.Snapshot.svgToImg({
+                        format: opts.format,
+                        width: clonedGd._fullLayout.width,
+                        height: clonedGd._fullLayout.height,
+                        canvas: canvas,
+                        svg: svg
+                    }).then(function(url) {
+                        if(clonedGd) clonedGd.remove();
+                        resolve(url);
+                    }).catch(function(err) {
+                        reject(err);
+                    });
+                }, delay);
             });
+        }
+
+        var redrawFunc = Snapshot.getRedrawFunc(clonedGd);
+
+        Plotly.plot(clonedGd, clone.data, clone.layout, clone.config)
+            // TODO: the following is Plotly.Plots.redrawText but without the waiting.
+            // we shouldn't need to do this, but in *occasional* cases we do. Figure
+            // out why and take it out.
+
+            // not sure the above TODO makes sense anymore since
+            //   we have converted to promises
+            .then(redrawFunc)
+            .then(wait)
+            .then(function(url) { resolve(url); })
+            .catch(function(err) {
+                reject(err);
+            });
+    });
 
-            ev.clean = function() {
-                if(clonedGd) clonedGd.remove();
-            };
-
-        }, delay);
-    }
-
-    var redrawFunc = Snapshot.getRedrawFunc(clonedGd);
-
-    Plotly.plot(clonedGd, clone.data, clone.layout, clone.config)
-        // TODO: the following is Plotly.Plots.redrawText but without the waiting.
-        // we shouldn't need to do this, but in *occasional* cases we do. Figure
-        // out why and take it out.
-        .then(redrawFunc)
-        .then(wait)
-        .catch(function(err) {
-            ev.emit('error', err);
-        });
-
-
-    return ev;
+    return promise;
 }
 
 module.exports = toImage;