Moved right click layer menu from Layer to LayerList

js/Layer.js

@@ -7,10 +7,6 @@ let oldLayerName = null;
 // HTML element that contains the layer entries
 let layerList = document.getElementById("layers-menu");
 
-// Layer menu
-// REFACTOR: LayerMenu along with the right click menu
-let layerOptions = document.getElementById("layer-properties-menu");
-
 // Is the user currently renaming a layer?
 // REFACTOR: this one's tricky, might be part of EditorState
 let isRenamingLayer = false;
@@ -34,6 +30,8 @@ class Layer {
     static unusedIDs = [];
     static currentID = 1;
 
+    static layerOptions = document.getElementById("layer-properties-menu");
+
     // TODO: this is simply terrible. menuEntry can either be an HTML element, a string or undefined.
     // If it's an HTML element it is added, if it's a string nothing happens, if it's undefined the 
     // first menuEntry is used (the one that appears on load)
@@ -174,39 +172,6 @@ class Layer {
         this.canvas.style.top = otherLayer.canvas.style.top;
     }
 
-    openOptionsMenu(event) {
-        if (event.which == 3) {
-            let selectedId;
-            let target = event.target;
-
-            while (target != null && target.classList != null && !target.classList.contains("layers-menu-entry")) {
-                target = target.parentElement;
-            }
-
-            selectedId = target.id;
-
-            layerOptions.style.visibility = "visible";
-            layerOptions.style.top = "0";
-            layerOptions.style.marginTop = "" + (event.clientY - 25) + "px";
-
-            LayerList.getLayerByID(selectedId).selectLayer();
-        }
-    }
-
-    closeOptionsMenu(event) {
-        layerOptions.style.visibility = "hidden";
-        currentLayer.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false);
-        isRenamingLayer = false;
-
-        if (this.oldLayerName != null) {
-            let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
-            this.name = name;
-
-            new HistoryState().RenameLayer(this.oldLayerName, name, currentLayer);
-            this.oldLayerName = null;
-        }
-    }
-
     selectLayer(layer) {
         if (layer == null) {
             // Deselecting the old layer

js/LayerList.js

@@ -2,6 +2,8 @@ const LayerList = (() => {
 
     let layerListEntry = document.getElementById("layers-menu").firstElementChild;
 
+    Events.on("mousedown", document.getElementById("layers-menu"), openOptionsMenu);
+
     function addLayer(id, saveHistory = true) {
         // layers.length - 3
         let index = layers.length - 3;
@@ -245,7 +247,7 @@ const LayerList = (() => {
         }
     
         // Closing the menu
-        currentLayer.closeOptionsMenu();
+        closeOptionsMenu();
     }
 
     // TODO: Can't select the first layer
@@ -334,6 +336,39 @@ const LayerList = (() => {
         }
     }
 
+    function openOptionsMenu(event) {
+        if (event.which == 3) {
+            let selectedId;
+            let target = event.target;
+
+            while (target != null && target.classList != null && !target.classList.contains("layers-menu-entry")) {
+                target = target.parentElement;
+            }
+
+            selectedId = target.id;
+
+            Layer.layerOptions.style.visibility = "visible";
+            Layer.layerOptions.style.top = "0";
+            Layer.layerOptions.style.marginTop = "" + (event.clientY - 25) + "px";
+
+            getLayerByID(selectedId).selectLayer();
+        }
+    }
+
+    function closeOptionsMenu(event) {
+        Layer.layerOptions.style.visibility = "hidden";
+        currentLayer.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false);
+        isRenamingLayer = false;
+
+        if (this.oldLayerName != null) {
+            let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML;
+            this.name = name;
+
+            new HistoryState().RenameLayer(this.oldLayerName, name, currentLayer);
+            this.oldLayerName = null;
+        }
+    }
+
     // Making the layers list sortable
     new Sortable(document.getElementById("layers-menu"), {
         animation: 100,
@@ -352,6 +387,7 @@ const LayerList = (() => {
         duplicateLayer,
         deleteLayer,
         merge,
-        flatten
+        flatten,
+        closeOptionsMenu
     }
 })();

js/_mouseEvents.js

@@ -70,7 +70,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
 	TopMenuModule.closeMenu();
 	
 	if (currentLayer != null && !Util.isChildOfByClass(mouseEvent.target, "layers-menu-entry")) {
-		currentLayer.closeOptionsMenu();	
+		LayerList.closeOptionsMenu();	
 	}
 
 	// If the user finished placing down a line, clear the tmp canvas and copy the data to the current layer