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

Merge pull request #58 from NSSure/master

Browse Source 
Added export dialogue
This commit is contained in:
Nicola 2021-08-14 17:47:05 +02:00 committed by GitHub
commit 38e0e53b6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 187 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/_export.scss Normal file
View File

@ -0,0 +1,10 @@
#export {
.export-configuration {
display: flex;
flex-direction: column;
input {
flex: 1;
}
}
}

21
css/_popup-container.scss
View File

@ -77,6 +77,18 @@
text-align: center;
}
}
div.pixel-export, div.save-project {
input {
background: $indent;
border: none;
border-radius: 4px;
color: $indenttext;
padding: 10px 20px;
margin: 0;
text-align: left;
}
}
/*
input {
background: $indent;
@ -152,4 +164,13 @@
}
}
}
.popup-actions {
display: flex;
justify-content: center;
button {
font-size: 18px;
}
}
}

10
css/_save-project.scss Normal file
View File

@ -0,0 +1,10 @@
#save-project {
.save-project-configuration {
display: flex;
flex-direction: column;
input {
flex: 1;
}
}
}

4
css/pixel-editor.scss
View File

@ -14,4 +14,6 @@
@import 'compatibility';
@import 'resize-menus';
@import 'palette-editor';
@import 'splash-page';
@import 'splash-page';
@import "export";
@import "save-project";

76
js/_fileMenu.js
View File

@ -30,27 +30,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
showDialogue('new-pixel');
break;
case 'Save project':
//create name
var selectedPalette = getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe';
} else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe';
selectedPalette = 'none';
}
//set download link
var linkHolder = document.getElementById('save-project-link-holder');
// create file content
var content = getProjectData();
linkHolder.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content);
linkHolder.download = fileName;
linkHolder.click();
ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
openSaveProjectWindow();
break;
case 'Open':
//if a document exists
@ -67,59 +47,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
break;
case 'Export':
if (documentCreated) {
//create name
var selectedPalette = getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
} else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
selectedPalette = 'none';
}
//set download link
var linkHolder = document.getElementById('save-image-link-holder');
// Creating a tmp canvas to flatten everything
var exportCanvas = document.createElement("canvas");
var emptyCanvas = document.createElement("canvas");
var layersCopy = layers.slice();
exportCanvas.width = canvasSize[0];
exportCanvas.height = canvasSize[1];
emptyCanvas.width = canvasSize[0];
emptyCanvas.height = canvasSize[1];
// Sorting the layers by z index
layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
// Merging every layer on the export canvas
for (let i=0; i<layersCopy.length; i++) {
if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) {
mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
}
// I'm not going to find out why the layer ordering screws up if you don't copy
// a blank canvas when layers[i] is not set as visible, but if you have time to
// spend, feel free to investigate (comment the else, create 3 layers: hide the
// middle one and export, the other 2 will be swapped in their order)
else {
mergeLayers(exportCanvas.getContext('2d'), emptyCanvas.getContext('2d'));
}
}
linkHolder.href = exportCanvas.toDataURL();
linkHolder.download = fileName;
linkHolder.click();
emptyCanvas.remove();
exportCanvas.remove();
//track google event
ga('send', 'event', 'Pixel Editor Export', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
}
openPixelExportWindow();
break;
case 'Exit':

70
js/_pixelExport.js Normal file
View File

@ -0,0 +1,70 @@
/**
* Opens the export window and initializes events for export customization.
*/
function openPixelExportWindow() {
var selectedPalette = getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].name;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
} else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
selectedPalette = 'none';
}
setValue('file-name', fileName);
document.getElementById("export-confirm").addEventListener("click", exportPixel);
showDialogue('export', false);
}
/**
* Exports the pixel based on the export dialogue.
*/
function exportPixel() {
if (documentCreated) {
var fileName = getValue('file-name');
//set download link
var linkHolder = document.getElementById('save-image-link-holder');
// Creating a tmp canvas to flatten everything
var exportCanvas = document.createElement("canvas");
var emptyCanvas = document.createElement("canvas");
var layersCopy = layers.slice();
exportCanvas.width = canvasSize[0];
exportCanvas.height = canvasSize[1];
emptyCanvas.width = canvasSize[0];
emptyCanvas.height = canvasSize[1];
// Sorting the layers by z index
layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
// Merging every layer on the export canvas
for (let i=0; i<layersCopy.length; i++) {
if (layersCopy[i].menuEntry != null && layersCopy[i].isVisible) {
mergeLayers(exportCanvas.getContext('2d'), layersCopy[i].context);
}
// I'm not going to find out why the layer ordering screws up if you don't copy
// a blank canvas when layers[i] is not set as visible, but if you have time to
// spend, feel free to investigate (comment the else, create 3 layers: hide the
// middle one and export, the other 2 will be swapped in their order)
else {
mergeLayers(exportCanvas.getContext('2d'), emptyCanvas.getContext('2d'));
}
}
linkHolder.href = exportCanvas.toDataURL();
linkHolder.download = fileName;
linkHolder.click();
emptyCanvas.remove();
exportCanvas.remove();
//track google event
ga('send', 'event', 'Pixel Editor Export', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
}
}

39
js/_saveProject.js Normal file
View File

@ -0,0 +1,39 @@
/**
* Opens the save project window and initializes events for save project customization.
*/
function openSaveProjectWindow() {
//create name
var selectedPalette = getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1];
} else {
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1];
selectedPalette = 'none';
}
setValue('lpe-file-name', fileName);
document.getElementById("save-project-confirm").addEventListener("click", saveProject);
showDialogue('save-project', false);
}
/**
* Downloads the .lpe file for the current project.
*/
function saveProject() {
var fileName = `${getValue('lpe-file-name')}.lpe`;
// create file content
var content = getProjectData();
//set download link
var linkHolder = document.getElementById('save-project-link-holder');
linkHolder.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(content);
linkHolder.download = fileName;
linkHolder.click();
ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
}

2
js/pixel-editor.js
View File

@ -53,6 +53,8 @@
//=include _colorPicker.js
//=include _paletteBlock.js
//=include _splashPage.js
//=include _pixelExport.js
//=include _saveProject.js
/**load file**/
//=include _loadImage.js

2
views/index.hbs
View File

@ -36,6 +36,8 @@
{{> changelog-popup}}
{{> credits-popup}}
{{> settings-popup}}
{{> pixel-export-popup}}
{{> save-project-popup}}
</div>
<script src="/pixel-editor/pixel-editor.js"></script>

14
views/pixel-export-popup.hbs Normal file
View File

@ -0,0 +1,14 @@
<div id="export" class="pixel-export">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Export File</h1>
<div class="export-configuration">
<h2>File Name</h2>
<input id="file-name" autocomplete="off" />
</div>
<div class="popup-actions">
<button class="default" id = "export-confirm">Export</button>
</div>
</div>

14
views/save-project-popup.hbs Normal file
View File

@ -0,0 +1,14 @@
<div id="save-project" class="save-project">
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
<h1>Save Project</h1>
<div class="save-project-configuration">
<h2>File Name</h2>
<input id="lpe-file-name" autocomplete="off" />
</div>
<div class="popup-actions">
<button class="default" id = "save-project-confirm">Save</button>
</div>
</div>