@energy8platform/game-engine 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -1265,13 +1265,20 @@ declare class SpriteAnimation {
 type FlexDirection = 'row' | 'column';
 type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
 type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+type AlignSelf = 'auto' | 'start' | 'center' | 'end' | 'stretch';
 interface FlexItemConfig {
     /** Flex grow factor (0 = fixed size) */
     flexGrow?: number;
+    /** Flex shrink factor (0 = don't shrink, default: 1) */
+    flexShrink?: number;
     /** Explicit width override for layout calculations */
     layoutWidth?: number;
     /** Explicit height override for layout calculations */
     layoutHeight?: number;
+    /** Override parent's alignItems for this child */
+    alignSelf?: AlignSelf;
+    /** Exclude from flex layout (acts like position: absolute) */
+    flexExclude?: boolean;
 }
 interface FlexContainerConfig {
     /** Layout direction (default: 'row') */

package/dist/index.esm.js

@@ -2965,6 +2965,37 @@ function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, cr
             }
         }
     }
+    // Shrink: if content overflows and mainSize is finite, shrink eligible items
+    if (totalGrow === 0 && mainSize > 0) {
+        const overflow = totalFixed + totalGap - mainSize;
+        if (overflow > 0) {
+            let totalShrinkable = 0;
+            for (const item of items) {
+                const shrink = item.child._flexConfig?.flexShrink ?? 1;
+                if (shrink > 0) {
+                    totalShrinkable += isRow ? item.w : item.h;
+                }
+            }
+            if (totalShrinkable > 0) {
+                for (const item of items) {
+                    const shrink = item.child._flexConfig?.flexShrink ?? 1;
+                    if (shrink > 0) {
+                        const itemMain = isRow ? item.w : item.h;
+                        const reduction = overflow * (itemMain / totalShrinkable);
+                        const newSize = Math.max(0, itemMain - reduction);
+                        if (isRow) {
+                            item.w = newSize;
+                            item.child.width = newSize;
+                        }
+                        else {
+                            item.h = newSize;
+                            item.child.height = newSize;
+                        }
+                    }
+                }
+            }
+        }
+    }
     // Calculate total main size after flex
     let totalMain = totalGap;
     for (const item of items) {
@@ -3001,9 +3032,12 @@ function layoutLine(items, isRow, mainSize, justify, align, gap, crossOffset, cr
     for (const item of items) {
         const mainDim = isRow ? item.w : item.h;
         const crossDim = isRow ? item.h : item.w;
-        // Cross-axis alignment
+        // Cross-axis alignment (alignSelf overrides align)
+        const effectiveAlign = (item.child._flexConfig?.alignSelf && item.child._flexConfig.alignSelf !== 'auto')
+            ? item.child._flexConfig.alignSelf
+            : align;
         let crossPos = crossOffset;
-        switch (align) {
+        switch (effectiveAlign) {
             case 'start':
                 break;
             case 'center':
@@ -3187,11 +3221,14 @@ class FlexContainer extends Container {
         const contentH = this._explicitHeight > 0 ? this._explicitHeight - pt - pb : Infinity;
         const mainLimit = isRow ? contentW : contentH;
         const crossLimit = isRow ? contentH : contentW;
-        // Measure children
-        const measured = this._layoutChildren.map((child) => {
+        // Measure children (skip flexExclude — they position themselves)
+        const measured = [];
+        for (const child of this._layoutChildren) {
+            if (child._flexConfig?.flexExclude)
+                continue;
             const { w, h, ox, oy } = measureChild(child);
-            return { child, w, h, ox, oy };
-        });
+            measured.push({ child, w, h, ox, oy });
+        }
         // Split into lines (if wrapping)
         const lines = [];
         if (flexWrap && mainLimit < Infinity) {
@@ -3234,7 +3271,12 @@ class FlexContainer extends Container {
             const mainStart = isRow ? pl : pt;
             // Offset items by padding
             const tempItems = line.map((item) => ({ ...item }));
-            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            // For single-line layouts, use the full available cross space for alignment;
+            // for multi-line (wrapping), each line gets its own measured cross size.
+            const effectiveCross = lines.length === 1 && crossLimit < Infinity
+                ? crossLimit
+                : (crossLimit < Infinity ? Math.min(lineCross, crossLimit) : lineCross);
+            layoutLine(tempItems, isRow, mainLimit < Infinity ? mainLimit : 0, mainLimit < Infinity ? justifyContent : 'start', alignItems, gap, crossOffset, effectiveCross);
             // Apply main-axis padding offset
             for (const item of tempItems) {
                 const origChild = line.find((l) => l.child === item.child);