From 016316518d2d3238218c20ce5117780fd06475cc Mon Sep 17 00:00:00 2001 From: Max Eden Date: Wed, 29 Apr 2015 20:20:35 +0600 Subject: [PATCH 1/2] Zip-Export: Split by layers option --- .../exportimage/PngExportController.js | 36 +++++++++++++++---- src/templates/settings/export.html | 6 ++++ 2 files changed, 36 insertions(+), 6 deletions(-) diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js index 33ff67e7..a3d97e0c 100644 --- a/src/js/controller/settings/exportimage/PngExportController.js +++ b/src/js/controller/settings/exportimage/PngExportController.js @@ -13,6 +13,8 @@ this.pngFilePrefixInput = document.getElementById('zip-prefix-name'); this.pngFilePrefixInput.value = 'sprite_'; + this.splitByLayersCheckbox = document.getElementById('zip-split-by-layers'); + var downloadButton = document.querySelector('.png-download-button'); this.addEventListener(downloadButton, 'click', this.onPngDownloadButtonClick_); @@ -30,12 +32,34 @@ ns.PngExportController.prototype.onZipButtonClick_ = function () { var zip = new window.JSZip(); - for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) { - var frame = this.piskelController.getFrameAt(i); - var canvas = this.getFrameAsCanvas_(frame); - var basename = this.pngFilePrefixInput.value; - var filename = basename + (i + 1) + '.png'; - zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + function splittedExport() { + var layers = this.piskelController.getLayers(); + for (var j = 0; this.piskelController.hasLayerAt(j); j++) { + var layer = this.piskelController.getLayerAt(j); + for (var i = 0; i < this.piskelController.getFrameCount(); i++) { + var frame = layer.getFrameAt(i); + var canvas = this.getFrameAsCanvas_(frame); + var basename = this.pngFilePrefixInput.value; + var filename = 'l' + j + '_' + basename + (i + 1) + '.png'; + zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + } + } + } + + function mergedExport() { + for (var i = 0; i < this.piskelController.getFrameCount(); i++) { + var frame = this.piskelController.getFrameAt(i); + var canvas = this.getFrameAsCanvas_(frame); + var basename = this.pngFilePrefixInput.value; + var filename = basename + (i + 1) + '.png'; + zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + } + } + + if (this.splitByLayersCheckbox.checked) { + splittedExport.call(this); + } else { + mergedExport.call(this); } var fileName = this.getPiskelName_() + '.zip'; diff --git a/src/templates/settings/export.html b/src/templates/settings/export.html index d3d61870..fe56218d 100644 --- a/src/templates/settings/export.html +++ b/src/templates/settings/export.html @@ -15,6 +15,12 @@
+
+
+
From 034057dcd23212595b2c7b8fceb1d5885ed4e4d5 Mon Sep 17 00:00:00 2001 From: Max Eden Date: Thu, 30 Apr 2015 13:17:56 +0600 Subject: [PATCH 2/2] Moved subfunctions to prototype --- .../exportimage/PngExportController.js | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js index a3d97e0c..8c9158cd 100644 --- a/src/js/controller/settings/exportimage/PngExportController.js +++ b/src/js/controller/settings/exportimage/PngExportController.js @@ -32,34 +32,10 @@ ns.PngExportController.prototype.onZipButtonClick_ = function () { var zip = new window.JSZip(); - function splittedExport() { - var layers = this.piskelController.getLayers(); - for (var j = 0; this.piskelController.hasLayerAt(j); j++) { - var layer = this.piskelController.getLayerAt(j); - for (var i = 0; i < this.piskelController.getFrameCount(); i++) { - var frame = layer.getFrameAt(i); - var canvas = this.getFrameAsCanvas_(frame); - var basename = this.pngFilePrefixInput.value; - var filename = 'l' + j + '_' + basename + (i + 1) + '.png'; - zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); - } - } - } - - function mergedExport() { - for (var i = 0; i < this.piskelController.getFrameCount(); i++) { - var frame = this.piskelController.getFrameAt(i); - var canvas = this.getFrameAsCanvas_(frame); - var basename = this.pngFilePrefixInput.value; - var filename = basename + (i + 1) + '.png'; - zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); - } - } - if (this.splitByLayersCheckbox.checked) { - splittedExport.call(this); + this.splittedExport_(zip); } else { - mergedExport.call(this); + this.mergedExport_(zip); } var fileName = this.getPiskelName_() + '.zip'; @@ -71,6 +47,30 @@ pskl.utils.FileUtils.downloadAsFile(blob, fileName); }; + ns.PngExportController.prototype.mergedExport_ = function (zip) { + for (var i = 0; i < this.piskelController.getFrameCount(); i++) { + var frame = this.piskelController.getFrameAt(i); + var canvas = this.getFrameAsCanvas_(frame); + var basename = this.pngFilePrefixInput.value; + var filename = basename + (i + 1) + '.png'; + zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + } + }; + + ns.PngExportController.prototype.splittedExport_ = function (zip) { + var layers = this.piskelController.getLayers(); + for (var j = 0; this.piskelController.hasLayerAt(j); j++) { + var layer = this.piskelController.getLayerAt(j); + for (var i = 0; i < this.piskelController.getFrameCount(); i++) { + var frame = layer.getFrameAt(i); + var canvas = this.getFrameAsCanvas_(frame); + var basename = this.pngFilePrefixInput.value; + var filename = 'l' + j + '_' + basename + (i + 1) + '.png'; + zip.file(filename, pskl.utils.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true}); + } + } + }; + ns.PngExportController.prototype.getFrameAsCanvas_ = function (frame) { var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1); canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);