✨Implemented DragProcessor

now we can drag things around, great!

README.md

@@ -20,7 +20,7 @@ This will start the demo at `http://localhost:1245`, and you can play with the `
 Currently this demo only supports:
 
 1. Display two squares on the screen.
-2. Respond to mouse clicks - it will log out the nodes being clicked in the console.
+2. Respond to pointer events - you can drag the squares around!
 
 > You can also visit [here](https://cfb-web.deno.dev/), which is hosted by `deno deploy`,
 > to play around with the demo.

cfb-core/src/event/impl.ts

@@ -1,4 +1,5 @@
 export * from "./pointer/base.ts";
+export * from "./pointer/drag.ts";
 
 import type { IEventHandler, IEventSystem } from "./types.ts";
 import type { IWorld } from "../world.ts";

cfb-core/src/event/pointer/drag.ts

@@ -0,0 +1,48 @@
+import type { IPointerData, PointerEventTypes } from "./base.ts";
+import type { Point } from "../../toolkit.ts";
+import type { ISingleNodeR } from "../../nodes.ts";
+import type { IWorld } from "../../world.ts";
+
+import { PointerProcessorBase, registerPointerProcessor } from "./base.ts";
+import { DirtyStatus } from "../../board.ts";
+
+class DragProcessor extends PointerProcessorBase<PointerEventTypes, IWorld> {
+  private pointer: Point | null = null;
+  private pointed: ISingleNodeR | null = null;
+
+  exec(data: IPointerData<PointerEventTypes, IWorld>): Promise<void> {
+    if (data.type === "onPointerDown") {
+      const allPointed = this.getPointed(data);
+      if (allPointed.length === 0) {
+        this.reset();
+      } else {
+        this.pointer = this.getPointer(data.e);
+        this.pointed = allPointed.sort((a, b) => a.node.z - b.node.z)[0].node;
+      }
+    } else if (data.type === "onPointerMove") {
+      if (this.pointer && this.pointed) {
+        const newPointer = this.getPointer(data.e);
+        this.pointed.position = this.pointed.lt.add(newPointer.subtract(this.pointer));
+        this.pointer = newPointer;
+        data.world.renderer.board.get(this.pointed.alias).setDirtyStatus(
+          DirtyStatus.TRANSFORM_DIRTY,
+        );
+      }
+    } else if (data.type === "onPointerUp") {
+      this.reset();
+    }
+    return Promise.resolve();
+  }
+
+  private reset(): void {
+    this.pointed = null;
+    this.pointer = null;
+  }
+}
+
+const dragProcessor: DragProcessor = new DragProcessor();
+export function registerDragPRocessor(): void {
+  registerPointerProcessor("onPointerDown", dragProcessor);
+  registerPointerProcessor("onPointerMove", dragProcessor);
+  registerPointerProcessor("onPointerUp", dragProcessor);
+}

cfb-web/src/event/pointer.ts

@@ -1,17 +1,3 @@
-import type { IPointerData, IPointerProcessor } from "@carefree0910/cfb-core";
-import type { WebWorld } from "../world.ts";
+import { registerDragPRocessor } from "@carefree0910/cfb-core";
 
-import { Point, registerPointerProcessor } from "@carefree0910/cfb-core";
-
-export class PointerDownProcessor
-  implements IPointerProcessor<"onPointerDown", WebWorld> {
-  exec({ e, world }: IPointerData<"onPointerDown", WebWorld>): Promise<void> {
-    const graph = world.renderer.board.graph;
-    const point = new Point(e.clientX, e.clientY);
-    const pointed = graph.allSingleNodes.filter((gnode) => point.in(gnode.node.bbox));
-    console.log(pointed);
-    return Promise.resolve();
-  }
-}
-
-registerPointerProcessor("onPointerDown", new PointerDownProcessor());
+registerDragPRocessor();