@blorkfield/overlay-core 0.8.9 → 0.8.11

package/README.md

@@ -389,6 +389,8 @@ The offset calculation is your responsibility - overlay-core uses whatever posit
 
 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.
 
+Grab detection uses a two-pass approach to handle fast-moving bodies. The first pass does an exact point query at the click position. If that misses (the body tunneled through the cursor between frames), a second pass sweeps the body's recent position history (last 5 frames, 20px radius) to catch it. This means you can grab entities even when they are moving quickly.
+
 ```typescript
 // Grab object at current mouse position (only 'grabable' tagged objects)
 const grabbedId = scene.startGrab();

package/dist/index.cjs

@@ -1424,7 +1424,6 @@ var OverlayScene = class {
     this.boundaries = [];
     this.updateCallbacks = [];
     this.animationFrameId = null;
-    this.mouse = null;
     this.fonts = [];
     this.fontsInitialized = false;
     this.letterDebugInfo = /* @__PURE__ */ new Map();
@@ -1451,6 +1450,12 @@ var OverlayScene = class {
     this.lastGrabMousePosition = null;
     this.grabbedWasDynamic = false;
     this.grabVelocity = { x: 0, y: 0 };
+    // Position history for sweep-based grab detection (catches fast-moving bodies)
+    this.bodyPositionHistory = /* @__PURE__ */ new Map();
+    this.grabHistoryFrames = 5;
+    this.grabHistoryRadius = 20;
+    // Number of physics substeps per frame — more substeps = better collision at high speeds, more CPU
+    this.substeps = 2;
     /** Handle mouse down - start grab via programmatic API */
     this.handleMouseDown = (event) => {
       const rect = this.canvas.getBoundingClientRect();
@@ -1527,13 +1532,14 @@ var OverlayScene = class {
     };
     // ==================== PRIVATE ====================
     this.loop = () => {
+      const substepDelta = 1e3 / 60 / this.substeps;
+      for (let i = 0; i < this.substeps; i++) {
+        import_matter_js5.default.Engine.update(this.engine, substepDelta);
+      }
       this.effectManager.update();
       this.checkTTLExpiration();
       this.checkDespawnBelowFloor();
       this.updatePressure();
-      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");
@@ -1570,6 +1576,14 @@ var OverlayScene = class {
         if (entry.domElement && entry.tags.includes("falling")) {
           this.updateDOMElementTransform(entry);
         }
+        if (entry.tags.includes("grabable") && !entry.body.isStatic) {
+          const history = this.bodyPositionHistory.get(entry.body.id) ?? [];
+          history.push({ x: entry.body.position.x, y: entry.body.position.y });
+          if (history.length > this.grabHistoryFrames) {
+            history.shift();
+          }
+          this.bodyPositionHistory.set(entry.body.id, history);
+        }
       }
       if (!this.config.debug) {
         this.drawTTFGlyphs();
@@ -1595,7 +1609,6 @@ var OverlayScene = class {
     this.floorSegments = boundariesResult.floorSegments;
     import_matter_js5.default.Composite.add(this.engine.world, this.boundaries);
     this.checkInitialFloorIntegrity();
-    this.mouse = import_matter_js5.default.Mouse.create(canvas);
     canvas.addEventListener("mousedown", this.handleMouseDown);
     canvas.addEventListener("mousemove", this.handleMouseMove);
     canvas.addEventListener("mouseup", this.handleMouseUp);
@@ -1831,7 +1844,7 @@ var OverlayScene = class {
       }
     }
     if (parts.length > 0) {
-      console.log("[Pressure]", parts.join(" "));
+      logger.debug("[Pressure]", parts.join(" "));
     }
   }
   /** Calculate weighted pressure from a set of object IDs */
@@ -2008,7 +2021,6 @@ var OverlayScene = class {
   }
   start() {
     import_matter_js5.default.Render.run(this.render);
-    import_matter_js5.default.Runner.run(this.runner, this.engine);
     this.loop();
   }
   stop() {
@@ -2375,13 +2387,13 @@ var OverlayScene = class {
    * @returns The ID of the grabbed object, or null if no grabable object at position
    */
   startGrab() {
-    const mouseTarget = this.followTargets.get("mouse");
-    const position = mouseTarget ?? (this.mouse ? { x: this.mouse.position.x, y: this.mouse.position.y } : null);
+    const position = this.followTargets.get("mouse") ?? null;
     if (!position) return null;
     const bodies = import_matter_js5.default.Query.point(
       import_matter_js5.default.Composite.allBodies(this.engine.world),
       position
     );
+    logger.debug("OverlayScene", "Grabbed position " + position + ', had "' + bodies.length + '"');
     for (const body of bodies) {
       const entry = this.findObjectByBody(body);
       if (entry && entry.tags.includes("grabable")) {
@@ -2393,6 +2405,24 @@ var OverlayScene = class {
         return entry.id;
       }
     }
+    const r2 = this.grabHistoryRadius * this.grabHistoryRadius;
+    for (const entry of this.objects.values()) {
+      if (!entry.tags.includes("grabable")) continue;
+      const history = this.bodyPositionHistory.get(entry.body.id);
+      if (!history) continue;
+      for (const pastPos of history) {
+        const dx = position.x - pastPos.x;
+        const dy = position.y - pastPos.y;
+        if (dx * dx + dy * dy <= r2) {
+          this.grabbedObjectId = entry.id;
+          this.lastGrabMousePosition = { x: position.x, y: position.y };
+          this.grabVelocity = { x: 0, y: 0 };
+          this.grabbedWasDynamic = !entry.body.isStatic;
+          import_matter_js5.default.Body.setStatic(entry.body, true);
+          return entry.id;
+        }
+      }
+    }
     return null;
   }
   /**
@@ -2406,6 +2436,7 @@ var OverlayScene = class {
         import_matter_js5.default.Sleeping.set(entry.body, false);
         import_matter_js5.default.Body.setVelocity(entry.body, this.grabVelocity);
         import_matter_js5.default.Body.setAngularVelocity(entry.body, 0);
+        this.bodyPositionHistory.delete(entry.body.id);
       }
     }
     this.grabbedObjectId = null;