Add element visibility controls

engine-proto/ConstructionViewer.jl

@@ -2,6 +2,7 @@ module Viewer
 
 using Blink
 using Colors
+using Printf
 
 export ConstructionViewer, display!, opentools!, closetools!
 
@@ -24,23 +25,41 @@ mutable struct ConstructionViewer
   
   function ConstructionViewer()
     # create window and open developer console
-    win = Window(Blink.Dict(:width => 620, :height => 620))
+    win = Window(Blink.Dict(:width => 620, :height => 830))
     
     # set stylesheet
     style!(win, """
       body {
-        background-color: #c8c0d0;
+        background-color: #ccc;
       }
       
-      /* maximum dimensions are needed to keep Ganja canvas from blowing up */
-      canvas {
-        min-width: 600px;
-        max-width: 600px;
-        min-height: 600px;
-        max-height: 600px;
+      /* the maximum dimensions keep Ganja from blowing up the canvas */
+      #view {
+        display: block;
+        width: 600px;
+        height: 600px;
         margin-top: 10px;
         margin-left: 10px;
         border-radius: 10px;
+        background-color: #f0f0f0;
+      }
+      
+      #control-panel {
+        width: 600px;
+        height: 200px;
+        box-sizing: border-box;
+        padding: 5px 10px 5px 10px;
+        margin-top: 10px;
+        margin-left: 10px;
+        border-radius: 10px;
+        background-color: #f0f0f0;
+      }
+      
+      #control-panel > div {
+        margin-top: 5px;
+        padding: 2px;
+        border-radius: 5px;
+        font-family: monospace;
       }
     """)
     
@@ -56,30 +75,46 @@ mutable struct ConstructionViewer
       var elements = [];
       var palette = [];
       
-      // declare handles for the visualization and its options
-      var graph;
-      var graphOpt;
+      // declare handles for the view and its options
+      var view;
+      var viewOpt;
+      
+      // declare handles for the controls
+      var controlPanel;
+      var visControls;
       
       // create scene function
       function scene() {
         commands = [];
         for (let n = 0; n < elements.length; ++n) {
+          if (visControls[n].checked) {
             commands.push(palette[n], elements[n]);
           }
+        }
         return commands;
       }
+      
+      function updateView() {
+        requestAnimationFrame(view.update.bind(view, scene));
+      }
     """)
     
-    # create view
     @js win begin
-      graphOpt = Dict(
+      # create view
+      viewOpt = Dict(
         :conformal => true,
         :gl => true,
-        :grid => true,
         :devicePixelRatio => window.devicePixelRatio
       )
-      graph = CGA3.graph(scene, graphOpt)
-      document.body.replaceChildren(graph)
+      view = CGA3.graph(scene, viewOpt)
+      view.setAttribute(:id, "view")
+      view.removeAttribute(:style)
+      document.body.replaceChildren(view)
+      
+      # create control panel
+      controlPanel = document.createElement(:div)
+      controlPanel.setAttribute(:id, "control-panel")
+      document.body.appendChild(controlPanel)
     end
     
     new(win)
@@ -107,18 +142,53 @@ function display!(viewer::ConstructionViewer, elements::Matrix)
   palette_packed = [RGB24(c).color for c in palette]
   @js viewer.win palette = $palette_packed
   
+  # generate visibility controls
+  @js viewer.win begin
+    controlPanel.replaceChildren()
+    visControls = []
+  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)
+    @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)
+    end
+  end
+  
   # update view
-  @js viewer.win requestAnimationFrame(graph.update.bind(graph, scene));
+  @js viewer.win updateView()
 end
 
 function opentools!(viewer::ConstructionViewer)
-  size(viewer.win, 1240, 620)
+  size(viewer.win, 1240, 830)
   opentools(viewer.win)
 end
 
 function closetools!(viewer::ConstructionViewer)
   closetools(viewer.win)
-  size(viewer.win, 620, 620)
+  size(viewer.win, 620, 830)
 end
 
 end