diff --git a/js/Layer.js b/js/Layer.js index c214f77..af7d1eb 100644 --- a/js/Layer.js +++ b/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 diff --git a/js/LayerList.js b/js/LayerList.js index f9d253d..985e9fa 100644 --- a/js/LayerList.js +++ b/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 } })(); \ No newline at end of file diff --git a/js/_mouseEvents.js b/js/_mouseEvents.js index 3e566fe..5eb2e23 100644 --- a/js/_mouseEvents.js +++ b/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