engine-proto/ConstructionViewer.jl

@@ -2,8 +2,9 @@ module Viewer
 
 using Blink
 using Colors
+using Printf
 
-export ConstructionViewer, display!
+export ConstructionViewer, display!, opentools!, closetools!
 
 # === Blink utilities ===
 
@@ -24,17 +25,42 @@ mutable struct ConstructionViewer
   
   function ConstructionViewer()
     # create window and open developer console
-    win = Window()
-    opentools(win)
+    win = Window(Blink.Dict(:width => 620, :height => 830))
     
     # set stylesheet
     style!(win, """
-      /* needed to keep Ganja canvas from blowing up */
-      canvas {
-        min-width: 600px;
-        max-width: 600px;
-        min-height: 600px;
-        max-height: 600px;
+      body {
+        background-color: #ccc;
+      }
+      
+      /* 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: 4px;
+        border-radius: 5px;
+        border: solid;
+        font-family: monospace;
       }
     """)
     
@@ -50,30 +76,46 @@ mutable struct ConstructionViewer
       var elements = [];
       var palette = [];
       
-      // declare visualization handle
-      var graph;
+      // declare handles for the view and its options
+      var view;
+      var viewOpt;
+      
+      // declare handles for the controls
+      var controlPanel;
+      var visToggles;
       
       // create scene function
       function scene() {
         commands = [];
         for (let n = 0; n < elements.length; ++n) {
-          commands.push(palette[n], elements[n]);
+          if (visToggles[n].checked) {
+            commands.push(palette[n], elements[n]);
+          }
         }
         return commands;
       }
+      
+      function updateView() {
+        requestAnimationFrame(view.update.bind(view, scene));
+      }
     """)
     
-    # create view
     @js win begin
-      graph = CGA3.graph(
-        scene,
-        Dict(
-          "conformal" => true,
-          "gl" => true,
-          "grid" => true
-        )
+      # create view
+      viewOpt = Dict(
+        :conformal => true,
+        :gl => true,
+        :devicePixelRatio => window.devicePixelRatio
       )
-      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)
@@ -101,8 +143,45 @@ function display!(viewer::ConstructionViewer, elements::Matrix)
   palette_packed = [RGB24(c).color for c in palette]
   @js viewer.win palette = $palette_packed
   
+  # create visibility toggles
+  @js viewer.win begin
+    controlPanel.replaceChildren()
+    visToggles = []
+  end
+  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
+      @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
+  
   # update view
-  @js viewer.win requestAnimationFrame(graph.update.bind(graph, scene));
+  @js viewer.win updateView()
+end
+
+function opentools!(viewer::ConstructionViewer)
+  size(viewer.win, 1240, 830)
+  opentools(viewer.win)
+end
+
+function closetools!(viewer::ConstructionViewer)
+  closetools(viewer.win)
+  size(viewer.win, 620, 830)
 end
 
 end