@energy8platform/game-engine 0.14.1 → 0.14.3

package/dist/react.cjs.js

@@ -24,7 +24,7 @@ function extend(components) {
 
 const RESERVED = new Set(['children', 'key', 'ref']);
 /** Props handled by the reconciler as flex item config, not forwarded to components */
-const FLEX_ITEM_PROPS$1 = new Set(['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude']);
+const FLEX_ITEM_PROPS$1 = new Set(['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude', 'top', 'right', 'bottom', 'left']);
 // ─── UI Component helpers ────────────────────────────────
 /**
  * Extract a config object from React props.
@@ -446,6 +446,7 @@ class FlexContainer extends pixi_js.Container {
     /** @internal */ _rawHeight;
     _layoutChildren = [];
     _layoutDirty = true;
+    _layoutSuspended = false;
     constructor(config = {}) {
         super();
         this._config = {
@@ -507,7 +508,19 @@ class FlexContainer extends pixi_js.Container {
             }
         }
         const result = super.addChild(...children);
-        if (this._layoutDirty)
+        if (this._layoutDirty && !this._layoutSuspended)
+            this.updateLayout();
+        return result;
+    }
+    addChildAt(child, index) {
+        if (!this._layoutChildren.includes(child)) {
+            // Insert into layout children at matching position
+            const layoutIndex = Math.min(index, this._layoutChildren.length);
+            this._layoutChildren.splice(layoutIndex, 0, child);
+            this._layoutDirty = true;
+        }
+        const result = super.addChildAt(child, index);
+        if (this._layoutDirty && !this._layoutSuspended)
             this.updateLayout();
         return result;
     }
@@ -525,12 +538,23 @@ class FlexContainer extends pixi_js.Container {
     get flexChildren() {
         return this._layoutChildren;
     }
+    /** Suspend automatic layout recalculation. Call resumeLayout() to flush. */
+    suspendLayout() {
+        this._layoutSuspended = true;
+    }
+    /** Resume automatic layout and flush if dirty. */
+    resumeLayout() {
+        this._layoutSuspended = false;
+        if (this._layoutDirty)
+            this.updateLayout();
+    }
     /** Update the container size and recalculate layout */
     resize(width, height) {
         this._explicitWidth = width;
         this._explicitHeight = height;
         this._layoutDirty = true;
-        this.updateLayout();
+        if (!this._layoutSuspended)
+            this.updateLayout();
     }
     /** Update layout direction */
     setDirection(direction) {
@@ -563,6 +587,10 @@ class FlexContainer extends pixi_js.Container {
      * adding/removing children without resize.
      */
     updateLayout() {
+        if (this._layoutSuspended) {
+            this._layoutDirty = true;
+            return;
+        }
         this._layoutDirty = false;
         const { direction, justifyContent, alignItems, gap, flexWrap, alignContent } = this._config;
         const [pt, pr, pb, pl] = this._padding;
@@ -771,11 +799,12 @@ class FlexContainer extends pixi_js.Container {
                 this._explicitWidth = typeof w === 'number' ? w : 0;
                 this._explicitHeight = typeof h === 'number' ? h : 0;
                 this._layoutDirty = true;
-                this.updateLayout();
+                if (!this._layoutSuspended)
+                    this.updateLayout();
             }
             return;
         }
-        if (this._layoutDirty)
+        if (this._layoutDirty && !this._layoutSuspended)
             this.updateLayout();
     }
     destroy(options) {
@@ -786,6 +815,11 @@ class FlexContainer extends pixi_js.Container {
 
 /** Flex item prop names that should be forwarded to _flexConfig on the child */
 const FLEX_ITEM_PROPS = ['flexGrow', 'flexShrink', 'layoutWidth', 'layoutHeight', 'alignSelf', 'flexExclude', 'top', 'right', 'bottom', 'left'];
+function isSuspendable(obj) {
+    return typeof obj?.suspendLayout === 'function' && typeof obj?.resumeLayout === 'function';
+}
+/** Layout containers that need flush after commit phase */
+const pendingLayoutFlush = new Set();
 /** Extract FlexItemConfig from props if any flex item props are present */
 function extractFlexItemConfig(props) {
     let config;
@@ -850,6 +884,8 @@ const hostConfig = {
     },
     appendInitialChild(parent, child) {
         if (child instanceof pixi_js.Container) {
+            if (isSuspendable(parent))
+                parent.suspendLayout();
             if (parent instanceof FlexContainer) {
                 addChildToFlex(parent, child);
             }
@@ -860,6 +896,10 @@ const hostConfig = {
     },
     appendChild(parent, child) {
         if (child instanceof pixi_js.Container) {
+            if (isSuspendable(parent)) {
+                parent.suspendLayout();
+                pendingLayoutFlush.add(parent);
+            }
             if (parent instanceof FlexContainer) {
                 addChildToFlex(parent, child);
             }
@@ -874,6 +914,10 @@ const hostConfig = {
     },
     removeChild(parent, child) {
         if (child instanceof pixi_js.Container) {
+            if (isSuspendable(parent)) {
+                parent.suspendLayout();
+                pendingLayoutFlush.add(parent);
+            }
             parent.removeChild(child);
             child.destroy({ children: true });
         }
@@ -888,6 +932,10 @@ const hostConfig = {
         if (child instanceof pixi_js.Container && beforeChild instanceof pixi_js.Container) {
             if (child.parent)
                 child.parent.removeChild(child);
+            if (isSuspendable(parent)) {
+                parent.suspendLayout();
+                pendingLayoutFlush.add(parent);
+            }
             const index = parent.getChildIndex(beforeChild);
             parent.addChildAt(child, index);
         }
@@ -925,7 +973,11 @@ const hostConfig = {
             instance.eventMode = 'static';
         }
     },
-    finalizeInitialChildren() {
+    finalizeInitialChildren(instance) {
+        // Resume layout after all initial children have been appended
+        if (isSuspendable(instance)) {
+            instance.resumeLayout();
+        }
         return false;
     },
     prepareUpdate() {
@@ -946,7 +998,13 @@ const hostConfig = {
     prepareForCommit() {
         return null;
     },
-    resetAfterCommit() { },
+    resetAfterCommit() {
+        // Flush deferred layout for all FlexContainers modified during this commit
+        for (const fc of pendingLayoutFlush) {
+            fc.resumeLayout();
+        }
+        pendingLayoutFlush.clear();
+    },
     preparePortalMount() { },
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
@@ -1774,6 +1832,14 @@ class Panel extends pixi_js.Container {
     get content() {
         return this._content;
     }
+    /** Suspend content layout recalculation. Call resumeLayout() to flush. */
+    suspendLayout() {
+        this._content.suspendLayout();
+    }
+    /** Resume content layout and flush if dirty. */
+    resumeLayout() {
+        this._content.resumeLayout();
+    }
     /** Convenience: add a child to the content layout */
     addContent(child) {
         this._content.addFlexChild(child);