App: add element selection

This commit is contained in:
Aaron Fenyes 2024-09-16 11:29:44 -07:00
parent 93190e99da
commit a60624884a
5 changed files with 41 additions and 7 deletions

View File

@ -26,7 +26,7 @@ li {
border-radius: 8px;
}
li:focus {
li.selected {
color: #fff;
background-color: #666;
}
@ -52,7 +52,7 @@ li > .elt-rep > div {
background-color: #333;
}
li:focus > .elt-rep > div {
li.selected > .elt-rep > div {
background-color: #555;
}

View File

@ -7,6 +7,10 @@ pub struct Element {
pub label: String,
pub color: [f32; 3],
pub rep: DVector<f64>,
/* TO DO */
// does this belong in the element data?
pub selected: Signal<bool>
}
// a complete, view-independent description of an assembly

View File

@ -101,6 +101,11 @@ pub fn Display() -> View {
// change listener
let scene_changed = create_signal(true);
create_effect(move || {
let elements = state.assembly.elements.get_clone();
for elt in elements { elt.selected.track(); }
scene_changed.set(true);
});
/* INSTRUMENTS */
const SAMPLE_PERIOD: i32 = 60;
@ -284,7 +289,13 @@ pub fn Display() -> View {
let elements = state.assembly.elements.get_clone();
let element_iter = (&elements).into_iter();
let reps_world: Vec<_> = element_iter.clone().map(|elt| &assembly_to_world * &elt.rep).collect();
let colors: Vec<_> = element_iter.map(|elt| elt.color).collect();
let colors: Vec<_> = element_iter.map(|elt|
if elt.selected.get() {
elt.color.map(|ch| 0.5 + 0.5*ch)
} else {
elt.color
}
).collect();
// set the resolution
let width = canvas.width() as f32;

View File

@ -24,19 +24,22 @@ fn main() {
id: String::from("wing_a"),
label: String::from("Wing A"),
color: [1.00_f32, 0.25_f32, 0.00_f32],
rep: DVector::<f64>::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25])
rep: DVector::<f64>::from_column_slice(&[0.5, 0.5, 0.0, 0.5, -0.25]),
selected: create_signal(false)
},
Element {
id: String::from("wing_b"),
label: String::from("Wing B"),
color: [0.00_f32, 0.25_f32, 1.00_f32],
rep: DVector::<f64>::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25])
rep: DVector::<f64>::from_column_slice(&[-0.5, -0.5, 0.0, 0.5, -0.25]),
selected: create_signal(false)
},
Element {
id: String::from("central"),
label: String::from("Central"),
color: [0.75_f32, 0.75_f32, 0.75_f32],
rep: DVector::<f64>::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625])
rep: DVector::<f64>::from_column_slice(&[0.0, 0.0, 0.0, 0.4, -0.625]),
selected: create_signal(false)
}
])
}

View File

@ -1,5 +1,6 @@
use itertools::Itertools;
use sycamore::{prelude::*, web::tags::div};
use web_sys::KeyboardEvent;
use crate::AppState;
@ -21,6 +22,9 @@ pub fn Outline() -> View {
Keyed(
list=elements_sorted,
view=|elt| {
let class = create_memo(move ||
if elt.selected.get() { "selected" } else { "" }
);
let label = elt.label.clone();
let rep_components = elt.rep.iter().map(|u| {
let u_coord = u.to_string().replace("-", "\u{2212}");
@ -29,7 +33,19 @@ pub fn Outline() -> View {
view! {
/* [TO DO] switch to integer-valued parameters whenever
that becomes possible again */
li(tabindex="0") {
li(
class=class.get(),
tabindex="0",
on:click=move |_| {
elt.selected.set_fn(|sel| !sel);
},
on:keydown=move |event: KeyboardEvent| {
if event.key() == "Enter" {
elt.selected.set_fn(|sel| !sel);
event.prevent_default();
}
}
) {
div(class="elt-label") { (label) }
div(class="elt-rep") { (rep_components) }
}