@blorkfield/overlay-core 0.11.6 → 0.11.7

package/README.md

@@ -215,9 +215,11 @@ scene.spawnObject({
 });
 ```
 
+**Positioning convention:** overlay-core sets `position: absolute` on the element and owns `left`, `top`, and `transform` entirely via inline styles. Position is expressed as `left: x - width/2; top: y - height/2` (body centre → top-left corner). Rotation is applied via `transform: rotate(angle)`. Do not set `left`, `top`, or `transform` on the element yourself — they will be overwritten. To place the element before spawn, set it off-screen or hidden; overlay-core writes the correct position on `spawnObject` for both static and dynamic elements, so it is visible and correctly placed immediately after the call returns.
+
 When a DOM element collapses:
-- The element's CSS transform is updated each frame to follow physics
-- Shadow creates a cloned DOM element at the original position
+- The element follows its physics body each frame via `left`/`top` updates
+- If `shadow` is configured, a cloned DOM element is left at the original spawn position
 
 ```typescript
 // Get the shadow element after collapse (if shadow was configured)
@@ -555,7 +557,7 @@ const scene = new OverlayScene(canvas, {
 | `floorConfig.minIntegrity` | none | Minimum segments required, otherwise all collapse |
 | `floorConfig.segmentWidths` | none | Proportional widths for each segment (array that sums to 1.0) |
 | `despawnBelowFloor` | 1.0 | Distance below floor to despawn objects (as fraction of height) |
-| `recenterOnResize` | false | Translate all objects to stay centred when canvas dimensions change — useful for phone rotation and responsive layouts |
+| `recenterOnResize` | false | Translate all objects to stay centred when canvas dimensions change — useful for phone rotation and responsive layouts. Applies to all object types including static DOM obstacles (their CSS `left`/`top` is updated immediately at resize time, not deferred to the next frame). |
 
 ### Background Configuration
 

package/dist/index.cjs

@@ -1498,6 +1498,8 @@ var OverlayScene = class {
     this.pressureObstacleIds = /* @__PURE__ */ new Set();
     // Active collision pairs: id -> Set of ids currently colliding with it
     this.activeCollisions = /* @__PURE__ */ new Map();
+    // DOM shadow elements whose parent entry has been removed (live body despawned after collapse)
+    this.orphanedDOMShadows = /* @__PURE__ */ new Set();
     /** Handle mouse down - start grab via programmatic API */
     this.handleMouseDown = (event) => {
       const rect = this.canvas.getBoundingClientRect();
@@ -2052,9 +2054,9 @@ var OverlayScene = class {
           transform: entry.domElement.style.transform
         }
       });
-      shadowElement.style.setProperty("left", `${computedLeft}px`, "important");
-      shadowElement.style.setProperty("top", `${computedTop}px`, "important");
-      shadowElement.style.setProperty("transform", "rotate(0deg)", "important");
+      shadowElement.style.left = `${computedLeft}px`;
+      shadowElement.style.top = `${computedTop}px`;
+      shadowElement.style.transform = "rotate(0deg)";
       entry.domElement.parentNode?.insertBefore(shadowElement, entry.domElement);
       entry.domShadowElement = shadowElement;
       return;
@@ -2169,6 +2171,7 @@ var OverlayScene = class {
     import_matter_js5.default.Events.off(this.engine, "collisionEnd", this.handleCollisionEnd);
     import_matter_js5.default.Engine.clear(this.engine);
     this.objects.clear();
+    this.orphanedDOMShadows.clear();
     this.gravityOverrideEntries.clear();
     this.followWindowEntries.clear();
     this.pressureObstacleIds.clear();
@@ -2319,15 +2322,24 @@ var OverlayScene = class {
           };
         }
         if (entry.domElement && entry.tags.includes("static")) {
-          this.updateDOMElementTransform(entry);
+          const currentLeft = parseFloat(entry.domElement.style.left) || 0;
+          const currentTop = parseFloat(entry.domElement.style.top) || 0;
+          entry.domElement.style.left = `${currentLeft + dx}px`;
+          entry.domElement.style.top = `${currentTop + dy}px`;
         }
         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");
+          entry.domShadowElement.style.left = `${currentLeft + dx}px`;
+          entry.domShadowElement.style.top = `${currentTop + dy}px`;
         }
       }
+      for (const shadowEl of this.orphanedDOMShadows) {
+        const currentLeft = parseFloat(shadowEl.style.left) || 0;
+        const currentTop = parseFloat(shadowEl.style.top) || 0;
+        shadowEl.style.left = `${currentLeft + dx}px`;
+        shadowEl.style.top = `${currentTop + dy}px`;
+      }
     }
     this.canvas.width = width;
     this.canvas.height = height;
@@ -2659,6 +2671,9 @@ var OverlayScene = class {
       }
       this.activeCollisions.delete(id);
     }
+    if (entry.domShadowElement) {
+      this.orphanedDOMShadows.add(entry.domShadowElement);
+    }
     this.objects.delete(id);
   }
   removeObjects(ids) {
@@ -3788,9 +3803,9 @@ var OverlayScene = class {
     const angleDeg = angle * (180 / Math.PI);
     const width = entry.domElement.offsetWidth;
     const height = entry.domElement.offsetHeight;
-    entry.domElement.style.setProperty("left", `${x - width / 2}px`, "important");
-    entry.domElement.style.setProperty("top", `${y - height / 2}px`, "important");
-    entry.domElement.style.setProperty("transform", `rotate(${angleDeg}deg)`, "important");
+    entry.domElement.style.left = `${x - width / 2}px`;
+    entry.domElement.style.top = `${y - height / 2}px`;
+    entry.domElement.style.transform = `rotate(${angleDeg}deg)`;
   }
   /** TTL expiration + below-floor despawn in a single O(N) pass */
   checkExpiration() {