dyna3/app-proto/sketch-outline/src/outline.rs

use itertools::Itertools;
use sycamore::{prelude::*, web::tags::div};
use web_sys::{KeyboardEvent, MouseEvent};

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(|(_, elt)| elt.id.clone())
            .collect()
    });
    
    view! {
        ul(
            id="outline",
            on:click={
                let state = use_context::<AppState>();
                move |_| state.selection.update(|sel| sel.clear())
            }
        ) {
            Keyed(
                list=elements_sorted,
                view=|(key, elt)| {
                    let state = use_context::<AppState>();
                    let class = create_memo({
                        move || {
                            if state.selection.with(|sel| sel.contains(&key)) {
                                "elt selected"
                            } else {
                                "elt"
                            }
                        }
                    });
                    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 {
                            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);
                                                    }
                                                });
                                            } else {
                                                state.selection.update(|sel| {
                                                    sel.clear();
                                                    sel.insert(key);
                                                });
                                            }
                                            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 { (c_key.to_string()) } },
                                    key=|c_key| c_key.clone()
                                )
                            }
                        }
                    }
                },
                key=|(key, _)| key.clone()
            )
        }
    }
}