Web touch event

CHANGELOG.md

@@ -8,6 +8,7 @@ And please only add new entries to the top of this list, right below the `# Unre
 
 # Unreleased
 
+- On Web, add support for touch events.
 - On Wayland, fix bug where the cursor wouldn't hide in GNOME.
 - On macOS, Windows, and Wayland, add `set_cursor_hittest` to let the window ignore mouse events.
 - On Windows, added `WindowExtWindows::set_skip_taskbar` and `WindowBuilderExtWindows::with_skip_taskbar`.

FEATURES.md

@@ -201,8 +201,8 @@ Legend:
 |Cursor grab             |✔️       |▢[#165] |▢[#242]  |✔️         |**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/platform_impl/web/event_loop/window_target.rs

@@ -4,7 +4,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::event_loop::ControlFlow;
@@ -235,6 +235,62 @@ impl<T> EventLoopWindowTarget<T> {
             runner.request_redraw(RootWindowId(id));
         });
 
+        let runner = self.runner.clone();
+        canvas.on_touch_move(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::Moved,
+                    force: Some(force),
+                    location,
+                }),
+            });
+        });
+
+        let runner = self.runner.clone();
+        canvas.on_touch_down(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::Started,
+                    force: Some(force),
+                    location,
+                }),
+            });
+        });
+
+        let runner = self.runner.clone();
+        canvas.on_touch_up(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::Ended,
+                    force: Some(force),
+                    location,
+                }),
+            });
+        });
+
+        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;
@@ -261,6 +263,46 @@ impl Canvas {
         }
     }
 
+    pub fn on_touch_move<F>(&mut self, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => h.on_touch_move(&self.common, handler),
+            _ => {}
+        }
+    }
+
+    pub fn on_touch_down<F>(&mut self, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => h.on_touch_down(&self.common, handler),
+            _ => {}
+        }
+    }
+
+    pub fn on_touch_up<F>(&mut self, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => h.on_touch_up(&self.common, handler),
+            _ => {}
+        }
+    }
+
+    pub fn on_touch_cancel<F>(&mut self, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => h.on_touch_cancel(&self.common, handler),
+            _ => {}
+        }
+    }
+
     pub fn on_mouse_wheel<F>(&mut self, mut handler: F)
     where
         F: 'static + FnMut(i32, MouseScrollDelta, ModifiersState),

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,10 @@ 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_move: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_touch_down: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_touch_up: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
+    on_touch_cancel: Option<EventListenerHandle<dyn FnMut(PointerEvent)>>,
 }
 
 impl PointerHandler {
@@ -22,6 +27,10 @@ impl PointerHandler {
             on_cursor_move: None,
             on_pointer_press: None,
             on_pointer_release: None,
+            on_touch_move: None,
+            on_touch_down: None,
+            on_touch_up: None,
+            on_touch_cancel: None,
         }
     }
 
@@ -32,6 +41,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,6 +60,13 @@ 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());
             },
         ));
@@ -56,6 +79,13 @@ impl PointerHandler {
         self.on_pointer_release = Some(canvas_common.add_user_event(
             "pointerup",
             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(),
                     event::mouse_button(&event),
@@ -73,6 +103,13 @@ impl PointerHandler {
         self.on_pointer_press = Some(canvas_common.add_user_event(
             "pointerdown",
             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(),
                     event::mouse_position(&event).to_physical(super::super::scale_factor()),
@@ -95,6 +132,13 @@ impl PointerHandler {
         self.on_cursor_move = Some(canvas_common.add_event(
             "pointermove",
             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(),
                     event::mouse_position(&event).to_physical(super::super::scale_factor()),
@@ -105,11 +149,65 @@ impl PointerHandler {
         ));
     }
 
+    pub fn on_touch_move<F>(&mut self, canvas_common: &super::Common, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        self.on_touch_move =
+            Some(canvas_common.add_event("pointermove", touch_handler(handler)));
+    }
+
+    pub fn on_touch_down<F>(&mut self, canvas_common: &super::Common, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        self.on_touch_down =
+            Some(canvas_common.add_event("pointerdown", touch_handler(handler)));
+    }
+
+    pub fn on_touch_up<F>(&mut self, canvas_common: &super::Common, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        self.on_touch_up =
+            Some(canvas_common.add_event("pointerup", touch_handler(handler)));
+    }
+
+    pub fn on_touch_cancel<F>(&mut self, canvas_common: &super::Common, handler: F)
+    where
+        F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+    {
+        self.on_touch_cancel =
+            Some(canvas_common.add_event("pointercancel", touch_handler(handler)));
+    }
+
     pub fn remove_listeners(&mut self) {
         self.on_cursor_leave = None;
         self.on_cursor_enter = None;
         self.on_cursor_move = None;
         self.on_pointer_press = None;
         self.on_pointer_release = None;
+        self.on_touch_move = None;
+        self.on_touch_down = None;
+        self.on_touch_up = None;
+        self.on_touch_cancel = None;
+    }
+}
+
+fn touch_handler<F>(mut handler: F) -> impl FnMut(PointerEvent)
+where
+    F: 'static + FnMut(i32, PhysicalPosition<f64>, Force),
+{
+    move |event: PointerEvent| {
+        if event.pointer_type() != "touch" {
+            return;
+        }
+
+        handler(
+            event.pointer_id(),
+            event::touch_position(&event)
+                .to_physical(super::super::scale_factor()),
+            Force::Normalized(event.pressure() as f64),
+        );
     }
 }

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, WheelEvent, PointerEvent};
 
 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) -> LogicalPosition<f64> {
+    LogicalPosition {
+        x: event.client_x() as f64,
+        // Flip the Y axis because canvas's origin is top-left.
+        y: event.client_y() as f64,
+    }
+}