diff --git a/engine-proto/ConstructionViewer.jl b/engine-proto/ConstructionViewer.jl index efa7293..563857a 100644 --- a/engine-proto/ConstructionViewer.jl +++ b/engine-proto/ConstructionViewer.jl @@ -3,7 +3,7 @@ module Viewer using Blink using Colors -export ConstructionViewer, display! +export ConstructionViewer, display!, opentools!, closetools! # === Blink utilities === @@ -24,17 +24,23 @@ mutable struct ConstructionViewer function ConstructionViewer() # create window and open developer console - win = Window() - opentools(win) + win = Window(Blink.Dict(:width => 620, :height => 620)) # set stylesheet style!(win, """ - /* needed to keep Ganja canvas from blowing up */ + body { + background-color: #c8c0d0; + } + + /* maximum dimensions are needed to keep Ganja canvas from blowing up */ canvas { min-width: 600px; max-width: 600px; min-height: 600px; max-height: 600px; + margin-top: 10px; + margin-left: 10px; + border-radius: 10px; } """) @@ -50,8 +56,9 @@ mutable struct ConstructionViewer var elements = []; var palette = []; - // declare visualization handle + // declare handles for the visualization and its options var graph; + var graphOpt; // create scene function function scene() { @@ -65,14 +72,13 @@ mutable struct ConstructionViewer # create view @js win begin - graph = CGA3.graph( - scene, - Dict( - "conformal" => true, - "gl" => true, - "grid" => true - ) + graphOpt = Dict( + :conformal => true, + :gl => true, + :grid => true, + :devicePixelRatio => window.devicePixelRatio ) + graph = CGA3.graph(scene, graphOpt) document.body.replaceChildren(graph) end @@ -105,6 +111,16 @@ function display!(viewer::ConstructionViewer, elements::Matrix) @js viewer.win requestAnimationFrame(graph.update.bind(graph, scene)); end +function opentools!(viewer::ConstructionViewer) + size(viewer.win, 1240, 620) + opentools(viewer.win) +end + +function closetools!(viewer::ConstructionViewer) + closetools(viewer.win) + size(viewer.win, 620, 620) +end + end # ~~~ sandbox setup ~~~