@energy8platform/game-engine 0.14.5 → 0.14.7

package/dist/react.esm.js

@@ -23,6 +23,11 @@ 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', 'top', 'right', 'bottom', 'left']);
+/** Base Container props applied directly to the instance (not via config) */
+const CONTAINER_PROPS = new Set([
+    'x', 'y', 'alpha', 'visible', 'rotation', 'angle', 'zIndex',
+    'label', 'cursor', 'eventMode',
+]);
 // ─── UI Component helpers ────────────────────────────────
 /**
  * Extract a config object from React props.
@@ -32,7 +37,7 @@ const FLEX_ITEM_PROPS$1 = new Set(['flexGrow', 'flexShrink', 'layoutWidth', 'lay
 function extractConfig(props) {
     const config = {};
     for (const key in props) {
-        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || isEventProp(key))
+        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || CONTAINER_PROPS.has(key) || isEventProp(key))
             continue;
         if (key.includes('-')) {
             const parts = key.split('-');
@@ -57,7 +62,7 @@ function diffConfig(newProps, oldProps) {
     const changed = {};
     // New or changed props
     for (const key in newProps) {
-        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || isEventProp(key))
+        if (RESERVED.has(key) || FLEX_ITEM_PROPS$1.has(key) || CONTAINER_PROPS.has(key) || isEventProp(key))
             continue;
         if (newProps[key] !== oldProps[key]) {
             if (key.includes('-')) {
@@ -153,6 +158,50 @@ function setNestedValue(target, path, value) {
     }
     obj[path[path.length - 1]] = value;
 }
+/**
+ * Apply base Container props (x, y, alpha, visible, etc.) directly to the instance.
+ * Called for ALL elements — both UI components and standard PixiJS elements.
+ * Also handles scale, pivot, position, anchor via dash-notation.
+ */
+function applyContainerProps(instance, newProps, oldProps = {}) {
+    for (const key of CONTAINER_PROPS) {
+        if (key in newProps && newProps[key] !== oldProps[key]) {
+            try {
+                instance[key] = newProps[key];
+            }
+            catch { /* read-only */ }
+        }
+        else if (key in oldProps && !(key in newProps)) {
+            // Prop removed — reset to undefined (PixiJS defaults)
+            try {
+                instance[key] = undefined;
+            }
+            catch { /* read-only */ }
+        }
+    }
+    // Handle scale as uniform number or {x,y} object
+    if ('scale' in newProps && newProps.scale !== oldProps.scale) {
+        const s = newProps.scale;
+        if (typeof s === 'number') {
+            instance.scale?.set?.(s, s);
+        }
+        else if (s && typeof s === 'object') {
+            instance.scale?.set?.(s.x ?? 1, s.y ?? 1);
+        }
+    }
+    // Handle dash-notation container props: scale-x, scale-y, pivot-x, pivot-y, position-x, position-y, anchor-x, anchor-y
+    for (const key in newProps) {
+        if (!key.includes('-'))
+            continue;
+        const parts = key.split('-');
+        const root = parts[0];
+        if (root === 'scale' || root === 'pivot' || root === 'position' || root === 'anchor') {
+            if (newProps[key] !== oldProps[key]) {
+                setNestedValue(instance, parts, newProps[key]);
+            }
+        }
+    }
+}
 function applyProps(instance, newProps, oldProps = {}) {
     // Remove old props not in newProps
     for (const key in oldProps) {
@@ -818,6 +867,17 @@ function isSuspendable(obj) {
 }
 /** Layout containers that need flush after commit phase */
 const pendingLayoutFlush = new Set();
+/** Suspend a layout container and all its suspendable ancestors, add them to pending flush */
+function suspendWithAncestors(instance) {
+    let current = instance;
+    while (current) {
+        if (isSuspendable(current)) {
+            current.suspendLayout();
+            pendingLayoutFlush.add(current);
+        }
+        current = current.parent;
+    }
+}
 /** Extract FlexItemConfig from props if any flex item props are present */
 function extractFlexItemConfig(props) {
     let config;
@@ -860,6 +920,7 @@ const hostConfig = {
             // Config-based UI component: pass props as constructor config
             const config = extractConfig(props);
             instance = new Ctor(config);
+            applyContainerProps(instance, props);
             applyEventProps(instance, props);
         }
         else {
@@ -965,11 +1026,18 @@ const hostConfig = {
         }
     },
     commitUpdate(instance, _updatePayload, _type, oldProps, newProps) {
+        // Suspend this instance and ancestors before applying changes —
+        // prevents intermediate relayouts with partially-updated tree
+        const dimensionsChanged = newProps.width !== oldProps.width || newProps.height !== oldProps.height;
+        if (isSuspendable(instance) || dimensionsChanged) {
+            suspendWithAncestors(instance);
+        }
         if (typeof instance.updateConfig === 'function') {
             const changed = diffConfig(newProps, oldProps);
             if (Object.keys(changed).length > 0) {
                 instance.updateConfig(changed);
             }
+            applyContainerProps(instance, newProps, oldProps);
             applyEventProps(instance, newProps, oldProps);
         }
         else {
@@ -992,11 +1060,9 @@ const hostConfig = {
                 }
             }
         }
-        // Trigger parent relayout if flex config or dimensions changed
-        if (newFlexConfig || oldFlexConfig || newProps.width !== oldProps.width || newProps.height !== oldProps.height) {
-            if (instance.parent instanceof FlexContainer) {
-                instance.parent.updateLayout();
-            }
+        // Mark ancestors dirty if flex config or dimensions changed
+        if (newFlexConfig || oldFlexConfig || dimensionsChanged) {
+            suspendWithAncestors(instance);
         }
         if (hasEventProps(newProps) && instance.eventMode === 'auto') {
             instance.eventMode = 'static';
@@ -1028,8 +1094,25 @@ const hostConfig = {
         return null;
     },
     resetAfterCommit() {
-        // Flush deferred layout for all FlexContainers modified during this commit
-        for (const fc of pendingLayoutFlush) {
+        if (pendingLayoutFlush.size === 0)
+            return;
+        // Sort by depth (deepest first) so children compute sizes before parents lay out
+        const sorted = [...pendingLayoutFlush].sort((a, b) => {
+            let da = 0;
+            let n = a;
+            while (n.parent) {
+                da++;
+                n = n.parent;
+            }
+            let db = 0;
+            n = b;
+            while (n.parent) {
+                db++;
+                n = n.parent;
+            }
+            return db - da; // deepest first
+        });
+        for (const fc of sorted) {
             fc.resumeLayout();
         }
         pendingLayoutFlush.clear();
@@ -2186,10 +2269,11 @@ class Modal extends Container {
         // Overlay
         this._overlay = new Graphics();
         this._overlay.eventMode = 'static';
+        this._overlay.on('pointertap', () => {
+            if (this._config.closeOnOverlay)
+                this.hide();
+        });
         this.addChild(this._overlay);
-        if (this._config.closeOnOverlay) {
-            this._overlay.on('pointertap', () => this.hide());
-        }
         // Content container
         this._contentContainer = new Container();
         this.addChild(this._contentContainer);