From 78f8ef8215af8aeec841598d2957f25f50061d01 Mon Sep 17 00:00:00 2001
From: Aaron Fenyes <aaron.fenyes@fareycircles.ooo>
Date: Thu, 19 Sep 2024 17:53:07 -0700
Subject: [PATCH] Outline: switch to single selection

---
 app-proto/sketch-outline/src/outline.rs | 42 ++++++++++++++++++-------
 1 file changed, 31 insertions(+), 11 deletions(-)

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::<AppState>();
+                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();
                                     }
                                 }