mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
2868363bb7
Fixed a bug in the flatten visible undo, created an array to store the colours in the current palette, implemented project saving.
225 lines
8.8 KiB
JavaScript
225 lines
8.8 KiB
JavaScript
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];
|
|
|
|
console.log(mainMenuItems);
|
|
|
|
//when you click a main menu items button
|
|
on('click', menuButton, function (e, button) {
|
|
console.log('parent ', button.parentElement);
|
|
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':
|
|
//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*/
|
|
|
|
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':
|
|
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*/
|
|
}
|
|
|
|
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 = [];
|
|
// store canvas size
|
|
dictionary.push({key: "canvasWidth", value: currentLayer.canvasSize[0]});
|
|
dictionary.push({key: "canvasHeight", value: currentLayer.canvasSize[1]});
|
|
// store palette
|
|
for (let i=0; i<currentPalette.length; i++) {
|
|
dictionary.push({key: "color" + i, value: currentPalette[i]});
|
|
}
|
|
// store layers
|
|
for (let i=0; i<layers.length; i++) {
|
|
// Only saving the layers the user has access to (no vfx, tmp or checkerboard layers)
|
|
if (layers[i].menuEntry != null) {
|
|
dictionary.push({key: "layer" + i, value: layers[i]});
|
|
dictionary.push({key: "layer" + i + "ImageData",
|
|
value: layers[i].canvas.toDataURL()
|
|
});
|
|
}
|
|
}
|
|
|
|
return JSON.stringify(dictionary);
|
|
} |