dyna3/engine-proto/ConstructionViewer.jl

module Viewer

using Blink
using Colors
using Printf

using Main.Engine

export ConstructionViewer, display!, opentools!, closetools!

# === Blink utilities ===

append_to_head!(w, type, content) = @js w begin
  @var element = document.createElement($type)
  element.appendChild(document.createTextNode($content))
  document.head.appendChild(element)
end

style!(w, stylesheet) = append_to_head!(w, "style", stylesheet)

script!(w, code) = append_to_head!(w, "script", code)

# === construction viewer ===

mutable struct ConstructionViewer
  win::Window
  
  function ConstructionViewer()
    # create window and open developer console
    win = Window(Blink.Dict(:width => 620, :height => 830))
    
    # set stylesheet
    style!(win, """
      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;
        overflow-y: scroll;
        border-radius: 10px;
        background-color: #f0f0f0;
      }
      
      #control-panel > div {
        margin-top: 5px;
        padding: 4px;
        border-radius: 5px;
        border: solid;
        font-family: monospace;
      }
    """)
    
    # load Ganja.js. for an automatically updated web-hosted version, load from
    #
    #   https://unpkg.com/ganja.js
    #
    # instead
    loadjs!(win, "http://localhost:8000/ganja-1.0.204.js")
    
    # create global functions and variables
    script!(win, """
      // create algebra
      var CGA3 = Algebra(4, 1);
      
      // initialize element list and palette
      var elements = [];
      var palette = [];
      
      // 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) {
          if (visToggles[n].checked) {
            commands.push(palette[n], elements[n]);
          }
        }
        return commands;
      }
      
      function updateView() {
        requestAnimationFrame(view.update.bind(view, scene));
      }
    """)
    
    @js win begin
      # create view
      viewOpt = Dict(
        :conformal => true,
        :gl => true,
        :devicePixelRatio => window.devicePixelRatio
      )
      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)
  end
end

mprod(v, w) =
  v[1]*w[1] + v[2]*w[2] + v[3]*w[3] + v[4]*w[4] - v[5]*w[5]

function display!(viewer::ConstructionViewer, elements::Matrix)
  # load elements
  elements_full = []
  for elt in eachcol(Engine.unmix * elements)
    if mprod(elt, elt) < 0.5
      elt_full = [0; elt; fill(0, 26)]
    else
      # `elt` is a spacelike vector, representing a generalized sphere, so we
      # take its Hodge dual before passing it to Ganja.js. the dual represents
      # the same generalized sphere, but Ganja.js only displays planes when
      # they're represented by vectors in grade 4 rather than grade 1
      elt_full = [fill(0, 26); -elt[5]; -elt[4]; elt[3]; -elt[2]; elt[1]; 0]
    end
    push!(elements_full, elt_full)
  end
  @js viewer.win elements = $elements_full.map((elt) -> @new CGA3(elt))
  
  # generate palette. this is Gadfly's `default_discrete_colors` palette,
  # available under the MIT license
  palette = distinguishable_colors(
    length(elements_full),
    [LCHab(70, 60, 240)],
    transform = c -> deuteranopic(c, 0.5),
    lchoices = Float64[65, 70, 75, 80],
    cchoices = Float64[0, 50, 60, 70],
    hchoices = range(0, stop=330, length=24)
  )
  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 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

# ~~~ sandbox setup ~~~

elements = begin
  const a = sqrt(BigFloat(3)/2)
  sqrt(0.5) * BigFloat[
    1    1   -1   -1    0
    1   -1    1   -1    0
    1   -1   -1    1    0
    0.5  0.5  0.5  0.5  1+a
    0.5  0.5  0.5  0.5  1-a
  ]
end

# show construction
viewer = Viewer.ConstructionViewer()
Viewer.display!(viewer, elements)