@blorkfield/overlay-core 0.8.4 → 0.8.6

package/README.md

@@ -323,28 +323,27 @@ For scenarios where mouse input comes from an external source (e.g., system-wide
 const canvasX = screenMouseX - canvasOffsetX;
 const canvasY = screenMouseY - canvasOffsetY;
 scene.setFollowTarget('mouse', canvasX, canvasY);
-
-// This position is now used for:
-// - Objects with 'follow' tag (they move toward this position)
-// - Programmatic grab detection via startGrab()
-// - MouseConstraint during drag (grabbed objects follow this position)
 ```
 
 The offset calculation is your responsibility - overlay-core uses whatever position you provide.
 
 ### Programmatic Grab/Release
 
+Grab uses delta-based movement: when grabbed, the entity and mouse become linked. The entity moves BY the same amount as the mouse moves, not TO the mouse position. This ensures the entity stays at its original position on grab and follows mouse movement naturally.
+
 ```typescript
 // Grab object at current mouse position (only 'grabable' tagged objects)
 const grabbedId = scene.startGrab();
 if (grabbedId) {
+  // Entity stays at its current position, now linked to mouse
   console.log(`Grabbed: ${grabbedId}`);
 }
 
-// Update mouse position while dragging - object follows automatically
+// As mouse moves, entity moves by the same delta
+// Mouse moves +50px right → entity moves +50px right
 scene.setFollowTarget('mouse', newX, newY);
 
-// Release the grabbed object
+// Release unlinks entity from mouse
 scene.endGrab();
 
 // Check what's currently grabbed
@@ -354,9 +353,9 @@ const currentGrab = scene.getGrabbedObject(); // Returns ID or null
 | Method | Returns | Description |
 |--------|---------|-------------|
 | `setFollowTarget('mouse', x, y)` | void | Set mouse position for follow behavior and grab detection |
-| `startGrab()` | string \| null | Grab object at current mouse position, returns object ID |
-| `endGrab()` | void | Release any currently grabbed object |
-| `getGrabbedObject()` | string \| null | Get ID of currently grabbed object |
+| `startGrab()` | string \| null | Link entity at current mouse position to mouse, returns entity ID |
+| `endGrab()` | void | Unlink currently grabbed entity |
+| `getGrabbedObject()` | string \| null | Get ID of currently grabbed entity |
 
 ## Configuration
 

package/dist/index.cjs

@@ -1421,7 +1421,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();
@@ -1443,17 +1442,9 @@ var OverlayScene = class {
     };
     // Follow targets for follow-{key} tagged objects
     this.followTargets = /* @__PURE__ */ new Map();
-    /** 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 (no constraint physics)
+    this.grabbedObjectId = null;
+    this.lastGrabMousePosition = null;
     /** Handle canvas clicks for click-to-fall behavior */
     this.handleCanvasClick = (event) => {
       const rect = this.canvas.getBoundingClientRect();
@@ -1518,8 +1509,20 @@ 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) {
+            import_matter_js5.default.Body.translate(entry.body, { x: dx, y: dy });
+          }
+          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;
@@ -1567,24 +1570,7 @@ var OverlayScene = class {
     import_matter_js5.default.Composite.add(this.engine.world, this.boundaries);
     this.checkInitialFloorIntegrity();
     this.mouse = import_matter_js5.default.Mouse.create(canvas);
-    this.mouseConstraint = import_matter_js5.default.MouseConstraint.create(this.engine, {
-      mouse: this.mouse,
-      constraint: {
-        stiffness: 0.2,
-        render: { visible: false }
-      }
-    });
-    import_matter_js5.default.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";
-    import_matter_js5.default.Events.on(this.mouseConstraint, "startdrag", this.handleStartDrag);
     canvas.addEventListener("click", this.handleCanvasClick);
-    this.render.mouse = this.mouse;
     this.effectManager = new EffectManager(
       this.config.bounds,
       (cfg) => this.spawnObjectAsync(cfg),
@@ -2006,9 +1992,6 @@ var OverlayScene = class {
   }
   destroy() {
     this.stop();
-    if (this.mouseConstraint) {
-      import_matter_js5.default.Events.off(this.mouseConstraint, "startdrag", this.handleStartDrag);
-    }
     this.canvas.removeEventListener("click", this.handleCanvasClick);
     import_matter_js5.default.Events.off(this.render, "beforeRender", this.handleBeforeRender);
     import_matter_js5.default.Events.off(this.render, "afterRender", this.handleAfterRender);
@@ -2336,12 +2319,6 @@ var OverlayScene = class {
    */
   setFollowTarget(key, x, y) {
     this.followTargets.set(key, { x, y });
-    if (key === "mouse" && this.mouse) {
-      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.
@@ -2366,9 +2343,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 = import_matter_js5.default.Query.point(
       import_matter_js5.default.Composite.allBodies(this.engine.world),
       position
@@ -2376,18 +2353,8 @@ var OverlayScene = class {
     for (const body of bodies) {
       const entry = this.findObjectByBody(body);
       if (entry && entry.tags.includes("grabable")) {
-        this.mouse.button = 0;
-        this.mouseConstraint.constraint.pointA = { x: position.x, y: position.y };
-        this.mouseConstraint.constraint.bodyB = entry.body;
-        this.mouseConstraint.constraint.pointB = { x: 0, y: 0 };
-        console.log("[overlay-core] startGrab success", {
-          entityId: entry.id,
-          mousePosition: position,
-          bodyPosition: { x: entry.body.position.x, y: entry.body.position.y },
-          constraintPointA: this.mouseConstraint.constraint.pointA,
-          constraintPointB: this.mouseConstraint.constraint.pointB,
-          mouseButton: this.mouse.button
-        });
+        this.grabbedObjectId = entry.id;
+        this.lastGrabMousePosition = { x: position.x, y: position.y };
         return entry.id;
       }
     }
@@ -2397,21 +2364,15 @@ var OverlayScene = class {
    * Release any currently grabbed object.
    */
   endGrab() {
-    if (this.mouseConstraint) {
-      this.mouseConstraint.constraint.bodyB = null;
-    }
-    if (this.mouse) {
-      this.mouse.button = -1;
-    }
+    this.grabbedObjectId = null;
+    this.lastGrabMousePosition = null;
   }
   /**
    * 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 ====================
   /**