dyna3/app-proto/sketch-outline/src/outline.rs
Aaron Fenyes 96f8b6b5f3 App: store selection in hash map
Switch `Assembly.elements` to a hash map too, since that's probably
closer to what we'll want in the future.
2024-09-19 16:08:55 -07:00

80 lines
3.0 KiB
Rust

use itertools::Itertools;
use sycamore::{prelude::*, web::tags::div};
use web_sys::KeyboardEvent;
use crate::AppState;
#[component]
pub fn Outline() -> View {
// sort the elements alphabetically by ID
let elements_sorted = create_memo(|| {
let state = use_context::<AppState>();
state.assembly.elements
.get_clone()
.into_iter()
.sorted_by_key(|(id, _)| id.clone())
.map(|(_, elt)| elt)
.collect()
});
view! {
ul {
Keyed(
list=elements_sorted,
view=|elt| {
let state = use_context::<AppState>();
let class = create_memo({
let id = elt.id.clone();
move || {
if state.selection.with(|sel| sel.contains(&id)) {
"selected"
} else {
""
}
}
});
let label = elt.label.clone();
let rep_components = elt.rep.iter().map(|u| {
let u_coord = u.to_string().replace("-", "\u{2212}");
View::from(div().children(u_coord))
}).collect::<Vec<_>>();
view! {
/* [TO DO] switch to integer-valued parameters whenever
that becomes possible again */
li(
class=class.get(),
tabindex="0",
on:click={
let id = elt.id.clone();
move |_| {
state.selection.update(|sel| {
if !sel.remove(&id) {
sel.insert(id.clone());
}
});
}
},
on:keydown={
let id = elt.id.clone();
move |event: KeyboardEvent| {
if event.key() == "Enter" {
state.selection.update(|sel| {
if !sel.remove(&id) {
sel.insert(id.clone());
}
});
event.prevent_default();
}
}
}
) {
div(class="elt-label") { (label) }
div(class="elt-rep") { (rep_components) }
}
}
},
key=|elt| elt.id.clone()
)
}
}
}