App: add display canvas

app-proto/sketch-outline/Cargo.toml

@@ -9,7 +9,6 @@ default = ["console_error_panic_hook"]
 
 [dependencies]
 itertools = "0.13.0"
-js-sys = "0.3.70"
 nalgebra = "0.33.0"
 sycamore = "0.9.0-beta.3"
 

app-proto/sketch-outline/main.css

@@ -5,11 +5,17 @@ body {
   background-color: #222;
 }
 
+/* outline */
+
 ul {
+  float: left;
   width: 450px;
+  height: 750px;
+  margin: 0px;
   padding: 8px;
-  border: 1px solid #888;
+  border: 1px solid #555;
   border-radius: 16px;
+  box-sizing: border-box;
 }
 
 li {
@@ -20,6 +26,11 @@ li {
   border-radius: 8px;
 }
 
+li:focus {
+  color: #fff;
+  background-color: #666;
+}
+
 li:not(:last-child) {
   margin-bottom: 8px;
 }
@@ -41,10 +52,28 @@ li > .elt-rep > div {
   background-color: #333;
 }
 
+li:focus > .elt-rep > div {
+  background-color: #555;
+}
+
 li > .elt-rep > div:first-child {
   border-radius: 6px 0px 0px 6px;
 }
 
 li > .elt-rep > div:last-child {
   border-radius: 0px 6px 6px 0px;
+}
+
+/* display */
+
+canvas {
+  float: left;
+  margin-left: 16px;
+  background-color: #020202;
+  border: 1px solid #555;
+  border-radius: 16px;
+}
+
+canvas:focus {
+  border-color: #aaa;
 }

app-proto/sketch-outline/src/app.rs

@@ -55,7 +55,9 @@ pub fn App() -> View {
                         View::from(div().children(u_coord))
                     }).collect::<Vec<_>>();
                     view! {
-                        li {
+                        /* [TO DO] switch to integer-valued parameters whenever
+                        that becomes possible again */
+                        li(tabindex="0") {
                             div(class="elt-label") { (label) }
                             div(class="elt-rep") { (rep_components) }
                         }

app-proto/sketch-outline/src/display.rs

@@ -0,0 +1,10 @@
+use sycamore::prelude::*;
+
+#[component]
+pub fn Display() -> View {
+    view! {
+        /* [TO DO] switch back to integer-valued parameters when that becomes
+        possible again */
+        canvas(width="750", height="750", tabindex="0")
+    }
+}

app-proto/sketch-outline/src/main.rs

@@ -1,14 +1,17 @@
 mod app;
 mod assembly;
+mod display;
 
 use sycamore::prelude::*;
 
 use app::App;
+use display::Display;
 
 fn main() {
     sycamore::render(|| {
         view! {
             App {}
+            Display {}
         }
     });
 }