ENH: add early PNG export (close biocore#330)

Also comment out some unused stuff from the export panel for now
fedarko · Sep 17, 2020 · 27be6f9 · 27be6f9
1 parent 8374597
commit 27be6f9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/empress/support_files/js/empress.js b/empress/support_files/js/empress.js
@@ -719,6 +719,15 @@ define([
         return totalSVG;
     };
 
+    Empress.prototype.exportPNG = function (callback) {
+        // Draw the tree immediately before calling toBlob(), to ensure that
+        // the buffer hasn't been cleared. This is analogous to "solution 1"
+        // for taking screenshots of a canvas in this tutorial:
+        // https://webglfundamentals.org/webgl/lessons/webgl-tips.html.
+        this.drawTree();
+        this._canvas.toBlob(callback);
+    };
+
     /**
      * Retrieves x coordinate of node in the current layout.
      *

diff --git a/empress/support_files/js/side-panel-handler.js b/empress/support_files/js/side-panel-handler.js
@@ -86,6 +86,9 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
 
         // export GUI components
         this.exportSVGBtn = document.getElementById("export-btn-svg");
+        this.exportPNGBtn = document.getElementById("export-btn-png");
+        this.exportTreeChk = document.getElementById("export-tree-chk");
+        this.exportLegendChk = document.getElementById("export-legend-chk");
 
         // hides the side menu
         var collapse = document.getElementById(this.COLLAPSE_ID);
@@ -328,11 +331,19 @@ define(["underscore", "Colorer", "util"], function (_, Colorer, util) {
         var scope = this;
 
         this.exportSVGBtn.onclick = function () {
-            var totalSVG = scope.empress.exportSVG();
+            var totalSVG = scope.empress.exportSVG(
+                scope.exportTreeChk.checked, scope.exportLegendChk.checked
+            );
             // Present SVG to user as downloadable file
             var blob = new Blob([totalSVG], { type: "image/svg+xml" });
             saveAs(blob, "empress-tree.svg");
         };
+        this.exportPNGBtn.onclick = function () {
+            var callback = function (blob) {
+                saveAs(blob, "empress-tree.png");
+            };
+            scope.empress.exportPNG(callback);
+        };
     };
 
     /**

diff --git a/empress/support_files/templates/side-panel.html b/empress/support_files/templates/side-panel.html
@@ -241,6 +241,8 @@
     <input id="export-legend-chk" type="checkbox" checked="true"
            class="empress-input">
   </p>
+  <!-- NOTE: this comment block is stuff I'll uncomment later when we support
+       more comprehensive SVG exporting (soon!)
   <p>
     <label for="export-barplot-chk">Barplots</label>
     <input id="export-barplot-chk" type="checkbox" checked="true"
@@ -264,6 +266,7 @@
     <input id="export-height" type="number" value="188" min="100"
            step="1" class="empress-input">
   </p>
+  -->
 </div>
 
 <!-- Global Tree properties -->