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

Add option to export CSS for a spritesheet

Browse Source
This commit is contained in:
Jordan Watkins 2018-10-19 00:02:05 -07:00
parent 5ebf83badf
commit 21061efdfe
3 changed files with 59 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/settings.css
View File

@ -35,7 +35,7 @@
.drawer-content {
overflow: hidden;
background-color: #444;
height: 550px;
height: 560px;
max-height: 100%;
width: 280px;
border-top-left-radius: 4px;

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

@ -32,6 +32,7 @@
var downloadPixiButton = document.querySelector('.png-pixi-download-button');
var dataUriButton = document.querySelector('.datauri-open-button');
var selectedFrameDownloadButton = document.querySelector('.selected-frame-download-button');
var downloadCssButton = document.querySelector('.css-download-button');
this.pixiInlineImageCheckbox = document.querySelector('.png-pixi-inline-image-checkbox');
@ -40,6 +41,7 @@
this.addEventListener(this.columnsInput, 'input', this.onColumnsInput_);
this.addEventListener(downloadButton, 'click', this.onDownloadClick_);
this.addEventListener(downloadCssButton, 'click', this.onDownloadCssClick_);
this.addEventListener(downloadPixiButton, 'click', this.onPixiDownloadClick_);
this.addEventListener(dataUriButton, 'click', this.onDataUriClick_);
this.addEventListener(selectedFrameDownloadButton, 'click', this.onDownloadSelectedFrameClick_);
@ -242,4 +244,49 @@
var fileName = name + '-' + (frameIndex + 1) + '.png';
this.downloadCanvas_(canvas, fileName);
};
ns.PngExportController.prototype.onDownloadCssClick_ = function (evt) {
var name = this.piskelController.getPiskel().getDescriptor().name;
var css = this.getSpritesheetCss(name);
pskl.utils.BlobUtils.stringToBlob(css, function (blob) {
pskl.utils.FileUtils.downloadAsFile(blob, name + '.css');
});
};
ns.PngExportController.prototype.getSpritesheetCss = function (name) {
var zoom = this.exportController.getExportZoom();
var frameCount = this.piskelController.getFrameCount();
var width = this.piskelController.getWidth() * zoom;
var height = this.piskelController.getHeight() * zoom;
var columns = this.getColumns_();
var classSafeName = 'spritesheet-' + name.toLowerCase().replace(/[^a-z0-9\-_]/g, '');
var css = [];
css.push([
'[class^="' + classSafeName + '"] {',
' width: ' + width + 'px;',
' height: ' + height + 'px;',
' background-image: url("' + name + '.png");',
'}'
].join('\n'));
for (var i = 0; i < frameCount; i++) {
var column = i % columns;
var row = (i - column) / columns;
var x = width * column;
var y = height * row;
var frameName = classSafeName + '-frame-' + i;
css.push([
'.' + frameName + ' {',
' background-position: -' + x + 'px ' + '-' + y + 'px;',
'}'
].join('\n'));
}
return css.join('\n\n');
};
})();

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

@ -23,6 +23,7 @@
<span class="png-export-dimension-info export-info"></span>
</div>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight export-panel-row">Spritesheet data-uri export: </span>
@ -33,6 +34,16 @@
</div>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight export-panel-row">Spritesheet CSS export: </span>
</div>
<div class="export-panel-row">
<button type="button" class="button button-primary css-download-button">Download</button>
<span class="png-export-css-info export-info">Spritesheet CSS</span>
</div>
</div>
<div class="export-panel-section">
<div style="padding-bottom: 5px">
<span class="highlight export-panel-row">PixiJS Movie export: </span>