@blorkfield/overlay-core 0.11.2 → 0.11.4

package/dist/index.d.cts

@@ -19,6 +19,14 @@ interface OverlaySceneConfig {
     despawnBelowFloor?: number;
     /** Configuration for floor segments and thresholds */
     floorConfig?: FloorConfig;
+    /**
+     * When true, every call to resize(newW, newH) translates all objects by half the dimension
+     * change so the scene centre stays visually centred. Objects keep their size and position
+     * relative to each other — only their absolute pixel coordinates shift.
+     * Useful for responsive canvases and phone rotation (portrait ↔ landscape).
+     * Default: false
+     */
+    rescaleOnResize?: boolean;
 }
 /**
  * Configuration for floor segments and pressure thresholds.
@@ -609,6 +617,14 @@ declare class OverlayScene {
     private handleMouseUp;
     /** Handle canvas clicks for click-to-fall behavior */
     private handleCanvasClick;
+    /** Shared tap logic for mouse click and touch tap */
+    private handleTap;
+    /** Handle touch start — single finger grabs, multi-finger passes through for scroll/zoom */
+    private handleTouchStart;
+    /** Handle touch move — only tracks if something is grabbed */
+    private handleTouchMove;
+    /** Handle touch end/cancel — release grab; if it was a tap (no grab), trigger click-to-fall */
+    private handleTouchEnd;
     /**
      * Handler for Matter.js beforeRender event.
      * Draws base background layers (color + image) before physics objects.

package/dist/index.d.ts

@@ -19,6 +19,14 @@ interface OverlaySceneConfig {
     despawnBelowFloor?: number;
     /** Configuration for floor segments and thresholds */
     floorConfig?: FloorConfig;
+    /**
+     * When true, every call to resize(newW, newH) translates all objects by half the dimension
+     * change so the scene centre stays visually centred. Objects keep their size and position
+     * relative to each other — only their absolute pixel coordinates shift.
+     * Useful for responsive canvases and phone rotation (portrait ↔ landscape).
+     * Default: false
+     */
+    rescaleOnResize?: boolean;
 }
 /**
  * Configuration for floor segments and pressure thresholds.
@@ -609,6 +617,14 @@ declare class OverlayScene {
     private handleMouseUp;
     /** Handle canvas clicks for click-to-fall behavior */
     private handleCanvasClick;
+    /** Shared tap logic for mouse click and touch tap */
+    private handleTap;
+    /** Handle touch start — single finger grabs, multi-finger passes through for scroll/zoom */
+    private handleTouchStart;
+    /** Handle touch move — only tracks if something is grabbed */
+    private handleTouchMove;
+    /** Handle touch end/cancel — release grab; if it was a tap (no grab), trigger click-to-fall */
+    private handleTouchEnd;
     /**
      * Handler for Matter.js beforeRender event.
      * Draws base background layers (color + image) before physics objects.

package/dist/index.js

@@ -1470,6 +1470,10 @@ var OverlayScene = class {
       const rect = this.canvas.getBoundingClientRect();
       const x = event.clientX - rect.left;
       const y = event.clientY - rect.top;
+      this.handleTap(x, y);
+    };
+    /** Shared tap logic for mouse click and touch tap */
+    this.handleTap = (x, y) => {
       const bodies = Matter5.Query.point(
         Matter5.Composite.allBodies(this.engine.world),
         { x, y }
@@ -1487,6 +1491,42 @@ var OverlayScene = class {
         }
       }
     };
+    /** Handle touch start — single finger grabs, multi-finger passes through for scroll/zoom */
+    this.handleTouchStart = (event) => {
+      if (event.touches.length >= 2) return;
+      const touch = event.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+      this.followTargets.set("mouse", { x, y });
+      const grabbed = this.startGrab();
+      if (grabbed) event.preventDefault();
+    };
+    /** Handle touch move — only tracks if something is grabbed */
+    this.handleTouchMove = (event) => {
+      if (event.touches.length >= 2) return;
+      if (!this.grabbedObjectId) return;
+      event.preventDefault();
+      const touch = event.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+      this.followTargets.set("mouse", { x, y });
+    };
+    /** Handle touch end/cancel — release grab; if it was a tap (no grab), trigger click-to-fall */
+    this.handleTouchEnd = (event) => {
+      const wasGrabbed = this.grabbedObjectId !== null;
+      this.endGrab();
+      if (wasGrabbed) {
+        event.preventDefault();
+        return;
+      }
+      if (event.changedTouches.length > 0) {
+        const touch = event.changedTouches[0];
+        const rect = this.canvas.getBoundingClientRect();
+        this.handleTap(touch.clientX - rect.left, touch.clientY - rect.top);
+      }
+    };
     /**
      * Handler for Matter.js beforeRender event.
      * Draws base background layers (color + image) before physics objects.
@@ -1639,6 +1679,10 @@ var OverlayScene = class {
     canvas.addEventListener("mousemove", this.handleMouseMove);
     canvas.addEventListener("mouseup", this.handleMouseUp);
     canvas.addEventListener("click", this.handleCanvasClick);
+    canvas.addEventListener("touchstart", this.handleTouchStart, { passive: false });
+    canvas.addEventListener("touchmove", this.handleTouchMove, { passive: false });
+    canvas.addEventListener("touchend", this.handleTouchEnd, { passive: false });
+    canvas.addEventListener("touchcancel", this.handleTouchEnd, { passive: false });
     this.effectManager = new EffectManager(
       this.config.bounds,
       (cfg) => this.spawnObjectAsync(cfg),
@@ -2063,6 +2107,10 @@ var OverlayScene = class {
     this.canvas.removeEventListener("mousemove", this.handleMouseMove);
     this.canvas.removeEventListener("mouseup", this.handleMouseUp);
     this.canvas.removeEventListener("click", this.handleCanvasClick);
+    this.canvas.removeEventListener("touchstart", this.handleTouchStart);
+    this.canvas.removeEventListener("touchmove", this.handleTouchMove);
+    this.canvas.removeEventListener("touchend", this.handleTouchEnd);
+    this.canvas.removeEventListener("touchcancel", this.handleTouchEnd);
     Matter5.Events.off(this.render, "beforeRender", this.handleBeforeRender);
     Matter5.Events.off(this.render, "afterRender", this.handleAfterRender);
     Matter5.Events.off(this.engine, "collisionStart", this.handleCollisionStart);
@@ -2206,6 +2254,26 @@ var OverlayScene = class {
     }
   }
   resize(width, height) {
+    if (this.config.rescaleOnResize) {
+      const dx = (width - this.config.bounds.right) / 2;
+      const dy = (height - this.config.bounds.bottom) / 2;
+      for (const entry of this.objects.values()) {
+        const { x, y } = entry.body.position;
+        Matter5.Body.setPosition(entry.body, { x: x + dx, y: y + dy });
+        if (entry.originalPosition) {
+          entry.originalPosition = {
+            x: entry.originalPosition.x + dx,
+            y: entry.originalPosition.y + dy
+          };
+        }
+        if (entry.domShadowElement) {
+          const currentLeft = parseFloat(entry.domShadowElement.style.left) || 0;
+          const currentTop = parseFloat(entry.domShadowElement.style.top) || 0;
+          entry.domShadowElement.style.setProperty("left", `${currentLeft + dx}px`, "important");
+          entry.domShadowElement.style.setProperty("top", `${currentTop + dy}px`, "important");
+        }
+      }
+    }
     this.canvas.width = width;
     this.canvas.height = height;
     this.config.bounds = { top: 0, bottom: height, left: 0, right: width };