mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Issue #803 - Move single frame export to PNG tab and support scale

Browse Source
This commit is contained in:
juliandescottes 2018-06-09 14:06:51 +02:00 committed by Julian Descottes
parent 379c61a11d
commit 594d748146
5 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/css/settings-export.css
View File

@ -144,7 +144,8 @@
overflow: hidden; overflow: hidden;
} }
.export-panel-gif .button { .export-panel-gif .button,
.export-panel-png .button {
margin-right: 5px; margin-right: 5px;
width: 75px; width: 75px;
flex-shrink: 0; flex-shrink: 0;
@ -154,11 +155,6 @@
width: 50px; width: 50px;
} }
.png-export-dimension-info,
.png-export-datauri-info {
margin-left: 5px;
}
#png-export-columns, #png-export-columns,
#png-export-rows { #png-export-rows {
/* Override default textfield padding-right to keep the number spinners /* Override default textfield padding-right to keep the number spinners

13
src/js/controller/settings/exportimage/MiscExportController.js
View File

@ -12,9 +12,6 @@
ns.MiscExportController.prototype.init = function () { ns.MiscExportController.prototype.init = function () {
var cDownloadButton = document.querySelector('.c-download-button'); var cDownloadButton = document.querySelector('.c-download-button');
this.addEventListener(cDownloadButton, 'click', this.onDownloadCFileClick_); 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) { ns.MiscExportController.prototype.onDownloadCFileClick_ = function (evt) {
@ -76,14 +73,4 @@
hexStr += ('00' + r.toString(16)).substr(-2); hexStr += ('00' + r.toString(16)).substr(-2);
return hexStr; 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);
});
};
})(); })();

17
src/js/controller/settings/exportimage/PngExportController.js
View File

@ -31,6 +31,7 @@
var downloadButton = document.querySelector('.png-download-button'); var downloadButton = document.querySelector('.png-download-button');
var downloadPixiButton = document.querySelector('.png-pixi-download-button'); var downloadPixiButton = document.querySelector('.png-pixi-download-button');
var dataUriButton = document.querySelector('.datauri-open-button'); var dataUriButton = document.querySelector('.datauri-open-button');
var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
this.initLayoutSection_(); this.initLayoutSection_();
this.updateDimensionLabel_(); this.updateDimensionLabel_();
@ -39,6 +40,7 @@
this.addEventListener(downloadButton, 'click', this.onDownloadClick_); this.addEventListener(downloadButton, 'click', this.onDownloadClick_);
this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_); this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_);
this.addEventListener(dataUriButton, 'click', this.onDataUriClick_); this.addEventListener(dataUriButton, 'click', this.onDataUriClick_);
this.addEventListener(selectedFrameDownloadButton, 'click', this.onDownloadSelectedFrameClick_);
$.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_); $.subscribe(Events.EXPORT_SCALE_CHANGED, this.onScaleChanged_);
}; };
@ -217,4 +219,19 @@
popup.document.body.innerHTML = html; popup.document.body.innerHTML = html;
}.bind(this), 500); }.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);
});
};
})(); })();

9
src/templates/settings/export/misc.html
View File

@ -12,14 +12,5 @@
</div> </div>
<button type="button" class="button button-primary c-download-button">Download C file</button> <button type="button" class="button button-primary c-download-button">Download C file</button>
</div> </div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight">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> </div>
</script> </script>

35
src/templates/settings/export/png.html
View File

@ -14,24 +14,43 @@
</div> </div>
</div> </div>
</div> </div>
<div class="export-panel-section export-panel-row"> <div class="export-panel-section">
<button type="button" class="button button-primary png-download-button">Download</button> <div style="padding-bottom: 5px">
<span class="png-export-dimension-info export-info"></span> <span class="highlight export-panel-row">Spritesheet file export: </span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary png-download-button">Download</button>
<span class="png-export-dimension-info export-info"></span>
</div>
</div> </div>
<div class="export-panel-section export-panel-row png-export-datauri-section"> <div class="export-panel-section">
<button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">To data-uri</button> <div style="padding-bottom: 5px">
<span class="png-export-datauri-info export-info">Open the PNG export in your browser as a data-uri</span> <span class="highlight export-panel-row">Spritesheet data-uri export: </span>
</div>
<div class="export-panel-row">
<button type="button" style="white-space: nowrap;" class="button button-primary datauri-open-button">Open</button>
<span class="export-info">Open the spritesheet as a data-uri</span>
</div>
</div> </div>
<div class="export-panel-section"> <div class="export-panel-section">
<div style="padding-bottom: 5px"> <div style="padding-bottom: 5px">
<span class="highlight export-panel-row">Export for PixiJS Movie: </span> <span class="highlight export-panel-row">PixiJS Movie export: </span>
</div> </div>
<div class="export-panel-row"> <div class="export-panel-row">
<button type="button" class="button button-primary png-pixi-download-button"/>Download</button> <button type="button" class="button button-primary png-pixi-download-button"/>Download</button>
<span class="png-export-dimension-info export-info">Spritesheet with JSON metadata</span> <span class="export-info">Spritesheet with JSON metadata</span>
</div> </div>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight">Selected frame export:</span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary selected-frame-download-button"/>Download</button>
<span class="export-info">Single frame as a PNG file</span>
</div>
</div> </div>
</div> </div>