feat: Add isDragged in DragCallbacks mixin (#2472)

Adding a isDragged state for DragCallbacks mixin. This was available in the Draggable mixin.

doc/flame/examples/lib/drag_events.dart

@@ -74,6 +74,7 @@ class DragTarget extends PositionComponent with DragCallbacks {
 
   @override
   void onDragStart(DragStartEvent event) {
+    super.onDragStart(event);
     final trail = Trail(event.localPosition);
     _trails[event.pointerId] = trail;
     add(trail);
@@ -86,11 +87,13 @@ class DragTarget extends PositionComponent with DragCallbacks {
 
   @override
   void onDragEnd(DragEndEvent event) {
+    super.onDragEnd(event);
     _trails.remove(event.pointerId)!.end();
   }
 
   @override
   void onDragCancel(DragCancelEvent event) {
+    super.onDragCancel(event);
     _trails.remove(event.pointerId)!.cancel();
   }
 }
@@ -203,7 +206,6 @@ class Star extends PositionComponent with DragCallbacks {
     ..color = const Color(0xFF000000)
     ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 4.0);
   late final Path _path;
-  bool _isDragged = false;
 
   @override
   bool containsLocalPoint(Vector2 point) {
@@ -212,7 +214,7 @@ class Star extends PositionComponent with DragCallbacks {
 
   @override
   void render(Canvas canvas) {
-    if (_isDragged) {
+    if (isDragged) {
       _paint.color = color.withOpacity(0.5);
       canvas.drawPath(_path, _paint);
       canvas.drawPath(_path, _borderPaint);
@@ -225,13 +227,13 @@ class Star extends PositionComponent with DragCallbacks {
 
   @override
   void onDragStart(DragStartEvent event) {
-    _isDragged = true;
+    super.onDragStart(event);
     priority = 10;
   }
 
   @override
   void onDragEnd(DragEndEvent event) {
-    _isDragged = false;
+    super.onDragEnd(event);
     priority = 0;
   }
 

doc/tutorials/klondike/app/lib/step4/components/card.dart

@@ -222,6 +222,7 @@ class Card extends PositionComponent with DragCallbacks {
 
   @override
   void onDragStart(DragStartEvent event) {
+    super.onDragStart(event);
     if (pile?.canMoveCard(this) ?? false) {
       _isDragging = true;
       priority = 100;
@@ -252,6 +253,7 @@ class Card extends PositionComponent with DragCallbacks {
 
   @override
   void onDragEnd(DragEndEvent event) {
+    super.onDragEnd(event);
     if (!_isDragging) {
       return;
     }

examples/lib/stories/collision_detection/multiple_shapes_example.dart

@@ -90,7 +90,6 @@ abstract class MyCollidable extends PositionComponent
   late final Paint _dragIndicatorPaint;
   final ScreenHitbox screenHitbox;
   ShapeHitbox? hitbox;
-  bool isDragged = false;
 
   MyCollidable(
     Vector2 position,
@@ -154,14 +153,9 @@ abstract class MyCollidable extends PositionComponent
   }
 
   @override
-  void onDragStart(DragStartEvent info) {
-    isDragged = true;
-  }
-
-  @override
-  void onDragEnd(DragEndEvent info) {
-    velocity.setFrom(info.velocity / 10);
-    isDragged = false;
+  void onDragEnd(DragEndEvent event) {
+    super.onDragEnd(event);
+    velocity.setFrom(event.velocity / 10);
   }
 }
 

examples/lib/stories/input/draggables_example.dart

@@ -28,7 +28,6 @@ class DraggablesExample extends FlameGame {
 class DraggableEmber extends Ember with DragCallbacks {
   @override
   bool debugMode = true;
-  bool isDragged = false;
 
   DraggableEmber({Vector2? position})
       : super(
@@ -45,23 +44,13 @@ class DraggableEmber extends Ember with DragCallbacks {
   }
 
   @override
-  void onDragStart(_) {
-    isDragged = true;
-  }
-
-  @override
-  void onDragUpdate(DragUpdateEvent info) {
+  void onDragUpdate(DragUpdateEvent event) {
     if (parent is! DraggablesExample) {
-      info.continuePropagation = true;
+      event.continuePropagation = true;
       return;
     }
 
-    position.add(info.localPosition);
-    info.continuePropagation = false;
-  }
-
-  @override
-  void onDragEnd(_) {
-    isDragged = false;
+    position.add(event.localPosition);
+    event.continuePropagation = false;
   }
 }

packages/flame/lib/src/components/input/joystick_component.dart

@@ -106,6 +106,7 @@ class JoystickComponent extends HudMarginComponent with DragCallbacks {
 
   @override
   bool onDragStart(DragStartEvent info) {
+    super.onDragStart(info);
     return false;
   }
 
@@ -117,12 +118,14 @@ class JoystickComponent extends HudMarginComponent with DragCallbacks {
 
   @override
   bool onDragEnd(_) {
+    super.onDragEnd(_);
     onDragStop();
     return false;
   }
 
   @override
   bool onDragCancel(_) {
+    super.onDragCancel(_);
     onDragStop();
     return false;
   }

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

@@ -17,6 +17,11 @@ import 'package:meta/meta.dart';
 ///
 /// This mixin is intended as a replacement of the [Draggable] mixin.
 mixin DragCallbacks on Component {
+  bool _isDragged = false;
+
+  /// Returns true while the component is being dragged.
+  bool get isDragged => _isDragged;
+
   /// The user initiated a drag gesture on top of this component.
   ///
   /// By default, only one component will receive a drag event. However, setting
@@ -28,7 +33,10 @@ mixin DragCallbacks on Component {
   /// will be delivered to the same component. If multiple components have
   /// received the initial [onDragStart] event, then all of them will be
   /// receiving the follow-up events.
-  void onDragStart(DragStartEvent event) {}
+  @mustCallSuper
+  void onDragStart(DragStartEvent event) {
+    _isDragged = true;
+  }
 
   /// The user has moved the pointer that initiated the drag gesture.
   ///
@@ -43,12 +51,16 @@ mixin DragCallbacks on Component {
   /// This event will be delivered to the component(s) that captured the initial
   /// [onDragStart], even if the point of touch moves outside of the boundaries
   /// of the component.
-  void onDragEnd(DragEndEvent event) {}
+  @mustCallSuper
+  void onDragEnd(DragEndEvent event) {
+    _isDragged = false;
+  }
 
   /// The drag was cancelled.
   ///
   /// This is a very rare event, so we provide a default implementation that
   /// converts it into an [onDragEnd] event.
+  @mustCallSuper
   void onDragCancel(DragCancelEvent event) => onDragEnd(event.toDragEnd());
 
   @override

packages/flame/test/events/component_mixins/drag_callbacks_test.dart

@@ -160,6 +160,25 @@ void main() {
         expect(game.dragCancelEvent, equals(0));
       },
     );
+
+    testWidgets(
+      'isDragged is changed',
+      (tester) async {
+        final component = _DragCallbacksComponent()..size = Vector2.all(100);
+        final game = FlameGame(children: [component]);
+        await tester.pumpWidget(GameWidget(game: game));
+        await tester.pump();
+        await tester.pump();
+
+        // Inside component
+        await tester.dragFrom(const Offset(10, 10), const Offset(90, 90));
+        expect(component.isDraggedStateChange, equals(2));
+
+        // Outside component
+        await tester.dragFrom(const Offset(101, 101), const Offset(110, 110));
+        expect(component.isDraggedStateChange, equals(2));
+      },
+    );
   });
 }
 
@@ -168,11 +187,19 @@ mixin _DragCounter on DragCallbacks {
   int dragUpdateEvent = 0;
   int dragEndEvent = 0;
   int dragCancelEvent = 0;
+  int isDraggedStateChange = 0;
+
+  bool _wasDragged = false;
 
   @override
   void onDragStart(DragStartEvent event) {
+    super.onDragStart(event);
     event.handled = true;
     dragStartEvent++;
+    if (_wasDragged != isDragged) {
+      ++isDraggedStateChange;
+      _wasDragged = isDragged;
+    }
   }
 
   @override
@@ -183,12 +210,18 @@ mixin _DragCounter on DragCallbacks {
 
   @override
   void onDragEnd(DragEndEvent event) {
+    super.onDragEnd(event);
     event.handled = true;
     dragEndEvent++;
+    if (_wasDragged != isDragged) {
+      ++isDraggedStateChange;
+      _wasDragged = isDragged;
+    }
   }
 
   @override
   void onDragCancel(DragCancelEvent event) {
+    super.onDragCancel(event);
     event.handled = true;
     dragCancelEvent++;
   }

packages/flame/test/events/flame_game_mixins/has_draggable_components_test.dart

@@ -181,13 +181,21 @@ class _DragCallbacksComponent extends PositionComponent with DragCallbacks {
   final void Function(DragEndEvent)? _onDragEnd;
 
   @override
-  void onDragStart(DragStartEvent event) => _onDragStart?.call(event);
+  void onDragStart(DragStartEvent event) {
+    super.onDragStart(event);
+    return _onDragStart?.call(event);
+  }
 
   @override
-  void onDragUpdate(DragUpdateEvent event) => _onDragUpdate?.call(event);
+  void onDragUpdate(DragUpdateEvent event) {
+    return _onDragUpdate?.call(event);
+  }
 
   @override
-  void onDragEnd(DragEndEvent event) => _onDragEnd?.call(event);
+  void onDragEnd(DragEndEvent event) {
+    super.onDragEnd(event);
+    return _onDragEnd?.call(event);
+  }
 }
 
 class _SimpleDragCallbacksComponent extends PositionComponent