@energy8platform/game-engine 0.14.4 → 0.14.6

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) {
@@ -860,6 +909,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 {
@@ -875,6 +925,24 @@ const hostConfig = {
         if (flexItemConfig) {
             instance._flexConfig = { ...instance._flexConfig, ...flexItemConfig };
         }
+        // Auto-set layoutWidth/layoutHeight from explicit width/height props for UI components.
+        // This ensures parent FlexContainers measure children correctly without relying on
+        // getLocalBounds() which may return wrong values before the first render pass
+        // (e.g. Text with unloaded fonts, Graphics with pending geometry).
+        if (typeof Ctor.prototype.updateConfig === 'function' && !(instance instanceof FlexContainer)) {
+            const w = typeof props.width === 'number' ? props.width : undefined;
+            const h = typeof props.height === 'number' ? props.height : undefined;
+            if (w !== undefined || h !== undefined) {
+                if (!instance._flexConfig)
+                    instance._flexConfig = {};
+                if (w !== undefined && instance._flexConfig.layoutWidth === undefined) {
+                    instance._flexConfig.layoutWidth = w;
+                }
+                if (h !== undefined && instance._flexConfig.layoutHeight === undefined) {
+                    instance._flexConfig.layoutHeight = h;
+                }
+            }
+        }
         return instance;
     },
     createTextInstance() {
@@ -952,6 +1020,7 @@ const hostConfig = {
             if (Object.keys(changed).length > 0) {
                 instance.updateConfig(changed);
             }
+            applyContainerProps(instance, newProps, oldProps);
             applyEventProps(instance, newProps, oldProps);
         }
         else {
@@ -962,7 +1031,20 @@ const hostConfig = {
         const oldFlexConfig = extractFlexItemConfig(oldProps);
         if (newFlexConfig || oldFlexConfig) {
             instance._flexConfig = { ...instance._flexConfig, ...newFlexConfig };
-            // Trigger parent relayout
+        }
+        // Keep auto layoutWidth/layoutHeight in sync with width/height for UI components
+        if (typeof instance.updateConfig === 'function' && !(instance instanceof FlexContainer)) {
+            if (instance._flexConfig) {
+                if (typeof newProps.width === 'number' && instance._flexConfig.layoutWidth !== undefined) {
+                    instance._flexConfig.layoutWidth = newProps.width;
+                }
+                if (typeof newProps.height === 'number' && instance._flexConfig.layoutHeight !== undefined) {
+                    instance._flexConfig.layoutHeight = newProps.height;
+                }
+            }
+        }
+        // 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();
             }
@@ -2155,10 +2237,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);