Add arrow key navigation

examples/widget-gallery/src/main.rs

@@ -60,20 +60,24 @@ fn app_view() -> impl View {
                                 .on_event(EventListener::KeyDown, move |e| {
                                     if let Event::KeyDown(key_event) = e {
                                         let active = active_tab.get();
-                                        match key_event.key.logical_key {
-                                            Key::Named(NamedKey::ArrowUp) => {
-                                                if active > 0 {
-                                                    set_active_tab.update(|v| *v -= 1)
+                                        if key_event.modifiers.is_empty() {
+                                            match key_event.key.logical_key {
+                                                Key::Named(NamedKey::ArrowUp) => {
+                                                    if active > 0 {
+                                                        set_active_tab.update(|v| *v -= 1)
+                                                    }
+                                                    true
                                                 }
-                                                true
-                                            }
-                                            Key::Named(NamedKey::ArrowDown) => {
-                                                if active < tabs.get().len() - 1 {
-                                                    set_active_tab.update(|v| *v += 1)
+                                                Key::Named(NamedKey::ArrowDown) => {
+                                                    if active < tabs.get().len() - 1 {
+                                                        set_active_tab.update(|v| *v += 1)
+                                                    }
+                                                    true
                                                 }
-                                                true
+                                                _ => false,
                                             }
-                                            _ => false,
+                                        } else {
+                                            false
                                         }
                                     } else {
                                         false

src/context.rs

@@ -354,6 +354,17 @@ impl AppState {
         false
     }
 
+    pub(crate) fn can_focus(&self, id: Id) -> bool {
+        self.keyboard_navigable.contains(&id)
+            && !self.is_disabled(&id)
+            && !id
+                .id_path()
+                .unwrap()
+                .dispatch()
+                .iter()
+                .any(|id| self.is_hidden(*id))
+    }
+
     pub fn is_hovered(&self, id: &Id) -> bool {
         self.hovered.contains(id)
     }

src/lib.rs

@@ -101,6 +101,7 @@ pub mod id;
 mod inspector;
 pub mod keyboard;
 pub mod menu;
+mod nav;
 pub mod pointer;
 pub mod renderer;
 pub mod responsive;

src/nav.rs

@@ -0,0 +1,77 @@
+use kurbo::{Point, Rect};
+use winit::keyboard::NamedKey;
+
+use crate::{
+    context::AppState,
+    id::Id,
+    view::{view_tab_navigation, View},
+};
+
+pub(crate) fn view_arrow_navigation(key: NamedKey, app_state: &mut AppState, view: &dyn View) {
+    let focused = match app_state.focus {
+        Some(id) => id,
+        None => {
+            view_tab_navigation(
+                view,
+                app_state,
+                matches!(key, NamedKey::ArrowUp | NamedKey::ArrowLeft),
+            );
+            return;
+        }
+    };
+    let rect = app_state.get_layout_rect(focused).inflate(10.0, 10.0);
+    let center = rect.center();
+    let intersect_target = match key {
+        NamedKey::ArrowUp => Rect::new(rect.x0, f64::NEG_INFINITY, rect.x1, center.y),
+        NamedKey::ArrowDown => Rect::new(rect.x0, center.y, rect.x1, f64::INFINITY),
+        NamedKey::ArrowLeft => Rect::new(f64::NEG_INFINITY, rect.y0, center.x, rect.y1),
+        NamedKey::ArrowRight => Rect::new(center.x, rect.y0, f64::INFINITY, rect.y1),
+        _ => panic!(),
+    };
+    let center_target = match key {
+        NamedKey::ArrowUp => {
+            Rect::new(f64::NEG_INFINITY, f64::NEG_INFINITY, f64::INFINITY, rect.y0)
+        }
+        NamedKey::ArrowDown => Rect::new(f64::NEG_INFINITY, rect.y1, f64::INFINITY, f64::INFINITY),
+        NamedKey::ArrowLeft => {
+            Rect::new(f64::NEG_INFINITY, f64::NEG_INFINITY, rect.x0, f64::INFINITY)
+        }
+        NamedKey::ArrowRight => Rect::new(rect.x1, f64::NEG_INFINITY, f64::INFINITY, f64::INFINITY),
+        _ => panic!(),
+    };
+    let mut keyboard_navigable: Vec<Id> = app_state.keyboard_navigable.iter().copied().collect();
+    keyboard_navigable.retain(|id| {
+        let layout = app_state.get_layout_rect(*id);
+
+        !layout.intersect(intersect_target).is_empty()
+            && center_target.contains(layout.center())
+            && app_state.can_focus(*id)
+            && *id != focused
+    });
+
+    let mut new_focus = None;
+    for id in keyboard_navigable {
+        let id_rect = app_state.get_layout_rect(id);
+        let id_center = id_rect.center();
+        let id_edge = match key {
+            NamedKey::ArrowUp => Point::new(id_center.x, id_rect.y1),
+            NamedKey::ArrowDown => Point::new(id_center.x, id_rect.y0),
+            NamedKey::ArrowLeft => Point::new(id_rect.x1, id_center.y),
+            NamedKey::ArrowRight => Point::new(id_rect.x0, id_center.y),
+            _ => panic!(),
+        };
+        let id_distance = center.distance_squared(id_edge);
+        if let Some((_, distance)) = new_focus {
+            if id_distance < distance {
+                new_focus = Some((id, id_distance));
+            }
+        } else {
+            new_focus = Some((id, id_distance));
+        }
+    }
+
+    if let Some((id, _)) = new_focus {
+        app_state.clear_focus();
+        app_state.update_focus(id, true);
+    }
+}

src/view.rs

@@ -396,20 +396,8 @@ pub(crate) fn view_tab_navigation(root_view: &dyn View, app_state: &mut AppState
         }
     };
 
-    let hidden = |app_state: &mut AppState, id: Id| {
-        id.id_path()
-            .unwrap()
-            .dispatch()
-            .iter()
-            .any(|id| app_state.is_hidden(*id))
-    };
-
     let mut new_focus = tree_iter(start);
-    while new_focus != start
-        && (!app_state.keyboard_navigable.contains(&new_focus)
-            || app_state.is_disabled(&new_focus)
-            || hidden(app_state, new_focus))
-    {
+    while new_focus != start && !app_state.can_focus(new_focus) {
         new_focus = tree_iter(new_focus);
     }
 

src/window_handle.rs

@@ -30,6 +30,7 @@ use crate::{
     inspector::{self, Capture, CaptureState, CapturedView},
     keyboard::KeyEvent,
     menu::Menu,
+    nav::view_arrow_navigation,
     pointer::{PointerButton, PointerInputEvent, PointerMoveEvent, PointerWheelEvent},
     style::{CursorStyle, StyleSelector},
     update::{
@@ -189,7 +190,9 @@ impl WindowHandle {
 
                 if !processed {
                     if let Event::KeyDown(KeyEvent { key, modifiers }) = &event {
-                        if key.logical_key == Key::Named(NamedKey::Tab) {
+                        if key.logical_key == Key::Named(NamedKey::Tab)
+                            && (modifiers.is_empty() || *modifiers == ModifiersState::SHIFT)
+                        {
                             let backwards = modifiers.contains(ModifiersState::SHIFT);
                             view_tab_navigation(&self.view, cx.app_state, backwards);
                             // view_debug_tree(&self.view);
@@ -198,6 +201,16 @@ impl WindowHandle {
                             if character.eq_ignore_ascii_case("i") {
                                 // view_debug_tree(&self.view);
                             }
+                        } else if *modifiers == ModifiersState::ALT {
+                            if let Key::Named(
+                                name @ (NamedKey::ArrowUp
+                                | NamedKey::ArrowDown
+                                | NamedKey::ArrowLeft
+                                | NamedKey::ArrowRight),
+                            ) = key.logical_key
+                            {
+                                view_arrow_navigation(name, cx.app_state, &self.view);
+                            }
                         }
                     }