Improve single vs. multi-touch zoom & pan interaction (#7196) #8100

vakila · 2019-03-30T00:05:22Z

Improves interaction when changing between single- and multi-finger touches, by checking for multi-touch events in dragPan handler and deactivating/reactivating that handler as appropriate if touchZoomRotate handler is active.

Changes

Stop an active single-touch if the user adds additional fingers and starts rotating/zooming (i.e. if touchZoomRotate is enabled and it begins a rotate/zoom, dragPan stops the drag) (fixes Single finger pan events overlaps with multi touch pan #7196) If the user only pans but does not zoom/rotate with multiple fingers, dragPan continues the drag.
Start a single-touch drag if the user removes all but one finger (fixes Panning not possible after pinch zoom without lifting finger #6900)
Add tests for expected single vs. multi-touch interactions
- change simulated touchend/touchcancel events to have an empty touches list by default

Launch Checklist

briefly describe the changes in this PR
write tests for all new functionality
~~document any changes to public APIs~~ N/A
~~post benchmark scores~~ N/A for these changes?
manually test the debug page - manually tested touch interactions on Android/Chrome

cc @asheemmamoowala

to reflect how we usually expect these events to look

- Stop an active single-touch drag if the user adds additional fingers and touchZoomRotate is enabled, so the latter can take over interaction - Start a single-touch drag if the user removes all but one finger - Add tests for expected single vs. multi-touch interactions

vakila · 2019-04-24T16:50:25Z

To test the behavior changes implemented here (cc @asheemmamoowala )

While single-finger panning, add a second finger(s) and continue panning/zooming
- Before: the map still pans/zooms, but it's stuttery and not smooth (because both dragPan and touchZoomRotate handlers are simultaneously trying to move the map)
- After (with PR): panning/zooming continues, more smoothly (because only touchZoomRotate is active, dragPan has been deactivated on the multi-finger touchstart)
Remove the second finger leaving one finger on the screen, and try to keep panning.
- Before: panning/interaction stops entirely until you end the single-finger touch. (because the multi-finger touchend deactivated both touchZoomRotate and dragPan, even though there's still one finger on the map)
- After: single-finger panning continues as expected (because dragPan has been re-activated on the multi-finger touchend as if it were a single-finger touchstart).

vakila · 2019-04-24T19:30:37Z

Ah just discovered the multi-to-single-touch interaction problem was ticketed in #6900, which this also fixes; updated description above.

1ec5 · 2019-06-07T15:37:37Z

Slightly off-topic: does GL JS currently address the case of a two-finger pinch-to-zoom gesture where the averaged point between the fingers moves (a “wandering zoom”)? On a touchscreen, it’s quite difficult to keep that centerpoint stationary as you pinch your fingers or spread them apart. To maintain a responsive feel, it’s necessary to pan at the same time as zooming (though perhaps some use cases may call for a more precise gesture handler that locks the center while zooming).

mourner · 2019-06-07T16:56:40Z

@1ec5 currently not, and it's been bothering me too — perhaps we should capture that in a ticket too. Leaflet does this.

arindam1993

Nice tests 💯

LGTM except one nit.

arindam1993 · 2019-08-20T19:02:36Z

src/ui/handler/drag_pan.js

+    _onMultiTouchEnd(e: TouchEvent) {
+        // A multi-finger touch is ending; decide whether to activate dragging
+
+        if (e.touches && e.touches.length > 1) return; // there are still multiple fingers touching; wait


Maybe move this logic to something like isMultiTouch(e)?

vakila · 2019-08-20T22:13:10Z

Thanks for the review @arindam1993! Did you by any chance try this out on a touch device, and if so did you have any issues with the new behavior as describe above (#8100 (comment))? Wondering if you ran into the same issues @asheemmamoowala had a while back.

arindam1993 · 2019-08-26T19:11:36Z

I did some testing on Android Chrome,

To test the behavior changes implemented here (cc @asheemmamoowala )

While single-finger panning, add a second finger(s) and continue panning/zooming

Before: the map still pans/zooms, but it's stuttery and not smooth (because both dragPan and touchZoomRotate handlers are simultaneously trying to move the map)

After (with PR): panning/zooming continues, more smoothly (because only touchZoomRotate is active, dragPan has been deactivated on the multi-finger touchstart)

Remove the second finger leaving one finger on the screen, and try to keep panning.

Before: panning/interaction stops entirely until you end the single-finger touch. (because the multi-finger touchend deactivated both touchZoomRotate and dragPan, even though there's still one finger on the map)

After: single-finger panning continues as expected (because dragPan has been re-activated on the multi-finger touchend as if it were a single-finger touchstart).

2 works as expected and is a big improvement imo. With respect to 1 though it feels like we've traded some light consistent jitteriness with a large 1 frame hitch. Maybe we're skipping one pan handler fire?

vakila · 2019-08-26T19:30:06Z

Thanks @arindam1993 !

With respect to 1 though it feels like we've traded some light consistent jitteriness with a large 1 frame hitch. Maybe we're skipping one pan handler fire?

Hm maybe these were the issues @asheemmamoowala alluded to. Wonder if it's possible we're dropping one handler a little early, such that there's a gap before the other handler takes over. Will try to investigate further, lmk if you want to pair on that @arindam1993 !

Additional tests/cases to capture the fact that we only expect touchZoomRotateHandler to take over once we've actually begun zoom/rotate gesture; two-finger straight pan should still be handled by dragPanHandler. See comment on #8100 for more details. Tests currently failing.

vakila · 2019-08-27T00:37:39Z

Capturing progress @arindam1993 & I made today:

Arindam found a bug in the transition from one to two fingers, during which we hand off control from the dragPanHandler to the touchZoomRotateHandler. The idea was for touchZoomRotateHandler to take over panning once the second finger is added, but it turns out that if you have a very steady hand and only drag, not zoom or rotate, with two fingers, this will not initially trigger any map updates from the touchZoomRotateHandler, because its _gestureintent will still be undefined. Once you have zoomed or rotated once, however, any subsequent pan-but-not-zoom/rotate gestures will be picked up by the touchZoomRotateHandler, because it never resets its _gestureintent to null until the end of the interaction.

The solution we came up with is to stop disabling dragPanHandler as soon as a second touch is added, and instead let dragPanHandler check the touchZoomRotateHandler._gestureIntent during the render frame call, and only then decide whether or not to update the map based on whether or not it expects touchZoomRotateHandler to do the same (as determined by its ._gestureIntent). This approach seemed to fix the interaction in some cursory testing we did, but we still need to make sure events are being fired as appropriate. We added some tests to reflect the expected behavior; they are not yet passing.

Co-authored-by: Anjana Vakil <anjana.vakil@mapbox.com>

Co-authored-by: Arindam Bose <arindam.bose@mapbox.com>

To account for the fact that move event handlers might be inspecting the DragPanHandler's (in)active state, update the state in the onMove handler rather than in onDragFrame. However, don't fire the dragstart/movestart events immediately on the move event as we had been doing before; schedule these to be fired on the first drag frame. Co-authored-by: Arindam Bose <arindam.bose@mapbox.com>

Co-authored-by: Arindam Bose <arindam.bose@mapbox.com>

…n .deactivate()

vakila · 2019-09-13T22:00:37Z

This ~~just needs a rebase/merge then will be~~ is ready to go! I got the remaining tests passing and as far as @arindam1993 and I can tell through debug page testing on Android, iOS, & Surface Book, the behavior is as intended. @asheemmamoowala and/or @arindam1993 can you please 👀 so we can (finally!) get this merged in? 🙏 ❤️ 🤞

arindam1993

Just 2 small things, looks good otherwise!

src/ui/handler/drag_pan.js

vakila · 2019-09-18T01:09:04Z

Thanks for the ✔️ @arindam1993! Made one update per your comment.

@asheemmamoowala did you want to 👀 this again or are we good to 🚢 ?

Anjana Vakil added 2 commits March 29, 2019 16:49

Pass empty touches list in simulated touchend/touchcancel

3a8bde2

to reflect how we usually expect these events to look

vakila changed the title ~~Improve single vs. multi-touch zoom & pan interaction (#7169)~~ Improve single vs. multi-touch zoom & pan interaction (#7196) Apr 22, 2019

mourner mentioned this pull request Jun 12, 2019

Pinch-to-zoom gesture should pan the map when both fingers move #8345

Open

asheemmamoowala assigned arindam1993 Aug 19, 2019

arindam1993 approved these changes Aug 20, 2019

View reviewed changes

Arindam Bose and others added 5 commits August 27, 2019 11:57

Defer drag_pan disabling to requestAnimationFrame

ea0e416

Co-authored-by: Anjana Vakil <anjana.vakil@mapbox.com>

Consolidate touchend handlers

2f2967b

Co-authored-by: Arindam Bose <arindam.bose@mapbox.com>

Update tests for new drag interaction behavior

4fb4c6c

Co-authored-by: Arindam Bose <arindam.bose@mapbox.com>

Account for disabling handler on dragstart

709d4a3

Co-authored-by: Arindam Bose <arindam.bose@mapbox.com>

asheemmamoowala added this to the release-ristretto milestone Aug 29, 2019

Anjana Vakil added 5 commits August 30, 2019 10:22

Don't fire dragend if we never fired dragstart, reset ._shouldStart o…

9643f66

…n .deactivate()

Fix multi-finger no-zoom test

3fc41d3

Fix DragPanHandler behavior on touch end/start

7dc031d

Fix lint & flow errors

620fe88

Fix another flow error

226e17c

vakila requested review from arindam1993 and asheemmamoowala and removed request for arindam1993 and asheemmamoowala September 13, 2019 21:57

vakila requested review from arindam1993 and asheemmamoowala September 13, 2019 21:58

Anjana Vakil added 2 commits September 13, 2019 15:10

Merge branch 'master' into fix-7196

ee3b794

Lint & Flow are my BFFs

03cb5db

arindam1993 reviewed Sep 17, 2019

View reviewed changes

src/ui/handler/drag_pan.js Show resolved Hide resolved

src/ui/handler/drag_pan.js Outdated Show resolved Hide resolved

Replace array loop with .every per reviewer comment

b50f108

asheemmamoowala approved these changes Sep 18, 2019

View reviewed changes

asheemmamoowala added the needs changelog label Sep 18, 2019

vakila merged commit a493b0b into master Sep 18, 2019

vakila deleted the fix-7196 branch September 18, 2019 21:16

kkaefer mentioned this pull request Oct 23, 2019

Panning during pinch zoom gestures on Android Devices since version 1.4.0 #8889

Closed

snyk-bot mentioned this pull request Dec 5, 2019

[Snyk] Upgrade mapbox-gl from 1.3.1 to 1.5.0 dyna-dot/iClient-JavaScript-s#9

Open

rreusser mentioned this pull request May 7, 2021

Map pans at incorrect speed while pinching #10657

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve single vs. multi-touch zoom & pan interaction (#7196) #8100

Improve single vs. multi-touch zoom & pan interaction (#7196) #8100

vakila commented Mar 30, 2019 •

edited

Loading

vakila commented Apr 24, 2019

vakila commented Apr 24, 2019

1ec5 commented Jun 7, 2019

mourner commented Jun 7, 2019

arindam1993 left a comment

arindam1993 Aug 20, 2019

vakila commented Aug 20, 2019

arindam1993 commented Aug 26, 2019 •

edited

Loading

vakila commented Aug 26, 2019

vakila commented Aug 27, 2019

vakila commented Sep 13, 2019 •

edited

Loading

arindam1993 left a comment

vakila commented Sep 18, 2019

Improve single vs. multi-touch zoom & pan interaction (#7196) #8100

Improve single vs. multi-touch zoom & pan interaction (#7196) #8100

Conversation

vakila commented Mar 30, 2019 • edited Loading

Changes

Launch Checklist

vakila commented Apr 24, 2019

vakila commented Apr 24, 2019

1ec5 commented Jun 7, 2019

mourner commented Jun 7, 2019

arindam1993 left a comment

Choose a reason for hiding this comment

arindam1993 Aug 20, 2019

Choose a reason for hiding this comment

vakila commented Aug 20, 2019

arindam1993 commented Aug 26, 2019 • edited Loading

vakila commented Aug 26, 2019

vakila commented Aug 27, 2019

vakila commented Sep 13, 2019 • edited Loading

arindam1993 left a comment

Choose a reason for hiding this comment

vakila commented Sep 18, 2019

vakila commented Mar 30, 2019 •

edited

Loading

arindam1993 commented Aug 26, 2019 •

edited

Loading

vakila commented Sep 13, 2019 •

edited

Loading