feat: added options to customize double-tap (drag) zoom gestures (#2070)

Co-authored-by: Kiril Tijsma <[email protected]>
Co-authored-by: Freek van de Ven <[email protected]>

Author: 3 people

example/pubspec.yaml

@@ -11,7 +11,7 @@ dependencies:
   flutter:
     sdk: flutter
   flutter_map:
-  flutter_map_cancellable_tile_provider: ^3.0.2
+  flutter_map_cancellable_tile_provider: ^3.1.0
   flutter_web_plugins:
     sdk: flutter
   http: ^1.2.2

lib/src/gestures/map_interactive_viewer.dart

@@ -53,7 +53,6 @@ class MapInteractiveViewer extends StatefulWidget {
 class MapInteractiveViewerState extends State<MapInteractiveViewer>
     with TickerProviderStateMixin {
   static const int _kMinFlingVelocity = 800;
-  static const _kDoubleTapZoomDuration = 200;
 
   /// The maximum delay between to taps to be counted as a double tap.
   static const doubleTapDelay = Duration(milliseconds: 250);
@@ -84,15 +83,12 @@ class MapInteractiveViewerState extends State<MapInteractiveViewer>
   late Offset _focalStartLocal;
   late LatLng _focalStartLatLng;
 
-  late final AnimationController _flingController =
-      AnimationController(vsync: this);
+  late final _flingController = AnimationController(vsync: this);
   late Animation<Offset> _flingAnimation;
 
-  late final AnimationController _doubleTapController = AnimationController(
+  late final _doubleTapController = AnimationController(
     vsync: this,
-    duration: const Duration(
-      milliseconds: _kDoubleTapZoomDuration,
-    ),
+    duration: _interactionOptions.doubleTapZoomDuration,
   );
   late Animation<double> _doubleTapZoomAnimation;
   late Animation<LatLng> _doubleTapCenterAnimation;
@@ -876,11 +872,11 @@ class MapInteractiveViewerState extends State<MapInteractiveViewer>
 
   void _startDoubleTapAnimation(double newZoom, LatLng newCenter) {
     _doubleTapZoomAnimation = Tween<double>(begin: _camera.zoom, end: newZoom)
-        .chain(CurveTween(curve: Curves.linear))
+        .chain(CurveTween(curve: _interactionOptions.doubleTapZoomCurve))
         .animate(_doubleTapController);
     _doubleTapCenterAnimation =
         LatLngTween(begin: _camera.center, end: newCenter)
-            .chain(CurveTween(curve: Curves.linear))
+            .chain(CurveTween(curve: _interactionOptions.doubleTapZoomCurve))
             .animate(_doubleTapController);
     _doubleTapController.forward(from: 0);
   }
@@ -923,7 +919,11 @@ class MapInteractiveViewerState extends State<MapInteractiveViewer>
     final flags = _interactionOptions.flags;
     if (InteractiveFlag.hasDoubleTapDragZoom(flags)) {
       final verticalOffset = (_focalStartLocal - details.localFocalPoint).dy;
-      final newZoom = _mapZoomStart - verticalOffset / 360 * _camera.zoom;
+      final newZoom = _mapZoomStart -
+          _interactionOptions.doubleTapDragZoomChangeCalculator(
+            verticalOffset,
+            _camera,
+          );
 
       final min = _options.minZoom ?? 0.0;
       final max = _options.maxZoom ?? double.infinity;

lib/src/map/options/interaction.dart

@@ -1,9 +1,10 @@
+import 'package:flutter/animation.dart';
 import 'package:flutter_map/flutter_map.dart';
 import 'package:meta/meta.dart';
 
 /// All interactive options for [FlutterMap]
 @immutable
-final class InteractionOptions {
+class InteractionOptions {
   /// See [InteractiveFlag] for custom settings
   final int flags;
 
@@ -66,6 +67,27 @@ final class InteractionOptions {
   /// with the scroll wheel of a mouse.
   final double scrollWheelVelocity;
 
+  /// Calculates the zoom difference to apply to the initial zoom level when a
+  /// user is performing a double-tap drag zoom gesture
+  ///
+  /// `verticalOffset` is the vertical distance between the user's initial
+  /// pointer-down position and their current dragged position. `camera` may be
+  /// used, for example, to factor in the current zoom level.
+  ///
+  /// The default calculator is [defaultDoubleTapDragZoomChangeCalculator].
+  final double Function(double verticalOffset, MapCamera camera)
+      doubleTapDragZoomChangeCalculator;
+
+  /// The duration of the animation played when double-tap zooming
+  ///
+  /// Defaults to 200ms.
+  final Duration doubleTapZoomDuration;
+
+  /// The curve of the animation played when double-tap zooming
+  ///
+  /// Defaults to [Curves.fastOutSlowIn].
+  final Curve doubleTapZoomCurve;
+
   /// Options to configure cursor/keyboard rotation
   ///
   /// Cursor/keyboard rotation is designed for desktop platforms, and allows the
@@ -103,21 +125,35 @@ final class InteractionOptions {
     this.pinchMoveWinGestures =
         MultiFingerGesture.pinchZoom | MultiFingerGesture.pinchMove,
     this.scrollWheelVelocity = 0.005,
+    this.doubleTapDragZoomChangeCalculator =
+        defaultDoubleTapDragZoomChangeCalculator,
+    this.doubleTapZoomDuration = const Duration(milliseconds: 200),
+    this.doubleTapZoomCurve = Curves.fastOutSlowIn,
     this.cursorKeyboardRotationOptions = const CursorKeyboardRotationOptions(),
     this.keyboardOptions = const KeyboardOptions(),
   })  : assert(
           rotationThreshold >= 0.0,
-          'rotationThreshold needs to be a positive value',
+          '`rotationThreshold` must be positive',
         ),
         assert(
           pinchZoomThreshold >= 0.0,
-          'pinchZoomThreshold needs to be a positive value',
+          '`pinchZoomThreshold` must be positive',
         ),
         assert(
           pinchMoveThreshold >= 0.0,
-          'pinchMoveThreshold needs to be a positive value',
+          '`pinchMoveThreshold` must be positive',
         );
 
+  /// Default calculator function for [doubleTapDragZoomChangeCalculator]
+  ///
+  /// Uses a constant of 1/360, and changes the zoom speed based on the current
+  /// zoom level.
+  static double defaultDoubleTapDragZoomChangeCalculator(
+    double verticalOffset,
+    MapCamera camera,
+  ) =>
+      (1 / 360) * camera.zoom * verticalOffset;
+
   @override
   bool operator ==(Object other) =>
       other is InteractionOptions &&
@@ -131,6 +167,10 @@ final class InteractionOptions {
       pinchMoveThreshold == other.pinchMoveThreshold &&
       pinchMoveWinGestures == other.pinchMoveWinGestures &&
       scrollWheelVelocity == other.scrollWheelVelocity &&
+      doubleTapDragZoomChangeCalculator ==
+          other.doubleTapDragZoomChangeCalculator &&
+      doubleTapZoomDuration == other.doubleTapZoomDuration &&
+      doubleTapZoomCurve == other.doubleTapZoomCurve &&
       keyboardOptions == other.keyboardOptions;
 
   @override
@@ -145,6 +185,9 @@ final class InteractionOptions {
         pinchMoveThreshold,
         pinchMoveWinGestures,
         scrollWheelVelocity,
+        doubleTapDragZoomChangeCalculator,
+        doubleTapZoomDuration,
+        doubleTapZoomCurve,
         keyboardOptions,
       );
 }