Repository navigation
[SPEC] gesture system enhancements #1748
Description
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
- 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.
- 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
- 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
- Use canvas rather than widgets for tiles.
- GoogleMaps prefered to for better control over the performance.
- This might have different results with flutter.
- 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)
- Preloading of tiles at surrounding zoom levels
- Ensures a more smooth transition
- Greater data consumption
- [FEATURE] Adjust fling animation (spring) physics for fast & small drag gestures #1768
- [FEATURE] Two fingers tap to zoom out #1432
- 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)
Activity
JaffaKetchup commentedon Dec 2, 2023
josxha commentedon Dec 2, 2023
JaffaKetchup commentedon Dec 2, 2023
josxha commentedon Dec 7, 2023
[-][FEATURE] Improve UX when zooming[/-][+][FEATURE] Improve UX for gesture input[/+][-][FEATURE] Improve UX for gesture input[/-][+][SPEC] Improve UX for gesture input[/+][-][SPEC] Improve UX for gesture input[/-][+][SPEC] Improve zooming gestures & system[/+][-][SPEC] Improve zooming gestures & system[/-][+][SPEC] gesture system enhancements[/+]JosefWN commentedon Jan 18, 2024
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_mapmakes 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 commentedon Jan 20, 2024
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.
I'm assuming you mean with the fling animation disabled?
JosefWN commentedon Jan 20, 2024
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 commentedon Jul 5, 2024
Considerations:
I recently found trouble when trying to capture pan events. I needed to capture
horizontalDragandverticalDragseparately rather than what i would intuitively think would be a pan inGestureDetectorwithAbsorbPointerAlso 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 commentedon Jul 6, 2024
There is an open issue here: #1729
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.