Almost finished deleting layers

There's a bug that happens when the user tries to delete the Layer 0. All the other ones work correctly.

css/pixel-editor.scss

@@ -22,6 +22,43 @@ body {
   /* Disable Android and iOS callouts*/
 }
 
+#layer-properties-menu {
+  visibility:hidden;
+  margin: 0;
+  padding: 0;
+  top: 0;
+  right: 0;
+  width:120px;
+  text-align:center;
+  
+  margin-right:200px;
+  /*border:1px solid color(menu, foreground);*/
+
+  list-style:none;
+  position:relative;
+  z-index:1200;
+  list-style-type: none;
+  
+  background-color: color(base);
+  position: fixed;
+  overflow: visible;
+
+  li button {
+    color: color(menu, foreground);
+    height: 100%;
+    padding: 10px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    width:100%;
+  }
+
+  li button:hover {
+    background-color:color(menu, background);
+  }
+
+}
+
 .preview-canvas {
   image-rendering:optimizeSpeed;             /* Legal fallback */
   image-rendering:-moz-crisp-edges;          /* Firefox        */

js/_layer.js

@@ -21,17 +21,12 @@
     - Save flatten layers
     - Save move layers
 
-
     OPTIONAL:
 
     1 - Fix issues 
     2 - Add a Replace feature so that people can replace a colour without editing the one in the palette
         (right click->replace colour in layers? in that case we'd have to implement multiple layers selection)
 
-    KNOWN BUGS:
-
-    1 - Must delete existing layers when creating a new pixel
-
     THINGS TO TEST:
 
     1 - Undo / redo
@@ -60,6 +55,8 @@ let maxZIndex = 3;
 
 let unusedIDs = [];
 let currentID = layerCount;
+let idToDelete;
+let layerOptions = document.getElementById("layer-properties-menu");
 
 on('click',"add-layer-button", function(){
     // Creating a new canvas
@@ -118,10 +115,11 @@ class Layer {
 
         if (menuEntry != null) {
             menuEntry.id = "layer" + id;
-            menuEntry.onclick = () => this.select();
+            menuEntry.onclick = () => this.selectLayer();
             menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
             menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
 
+            menuEntry.addEventListener("mouseup", this.openOptionsMenu, false);
             menuEntry.addEventListener("dragstart", this.layerDragStart, false);
             menuEntry.addEventListener("drop", this.layerDragDrop, false);
             menuEntry.addEventListener("dragover", this.layerDragOver, false);
@@ -222,14 +220,46 @@ class Layer {
         this.canvas.style.top = otherCanvas.canvas.style.top;
     }
 
-    select() {
+    openOptionsMenu(event) {
-        // Deselecting the old layer
+        if (event.which == 3) {
-        currentLayer.deselect();
+            let target = event.target;
+            let offsets = getElementAbsolutePosition(this);
 
-        // Selecting the current layer
+            while (target != null && target.classList != null && !target.classList.contains("layers-menu-entry")) {
-        this.isSelected = true;
+                target = target.parentElement;
-        this.menuEntry.classList.add("selected-layer");
+            }
-        currentLayer = getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML);
+
+            idToDelete = target.id;
+
+            layerOptions.style.visibility = "visible";
+            layerOptions.style.top = "0";
+            layerOptions.style.marginTop = "" + (event.clientY - 25) + "px";
+
+            getLayerByID(idToDelete).selectLayer();
+        }
+    }
+
+    closeOptionsMenu(event) {
+        layerOptions.style.visibility = "hidden";
+    }
+
+    selectLayer(layer) {
+        if (layer == null) {
+            // Deselecting the old layer
+            currentLayer.deselectLayer();
+
+            // Selecting the current layer
+            this.isSelected = true;
+            this.menuEntry.classList.add("selected-layer");
+            currentLayer = getLayerByName(this.menuEntry.getElementsByTagName("p")[0].innerHTML);
+        }
+        else {
+            currentLayer.deselectLayer();
+
+            layer.isSelected = true;
+            layer.menuEntry.classList.add("selected-layer");
+            currentLayer = layer;
+        }
     }
 
     toggleLock() {
@@ -250,7 +280,7 @@ class Layer {
         }
     }
 
-    deselect() {
+    deselectLayer() {
         this.isSelected = false;
         this.menuEntry.classList.remove("selected-layer");
     }
@@ -318,14 +348,39 @@ class Layer {
     }
 }
 
+function deleteLayer(event) {
+    // Cannot delete all the layers
+    if (layers.length != 4) {
+        let layerIndex = layers.indexOf(currentLayer);
+        let toDelete = layers[layerIndex];
+        // Adding the ids to the unused ones
+        unusedIDs.push(currentLayer.id);
+
+        // Selecting the next layer
+        if (layerIndex != (layers.length - 3)) {
+            layers[layerIndex + 1].selectLayer();
+        }
+        // or the previous one if the next one doesn't exist
+        else {
+            layers[layerIndex - 1].selectLayer();
+        }
+
+        // Deleting canvas and entry
+        toDelete.canvas.remove();
+        toDelete.menuEntry.remove();
+
+        layers.splice(layerIndex, 1);
+    }
+
+    currentLayer.closeOptionsMenu();
+}
+
+
 // Swap two layer entries in the layer menu
 function swapLayerEntries(id1, id2) {
     let entry1 = document.getElementById(id1);
     let entry2 = document.getElementById(id2);
 
-    console.log("entry 1: " + id1);
-    console.log("entry 2: " + id2);
-
     let layer1 = getLayerByID(id1);
     let layer2 = getLayerByID(id2);
     let tmpZIndex;
@@ -333,15 +388,10 @@ function swapLayerEntries(id1, id2) {
     let after2 = entry2.nextSibling;
     let parent = entry1.parentNode;
 
-    console.log("prima: " + layer1.canvas.style.zIndex);
-    console.log("prima: " + layer2.canvas.style.zIndex);
-
     tmpZIndex = layer1.canvas.style.zIndex;
     layer1.canvas.style.zIndex = layer2.canvas.style.zIndex;
     layer2.canvas.style.zIndex = tmpZIndex;
 
-    console.log("fatto");
-
     parent.insertBefore(entry2, entry1);
 
     if (after2) {
@@ -354,9 +404,6 @@ function swapLayerEntries(id1, id2) {
     } else {
        parent.appendChild(entry1);
     }
-
-    console.log("dopo: " + layer1.canvas.style.zIndex);
-    console.log("dopo: " + layer2.canvas.style.zIndex);
 }
 
 // Finds a layer given its name

js/_mouseEvents.js

@@ -68,6 +68,10 @@ window.addEventListener("mouseup", function (mouseEvent) {
 
 	closeMenu();
 	
+	if (!isChildOfByClass(mouseEvent.target, "layers-menu-entry")) {
+		currentLayer.closeOptionsMenu();	
+	}
+
 	if (!documentCreated || dialogueOpen || currentLayer.isLocked) return;
 
 	if (currentTool.name == 'eyedropper' && mouseEvent.target.className == 'drawingCanvas') {

js/_pixelEditorUtility.js

@@ -10,6 +10,18 @@ function isPixelEmpty(pixel) {
     return false;
 }
 
+function isChildOfByClass(element, className) {
+	while (element != null && element.classList != null && !element.classList.contains(className)) {
+		element = element.parentElement;
+	}
+
+	if (element != null && element.classList != null && element.classList.contains(className)) {
+		return true;
+	}
+
+	return false;
+}
+
 function getEyedropperColor(cursorLocation) {
 	let max = -1;
 	let tmpColour;
@@ -33,3 +45,16 @@ function getEyedropperColor(cursorLocation) {
 
 	return selectedColor;
 }
+
+function getElementAbsolutePosition(element) {
+	let curleft = curtop = 0;
+
+	if (element.offsetParent) {
+		do {
+			curleft += element.offsetLeft;
+			curtop += element.offsetTop;
+		} while (element = element.offsetParent);
+	}
+
+	return [curleft,curtop];
+}

views/pixel-editor.hbs

@@ -153,6 +153,15 @@
                 {{svg "plus.svg" width="20" height="20"}} Add layer
             </button>
         </li>
+
+        <ul id = "layer-properties-menu">
+            <li>
+                <button id = "delete-layer" onclick = "deleteLayer()">Delete</button>
+            </li>
+            <li>
+                <button id = "rename-layer">Rename</button>
+            </li>
+        </ul>
     </ul>
 
     <div id="eyedropper-preview"></div>
@@ -276,8 +285,6 @@
         </div>
     </div>
 
-    </div>
-
     <script>
       palettes = { {{#palettes}}
           '{{title}}': {