diff --git a/README.md b/README.md index 7ca320e..9920ac8 100644 --- a/README.md +++ b/README.md @@ -12,11 +12,11 @@ The next version is mostly focused on adding missing essential features and port Suggestions / Planned features: -- Save project while keeping layer data - Line tool - Resize canvas - Snap brush preview to pixel grid - Move selection with arrows +- Load palette from LPE file - Custom color picker - custom code without dependencies @@ -36,7 +36,7 @@ Suggestions / Planned features: - Another currentLayer.canvas - Must be rescaled each zoom -- Possibly add collaborate function using together.js +- Possibly add collaborate function - Bug fix - Alt + scroll broken diff --git a/js/_addColor.js b/js/_addColor.js index 54f3534..d8e5b62 100644 --- a/js/_addColor.js +++ b/js/_addColor.js @@ -1,3 +1,5 @@ +let currentPalette = []; + //adds the given color to the palette //input hex color string //returns list item element @@ -6,7 +8,7 @@ function addColor (newColor) { //add # at beginning if not present if (newColor.charAt(0) != '#') newColor = '#' + newColor; - + currentPalette.push(newColor); //create list item var listItem = document.createElement('li'); @@ -45,5 +47,7 @@ function addColor (newColor) { button.parentElement.firstChild.jscolor.show(); }); + console.log(currentPalette); + return listItem; } diff --git a/js/_colorChanged.js b/js/_colorChanged.js index 5d8f390..c7df0ba 100644 --- a/js/_colorChanged.js +++ b/js/_colorChanged.js @@ -28,10 +28,11 @@ function colorChanged(e) { var newColor = hexToRgb(e.target.value); var oldColor = e.target.oldColor; + currentPalette.splice(currentPalette.indexOf("#" + newColor), 1); + newColor.a = 255; //save undo state - //saveHistoryState({type: 'colorchange', newColor: e.target.value, oldColor: rgbToHex(oldColor), canvas: context.getImageData(0, 0, canvasSize[0], canvasSize[1])}); new HistoryStateEditColor(e.target.value.toLowerCase(), rgbToHex(oldColor)); //get the currently selected color @@ -82,7 +83,7 @@ function colorChanged(e) { //set new old color to changed color e.target.oldColor = newColor; - + currentPalette.push('#' + newColorHex); //if this is the current color, update the drawing color if (e.target.colorElement.parentElement.classList.contains('selected')) { diff --git a/js/_createColorPalette.js b/js/_createColorPalette.js index 19e14ac..48cb71c 100644 --- a/js/_createColorPalette.js +++ b/js/_createColorPalette.js @@ -34,12 +34,6 @@ function createColorPalette(selectedPalette, fillBackground) { } - //fill bg with lightest color - if (fillBackground) { - currentLayer.context.fillStyle = lightestColor; - currentLayer.context.fillRect(0, 0, canvasSize[0], canvasSize[1]); - } - //set as current color currentLayer.context.fillStyle = darkestColor; } diff --git a/js/_fileMenu.js b/js/_fileMenu.js index 3183ff4..cfcb4f0 100644 --- a/js/_fileMenu.js +++ b/js/_fileMenu.js @@ -33,6 +33,29 @@ for (var i = 1; i < mainMenuItems.length; i++) { //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 @@ -48,9 +71,8 @@ for (var i = 1; i < mainMenuItems.length; i++) { break; - case 'Save as...': + case 'Export': if (documentCreated) { - //create name var selectedPalette = getText('palette-button'); if (selectedPalette != 'Choose a palette...'){ @@ -66,7 +88,7 @@ for (var i = 1; i < mainMenuItems.length; i++) { // Creating a tmp canvas to flatten everything var exportCanvas = document.createElement("canvas"); var emptyCanvas = document.createElement("canvas"); - var layersCopy = layers.slice();; + var layersCopy = layers.slice(); exportCanvas.width = canvasSize[0]; exportCanvas.height = canvasSize[1]; @@ -75,7 +97,7 @@ for (var i = 1; i < mainMenuItems.length; i++) { emptyCanvas.height = canvasSize[1]; // Sorting the layers by z index - layersCopy.sort((a, b) => (a.canvas.zIndex > b.canvas.zIndex) ? 1 : -1); + 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 this.selectLayer(); menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock(); @@ -195,7 +196,10 @@ class Layer { isRenamingLayer = false; if (oldLayerName != null) { - new HistoryStateRenameLayer(oldLayerName, this.menuEntry.getElementsByTagName("p")[0].innerHTML, currentLayer); + let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML; + this.name = name; + + new HistoryStateRenameLayer(oldLayerName, name, currentLayer); oldLayerName = null; } } @@ -333,16 +337,17 @@ function flatten(onlyVisible) { } // Sorting them by z-index - visibleLayers.sort((a, b) => (a.canvas.zIndex > b.canvas.zIndex) ? -1 : 1); + visibleLayers.sort((a, b) => (a.canvas.style.zIndex > b.canvas.style.zIndex) ? -1 : 1); // Selecting the last visible layer (the only one that won't get deleted) visibleLayers[visibleLayers.length - 1].selectLayer(); // Merging all the layer but the last one for (let i=0; i= settings.maxColorsOnImportedImage) { - alert('The image loaded seems to have more than '+settings.maxColorsOnImportedImage+' colors.'); - break; + //don't allow more than 256 colors to be added + if (Object.keys(colorPalette).length >= 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])); + //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); + console.log('COLOR PALETTE ARRAY', colorPaletteArray); - //create palette form colors array - createColorPalette(colorPaletteArray, false); + //create palette form colors array + createColorPalette(colorPaletteArray, false); - //track google event - ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/ + //track google event + ga('send', 'event', 'Pixel Editor Load', colorPalette.length, this.width+'/'+this.height); /*global ga*/ + }; + img.src = e.target.result; }; - img.src = e.target.result; - }; - fileReader.readAsDataURL(this.files[0]); + fileReader.readAsDataURL(this.files[0]); + } } - else alert('Only PNG and GIF files are allowed at this time.'); + else alert('Only .lpe project files, PNG and GIF files are allowed at this time.'); } }); diff --git a/js/_newPixel.js b/js/_newPixel.js index fa016c2..8be78f3 100644 --- a/js/_newPixel.js +++ b/js/_newPixel.js @@ -1,6 +1,7 @@ let firstPixel = true; function newPixel (width, height, palette) { + currentPalette = []; if (firstPixel) { layerList = document.getElementById("layers-menu"); layerListEntry = layerList.firstElementChild; @@ -115,7 +116,7 @@ function newPixel (width, height, palette) { closeDialogue(); currentTool.updateCursor(); - document.getElementById('save-as-button').classList.remove('disabled'); + document.getElementById('export-button').classList.remove('disabled'); documentCreated = true; firstPixel = false; diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index 00bf1c9..25a9994 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -43,8 +43,9 @@ @@ -149,8 +150,7 @@ -

Layer 0 -

+

Layer 0

  • @@ -158,24 +158,24 @@ {{svg "plus.svg" width="20" height="20"}} Add layer
    • + - +
    @@ -192,7 +192,8 @@
    dl - + dl +