From 594d7481468950d526247c0f09514dd40e39b0b6 Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Sat, 9 Jun 2018 14:06:51 +0200 Subject: [PATCH] Issue #803 - Move single frame export to PNG tab and support scale --- src/css/settings-export.css | 8 ++--- .../exportimage/MiscExportController.js | 13 ------- .../exportimage/PngExportController.js | 17 +++++++++ src/templates/settings/export/misc.html | 9 ----- src/templates/settings/export/png.html | 35 ++++++++++++++----- 5 files changed, 46 insertions(+), 36 deletions(-) diff --git a/src/css/settings-export.css b/src/css/settings-export.css index 9b3181fe..d0035501 100644 --- a/src/css/settings-export.css +++ b/src/css/settings-export.css @@ -144,7 +144,8 @@ overflow: hidden; } -.export-panel-gif .button { +.export-panel-gif .button, +.export-panel-png .button { margin-right: 5px; width: 75px; flex-shrink: 0; @@ -154,11 +155,6 @@ width: 50px; } -.png-export-dimension-info, -.png-export-datauri-info { - margin-left: 5px; -} - #png-export-columns, #png-export-rows { /* Override default textfield padding-right to keep the number spinners diff --git a/src/js/controller/settings/exportimage/MiscExportController.js b/src/js/controller/settings/exportimage/MiscExportController.js index 5c9420c6..f639d51f 100644 --- a/src/js/controller/settings/exportimage/MiscExportController.js +++ b/src/js/controller/settings/exportimage/MiscExportController.js @@ -12,9 +12,6 @@ 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) { @@ -76,14 +73,4 @@ 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/js/controller/settings/exportimage/PngExportController.js b/src/js/controller/settings/exportimage/PngExportController.js index fb917a6e..61b2f96f 100644 --- a/src/js/controller/settings/exportimage/PngExportController.js +++ b/src/js/controller/settings/exportimage/PngExportController.js @@ -31,6 +31,7 @@ var downloadButton = document.querySelector('.png-download-button'); var downloadPixiButton = document.querySelector('.png-pixi-download-button'); var dataUriButton = document.querySelector('.datauri-open-button'); + var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button'); this.initLayoutSection_(); this.updateDimensionLabel_(); @@ -39,6 +40,7 @@ this.addEventListener(downloadButton, 'click', this.onDownloadClick_); this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_); this.addEventListener(dataUriButton, 'click', this.onDataUriClick_); + this.addEventListener(selectedFrameDownloadButton, 'click', this.onDownloadSelectedFrameClick_); $.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_); }; @@ -217,4 +219,19 @@ popup.document.body.innerHTML = html; }.bind(this), 500); }; + + ns.PngExportController.prototype.onDownloadSelectedFrameClick_ = function (evt) { + var frameIndex = this.piskelController.getCurrentFrameIndex(); + var name = this.piskelController.getPiskel().getDescriptor().name; + var fileName = name + '-' + (frameIndex + 1) + '.png'; + var canvas = this.piskelController.renderFrameAt(frameIndex, true); + var zoom = this.exportController.getExportZoom(); + if (zoom != 1) { + canvas = pskl.utils.ImageResizer.resize(canvas, canvas.width * zoom, canvas.height * zoom, false); + } + + 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 a9e93ef7..d2a113b2 100644 --- a/src/templates/settings/export/misc.html +++ b/src/templates/settings/export/misc.html @@ -12,14 +12,5 @@ -
-
- Export selected frame as PNG File: - - PNG export of the currently selected frame. - -
- -
\ No newline at end of file diff --git a/src/templates/settings/export/png.html b/src/templates/settings/export/png.html index 85d9eddd..85bd20b0 100644 --- a/src/templates/settings/export/png.html +++ b/src/templates/settings/export/png.html @@ -14,24 +14,43 @@ -
- - +
+
+ Spritesheet file export: +
+
+ + +
-
- - Open the PNG export in your browser as a data-uri +
+
+ Spritesheet data-uri export: +
+
+ + Open the spritesheet as a data-uri +
- Export for PixiJS Movie: + PixiJS Movie export:
- Spritesheet with JSON metadata + Spritesheet with JSON metadata
+
+
+
+ Selected frame export: +
+
+ + Single frame as a PNG file +