Merge branch 'ganja' into gram
Get visibility controls.
This commit is contained in:
commit
a113f33635
@ -2,8 +2,9 @@ module Viewer
|
|||||||
|
|
||||||
using Blink
|
using Blink
|
||||||
using Colors
|
using Colors
|
||||||
|
using Printf
|
||||||
|
|
||||||
export ConstructionViewer, display!
|
export ConstructionViewer, display!, opentools!, closetools!
|
||||||
|
|
||||||
# === Blink utilities ===
|
# === Blink utilities ===
|
||||||
|
|
||||||
@ -24,17 +25,42 @@ mutable struct ConstructionViewer
|
|||||||
|
|
||||||
function ConstructionViewer()
|
function ConstructionViewer()
|
||||||
# create window and open developer console
|
# create window and open developer console
|
||||||
win = Window()
|
win = Window(Blink.Dict(:width => 620, :height => 830))
|
||||||
opentools(win)
|
|
||||||
|
|
||||||
# set stylesheet
|
# set stylesheet
|
||||||
style!(win, """
|
style!(win, """
|
||||||
/* needed to keep Ganja canvas from blowing up */
|
body {
|
||||||
canvas {
|
background-color: #ccc;
|
||||||
min-width: 600px;
|
}
|
||||||
max-width: 600px;
|
|
||||||
min-height: 600px;
|
/* the maximum dimensions keep Ganja from blowing up the canvas */
|
||||||
max-height: 600px;
|
#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 elements = [];
|
||||||
var palette = [];
|
var palette = [];
|
||||||
|
|
||||||
// declare visualization handle
|
// declare handles for the view and its options
|
||||||
var graph;
|
var view;
|
||||||
|
var viewOpt;
|
||||||
|
|
||||||
|
// declare handles for the controls
|
||||||
|
var controlPanel;
|
||||||
|
var visToggles;
|
||||||
|
|
||||||
// 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 (visToggles[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
|
||||||
graph = CGA3.graph(
|
# create view
|
||||||
scene,
|
viewOpt = Dict(
|
||||||
Dict(
|
:conformal => true,
|
||||||
"conformal" => true,
|
:gl => true,
|
||||||
"gl" => true,
|
:devicePixelRatio => window.devicePixelRatio
|
||||||
"grid" => true
|
|
||||||
)
|
|
||||||
)
|
)
|
||||||
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
|
end
|
||||||
|
|
||||||
new(win)
|
new(win)
|
||||||
@ -101,8 +143,45 @@ 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
|
||||||
|
|
||||||
|
# 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
|
# 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
|
||||||
|
|
||||||
end
|
end
|
||||||
|
Loading…
Reference in New Issue
Block a user