fix snapshot using the new plugin

explorerjs.html

@@ -589,6 +589,7 @@
   <script src="tinawebJS/sigma_v1.2/sigma.min.js" type="text/javascript" language="javascript"></script>
   <script src="tinawebJS/sigma_v1.2/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
   <script src="tinawebJS/sigma_v1.2/plugins/sigma.layout.forceAtlas2/worker.js"></script>
+  <script src="tinawebJS/sigma_v1.2/plugins/sigma.renderers.snapshot/sigma.renderers.snapshot.js"></script>
 
   <!-- testing sigma 1.5 imports from linkurious src -->
   <!-- <script src="tinawebJS/sigma_v1.5/sigma.js" type="text/javascript" language="javascript"></script>

tinawebJS/methods.js

@@ -842,28 +842,12 @@ function saveGEXF(nodes,edges,atts){
 }
 
 function saveGraphIMG(){
-
-        var strDownloadMime = "image/octet-stream"
-
-        var nodesDiv = TW.partialGraph._core.domElements.nodes;
-        var nodesCtx = nodesDiv.getContext("2d");
-
-        var edgesDiv = TW.partialGraph._core.domElements.edges;
-        var edgesCtx = edgesDiv.getContext("2d");
-
-
-        var hoverDiv = TW.partialGraph._core.domElements.hover;
-        var hoverCtx = hoverDiv.getContext("2d");
-
-        var labelsDiv = TW.partialGraph._core.domElements.labels;
-        var labelsCtx = labelsDiv.getContext("2d");
-
-        nodesCtx.drawImage(hoverDiv,0,0);
-        nodesCtx.drawImage(labelsDiv,0,0);
-        edgesCtx.drawImage(nodesDiv,0,0);
-
-        var strData = edgesDiv.toDataURL("image/png");
-        document.location.href = strData.replace("image/png", strDownloadMime)
+    TW.rend.snapshot({
+      format:'png',
+      filename:'tinawebjs-graph.png',
+      background:'white',
+      download:'true'
+    });
 }
 
 

tinawebJS/sigma_v1.2/plugins/sigma.renderers.snapshot/README.md

+sigma.renderers.snapshot
+========================
+
+Plugin by [Guillaume Plique](https://github.com/Yomguithereal).
+
+---
+
+This plugin makes the retrieval of an image version of the graph rendered with canvas or webgl as easy as a stroll in a park.
+
+*Basic usage*
+
+```js
+// Retrieving a dataUrl of the rendered graph
+var dataUrl = myRenderer.snapshot();
+
+// Download the rendered graph as an image
+myRenderer.snapshot({download: true});
+```
+
+*Complex usage*
+
+```js
+myRenderer.snapshot({
+  format: 'jpg',
+  background: 'white',
+  labels: false
+});
+```
+
+*Parameters*
+
+* **format** *?string* [`png`]: file format of the image. Supported: `png`, `jpg`, `gif`, `tiff`.
+* **background** *?string*: whether you want to specify a background color for the snapshot. Transparent if none specified.
+* **labels** *?boolean* [`true`] : do we want the labels on screen to be displayed on the snapshot?
+* **download** *?boolean* [`false`] : whether you want the graph image to be downloaded by the browser.
+* **filename** *?string* [`graph.png`] : full filename for the file to download.

tinawebJS/sigma_v1.2/plugins/sigma.renderers.snapshot/sigma.renderers.snapshot.js

+;(function(undefined) {
+
+  /**
+   * Sigma Renderer Snapshot Utility
+   * ================================
+   *
+   * The aim of this plugin is to enable users to retrieve a static image
+   * of the graph being rendered.
+   *
+   * Author: Guillaume Plique (Yomguithereal)
+   * Version: 0.0.1
+   */
+
+  // Terminating if sigma were not to be found
+  if (typeof sigma === 'undefined')
+    throw 'sigma.renderers.snapshot: sigma not in scope.';
+
+  // Constants
+  var CONTEXTS = ['scene', 'edges', 'nodes', 'labels'],
+      TYPES = {
+        png: 'image/png',
+        jpg: 'image/jpeg',
+        gif: 'image/gif',
+        tiff: 'image/tiff'
+      };
+
+  // Utilities
+  function download(dataUrl, extension, filename) {
+
+    // Anchor
+    var anchor = document.createElement('a');
+    anchor.setAttribute('href', dataUrl);
+    anchor.setAttribute('download', filename || 'graph.' + extension);
+
+    // Click event
+    var event = document.createEvent('MouseEvent');
+    event.initMouseEvent('click', true, false, window, 0, 0, 0 ,0, 0,
+      false, false, false, false, 0, null);
+
+    anchor.dispatchEvent(event);
+    delete anchor;
+  }
+
+  // Main function
+  function snapshot(params) {
+    params = params || {};
+
+    // Enforcing
+    if (params.format && !(params.format in TYPES))
+      throw Error('sigma.renderers.snaphot: unsupported format "' +
+                  params.format + '".');
+
+    var self = this,
+        webgl = this instanceof sigma.renderers.webgl,
+        doneContexts = [];
+
+    // Creating a false canvas where we'll merge the other
+    var merged = document.createElement('canvas'),
+        mergedContext = merged.getContext('2d'),
+        sized = false;
+
+    // Iterating through context
+    CONTEXTS.forEach(function(name) {
+      if (!self.contexts[name])
+        return;
+
+      if (params.labels === false && name === 'labels')
+        return;
+
+      var canvas = self.domElements[name] || self.domElements['scene'],
+          context = self.contexts[name];
+
+      if (~doneContexts.indexOf(context))
+        return;
+
+      if (!sized) {
+        merged.width = webgl && context instanceof WebGLRenderingContext ?
+         canvas.width / 2 :
+         canvas.width;
+        merged.height = webgl && context instanceof WebGLRenderingContext ?
+          canvas.height / 2 :
+          canvas.height
+        sized = true;
+
+        // Do we want a background color?
+        if (params.background) {
+          mergedContext.rect(0, 0, merged.width, merged.height);
+          mergedContext.fillStyle = params.background;
+          mergedContext.fill();
+        }
+      }
+
+      if (context instanceof WebGLRenderingContext)
+        mergedContext.drawImage(canvas, 0, 0,
+          canvas.width / 2, canvas.height / 2);
+      else
+        mergedContext.drawImage(canvas, 0, 0);
+
+      doneContexts.push(context);
+    });
+
+    var dataUrl = merged.toDataURL(TYPES[params.format || 'png']);
+
+    if (params.download)
+      download(
+        dataUrl,
+        params.format || 'png',
+        params.filename
+      );
+
+    // Cleaning
+    delete mergedContext;
+    delete merged;
+    delete doneContexts;
+
+    return dataUrl;
+  }
+
+  // Extending canvas and webl renderers
+  sigma.renderers.canvas.prototype.snapshot = snapshot;
+  sigma.renderers.webgl.prototype.snapshot = snapshot;
+}).call(this);