flutter/flame
1
0
Fork 0
mirror of https://github.com/flame-engine/flame.git synced 2025-11-02 20:13:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat!: Support secondary taps (right click) on new callbacks system (#3741)

Browse Source 
Support secondary taps (right click) on new callbacks system.

In order to follow through with our [event system
migration](https://docs.google.com/document/d/1nBUup9QCPioVwWL1zs79z1hWF882tAYfNywFMdye2Qc),
we need to make sure the new system is equipped to support all use
cases; also changes the existing TapCallbacks to be primary-only.

I noticed that we don't support "secondary taps" (i.e. right clicks), so
I am adding this. I honestly really dislike the fact that this is
considered a completely different event from the left click, instead of
just a property on the click event. But I kept this structure to
replicate what Flutter does, so this is more familiar for users. I think
that is worth the slight verbosity of having yet another detector. Also,
it plays well this way with Flutter because that underlying events are a
bit different (for example, the secondary ones don't support `pointId`).

Note: this is a slight breaking change because the existing detector
works for BOTH left and right click, but there is NO WAY of
distinguishing them because the `buttons` property is not propagated in
the Flutter end (massive oversight I believe - might put a PR later).
Since this provides the secondary as a solution, it also removes
secondary clicks from triggering the primary. I think this is more
versatile than having tap detector=`(primary OR secondary)` and
secondary=`(secondary only)`.

I don't think this should affect basically any users because (1) desktop
only and (2) this acceptance of right clicks was probably a bug anyway
(for example, on the example it would rotate the square and also open
the context menu, which is jarring).

However I am happy to add an option or pursue a different approach, I
believe this is the best path forward, IMO.
This commit is contained in:
Luan Nico
2025-10-06 08:11:31 -07:00
committed by GitHub
parent 8534a55740
commit 46bd385675
12 changed files with 593 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
examples/lib/stories/input/secondary_tap_callbacks_example.dart Normal file
View File

@ -0,0 +1,63 @@
import 'package:flame/components.dart';
import 'package:flame/events.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/palette.dart';
import 'package:flutter/material.dart';
class SecondaryTapCallbacksExample extends FlameGame {
static const String description = '''
In this example we show how to listen to both primary (left) and
secondary (right) tap events using the `TapCallbacks` and
the `SecondaryTapCallbacks` mixin to any `PositionComponent`.\n\n
The squares will change color depending on which button was used to tap them.
''';
@override
Future<void> onLoad() async {
world.add(TappableSquare()..anchor = Anchor.center);
world.add(TappableSquare()..y = 350);
}
}
class TappableSquare extends PositionComponent
with TapCallbacks, SecondaryTapCallbacks {
static final Paint _red = BasicPalette.red.paint();
static final Paint _blue = BasicPalette.blue.paint();
static final TextPaint _text = TextPaint(
style: TextStyle(color: BasicPalette.white.color, fontSize: 24),
);
int counter = 0;
Paint _paint = _red;
TappableSquare({Vector2? position})
: super(
position: position ?? Vector2.all(100),
size: Vector2.all(100),
anchor: Anchor.center,
);
@override
void render(Canvas canvas) {
canvas.drawRect(size.toRect(), _paint);
_text.render(
canvas,
'$counter',
size / 2,
anchor: Anchor.center,
);
}
@override
void onTapDown(_) {
_paint = _red;
counter++;
}
@override
void onSecondaryTapDown(_) {
_paint = _blue;
counter++;
}
}