feat: dnd

packages/framework/src/index.ts

@@ -2,6 +2,10 @@
 export { DisposableBag } from './utils';
 export type { IDisposable, DisposableItem } from './utils';
 
+// Drag & drop utilities
+export { dragDropEventEffect, DragDropEventType } from './utils';
+export type { DragDropEvent } from './utils';
+
 // Data-driven object spawning
 export { spawnEffect } from './spawner';
 export type { Spawner } from './spawner';

packages/framework/src/utils/dnd.ts

@@ -0,0 +1,70 @@
+type PointerRecord = {
+    id: number;
+    x: number;
+    y: number;
+}
+
+export enum DragDropEventType {
+    DOWN,
+    UP,
+    MOVE,
+}
+export type DragDropEvent = {
+    type: DragDropEventType,
+    relativeX: number;
+    relativeY: number;
+}
+
+export function dragDropEventEffect(
+    gameObject: Phaser.GameObjects.GameObject,
+) { 
+    let down: PointerRecord | null;
+    let up: PointerRecord | null;
+    
+    function onPointerDown(pointer: Phaser.Input.Pointer) {
+        down = {
+            id: pointer.id,
+            x: pointer.x,
+            y: pointer.y
+        }
+        up = null;
+        
+        const type = DragDropEventType.DOWN;
+        const relativeX = pointer.x - down.x;
+        const relativeY = pointer.y - down.y;
+        gameObject.emit('drag', {type, relativeX, relativeY});
+    }
+    
+    function onPointerUp(pointer: Phaser.Input.Pointer) {
+        if(!down) return;
+        up = {
+            id: pointer.id,
+            x: pointer.x,
+            y: pointer.y
+        }
+        
+        const type = DragDropEventType.UP;
+        const relativeX = pointer.x - down.x;
+        const relativeY = pointer.y - down.y;
+        gameObject.emit('drag', {type, relativeX, relativeY});
+    }
+    
+    function onPointerMove(pointer: Phaser.Input.Pointer) {
+        if(!down || up) return;
+        if(down.id !== pointer.id) return;
+        
+        const type = DragDropEventType.MOVE;
+        const relativeX = pointer.x - down.x;
+        const relativeY = pointer.y - down.y;
+        gameObject.emit('drag', {type, relativeX, relativeY});
+    }
+
+    gameObject.on('pointerdown', onPointerDown);
+    gameObject.on('pointerup', onPointerUp);
+    gameObject.scene.input.on('pointermove', onPointerMove);
+    return function () {
+        gameObject.off('pointerdown', onPointerDown);
+        gameObject.off('pointerup', onPointerUp);
+        gameObject.scene.input.off('pointermove', onPointerMove);
+    }
+}

packages/framework/src/utils/index.ts

@@ -1,2 +1,3 @@
 export { DisposableBag } from './disposable';
 export type { IDisposable, DisposableItem } from './disposable';
+export { dragDropEventEffect, DragDropEventType, type DragDropEvent } from './dnd';