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

Refactor dnd utility and add drag lifecycle events 

Attach pointerup and pointermove listeners to scene.input
for reliable tracking. Emit dragstart, dragmove, and
dragend events alongside drag. Rename relativeX/Y to
deltaX/Y in DragDropEvent and integrate DisposableBag.
This commit is contained in:
hypercross 2026-04-18 23:33:13 +08:00
parent eefcef861a
commit d993d55576
1 changed files with 73 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,70 +1,80 @@
type PointerRecord = { import { DisposableBag } from "./disposable";
id: number;
x: number; type PointerRecord = {
y: number; id: number;
} x: number;
y: number;
};
export enum DragDropEventType { export enum DragDropEventType {
DOWN, DOWN,
UP, UP,
MOVE, MOVE,
} }
export type DragDropEvent = { export type DragDropEvent = {
type: DragDropEventType, type: DragDropEventType;
relativeX: number; deltaX: number;
relativeY: number; deltaY: number;
} };
export function dragDropEventEffect( export function dragDropEventEffect(
gameObject: Phaser.GameObjects.GameObject, gameObject: Phaser.GameObjects.GameObject,
) { disposables?: DisposableBag,
let down: PointerRecord | null; ): () => void {
let up: PointerRecord | null; let isDragging = false;
let down: PointerRecord | null = null;
function onPointerDown(pointer: Phaser.Input.Pointer) { function onPointerDown(pointer: Phaser.Input.Pointer) {
down = { if (isDragging) return;
id: pointer.id, isDragging = true;
x: pointer.x, down = { id: pointer.id, x: pointer.x, y: pointer.y };
y: pointer.y
}
up = null;
const type = DragDropEventType.DOWN; const event: DragDropEvent = {
const relativeX = pointer.x - down.x; type: DragDropEventType.DOWN,
const relativeY = pointer.y - down.y; deltaX: 0,
gameObject.emit('drag', {type, relativeX, relativeY}); deltaY: 0,
} };
gameObject.emit("drag", event);
gameObject.emit("dragstart", event);
}
function onPointerUp(pointer: Phaser.Input.Pointer) { function onPointerUp(pointer: Phaser.Input.Pointer) {
if(!down) return; if (!isDragging || !down || pointer.id !== down.id) return;
up = {
id: pointer.id,
x: pointer.x,
y: pointer.y
}
const type = DragDropEventType.UP; isDragging = false;
const relativeX = pointer.x - down.x; const deltaX = pointer.x - down.x;
const relativeY = pointer.y - down.y; const deltaY = pointer.y - down.y;
gameObject.emit('drag', {type, relativeX, relativeY}); const event: DragDropEvent = { type: DragDropEventType.UP, deltaX, deltaY };
} gameObject.emit("drag", event);
gameObject.emit("dragend", event);
down = null;
}
function onPointerMove(pointer: Phaser.Input.Pointer) { function onPointerMove(pointer: Phaser.Input.Pointer) {
if(!down || up) return; if (!isDragging || !down || pointer.id !== down.id) return;
if(down.id !== pointer.id) return;
const type = DragDropEventType.MOVE; const deltaX = pointer.x - down.x;
const relativeX = pointer.x - down.x; const deltaY = pointer.y - down.y;
const relativeY = pointer.y - down.y; const event: DragDropEvent = {
gameObject.emit('drag', {type, relativeX, relativeY}); type: DragDropEventType.MOVE,
} deltaX,
deltaY,
};
gameObject.emit("drag", event);
gameObject.emit("dragmove", event);
}
gameObject.on('pointerdown', onPointerDown); gameObject.on("pointerdown", onPointerDown);
gameObject.on('pointerup', onPointerUp); gameObject.scene.input.on("pointerup", onPointerUp);
gameObject.scene.input.on('pointermove', onPointerMove); gameObject.scene.input.on("pointermove", onPointerMove);
return function () {
gameObject.off('pointerdown', onPointerDown); const dispose = () => {
gameObject.off('pointerup', onPointerUp); gameObject.off("pointerdown", onPointerDown);
gameObject.scene.input.off('pointermove', onPointerMove); gameObject.scene.input.off("pointerup", onPointerUp);
} gameObject.scene.input.off("pointermove", onPointerMove);
};
disposables?.add(dispose);
return dispose;
} }