[SPEC] gesture system enhancements

[josxha]

Motivation

The user experience can be smoothend if we add zoom level transitions and animation while and after zooming.

Open for comments. It needs to be decided what should get added and what shouldn't or only optionally.

Potential features

1. Use transparency to blend between zoom levels while zooming
   • Leaflet and the legacy Google raster map use this.
   • The vector map by google does not uses zoom layer blending.
2. Animated zooming when using the scroll wheel
   • Both GoogleMaps and Leaflet use this
   • [WIP] Opt-in for smooth pointer scrolling flutter/flutter#139392
   • scroll_position_with_single_context.dart#L255-L291
3. Option to animate to a full zoom level after gesture input stops, not active by default.
   • GoogleMaps raster tiles are animating to the next full zoom level in the same direction.
   • Leaflet seems to animate to the nearest full zoom level
4. Use canvas rather than widgets for tiles.
   • GoogleMaps prefered to for better control over the performance.
   • This might have different results with flutter.
5. Don't request tiles if a zoom level gets skipped when the user zooms fast.
   • This gets calculated by the excepted time a zoom level will be visible according to the zoom speed.
   • Don't show downscaled tiles with a zoom level difference >1. (map would look cluttered, large amount of tiles to draw hurts performance)
6. Preloading of tiles at surrounding zoom levels
   • Ensures a more smooth transition
   • Greater data consumption
7. [FEATURE] Adjust fling animation (spring) physics for fast & small drag gestures #1768
8. [FEATURE] Two fingers tap to zoom out #1432
9. Animate the rotation of the the ctrl key + click gesture. (ref multi!: rewrite gesture handling #1809)

Scope for flutter_map

ID	Feature	Default behaviour	Optional	Requirements & additional information
1	Use transparency to blend between zoom levels while zooming	✅	❌
2	Animated zooming when using the scroll wheel	✅	❌
3	Animate to a full zoom level after pinch gesture ends	✅	✅
5	Don't request tiles if a zoom level gets skipped when the user zooms fast	✅	❌	only when not noticable
6	Preloading of tiles at surrounding zoom levels to ensure a smooth transition	✅	✅	ensure that succounding tiles begin to load after the visible tiles are finished
7	More natural fling animation logic	✅	❌
8	Add the twoFingerTapZoomOut gesture	✅	✅
9	Animate the keyTriggerClickRotate gesture	✅	❌

Resources

• Google design article: https://medium.com/google-design/google-maps-cb0326d165f5
• Showcase video: https://www.youtube.com/watch?v=-gkuoPCyo0E
• Leaflet live demo: https://leaflet-extras.github.io/leaflet-providers/preview/
• [BUG] iOS: Pinch zoom broken (a) #1429 (comment)

[JosefWN]

Minor (macOS/iOS): Essentially the opposite of #1768 (web).

A small flick in Apple Maps moves the map (animated pan) about ~25 mm on screen, a small flick in flutter_map makes the map jump ~5 mm instantly (from what I can tell, eyeballing). So it feels slightly unnatural, almost as if the map is resting on a table with a lot of friction.

[JaffaKetchup]

Ah, I wonder if FM feels so frictiony, at least in comparison to Google Maps because GM's 'friction' changes dependent on the cursor's distance from the equator. On the equator, the dragged point stays beneath the cursor the entire way, but on more extreme latitudes, the initially dragged point lags significantly behind the cursor.

a small flick in flutter_map makes the map jump ~5 mm instantly (from what I can tell, eyeballing)

I'm assuming you mean with the fling animation disabled?

[JosefWN]

I'm assuming you mean with the fling animation disabled?

With the fling animation enabled, that's why it feels a bit off for lighter flicks on the touch pad (very small instant movement, no animation that I can perceive).

[mootw]

Considerations:

I recently found trouble when trying to capture pan events. I needed to capture horizontalDrag and verticalDrag separately rather than what i would intuitively think would be a pan in GestureDetector with AbsorbPointer

Also i noticed that gesture detector has support for mapping scroll events to scale events (scale = zoom in flutter gestures). I wonder if we can tap into that to integrate closer to how flutter handles gestures.

Gesture Detector 'mapping' to our terminology:
Scale would be zooming and rotation using a pinch gesture.
pan would be a single finger drag
(tap is tap... long... etc..)

[josxha]

I recently found trouble when trying to capture pan events. I needed to capture horizontalDrag and verticalDrag separately rather than what i would intuitively think would be a pan in GestureDetector with AbsorbPointer

There is an open issue here: #1729

Gesture Detector 'mapping' to our terminology:
Scale would be zooming and rotation using a pinch gesture.
pan would be a single finger drag
(tap is tap... long... etc..)

I tried to follow this approach in #1809. The pr uses the scale callbacks but doesn't use pinch at the moment. There was some incompatibility between some GestureDetector callbacks. Could be that that's the reason it isn't used but I'm not sure.