diff --git a/app-proto/sketch-outline/src/outline.rs b/app-proto/sketch-outline/src/outline.rs index 13e506e..8d13df1 100644 --- a/app-proto/sketch-outline/src/outline.rs +++ b/app-proto/sketch-outline/src/outline.rs @@ -1,6 +1,6 @@ use itertools::Itertools; use sycamore::{prelude::*, web::tags::div}; -use web_sys::KeyboardEvent; +use web_sys::{KeyboardEvent, MouseEvent}; use crate::AppState; @@ -18,7 +18,12 @@ pub fn Outline() -> View { }); view! { - ul { + ul( + on:click={ + let state = use_context::(); + move |_| state.selection.update(|sel| sel.clear()) + } + ) { Keyed( list=elements_sorted, view=|elt| { @@ -46,23 +51,38 @@ pub fn Outline() -> View { tabindex="0", on:click={ let id = elt.id.clone(); - move |_| { - state.selection.update(|sel| { - if !sel.remove(&id) { + move |event: MouseEvent| { + if event.shift_key() { + state.selection.update(|sel| { + if !sel.remove(&id) { + sel.insert(id.clone()); + } + }); + } else { + state.selection.update(|sel| { + sel.clear(); sel.insert(id.clone()); - } - }); + }); + } + event.stop_propagation(); } }, on:keydown={ let id = elt.id.clone(); move |event: KeyboardEvent| { if event.key() == "Enter" { - state.selection.update(|sel| { - if !sel.remove(&id) { + if event.shift_key() { + state.selection.update(|sel| { + if !sel.remove(&id) { + sel.insert(id.clone()); + } + }); + } else { + state.selection.update(|sel| { + sel.clear(); sel.insert(id.clone()); - } - }); + }); + } event.prevent_default(); } }