From 5ea32ac53cfac68e1267d8863338c32695214c05 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Wed, 26 Jun 2024 15:51:57 -0700
Subject: [PATCH] Streamline visibility controls

---
 engine-proto/ConstructionViewer.jl | 55 +++++++++++++-----------------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/engine-proto/ConstructionViewer.jl b/engine-proto/ConstructionViewer.jl
index 2c51ce6..2486cc9 100644
--- a/engine-proto/ConstructionViewer.jl
+++ b/engine-proto/ConstructionViewer.jl
@@ -57,8 +57,9 @@ mutable struct ConstructionViewer
       
       #control-panel > div {
         margin-top: 5px;
-        padding: 2px;
+        padding: 4px;
         border-radius: 5px;
+        border: solid;
         font-family: monospace;
       }
     """)
@@ -81,13 +82,13 @@ mutable struct ConstructionViewer
       
       // declare handles for the controls
       var controlPanel;
-      var visControls;
+      var visToggles;
       
       // create scene function
       function scene() {
         commands = [];
         for (let n = 0; n < elements.length; ++n) {
-          if (visControls[n].checked) {
+          if (visToggles[n].checked) {
             commands.push(palette[n], elements[n]);
           }
         }
@@ -142,38 +143,30 @@ function display!(viewer::ConstructionViewer, elements::Matrix)
   palette_packed = [RGB24(c).color for c in palette]
   @js viewer.win palette = $palette_packed
   
-  # generate visibility controls
+  # create visibility toggles
   @js viewer.win begin
     controlPanel.replaceChildren()
-    visControls = []
+    visToggles = []
   end
-  for n in 1:size(elements, 2)
-    index_str = string(n)
-    vec_str = join(map(t -> @sprintf("%.3f", t), elements[:, n]), ", ")
-    style_str = "background-color: #$(hex(palette[n]));"
-    println(style_str)
+  for (elt, c) in zip(eachcol(elements), palette)
+    vec_str = join(map(t -> @sprintf("%.3f", t), elt), ", ")
+    color_str = "#$(hex(c))"
+    style_str = "background-color: $color_str; border-color: $color_str;"
     @js viewer.win begin
-      # create container
-      @var container = document.createElement(:div)
-      container.setAttribute(:style, $style_str)
-      
-      # create checkbox
-      @var checkbox = document.createElement(:input)
-      checkbox.setAttribute(:type, "checkbox")
-      checkbox.setAttribute(:id, $index_str)
-      checkbox.setAttribute(:checked, "true")
-      checkbox.addEventListener(:input, updateView)
-      visControls.push(checkbox)
-      container.appendChild(checkbox)
-      
-      # create label
-      @var label = document.createElement(:label);
-      label.setAttribute(:for, $index_str)
-      label.appendChild(document.createTextNode($vec_str))
-      container.appendChild(label)
-      
-      # add the control to the control panel
-      controlPanel.appendChild(container)
+      @var toggle = document.createElement(:div)
+      toggle.setAttribute(:style, $style_str)
+      toggle.checked = true
+      toggle.addEventListener(
+        "click",
+        () -> begin
+          toggle.checked = !toggle.checked
+          toggle.style.backgroundColor = toggle.checked ? $color_str : "inherit";
+          updateView()
+        end
+      )
+      toggle.appendChild(document.createTextNode($vec_str))
+      visToggles.push(toggle);
+      controlPanel.appendChild(toggle);
     end
   end