Implement web_sys::Canvas event listeners

src/platform_impl/web/web_sys/canvas.rs

@@ -1,12 +1,20 @@
-use crate::dpi::LogicalSize;
+use super::event;
+use crate::dpi::{LogicalPosition, LogicalSize};
 use crate::error::OsError as RootOE;
+use crate::event::{ModifiersState, MouseButton, MouseScrollDelta};
 use crate::platform_impl::OsError;
 
-use wasm_bindgen::JsCast;
-use web_sys::HtmlCanvasElement;
+use wasm_bindgen::{closure::Closure, JsCast};
+use web_sys::{HtmlCanvasElement, PointerEvent, WheelEvent};
 
 pub struct Canvas {
     raw: HtmlCanvasElement,
+    on_mouse_out: Option<Closure<dyn FnMut(PointerEvent)>>,
+    on_mouse_over: Option<Closure<dyn FnMut(PointerEvent)>>,
+    on_mouse_up: Option<Closure<dyn FnMut(PointerEvent)>>,
+    on_mouse_down: Option<Closure<dyn FnMut(PointerEvent)>>,
+    on_mouse_move: Option<Closure<dyn FnMut(PointerEvent)>>,
+    on_mouse_scroll: Option<Closure<dyn FnMut(WheelEvent)>>,
 }
 
 impl Canvas {
@@ -25,7 +33,15 @@ impl Canvas {
             .append_child(&canvas)
             .map_err(|_| os_error!(OsError("Failed to append canvas".to_owned())))?;
 
-        Ok(Canvas { raw: canvas })
+        Ok(Canvas {
+            raw: canvas,
+            on_mouse_out: None,
+            on_mouse_over: None,
+            on_mouse_up: None,
+            on_mouse_down: None,
+            on_mouse_move: None,
+            on_mouse_scroll: None,
+        })
     }
 
     pub fn set_attribute(&self, attribute: &str, value: &str) {
@@ -53,14 +69,98 @@ impl Canvas {
         self.raw.set_height(size.height as u32);
     }
 
-    pub fn raw(&self) -> HtmlCanvasElement {
-        self.raw.clone()
+    pub fn raw(&self) -> &HtmlCanvasElement {
+        &self.raw
     }
 
-    pub fn on_mouse_out<F>(&self, f: F) {}
-    pub fn on_mouse_over<F>(&self, f: F) {}
-    pub fn on_mouse_up<F>(&self, f: F) {}
-    pub fn on_mouse_down<F>(&self, f: F) {}
-    pub fn on_mouse_move<F>(&self, f: F) {}
-    pub fn on_mouse_scroll<F>(&self, f: F) {}
+    pub fn on_mouse_out<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(i32),
+    {
+        self.on_mouse_out = Some(self.add_event("pointerout", move |event: PointerEvent| {
+            handler(event.pointer_id());
+        }));
+    }
+
+    pub fn on_mouse_over<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(i32),
+    {
+        self.on_mouse_over = Some(self.add_event("pointerover", move |event: PointerEvent| {
+            handler(event.pointer_id());
+        }));
+    }
+
+    pub fn on_mouse_up<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(i32, MouseButton, ModifiersState),
+    {
+        self.on_mouse_up = Some(self.add_event("pointerup", move |event: PointerEvent| {
+            handler(
+                event.pointer_id(),
+                event::mouse_button(&event),
+                event::mouse_modifiers(&event),
+            );
+        }));
+    }
+
+    pub fn on_mouse_down<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(i32, MouseButton, ModifiersState),
+    {
+        self.on_mouse_down = Some(self.add_event("pointerdown", move |event: PointerEvent| {
+            handler(
+                event.pointer_id(),
+                event::mouse_button(&event),
+                event::mouse_modifiers(&event),
+            );
+        }));
+    }
+
+    pub fn on_mouse_move<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(i32, LogicalPosition, ModifiersState),
+    {
+        self.on_mouse_move = Some(self.add_event("pointermove", move |event: PointerEvent| {
+            handler(
+                event.pointer_id(),
+                event::mouse_position(&event),
+                event::mouse_modifiers(&event),
+            );
+        }));
+    }
+
+    pub fn on_mouse_scroll<F>(&mut self, mut handler: F)
+    where
+        F: 'static + FnMut(i32, MouseScrollDelta, ModifiersState),
+    {
+        self.on_mouse_scroll = Some(self.add_event("wheel", move |event: WheelEvent| {
+            if let Some(delta) = event::mouse_scroll_delta(&event) {
+                handler(0, delta, event::mouse_modifiers(&event));
+            }
+        }));
+    }
+
+    fn add_event<E, F>(&self, event_name: &str, mut handler: F) -> Closure<FnMut(E)>
+    where
+        E: 'static + AsRef<web_sys::Event> + wasm_bindgen::convert::FromWasmAbi,
+        F: 'static + FnMut(E),
+    {
+        let closure = Closure::wrap(Box::new(move |event: E| {
+            {
+                let event_ref = event.as_ref();
+                event_ref.prevent_default();
+                event_ref.stop_propagation();
+                event_ref.cancel_bubble();
+            }
+
+            handler(event);
+        }) as Box<dyn FnMut(E)>);
+
+        self.raw
+            .add_event_listener_with_callback(event_name, &closure.as_ref().unchecked_ref())
+            .expect("Failed to add event listener with callback");
+
+        closure
+    }
 }

src/platform_impl/web/web_sys/event.rs

@@ -0,0 +1,41 @@
+use crate::dpi::LogicalPosition;
+use crate::event::{ModifiersState, MouseButton, MouseScrollDelta};
+
+use std::convert::TryInto;
+use web_sys::{MouseEvent, WheelEvent};
+
+pub fn mouse_button(event: &MouseEvent) -> MouseButton {
+    match event.button() {
+        0 => MouseButton::Left,
+        1 => MouseButton::Middle,
+        2 => MouseButton::Right,
+        i => MouseButton::Other((i - 3).try_into().expect("very large mouse button value")),
+    }
+}
+
+pub fn mouse_modifiers(event: &MouseEvent) -> ModifiersState {
+    ModifiersState {
+        shift: event.shift_key(),
+        ctrl: event.ctrl_key(),
+        alt: event.alt_key(),
+        logo: event.meta_key(),
+    }
+}
+
+pub fn mouse_position(event: &MouseEvent) -> LogicalPosition {
+    LogicalPosition {
+        x: event.offset_x() as f64,
+        y: event.offset_y() as f64,
+    }
+}
+
+pub fn mouse_scroll_delta(event: &WheelEvent) -> Option<MouseScrollDelta> {
+    let x = event.delta_x();
+    let y = event.delta_y();
+
+    match event.delta_mode() {
+        WheelEvent::DOM_DELTA_LINE => Some(MouseScrollDelta::LineDelta(x as f32, y as f32)),
+        WheelEvent::DOM_DELTA_PIXEL => Some(MouseScrollDelta::PixelDelta(LogicalPosition { x, y })),
+        _ => None,
+    }
+}

src/platform_impl/web/web_sys/mod.rs

@@ -1,11 +1,16 @@
 mod canvas;
 mod document;
+mod event;
 mod timeout;
 
 pub use self::canvas::Canvas;
 pub use self::document::Document;
 pub use self::timeout::Timeout;
 
+use crate::platform::web::WindowExtWebSys;
+use crate::window::Window;
+use web_sys::HtmlCanvasElement;
+
 pub fn request_animation_frame<F>(f: F)
 where
     F: Fn(),
@@ -15,3 +20,9 @@ where
 pub fn throw(msg: &str) {
     wasm_bindgen::throw_str(msg);
 }
+
+impl WindowExtWebSys for Window {
+    fn canvas(&self) -> HtmlCanvasElement {
+        self.window.canvas().raw().clone()
+    }
+}

src/platform_impl/web/web_sys/timeout.rs

@@ -1,12 +1,40 @@
 use std::time::Duration;
+use wasm_bindgen::closure::Closure;
+use wasm_bindgen::JsCast;
 
-#[derive(Debug, Clone, Copy)]
-pub struct Timeout {}
+#[derive(Debug)]
+pub struct Timeout {
+    handle: i32,
+    _closure: Closure<FnMut()>,
+}
 
 impl Timeout {
-    pub fn new<F>(f: F, duration: Duration) -> Timeout {
-        Timeout {}
-    }
+    pub fn new<F>(f: F, duration: Duration) -> Timeout
+    where
+        F: 'static + FnMut(),
+    {
+        let window = web_sys::window().expect("Failed to obtain window");
 
-    pub fn clear(self) {}
+        let closure = Closure::wrap(Box::new(f) as Box<dyn FnMut()>);
+
+        let handle = window
+            .set_timeout_with_callback_and_timeout_and_arguments_0(
+                &closure.as_ref().unchecked_ref(),
+                duration.as_millis() as i32,
+            )
+            .expect("Failed to set timeout");
+
+        Timeout {
+            handle,
+            _closure: closure,
+        }
+    }
+}
+
+impl Drop for Timeout {
+    fn drop(&mut self) {
+        let window = web_sys::window().expect("Failed to obtain window");
+
+        window.clear_timeout_with_handle(self.handle);
+    }
 }