@blorkfield/overlay-core 0.8.6 → 0.8.8

package/dist/index.d.cts

@@ -148,7 +148,7 @@ interface DespawnEffectConfig {
  * Unified configuration for spawning scene objects.
  * Objects are configured via tags that define their behavior:
  * - 'falling': Object is dynamic and affected by gravity (without this tag, object is static)
- * - 'follow': Object follows mouse position when grounded
+ * - 'window_follow': Object follows mouse position when grounded within the canvas window
  * - 'grabable': Object can be dragged via mouse constraint
  */
 interface ObjectConfig {
@@ -552,11 +552,20 @@ declare class OverlayScene {
     private followTargets;
     private grabbedObjectId;
     private lastGrabMousePosition;
+    private grabbedWasDynamic;
+    private grabVelocity;
     static createContainer(parent: HTMLElement, options?: ContainerOptions): {
         canvas: HTMLCanvasElement;
         bounds: Bounds;
     };
-    constructor(canvas: HTMLCanvasElement, config: OverlaySceneConfig); /** Handle canvas clicks for click-to-fall behavior */
+    constructor(canvas: HTMLCanvasElement, config: OverlaySceneConfig);
+    /** 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;
     /**
      * Handler for Matter.js beforeRender event.
@@ -616,8 +625,8 @@ declare class OverlayScene {
      * Spawn an object synchronously.
      * Object behavior is determined by tags:
      * - 'falling': Object is dynamic (affected by gravity)
-     * - 'follow': Object follows mouse when grounded
-     * - 'grabable': Object can be dragged
+     * - 'window_follow': Object follows mouse when grounded (walks toward mouse)
+     * - 'grabable': Object can be grabbed and moved with mouse
      * Without 'falling' tag, object is static.
      */
     spawnObject(config: ObjectConfig): string;

package/dist/index.d.ts

@@ -148,7 +148,7 @@ interface DespawnEffectConfig {
  * Unified configuration for spawning scene objects.
  * Objects are configured via tags that define their behavior:
  * - 'falling': Object is dynamic and affected by gravity (without this tag, object is static)
- * - 'follow': Object follows mouse position when grounded
+ * - 'window_follow': Object follows mouse position when grounded within the canvas window
  * - 'grabable': Object can be dragged via mouse constraint
  */
 interface ObjectConfig {
@@ -552,11 +552,20 @@ declare class OverlayScene {
     private followTargets;
     private grabbedObjectId;
     private lastGrabMousePosition;
+    private grabbedWasDynamic;
+    private grabVelocity;
     static createContainer(parent: HTMLElement, options?: ContainerOptions): {
         canvas: HTMLCanvasElement;
         bounds: Bounds;
     };
-    constructor(canvas: HTMLCanvasElement, config: OverlaySceneConfig); /** Handle canvas clicks for click-to-fall behavior */
+    constructor(canvas: HTMLCanvasElement, config: OverlaySceneConfig);
+    /** 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;
     /**
      * Handler for Matter.js beforeRender event.
@@ -616,8 +625,8 @@ declare class OverlayScene {
      * Spawn an object synchronously.
      * Object behavior is determined by tags:
      * - 'falling': Object is dynamic (affected by gravity)
-     * - 'follow': Object follows mouse when grounded
-     * - 'grabable': Object can be dragged
+     * - 'window_follow': Object follows mouse when grounded (walks toward mouse)
+     * - 'grabable': Object can be grabbed and moved with mouse
      * Without 'falling' tag, object is static.
      */
     spawnObject(config: ObjectConfig): string;

package/dist/index.js

@@ -1397,9 +1397,30 @@ var OverlayScene = class {
     };
     // Follow targets for follow-{key} tagged objects
     this.followTargets = /* @__PURE__ */ new Map();
-    // Delta-based grab tracking (no constraint physics)
+    // 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) => {
       const rect = this.canvas.getBoundingClientRect();
@@ -1473,6 +1494,7 @@ var OverlayScene = class {
           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 };
         }
       }
@@ -1480,7 +1502,7 @@ var OverlayScene = class {
         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;
+            const key = tag === "window_follow" ? "mouse" : tag.startsWith("follow-") ? tag.slice(7) : null;
             if (key) {
               const target = this.followTargets.get(key);
               if (target) {
@@ -1525,6 +1547,9 @@ var OverlayScene = class {
     Matter5.Composite.add(this.engine.world, this.boundaries);
     this.checkInitialFloorIntegrity();
     this.mouse = Matter5.Mouse.create(canvas);
+    canvas.addEventListener("mousedown", this.handleMouseDown);
+    canvas.addEventListener("mousemove", this.handleMouseMove);
+    canvas.addEventListener("mouseup", this.handleMouseUp);
     canvas.addEventListener("click", this.handleCanvasClick);
     this.effectManager = new EffectManager(
       this.config.bounds,
@@ -1947,6 +1972,9 @@ var OverlayScene = class {
   }
   destroy() {
     this.stop();
+    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);
@@ -2009,8 +2037,8 @@ var OverlayScene = class {
    * Spawn an object synchronously.
    * Object behavior is determined by tags:
    * - 'falling': Object is dynamic (affected by gravity)
-   * - 'follow': Object follows mouse when grounded
-   * - 'grabable': Object can be dragged
+   * - 'window_follow': Object follows mouse when grounded (walks toward mouse)
+   * - 'grabable': Object can be grabbed and moved with mouse
    * Without 'falling' tag, object is static.
    */
   spawnObject(config) {
@@ -2310,6 +2338,9 @@ var OverlayScene = class {
       if (entry && entry.tags.includes("grabable")) {
         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;
       }
     }
@@ -2319,8 +2350,19 @@ var OverlayScene = class {
    * Release any currently grabbed object.
    */
   endGrab() {
+    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.grabbedObjectId = null;
     this.lastGrabMousePosition = null;
+    this.grabbedWasDynamic = false;
+    this.grabVelocity = { x: 0, y: 0 };
   }
   /**
    * Get the ID of the currently grabbed object.