UI for hiding layers

src/assets/eye-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
+  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/>
+  <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/>
+</svg>

src/assets/eye-slash.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
+  <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
+  <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
+  <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>
+</svg>

src/main.js

@@ -1308,6 +1308,7 @@ class Layer {
     this.visible = !this.visible
     updateUI()
     updateMenu()
+    updateLayers()
   }
 }
 
@@ -3516,6 +3517,22 @@ function updateLayers() {
       })
       layerName.innerText = layer.name
       layerHeader.appendChild(layerName)
+      // Visibility icon element
+      let visibilityIcon = document.createElement("img")
+      visibilityIcon.className = "visibility-icon"
+      visibilityIcon.src = layer.visible ? "assets/eye-fill.svg" : "assets/eye-slash.svg"
+
+      // Toggle visibility on click
+      visibilityIcon.addEventListener("click", (e) => {
+        e.stopPropagation() // Prevent click from bubbling to the layerHeader click listener
+        layer.visible = !layer.visible
+        // visibilityIcon.src = layer.visible ? "assets/eye-fill.svg" : "assets/eye-slash.svg"
+        updateUI()
+        updateMenu()
+        updateLayers()
+      })
+
+      layerHeader.appendChild(visibilityIcon)
       layerHeader.addEventListener("click", (e) => {
         context.activeObject.currentLayer = context.activeObject.layers.indexOf(layer)
         updateLayers()
@@ -3523,6 +3540,9 @@ function updateLayers() {
       })
       let layerTrack = document.createElement("div")
       layerTrack.className = "layer-track"
+      if (!layer.visible) {
+        layerTrack.classList.add("invisible")
+      }
       framescontainer.appendChild(layerTrack)
       layerTrack.addEventListener("click", (e) => {
         let mouse = getMousePos(layerTrack, e)

src/styles.css

@@ -339,6 +339,10 @@ button {
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #999;
   flex-shrink: 0;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   cursor: pointer;
 }
 .layer-header.active {
@@ -359,6 +363,13 @@ button {
 .layer-header.active > .layer-name {
   color: #000;
 }
+/* Visibility icon positioning */
+.visibility-icon {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  margin-right: 10px;
+} 
 .layer-track {
   min-width: 100%;
   height: calc( 2 * var(--lineheight));
@@ -377,6 +388,9 @@ button {
   border-bottom: 1px solid #ccc;
   flex-shrink: 0;
 }
+.layer-track.invisible {
+  opacity: 0.3;
+}
 .frame {
   width: 25px;
   height: 100%;
@@ -632,4 +646,7 @@ button {
   .audioWaveform {
     filter: invert(1);
   }
+  .visibility-icon {
+    filter: invert(1);
+  }
 }