Implement keyboard and blur/focus events

src/platform_impl/web/web_sys/canvas.rs

@@ -1,15 +1,19 @@
 use super::event;
 use crate::dpi::{LogicalPosition, LogicalSize};
 use crate::error::OsError as RootOE;
-use crate::event::{ModifiersState, MouseButton, MouseScrollDelta};
+use crate::event::{ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode};
 use crate::platform_impl::OsError;
 
 use wasm_bindgen::{closure::Closure, JsCast};
-use web_sys::{HtmlCanvasElement, PointerEvent, WheelEvent};
+use web_sys::{FocusEvent, HtmlCanvasElement, KeyboardEvent, PointerEvent, WheelEvent};
 
 pub struct Canvas {
     raw: HtmlCanvasElement,
     on_redraw: Closure<dyn Fn()>,
+    on_focus: Option<Closure<dyn FnMut(FocusEvent)>>,
+    on_blur: Option<Closure<dyn FnMut(FocusEvent)>>,
+    on_key_up: Option<Closure<dyn FnMut(KeyboardEvent)>>,
+    on_key_down: Option<Closure<dyn FnMut(KeyboardEvent)>>,
     on_mouse_out: Option<Closure<dyn FnMut(PointerEvent)>>,
     on_mouse_over: Option<Closure<dyn FnMut(PointerEvent)>>,
     on_mouse_up: Option<Closure<dyn FnMut(PointerEvent)>>,
@@ -43,9 +47,18 @@ impl Canvas {
             .append_child(&canvas)
             .map_err(|_| os_error!(OsError("Failed to append canvas".to_owned())))?;
 
+        // TODO: Set up unique ids
+        canvas
+            .set_attribute("tabindex", "0")
+            .expect("Failed to set a tabindex");
+
         Ok(Canvas {
             raw: canvas,
             on_redraw: Closure::wrap(Box::new(on_redraw) as Box<dyn Fn()>),
+            on_blur: None,
+            on_focus: None,
+            on_key_up: None,
+            on_key_down: None,
             on_mouse_out: None,
             on_mouse_over: None,
             on_mouse_up: None,
@@ -86,7 +99,53 @@ impl Canvas {
 
     pub fn request_redraw(&self) {
         let window = web_sys::window().expect("Failed to obtain window");
-        window.request_animation_frame(&self.on_redraw.as_ref().unchecked_ref());
+        window
+            .request_animation_frame(&self.on_redraw.as_ref().unchecked_ref())
+            .expect("Failed to request animation frame");
+    }
+
+    pub fn on_blur<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.on_blur = Some(self.add_event("blur", move |_: FocusEvent| {
+            handler();
+        }));
+    }
+
+    pub fn on_focus<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(),
+    {
+        self.on_focus = Some(self.add_event("focus", move |_: FocusEvent| {
+            handler();
+        }));
+    }
+
+    pub fn on_key_up<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(ScanCode, Option<VirtualKeyCode>, ModifiersState),
+    {
+        self.on_key_up = Some(self.add_event("keyup", move |event: KeyboardEvent| {
+            handler(
+                event::scan_code(&event),
+                event::virtual_key_code(&event),
+                event::keyboard_modifiers(&event),
+            );
+        }));
+    }
+
+    pub fn on_key_down<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(ScanCode, Option<VirtualKeyCode>, ModifiersState),
+    {
+        self.on_key_down = Some(self.add_event("keydown", move |event: KeyboardEvent| {
+            handler(
+                event::scan_code(&event),
+                event::virtual_key_code(&event),
+                event::keyboard_modifiers(&event),
+            );
+        }));
     }
 
     pub fn on_mouse_out<F>(&mut self, mut handler: F)
@@ -124,7 +183,14 @@ impl Canvas {
     where
         F: 'static + FnMut(i32, MouseButton, ModifiersState),
     {
+        let canvas = self.raw.clone();
+
         self.on_mouse_down = Some(self.add_event("pointerdown", move |event: PointerEvent| {
+            // We focus the canvas manually when the user clicks on it.
+            // This is necessary because we are preventing the default event behavior
+            // in `add_event`
+            canvas.focus().expect("Failed to focus canvas");
+
             handler(
                 event.pointer_id(),
                 event::mouse_button(&event),