@blorkfield/overlay-core 0.4.3 → 0.5.1

package/dist/index.js

@@ -464,7 +464,7 @@ function createBodyFromVertices(id, x, y, vertices, renderOptions) {
 function createBoundariesWithFloorConfig(bounds, floorConfig) {
   const width = bounds.right - bounds.left;
   const height = bounds.bottom - bounds.top;
-  const options = { isStatic: true, render: { visible: false } };
+  const wallOptions = { isStatic: true, render: { visible: false } };
   const walls = [
     // Left wall
     Matter2.Bodies.rectangle(
@@ -472,7 +472,7 @@ function createBoundariesWithFloorConfig(bounds, floorConfig) {
       bounds.top + height / 2,
       BOUNDARY_THICKNESS,
       height,
-      { ...options, label: "leftWall" }
+      { ...wallOptions, label: "leftWall" }
     ),
     // Right wall
     Matter2.Bodies.rectangle(
@@ -480,23 +480,44 @@ function createBoundariesWithFloorConfig(bounds, floorConfig) {
       bounds.top + height / 2,
       BOUNDARY_THICKNESS,
       height,
-      { ...options, label: "rightWall" }
+      { ...wallOptions, label: "rightWall" }
     )
   ];
   const segmentCount = floorConfig?.segments ?? 1;
-  const segmentWidth = width / segmentCount;
   const floorSegments = [];
+  let segmentWidths;
+  if (floorConfig?.segmentWidths && floorConfig.segmentWidths.length === segmentCount) {
+    const sum = floorConfig.segmentWidths.reduce((a, b) => a + b, 0);
+    segmentWidths = floorConfig.segmentWidths.map((w) => w / sum * width);
+  } else {
+    const equalWidth = width / segmentCount;
+    segmentWidths = Array(segmentCount).fill(equalWidth);
+  }
+  let currentX = bounds.left;
   for (let i = 0; i < segmentCount; i++) {
-    const segmentX = bounds.left + (i + 0.5) * segmentWidth;
+    const segmentWidth = segmentWidths[i];
+    const thickness = floorConfig?.thickness !== void 0 ? Array.isArray(floorConfig.thickness) ? floorConfig.thickness[i] ?? BOUNDARY_THICKNESS : floorConfig.thickness : BOUNDARY_THICKNESS;
+    const color = floorConfig?.color !== void 0 ? Array.isArray(floorConfig.color) ? floorConfig.color[i] : floorConfig.color : void 0;
+    const segmentX = currentX + segmentWidth / 2;
+    const segmentY = bounds.bottom - thickness / 2;
+    const segmentOptions = {
+      isStatic: true,
+      label: `floor-segment-${i}`,
+      render: {
+        visible: color !== void 0,
+        fillStyle: color ?? "#888888"
+      }
+    };
     floorSegments.push(
       Matter2.Bodies.rectangle(
         segmentX,
-        bounds.bottom + BOUNDARY_THICKNESS / 2,
+        segmentY,
         segmentWidth,
-        BOUNDARY_THICKNESS,
-        { ...options, label: `floor-segment-${i}` }
+        thickness,
+        segmentOptions
       )
     );
+    currentX += segmentWidth;
   }
   return { walls, floorSegments };
 }
@@ -1160,6 +1181,9 @@ var OverlayScene = class {
         if (this.config.wrapHorizontal && entry.tags.includes("falling")) {
           wrapHorizontal(entry.body, this.config.bounds);
         }
+        if (entry.domElement && entry.tags.includes("falling")) {
+          this.updateDOMElementTransform(entry);
+        }
       }
       if (!this.config.debug) {
         this.drawTTFGlyphs();
@@ -1185,6 +1209,7 @@ var OverlayScene = class {
     this.boundaries = [...boundariesResult.walls, ...boundariesResult.floorSegments];
     this.floorSegments = boundariesResult.floorSegments;
     Matter5.Composite.add(this.engine.world, this.boundaries);
+    this.checkInitialFloorIntegrity();
     this.mouse = Matter5.Mouse.create(canvas);
     this.mouseConstraint = Matter5.MouseConstraint.create(this.engine, {
       mouse: this.mouse,
@@ -1303,7 +1328,8 @@ var OverlayScene = class {
         if (onObstacles.has(dyn.id)) continue;
         const dynBounds = dyn.body.bounds;
         const horizontalOverlap = dynBounds.max.x > segmentBounds.min.x && dynBounds.min.x < segmentBounds.max.x;
-        if (horizontalOverlap) {
+        const nearFloor = dynBounds.max.y >= segmentBounds.min.y - 10;
+        if (horizontalOverlap && nearFloor) {
           resting.add(dyn.id);
         }
       }
@@ -1329,17 +1355,50 @@ var OverlayScene = class {
       const objectIds = this.floorSegmentPressure.get(i);
       const pressure = objectIds ? this.calculateWeightedPressure(objectIds) : 0;
       if (pressure >= threshold) {
-        this.collapseFloorSegment(i, pressure, threshold);
+        this.collapseFloorSegment(i, `pressure ${pressure} >= threshold ${threshold}`);
       }
     }
   }
   /** Collapse a single floor segment */
-  collapseFloorSegment(index, pressure, threshold) {
+  collapseFloorSegment(index, reason) {
     if (this.collapsedSegments.has(index)) return;
     this.collapsedSegments.add(index);
     const segment = this.floorSegments[index];
     Matter5.Composite.remove(this.engine.world, segment);
-    console.log(`[Pressure] Floor segment ${index} collapsed! (pressure: ${pressure} >= ${threshold})`);
+    logger.debug("OverlayScene", `Floor segment ${index} collapsed: ${reason}`);
+    this.checkFloorIntegrity();
+  }
+  /** Check if floor integrity requirement is violated and collapse all remaining if so */
+  checkFloorIntegrity() {
+    const minIntegrity = this.config.floorConfig?.minIntegrity;
+    if (minIntegrity === void 0) return;
+    const totalSegments = this.floorSegments.length;
+    const remainingSegments = totalSegments - this.collapsedSegments.size;
+    if (remainingSegments < minIntegrity && remainingSegments > 0) {
+      logger.debug("OverlayScene", `Floor integrity failed: ${remainingSegments} remaining < ${minIntegrity} required. Collapsing all.`);
+      for (let i = 0; i < totalSegments; i++) {
+        if (!this.collapsedSegments.has(i)) {
+          this.collapsedSegments.add(i);
+          const segment = this.floorSegments[i];
+          Matter5.Composite.remove(this.engine.world, segment);
+          logger.debug("OverlayScene", `Floor segment ${i} collapsed: integrity failure cascade`);
+        }
+      }
+    }
+  }
+  /** Check floor integrity on initialization (handles minIntegrity > segments) */
+  checkInitialFloorIntegrity() {
+    const minIntegrity = this.config.floorConfig?.minIntegrity;
+    if (minIntegrity === void 0) return;
+    const totalSegments = this.floorSegments.length;
+    if (totalSegments < minIntegrity) {
+      logger.debug("OverlayScene", `Floor integrity impossible: ${totalSegments} segments < ${minIntegrity} required. Collapsing all immediately.`);
+      for (let i = 0; i < totalSegments; i++) {
+        this.collapsedSegments.add(i);
+        const segment = this.floorSegments[i];
+        Matter5.Composite.remove(this.engine.world, segment);
+      }
+    }
   }
   /** Log a summary of pressure on all obstacles, grouped by word */
   logPressureSummary() {
@@ -1454,6 +1513,15 @@ var OverlayScene = class {
     if (!entry.originalPosition) return;
     const opacity = entry.shadow?.opacity ?? 0.3;
     const shadowId = `shadow-${entry.id}`;
+    if (entry.domElement) {
+      const shadowElement = entry.domElement.cloneNode(true);
+      shadowElement.style.opacity = String(opacity);
+      shadowElement.style.pointerEvents = "none";
+      shadowElement.style.transform = entry.domOriginalTransform || "";
+      entry.domElement.parentNode?.insertBefore(shadowElement, entry.domElement);
+      entry.domShadowElement = shadowElement;
+      return;
+    }
     if (entry.ttfGlyph) {
       const body = Matter5.Bodies.circle(entry.originalPosition.x, entry.originalPosition.y, 1, {
         isStatic: true,
@@ -1586,6 +1654,7 @@ var OverlayScene = class {
     this.collapsedSegments.clear();
     this.floorSegmentPressure.clear();
     Matter5.Composite.add(this.engine.world, this.boundaries);
+    this.checkInitialFloorIntegrity();
     this.render.options.width = width;
     this.render.options.height = height;
     this.render.canvas.width = width;
@@ -1602,6 +1671,21 @@ var OverlayScene = class {
    * Without 'falling' tag, object is static.
    */
   spawnObject(config) {
+    if (config.element) {
+      const result = this.addDOMObstacleInternal({
+        element: config.element,
+        x: config.x,
+        y: config.y,
+        width: config.width,
+        height: config.height,
+        tags: config.tags,
+        pressureThreshold: config.pressureThreshold,
+        weight: config.weight,
+        shadow: config.shadow === true ? { opacity: 0.3 } : config.shadow || void 0,
+        clickToFall: config.clickToFall
+      });
+      return result.id;
+    }
     const id = crypto.randomUUID();
     const tags = config.tags ?? [];
     const isStatic = !tags.includes("falling");
@@ -1621,6 +1705,17 @@ var OverlayScene = class {
     } else {
       body = createObstacle(id, config, isStatic);
     }
+    let pressureThreshold;
+    if (config.pressureThreshold) {
+      pressureThreshold = typeof config.pressureThreshold.value === "number" ? config.pressureThreshold.value : config.pressureThreshold.value[0];
+    }
+    let shadow;
+    if (config.shadow === true) {
+      shadow = { opacity: 0.3 };
+    } else if (config.shadow && typeof config.shadow === "object") {
+      shadow = { opacity: config.shadow.opacity ?? 0.3 };
+    }
+    const clicksRemaining = config.clickToFall?.clicks;
     const entry = {
       id,
       body,
@@ -1628,10 +1723,17 @@ var OverlayScene = class {
       spawnTime: performance.now(),
       ttl: config.ttl,
       despawnEffect: config.despawnEffect,
-      weight: config.weight ?? 1
+      weight: config.weight ?? 1,
+      pressureThreshold,
+      shadow,
+      originalPosition: shadow || clicksRemaining !== void 0 ? { x: config.x, y: config.y } : void 0,
+      clicksRemaining
     };
     this.objects.set(id, entry);
     Matter5.Composite.add(this.engine.world, body);
+    if (isStatic && pressureThreshold !== void 0) {
+      this.obstaclePressure.set(id, /* @__PURE__ */ new Set());
+    }
     return id;
   }
   /**
@@ -1658,6 +1760,17 @@ var OverlayScene = class {
     } else {
       body = await createObstacleAsync(id, config, isStatic);
     }
+    let pressureThreshold;
+    if (config.pressureThreshold) {
+      pressureThreshold = typeof config.pressureThreshold.value === "number" ? config.pressureThreshold.value : config.pressureThreshold.value[0];
+    }
+    let shadow;
+    if (config.shadow === true) {
+      shadow = { opacity: 0.3 };
+    } else if (config.shadow && typeof config.shadow === "object") {
+      shadow = { opacity: config.shadow.opacity ?? 0.3 };
+    }
+    const clicksRemaining = config.clickToFall?.clicks;
     const entry = {
       id,
       body,
@@ -1665,10 +1778,17 @@ var OverlayScene = class {
       spawnTime: performance.now(),
       ttl: config.ttl,
       despawnEffect: config.despawnEffect,
-      weight: config.weight ?? 1
+      weight: config.weight ?? 1,
+      pressureThreshold,
+      shadow,
+      originalPosition: shadow || clicksRemaining !== void 0 ? { x: config.x, y: config.y } : void 0,
+      clicksRemaining
     };
     this.objects.set(id, entry);
     Matter5.Composite.add(this.engine.world, body);
+    if (isStatic && pressureThreshold !== void 0) {
+      this.obstaclePressure.set(id, /* @__PURE__ */ new Set());
+    }
     return id;
   }
   /**
@@ -1927,6 +2047,80 @@ var OverlayScene = class {
   areFontsInitialized() {
     return this.fontsInitialized;
   }
+  // ==================== DOM OBSTACLE METHODS (INTERNAL) ====================
+  /**
+   * Internal: Attach a DOM element to physics.
+   * Called by spawnObject when element is provided.
+   */
+  addDOMObstacleInternal(config) {
+    const { element, x, y } = config;
+    const width = config.width ?? element.offsetWidth;
+    const height = config.height ?? element.offsetHeight;
+    const tags = config.tags ?? [];
+    const isStatic = !tags.includes("falling");
+    const body = Matter5.Bodies.rectangle(x, y, width, height, {
+      isStatic,
+      label: `dom-${crypto.randomUUID().slice(0, 8)}`,
+      render: { visible: false }
+      // Don't render the body, DOM element is the visual
+    });
+    const id = body.label;
+    let pressureThreshold;
+    if (config.pressureThreshold) {
+      pressureThreshold = typeof config.pressureThreshold.value === "number" ? config.pressureThreshold.value : config.pressureThreshold.value[0];
+    }
+    const shadow = config.shadow ? { opacity: config.shadow.opacity ?? 0.3 } : void 0;
+    const clicksRemaining = config.clickToFall?.clicks;
+    const originalTransform = element.style.transform || "";
+    element.style.position = "absolute";
+    element.style.transformOrigin = "center center";
+    const entry = {
+      id,
+      body,
+      tags,
+      spawnTime: performance.now(),
+      pressureThreshold,
+      weight: config.weight ?? 1,
+      shadow,
+      originalPosition: shadow || clicksRemaining !== void 0 ? { x, y } : void 0,
+      clicksRemaining,
+      domElement: element,
+      domOriginalTransform: originalTransform
+    };
+    this.objects.set(id, entry);
+    Matter5.Composite.add(this.engine.world, body);
+    this.updateDOMElementTransform(entry);
+    if (isStatic && pressureThreshold !== void 0) {
+      this.obstaclePressure.set(id, /* @__PURE__ */ new Set());
+    }
+    if (clicksRemaining !== void 0) {
+      const clickHandler = () => {
+        const currentEntry = this.objects.get(id);
+        if (!currentEntry) return;
+        if (currentEntry.tags.includes("falling")) return;
+        if (currentEntry.clicksRemaining === void 0) return;
+        currentEntry.clicksRemaining--;
+        logger.debug("OverlayScene", `Click on DOM element: ${currentEntry.clicksRemaining} clicks remaining`);
+        if (currentEntry.clicksRemaining <= 0) {
+          this.collapseObstacle(currentEntry);
+          element.removeEventListener("click", clickHandler);
+        }
+      };
+      element.addEventListener("click", clickHandler);
+    }
+    return {
+      id,
+      shadowElement: null
+      // Will be populated on collapse
+    };
+  }
+  /**
+   * Get the shadow element for a DOM obstacle (available after collapse).
+   */
+  getDOMObstacleShadow(id) {
+    const entry = this.objects.get(id);
+    return entry?.domShadowElement ?? null;
+  }
   // ==================== TEXT OBSTACLE METHODS ====================
   /**
    * Create text obstacles from a string. Each character becomes an individual obstacle
@@ -2002,11 +2196,61 @@ var OverlayScene = class {
       maxDimension = Math.max(maxDimension, dims.width, dims.height);
     }
     if (maxDimension === 0) maxDimension = 100;
+    const calculateLineWidth = (line) => {
+      let width = 0;
+      for (const char of line) {
+        if (char === " ") {
+          width += 20;
+        } else if (/^[A-Za-z0-9]$/.test(char)) {
+          const dims = charDimensions.get(char);
+          if (dims) {
+            const scale = letterSize / Math.max(dims.width, dims.height);
+            const scaledWidth = dims.width * scale;
+            const extraSpacing = config.letterSpacing !== void 0 ? config.letterSpacing - scaledWidth : 0;
+            width += scaledWidth + Math.max(0, extraSpacing);
+          }
+        }
+      }
+      return width;
+    };
+    const lineWidths = lines.map((line) => calculateLineWidth(line));
+    const align = config.align ?? "left";
+    const maxLineWidth = Math.max(...lineWidths, 0);
+    let boundsLeft;
+    let boundsRight;
+    switch (align) {
+      case "center":
+        boundsLeft = config.x - maxLineWidth / 2;
+        boundsRight = config.x + maxLineWidth / 2;
+        break;
+      case "right":
+        boundsLeft = config.x - maxLineWidth;
+        boundsRight = config.x;
+        break;
+      default:
+        boundsLeft = config.x;
+        boundsRight = config.x + maxLineWidth;
+    }
+    const boundsTop = config.y - letterSize / 2;
+    const totalHeight = lines.length > 0 ? (lines.length - 1) * lineHeight + letterSize : 0;
+    const boundsBottom = boundsTop + totalHeight;
     let currentY = config.y;
     let globalCharIndex = 0;
-    for (const line of lines) {
+    for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+      const line = lines[lineIndex];
       const chars = line.split("");
-      let currentX = config.x;
+      const lineWidth = lineWidths[lineIndex];
+      let currentX;
+      switch (align) {
+        case "center":
+          currentX = config.x - lineWidth / 2;
+          break;
+        case "right":
+          currentX = config.x - lineWidth;
+          break;
+        default:
+          currentX = config.x;
+      }
       if (inWord) {
         currentWordIndex++;
         inWord = false;
@@ -2122,12 +2366,21 @@ var OverlayScene = class {
       letterColor,
       lineCount: lines.length
     });
+    const bounds = {
+      left: boundsLeft,
+      right: boundsRight,
+      top: boundsTop,
+      bottom: boundsBottom,
+      width: boundsRight - boundsLeft,
+      height: boundsBottom - boundsTop
+    };
     return {
       letterIds,
       stringTag,
       wordTags,
       letterMap,
-      letterDebugInfo: debugInfo
+      letterDebugInfo: debugInfo,
+      bounds
     };
   }
   /**
@@ -2200,10 +2453,43 @@ var OverlayScene = class {
     const fontInfo = this.fonts.find((f) => f.fontUrl === fontUrl);
     const fontFamily = fontInfo?.name ?? "sans-serif";
     const lines = text.split("\n");
+    const lineWidths = lines.map((line) => measureText(loadedFont, line, fontSize));
+    const align = config.align ?? "left";
+    const maxLineWidth = Math.max(...lineWidths, 0);
+    let boundsLeft;
+    let boundsRight;
+    switch (align) {
+      case "center":
+        boundsLeft = x - maxLineWidth / 2;
+        boundsRight = x + maxLineWidth / 2;
+        break;
+      case "right":
+        boundsLeft = x - maxLineWidth;
+        boundsRight = x;
+        break;
+      default:
+        boundsLeft = x;
+        boundsRight = x + maxLineWidth;
+    }
+    const boundsTop = y - fontSize * 0.8;
+    const totalHeight = lines.length > 0 ? (lines.length - 1) * lineHeight + fontSize : 0;
+    const boundsBottom = boundsTop + totalHeight;
     let currentY = y;
     let globalCharIndex = 0;
-    for (const line of lines) {
-      let currentX = x;
+    for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+      const line = lines[lineIndex];
+      const lineWidth = lineWidths[lineIndex];
+      let currentX;
+      switch (align) {
+        case "center":
+          currentX = x - lineWidth / 2;
+          break;
+        case "right":
+          currentX = x - lineWidth;
+          break;
+        default:
+          currentX = x;
+      }
       if (inWord) {
         currentWordIndex++;
         inWord = false;
@@ -2313,12 +2599,21 @@ var OverlayScene = class {
       wordTags,
       lineCount: lines.length
     });
+    const bounds = {
+      left: boundsLeft,
+      right: boundsRight,
+      top: boundsTop,
+      bottom: boundsBottom,
+      width: boundsRight - boundsLeft,
+      height: boundsBottom - boundsTop
+    };
     return {
       letterIds,
       stringTag,
       wordTags,
       letterMap,
-      letterDebugInfo: []
+      letterDebugInfo: [],
+      bounds
     };
   }
   /**
@@ -2423,6 +2718,22 @@ var OverlayScene = class {
       ctx.restore();
     }
   }
+  /**
+   * Update a DOM element's CSS transform to match its physics body position and rotation.
+   */
+  updateDOMElementTransform(entry) {
+    if (!entry.domElement) return;
+    const body = entry.body;
+    const x = body.position.x;
+    const y = body.position.y;
+    const angle = body.angle;
+    const angleDeg = angle * (180 / Math.PI);
+    const width = entry.domElement.offsetWidth;
+    const height = entry.domElement.offsetHeight;
+    entry.domElement.style.left = `${x - width / 2}px`;
+    entry.domElement.style.top = `${y - height / 2}px`;
+    entry.domElement.style.transform = `rotate(${angleDeg}deg)`;
+  }
   checkTTLExpiration() {
     const now = performance.now();
     const expiredObjects = [];