[pointerevents] Expose event for pinch gesture (#543)

nicolo-ribaudo has just created a new issue for https://github.com/w3c/pointerevents:

== Expose event for pinch gesture ==
I have been recently contributing to different apps that implement custom zoom behavior. An open source example is Mozilla's PDF.js (https://github.com/mozilla/pdf.js/), used as the default PDF viewer in Firefox. It draws PDF pages in a canvas, and it needs to re-draw the canvas at a different scale when the user tries to zoom.

The way to do so is by intercepting the `touchstart`/`touchmove`/`touchend` events, `e.preventDefault()` them, keep track of how the touch points move/change, and re-implement zoom.

As a developer, your goal is for the gestures to feel native: zooming in in your web app shouldn't feel any different than using the built-in browser gestures in any other website.

- You start by checking when `e.touches.length === 2`, `.preventDefault()` it, track how the distance between the two fingers changes, and zoom your app accordingly.
- Then, you notice that many browsers also support two-fingers-scroll. You thus also need to track how the center of the two fingers move, to scroll the page accordingly. You don't need any custom scroll behavior, but you need to handle it yourself because you `.preventDefault()`ed the native browser handling.
- Then, you notice another pattern supported in all browsers: a user can start touching with two fingers, then lift one, and keep scrolling. You also need to thus implement this one-finger scroll, because you cannot tell the browser "I'm done handling the touch events since the user lifted a finger, now please start handling it yourself again".
- Then, you notice that one-finger scroll supports inertia (you can "throw" the page, and it will scroll for longer and progressively slow down), so you cannot just implement scroll by tracking how much the touch points move. You also need to take into account velocity and inertia, re-implementing it by yourself. Good luck trying to find the right parameters for how the page should slow down, as they are not consistent across different browsers on different OSes.

You can see that this adds up to a lot of complexity, for something that browsers already implement internally, and without getting to the same quality of results as the native browser implementation. Note that PDF.js, that I mentioned above, stopped at the first of those bullet points, thus behaving differently from normal web pages.

Browsers already do some processing of user interaction to re-expose it as events: for example, you can listen to the `scroll` event even if the user is actually doing a `touchstart`+`touchmove`.

I suggest that browsers could also detect pinch gestures other than scroll gestures, and let applications handle them separately. A single movement of the user's fingers on a touch display could fire both a `scroll` and a `pinch`, and web applications should be able to `.preventDefault()` them independently.

For the use case above, we would stop listening to `touch*` (or `pointer*`) events, and instead only listen to `touchpinch`/`pointerpinch`. Calling `e.preventDefault()` on this "pinch" event would not prevent the default scrolling, as that's on a "different axis". Similarly, calling `e.preventDefault()` on `scroll` does not prevent the browser's built-in pinch-to-zoom handling.

This is closely related to https://github.com/w3c/uievents/issues/31. I don't know if a good solution would be something generic for all ways to trigger zoom (e.g. mouse wheel, or Ctrl+plus), or if we should have something specific for the "pinch" gesture. While they are both about zooming, they might have different requirements (for example, detecting where the "center" of the gesture might be).

Please view or discuss this issue at https://github.com/w3c/pointerevents/issues/543 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 April 2025 13:07:03 UTC