From e4415a535886d35936128417d4a49c8eaa5fb9b0 Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Fri, 23 Jul 2021 16:25:15 +0200 Subject: [PATCH] Removed all Layer-related global variables --- js/Input.js | 6 ++++-- js/Layer.js | 35 ++++++++++++++++++++++------------- js/LayerList.js | 29 +++++++++++++---------------- 3 files changed, 39 insertions(+), 31 deletions(-) diff --git a/js/Input.js b/js/Input.js index 8ff19d9..91f9349 100644 --- a/js/Input.js +++ b/js/Input.js @@ -47,11 +47,13 @@ const Input = (() => { */ function KeyPress(e) { var keyboardEvent = window.event? event : e; + console.log("pressed key"); //if the user is typing in an input field or renaming a layer, ignore these hotkeys, unless it's an enter key - if (document.activeElement.tagName == 'INPUT' || isRenamingLayer) { + if (document.activeElement.tagName == 'INPUT' || LayerList.isRenamingLayer) { if (e.keyCode == 13) { - currentLayer.closeOptionsMenu(); + console.log("here"); + LayerList.closeOptionsMenu(); } return; } diff --git a/js/Layer.js b/js/Layer.js index 8edf3d4..d78f8e2 100644 --- a/js/Layer.js +++ b/js/Layer.js @@ -1,16 +1,5 @@ // TODO: add undo for layer drag n drop -// REFACTOR: Put it somewhere -let oldLayerName = null; - -// REFACTOR: LayerMenu -// HTML element that contains the layer entries - - -// Is the user currently renaming a layer? -// REFACTOR: this one's tricky, might be part of EditorState -let isRenamingLayer = false; - /** Handler class for a single canvas (a single layer) * * @param width Canvas width @@ -40,8 +29,8 @@ class Layer { this.isSelected = false; this.isVisible = true; this.isLocked = false; - - console.log("here dude"); + + this.oldLayerName = null; if (typeof menuEntry == "string") this.menuEntry = document.getElementById("layers-menu").firstElementChild; @@ -99,6 +88,26 @@ class Layer { this.context.mozImageSmoothingEnabled = false; } + rename() { + this.menuEntry.getElementsByTagName("p")[0].setAttribute("contenteditable", false); + + if (this.oldLayerName != null) { + let name = this.menuEntry.getElementsByTagName("p")[0].innerHTML; + + for (let i=0; i { let layerList = document.getElementById("layers-menu"); let layerListEntry = layerList.firstElementChild; + let renamingLayer = false; let dragStartLayer; // Binding the right click menu @@ -157,18 +158,17 @@ const LayerList = (() => { return null; } - function renameLayer(event) { + function startRenamingLayer(event) { let p = currentLayer.menuEntry.getElementsByTagName("p")[0]; - oldLayerName = p.innerHTML; + currentLayer.oldLayerName = p.innerHTML; p.setAttribute("contenteditable", true); p.classList.add("layer-name-editable"); p.focus(); - Events.simulateInput(65, true, false, false); - isRenamingLayer = true; + renamingLayer = true; } function duplicateLayer(event, saveHistory = true) { @@ -371,33 +371,30 @@ const LayerList = (() => { 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; - } + currentLayer.rename(); + renamingLayer = false; } function getLayerListEntries() { return layerList; } + function isRenamingLayer() { + return renamingLayer; + } + return { addLayer, mergeLayers, getLayerByID, getLayerByName, - renameLayer, + renameLayer: startRenamingLayer, duplicateLayer, deleteLayer, merge, flatten, closeOptionsMenu, - getLayerListEntries + getLayerListEntries, + isRenamingLayer } })(); \ No newline at end of file