feat: add onCancelled to ButtonComponent and HudButtonComponent

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

@@ -12,20 +12,20 @@ class ButtonComponent extends PositionComponent with Tappable {
  late final PositionComponent? buttonDown;
 
  /// Callback for what should happen when the button is pressed.
- /// If you want to interact with [onTapCancel] it is recommended
- /// to extend [ButtonComponent].
  void Function()? onPressed;
 
  /// Callback for what should happen when the button is released.
- /// If you want to interact with [onTapCancel] it is recommended
- /// to extend [ButtonComponent].
  void Function()? onReleased;
 
+ /// Callback for what should happen when the button is cancelled.
+ void Function()? onCancelled;
+
  ButtonComponent({
  this.button,
  this.buttonDown,
  this.onPressed,
  this.onReleased,
+ this.onCancelled,
  super.position,
  Vector2? size,
  super.scale,
@@ -64,7 +64,10 @@ class ButtonComponent extends PositionComponent with Tappable {
  @override
  @mustCallSuper
  bool onTapUp(TapUpInfo info) {
- onTapCancel();
+ if (buttonDown != null) {
+ buttonDown!.removeFromParent();
+ button!.parent = this;
+ }
  onReleased?.call();
  return true;
  }
@@ -76,6 +79,7 @@ class ButtonComponent extends PositionComponent with Tappable {
  buttonDown!.removeFromParent();
  button!.parent = this;
  }
+ onCancelled?.call();
  return false;
  }
 }

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

@@ -15,6 +15,7 @@ class HudButtonComponent extends ButtonComponent
  EdgeInsets? margin,
  Function()? super.onPressed,
  Function()? super.onReleased,
+ Function()? super.onCancelled,
  super.position,
  Vector2? size,
  super.scale,

packages/flame/test/components/button_component_test.dart

@@ -13,6 +13,7 @@ void main() {
  'correctly registers taps', GameWithTappables.new, (game) async {
  var pressedTimes = 0;
  var releasedTimes = 0;
+ var cancelledTimes = 0;
  final initialGameSize = Vector2.all(100);
  final componentSize = Vector2.all(10);
  final buttonPosition = Vector2.all(100);
@@ -23,17 +24,20 @@ void main() {
  button: RectangleComponent(size: componentSize),
  onPressed: () => pressedTimes++,
  onReleased: () => releasedTimes++,
+ onCancelled: () => cancelledTimes++,
  position: buttonPosition,
  size: componentSize,
  ),
  );
 
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapDown(1, createTapDownEvent(game));
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapUp(
  1,
@@ -44,6 +48,7 @@ void main() {
  );
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapDown(
  1,
@@ -54,6 +59,7 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapUp(
  1,
@@ -64,13 +70,27 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 1);
+ expect(cancelledTimes, 0);
+
+ game.onTapDown(
+ 1,
+ createTapDownEvent(
+ game,
+ globalPosition: buttonPosition.toOffset(),
+ ),
+ );
+ game.onTapCancel(1);
+ expect(pressedTimes, 2);
+ expect(releasedTimes, 1);
+ expect(cancelledTimes, 1);
  });
 
  testWithGame<GameWithTappables>(
  'correctly registers taps onGameResize', GameWithTappables.new,
  (game) async {
  var pressedTimes = 0;
  var releasedTimes = 0;
+ var cancelledTimes = 0;
  final initialGameSize = Vector2.all(100);
  final componentSize = Vector2.all(10);
  final buttonPosition = Vector2.all(100);
@@ -81,6 +101,7 @@ void main() {
  button: RectangleComponent(size: componentSize),
  onPressed: () => pressedTimes++,
  onReleased: () => releasedTimes++,
+ onCancelled: () => cancelledTimes++,
  position: buttonPosition,
  size: componentSize,
  ),
@@ -98,6 +119,7 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapUp(
  1,
@@ -108,6 +130,19 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 1);
+ expect(cancelledTimes, 0);
+
+ game.onTapDown(
+ 1,
+ createTapDownEvent(
+ game,
+ globalPosition: previousPosition,
+ ),
+ );
+ game.onTapCancel(1);
+ expect(pressedTimes, 2);
+ expect(releasedTimes, 1);
+ expect(cancelledTimes, 1);
  });
 
  testWidgets(

packages/flame/test/components/hud_button_component_test.dart

@@ -13,6 +13,7 @@ void main() {
  'correctly registers taps', GameWithTappables.new, (game) async {
  var pressedTimes = 0;
  var releasedTimes = 0;
+ var cancelledTimes = 0;
  final initialGameSize = Vector2.all(100);
  final componentSize = Vector2.all(10);
  const margin = EdgeInsets.only(bottom: 10, right: 10);
@@ -23,17 +24,20 @@ void main() {
  button: RectangleComponent(size: componentSize),
  onPressed: () => pressedTimes++,
  onReleased: () => releasedTimes++,
+ onCancelled: () => cancelledTimes++,
  size: componentSize,
  margin: margin,
  ),
  );
 
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapDown(1, createTapDownEvent(game));
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapUp(
  1,
@@ -44,6 +48,7 @@ void main() {
  );
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapDown(
  1,
@@ -56,6 +61,7 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapUp(
  1,
@@ -66,13 +72,29 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 1);
+ expect(cancelledTimes, 0);
+
+ game.onTapDown(
+ 1,
+ createTapDownEvent(
+ game,
+ globalPosition: initialGameSize.toOffset() +
+ margin.bottomRight -
+ const Offset(1, 1),
+ ),
+ );
+ game.onTapCancel(1);
+ expect(pressedTimes, 2);
+ expect(releasedTimes, 1);
+ expect(cancelledTimes, 1);
  });
 
  testWithGame<GameWithTappables>(
  'correctly registers taps onGameResize', GameWithTappables.new,
  (game) async {
  var pressedTimes = 0;
  var releasedTimes = 0;
+ var cancelledTimes = 0;
  final initialGameSize = Vector2.all(100);
  final componentSize = Vector2.all(10);
  const margin = EdgeInsets.only(bottom: 10, right: 10);
@@ -83,6 +105,7 @@ void main() {
  button: RectangleComponent(size: componentSize),
  onPressed: () => pressedTimes++,
  onReleased: () => releasedTimes++,
+ onCancelled: () => cancelledTimes++,
  size: componentSize,
  margin: margin,
  ),
@@ -107,6 +130,7 @@ void main() {
  );
  expect(pressedTimes, 0);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapDown(
  1,
@@ -118,6 +142,7 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 0);
+ expect(cancelledTimes, 0);
 
  game.onTapUp(
  1,
@@ -129,6 +154,20 @@ void main() {
  );
  expect(pressedTimes, 1);
  expect(releasedTimes, 1);
+ expect(cancelledTimes, 0);
+
+ game.onTapDown(
+ 1,
+ createTapDownEvent(
+ game,
+ globalPosition:
+ game.size.toOffset() + margin.bottomRight - const Offset(1, 1),
+ ),
+ );
+ game.onTapCancel(1);
+ expect(pressedTimes, 2);
+ expect(releasedTimes, 1);
+ expect(cancelledTimes, 1);
  });
  });
 }