Add support for `event::Touch` on web targets #1945

dsluijk · 2021-05-20T09:36:59Z

Tested on all platforms changed
Compilation warnings were addressed
cargo fmt has been run on this branch
cargo doc builds successfully
Added an entry to CHANGELOG.md if knowledge of this change could be valuable to users
Updated documentation to reflect any user-facing changes, including notes of platform-specific behavior
Created or updated an example program if it would help users understand this functionality
Updated feature matrix, if new features were added or implemented

This pull request adds touch support to web targets by the Pointer events API.

This PR also adds a new datatype to the Touch struct, PointerType. This indicates which pointer is being used to generate the touch event. As this has been added to the platform-independent Touch struct, all platforms supporting touch had to be changed slightly. I manually checked all implementations and added a None value to all (non-web) Touch structs, but it is possible I missed one.

Closes #1673 .

maroider

You indicated that you want to help out with WASM, @FuriouZz, and I think helping review and test this (and other) web PRs would be a good start. You don't need to be a maintainer to review and/or test PRs.

CHANGELOG.md

src/event.rs

FuriouZz

The implementation sounds good to me. The force touch is currently implemented on iOS and it is possible on the web (see my comment). I prefer to validate this PR with its implementation.
Just asking @maroider, this may be the subject of another Issue/PR : winit does have any plans to support multi-touch ?

src/platform_impl/web/event_loop/window_target.rs

maroider · 2021-05-20T14:28:33Z

Just asking @maroider, this may be the subject of another Issue/PR : winit does have any plans to support multi-touch ?

I believe an API for that (and a pointer event API) was explored in #1374, and potentially in #99 and/or #336,

maroider

Is there anything being done in this PR to prevent non-touch pointer events being reported as WindowEvent::Touch?

src/platform_impl/web/stdweb/canvas.rs

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

dsluijk · 2021-05-23T10:09:56Z

Is there anything being done in this PR to prevent non-touch pointer events being reported as WindowEvent::Touch?

I've added a guard for it now.

FuriouZz · 2021-05-23T13:42:24Z

@maroider Just noticied that PR #1900 already exist for event::Touch support created by @zicklag. That PR use touch event and support multitouch.

maroider · 2021-05-23T13:45:15Z

Well, I'll be damned. I had completely forgotten about that PR.

dsluijk · 2021-05-23T14:41:09Z

Do note that that PR uses touch events instead of pointers, as was preferred in #1673

maroider · 2021-05-23T15:45:47Z

Do note that that PR uses touch events instead of pointers, as was preferred in #1673

We'll go ahead with this PR in favour of #1900, in that case.

zicklag · 2021-05-26T17:04:54Z

So I should close #1900 to avoid confusion, right?

maroider · 2021-05-26T20:12:32Z

So I should close #1900 to avoid confusion, right?

Sure.

#1941 got merged, @dsluijk, so you'll want to rebase onto master.

… rust-windowing-master

dsluijk · 2021-05-27T08:58:39Z

#1941 got merged, @dsluijk, so you'll want to rebase onto master.

Done! I think it's ready to merge now, is there anything what still needs to be updated?

maroider

I'd like to do a real-world test (although I don't think it's strictly necessary for me to do so), but this should otherwise be ready to be merged, despite how CI is a bit wonky ATM.

I'd also like a final sign-off from @FuriouZz before merging.

zicklag · 2021-05-27T17:04:28Z

@maroider I can try this out, if you want before you merge it. I'm currently having to use my fork in order to power my Bounty Bros. game touch support on web so I have a perfect test case. I'll try to test it within the next ~12 hours ( probably less ) and comment here with the result.

maroider · 2021-05-27T17:06:26Z

Sounds like a plan, @zicklag.

FuriouZz

Just some reword from pointer to touch

FuriouZz · 2021-05-27T17:22:56Z

src/platform_impl/web/event_loop/window_target.rs

@@ -231,6 +231,62 @@ impl<T> WindowTarget<T> {
            runner.request_redraw(WindowId(id));
        });

+        let runner = self.runner.clone();
+        canvas.on_pointer_move(move |device_id, location| {


Suggested change

canvas.on_pointer_move(move |device_id, location| {

canvas.on_touch_move(move |device_id, location| {

FuriouZz · 2021-05-27T17:23:14Z

src/platform_impl/web/event_loop/window_target.rs

+        });
+
+        let runner = self.runner.clone();
+        canvas.on_pointer_down(move |device_id, location| {


Suggested change

canvas.on_pointer_down(move |device_id, location| {

canvas.on_touch_down(move |device_id, location| {

FuriouZz · 2021-05-27T17:23:26Z

src/platform_impl/web/event_loop/window_target.rs

+        });
+
+        let runner = self.runner.clone();
+        canvas.on_pointer_up(move |device_id, location| {


Suggested change

canvas.on_pointer_up(move |device_id, location| {

canvas.on_touch_up(move |device_id, location| {

FuriouZz · 2021-05-27T17:23:38Z

src/platform_impl/web/event_loop/window_target.rs

+        });
+
+        let runner = self.runner.clone();
+        canvas.on_pointer_cancel(move |device_id, location| {


Suggested change

canvas.on_pointer_cancel(move |device_id, location| {

canvas.on_touch_cancel(move |device_id, location| {

FuriouZz · 2021-05-27T17:24:27Z

src/platform_impl/web/web_sys/canvas.rs

@@ -247,6 +247,46 @@ impl Canvas {
        }
    }

+    pub fn on_pointer_move<F>(&mut self, handler: F)


Suggested change

pub fn on_pointer_move<F>(&mut self, handler: F)

pub fn on_touch_move<F>(&mut self, handler: F)

FuriouZz · 2021-05-27T17:25:56Z

src/platform_impl/web/web_sys/canvas.rs

+        F: 'static + FnMut(i32, PhysicalPosition<f64>),
+    {
+        match &mut self.mouse_state {
+            MouseState::HasPointerEvent(h) => h.on_pointer_cancel(&self.common, handler),


Suggested change

MouseState::HasPointerEvent(h) => h.on_pointer_cancel(&self.common, handler),

MouseState::HasPointerEvent(h) => h.on_touch_cancel(&self.common, handler),

FuriouZz · 2021-05-27T17:26:18Z

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

@@ -103,11 +111,103 @@ impl PointerHandler {
        ));
    }

+    pub fn on_pointer_move<F>(&mut self, canvas_common: &super::Common, mut handler: F)


Suggested change

pub fn on_pointer_move<F>(&mut self, canvas_common: &super::Common, mut handler: F)

pub fn on_touch_move<F>(&mut self, canvas_common: &super::Common, mut handler: F)

FuriouZz · 2021-05-27T17:26:32Z

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

+        ));
+    }
+
+    pub fn on_pointer_down<F>(&mut self, canvas_common: &super::Common, mut handler: F)


Suggested change

pub fn on_pointer_down<F>(&mut self, canvas_common: &super::Common, mut handler: F)

pub fn on_touch_down<F>(&mut self, canvas_common: &super::Common, mut handler: F)

FuriouZz · 2021-05-27T17:26:45Z

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

+        ));
+    }
+
+    pub fn on_pointer_up<F>(&mut self, canvas_common: &super::Common, mut handler: F)


Suggested change

pub fn on_pointer_up<F>(&mut self, canvas_common: &super::Common, mut handler: F)

pub fn on_touch_up<F>(&mut self, canvas_common: &super::Common, mut handler: F)

FuriouZz · 2021-05-27T17:26:59Z

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

+        ));
+    }
+
+    pub fn on_pointer_cancel<F>(&mut self, canvas_common: &super::Common, mut handler: F)


Suggested change

pub fn on_pointer_cancel<F>(&mut self, canvas_common: &super::Common, mut handler: F)

pub fn on_touch_cancel<F>(&mut self, canvas_common: &super::Common, mut handler: F)

zicklag · 2021-05-27T17:43:16Z

I'll be investigating, more, but for some reason when testing with my game it doesn't seem to be picking up tap-and-drags, when inputing through the Chrome browser's mobile viewer. I think maybe it's not holding down the touch or something. I'll debug more in a bit to see what the difference in the the sent events are between my fork and this PR.

maroider · 2021-05-27T19:37:20Z

I'll be investigating, more, but for some reason when testing with my game it doesn't seem to be picking up tap-and-drags, when inputing through the Chrome browser's mobile viewer.

This seems to be an oversight on my end. I thought the call to set_pointer_capture wasn't removed, and I think removing that call is what's causing this issue.

zicklag · 2021-05-27T19:42:00Z

Here's the event log I'm getting when touch-and-dragging if this helps:

It seems to capture the first so much of a move before getting a touch-cancelled event.

maroider · 2021-05-27T19:47:43Z

Did you try it with set_pointer_capture re-added in the correct place, @zicklag?

zicklag · 2021-05-27T20:40:39Z

That didn't seem to fix it, but in my latest tests it doesn't seem like the event handler is getting run at all, maybe. I'm looking around.

Edit: Nevermind about the event handler not getting run. I messed something up.

Here's the update I made, and it still isn't working:

FuriouZz · 2021-05-27T21:10:28Z

The problem seems to come from the browser canceling pointermove event. Setting html, body { touch-action: none; } fix the issue. Does exist an alternative of that fix?
@zicklag @maroider

pointermove documentation

The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action.

touch-action documentation

By default, panning (scrolling) and pinching gestures are handled exclusively by the browser. An application using Pointer events will receive a pointercancel event when the browser starts handling a touch gesture. By explicitly specifying which gestures should be handled by the browser, an application can supply its own behavior in pointermove and pointerup listeners for the remaining gestures. Applications using Touch events disable the browser handling of gestures by calling preventDefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

When a gesture is started, the browser intersects the touch-action values of the touched element and its ancestors, up to the one that implements the gesture (in other words, the first containing scrolling element). This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants.

maroider · 2021-05-27T21:19:04Z

Does it work if you only apply the style to the canvas? If so, we can apply the style programmatically.
We'll probably also want to look into what using preventDefault() looks like, although I don't think we can get away with using it unconditionally.

FuriouZz · 2021-05-27T21:23:16Z

It works on my sample

canvas.style().set_property("touch-action", "none");

We'll probably also want to look into what using preventDefault() looks like, although I don't think we can get away with using it unconditionally.

I tried that, but it does not work.

zicklag · 2021-05-27T23:44:55Z

canvas.style().set_property("touch-action", "none");

That worked for me, too. Looks like that might be all we need.

FuriouZz · 2021-05-28T16:09:11Z

canvas.style().set_property("touch-action", "none");

Must be added here.

ArturKovacs · 2021-06-18T08:06:11Z

If I'm not mistaken then the previous message was directed to you, @dsluijk. If you don't have the opportunity to continue working on this, feel free to indicate that.

SamiPirbay · 2021-08-06T03:54:29Z

It works but the origin (0, 0) is at the top-left corner, with Y going downwards.

FuriouZz · 2021-08-14T07:40:21Z

Up please

johanhelsing · 2021-11-02T09:17:45Z

Is there something I can do to help this one along?

I backported the PR to winit 0.24 (that was what bevy 0.5 was on) and tested it with one of my games, and it worked great. Would be nice to have it merged.

@dsluijk, if you don't have the time, I can try to see if I can resolve the conflicts and flip the y-axis.

madsmtm · 2022-12-23T05:56:57Z

#2188 has been merged, which fixes this as well.

FuriouZz · 2022-12-27T16:23:14Z

Finally!

dsluijk added 4 commits May 20, 2021 11:11

feat: add pointer events to web

3ca9afc

fix: add missing pointer types to Touch structs

edc3c76

docs: update the docs to reflect the changes

994b5f7

chore: revert unintented changes

db5bfe4

maroider suggested changes May 20, 2021

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

src/event.rs Outdated Show resolved Hide resolved

dsluijk added 3 commits May 20, 2021 15:35

docs: reorder the Changelog entry

5927424

feat: remove PointerType for touch events

5ea5760

docs: change Event to WindowEvent

cfb7e67

maroider added DS - web C - waiting on maintainer A maintainer must review this code C - waiting on testing Does this PR work? labels May 20, 2021

FuriouZz suggested changes May 20, 2021

View reviewed changes

src/platform_impl/web/event_loop/window_target.rs Show resolved Hide resolved

fix: compilation on stdweb and web-sys

b88bd95

maroider suggested changes May 20, 2021

View reviewed changes

src/platform_impl/web/stdweb/canvas.rs Outdated Show resolved Hide resolved

src/platform_impl/web/web_sys/canvas/pointer_handler.rs Outdated Show resolved Hide resolved

FuriouZz suggested changes May 20, 2021

View reviewed changes

src/platform_impl/web/web_sys/canvas/pointer_handler.rs Show resolved Hide resolved

src/platform_impl/web/web_sys/canvas/pointer_handler.rs Show resolved Hide resolved

dsluijk added 2 commits May 23, 2021 11:51

revert: remove added support for stdweb

1dff7c4

feat: renamed events, added touch type guard

424c05f

zicklag mentioned this pull request May 26, 2021

Track Touch Events in web-sys Backend #1900

Closed

8 tasks

dsluijk added 2 commits May 27, 2021 10:55

Merge branch 'master' of https://github.com/rust-windowing/winit into…

8ead14f

… rust-windowing-master

Merge branch 'rust-windowing-master'

20886a4

maroider approved these changes May 27, 2021

View reviewed changes

FuriouZz suggested changes May 27, 2021

View reviewed changes

This comment has been minimized.

Sign in to view

rukai mentioned this pull request Dec 28, 2021

scrolling is not captured on web mobile #2116

Closed

ryo33 mentioned this pull request Feb 8, 2022

Web touch event #2188

Merged

5 tasks

madsmtm closed this Dec 23, 2022

	canvas.on_pointer_move(move \|device_id, location\| {
	canvas.on_touch_move(move \|device_id, location\| {

	canvas.on_pointer_down(move \|device_id, location\| {
	canvas.on_touch_down(move \|device_id, location\| {

	canvas.on_pointer_up(move \|device_id, location\| {
	canvas.on_touch_up(move \|device_id, location\| {

	canvas.on_pointer_cancel(move \|device_id, location\| {
	canvas.on_touch_cancel(move \|device_id, location\| {

	pub fn on_pointer_move<F>(&mut self, handler: F)
	pub fn on_touch_move<F>(&mut self, handler: F)

	MouseState::HasPointerEvent(h) => h.on_pointer_cancel(&self.common, handler),
	MouseState::HasPointerEvent(h) => h.on_touch_cancel(&self.common, handler),

	pub fn on_pointer_move<F>(&mut self, canvas_common: &super::Common, mut handler: F)
	pub fn on_touch_move<F>(&mut self, canvas_common: &super::Common, mut handler: F)

	pub fn on_pointer_down<F>(&mut self, canvas_common: &super::Common, mut handler: F)
	pub fn on_touch_down<F>(&mut self, canvas_common: &super::Common, mut handler: F)

	pub fn on_pointer_up<F>(&mut self, canvas_common: &super::Common, mut handler: F)
	pub fn on_touch_up<F>(&mut self, canvas_common: &super::Common, mut handler: F)

	pub fn on_pointer_cancel<F>(&mut self, canvas_common: &super::Common, mut handler: F)
	pub fn on_touch_cancel<F>(&mut self, canvas_common: &super::Common, mut handler: F)

Add support for event::Touch on web targets #1945

Add support for event::Touch on web targets #1945

Conversation

dsluijk commented May 20, 2021

maroider left a comment

Choose a reason for hiding this comment

FuriouZz left a comment

Choose a reason for hiding this comment

maroider commented May 20, 2021

maroider left a comment

Choose a reason for hiding this comment

dsluijk commented May 23, 2021

FuriouZz commented May 23, 2021

maroider commented May 23, 2021

dsluijk commented May 23, 2021

maroider commented May 23, 2021

zicklag commented May 26, 2021

maroider commented May 26, 2021 • edited Loading

dsluijk commented May 27, 2021

maroider left a comment • edited Loading

Choose a reason for hiding this comment

zicklag commented May 27, 2021

maroider commented May 27, 2021

FuriouZz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zicklag commented May 27, 2021 • edited Loading

This comment has been minimized.

maroider commented May 27, 2021

zicklag commented May 27, 2021

maroider commented May 27, 2021

zicklag commented May 27, 2021 • edited Loading

FuriouZz commented May 27, 2021 • edited Loading

maroider commented May 27, 2021 • edited Loading

FuriouZz commented May 27, 2021 • edited Loading

zicklag commented May 27, 2021

FuriouZz commented May 28, 2021 • edited Loading

ArturKovacs commented Jun 18, 2021

SamiPirbay commented Aug 6, 2021

FuriouZz commented Aug 14, 2021

johanhelsing commented Nov 2, 2021

madsmtm commented Dec 23, 2022

FuriouZz commented Dec 27, 2022

Add support for `event::Touch` on web targets #1945

Add support for `event::Touch` on web targets #1945

maroider commented May 26, 2021 •

edited

Loading

maroider left a comment •

edited

Loading

zicklag commented May 27, 2021 •

edited

Loading

zicklag commented May 27, 2021 •

edited

Loading

FuriouZz commented May 27, 2021 •

edited

Loading

maroider commented May 27, 2021 •

edited

Loading

FuriouZz commented May 27, 2021 •

edited

Loading

FuriouZz commented May 28, 2021 •

edited

Loading