@blorkfield/overlay-core 0.11.1 → 0.11.3

package/README.md

@@ -42,7 +42,7 @@ scene.spawnObject({ tags: [STATIC], ... });
 |----------|-------|----------|
 | `TAG_STATIC` / `TAGS.STATIC` | `'static'` | Object is a static obstacle, not affected by gravity. Without this tag, objects are dynamic by default. |
 | `TAG_FOLLOW_WINDOW` / `TAGS.FOLLOW_WINDOW` | `'follow_window'` | Object walks toward a target when grounded (default: mouse) |
-| `TAG_GRABABLE` / `TAGS.GRABABLE` | `'grabable'` | Object can be grabbed and moved with mouse |
+| `TAG_GRABABLE` / `TAGS.GRABABLE` | `'grabable'` | Object can be grabbed and moved with mouse or touch |
 | `TAG_GRAVITY_OVERRIDE` / `TAGS.GRAVITY_OVERRIDE` | `'gravity_override'` | Object uses its own gravity vector instead of scene gravity |
 | `TAG_SPEED_OVERRIDE` / `TAGS.SPEED_OVERRIDE` | `'speed_override'` | Multiplies movement speed for `follow_window` and future movement behaviors. Negative = run away from target. |
 | `TAG_MASS_OVERRIDE` / `TAGS.MASS_OVERRIDE` | `'mass_override'` | Overrides the physics mass. Higher mass resists follow forces more; lower mass allows the follow force to overcome gravity. |
@@ -469,7 +469,9 @@ scene.setObjectScale(id, 2, 0.5);  // stretch wide, squash tall
 scene.setObjectScale(id, 1, 1);    // restore original size
 ```
 
-## Mouse Position and Grab API
+## Mouse / Touch and Grab API
+
+Mouse and touch input are handled automatically. On touch devices, a single finger grabs and drags `grabable` objects; a tap on a static object with `clicksToFall` set triggers the click-to-fall behavior. Two-finger gestures are ignored by the canvas so the browser can handle scroll and pinch-zoom normally. Touching over empty canvas (no `grabable` object) also passes through to the browser.
 
 For scenarios where mouse input comes from an external source (e.g., system-wide mouse capture via WebSocket), you can programmatically control mouse position and grab/release behavior. This is useful when the canvas is positioned with an offset from the screen origin.
 
@@ -802,7 +804,7 @@ Tags are the source of truth for all behavior. Boolean tags (presence = active,
 | Tag | Behavior |
 |-----|----------|
 | `static` | Static obstacle, not affected by gravity. Absent by default — objects are dynamic unless tagged static. |
-| `grabable` | Can be grabbed and dragged with the mouse |
+| `grabable` | Can be grabbed and dragged with the mouse or touch |
 | `follow_window` | Always applies a directional force toward its target (in all axes). Gravity determines whether the entity can actually reach targets above/below it. |
 | `gravity_override` | Uses its own gravity vector instead of scene gravity (value set via `setObjectGravityOverride`) |
 | `speed_override` | Multiplies movement speed for `follow_window` and future movement behaviors (value set via `setObjectSpeedOverride`). Negative = runs away from target. Default multiplier: 1 |

package/dist/index.cjs

@@ -513,6 +513,17 @@ function createBodyFromVertices(id, x, y, vertices, renderOptions) {
     render: renderOptions
   });
   import_matter_js2.default.Body.setPosition(body, { x, y });
+  if (!body.parts.every((part) => part.vertices && part.vertices.length >= 3)) {
+    logger.warn(LOG_PREFIX2, `fromVertices produced degenerate parts, falling back to circle`, { id });
+    return import_matter_js2.default.Bodies.circle(x, y, DEFAULT_RADIUS, {
+      restitution: 0.3,
+      friction: 0.1,
+      frictionAir: 0.01,
+      density: 5e-3,
+      label: `entity:${id}`,
+      render: renderOptions
+    });
+  }
   return body;
 }
 function createBoundariesWithFloorConfig(bounds, floorConfig) {
@@ -704,11 +715,26 @@ async function createBoxObstacleWithInfo(id, config, isStatic = true) {
         }
       }
     });
-    const spriteOffsetX = (config.x - body.position.x) / scaledWidth;
-    const spriteOffsetY = (config.y - body.position.y) / scaledHeight;
-    if (body.render.sprite) {
-      body.render.sprite.xOffset = 0.5 + spriteOffsetX;
-      body.render.sprite.yOffset = 0.5 + spriteOffsetY;
+    if (!body.parts.every((part) => part.vertices && part.vertices.length >= 3)) {
+      logger.warn(LOG_PREFIX2, `fromVertices produced degenerate obstacle, falling back to rectangle`, { id });
+      body = import_matter_js2.default.Bodies.rectangle(config.x, config.y, scaledWidth, scaledHeight, {
+        isStatic,
+        label: `obstacle:${id}`,
+        render: {
+          sprite: {
+            texture: config.imageUrl,
+            xScale: spriteScale,
+            yScale: spriteScale
+          }
+        }
+      });
+    } else {
+      const spriteOffsetX = (config.x - body.position.x) / scaledWidth;
+      const spriteOffsetY = (config.y - body.position.y) / scaledHeight;
+      if (body.render.sprite) {
+        body.render.sprite.xOffset = 0.5 + spriteOffsetX;
+        body.render.sprite.yOffset = 0.5 + spriteOffsetY;
+      }
     }
   } else {
     body = import_matter_js2.default.Bodies.rectangle(config.x, config.y, scaledWidth, scaledHeight, {
@@ -757,6 +783,10 @@ async function createObstacleAsync(id, config, isStatic = true) {
       }
     });
     import_matter_js2.default.Body.setPosition(body, { x: config.x, y: config.y });
+    if (!body.parts.every((part) => part.vertices && part.vertices.length >= 3)) {
+      logger.warn(LOG_PREFIX2, `Image obstacle fromVertices degenerate, falling back to rectangle`, { id });
+      return createObstacle(id, config, isStatic);
+    }
     return body;
   }
   logger.warn(LOG_PREFIX2, `Image obstacle shape extraction failed, falling back to rectangle`, { id });
@@ -1492,6 +1522,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 = import_matter_js5.default.Query.point(
         import_matter_js5.default.Composite.allBodies(this.engine.world),
         { x, y }
@@ -1509,6 +1543,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.
@@ -1661,6 +1731,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),
@@ -2085,6 +2159,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);
     import_matter_js5.default.Events.off(this.render, "beforeRender", this.handleBeforeRender);
     import_matter_js5.default.Events.off(this.render, "afterRender", this.handleAfterRender);
     import_matter_js5.default.Events.off(this.engine, "collisionStart", this.handleCollisionStart);
@@ -3473,13 +3551,20 @@ var OverlayScene = class {
           x: currentX + v.x,
           y: currentY + v.y
         }));
-        const body = import_matter_js5.default.Bodies.fromVertices(glyphCenterX, glyphCenterY, [worldVertices], {
+        let body = import_matter_js5.default.Bodies.fromVertices(glyphCenterX, glyphCenterY, [worldVertices], {
           isStatic,
           label: `obstacle:${id}`,
           render: {
             visible: false
           }
         });
+        if (!body.parts.every((part) => part.vertices && part.vertices.length >= 3)) {
+          body = import_matter_js5.default.Bodies.rectangle(glyphCenterX, glyphCenterY, Math.max(glyphWidth, 1), Math.max(Math.abs(glyphHeight), 1), {
+            isStatic,
+            label: `obstacle:${id}`,
+            render: { visible: false }
+          });
+        }
         const offsetX = currentX - body.position.x;
         const offsetY = currentY - body.position.y;
         let pressureThreshold;