From caa81dde1ca09dd010fdb25862dd02f95d2c62a8 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sun, 28 Jun 2020 16:57:19 +0200 Subject: [PATCH] Finished implementing project loading and saving --- README.md | 1 + js/_createColorPalette.js | 52 ++++++++++++++++++++++++--- js/_fileMenu.js | 25 +++++++------ js/_layer.js | 7 ++-- js/_loadImage.js | 53 ++++++++-------------------- js/_newPixel.js | 74 +++++++++++++++++++++++++++++---------- 6 files changed, 137 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 9920ac8..9d7f6cc 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ Suggestions / Planned features: - Snap brush preview to pixel grid - Move selection with arrows - Load palette from LPE file +- Move colours in palette editor - Custom color picker - custom code without dependencies diff --git a/js/_createColorPalette.js b/js/_createColorPalette.js index 48cb71c..953320b 100644 --- a/js/_createColorPalette.js +++ b/js/_createColorPalette.js @@ -1,9 +1,11 @@ -function createColorPalette(selectedPalette, fillBackground) { +function createColorPalette(selectedPalette, fillBackground, deletePreviousPalette = true) { //remove current palette - colors = document.getElementsByClassName('color-button'); - while (colors.length > 0) { - colors[0].parentElement.remove(); + if (deletePreviousPalette) { + colors = document.getElementsByClassName('color-button'); + while (colors.length > 0) { + colors[0].parentElement.remove(); + } } var lightestColor = '#000000'; @@ -31,9 +33,49 @@ function createColorPalette(selectedPalette, fillBackground) { darkestColor = newColor; } - } //set as current color currentLayer.context.fillStyle = darkestColor; } + +function createPaletteFromLayers() { + let colors = {}; + + for (let i=0; i= settings.maxColorsOnImportedImage) { + alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.'); + break; + } + } + } + } + } + } + + console.log(colors); + + //create array out of colors object + let colorPaletteArray = []; + for (let color in colors) { + if (colors.hasOwnProperty(color)) { + colorPaletteArray.push('#'+rgbToHex(colors[color])); + } + } + console.log('COLOR PALETTE ARRAY', colorPaletteArray); + + //create palette form colors array + createColorPalette(colorPaletteArray, false); +} \ No newline at end of file diff --git a/js/_fileMenu.js b/js/_fileMenu.js index cfcb4f0..752d2fb 100644 --- a/js/_fileMenu.js +++ b/js/_fileMenu.js @@ -202,22 +202,27 @@ function closeMenu () { function getProjectData() { // use a dictionary - let 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); // store canvas size - dictionary.push({key: "canvasWidth", value: currentLayer.canvasSize[0]}); - dictionary.push({key: "canvasHeight", value: currentLayer.canvasSize[1]}); + dictionary['canvasWidth'] = currentLayer.canvasSize[0]; + dictionary['canvasHeight'] = currentLayer.canvasSize[1]; // store palette for (let i=0; i= settings.maxColorsOnImportedImage) { - alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.'); - break; - } - } - } - - //create array out of colors object - var colorPaletteArray = []; - for (var color in colorPalette) { - if( colorPalette.hasOwnProperty(color) ) { - colorPaletteArray.push('#'+rgbToHex(colorPalette[color])); - } - } - console.log('COLOR PALETTE ARRAY', colorPaletteArray); - - //create palette form colors array - createColorPalette(colorPaletteArray, false); + createPaletteFromLayers(); //track google event ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/ @@ -64,4 +39,4 @@ document.getElementById('open-image-browse-holder').addEventListener('change', f } else alert('Only .lpe project files, PNG and GIF files are allowed at this time.'); } -}); +}); \ No newline at end of file diff --git a/js/_newPixel.js b/js/_newPixel.js index 8be78f3..60eca6e 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -1,6 +1,6 @@ let firstPixel = true; -function newPixel (width, height, palette) { +function newPixel (width, height, palette, fileContent = null) { currentPalette = []; if (firstPixel) { layerList = document.getElementById("layers-menu"); @@ -74,7 +74,7 @@ function newPixel (width, height, palette) { //add colors from selected palette var selectedPalette = getText('palette-button'); - if (selectedPalette != 'Choose a palette...') { + if (selectedPalette != 'Choose a palette...' && fileContent == null) { //if this palette isnt the one specified in the url, then reset the url if (!palettes[selectedPalette].specified) @@ -82,26 +82,22 @@ function newPixel (width, height, palette) { //fill the palette with specified palette createColorPalette(palettes[selectedPalette].colors,true); - fillCheckerboard(); } - else { - //this wasn't a specified palette, so reset the url - history.pushState(null, null, '/pixel-editor/app'); + else if (fileContent == null) { + //this wasn't a specified palette, so reset the url + history.pushState(null, null, '/pixel-editor/app'); - //generate default colors - var fg = hslToRgb(Math.floor(Math.random()*255), 230,70); - var bg = hslToRgb(Math.floor(Math.random()*255), 230,170); + //generate default colors + var fg = hslToRgb(Math.floor(Math.random()*255), 230,70); + var bg = hslToRgb(Math.floor(Math.random()*255), 230,170); - //convert colors to hex - var defaultForegroundColor = rgbToHex(fg.r,fg.g,fg.b); - var defaultBackgroundColor = rgbToHex(bg.r,bg.g,bg.b); + //convert colors to hex + var defaultForegroundColor = rgbToHex(fg.r,fg.g,fg.b); + var defaultBackgroundColor = rgbToHex(bg.r,bg.g,bg.b); - //add colors to paletee - addColor(defaultForegroundColor).classList.add('selected'); - addColor(defaultBackgroundColor); - - //fill background of canvas with bg color - fillCheckerboard(); + //add colors to palette + addColor(defaultForegroundColor).classList.add('selected'); + addColor(defaultBackgroundColor); //set current drawing color as foreground color currentLayer.context.fillStyle = '#'+defaultForegroundColor; @@ -109,6 +105,9 @@ function newPixel (width, height, palette) { selectedPalette = 'none'; } + //fill background of canvas with bg color + fillCheckerboard(); + //reset undo and redo states undoStates = []; redoStates = []; @@ -120,4 +119,43 @@ function newPixel (width, height, palette) { documentCreated = true; firstPixel = false; + + if (fileContent != null) { + console.log(fileContent); + for (let i=0; i