[SuperEditor][SuperReader][iOS] Fix horizontal drag scrolling the editor (Resolves #2081) (#2155)

Author: angelosilvestre

super_editor/lib/src/default_editor/document_gestures_touch_ios.dart

@@ -18,6 +18,7 @@ import 'package:super_editor/src/default_editor/text_tools.dart';
 import 'package:super_editor/src/document_operations/selection_operations.dart';
 import 'package:super_editor/src/infrastructure/_logging.dart';
 import 'package:super_editor/src/infrastructure/content_layers.dart';
+import 'package:super_editor/src/infrastructure/flutter/eager_pan_gesture_recognizer.dart';
 import 'package:super_editor/src/infrastructure/flutter/build_context.dart';
 import 'package:super_editor/src/infrastructure/flutter/flutter_scheduler.dart';
 import 'package:super_editor/src/infrastructure/multi_tap_gesture.dart';
@@ -308,6 +309,7 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
   final _magnifierFocalPointInDocumentSpace = ValueNotifier<Offset?>(null);
   Offset? _dragEndInInteractor;
   DragMode? _dragMode;
+  DragStartDetails? _dragStartDetails;
   // TODO: HandleType is the wrong type here, we need collapsed/base/extent,
   //       not collapsed/upstream/downstream. Change the type once it's working.
   HandleType? _dragHandleType;
@@ -896,6 +898,9 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
   }
 
   void _onPanStart(DragStartDetails details) {
+    // Store the gesture start details to disambiguate horizontal vs vertical dragging, later.
+    _dragStartDetails = details;
+
     // Stop waiting for a long-press to start, if a long press isn't already in-progress.
     _globalTapDownOffset = null;
     _tapDownLongPressTimer?.cancel();
@@ -905,8 +910,11 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
     //       bit of slop might be the problem.
     final selection = widget.selection.value;
     if (selection == null) {
-      // There isn't a selection, the user is dragging to scroll the document.
-      _startDragScrolling(details);
+      // There isn't a selection, but we still don't know if the user is dragging
+      // vertically or horizontally. Wait until the onPanUpdate event is fired
+      // to decide whether or not we should scroll the document.
+      _dragMode = DragMode.waitingForScrollDirection;
+      _updateDragStartLocation(details.globalPosition);
       return;
     }
 
@@ -924,9 +932,11 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
       _dragMode = DragMode.extent;
       _dragHandleType = HandleType.downstream;
     } else {
-      // The user isn't dragging over a handle.
-      // Start scrolling the document.
-      _startDragScrolling(details);
+      // The user isn't dragging over a handle, but we still don't know if the user is dragging
+      // vertically or horizontally. Wait until the onPanUpdate event is fired
+      // to decide whether or not we should scroll the document.
+      _dragMode = DragMode.waitingForScrollDirection;
+      _updateDragStartLocation(details.globalPosition);
 
       return;
     }
@@ -936,31 +946,7 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
       ..hideToolbar()
       ..showMagnifier();
 
-    _globalStartDragOffset = details.globalPosition;
-    final interactorBox = context.findRenderObject() as RenderBox;
-    final handleOffsetInInteractor = interactorBox.globalToLocal(details.globalPosition);
-    _dragStartInDoc = _interactorOffsetToDocumentOffset(handleOffsetInInteractor);
-
-    if (_dragHandleType != null) {
-      _startDragPositionOffset = _docLayout
-          .getRectForPosition(
-            _dragHandleType == HandleType.upstream ? selection.base : selection.extent,
-          )!
-          .center;
-    } else {
-      // User is long-press dragging, which is why there's no drag handle type.
-      // In this case, the start drag offset is wherever the user touched.
-      _startDragPositionOffset = _dragStartInDoc!;
-    }
-
-    // We need to record the scroll offset at the beginning of
-    // a drag for the case that this interactor is embedded
-    // within an ancestor Scrollable. We need to use this value
-    // to calculate a scroll delta on every scroll frame to
-    // account for the fact that this interactor is moving within
-    // the ancestor scrollable, despite the fact that the user's
-    // finger/mouse position hasn't changed.
-    _dragStartScrollOffset = scrollPosition.pixels;
+    _updateDragStartLocation(details.globalPosition);
 
     widget.dragHandleAutoScroller.value?.startAutoScrollHandleMonitoring();
 
@@ -1011,9 +997,26 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
   }
 
   void _onPanUpdate(DragUpdateDetails details) {
+    if (_dragMode == DragMode.waitingForScrollDirection) {
+      if (_globalStartDragOffset != null && (details.globalPosition.dy - _globalStartDragOffset!.dy).abs() > kPanSlop) {
+        // The user is dragging vertically. Start scrolling the document.
+        _startDragScrolling(_dragStartDetails!);
+      }
+    }
+
     if (_dragMode == DragMode.scroll) {
       // The user is trying to scroll the document. Scroll it, accordingly.
-      _scrollingDrag!.update(details);
+      _scrollingDrag!.update(
+        DragUpdateDetails(
+          globalPosition: details.globalPosition,
+          localPosition: details.localPosition,
+          primaryDelta: details.delta.dy,
+          // Having a primary delta requires that one of the
+          // offset dimensions is zero.
+          delta: Offset(0.0, details.delta.dy),
+        ),
+      );
+
       return;
     }
 
@@ -1109,6 +1112,9 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
         // or with a long-press. Finish that interaction.
         _onDragSelectionEnd();
         break;
+      case DragMode.waitingForScrollDirection:
+        _dragMode = null;
+        break;
       case null:
         // The user wasn't dragging over a selection. Do nothing.
         break;
@@ -1341,6 +1347,35 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
     _magnifierFocalPointInDocumentSpace.value = centerOfContentAtOffset;
   }
 
+  void _updateDragStartLocation(Offset globalOffset) {
+    _globalStartDragOffset = globalOffset;
+    final interactorBox = context.findRenderObject() as RenderBox;
+    final handleOffsetInInteractor = interactorBox.globalToLocal(globalOffset);
+    _dragStartInDoc = _interactorOffsetToDocumentOffset(handleOffsetInInteractor);
+
+    final selection = widget.selection.value;
+    if (_dragHandleType != null && selection != null) {
+      _startDragPositionOffset = _docLayout
+          .getRectForPosition(
+            _dragHandleType == HandleType.upstream ? selection.base : selection.extent,
+          )!
+          .center;
+    } else {
+      // User is long-press dragging, which is why there's no drag handle type.
+      // In this case, the start drag offset is wherever the user touched.
+      _startDragPositionOffset = _dragStartInDoc!;
+    }
+
+    // We need to record the scroll offset at the beginning of
+    // a drag for the case that this interactor is embedded
+    // within an ancestor Scrollable. We need to use this value
+    // to calculate a scroll delta on every scroll frame to
+    // account for the fact that this interactor is moving within
+    // the ancestor scrollable, despite the fact that the user's
+    // finger/mouse position hasn't changed.
+    _dragStartScrollOffset = scrollPosition.pixels;
+  }
+
   @override
   Widget build(BuildContext context) {
     if (widget.scrollController.hasClients) {
@@ -1374,27 +1409,9 @@ class _IosDocumentTouchInteractorState extends State<IosDocumentTouchInteractor>
               ..gestureSettings = gestureSettings;
           },
         ),
-        // We use a combination of a VerticalDragGestureRecognizer and a HorizontalDragGestureRecognizer
-        // instead of a PanGestureRecognizer because `Scrollable` also uses a VerticalDragGestureRecognizer
-        // and we need to beat out any ancestor `Scrollable` in the gesture arena.
-        // Without the HorizontalDragGestureRecognizer, horizontal drags aren't reported here
-        // when the editor has an ancestor `Scrollable`.
-        VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<VerticalDragGestureRecognizer>(
-          () => VerticalDragGestureRecognizer(),
-          (VerticalDragGestureRecognizer instance) {
-            instance
-              ..dragStartBehavior = DragStartBehavior.down
-              ..onDown = _onPanDown
-              ..onStart = _onPanStart
-              ..onUpdate = _onPanUpdate
-              ..onEnd = _onPanEnd
-              ..onCancel = _onPanCancel
-              ..gestureSettings = gestureSettings;
-          },
-        ),
-        HorizontalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<HorizontalDragGestureRecognizer>(
-          () => HorizontalDragGestureRecognizer(),
-          (HorizontalDragGestureRecognizer instance) {
+        EagerPanGestureRecognizer: GestureRecognizerFactoryWithHandlers<EagerPanGestureRecognizer>(
+          () => EagerPanGestureRecognizer(),
+          (EagerPanGestureRecognizer instance) {
             instance
               ..dragStartBehavior = DragStartBehavior.down
               ..onDown = _onPanDown
@@ -1450,7 +1467,9 @@ enum DragMode {
   // around the selected word.
   longPress,
   // Dragging to scroll the document.
-  scroll
+  scroll,
+  // We still don't know if the user is dragging vertically or horizontally.
+  waitingForScrollDirection,
 }
 
 /// Adds and removes an iOS-style editor toolbar, as dictated by an ancestor

super_editor/lib/src/infrastructure/flutter/eager_pan_gesture_recognizer.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart' hide DragGestureRecognizer;
+
+import 'package:super_editor/src/infrastructure/flutter/monodrag.dart';
+
+/// Recognizes movement both horizontally and vertically.
+///
+/// Flutter's `PanGestureRecognizer` loses the gesture arena if there
+/// is a `VerticalDragGestureRecognizer` in the tree.
+///
+/// This recognizer uses the same minimum distance as the `VerticalDragGestureRecognizer`
+/// to accept a gesture
+class EagerPanGestureRecognizer extends DragGestureRecognizer {
+  EagerPanGestureRecognizer({
+    super.debugOwner,
+    super.supportedDevices,
+    super.allowedButtonsFilter,
+  });
+
+  @override
+  bool isFlingGesture(VelocityEstimate estimate, PointerDeviceKind kind) {
+    final minVelocity = minFlingVelocity ?? kMinFlingVelocity;
+    final minDistance = minFlingDistance ?? computeHitSlop(kind, gestureSettings);
+    return estimate.pixelsPerSecond.distanceSquared > minVelocity * minVelocity &&
+        estimate.offset.distanceSquared > minDistance * minDistance;
+  }
+
+  @override
+  DragEndDetails? considerFling(VelocityEstimate estimate, PointerDeviceKind kind) {
+    if (!isFlingGesture(estimate, kind)) {
+      return null;
+    }
+    final maxVelocity = maxFlingVelocity ?? kMaxFlingVelocity;
+    final dy = clampDouble(estimate.pixelsPerSecond.dy, -maxVelocity, maxVelocity);
+    return DragEndDetails(
+      velocity: Velocity(pixelsPerSecond: Offset(0, dy)),
+      primaryVelocity: dy,
+      globalPosition: finalPosition.global,
+      localPosition: finalPosition.local,
+    );
+  }
+
+  @override
+  bool hasSufficientGlobalDistanceToAccept(PointerDeviceKind pointerDeviceKind, double? deviceTouchSlop) {
+    // Flutter's PanGestureRecognizer uses the pan slop, which is twice bigger than the hit slop,
+    // to determine if the gesture should be accepted. Use the same distance used by the
+    // VerticalDragGestureRecognizer.
+    return globalDistanceMoved.abs() > computeHitSlop(pointerDeviceKind, gestureSettings);
+  }
+
+  @override
+  Offset getDeltaForDetails(Offset delta) => delta;
+
+  @override
+  double? getPrimaryValueFromOffset(Offset value) => null;
+
+  @override
+  String get debugDescription => 'pan';
+}