From 49170671b4266ae5550fc764cb69e9768fa4c43b Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Fri, 13 Sep 2024 14:53:12 -0700
Subject: [PATCH] App: add display canvas

---
 app-proto/sketch-outline/Cargo.toml     |  1 -
 app-proto/sketch-outline/main.css       | 31 ++++++++++++++++++++++++-
 app-proto/sketch-outline/src/app.rs     |  4 +++-
 app-proto/sketch-outline/src/display.rs | 10 ++++++++
 app-proto/sketch-outline/src/main.rs    |  3 +++
 5 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 app-proto/sketch-outline/src/display.rs

diff --git a/app-proto/sketch-outline/Cargo.toml b/app-proto/sketch-outline/Cargo.toml
index b039ab8..3afe26e 100644
--- a/app-proto/sketch-outline/Cargo.toml
+++ b/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"
 
diff --git a/app-proto/sketch-outline/main.css b/app-proto/sketch-outline/main.css
index 7e0fe01..9e8cdb4 100644
--- a/app-proto/sketch-outline/main.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/app-proto/sketch-outline/src/app.rs b/app-proto/sketch-outline/src/app.rs
index 934c960..dca056a 100644
--- a/app-proto/sketch-outline/src/app.rs
+++ b/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) }
                         }
diff --git a/app-proto/sketch-outline/src/display.rs b/app-proto/sketch-outline/src/display.rs
new file mode 100644
index 0000000..88336bf
--- /dev/null
+++ b/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")
+    }
+}
\ No newline at end of file
diff --git a/app-proto/sketch-outline/src/main.rs b/app-proto/sketch-outline/src/main.rs
index 06700e5..c375a9c 100644
--- a/app-proto/sketch-outline/src/main.rs
+++ b/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 {}
         }
     });
 }
\ No newline at end of file