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>

CHANGELOG.md

@@ -8,6 +8,7 @@ And please only add new entries to the top of this list, right below the `# Unre
 
 # Unreleased
 
+- **Breaking:** On Web, touch input no longer fires `WindowEvent::Cursor*`, `WindowEvent::MouseInput`, or `DeviceEvent::MouseMotion` like other platforms, but instead it fires `WindowEvent::Touch`.
 - **Breaking:** Removed platform specific `WindowBuilder::with_parent` API in favor of `WindowBuilder::with_parent_window`.
 - On Windows, retain `WS_MAXIMIZE` window style when un-minimizing a maximized window.
 - On Windows, fix left mouse button release event not being sent after `Window::drag_window`.

FEATURES.md

@@ -205,8 +205,8 @@ Legend:
 |Cursor confining        |✔️       |❌      |✔️       |✔️          |**N/A**|**N/A**|❌       |
 |Cursor icon             |✔️       |✔️      |✔️       |✔️          |**N/A**|**N/A**|✔️        |
 |Cursor hittest          |✔️       |✔️      |❌       |✔️          |**N/A**|**N/A**|❌        |
-|Touch events            |✔️       |❌      |✔️       |✔️          |✔️    |✔️     |❌        |
-|Touch pressure          |✔️       |❌      |❌       |❌          |❌    |✔️     |❌        |
+|Touch events            |✔️       |❌      |✔️       |✔️          |✔️    |✔️     |️✔️        |
+|Touch pressure          |✔️       |❌      |❌       |❌          |❌    |✔️     |️✔️        |
 |Multitouch              |✔️       |❌      |✔️       |✔️          |✔️    |✔️     |❌        |
 |Keyboard events         |✔️       |✔️      |✔️       |✔️          |✔️    |❌     |✔️        |
 |Drag & Drop             |▢[#720]  |▢[#720] |▢[#720]  |❌[#306]    |**N/A**|**N/A**|❓        |

src/event.rs

@@ -477,6 +477,10 @@ pub enum WindowEvent<'a> {
     },
 
     /// Touch event has been received
+    ///
+    /// ## Platform-specific
+    ///
+    /// - **macOS:** Unsupported.
     Touch(Touch),
 
     /// The window's scale factor has changed.
@@ -924,6 +928,10 @@ pub enum TouchPhase {
 /// A [`TouchPhase::Cancelled`] event is emitted when the system has canceled tracking this
 /// touch, such as when the window loses focus, or on iOS if the user moves the
 /// device against their face.
+///
+/// ## Platform-specific
+///
+/// - **macOS:** Unsupported.
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct Touch {
     pub device_id: DeviceId,

src/platform_impl/web/event_loop/window_target.rs

@@ -11,7 +11,7 @@ use super::{
 };
 use crate::dpi::{PhysicalSize, Size};
 use crate::event::{
-    DeviceEvent, DeviceId as RootDeviceId, ElementState, Event, KeyboardInput, TouchPhase,
+    DeviceEvent, DeviceId as RootDeviceId, ElementState, Event, KeyboardInput, Touch, TouchPhase,
     WindowEvent,
 };
 use crate::window::{Theme, WindowId as RootWindowId};
@@ -154,6 +154,7 @@ impl<T> EventLoopWindowTarget<T> {
         });
 
         let runner = self.runner.clone();
+        let runner_touch = self.runner.clone();
         canvas.on_cursor_move(
             move |pointer_id, position, delta, modifiers| {
                 runner.send_event(Event::WindowEvent {
@@ -171,11 +172,25 @@ impl<T> EventLoopWindowTarget<T> {
                     },
                 });
             },
+            move |device_id, location, force| {
+                runner_touch.send_event(Event::WindowEvent {
+                    window_id: RootWindowId(id),
+                    event: WindowEvent::Touch(Touch {
+                        id: device_id as u64,
+                        device_id: RootDeviceId(DeviceId(device_id)),
+                        phase: TouchPhase::Moved,
+                        force: Some(force),
+                        location,
+                    }),
+                });
+            },
             prevent_default,
         );
 
         let runner = self.runner.clone();
-        canvas.on_mouse_press(move |pointer_id, position, button, modifiers| {
+        let runner_touch = self.runner.clone();
+        canvas.on_mouse_press(
+            move |pointer_id, position, button, modifiers| {
                 // A mouse down event may come in without any prior CursorMoved events,
                 // therefore we should send a CursorMoved event to make sure that the
                 // user code has the correct cursor position.
@@ -202,10 +217,25 @@ impl<T> EventLoopWindowTarget<T> {
                         },
                     })),
                 );
+            },
+            move |device_id, location, force| {
+                runner_touch.send_event(Event::WindowEvent {
+                    window_id: RootWindowId(id),
+                    event: WindowEvent::Touch(Touch {
+                        id: device_id as u64,
+                        device_id: RootDeviceId(DeviceId(device_id)),
+                        phase: TouchPhase::Started,
+                        force: Some(force),
+                        location,
+                    }),
                 });
+            },
+        );
 
         let runner = self.runner.clone();
-        canvas.on_mouse_release(move |pointer_id, button, modifiers| {
+        let runner_touch = self.runner.clone();
+        canvas.on_mouse_release(
+            move |pointer_id, button, modifiers| {
                 runner.send_event(Event::WindowEvent {
                     window_id: RootWindowId(id),
                     event: WindowEvent::MouseInput {
@@ -215,7 +245,20 @@ impl<T> EventLoopWindowTarget<T> {
                         modifiers,
                     },
                 });
+            },
+            move |device_id, location, force| {
+                runner_touch.send_event(Event::WindowEvent {
+                    window_id: RootWindowId(id),
+                    event: WindowEvent::Touch(Touch {
+                        id: device_id as u64,
+                        device_id: RootDeviceId(DeviceId(device_id)),
+                        phase: TouchPhase::Ended,
+                        force: Some(force),
+                        location,
+                    }),
                 });
+            },
+        );
 
         let runner = self.runner.clone();
         canvas.on_mouse_wheel(
@@ -263,6 +306,20 @@ impl<T> EventLoopWindowTarget<T> {
             runner.request_redraw(RootWindowId(id));
         });
 
+        let runner = self.runner.clone();
+        canvas.on_touch_cancel(move |device_id, location, force| {
+            runner.send_event(Event::WindowEvent {
+                window_id: RootWindowId(id),
+                event: WindowEvent::Touch(Touch {
+                    id: device_id as u64,
+                    device_id: RootDeviceId(DeviceId(device_id)),
+                    phase: TouchPhase::Cancelled,
+                    force: Some(force),
+                    location,
+                }),
+            });
+        });
+
         let runner = self.runner.clone();
         canvas.on_dark_mode(move |is_dark_mode| {
             let theme = if is_dark_mode {

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,36 +54,71 @@ 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(
+                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(
+                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),
@@ -84,30 +129,64 @@ impl PointerHandler {
                     // 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 event.pointer_type() == "touch" {
                     if prevent_default {
+                        // prevent scroll on mobile web
                         event.prevent_default();
                     }
-                handler(
+                    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),
+                    );
+                }
             },
         ));
     }
@@ -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,
+    }
+}