hypercross
/
boardgame-phaser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(framework): support multi-button drag and drop 

Adds support for tracking the specific mouse button used during
drag-and-drop operations. This includes a new `ALTBUTTON` event type
to handle cases where a different button is pressed while a drag is
already in progress, and disables the browser context menu by default
in the Phaser configuration to prevent interference.
This commit is contained in:
hypercross 2026-04-20 20:33:56 +08:00
parent fd347e7a62
commit cc796d1e11
2 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/framework/src/ui/PhaserBridge.tsx
View File

@ -37,6 +37,7 @@ export const defaultPhaserConfig: Phaser.Types.Core.GameConfig = {
parent: "phaser-container", parent: "phaser-container",
backgroundColor: "#f9fafb", backgroundColor: "#f9fafb",
scene: [], scene: [],
disableContextMenu: true,
}; };
export interface PhaserGameProps { export interface PhaserGameProps {

36
packages/framework/src/utils/dnd.ts
View File

@ -2,6 +2,7 @@
type PointerRecord = { type PointerRecord = {
id: number; id: number;
button: number;
x: number; x: number;
y: number; y: number;
}; };
@ -10,6 +11,7 @@ export enum DragDropEventType {
DOWN, DOWN,
UP, UP,
MOVE, MOVE,
ALTBUTTON,
} }
export type DragDropEvent = { export type DragDropEvent = {
@ -29,9 +31,22 @@ export function dragDropEventEffect(
let down: PointerRecord | null = null; let down: PointerRecord | null = null;
function onPointerDown(pointer: Phaser.Input.Pointer) { function onPointerDown(pointer: Phaser.Input.Pointer) {
if (isDragging) return; if (down !== null) {
if (pointer.button === down.button) return;
callback({
type: DragDropEventType.ALTBUTTON,
deltaX: pointer.x - down.x,
deltaY: pointer.y - down.y,
});
return;
}
isDragging = true; isDragging = true;
down = { id: pointer.id, x: pointer.x, y: pointer.y }; down = {
id: pointer.id,
button: pointer.button,
x: pointer.x,
y: pointer.y,
};
const event: DragDropEvent = { const event: DragDropEvent = {
type: DragDropEventType.DOWN, type: DragDropEventType.DOWN,
@ -42,12 +57,23 @@ export function dragDropEventEffect(
} }
function onPointerUp(pointer: Phaser.Input.Pointer) { function onPointerUp(pointer: Phaser.Input.Pointer) {
if (!isDragging || !down || pointer.id !== down.id) return; if (
!isDragging ||
!down ||
pointer.id !== down.id ||
pointer.button !== down.button
)
return;
isDragging = false;
const deltaX = pointer.x - down.x; const deltaX = pointer.x - down.x;
const deltaY = pointer.y - down.y; const deltaY = pointer.y - down.y;
const event: DragDropEvent = { type: DragDropEventType.UP, deltaX, deltaY };
isDragging = false;
const event: DragDropEvent = {
type: DragDropEventType.UP,
deltaX,
deltaY,
};
callback(event); callback(event);
down = null; down = null;
} }