[web] Add support for two finger pan #3163

m-bert · 2024-10-17T08:44:20Z

Description

This PR adds support for two finger panning on touchpad on web.

Warning

Two finger gestures may be used as system/browser gestures (for example swipe to go back). This PR doesn't handle these cases.

Implementation

Implementation is based on WheelEvents. This leads to some limitations - whole state flow of Pan has to be managed inside one callback (onWheel).

Ending gesture

Starting gesture is easy, in contrast to ending it. To finish gesture we use timeout - if no wheel event was received since setTimeout was called, we can end gesture.

`Mouse` vs `Touchpad`

It is hard to determine whether mouse or touchpad was used to start the gesture. WheelEvent doesn't have any information about the device, therefore we have to use heuristics to check that.

Note

You cannot start gesture with mouse scroll.

To see if events were generated with mouse, we check whether wheelDeltaY property (which is now deprecated) of event is multiple of 120. In short, this is standard wheel delta for mouse. Here you can find useful links that will tell more about why it works:

Caution

While this will work most of the times, it is possible that user will somehow generate this specific wheel delta with touchpad and gesture will not be recognized correctly.

Closes #800

Test plan

Tested on new Two finger Pan example

j-piasecki

Have you checked if the behavior is the same as on iPad?

j-piasecki · 2024-10-17T10:31:36Z

example/App.tsx

+      {
+        name: 'Two finger Pan',
+        component: TwoFingerPan,
+        unsupportedPlatforms: new Set(['android', 'macos', 'ios']),


Suggested change

unsupportedPlatforms: new Set(['android', 'macos', 'ios']),

unsupportedPlatforms: new Set(['android', 'macos']),

Shouldn't this prop also work on iPads?

It should 😅

Brought back in dc59483

example/src/release_tests/twoFingerPan/index.tsx

j-piasecki · 2024-10-17T10:41:12Z

example/src/release_tests/twoFingerPan/index.tsx

+      r.value = clampColor(r);
+      b.value = clampColor(b);
+
+      console.table({ red: r.value, blue: b.value });


Is this log needed?

I wouldn't say it is needed, but it doesn't hurt to leave it either. I left it on purpose to see how values change, but we can remove it as it doesn't tell much more.

j-piasecki · 2024-10-17T10:43:39Z

src/web/handlers/PanGestureHandler.ts

+      if (this.receivedWheelEvent) {
+        return;
+      }


Why is this needed when the timeout is cleared in onWheel? And why not clean it here, before scheduling a new one?

At first I wondered if the situation below is possible:

this.receivedWheelEvent = true; // execute `scheduleWheelEnd` here clearTimeout(this.endWheelTimeout);

but we believe that it is not possible because of how event loop works.

So yes, it is not necessary and I've removed it in a640c0c

j-piasecki · 2024-10-17T10:44:04Z

src/web/handlers/PanGestureHandler.ts

+      this.currentState = State.UNDETERMINED;
+
+      this.wheelDevice = WheelDevice.UNDETERMINED;
+    }, 30);


Shouldn't this be configurable?

I'm not sure, should it? I was to move it to a constant but it seems that I've missed it. Either way, do we want to give users permission to change this value? I think we can stick to one that works ok, but leaving it open for customization also makes sense.

j-piasecki · 2024-10-17T10:47:02Z

src/web/handlers/PanGestureHandler.ts

+          : WheelDevice.MOUSE;
+
+      if (this.wheelDevice === WheelDevice.MOUSE) {
+        this.scheduleWheelEnd(event);


Do we need to schedule in this case instead of ending outright?

Do we need to end here at all? begin is called after this condition, so we shouldn't even get there with mouse, no?

If we don't schedule cleanup, wheelDevice won't be set to UNDETERMINED. I'm not sure if we want to set it here though. However, we can call end only if handler was active.

Also changed in a640c0c

j-piasecki · 2024-10-17T10:50:48Z

src/web/tools/PointerEventManager.ts

+  ): AdaptedEvent {
+    return event instanceof PointerEvent
+      ? this.mapPointerEvent(event, eventType)
+      : this.mapWheelEvent(event);


We may want to redesign the event manager system in the future. We now have PointerEventManager that needs to check whether the event it receives is a PointerEvent which seems wrong to me.

There's nothing wrong with adding another event manager, but I'm not exactly sure how would it work. Adding MouseEventManager doesn't make much sense at this point for me. Also, this manager would have only one method - onWheel.

On the other hand, KeyboradManager also has one callback, so maybe it is fine 😅

Okay, I've discussed it with @latekvo and we decided that it will be ok to add WheelEventManager. Done in bf008b1

latekvo · 2024-10-17T11:04:52Z

As far as I see, WheelEvent.wheelDeltaY isn't supported on firefox, would it be possible to resort to other heuristics like having a threshold on WheelEvent.deltaY in combination with WheelEvent.deltaMode for that browser?

Also, it seems like on MacOS with continuous scroll option enabled, this method of detecting the device will not work, since the values will be smoothed out over a longer period of time instead of being divisible by 120.

Also, on Opera browser, the standard value seems to be 80 not 120 (link).

Overall, would it be possible to detect that mouse is not being used instead of checking if it is?
The current method seems to be very prone to false positives when it comes to detecting touchpad being used.

Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>

m-bert · 2024-10-18T07:49:25Z

Overall, would it be possible to detect that mouse is not being used instead of checking if it is?

As discussed, I think there's no better way to check that (but I'm open to discussion if you do find a better approach).

would it be possible to resort to other heuristics like having a threshold on WheelEvent.deltaY in combination with WheelEvent.deltaMode for that browser?

Values of deltaY differ between browsers when it comes to mouse. Also deltaMode is the same for touchpad and for mouse.

The current method seems to be very prone to false positives when it comes to detecting touchpad being used.

Activating on mouse wheel is a side effect of this feature that is not affecting main functionality.

m-bert · 2024-10-18T07:59:31Z

Have you checked if the behavior is the same as on iPad?

I did and indeed it does (at least the example does) 😅

m-bert added 5 commits October 17, 2024 09:33

Initial implementation

02e670f

Ignore mouse

452b3e6

Merge branch 'main' into @mbert/support-2finger-pan

d21e1a3

Add prop support

ad5681e

Add example

080e797

m-bert changed the title ~~[web] Add support for two fingers pan~~ [Web] Add support for two fingers pan Oct 17, 2024

m-bert changed the title ~~[Web] Add support for two fingers pan~~ [web] Add support for two finger pan Oct 17, 2024

m-bert requested review from j-piasecki and latekvo October 17, 2024 10:23

m-bert marked this pull request as ready for review October 17, 2024 10:23

m-bert mentioned this pull request Oct 17, 2024

Support panning with touchpads #800

Open

j-piasecki reviewed Oct 17, 2024

View reviewed changes

m-bert and others added 4 commits October 17, 2024 16:07

Update example/src/release_tests/twoFingerPan/index.tsx

f4d2f7d

Co-authored-by: Jakub Piasecki <jakub.piasecki@swmansion.com>

Small refactor

a640c0c

Remove unused import

09a4dc1

Enable example on ios

dc59483

Merge branch 'main' into @mbert/support-2finger-pan

ce259ea

Add WheelEventManager

bf008b1

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[web] Add support for two finger pan #3163

[web] Add support for two finger pan #3163

m-bert commented Oct 17, 2024 •

edited

Loading

j-piasecki left a comment

j-piasecki Oct 17, 2024

m-bert Oct 17, 2024

m-bert Oct 18, 2024

j-piasecki Oct 17, 2024

m-bert Oct 17, 2024

j-piasecki Oct 17, 2024

m-bert Oct 18, 2024

j-piasecki Oct 17, 2024

m-bert Oct 17, 2024

j-piasecki Oct 17, 2024

m-bert Oct 17, 2024

m-bert Oct 18, 2024

j-piasecki Oct 17, 2024

m-bert Oct 17, 2024

m-bert Oct 18, 2024

latekvo commented Oct 17, 2024 •

edited

Loading

m-bert commented Oct 18, 2024

m-bert commented Oct 18, 2024

	unsupportedPlatforms: new Set(['android', 'macos', 'ios']),
	unsupportedPlatforms: new Set(['android', 'macos']),

[web] Add support for two finger pan #3163

Are you sure you want to change the base?

[web] Add support for two finger pan #3163

Conversation

m-bert commented Oct 17, 2024 • edited Loading

Description

Implementation

Ending gesture

Mouse vs Touchpad

Test plan

j-piasecki 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

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

latekvo commented Oct 17, 2024 • edited Loading

m-bert commented Oct 18, 2024

m-bert commented Oct 18, 2024

m-bert commented Oct 17, 2024 •

edited

Loading

`Mouse` vs `Touchpad`

latekvo commented Oct 17, 2024 •

edited

Loading