glen/dyna3
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Projects Releases 2 Wiki Activity

Outline: start on editor state and outline view

Browse Source
This commit is contained in:
Aaron Fenyes 2024-09-12 15:24:41 -07:00
parent d3c9a08d22
commit 336b940471
6 changed files with 165 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app-proto/sketch-outline/.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
target
dist
Cargo.lock

29
app-proto/sketch-outline/Cargo.toml Normal file
View File

@ -0,0 +1,29 @@
[package]
name = "sketch-outline"
version = "0.1.0"
authors = ["Aaron"]
edition = "2021"
[features]
default = ["console_error_panic_hook"]
[dependencies]
js-sys = "0.3.70"
nalgebra = "0.33.0"
sycamore = "0.9.0-beta.3"
# The `console_error_panic_hook` crate provides better debugging of panics by
# logging them with `console.error`. This is great for development, but requires
# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
# code size when deploying.
console_error_panic_hook = { version = "0.1.7", optional = true }
[dependencies.web-sys]
version = "0.3.69"
[dev-dependencies]
wasm-bindgen-test = "0.3.34"
[profile.release]
opt-level = "s" # optimize for small code size
debug = true # include debug symbols

9
app-proto/sketch-outline/index.html Normal file
View File

@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Sketch outline</title>
<link data-trunk rel="css" href="main.css"/>
</head>
<body></body>
</html>

50
app-proto/sketch-outline/main.css Normal file
View File

@ -0,0 +1,50 @@
body {
margin-left: 20px;
margin-top: 20px;
color: #fcfcfc;
background-color: #222;
}
ul {
width: 450px;
padding: 8px;
border: 1px solid #888;
border-radius: 16px;
}
li {
display: flex;
padding: 3px;
list-style-type: none;
background-color: #444;
border-radius: 8px;
}
li:not(:last-child) {
margin-bottom: 8px;
}
li > .elt-name {
flex-grow: 1;
padding: 2px 0px 2px 4px;
}
li > .elt-rep {
display: flex;
}
li > .elt-rep > div {
padding: 2px;
margin-left: 3px;
text-align: center;
width: 60px;
background-color: #333;
}
li > .elt-rep > div:first-child {
border-radius: 6px 0px 0px 6px;
}
li > .elt-rep > div:last-child {
border-radius: 0px 6px 6px 0px;
}

61
app-proto/sketch-outline/src/editor.rs Normal file
View File

@ -0,0 +1,61 @@
use nalgebra::DVector;
use sycamore::{prelude::*, web::tags::div};
#[derive(Clone, PartialEq)]
struct Element {
id: i64,
name: String,
rep: DVector<f64>,
color: [f32; 3]
}
struct EditorState {
elements: Signal<Vec<Element>>
}
#[component]
pub fn Editor() -> View {
let state = EditorState {
elements: create_signal(vec![
Element {
id: 1,
name: String::from("Central"),
rep: DVector::<f64>::from_column_slice(&[0.0, 0.0, 0.0, 0.25, -1.0]),
color: [0.75_f32, 0.75_f32, 0.75_f32]
},
Element {
id: 2,
name: String::from("Wing A"),
rep: DVector::<f64>::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]),
color: [1.00_f32, 0.25_f32, 0.00_f32]
},
Element {
id: 3,
name: String::from("Wing B"),
rep: DVector::<f64>::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]),
color: [1.00_f32, 0.25_f32, 0.00_f32]
}
])
};
view! {
ul {
Keyed(
list=state.elements,
view=|elt| {
let name = elt.name.clone();
let rep_components = elt.rep.iter().map(
|u| View::from(div().children(u.to_string().replace("-", "\u{2212}")))
).collect::<Vec<_>>();
view! {
li {
div(class="elt-name") { (name) }
div(class="elt-rep") { (rep_components) }
}
}
},
key=|elt| elt.id
)
}
}
}

13
app-proto/sketch-outline/src/main.rs Normal file
View File

@ -0,0 +1,13 @@
use sycamore::prelude::*;
mod editor;
use editor::Editor;
fn main() {
sycamore::render(|| {
view! {
Editor {}
}
});
}