From ab4129546cd37b8a6df89fa7d8c75bccb582ce38 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 19 Jun 2020 23:31:36 +0200 Subject: [PATCH] Added layer move The user can now move layers and choose which one to put on top of each other just by dragging and dropping them in the layer menu. Also fixed a bug in the eyedropper, that can now pick a colour even though the layer it's on is not selected. --- css/pixel-editor.scss | 1 + js/_layer.js | 95 ++++++++++++++++++++++++++++++++------- js/_mouseEvents.js | 12 +++-- js/_newPixel.js | 20 +++++++-- js/_pixelEditorUtility.js | 28 ++++++++++++ 5 files changed, 131 insertions(+), 25 deletions(-) diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 8602887..fd57476 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -35,6 +35,7 @@ body { z-index: 1120; list-style-type: none; overflow-y:scroll; + overflow-x:hidden; // TODO: make the scroll bar a bit fancier diff --git a/js/_layer.js b/js/_layer.js index ca960c3..68318ee 100644 --- a/js/_layer.js +++ b/js/_layer.js @@ -8,12 +8,20 @@ * Merge with bottom layer option * Flatten visible option * Flatten everything option - - Must move a layer when dragging it in the layer list (https://codepen.io/retrofuturistic/pen/tlbHE) - When saving an artwork, the layers must be flattened to a temporary layer, which is then exported and deleted - Saving the state of an artwork to a .lospec file so that people can work on it later keeping the layers they created? That'd be cool, even for the app users, that could just double click on a lospec file for it to be opened right in the pixel editor + HISTORY: + - Store states for every canvas + - Save add layer + - Save deleted layer + - Save merge layers + - Save flatten layers + - Save move layers + + OPTIONAL: 1 - Fix issues @@ -27,8 +35,6 @@ THINGS TO TEST: 1 - Undo / redo - 2 - Copy / cut / paste selection - 3 - Colour picking from underlying layer 4 - File export */ @@ -52,6 +58,9 @@ let layerDragSource = null; let layerCount = 1; let maxZIndex = 3; +let unusedIDs = []; +let currentID = layerCount; + on('click',"add-layer-button", function(){ // Creating a new canvas let newCanvas = document.createElement("canvas"); @@ -98,8 +107,20 @@ class Layer { this.isLocked = false; this.menuEntry = menuEntry; + let id = unusedIDs.pop(); + + if (id == null) { + id = currentID; + currentID++; + } + + this.id = id; + + if (menuEntry != null) { + menuEntry.id = "layer" + id; + } + if (menuEntry != null) { - console.log("Aggiungo eventi"); menuEntry.onclick = () => this.select(); menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock(); menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility(); @@ -140,18 +161,14 @@ class Layer { } layerDragStart(element) { - console.log("Elemento: " + element.dataTransfer.getData('text/html')); - console.log("UELA"); - layerDragSource = this; element.dataTransfer.effectAllowed = 'move'; - element.dataTransfer.setData('text/html', this.outerHTML); + element.dataTransfer.setData('text/html', this.id); this.classList.add('dragElem'); } layerDragOver(element) { - console.log("Elemento: " + element.dataTransfer.getData('text/html')); if (element.preventDefault) { element.preventDefault(); // Necessary. Allows us to drop. } @@ -163,7 +180,6 @@ class Layer { } layerDragLeave(element) { - console.log("Elemento: " + element.dataTransfer.getData('text/html')); this.classList.remove('layerdragover'); } @@ -175,22 +191,21 @@ class Layer { // Don't do anything if dropping the same column we're dragging. if (layerDragSource != this) { - // Set the source column's HTML to the HTML of the column we dropped on. - this.parentNode.removeChild(layerDragSource); - var dropHTML = element.dataTransfer.getData('text/html'); - this.insertAdjacentHTML('beforebegin',dropHTML); - var dropElem = this.previousSibling; + let toDropID = element.dataTransfer.getData('text/html'); + let thisID = this.id; - addDnDHandlers(dropElem); + console.log("ID di quello spostato: " + toDropID + ", di quello su cui metterlo: " + thisID); + swapLayerEntries(toDropID, thisID); } this.classList.remove('layerdragover'); + dragging = false; return false; } layerDragEnd(element) { - console.log("Elemento: " + element.dataTransfer.getData('text/html')); + console.log(currentLayer); this.classList.remove('layerdragover'); } @@ -311,6 +326,39 @@ class Layer { } } +// Swap two layer entries in the layer menu +function swapLayerEntries(id1, id2) { + let entry1 = document.getElementById(id1); + let entry2 = document.getElementById(id2); + + console.log("id1: " + id1); + console.log("id2: " + id2); + + console.log("entry1: " + entry1); + console.log("entry2: " + entry2); + + let layer1 = getLayerByID(id1); + let layer2 = getLayerByID(id2); + let tmpZIndex; + + let after2 = entry2.nextSibling; + let parent = entry1.parentNode; + + parent.insertBefore(entry2, entry1); + + if (after2) { + parent.insertBefore(entry1, after2); + } else { + parent.appendChild(entry1); + } + + tmpZIndex = layer1.canvas.style.zIndex; + console.log("1: " + layer1.canvas.style.zIndex); + console.log("2: " + layer2.canvas.style.zIndex); + layer1.canvas.style.zIndex = layer2.canvas.style.zIndex; + layer2.canvas.style.zIndex = tmpZIndex; +} + // Finds a layer given its name function getLayerByName(name) { for (let i=0; i max || isPixelEmpty(selectedColor) || selectedColor === undefined) { + max = layers[i].canvas.style.zIndex; + + if (!isPixelEmpty(tmpColour)) { + selectedColor = tmpColour; + } + } + } + + if (isPixelEmpty(tmpColour) && selectedColor === undefined) { + selectedColor = [0, 0, 0]; + } + + return selectedColor; } \ No newline at end of file