Add element visibility controls

This commit is contained in:
Aaron Fenyes 2024-06-26 15:24:31 -07:00
parent 7aaf134a36
commit 3eb4fc6c91

View File

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