From 3be2b3d3bc48b2d64efa98190d8ebfe8fdada415 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Szab=C3=B3?= <david.szabo97@gmail.com>
Date: Fri, 23 Sep 2016 16:35:22 +0200
Subject: [PATCH] Add misc export: download selected frame as png

---
 .../settings/exportimage/MiscExportController.js    | 13 +++++++++++++
 src/templates/settings/export/misc.html             |  9 +++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/js/controller/settings/exportimage/MiscExportController.js b/src/js/controller/settings/exportimage/MiscExportController.js
index f639d51f..5c9420c6 100644
--- a/src/js/controller/settings/exportimage/MiscExportController.js
+++ b/src/js/controller/settings/exportimage/MiscExportController.js
@@ -12,6 +12,9 @@
   ns.MiscExportController.prototype.init = function () {
     var cDownloadButton = document.querySelector('.c-download-button');
     this.addEventListener(cDownloadButton, 'click', this.onDownloadCFileClick_);
+
+    var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
+    this.addEventListener(selectedFrameDownloadButton, 'click', this.onDownloadSelectedFrameClick_);
   };
 
   ns.MiscExportController.prototype.onDownloadCFileClick_ = function (evt) {
@@ -73,4 +76,14 @@
     hexStr += ('00' + r.toString(16)).substr(-2);
     return hexStr;
   };
+
+  ns.MiscExportController.prototype.onDownloadSelectedFrameClick_ = function (evt) {
+    var frameIndex = this.piskelController.getCurrentFrameIndex();
+    var fileName = this.getPiskelName_() + '-' + (frameIndex + 1) + '.png';
+    var canvas = this.piskelController.renderFrameAt(frameIndex, true);
+
+    pskl.utils.BlobUtils.canvasToBlob(canvas, function(blob) {
+      pskl.utils.FileUtils.downloadAsFile(blob, fileName);
+    });
+  };
 })();
diff --git a/src/templates/settings/export/misc.html b/src/templates/settings/export/misc.html
index b2f6768c..054b3101 100644
--- a/src/templates/settings/export/misc.html
+++ b/src/templates/settings/export/misc.html
@@ -12,5 +12,14 @@
       </div>
       <button type="button" class="button button-primary c-download-button">Download C file</button>
     </div>
+    <div class="export-panel-section">
+      <div style="padding-bottom: 5px">
+        <span style="color: gold;">Export selected frame as PNG File: </span>
+        <span class="export-info">
+          PNG export of the currently selected frame.
+        </span>
+      </div>
+      <button type="button" class="button button-primary selected-frame-download-button">Download</button>
+    </div>
   </div>
 </script>
\ No newline at end of file