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

Resolved conflicts with the previous pull request

Browse Source
This commit is contained in:
unsettledgames 2021-08-14 22:47:49 +02:00
parent a773bba05c
commit 017ef3b6f5
9 changed files with 41 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
js/FileManager.js
View File

@ -7,19 +7,47 @@ const FileManager = (() => {
Events.on('change', browseHolder, loadFile);
Events.on('change', browsePaletteHolder, loadPalette);
function saveProject() {
function openSaveProjectWindow() {
//create name
let fileName;
let selectedPalette = Util.getText('palette-button');
if (selectedPalette != 'Choose a palette...'){
let paletteAbbreviation = palettes[selectedPalette].abbreviation;
fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe';
var paletteAbbreviation = palettes[selectedPalette].abbreviation;
var fileName = 'pixel-'+paletteAbbreviation+'-'+canvasSize[0]+'x'+canvasSize[1];
} else {
fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.lpe';
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1];
selectedPalette = 'none';
}
Util.setValue('lpe-file-name', fileName);
Events.on("click", "save-project-confirm", saveProject);
Dialogue.showDialogue('save-project', false);
}
function openPixelExportWindow() {
let selectedPalette = Util.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';
}
Util.setValue('export-file-name', fileName);
Events.on("click", "export-confirm", exportProject);
Dialogue.showDialogue('export', false);
}
function saveProject() {
// Get name
let fileName = Util.getValue("lpe-file-name") + ".lpe";
let selectedPalette = Util.getText('palette-button');
//set download link
const linkHolder = document.getElementById('save-project-link-holder');
// create file content
@ -36,15 +64,7 @@ const FileManager = (() => {
function exportProject() {
if (Startup.documentCreated()) {
//create name
var selectedPalette = Util.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';
}
let fileName = Util.getValue("export-file-name");
//set download link
var linkHolder = document.getElementById('save-image-link-holder');
// Creating a tmp canvas to flatten everything
@ -248,6 +268,8 @@ const FileManager = (() => {
return {
saveProject,
exportProject,
openPixelExportWindow,
openSaveProjectWindow,
open
}
})();

4
js/TopMenuModule.js
View File

@ -32,13 +32,13 @@ const TopMenuModule = (() => {
Events.on('click', currSubmenuButton, Dialogue.showDialogue, 'new-pixel');
break;
case 'Save project':
Events.on('click', currSubmenuButton, FileManager.saveProject);
Events.on('click', currSubmenuButton, FileManager.openSaveProjectWindow);
break;
case 'Open':
Events.on('click', currSubmenuButton, FileManager.open);
break;
case 'Export':
Events.on('click', currSubmenuButton, FileManager.exportProject);
Events.on('click', currSubmenuButton, FileManager.openPixelExportWindow);
break;
case 'Exit':
//if a document exists, make sure they want to delete it

155
js/_fileMenu.js
View File

@ -1,155 +0,0 @@
var mainMenuItems = document.getElementById('main-menu').children;
//for each button in main menu (starting at 1 to avoid logo)
for (var i = 1; i < mainMenuItems.length; i++) {
//get the button that's in the list item
var menuItem = mainMenuItems[i];
var menuButton = menuItem.children[0];
//when you click a main menu items button
on('click', menuButton, function (e, button) {
select(button.parentElement);
});
var subMenu = menuItem.children[1];
var subMenuItems = subMenu.children;
//when you click an item within a menu button
for (var j = 0; j < subMenuItems.length; j++) {
var subMenuItem = subMenuItems[j];
var subMenuButton = subMenuItem.children[0];
subMenuButton.addEventListener('click', function (e) {
switch(this.textContent) {
//File Menu
case 'New':
showDialogue('new-pixel');
break;
case 'Save project':
openSaveProjectWindow();
break;
case 'Open':
//if a document exists
if (documentCreated) {
//check if the user wants to overwrite
if (confirm('Opening a pixel will discard your current one. Are you sure you want to do that?'))
//open file selection dialog
document.getElementById('open-image-browse-holder').click();
}
else
//open file selection dialog
document.getElementById('open-image-browse-holder').click();
break;
case 'Export':
openPixelExportWindow();
break;
case 'Exit':
console.log('exit');
//if a document exists, make sure they want to delete it
if (documentCreated) {
//ask user if they want to leave
if (confirm('Exiting will discard your current pixel. Are you sure you want to do that?'))
//skip onbeforeunload prompt
window.onbeforeunload = null;
else
e.preventDefault();
}
break;
//Edit Menu
case 'Undo':
undo();
break;
case 'Redo':
redo();
break;
//Palette Menu
case 'Add color':
addColor('#eeeeee');
break;
// SELECTION MENU
case 'Paste':
pasteSelection();
break;
case 'Copy':
copySelection();
tool.pencil.switchTo();
break;
case 'Cut':
cutSelectionTool();
tool.pencil.switchTo();
break;
case 'Cancel':
tool.pencil.switchTo();
break;
//Help Menu
case 'Settings':
//fill form with current settings values
setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
showDialogue('settings');
break;
//Help Menu
case 'Help':
showDialogue('help');
break;
case 'About':
showDialogue('about');
break;
case 'Changelog':
showDialogue('changelog');
break;
}
closeMenu();
});
}
}
function closeMenu () {
//remove .selected class from all menu buttons
for (var i = 0; i < mainMenuItems.length; i++) {
deselect(mainMenuItems[i]);
}
}
function getProjectData() {
// use a dictionary
let dictionary = {};
// sorting layers by increasing z-index
let layersCopy = layers.slice();
layersCopy.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? 1 : -1);
// save canvas size
dictionary['canvasWidth'] = currentLayer.canvasSize[0];
dictionary['canvasHeight'] = currentLayer.canvasSize[1];
// save editor mode
dictionary['editorMode'] = pixelEditorMode;
// save palette
for (let i=0; i<currentPalette.length; i++) {
dictionary["color" + i] = currentPalette[i];
}
// save number of layers
dictionary["nLayers"] = layersCopy.length;
// save layers
for (let i=0; i<layersCopy.length; i++) {
// Only saving the layers the user has access to (no vfx, tmp or checkerboard layers)
if (layersCopy[i].menuEntry != null) {
dictionary["layer" + i] = layersCopy[i];
dictionary["layer" + i + "ImageData"] = layersCopy[i].canvas.toDataURL();
}
}
return JSON.stringify(dictionary);
}

70
js/_pixelExport.js
View File

@ -1,70 +0,0 @@
/**
* 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
View File

@ -1,39 +0,0 @@
/**
* 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

@ -38,8 +38,6 @@
//=include _colorPicker.js
//=include _paletteBlock.js
//=include SplashPage.js
//=include _pixelExport.js
//=include _saveProject.js
/**buttons**/
//=include _toolButtons.js

4
views/index.hbs
View File

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

2
views/pixel-export-popup.hbs → views/popups/pixel-export.hbs
View File

@ -5,7 +5,7 @@
<div class="export-configuration">
<h2>File Name</h2>
<input id="file-name" autocomplete="off" />
<input id="export-file-name" autocomplete="off"/>
</div>
<div class="popup-actions">

0
views/save-project-popup.hbs → views/popups/save-project.hbs
View File