@energy8platform/game-engine 0.11.0 → 0.13.0

package/dist/ui.cjs.js

@@ -81,6 +81,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) {
@@ -117,9 +148,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':
@@ -303,11 +337,14 @@ class FlexContainer extends pixi_js.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) {
@@ -350,7 +387,12 @@ class FlexContainer extends pixi_js.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);
@@ -2252,6 +2294,362 @@ class ScrollContainer extends pixi_js.Container {
     }
 }
 
+/**
+ * Draggable slider with customizable track, fill, and handle views.
+ *
+ * @example
+ * ```ts
+ * const volume = new Slider({
+ *   min: 0, max: 1, value: 0.5,
+ *   width: 200, height: 8,
+ *   fillColor: 0xffd700,
+ *   onUpdate: (v) => console.log('Volume:', v),
+ * });
+ * ```
+ */
+class Slider extends pixi_js.Container {
+    __uiComponent = true;
+    _track;
+    _fill;
+    _fillMask;
+    _handle;
+    _config;
+    _value;
+    _dragging = false;
+    onUpdate = null;
+    onChange = null;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            min: config.min ?? 0,
+            max: config.max ?? 1,
+            step: config.step ?? 0,
+            width: config.width ?? 200,
+            height: config.height ?? 8,
+            borderRadius: config.borderRadius ?? 4,
+            trackColor: config.trackColor ?? 0x333333,
+            fillColor: config.fillColor ?? 0xffd700,
+            handleRadius: config.handleRadius ?? 12,
+            handleColor: config.handleColor ?? 0xffffff,
+        };
+        this._value = config.value ?? this._config.min;
+        this.onUpdate = config.onUpdate ?? null;
+        this.onChange = config.onChange ?? null;
+        const { width, height, borderRadius, trackColor, fillColor, handleRadius, handleColor } = this._config;
+        // Track
+        const customTrack = resolveView(config.trackView);
+        if (customTrack) {
+            customTrack.width = width;
+            customTrack.height = height;
+            this._track = customTrack;
+        }
+        else {
+            const g = new pixi_js.Graphics();
+            g.roundRect(0, 0, width, height, borderRadius).fill(trackColor);
+            this._track = g;
+        }
+        this.addChild(this._track);
+        // Fill
+        const customFill = resolveView(config.fillView);
+        if (customFill) {
+            customFill.width = width;
+            customFill.height = height;
+            this._fill = customFill;
+        }
+        else {
+            const g = new pixi_js.Graphics();
+            g.roundRect(0, 0, width, height, borderRadius).fill(fillColor);
+            this._fill = g;
+        }
+        this.addChild(this._fill);
+        // Fill mask
+        this._fillMask = new pixi_js.Graphics();
+        this.addChild(this._fillMask);
+        this._fill.mask = this._fillMask;
+        // Handle
+        const customHandle = resolveView(config.handleView);
+        if (customHandle) {
+            this._handle = customHandle;
+        }
+        else {
+            const g = new pixi_js.Graphics();
+            g.circle(0, 0, handleRadius).fill(handleColor);
+            this._handle = g;
+        }
+        this._handle.y = height / 2;
+        this.addChild(this._handle);
+        // Interaction
+        this.eventMode = 'static';
+        this.cursor = 'pointer';
+        // Hit area covers track + handle overflow
+        const hitPad = Math.max(handleRadius - height / 2, 0);
+        this.hitArea = { contains: (x, y) => x >= -hitPad && x <= width + hitPad && y >= -hitPad && y <= height + hitPad };
+        this.on('pointerdown', this._onPointerDown, this);
+        this.on('globalpointermove', this._onPointerMove, this);
+        this.on('pointerup', this._onPointerUp, this);
+        this.on('pointerupoutside', this._onPointerUp, this);
+        this._updateVisuals();
+    }
+    /** Current value */
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        const clamped = this._applyStep(Math.max(this._config.min, Math.min(this._config.max, v)));
+        if (clamped === this._value)
+            return;
+        this._value = clamped;
+        this._updateVisuals();
+    }
+    get min() { return this._config.min; }
+    get max() { return this._config.max; }
+    /** React reconciler update hook */
+    updateConfig(changed) {
+        if ('value' in changed)
+            this.value = changed.value;
+        if ('min' in changed) {
+            this._config.min = changed.min;
+            this._updateVisuals();
+        }
+        if ('max' in changed) {
+            this._config.max = changed.max;
+            this._updateVisuals();
+        }
+        if ('step' in changed)
+            this._config.step = changed.step;
+        if ('onUpdate' in changed)
+            this.onUpdate = changed.onUpdate;
+        if ('onChange' in changed)
+            this.onChange = changed.onChange;
+    }
+    _fraction() {
+        const { min, max } = this._config;
+        return max === min ? 0 : (this._value - min) / (max - min);
+    }
+    _applyStep(v) {
+        const { step, min } = this._config;
+        if (step <= 0)
+            return v;
+        return min + Math.round((v - min) / step) * step;
+    }
+    _updateVisuals() {
+        const frac = this._fraction();
+        const w = this._config.width;
+        const h = this._config.height;
+        // Update fill mask
+        this._fillMask.clear();
+        this._fillMask.rect(0, 0, w * frac, h).fill(0xffffff);
+        // Update handle position
+        this._handle.x = w * frac;
+    }
+    _valueFromPointer(e) {
+        const local = this.toLocal(e.global);
+        const frac = Math.max(0, Math.min(1, local.x / this._config.width));
+        const { min, max } = this._config;
+        return this._applyStep(min + frac * (max - min));
+    }
+    _onPointerDown(e) {
+        this._dragging = true;
+        const newValue = this._valueFromPointer(e);
+        if (newValue !== this._value) {
+            this._value = newValue;
+            this._updateVisuals();
+            this.onUpdate?.(this._value);
+        }
+    }
+    _onPointerMove(e) {
+        if (!this._dragging)
+            return;
+        const newValue = this._valueFromPointer(e);
+        if (newValue !== this._value) {
+            this._value = newValue;
+            this._updateVisuals();
+            this.onUpdate?.(this._value);
+        }
+    }
+    _onPointerUp(_e) {
+        if (!this._dragging)
+            return;
+        this._dragging = false;
+        this.onChange?.(this._value);
+    }
+    destroy(options) {
+        this.off('pointerdown', this._onPointerDown, this);
+        this.off('globalpointermove', this._onPointerMove, this);
+        this.off('pointerup', this._onPointerUp, this);
+        this.off('pointerupoutside', this._onPointerUp, this);
+        this.onUpdate = null;
+        this.onChange = null;
+        super.destroy(options);
+    }
+}
+
+/**
+ * Toggle switch with two states.
+ *
+ * Supports custom ON/OFF views or auto-generated Graphics-based toggle.
+ * Click to toggle, or use `forceSwitch(value)` programmatically.
+ *
+ * @example
+ * ```ts
+ * const mute = new Toggle({
+ *   value: false,
+ *   onColor: 0x22cc22,
+ *   onChange: (on) => audioManager.mute(!on),
+ * });
+ * ```
+ */
+class Toggle extends pixi_js.Container {
+    __uiComponent = true;
+    _value;
+    _onView = null;
+    _offView = null;
+    _handle = null;
+    _trackGfx = null;
+    _config;
+    _useCustomViews;
+    onChange = null;
+    constructor(config = {}) {
+        super();
+        this._config = {
+            width: config.width ?? 52,
+            height: config.height ?? 28,
+            onColor: config.onColor ?? 0x22cc22,
+            offColor: config.offColor ?? 0x666666,
+            handleColor: config.handleColor ?? 0xffffff,
+            handleRadius: config.handleRadius ?? 0, // 0 = auto
+            animationDuration: config.animationDuration ?? 200,
+        };
+        this._value = config.value ?? false;
+        this.onChange = config.onChange ?? null;
+        const customOn = resolveView(config.onView);
+        const customOff = resolveView(config.offView);
+        this._useCustomViews = !!(customOn || customOff);
+        if (this._useCustomViews) {
+            // Custom view mode: show/hide ON and OFF views
+            if (customOn) {
+                this._onView = customOn;
+                this._onView.visible = this._value;
+                this.addChild(this._onView);
+            }
+            if (customOff) {
+                this._offView = customOff;
+                this._offView.visible = !this._value;
+                this.addChild(this._offView);
+            }
+        }
+        else {
+            // Graphics mode: track + sliding handle
+            const { width, height, handleColor } = this._config;
+            const handleRadius = this._config.handleRadius || (height / 2 - 3);
+            this._config.handleRadius = handleRadius;
+            this._trackGfx = new pixi_js.Graphics();
+            this.addChild(this._trackGfx);
+            this._drawTrack();
+            const handle = new pixi_js.Graphics();
+            handle.circle(0, 0, handleRadius).fill(handleColor);
+            handle.y = height / 2;
+            handle.x = this._value ? width - handleRadius - 3 : handleRadius + 3;
+            this._handle = handle;
+            this.addChild(handle);
+        }
+        // Interaction
+        this.eventMode = 'static';
+        this.cursor = 'pointer';
+        this.on('pointertap', this._onTap, this);
+    }
+    /** Current toggle state */
+    get value() {
+        return this._value;
+    }
+    set value(v) {
+        if (v === this._value)
+            return;
+        this.forceSwitch(v);
+    }
+    /** Programmatically switch to a specific state with animation */
+    forceSwitch(value) {
+        this._value = value;
+        this._animateToState();
+    }
+    /** React reconciler update hook */
+    updateConfig(changed) {
+        if ('value' in changed)
+            this.value = changed.value;
+        if ('onChange' in changed)
+            this.onChange = changed.onChange;
+        if ('animationDuration' in changed)
+            this._config.animationDuration = changed.animationDuration;
+    }
+    _onTap() {
+        this._value = !this._value;
+        this._animateToState();
+        this.onChange?.(this._value);
+    }
+    _animateToState() {
+        const duration = this._config.animationDuration;
+        if (this._useCustomViews) {
+            // Custom views: crossfade
+            if (this._onView) {
+                Tween.killTweensOf(this._onView);
+                if (this._value) {
+                    this._onView.visible = true;
+                    Tween.to(this._onView, { alpha: 1 }, duration);
+                }
+                else {
+                    Tween.to(this._onView, { alpha: 0 }, duration).then(() => {
+                        if (this._onView)
+                            this._onView.visible = false;
+                    });
+                }
+            }
+            if (this._offView) {
+                Tween.killTweensOf(this._offView);
+                if (!this._value) {
+                    this._offView.visible = true;
+                    Tween.to(this._offView, { alpha: 1 }, duration);
+                }
+                else {
+                    Tween.to(this._offView, { alpha: 0 }, duration).then(() => {
+                        if (this._offView)
+                            this._offView.visible = false;
+                    });
+                }
+            }
+        }
+        else {
+            // Graphics mode: slide handle + recolor track
+            this._drawTrack();
+            if (this._handle) {
+                const { width } = this._config;
+                const handleRadius = this._config.handleRadius;
+                const targetX = this._value ? width - handleRadius - 3 : handleRadius + 3;
+                Tween.killTweensOf(this._handle);
+                Tween.to(this._handle, { x: targetX }, duration);
+            }
+        }
+    }
+    _drawTrack() {
+        if (!this._trackGfx)
+            return;
+        const { width, height, onColor, offColor } = this._config;
+        const radius = height / 2;
+        this._trackGfx.clear();
+        this._trackGfx.roundRect(0, 0, width, height, radius).fill(this._value ? onColor : offColor);
+    }
+    destroy(options) {
+        this.off('pointertap', this._onTap, this);
+        if (this._handle)
+            Tween.killTweensOf(this._handle);
+        if (this._onView)
+            Tween.killTweensOf(this._onView);
+        if (this._offView)
+            Tween.killTweensOf(this._offView);
+        this.onChange = null;
+        super.destroy(options);
+    }
+}
+
 exports.BalanceDisplay = BalanceDisplay;
 exports.Button = Button;
 exports.FlexContainer = FlexContainer;
@@ -2261,7 +2659,9 @@ exports.Modal = Modal;
 exports.Panel = Panel;
 exports.ProgressBar = ProgressBar;
 exports.ScrollContainer = ScrollContainer;
+exports.Slider = Slider;
 exports.Toast = Toast;
+exports.Toggle = Toggle;
 exports.WinDisplay = WinDisplay;
 exports.resolveView = resolveView;
 //# sourceMappingURL=ui.cjs.js.map