StudioInfinity/dyna3
2
0
Fork 2
Code Issues 69 Pull requests Projects 3 Releases 4 Wiki Activity Actions

Outline: spruce up styling

Browse source 
Use `details` elements to hide and show constraints.
This commit is contained in:
Aaron Fenyes 2024-09-22 23:55:07 -07:00
parent edee153e37
commit 7709c61f71
2 changed files with 123 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

125
app-proto/sketch-outline/src/outline.rs
View file

@ -1,6 +1,6 @@
use itertools::Itertools;
use sycamore::{prelude::*, web::tags::div};
use web_sys::{KeyboardEvent, MouseEvent};
use web_sys::{Element, KeyboardEvent, MouseEvent, wasm_bindgen::JsCast};
use crate::AppState;
@ -31,9 +31,9 @@ pub fn Outline() -> View {
let class = create_memo({
move || {
if state.selection.with(|sel| sel.contains(&key)) {
"elt selected"
"selected"
} else {
"elt"
""
}
}
});
@ -42,59 +42,90 @@ pub fn Outline() -> View {
let u_coord = u.to_string().replace("-", "\u{2212}");
View::from(div().children(u_coord))
}).collect::<Vec<_>>();
let constrained = elt.constraints.len() > 0;
let details_node = create_node_ref();
view! {
/* [TO DO] switch to integer-valued parameters whenever
that becomes possible again */
li {
div(
class=class.get(),
tabindex="0",
on:click={
move |event: MouseEvent| {
if event.shift_key() {
state.selection.update(|sel| {
if !sel.remove(&key) {
sel.insert(key);
}
});
} else {
state.selection.update(|sel| {
sel.clear();
sel.insert(key);
});
}
event.stop_propagation();
}
},
on:keydown={
move |event: KeyboardEvent| {
if event.key() == "Enter" {
if event.shift_key() {
state.selection.update(|sel| {
if !sel.remove(&key) {
sel.insert(key);
details(ref=details_node) {
summary(
class=class.get(),
on:keydown={
move |event: KeyboardEvent| {
match event.key().as_str() {
"Enter" => {
if event.shift_key() {
state.selection.update(|sel| {
if !sel.remove(&key) {
sel.insert(key);
}
});
} else {
state.selection.update(|sel| {
sel.clear();
sel.insert(key);
});
}
});
} else {
state.selection.update(|sel| {
sel.clear();
sel.insert(key);
});
event.prevent_default();
},
"ArrowRight" if constrained => {
let _ = details_node
.get()
.unchecked_into::<Element>()
.set_attribute("open", "");
},
"ArrowLeft" => {
let _ = details_node
.get()
.unchecked_into::<Element>()
.remove_attribute("open");
},
_ => ()
}
event.prevent_default();
}
}
) {
div(
class="elt-switch",
on:click=|event: MouseEvent| event.stop_propagation()
)
div(
class="elt",
on:click={
move |event: MouseEvent| {
if event.shift_key() {
state.selection.update(|sel| {
if !sel.remove(&key) {
sel.insert(key);
}
});
} else {
state.selection.update(|sel| {
sel.clear();
sel.insert(key);
});
}
event.stop_propagation();
event.prevent_default();
}
}
) {
div(class="elt-label") { (label) }
div(class="elt-rep") { (rep_components) }
}
}
ul(class="constraints") {
Keyed(
list=elt.constraints.into_iter().collect::<Vec<_>>(),
view=|c_key: usize| view! {
li(class="cst") {
(c_key.to_string())
}
},
key=|c_key| c_key.clone()
)
}
) {
div(class="elt-label") { (label) }
div(class="elt-rep") { (rep_components) }
}
ul(class="constraints") {
Keyed(
list=elt.constraints.into_iter().collect::<Vec<_>>(),
view=|c_key: usize| view! { li { (c_key.to_string()) } },
key=|c_key| c_key.clone()
)
}
}
}