Web touch event (#2188)

* feat: add pointer events to web

* feat: remove PointerType for touch events

* Remove duplicate

* Changelog and features

* Remove PointerType

* feat: renamed events, added touch type guard

* Rename

* Flip the y axis

* Fix physical position and add force

* Update comment

* Update features

* Use normalized force

* Remove unnecessary todos

* Update comment

* Refactor add touch_handler

* Rephrase by Liamolucko

* Update CHANGELOG.md

* Fix duplicate mouse and touch events

* Removed workaround for scale factor

* Flip the y axis

* Fix

* Fmt

* Replace `match` with a single pattern with `if let`

* Update documentation

* Have one callback per event

* Remove a comment

* Fix

* Remove y-axis flip

* Update src/event.rs

Co-authored-by: Mads Marquart <mads@marquart.dk>

* Fix platform specific comment

* Fix extra argument to `touch_position` function

Co-authored-by: Dany Sluijk <me@dany.dev>
Co-authored-by: Johan Klokkhammer Helsing <johanhelsing@gmail.com>
Co-authored-by: oscrim <oscar@widefind.se>
Co-authored-by: Mads Marquart <mads@marquart.dk>

src/platform_impl/web/web_sys/canvas.rs

@@ -3,7 +3,9 @@ use super::event_handle::EventListenerHandle;
 use super::media_query_handle::MediaQueryListHandle;
 use crate::dpi::{LogicalPosition, PhysicalPosition, PhysicalSize};
 use crate::error::OsError as RootOE;
-use crate::event::{ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode};
+use crate::event::{
+    Force, ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode,
+};
 use crate::platform_impl::{OsError, PlatformSpecificWindowBuilderAttributes};
 
 use std::cell::RefCell;
@@ -262,35 +264,55 @@ impl Canvas {
         }
     }
 
-    pub fn on_mouse_release<F>(&mut self, handler: F)
+    pub fn on_mouse_release<M, T>(&mut self, mouse_handler: M, touch_handler: T)
     where
-        F: 'static + FnMut(i32, MouseButton, ModifiersState),
-    {
-        match &mut self.mouse_state {
-            MouseState::HasPointerEvent(h) => h.on_mouse_release(&self.common, handler),
-            MouseState::NoPointerEvent(h) => h.on_mouse_release(&self.common, handler),
-        }
-    }
-
-    pub fn on_mouse_press<F>(&mut self, handler: F)
-    where
-        F: 'static + FnMut(i32, PhysicalPosition<f64>, MouseButton, ModifiersState),
-    {
-        match &mut self.mouse_state {
-            MouseState::HasPointerEvent(h) => h.on_mouse_press(&self.common, handler),
-            MouseState::NoPointerEvent(h) => h.on_mouse_press(&self.common, handler),
-        }
-    }
-
-    pub fn on_cursor_move<F>(&mut self, handler: F, prevent_default: bool)
-    where
-        F: 'static + FnMut(i32, PhysicalPosition<f64>, PhysicalPosition<f64>, ModifiersState),
+        M: 'static + FnMut(i32, MouseButton, ModifiersState),
+        T: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
     {
         match &mut self.mouse_state {
             MouseState::HasPointerEvent(h) => {
-                h.on_cursor_move(&self.common, handler, prevent_default)
+                h.on_mouse_release(&self.common, mouse_handler, touch_handler)
             }
-            MouseState::NoPointerEvent(h) => h.on_cursor_move(&self.common, handler),
+            MouseState::NoPointerEvent(h) => h.on_mouse_release(&self.common, mouse_handler),
+        }
+    }
+
+    pub fn on_mouse_press<M, T>(&mut self, mouse_handler: M, touch_handler: T)
+    where
+        M: 'static + FnMut(i32, PhysicalPosition<f64>, MouseButton, ModifiersState),
+        T: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => {
+                h.on_mouse_press(&self.common, mouse_handler, touch_handler)
+            }
+            MouseState::NoPointerEvent(h) => h.on_mouse_press(&self.common, mouse_handler),
+        }
+    }
+
+    pub fn on_cursor_move<M, T>(
+        &mut self,
+        mouse_handler: M,
+        touch_handler: T,
+        prevent_default: bool,
+    ) where
+        M: 'static + FnMut(i32, PhysicalPosition<f64>, PhysicalPosition<f64>, ModifiersState),
+        T: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => {
+                h.on_cursor_move(&self.common, mouse_handler, touch_handler, prevent_default)
+            }
+            MouseState::NoPointerEvent(h) => h.on_cursor_move(&self.common, mouse_handler),
+        }
+    }
+
+    pub fn on_touch_cancel<F>(&mut self, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        if let MouseState::HasPointerEvent(h) = &mut self.mouse_state {
+            h.on_touch_cancel(&self.common, handler)
         }
     }
 
@@ -451,6 +473,7 @@ impl Common {
     }
 }
 
+/// Pointer events are supported or not.
 enum MouseState {
     HasPointerEvent(pointer_handler::PointerHandler),
     NoPointerEvent(mouse_handler::MouseHandler),

src/platform_impl/web/web_sys/canvas/pointer_handler.rs

@@ -1,6 +1,7 @@
 use super::event;
 use super::EventListenerHandle;
 use crate::dpi::PhysicalPosition;
+use crate::event::Force;
 use crate::event::{ModifiersState, MouseButton};
 
 use web_sys::PointerEvent;
@@ -12,6 +13,7 @@ pub(super) struct PointerHandler {
     on_cursor_move: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
     on_pointer_press: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
     on_pointer_release: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_touch_cancel: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
 }
 
 impl PointerHandler {
@@ -22,6 +24,7 @@ impl PointerHandler {
             on_cursor_move: None,
             on_pointer_press: None,
             on_pointer_release: None,
+            on_touch_cancel: None,
         }
     }
 
@@ -32,6 +35,13 @@ impl PointerHandler {
         self.on_cursor_leave = Some(canvas_common.add_event(
             "pointerout",
             move |event: PointerEvent| {
+                // touch events are handled separately
+                // handling them here would produce duplicate mouse events, inconsistent with
+                // other platforms.
+                if event.pointer_type() == "touch" {
+                    return;
+                }
+
                 handler(event.pointer_id());
             },
         ));
@@ -44,70 +54,139 @@ impl PointerHandler {
         self.on_cursor_enter = Some(canvas_common.add_event(
             "pointerover",
             move |event: PointerEvent| {
+                // touch events are handled separately
+                // handling them here would produce duplicate mouse events, inconsistent with
+                // other platforms.
+                if event.pointer_type() == "touch" {
+                    return;
+                }
+
                 handler(event.pointer_id());
             },
         ));
     }
 
-    pub fn on_mouse_release<F>(&mut self, canvas_common: &super::Common, mut handler: F)
-    where
-        F: 'static + FnMut(i32, MouseButton, ModifiersState),
+    pub fn on_mouse_release<M, T>(
+        &mut self,
+        canvas_common: &super::Common,
+        mut mouse_handler: M,
+        mut touch_handler: T,
+    ) where
+        M: 'static + FnMut(i32, MouseButton, ModifiersState),
+        T: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
     {
+        let canvas = canvas_common.raw.clone();
         self.on_pointer_release = Some(canvas_common.add_user_event(
             "pointerup",
             move |event: PointerEvent| {
-                handler(
-                    event.pointer_id(),
-                    event::mouse_button(&event),
-                    event::mouse_modifiers(&event),
-                );
+                if event.pointer_type() == "touch" {
+                    touch_handler(
+                        event.pointer_id(),
+                        event::touch_position(&event, &canvas)
+                            .to_physical(super::super::scale_factor()),
+                        Force::Normalized(event.pressure() as f64),
+                    );
+                } else {
+                    mouse_handler(
+                        event.pointer_id(),
+                        event::mouse_button(&event),
+                        event::mouse_modifiers(&event),
+                    );
+                }
             },
         ));
     }
 
-    pub fn on_mouse_press<F>(&mut self, canvas_common: &super::Common, mut handler: F)
-    where
-        F: 'static + FnMut(i32, PhysicalPosition<f64>, MouseButton, ModifiersState),
+    pub fn on_mouse_press<M, T>(
+        &mut self,
+        canvas_common: &super::Common,
+        mut mouse_handler: M,
+        mut touch_handler: T,
+    ) where
+        M: 'static + FnMut(i32, PhysicalPosition<f64>, MouseButton, ModifiersState),
+        T: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
     {
         let canvas = canvas_common.raw.clone();
         self.on_pointer_press = Some(canvas_common.add_user_event(
             "pointerdown",
             move |event: PointerEvent| {
-                handler(
-                    event.pointer_id(),
-                    event::mouse_position(&event).to_physical(super::super::scale_factor()),
-                    event::mouse_button(&event),
-                    event::mouse_modifiers(&event),
-                );
+                if event.pointer_type() == "touch" {
+                    touch_handler(
+                        event.pointer_id(),
+                        event::touch_position(&event, &canvas)
+                            .to_physical(super::super::scale_factor()),
+                        Force::Normalized(event.pressure() as f64),
+                    );
+                } else {
+                    mouse_handler(
+                        event.pointer_id(),
+                        event::mouse_position(&event).to_physical(super::super::scale_factor()),
+                        event::mouse_button(&event),
+                        event::mouse_modifiers(&event),
+                    );
 
-                // Error is swallowed here since the error would occur every time the mouse is
-                // clicked when the cursor is grabbed, and there is probably not a situation where
-                // this could fail, that we care if it fails.
-                let _e = canvas.set_pointer_capture(event.pointer_id());
+                    // Error is swallowed here since the error would occur every time the mouse is
+                    // clicked when the cursor is grabbed, and there is probably not a situation where
+                    // this could fail, that we care if it fails.
+                    let _e = canvas.set_pointer_capture(event.pointer_id());
+                }
             },
         ));
     }
 
-    pub fn on_cursor_move<F>(
+    pub fn on_cursor_move<M, T>(
         &mut self,
         canvas_common: &super::Common,
-        mut handler: F,
+        mut mouse_handler: M,
+        mut touch_handler: T,
         prevent_default: bool,
     ) where
-        F: 'static + FnMut(i32, PhysicalPosition<f64>, PhysicalPosition<f64>, ModifiersState),
+        M: 'static + FnMut(i32, PhysicalPosition<f64>, PhysicalPosition<f64>, ModifiersState),
+        T: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
     {
+        let canvas = canvas_common.raw.clone();
         self.on_cursor_move = Some(canvas_common.add_event(
             "pointermove",
             move |event: PointerEvent| {
-                if prevent_default {
-                    event.prevent_default();
+                if event.pointer_type() == "touch" {
+                    if prevent_default {
+                        // prevent scroll on mobile web
+                        event.prevent_default();
+                    }
+                    touch_handler(
+                        event.pointer_id(),
+                        event::touch_position(&event, &canvas)
+                            .to_physical(super::super::scale_factor()),
+                        Force::Normalized(event.pressure() as f64),
+                    );
+                } else {
+                    mouse_handler(
+                        event.pointer_id(),
+                        event::mouse_position(&event).to_physical(super::super::scale_factor()),
+                        event::mouse_delta(&event).to_physical(super::super::scale_factor()),
+                        event::mouse_modifiers(&event),
+                    );
+                }
+            },
+        ));
+    }
+
+    pub fn on_touch_cancel<F>(&mut self, canvas_common: &super::Common, mut handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        let canvas = canvas_common.raw.clone();
+        self.on_touch_cancel = Some(canvas_common.add_event(
+            "pointercancel",
+            move |event: PointerEvent| {
+                if event.pointer_type() == "touch" {
+                    handler(
+                        event.pointer_id(),
+                        event::touch_position(&event, &canvas)
+                            .to_physical(super::super::scale_factor()),
+                        Force::Normalized(event.pressure() as f64),
+                    );
                 }
-                handler(
-                    event.pointer_id(),
-                    event::mouse_position(&event).to_physical(super::super::scale_factor()),
-                    event::mouse_delta(&event).to_physical(super::super::scale_factor()),
-                    event::mouse_modifiers(&event),
-                );
             },
         ));
     }
@@ -118,5 +197,6 @@ impl PointerHandler {
         self.on_cursor_move = None;
         self.on_pointer_press = None;
         self.on_pointer_release = None;
+        self.on_touch_cancel = None;
     }
 }

src/platform_impl/web/web_sys/event.rs

@@ -2,7 +2,7 @@ use crate::dpi::LogicalPosition;
 use crate::event::{ModifiersState, MouseButton, MouseScrollDelta, ScanCode, VirtualKeyCode};
 
 use std::convert::TryInto;
-use web_sys::{HtmlCanvasElement, KeyboardEvent, MouseEvent, WheelEvent};
+use web_sys::{HtmlCanvasElement, KeyboardEvent, MouseEvent, PointerEvent, WheelEvent};
 
 pub fn mouse_button(event: &MouseEvent) -> MouseButton {
     match event.button() {
@@ -246,3 +246,11 @@ pub fn codepoint(event: &KeyboardEvent) -> char {
     // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
     event.key().chars().next().unwrap()
 }
+
+pub fn touch_position(event: &PointerEvent, _canvas: &HtmlCanvasElement) -> LogicalPosition<f64> {
+    // TODO: Should this handle more, like `mouse_position_by_client` does?
+    LogicalPosition {
+        x: event.client_x() as f64,
+        y: event.client_y() as f64,
+    }
+}