@blorkfield/overlay-core 0.4.3 → 0.5.0

package/dist/index.cjs

@@ -1204,6 +1204,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();
@@ -1498,6 +1501,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 = import_matter_js5.default.Bodies.circle(entry.originalPosition.x, entry.originalPosition.y, 1, {
         isStatic: true,
@@ -1971,6 +1983,84 @@ var OverlayScene = class {
   areFontsInitialized() {
     return this.fontsInitialized;
   }
+  // ==================== DOM OBSTACLE METHODS ====================
+  /**
+   * Attach a DOM element to physics. The element will follow the physics body
+   * and can have pressure threshold, shadow, and click-to-fall behavior.
+   *
+   * When the element collapses (becomes dynamic), its CSS transform will be
+   * updated each frame to match the physics body position and rotation.
+   *
+   * Shadow creates a cloned DOM element that stays at the original position.
+   */
+  addDOMObstacle(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 = import_matter_js5.default.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);
+    import_matter_js5.default.Composite.add(this.engine.world, body);
+    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
@@ -2467,6 +2557,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 = [];