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 @@ -