@blorkfield/overlay-core 0.8.5 → 0.8.7

package/dist/index.d.cts

@@ -537,7 +537,6 @@ declare class OverlayScene {
     private config;
     private animationFrameId;
     private mouse;
-    private mouseConstraint;
     private effectManager;
     private fonts;
     private fontsInitialized;
@@ -551,14 +550,21 @@ declare class OverlayScene {
     private backgroundManager;
     private lifecycleCallbacks;
     private followTargets;
-    private grabState;
+    private grabbedObjectId;
+    private lastGrabMousePosition;
+    private grabbedWasDynamic;
+    private grabVelocity;
     static createContainer(parent: HTMLElement, options?: ContainerOptions): {
         canvas: HTMLCanvasElement;
         bounds: Bounds;
     };
     constructor(canvas: HTMLCanvasElement, config: OverlaySceneConfig);
-    /** Filter drag events - only allow grabbing objects with 'grabable' tag */
-    private handleStartDrag;
+    /** Handle mouse down - start grab via programmatic API */
+    private handleMouseDown;
+    /** Handle mouse move - update follow target for grabbed entity */
+    private handleMouseMove;
+    /** Handle mouse up - release grab */
+    private handleMouseUp;
     /** Handle canvas clicks for click-to-fall behavior */
     private handleCanvasClick;
     /**

package/dist/index.d.ts

@@ -537,7 +537,6 @@ declare class OverlayScene {
     private config;
     private animationFrameId;
     private mouse;
-    private mouseConstraint;
     private effectManager;
     private fonts;
     private fontsInitialized;
@@ -551,14 +550,21 @@ declare class OverlayScene {
     private backgroundManager;
     private lifecycleCallbacks;
     private followTargets;
-    private grabState;
+    private grabbedObjectId;
+    private lastGrabMousePosition;
+    private grabbedWasDynamic;
+    private grabVelocity;
     static createContainer(parent: HTMLElement, options?: ContainerOptions): {
         canvas: HTMLCanvasElement;
         bounds: Bounds;
     };
     constructor(canvas: HTMLCanvasElement, config: OverlaySceneConfig);
-    /** Filter drag events - only allow grabbing objects with 'grabable' tag */
-    private handleStartDrag;
+    /** Handle mouse down - start grab via programmatic API */
+    private handleMouseDown;
+    /** Handle mouse move - update follow target for grabbed entity */
+    private handleMouseMove;
+    /** Handle mouse up - release grab */
+    private handleMouseUp;
     /** Handle canvas clicks for click-to-fall behavior */
     private handleCanvasClick;
     /**

package/dist/index.js

@@ -1376,7 +1376,6 @@ var OverlayScene = class {
     this.updateCallbacks = [];
     this.animationFrameId = null;
     this.mouse = null;
-    this.mouseConstraint = null;
     this.fonts = [];
     this.fontsInitialized = false;
     this.letterDebugInfo = /* @__PURE__ */ new Map();
@@ -1398,18 +1397,29 @@ var OverlayScene = class {
     };
     // Follow targets for follow-{key} tagged objects
     this.followTargets = /* @__PURE__ */ new Map();
-    // Programmatic grab state - tracks initial positions for relative movement
-    this.grabState = null;
-    /** Filter drag events - only allow grabbing objects with 'grabable' tag */
-    this.handleStartDrag = (event) => {
-      const body = event.body;
-      if (!body) return;
-      const entry = this.findObjectByBody(body);
-      if (!entry || !entry.tags.includes("grabable")) {
-        if (this.mouseConstraint) {
-          this.mouseConstraint.constraint.bodyB = null;
-        }
-      }
+    // Delta-based grab tracking
+    this.grabbedObjectId = null;
+    this.lastGrabMousePosition = null;
+    this.grabbedWasDynamic = false;
+    this.grabVelocity = { x: 0, y: 0 };
+    /** Handle mouse down - start grab via programmatic API */
+    this.handleMouseDown = (event) => {
+      const rect = this.canvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      this.followTargets.set("mouse", { x, y });
+      this.startGrab();
+    };
+    /** Handle mouse move - update follow target for grabbed entity */
+    this.handleMouseMove = (event) => {
+      const rect = this.canvas.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      this.followTargets.set("mouse", { x, y });
+    };
+    /** Handle mouse up - release grab */
+    this.handleMouseUp = () => {
+      this.endGrab();
     };
     /** Handle canvas clicks for click-to-fall behavior */
     this.handleCanvasClick = (event) => {
@@ -1475,8 +1485,21 @@ var OverlayScene = class {
       if (!this.followTargets.has("mouse") && this.mouse) {
         this.followTargets.set("mouse", { x: this.mouse.position.x, y: this.mouse.position.y });
       }
+      if (this.grabbedObjectId && this.lastGrabMousePosition) {
+        const entry = this.objects.get(this.grabbedObjectId);
+        const mouseTarget = this.followTargets.get("mouse");
+        if (entry && mouseTarget) {
+          const dx = mouseTarget.x - this.lastGrabMousePosition.x;
+          const dy = mouseTarget.y - this.lastGrabMousePosition.y;
+          if (dx !== 0 || dy !== 0) {
+            Matter5.Body.translate(entry.body, { x: dx, y: dy });
+          }
+          this.grabVelocity = { x: dx * 0.5 + this.grabVelocity.x * 0.5, y: dy * 0.5 + this.grabVelocity.y * 0.5 };
+          this.lastGrabMousePosition = { x: mouseTarget.x, y: mouseTarget.y };
+        }
+      }
       for (const entry of this.objects.values()) {
-        const isDragging = this.mouseConstraint?.body === entry.body;
+        const isDragging = this.grabbedObjectId === entry.id;
         if (!isDragging) {
           for (const tag of entry.tags) {
             const key = tag === "follow" ? "mouse" : tag.startsWith("follow-") ? tag.slice(7) : null;
@@ -1524,24 +1547,10 @@ var OverlayScene = class {
     Matter5.Composite.add(this.engine.world, this.boundaries);
     this.checkInitialFloorIntegrity();
     this.mouse = Matter5.Mouse.create(canvas);
-    this.mouseConstraint = Matter5.MouseConstraint.create(this.engine, {
-      mouse: this.mouse,
-      constraint: {
-        stiffness: 0.2,
-        render: { visible: false }
-      }
-    });
-    Matter5.Composite.add(this.engine.world, this.mouseConstraint);
-    const wheelHandler = this.mouse.mousewheel;
-    if (wheelHandler) {
-      canvas.removeEventListener("mousewheel", wheelHandler);
-      canvas.removeEventListener("DOMMouseScroll", wheelHandler);
-      canvas.removeEventListener("wheel", wheelHandler);
-    }
-    canvas.style.touchAction = "pan-x pan-y";
-    Matter5.Events.on(this.mouseConstraint, "startdrag", this.handleStartDrag);
+    canvas.addEventListener("mousedown", this.handleMouseDown);
+    canvas.addEventListener("mousemove", this.handleMouseMove);
+    canvas.addEventListener("mouseup", this.handleMouseUp);
     canvas.addEventListener("click", this.handleCanvasClick);
-    this.render.mouse = this.mouse;
     this.effectManager = new EffectManager(
       this.config.bounds,
       (cfg) => this.spawnObjectAsync(cfg),
@@ -1963,9 +1972,9 @@ var OverlayScene = class {
   }
   destroy() {
     this.stop();
-    if (this.mouseConstraint) {
-      Matter5.Events.off(this.mouseConstraint, "startdrag", this.handleStartDrag);
-    }
+    this.canvas.removeEventListener("mousedown", this.handleMouseDown);
+    this.canvas.removeEventListener("mousemove", this.handleMouseMove);
+    this.canvas.removeEventListener("mouseup", this.handleMouseUp);
     this.canvas.removeEventListener("click", this.handleCanvasClick);
     Matter5.Events.off(this.render, "beforeRender", this.handleBeforeRender);
     Matter5.Events.off(this.render, "afterRender", this.handleAfterRender);
@@ -2293,23 +2302,6 @@ var OverlayScene = class {
    */
   setFollowTarget(key, x, y) {
     this.followTargets.set(key, { x, y });
-    if (key === "mouse" && this.mouse) {
-      if (this.grabState && this.mouseConstraint?.constraint.bodyB) {
-        const deltaX = x - this.grabState.grabMouseX;
-        const deltaY = y - this.grabState.grabMouseY;
-        const newX = this.grabState.grabBodyX + deltaX;
-        const newY = this.grabState.grabBodyY + deltaY;
-        this.mouse.position.x = newX;
-        this.mouse.position.y = newY;
-        this.mouse.absolute.x = newX;
-        this.mouse.absolute.y = newY;
-      } else {
-        this.mouse.position.x = x;
-        this.mouse.position.y = y;
-        this.mouse.absolute.x = x;
-        this.mouse.absolute.y = y;
-      }
-    }
   }
   /**
    * Remove a follow target. Objects with the corresponding tag will stop following.
@@ -2334,9 +2326,9 @@ var OverlayScene = class {
    * @returns The ID of the grabbed object, or null if no grabable object at position
    */
   startGrab() {
-    if (!this.mouseConstraint || !this.mouse) return null;
     const mouseTarget = this.followTargets.get("mouse");
-    const position = mouseTarget ?? { x: this.mouse.position.x, y: this.mouse.position.y };
+    const position = mouseTarget ?? (this.mouse ? { x: this.mouse.position.x, y: this.mouse.position.y } : null);
+    if (!position) return null;
     const bodies = Matter5.Query.point(
       Matter5.Composite.allBodies(this.engine.world),
       position
@@ -2344,30 +2336,11 @@ var OverlayScene = class {
     for (const body of bodies) {
       const entry = this.findObjectByBody(body);
       if (entry && entry.tags.includes("grabable")) {
-        this.mouse.button = 0;
-        this.grabState = {
-          entityId: entry.id,
-          grabMouseX: position.x,
-          grabMouseY: position.y,
-          grabBodyX: entry.body.position.x,
-          grabBodyY: entry.body.position.y
-        };
-        this.mouseConstraint.constraint.pointA = {
-          x: entry.body.position.x,
-          y: entry.body.position.y
-        };
-        this.mouseConstraint.constraint.bodyB = entry.body;
-        this.mouseConstraint.constraint.pointB = { x: 0, y: 0 };
-        this.mouse.position.x = entry.body.position.x;
-        this.mouse.position.y = entry.body.position.y;
-        this.mouse.absolute.x = entry.body.position.x;
-        this.mouse.absolute.y = entry.body.position.y;
-        console.log("[overlay-core] startGrab success", {
-          entityId: entry.id,
-          mousePosition: position,
-          bodyPosition: { x: entry.body.position.x, y: entry.body.position.y },
-          grabState: this.grabState
-        });
+        this.grabbedObjectId = entry.id;
+        this.lastGrabMousePosition = { x: position.x, y: position.y };
+        this.grabVelocity = { x: 0, y: 0 };
+        this.grabbedWasDynamic = !entry.body.isStatic;
+        Matter5.Body.setStatic(entry.body, true);
         return entry.id;
       }
     }
@@ -2377,22 +2350,26 @@ var OverlayScene = class {
    * Release any currently grabbed object.
    */
   endGrab() {
-    if (this.mouseConstraint) {
-      this.mouseConstraint.constraint.bodyB = null;
-    }
-    if (this.mouse) {
-      this.mouse.button = -1;
+    if (this.grabbedObjectId && this.grabbedWasDynamic) {
+      const entry = this.objects.get(this.grabbedObjectId);
+      if (entry) {
+        Matter5.Body.setStatic(entry.body, false);
+        Matter5.Sleeping.set(entry.body, false);
+        Matter5.Body.setVelocity(entry.body, this.grabVelocity);
+        Matter5.Body.setAngularVelocity(entry.body, 0);
+      }
     }
-    this.grabState = null;
+    this.grabbedObjectId = null;
+    this.lastGrabMousePosition = null;
+    this.grabbedWasDynamic = false;
+    this.grabVelocity = { x: 0, y: 0 };
   }
   /**
    * Get the ID of the currently grabbed object.
    * @returns The ID of the grabbed object, or null if nothing is grabbed
    */
   getGrabbedObject() {
-    if (!this.mouseConstraint?.constraint.bodyB) return null;
-    const entry = this.findObjectByBody(this.mouseConstraint.constraint.bodyB);
-    return entry?.id ?? null;
+    return this.grabbedObjectId;
   }
   // ==================== PHYSICS MANIPULATION METHODS ====================
   /**