Listen to Hotkeys in Child Windows on the Web (#868)

CryZe · web-flow · commit 78aba86a8b60 · 2025-04-12T15:52:55.000Z
This allows you to add a child window to a hotkey hook on the web,
allowing it to receive hotkey events for the window as well.

Additionally, there's some small changes to the Web Renderer:
- The child canvas elements are relative, but the parent was not marked
  as absolute.
- The parent element is always an HTML element, which was not reflected
  in the type. It's technically also a `div` element, but we don't want
  to guarantee that, since it could be changed in the future. This may
  be the case if we switch to only a single canvas element in the
  future.
diff --git a/capi/src/hotkey_system.rs b/capi/src/hotkey_system.rs
@@ -85,3 +85,18 @@ pub unsafe extern "C" fn HotkeySystem_resolve(
         _ => output_str(name),
     }
 }
+
+#[cfg(all(target_family = "wasm", feature = "wasm-web"))]
+use wasm_bindgen::prelude::*;
+
+/// On the web you can use this to listen to keyboard events on an additional
+/// child window as well.
+#[cfg(all(target_family = "wasm", feature = "wasm-web"))]
+#[wasm_bindgen]
+pub unsafe fn HotkeySystem_add_window(
+    hotkey_system: *const HotkeySystem,
+    window: web_sys::Window,
+) -> bool {
+    // SAFETY: The caller guarantees that `hotkey_system` is valid.
+    unsafe { (*hotkey_system).add_window(window).is_ok() }
+}
diff --git a/capi/src/web_rendering.rs b/capi/src/web_rendering.rs
@@ -3,7 +3,7 @@
 
 use livesplit_core::{layout::LayoutState, rendering::web, settings::ImageCache};
 use wasm_bindgen::prelude::*;
-use web_sys::Element;
+use web_sys::HtmlElement;
 
 /// The web renderer renders into a canvas element. The element can then be
 /// attached anywhere in the DOM with any desired positioning and size.
@@ -30,7 +30,7 @@ impl WebRenderer {
 
     /// Returns the HTML element. This can be attached anywhere in the DOM with
     /// any desired positioning and size.
-    pub fn element(&self) -> Element {
+    pub fn element(&self) -> HtmlElement {
         self.inner.element().clone()
     }
 
@@ -42,8 +42,6 @@ impl WebRenderer {
         image_cache: *const ImageCache,
     ) -> Option<Box<[f32]>> {
         // SAFETY: The caller must ensure that the pointers are valid.
-        unsafe {
-            self.inner.render(&*state, &*image_cache).map(Box::from)
-        }
+        unsafe { self.inner.render(&*state, &*image_cache).map(Box::from) }
     }
 }
diff --git a/crates/livesplit-hotkey/src/lib.rs b/crates/livesplit-hotkey/src/lib.rs
@@ -93,6 +93,13 @@ impl Hook {
     pub fn unregister(&self, hotkey: Hotkey) -> Result<()> {
         self.0.unregister(hotkey)
     }
+
+    /// On the web you can use this to listen to keyboard events on an
+    /// additional child window as well.
+    #[cfg(all(target_family = "wasm", feature = "wasm-web"))]
+    pub fn add_window(&self, window: web_sys::Window) -> Result<()> {
+        self.0.add_window(window)
+    }
 }
 
 /// The result type for this crate.
diff --git a/crates/livesplit-hotkey/src/wasm_web/mod.rs b/crates/livesplit-hotkey/src/wasm_web/mod.rs
@@ -1,7 +1,7 @@
 use crate::{ConsumePreference, Hotkey, KeyCode, Modifiers, Result};
 use js_sys::{Function, Promise, Reflect};
-use wasm_bindgen::{prelude::*, JsCast};
-use web_sys::{window, Event, Gamepad, GamepadButton, KeyboardEvent};
+use wasm_bindgen::{JsCast, prelude::*};
+use web_sys::{Event, Gamepad, GamepadButton, KeyboardEvent, window};
 
 use std::{
     cell::{Cell, RefCell},
@@ -27,7 +27,7 @@ impl fmt::Display for Error {
 
 pub struct Hook {
     hotkeys: Arc<Mutex<HashMap<Hotkey, Box<dyn FnMut() + Send + 'static>>>>,
-    keyboard_callback: Closure<dyn FnMut(Event)>,
+    keyboard_callback: Closure<dyn FnMut(MaybeKeyboardEvent)>,
     gamepad_callback: Closure<dyn FnMut()>,
     interval_id: Cell<Option<i32>>,
     keyboard_layout_resolver: Rc<RefCell<Option<(JsValue, Function)>>>,
@@ -87,49 +87,53 @@ impl Hook {
         let window = window().ok_or(crate::Error::Platform(Error::FailedToCreateHook))?;
 
         let hotkey_map = hotkeys.clone();
-        let keyboard_callback = Closure::wrap(Box::new(move |event: Event| {
+        let keyboard_callback = Closure::wrap(Box::new(move |event: MaybeKeyboardEvent| {
             // Despite all sorts of documentation claiming that `keydown` events
             // pass you a `KeyboardEvent`, this is not actually always the case
             // in browsers. At least in Chrome selecting an element of an
-            // `input` sends a `keydown` event that is not a `KeyboardEvent`.
-            if let Ok(event) = event.dyn_into::<KeyboardEvent>() {
-                if !event.repeat() {
-                    if let Ok(code) = event.code().parse::<KeyCode>() {
-                        let mut modifiers = Modifiers::empty();
-                        if event.shift_key()
-                            && !matches!(code, KeyCode::ShiftLeft | KeyCode::ShiftRight)
-                        {
-                            modifiers.insert(Modifiers::SHIFT);
-                        }
-                        if event.ctrl_key()
-                            && !matches!(code, KeyCode::ControlLeft | KeyCode::ControlRight)
-                        {
-                            modifiers.insert(Modifiers::CONTROL);
-                        }
-                        if event.alt_key() && !matches!(code, KeyCode::AltLeft | KeyCode::AltRight)
-                        {
-                            modifiers.insert(Modifiers::ALT);
-                        }
-                        if event.meta_key()
-                            && !matches!(code, KeyCode::MetaLeft | KeyCode::MetaRight)
-                        {
-                            modifiers.insert(Modifiers::META);
-                        }
+            // `input` sends a `keydown` event that is not a `KeyboardEvent` and
+            // instead just an `Event`. On top of that, child windows all have
+            // their own `KeyboardEvent` class that is not the same as the
+            // `KeyboardEvent` class of the parent window. So we can't use
+            // `dyn_into` and instead define our own `MaybeKeyboardEvent` type
+            // that optionally supports the `repeat` method, allowing us to both
+            // check if the event even looks like a `KeyboardEvent` and then we
+            // proceed based on that.
+            if event.repeat() == Some(false) {
+                let event = event.unchecked_into::<KeyboardEvent>();
 
-                        if let Some(callback) = hotkey_map
-                            .lock()
-                            .unwrap()
-                            .get_mut(&code.with_modifiers(modifiers))
-                        {
-                            callback();
-                            if prevent_default {
-                                event.prevent_default();
-                            }
+                if let Ok(code) = event.code().parse::<KeyCode>() {
+                    let mut modifiers = Modifiers::empty();
+                    if event.shift_key()
+                        && !matches!(code, KeyCode::ShiftLeft | KeyCode::ShiftRight)
+                    {
+                        modifiers.insert(Modifiers::SHIFT);
+                    }
+                    if event.ctrl_key()
+                        && !matches!(code, KeyCode::ControlLeft | KeyCode::ControlRight)
+                    {
+                        modifiers.insert(Modifiers::CONTROL);
+                    }
+                    if event.alt_key() && !matches!(code, KeyCode::AltLeft | KeyCode::AltRight) {
+                        modifiers.insert(Modifiers::ALT);
+                    }
+                    if event.meta_key() && !matches!(code, KeyCode::MetaLeft | KeyCode::MetaRight) {
+                        modifiers.insert(Modifiers::META);
+                    }
+
+                    if let Some(callback) = hotkey_map
+                        .lock()
+                        .unwrap()
+                        .get_mut(&code.with_modifiers(modifiers))
+                    {
+                        callback();
+                        if prevent_default {
+                            event.prevent_default();
                         }
                     }
                 }
             }
-        }) as Box<dyn FnMut(Event)>);
+        }) as Box<dyn FnMut(MaybeKeyboardEvent)>);
 
         window
             .add_event_listener_with_callback("keydown", keyboard_callback.as_ref().unchecked_ref())
@@ -250,4 +254,22 @@ impl Hook {
             .ok()?
             .as_string()
     }
+
+    pub fn add_window(&self, window: web_sys::Window) -> Result<()> {
+        window
+            .add_event_listener_with_callback(
+                "keydown",
+                self.keyboard_callback.as_ref().unchecked_ref(),
+            )
+            .map_err(|_| crate::Error::Platform(Error::FailedToCreateHook))
+    }
+}
+
+#[wasm_bindgen]
+extern "C" {
+    # [wasm_bindgen (extends = Event , extends = :: js_sys :: Object , js_name = KeyboardEvent , typescript_type = "KeyboardEvent")]
+    #[derive(Debug, Clone, PartialEq, Eq)]
+    pub type MaybeKeyboardEvent;
+    # [wasm_bindgen (structural , method , getter , js_class = "KeyboardEvent" , js_name = repeat)]
+    pub fn repeat(this: &MaybeKeyboardEvent) -> Option<bool>;
 }
diff --git a/src/hotkey_system.rs b/src/hotkey_system.rs
@@ -1,9 +1,8 @@
 use alloc::borrow::Cow;
 
 use crate::{
-    event,
+    HotkeyConfig, event,
     hotkey::{ConsumePreference, Hook, Hotkey, KeyCode},
-    HotkeyConfig,
 };
 
 pub use crate::hotkey::Result;
@@ -33,7 +32,7 @@ enum Action {
 }
 
 impl Action {
-    fn set_hotkey(self, config: &mut HotkeyConfig, hotkey: Option<Hotkey>) {
+    const fn set_hotkey(self, config: &mut HotkeyConfig, hotkey: Option<Hotkey>) {
         match self {
             Action::Split => config.split = hotkey,
             Action::Reset => config.reset = hotkey,
@@ -288,4 +287,11 @@ impl<S: event::CommandSink + Clone + Send + 'static> HotkeySystem<S> {
     pub fn resolve(&self, key_code: KeyCode) -> Cow<'static, str> {
         key_code.resolve(&self.hook)
     }
+
+    /// On the web you can use this to listen to keyboard events on an
+    /// additional child window as well.
+    #[cfg(all(target_family = "wasm", feature = "wasm-web"))]
+    pub fn add_window(&self, window: web_sys::Window) -> Result<()> {
+        self.hook.add_window(window)
+    }
 }
diff --git a/src/rendering/web/mod.rs b/src/rendering/web/mod.rs
@@ -14,7 +14,7 @@ use std::{
 };
 use wasm_bindgen::{JsCast, JsValue};
 use wasm_bindgen_futures::JsFuture;
-use web_sys::{Blob, Element, HtmlCanvasElement, ImageBitmap, Path2d, Window};
+use web_sys::{Blob, HtmlCanvasElement, HtmlElement, ImageBitmap, Path2d, Window};
 
 use crate::{
     layout::LayoutState,
@@ -478,7 +478,7 @@ impl FontHandling {
 /// attached anywhere in the DOM with any desired positioning and size.
 pub struct Renderer {
     manager: SceneManager<Path, Image, Rc<CanvasFont>, CanvasLabel>,
-    div: Element,
+    div: HtmlElement,
     allocator: CanvasAllocator,
     canvas_bottom: HtmlCanvasElement,
     canvas_top: HtmlCanvasElement,
@@ -623,7 +623,9 @@ impl Renderer {
         let window = web_sys::window().unwrap();
         let document = window.document().unwrap();
 
-        let div = document.create_element("div").unwrap();
+        let div: HtmlElement = document.create_element("div").unwrap().unchecked_into();
+
+        div.set_attribute("style", "position: relative;").unwrap();
 
         let canvas_bottom: HtmlCanvasElement =
             document.create_element("canvas").unwrap().unchecked_into();
@@ -689,7 +691,7 @@ impl Renderer {
 
     /// Returns the HTML element. This can be attached anywhere in the DOM with
     /// any desired positioning and size.
-    pub const fn element(&self) -> &Element {
+    pub const fn element(&self) -> &HtmlElement {
         &self.div
     }
 

Original file line number	Diff line number	Diff line change
`@@ -93,6 +93,13 @@ impl Hook {`
`93`	`93`	`pub fn unregister(&self, hotkey: Hotkey) -> Result<()> {`
`94`	`94`	`self.0.unregister(hotkey)`
`95`	`95`	`}`
	`96`	`+`
	`97`	`+ /// On the web you can use this to listen to keyboard events on an`
	`98`	`+ /// additional child window as well.`
	`99`	`+ #[cfg(all(target_family = "wasm", feature = "wasm-web"))]`
	`100`	`+ pub fn add_window(&self, window: web_sys::Window) -> Result<()> {`
	`101`	`+ self.0.add_window(window)`
	`102`	`+ }`
`96`	`103`	`}`
`97`	`104`
`98`	`105`	`/// The result type for this crate.`