From b6d4544cd854f9d70305a50af46736b659ccf1ee Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Fri, 18 Sep 2020 10:18:27 +0200
Subject: [PATCH] Added layer focus when it's hovered in the menu

---
 js/_layer.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/js/_layer.js b/js/_layer.js
index 4167538..ff3311a 100644
--- a/js/_layer.js
+++ b/js/_layer.js
@@ -57,6 +57,8 @@ class Layer {
         if (menuEntry != null) {
             this.name = menuEntry.getElementsByTagName("p")[0].innerHTML;
             menuEntry.id = "layer" + id;
+            menuEntry.onmouseover = () => this.hover();
+            menuEntry.onmouseout = () => this.unhover();
             menuEntry.onclick = () => this.selectLayer();
             menuEntry.getElementsByTagName("button")[0].onclick = () => this.toggleLock();
             menuEntry.getElementsByTagName("button")[1].onclick = () => this.toggleVisibility();
@@ -100,6 +102,24 @@ class Layer {
         this.context.mozImageSmoothingEnabled = false;
     }
 
+    hover() {
+        // Hide all the layers but the current one
+        for (let i=1; i<layers.length - 2; i++) {
+            if (layers[i] !== this) {
+                layers[i].canvas.style.opacity = 0.3;
+            }
+        }
+    }
+
+    unhover() {
+        // Show all the layers again
+        for (let i=1; i<layers.length - 2; i++) {
+            if (layers[i] !== this) {
+                layers[i].canvas.style.opacity = 1;
+            }
+        }
+    }
+
     setID(id) {
         this.id = id;
         if (this.menuEntry != null) {