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