feat: Update scale event with custom recognizer

doc/flame/inputs/scale_events.md

@@ -3,6 +3,7 @@
 **Scale events** occur when the user moves two fingers in a pinch in, or in a pinch out move.
 Only one single scale gesture can occur at the same time.
 
+
 For those components that you want to respond to scale events, add the `ScaleCallbacks` mixin.
 
 - This mixin adds three overridable methods to your component: `onScaleStart`, `onScaleUpdate`,
@@ -171,14 +172,3 @@ class ScaleOnlyRectangle extends RectangleComponent with ScaleCallbacks {
 }
 
 ```
-
-
-## Scale and drag gestures interactions
-
-A multi drag gesture can sometimes look exactly like a scale gesture.
-This is the case for instance, if you try to move two components toward each other at the same time.
-If you added both a component using ScaleCallbacks and
-one using DragCallbacks (or one using both), this issue will arise.
-The Scale gesture will win over the drag gesture
-and prevent your user to perform the multi drag gesture as they wanted. This is a limitation
-with the current implementation that devs need to be aware of.

examples/lib/stories/input/scale_example.dart → examples/lib/stories/input/scale_drag_example.dart

@@ -1,8 +1,8 @@
 import 'dart:math';
-import 'package:flame/components.dart';
-import 'package:flame/events.dart';
-import 'package:flame/game.dart';
-import 'package:flutter/material.dart';
+import 'package:flame/components.dart' hide Matrix4;
+import 'package:flame/events.dart' hide PointerMoveEvent;
+import 'package:flame/game.dart' hide Matrix4;
+import 'package:flutter/material.dart' hide PointerMoveEvent, Matrix4;
 
 void main() {
   runApp(GameWidget(game: ScaleExample()));
@@ -16,7 +16,7 @@ class ScaleExample extends FlameGame {
   Vector2 zoomCenter = Vector2.zero();
   double startingZoom = 1;
 
-  final bool addScaleOnlyRectangle = true;
+  final bool addScaleOnlyRectangle = false;
   final bool addDragOnlyRectangle = true;
   final bool addScaleDragRectangle = true;
   final bool addZoom = false;
@@ -52,7 +52,7 @@ class ScaleExample extends FlameGame {
 
     if (addScaleDragRectangle) {
       interactiveRectangle = InteractiveRectangle(
-        position: Vector2(200, 200),
+        position: Vector2(100, 100),
         size: Vector2.all(150),
         color: Colors.red,
       );
@@ -67,11 +67,11 @@ class ScaleExample extends FlameGame {
     super.update(dt);
 
     if (addCameraRotation) {
-      camera.viewfinder.angle += 0.1 * dt;
+      camera.viewfinder.angle += 0.001;
     }
     if (addZoom) {
       debugText.text = '${camera.viewfinder.zoom}';
-      camera.viewfinder.zoom += 0.1 * dt;
+      camera.viewfinder.zoom += 0.001;
     }
   }
 }
@@ -119,9 +119,6 @@ class InteractiveRectangle extends RectangleComponent
   @override
   void onDragUpdate(DragUpdateEvent event) {
     super.onDragUpdate(event);
-    if (isScaling) {
-      return;
-    }
     final rotated = event.canvasDelta.clone()
       ..rotate(game.camera.viewfinder.angle);
     position.add(rotated);
@@ -210,7 +207,6 @@ class DragOnlyRectangle extends RectangleComponent
   @override
   void onDragUpdate(DragUpdateEvent event) {
     super.onDragUpdate(event);
-    debugPrint('On Drag update');
     final rotated = event.canvasDelta.clone()
       ..rotate(game.camera.viewfinder.angle);
     position.add(rotated);

packages/flame/lib/events.dart

@@ -16,6 +16,8 @@ export 'src/events/flame_game_mixins/multi_tap_dispatcher.dart'
     show MultiTapDispatcher, MultiTapDispatcherKey;
 export 'src/events/flame_game_mixins/pointer_move_dispatcher.dart'
     show PointerMoveDispatcher, MouseMoveDispatcherKey;
+export 'src/events/flame_game_mixins/scale_drag_dispatcher.dart'
+    show MultiDragScaleDispatcher, MultiDragScaleDispatcherKey;
 export 'src/events/flame_game_mixins/secondary_tap_dispatcher.dart'
     show SecondaryTapDispatcher, SecondaryTapDispatcherKey;
 export 'src/events/game_mixins/multi_touch_drag_detector.dart'

packages/flame/lib/src/events/component_mixins/drag_callbacks.dart

@@ -1,5 +1,6 @@
 import 'package:flame/components.dart';
 import 'package:flame/events.dart';
+import 'package:flame/src/events/flame_game_mixins/scale_dispatcher.dart';
 import 'package:meta/meta.dart';
 
 /// This mixin can be added to a [Component] allowing it to receive drag events.
@@ -61,11 +62,51 @@ mixin DragCallbacks on Component {
   @mustCallSuper
   void onMount() {
     super.onMount();
+
     final game = findRootGame()!;
-    if (game.findByKey(const MultiDragDispatcherKey()) == null) {
-      final dispatcher = MultiDragDispatcher();
-      game.registerKey(const MultiDragDispatcherKey(), dispatcher);
+    final scaleDispatcher = game.findByKey(const ScaleDispatcherKey());
+    final multiDragDispatcher = game.findByKey(const MultiDragDispatcherKey());
+    final multiDragScaleDispatcher = game.findByKey(
+      const MultiDragScaleDispatcherKey(),
+    );
+
+    // If MultiDragScaleDispatcher already exists, we're done
+    if (multiDragScaleDispatcher != null) {
+      return;
+    }
+
+    // If MultiDragDispatcher exists but component has ScaleCallbacks,
+    // upgrade it
+    if (multiDragDispatcher != null && this is ScaleCallbacks) {
+      final dispatcher = MultiDragScaleDispatcher();
+      game.registerKey(const MultiDragScaleDispatcherKey(), dispatcher);
+      game.add(dispatcher);
+      (multiDragDispatcher as MultiDragDispatcher).markForRemoval();
+      return;
+    }
+
+    // If MultiDragDispatcher exists and no ScaleCallbacks, we're done
+    if (multiDragDispatcher != null) {
+      return;
+    }
+
+    if (scaleDispatcher == null && multiDragDispatcher == null) {
+      // Check if component also has ScaleCallbacks
+      if (this is ScaleCallbacks) {
+        final dispatcher = MultiDragScaleDispatcher();
+        game.registerKey(const MultiDragScaleDispatcherKey(), dispatcher);
+        game.add(dispatcher);
+      } else {
+        final dispatcher = MultiDragDispatcher();
+        game.registerKey(const MultiDragDispatcherKey(), dispatcher);
+        game.add(dispatcher);
+      }
+    } else if (scaleDispatcher != null && multiDragDispatcher == null) {
+      // Upgrade ScaleDispatcher to MultiDragScaleDispatcher
+      final dispatcher = MultiDragScaleDispatcher();
+      game.registerKey(const MultiDragScaleDispatcherKey(), dispatcher);
       game.add(dispatcher);
+      (scaleDispatcher as ScaleDispatcher).markForRemoval();
     }
   }
 }

packages/flame/lib/src/events/component_mixins/scale_callbacks.dart

@@ -25,11 +25,32 @@ mixin ScaleCallbacks on Component {
   @mustCallSuper
   void onMount() {
     super.onMount();
+    // Skip if DragCallbacks will handle it
+    if (this is DragCallbacks) {
+      return;
+    }
+
     final game = findRootGame()!;
-    if (game.findByKey(const ScaleDispatcherKey()) == null) {
+    final scaleDispatcher = game.findByKey(const ScaleDispatcherKey());
+    final multiDragDispatcher = game.findByKey(const MultiDragDispatcherKey());
+    final multiDragScaleDispatcher = game.findByKey(
+      const MultiDragScaleDispatcherKey(),
+    );
+
+    // If MultiDragScaleDispatcher exists, DragCallbacks already handled it
+    if (multiDragScaleDispatcher != null) {
+      return;
+    }
+
+    if (scaleDispatcher == null && multiDragDispatcher == null) {
       final dispatcher = ScaleDispatcher();
       game.registerKey(const ScaleDispatcherKey(), dispatcher);
       game.add(dispatcher);
+    } else if (scaleDispatcher == null && multiDragDispatcher != null) {
+      final dispatcher = MultiDragScaleDispatcher();
+      game.registerKey(const MultiDragScaleDispatcherKey(), dispatcher);
+      game.add(dispatcher);
+      (multiDragDispatcher as MultiDragDispatcher).markForRemoval();
     }
   }
 }

packages/flame/lib/src/events/flame_game_mixins/multi_drag_dispatcher.dart

@@ -1,12 +1,11 @@
-import 'dart:async';
-
 import 'package:flame/components.dart';
 import 'package:flame/events.dart';
 import 'package:flame/src/events/flame_drag_adapter.dart';
 import 'package:flame/src/events/tagged_component.dart';
 import 'package:flame/src/game/flame_game.dart';
 import 'package:flame/src/game/game_render_box.dart';
 import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
 import 'package:meta/meta.dart';
 
 class MultiDragDispatcherKey implements ComponentKey {
@@ -28,32 +27,10 @@ class MultiDragDispatcher extends Component implements MultiDragListener {
   /// The record of all components currently being touched.
   final Set<TaggedComponent<DragCallbacks>> _records = {};
 
-  final _dragUpdateController = StreamController<DragUpdateEvent>.broadcast(
-    sync: true,
-  );
-
-  Stream<DragUpdateEvent> get onUpdate => _dragUpdateController.stream;
-
-  final _dragStartController = StreamController<DragStartEvent>.broadcast(
-    sync: true,
-  );
-
-  Stream<DragStartEvent> get onStart => _dragStartController.stream;
-
-  final _dragEndController = StreamController<DragEndEvent>.broadcast(
-    sync: true,
-  );
-
-  Stream<DragEndEvent> get onEnd => _dragEndController.stream;
-
-  final _dragCancelController = StreamController<DragCancelEvent>.broadcast(
-    sync: true,
-  );
-
-  Stream<DragCancelEvent> get onCancel => _dragCancelController.stream;
-
   FlameGame get game => parent! as FlameGame;
 
+  bool _shouldBeRemoved = false;
+
   /// Called when the user initiates a drag gesture, for example by touching the
   /// screen and then moving the finger.
   ///
@@ -134,39 +111,59 @@ class MultiDragDispatcher extends Component implements MultiDragListener {
   @internal
   @override
   void handleDragStart(int pointerId, DragStartDetails details) {
+    if (_shouldBeRemoved) {
+      return;
+    }
     final event = DragStartEvent(pointerId, game, details);
     onDragStart(event);
-    _dragStartController.add(event);
   }
 
   @internal
   @override
   void handleDragUpdate(int pointerId, DragUpdateDetails details) {
     final event = DragUpdateEvent(pointerId, game, details);
     onDragUpdate(event);
-    _dragUpdateController.add(event);
   }
 
   @internal
   @override
   void handleDragEnd(int pointerId, DragEndDetails details) {
     final event = DragEndEvent(pointerId, details);
     onDragEnd(event);
-    _dragEndController.add(event);
+    _tryRemoving();
   }
 
   @internal
   @override
   void handleDragCancel(int pointerId) {
     final event = DragCancelEvent(pointerId);
     onDragCancel(event);
-    _dragCancelController.add(event);
+    _tryRemoving();
+  }
+
+  void markForRemoval() {
+    _shouldBeRemoved = true;
+    _tryRemoving();
+  }
+
+  bool _tryRemoving() {
+    // there's no more fingers
+    // that started dragging before _shouldBeRemoved flag was set to true.
+    if (_records.isEmpty && _shouldBeRemoved && isMounted) {
+      removeFromParent();
+      return true;
+    }
+    return false;
   }
 
   //#endregion
 
   @override
   void onMount() {
+    if (_tryRemoving()) {
+      return;
+    }
+
     game.gestureDetectors.add<ImmediateMultiDragGestureRecognizer>(
       ImmediateMultiDragGestureRecognizer.new,
       (ImmediateMultiDragGestureRecognizer instance) {
@@ -179,10 +176,6 @@ class MultiDragDispatcher extends Component implements MultiDragListener {
   void onRemove() {
     game.gestureDetectors.remove<ImmediateMultiDragGestureRecognizer>();
     game.unregisterKey(const MultiDragDispatcherKey());
-    _dragUpdateController.close();
-    _dragCancelController.close();
-    _dragStartController.close();
-    _dragEndController.close();
   }
 
   @override