@babylonjs/gui 9.24.0 → 9.26.0

package/2D/controls/flexPanel.d.ts

@@ -0,0 +1 @@
+export * from "./flexPanel.pure.js";

package/2D/controls/flexPanel.js

@@ -0,0 +1,4 @@
+export * from "./flexPanel.pure.js";
+import { RegisterFlexPanel } from "./flexPanel.pure.js";
+RegisterFlexPanel();
+//# sourceMappingURL=flexPanel.js.map

package/2D/controls/flexPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexPanel.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/flexPanel.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,iBAAiB,EAAE,CAAC","sourcesContent":["export * from \"./flexPanel.pure\";\n\nimport { RegisterFlexPanel } from \"./flexPanel.pure\";\nRegisterFlexPanel();\n"]}

package/2D/controls/flexPanel.pure.d.ts

@@ -0,0 +1,91 @@
+import { Container } from "./container.pure.js";
+import { type Control } from "./control.pure.js";
+import { Measure } from "../measure.js";
+/**
+ * Main-axis direction and ordering of a FlexPanel.
+ */
+export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+/**
+ * Whether overflowing items form additional lines, and their cross-axis order.
+ */
+export type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+/**
+ * Distribution of spare space along the main axis.
+ */
+export type FlexJustification = "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
+/**
+ * Alignment of items within each line. Stretch fills the line's cross-axis size.
+ */
+export type FlexAlignment = "flex-start" | "flex-end" | "center" | "stretch";
+/**
+ * Distribution of lines along the cross axis.
+ */
+export type FlexContentAlignment = FlexJustification | "stretch";
+/**
+ * Arranges controls in flexible rows or columns using their declared width/height as the basis.
+ * Supports wrapping, gaps, alignment and Control.flexGrow/flexShrink without rewriting child properties.
+ * The panel uses its declared size; intrinsic CSS sizing and baseline alignment are not supported.
+ */
+export declare class FlexPanel extends Container {
+    private _items;
+    private _lines;
+    private _boxes;
+    private _gap;
+    private _flexDirection;
+    /**
+     * Gets or sets the main axis and item direction. Defaults to row.
+     */
+    get flexDirection(): FlexDirection;
+    set flexDirection(value: FlexDirection);
+    private _flexWrap;
+    /**
+     * Gets or sets line wrapping. Defaults to nowrap.
+     */
+    get flexWrap(): FlexWrap;
+    set flexWrap(value: FlexWrap);
+    private _justifyContent;
+    /**
+     * Gets or sets the distribution of remaining main-axis space after flexing.
+     */
+    get justifyContent(): FlexJustification;
+    set justifyContent(value: FlexJustification);
+    private _alignItems;
+    /**
+     * Gets or sets cross-axis alignment within each line. Stretch fills the line.
+     */
+    get alignItems(): FlexAlignment;
+    set alignItems(value: FlexAlignment);
+    private _alignContent;
+    /**
+     * Gets or sets cross-axis line distribution when wrapping is enabled.
+     */
+    get alignContent(): FlexContentAlignment;
+    set alignContent(value: FlexContentAlignment);
+    /**
+     * Gets or sets the gap between items and lines in px, em, rem, or percent of the main-axis size.
+     */
+    get gap(): string | number;
+    set gap(value: string | number);
+    /**
+     * Creates a flex layout container.
+     * @param name defines the control name
+     */
+    constructor(name?: string);
+    protected _getTypeName(): string;
+    /**
+     * Removes a control and releases its cached layout data.
+     * @param control defines the control to remove
+     * @returns the current panel
+     */
+    removeControl(control: Control): FlexPanel;
+    /** @internal */
+    _getLayoutMeasureForChild(child: Control): Measure | null;
+    private _spacing;
+    private _offset;
+    private _resolveFlexibleLengths;
+    protected _beforeChildLayout(): void;
+}
+/**
+ * Registers FlexPanel for serialization. Safe to call repeatedly.
+ */
+export declare function RegisterFlexPanel(): void;

package/2D/controls/flexPanel.pure.js

@@ -0,0 +1,318 @@
+import { __esDecorate, __runInitializers } from "@babylonjs/core/tslib.es6.js";
+import { Container } from "./container.pure.js";
+import { Measure } from "../measure.js";
+import { ValueAndUnit } from "../valueAndUnit.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+/**
+ * Arranges controls in flexible rows or columns using their declared width/height as the basis.
+ * Supports wrapping, gaps, alignment and Control.flexGrow/flexShrink without rewriting child properties.
+ * The panel uses its declared size; intrinsic CSS sizing and baseline alignment are not supported.
+ */
+let FlexPanel = (() => {
+    var _a;
+    let _classSuper = Container;
+    let _instanceExtraInitializers = [];
+    let _get_flexDirection_decorators;
+    let _get_flexWrap_decorators;
+    let _get_justifyContent_decorators;
+    let _get_alignItems_decorators;
+    let _get_alignContent_decorators;
+    let _get_gap_decorators;
+    return _a = class FlexPanel extends _classSuper {
+            /**
+             * Gets or sets the main axis and item direction. Defaults to row.
+             */
+            get flexDirection() {
+                return this._flexDirection;
+            }
+            set flexDirection(value) {
+                if (this._flexDirection !== value) {
+                    this._flexDirection = value;
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Gets or sets line wrapping. Defaults to nowrap.
+             */
+            get flexWrap() {
+                return this._flexWrap;
+            }
+            set flexWrap(value) {
+                if (this._flexWrap !== value) {
+                    this._flexWrap = value;
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Gets or sets the distribution of remaining main-axis space after flexing.
+             */
+            get justifyContent() {
+                return this._justifyContent;
+            }
+            set justifyContent(value) {
+                if (this._justifyContent !== value) {
+                    this._justifyContent = value;
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Gets or sets cross-axis alignment within each line. Stretch fills the line.
+             */
+            get alignItems() {
+                return this._alignItems;
+            }
+            set alignItems(value) {
+                if (this._alignItems !== value) {
+                    this._alignItems = value;
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Gets or sets cross-axis line distribution when wrapping is enabled.
+             */
+            get alignContent() {
+                return this._alignContent;
+            }
+            set alignContent(value) {
+                if (this._alignContent !== value) {
+                    this._alignContent = value;
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Gets or sets the gap between items and lines in px, em, rem, or percent of the main-axis size.
+             */
+            get gap() {
+                return this._gap.toString(this._host);
+            }
+            set gap(value) {
+                if (this._gap.fromString(value)) {
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Creates a flex layout container.
+             * @param name defines the control name
+             */
+            constructor(name) {
+                super(name);
+                this._items = (__runInitializers(this, _instanceExtraInitializers), []);
+                this._lines = [];
+                this._boxes = new WeakMap();
+                this._gap = new ValueAndUnit(0, ValueAndUnit.UNITMODE_PIXEL, false);
+                this._flexDirection = "row";
+                this._flexWrap = "nowrap";
+                this._justifyContent = "flex-start";
+                this._alignItems = "flex-start";
+                this._alignContent = "stretch";
+            }
+            _getTypeName() {
+                return "FlexPanel";
+            }
+            /**
+             * Removes a control and releases its cached layout data.
+             * @param control defines the control to remove
+             * @returns the current panel
+             */
+            removeControl(control) {
+                this._boxes.delete(control);
+                this._items.length = 0;
+                this._lines.length = 0;
+                super.removeControl(control);
+                return this;
+            }
+            /** @internal */
+            _getLayoutMeasureForChild(child) {
+                return this._boxes.get(child) ?? null;
+            }
+            _spacing(alignment, free, count) {
+                if (free <= 0) {
+                    return 0;
+                }
+                switch (alignment) {
+                    case "space-between":
+                        return count > 1 ? free / (count - 1) : 0;
+                    case "space-around":
+                        return count > 0 ? free / count : 0;
+                    case "space-evenly":
+                        return free / (count + 1);
+                    default:
+                        return 0;
+                }
+            }
+            _offset(alignment, free, spacing) {
+                switch (alignment) {
+                    case "flex-end":
+                        return free;
+                    case "center":
+                        return free / 2;
+                    case "space-around":
+                        return spacing / 2;
+                    case "space-evenly":
+                        return spacing;
+                    default:
+                        return 0;
+                }
+            }
+            _resolveFlexibleLengths(line, main) {
+                const free = main - line.basis;
+                let remaining = free;
+                let frozeItem;
+                do {
+                    let weight = 0;
+                    let factorSum = 0;
+                    for (let i = line.start; i < line.end; i++) {
+                        const entry = this._items[i];
+                        if (entry.frozen) {
+                            continue;
+                        }
+                        const factor = free >= 0 ? entry.control.flexGrow : entry.control.flexShrink;
+                        weight += free >= 0 ? factor : factor * entry.basis;
+                        factorSum += factor;
+                    }
+                    // Fractional factors limit distribution using the initial free space, even after freezing.
+                    const distributable = free >= 0 ? Math.min(remaining, free * factorSum) : Math.max(remaining, free * factorSum);
+                    frozeItem = false;
+                    for (let i = line.start; i < line.end; i++) {
+                        const entry = this._items[i];
+                        if (entry.frozen) {
+                            continue;
+                        }
+                        const share = free >= 0 ? entry.control.flexGrow : entry.control.flexShrink * entry.basis;
+                        const size = entry.basis + (weight ? distributable * (share / weight) : 0);
+                        entry.size = Math.max(0, size);
+                        if (size < 0) {
+                            entry.frozen = true;
+                            remaining += entry.basis;
+                            frozeItem = true;
+                        }
+                    }
+                } while (frozeItem);
+            }
+            _beforeChildLayout() {
+                const row = this._flexDirection === "row" || this._flexDirection === "row-reverse";
+                const reverse = this._flexDirection === "row-reverse" || this._flexDirection === "column-reverse";
+                const reverseLines = this._flexWrap === "wrap-reverse";
+                const width = Math.max(0, this._measureForChildren.width - (this.descendantsOnlyPadding ? this.paddingLeftInPixels + this.paddingRightInPixels : 0));
+                const height = Math.max(0, this._measureForChildren.height - (this.descendantsOnlyPadding ? this.paddingTopInPixels + this.paddingBottomInPixels : 0));
+                const main = row ? width : height;
+                const cross = row ? height : width;
+                const gap = this._getValueInPixel(this._gap, main);
+                let count = 0;
+                let lineCount = 0;
+                let line;
+                for (const child of this._children) {
+                    if (!child.isVisible || child.notRenderable) {
+                        continue;
+                    }
+                    child._tempParentMeasure.copyFrom(this._measureForChildren);
+                    const basis = Math.max(0, child._getValueInPixel(child.getDimension(row ? "width" : "height"), main));
+                    const crossSize = Math.max(0, child._getValueInPixel(child.getDimension(row ? "height" : "width"), cross));
+                    if (!line || (this._flexWrap !== "nowrap" && count > line.start && line.basis + gap + basis > main)) {
+                        line = this._lines[lineCount] ?? (this._lines[lineCount] = { start: 0, end: 0, basis: 0, cross: 0 });
+                        line.start = count;
+                        line.end = count;
+                        line.basis = 0;
+                        line.cross = 0;
+                        lineCount++;
+                    }
+                    line.basis += basis + (count > line.start ? gap : 0);
+                    line.cross = Math.max(line.cross, crossSize);
+                    line.end++;
+                    const entry = this._items[count];
+                    if (!entry) {
+                        this._items[count] = { control: child, basis, cross: crossSize, size: basis, frozen: false };
+                    }
+                    else {
+                        entry.control = child;
+                        entry.basis = entry.size = basis;
+                        entry.cross = crossSize;
+                        entry.frozen = false;
+                    }
+                    count++;
+                }
+                this._items.length = count;
+                this._lines.length = lineCount;
+                let crossUsed = Math.max(0, lineCount - 1) * gap;
+                for (const current of this._lines) {
+                    if (this._flexWrap === "nowrap") {
+                        current.cross = cross;
+                    }
+                    crossUsed += current.cross;
+                }
+                const crossFree = cross - crossUsed;
+                const lineSpacing = this._spacing(this._alignContent, crossFree, lineCount);
+                const stretch = this._alignContent === "stretch" && crossFree > 0 && lineCount ? crossFree / lineCount : 0;
+                let crossPosition = this._flexWrap === "nowrap" ? 0 : this._offset(this._alignContent, crossFree, lineSpacing);
+                for (const current of this._lines) {
+                    current.cross += stretch;
+                    this._resolveFlexibleLengths(current, main);
+                    let used = Math.max(0, current.end - current.start - 1) * gap;
+                    for (let i = current.start; i < current.end; i++) {
+                        used += this._items[i].size;
+                    }
+                    const remaining = main - used;
+                    const spacing = this._spacing(this._justifyContent, remaining, current.end - current.start);
+                    let position = this._offset(this._justifyContent, remaining, spacing);
+                    for (let i = current.start; i < current.end; i++) {
+                        const entry = this._items[i];
+                        const child = entry.control;
+                        const childCross = this._alignItems === "stretch" ? current.cross : entry.cross;
+                        const extra = current.cross - childCross;
+                        let childCrossPosition = crossPosition + (this._alignItems === "center" ? extra / 2 : this._alignItems === "flex-end" ? extra : 0);
+                        if (reverseLines) {
+                            childCrossPosition = cross - childCrossPosition - childCross;
+                        }
+                        const childMainPosition = reverse ? main - position - entry.size : position;
+                        const left = row ? childMainPosition : childCrossPosition;
+                        const top = row ? childCrossPosition : childMainPosition;
+                        const childWidth = row ? entry.size : childCross;
+                        const childHeight = row ? childCross : entry.size;
+                        let box = this._boxes.get(child);
+                        if (!box) {
+                            box = new Measure(left, top, childWidth, childHeight);
+                            this._boxes.set(child, box);
+                            child._markAsDirty();
+                        }
+                        else if (box.left !== left || box.top !== top || box.width !== childWidth || box.height !== childHeight) {
+                            box.copyFromFloats(left, top, childWidth, childHeight);
+                            child._markAsDirty();
+                        }
+                        position += entry.size + gap + spacing;
+                    }
+                    crossPosition += current.cross + gap + lineSpacing;
+                }
+            }
+        },
+        (() => {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _get_flexDirection_decorators = [serialize()];
+            _get_flexWrap_decorators = [serialize()];
+            _get_justifyContent_decorators = [serialize()];
+            _get_alignItems_decorators = [serialize()];
+            _get_alignContent_decorators = [serialize()];
+            _get_gap_decorators = [serialize()];
+            __esDecorate(_a, null, _get_flexDirection_decorators, { kind: "getter", name: "flexDirection", static: false, private: false, access: { has: obj => "flexDirection" in obj, get: obj => obj.flexDirection }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_flexWrap_decorators, { kind: "getter", name: "flexWrap", static: false, private: false, access: { has: obj => "flexWrap" in obj, get: obj => obj.flexWrap }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_justifyContent_decorators, { kind: "getter", name: "justifyContent", static: false, private: false, access: { has: obj => "justifyContent" in obj, get: obj => obj.justifyContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_alignItems_decorators, { kind: "getter", name: "alignItems", static: false, private: false, access: { has: obj => "alignItems" in obj, get: obj => obj.alignItems }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_alignContent_decorators, { kind: "getter", name: "alignContent", static: false, private: false, access: { has: obj => "alignContent" in obj, get: obj => obj.alignContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_gap_decorators, { kind: "getter", name: "gap", static: false, private: false, access: { has: obj => "gap" in obj, get: obj => obj.gap }, metadata: _metadata }, null, _instanceExtraInitializers);
+            if (_metadata) Object.defineProperty(_a, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        })(),
+        _a;
+})();
+export { FlexPanel };
+let _Registered = false;
+/**
+ * Registers FlexPanel for serialization. Safe to call repeatedly.
+ */
+export function RegisterFlexPanel() {
+    if (_Registered) {
+        return;
+    }
+    _Registered = true;
+    RegisterClass("BABYLON.GUI.FlexPanel", FlexPanel);
+}
+//# sourceMappingURL=flexPanel.pure.js.map

package/2D/controls/flexPanel.pure.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexPanel.pure.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/flexPanel.pure.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container.pure\";\nimport { type Control } from \"./control.pure\";\nimport { Measure } from \"../measure\";\nimport { ValueAndUnit } from \"../valueAndUnit\";\nimport { RegisterClass } from \"core/Misc/typeStore\";\nimport { serialize } from \"core/Misc/decorators\";\n\n/**\n * Main-axis direction and ordering of a FlexPanel.\n */\nexport type FlexDirection = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\n/**\n * Whether overflowing items form additional lines, and their cross-axis order.\n */\nexport type FlexWrap = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\n/**\n * Distribution of spare space along the main axis.\n */\nexport type FlexJustification = \"flex-start\" | \"flex-end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\";\n/**\n * Alignment of items within each line. Stretch fills the line's cross-axis size.\n */\nexport type FlexAlignment = \"flex-start\" | \"flex-end\" | \"center\" | \"stretch\";\n/**\n * Distribution of lines along the cross axis.\n */\nexport type FlexContentAlignment = FlexJustification | \"stretch\";\n\ntype FlexItem = { control: Control; basis: number; cross: number; size: number; frozen: boolean };\ntype FlexLine = { start: number; end: number; basis: number; cross: number };\n\n/**\n * Arranges controls in flexible rows or columns using their declared width/height as the basis.\n * Supports wrapping, gaps, alignment and Control.flexGrow/flexShrink without rewriting child properties.\n * The panel uses its declared size; intrinsic CSS sizing and baseline alignment are not supported.\n */\nexport class FlexPanel extends Container {\n    private _items: FlexItem[] = [];\n    private _lines: FlexLine[] = [];\n    private _boxes = new WeakMap<Control, Measure>();\n    private _gap = new ValueAndUnit(0, ValueAndUnit.UNITMODE_PIXEL, false);\n\n    private _flexDirection: FlexDirection = \"row\";\n    /**\n     * Gets or sets the main axis and item direction. Defaults to row.\n     */\n    @serialize()\n    public get flexDirection(): FlexDirection {\n        return this._flexDirection;\n    }\n    public set flexDirection(value: FlexDirection) {\n        if (this._flexDirection !== value) {\n            this._flexDirection = value;\n            this._markAsDirty();\n        }\n    }\n\n    private _flexWrap: FlexWrap = \"nowrap\";\n    /**\n     * Gets or sets line wrapping. Defaults to nowrap.\n     */\n    @serialize()\n    public get flexWrap(): FlexWrap {\n        return this._flexWrap;\n    }\n    public set flexWrap(value: FlexWrap) {\n        if (this._flexWrap !== value) {\n            this._flexWrap = value;\n            this._markAsDirty();\n        }\n    }\n\n    private _justifyContent: FlexJustification = \"flex-start\";\n    /**\n     * Gets or sets the distribution of remaining main-axis space after flexing.\n     */\n    @serialize()\n    public get justifyContent(): FlexJustification {\n        return this._justifyContent;\n    }\n    public set justifyContent(value: FlexJustification) {\n        if (this._justifyContent !== value) {\n            this._justifyContent = value;\n            this._markAsDirty();\n        }\n    }\n\n    private _alignItems: FlexAlignment = \"flex-start\";\n    /**\n     * Gets or sets cross-axis alignment within each line. Stretch fills the line.\n     */\n    @serialize()\n    public get alignItems(): FlexAlignment {\n        return this._alignItems;\n    }\n    public set alignItems(value: FlexAlignment) {\n        if (this._alignItems !== value) {\n            this._alignItems = value;\n            this._markAsDirty();\n        }\n    }\n\n    private _alignContent: FlexContentAlignment = \"stretch\";\n    /**\n     * Gets or sets cross-axis line distribution when wrapping is enabled.\n     */\n    @serialize()\n    public get alignContent(): FlexContentAlignment {\n        return this._alignContent;\n    }\n    public set alignContent(value: FlexContentAlignment) {\n        if (this._alignContent !== value) {\n            this._alignContent = value;\n            this._markAsDirty();\n        }\n    }\n\n    /**\n     * Gets or sets the gap between items and lines in px, em, rem, or percent of the main-axis size.\n     */\n    @serialize()\n    public get gap(): string | number {\n        return this._gap.toString(this._host);\n    }\n    public set gap(value: string | number) {\n        if (this._gap.fromString(value)) {\n            this._markAsDirty();\n        }\n    }\n\n    /**\n     * Creates a flex layout container.\n     * @param name defines the control name\n     */\n    constructor(name?: string) {\n        super(name);\n    }\n\n    protected override _getTypeName(): string {\n        return \"FlexPanel\";\n    }\n\n    /**\n     * Removes a control and releases its cached layout data.\n     * @param control defines the control to remove\n     * @returns the current panel\n     */\n    public override removeControl(control: Control): FlexPanel {\n        this._boxes.delete(control);\n        this._items.length = 0;\n        this._lines.length = 0;\n        super.removeControl(control);\n        return this;\n    }\n\n    /** @internal */\n    public override _getLayoutMeasureForChild(child: Control): Measure | null {\n        return this._boxes.get(child) ?? null;\n    }\n\n    private _spacing(alignment: FlexContentAlignment, free: number, count: number): number {\n        if (free <= 0) {\n            return 0;\n        }\n        switch (alignment) {\n            case \"space-between\":\n                return count > 1 ? free / (count - 1) : 0;\n            case \"space-around\":\n                return count > 0 ? free / count : 0;\n            case \"space-evenly\":\n                return free / (count + 1);\n            default:\n                return 0;\n        }\n    }\n\n    private _offset(alignment: FlexContentAlignment, free: number, spacing: number): number {\n        switch (alignment) {\n            case \"flex-end\":\n                return free;\n            case \"center\":\n                return free / 2;\n            case \"space-around\":\n                return spacing / 2;\n            case \"space-evenly\":\n                return spacing;\n            default:\n                return 0;\n        }\n    }\n\n    private _resolveFlexibleLengths(line: FlexLine, main: number): void {\n        const free = main - line.basis;\n        let remaining = free;\n        let frozeItem: boolean;\n        do {\n            let weight = 0;\n            let factorSum = 0;\n            for (let i = line.start; i < line.end; i++) {\n                const entry = this._items[i];\n                if (entry.frozen) {\n                    continue;\n                }\n                const factor = free >= 0 ? entry.control.flexGrow : entry.control.flexShrink;\n                weight += free >= 0 ? factor : factor * entry.basis;\n                factorSum += factor;\n            }\n            // Fractional factors limit distribution using the initial free space, even after freezing.\n            const distributable = free >= 0 ? Math.min(remaining, free * factorSum) : Math.max(remaining, free * factorSum);\n            frozeItem = false;\n            for (let i = line.start; i < line.end; i++) {\n                const entry = this._items[i];\n                if (entry.frozen) {\n                    continue;\n                }\n                const share = free >= 0 ? entry.control.flexGrow : entry.control.flexShrink * entry.basis;\n                const size = entry.basis + (weight ? distributable * (share / weight) : 0);\n                entry.size = Math.max(0, size);\n                if (size < 0) {\n                    entry.frozen = true;\n                    remaining += entry.basis;\n                    frozeItem = true;\n                }\n            }\n        } while (frozeItem);\n    }\n\n    protected override _beforeChildLayout(): void {\n        const row = this._flexDirection === \"row\" || this._flexDirection === \"row-reverse\";\n        const reverse = this._flexDirection === \"row-reverse\" || this._flexDirection === \"column-reverse\";\n        const reverseLines = this._flexWrap === \"wrap-reverse\";\n        const width = Math.max(0, this._measureForChildren.width - (this.descendantsOnlyPadding ? this.paddingLeftInPixels + this.paddingRightInPixels : 0));\n        const height = Math.max(0, this._measureForChildren.height - (this.descendantsOnlyPadding ? this.paddingTopInPixels + this.paddingBottomInPixels : 0));\n        const main = row ? width : height;\n        const cross = row ? height : width;\n        const gap = this._getValueInPixel(this._gap, main);\n        let count = 0;\n        let lineCount = 0;\n        let line: FlexLine | undefined;\n        for (const child of this._children) {\n            if (!child.isVisible || child.notRenderable) {\n                continue;\n            }\n            child._tempParentMeasure.copyFrom(this._measureForChildren);\n            const basis = Math.max(0, child._getValueInPixel(child.getDimension(row ? \"width\" : \"height\"), main));\n            const crossSize = Math.max(0, child._getValueInPixel(child.getDimension(row ? \"height\" : \"width\"), cross));\n            if (!line || (this._flexWrap !== \"nowrap\" && count > line.start && line.basis + gap + basis > main)) {\n                line = this._lines[lineCount] ?? (this._lines[lineCount] = { start: 0, end: 0, basis: 0, cross: 0 });\n                line.start = count;\n                line.end = count;\n                line.basis = 0;\n                line.cross = 0;\n                lineCount++;\n            }\n            line.basis += basis + (count > line.start ? gap : 0);\n            line.cross = Math.max(line.cross, crossSize);\n            line.end++;\n            const entry = this._items[count];\n            if (!entry) {\n                this._items[count] = { control: child, basis, cross: crossSize, size: basis, frozen: false };\n            } else {\n                entry.control = child;\n                entry.basis = entry.size = basis;\n                entry.cross = crossSize;\n                entry.frozen = false;\n            }\n            count++;\n        }\n        this._items.length = count;\n        this._lines.length = lineCount;\n        let crossUsed = Math.max(0, lineCount - 1) * gap;\n        for (const current of this._lines) {\n            if (this._flexWrap === \"nowrap\") {\n                current.cross = cross;\n            }\n            crossUsed += current.cross;\n        }\n        const crossFree = cross - crossUsed;\n        const lineSpacing = this._spacing(this._alignContent, crossFree, lineCount);\n        const stretch = this._alignContent === \"stretch\" && crossFree > 0 && lineCount ? crossFree / lineCount : 0;\n        let crossPosition = this._flexWrap === \"nowrap\" ? 0 : this._offset(this._alignContent, crossFree, lineSpacing);\n        for (const current of this._lines) {\n            current.cross += stretch;\n            this._resolveFlexibleLengths(current, main);\n            let used = Math.max(0, current.end - current.start - 1) * gap;\n            for (let i = current.start; i < current.end; i++) {\n                used += this._items[i].size;\n            }\n            const remaining = main - used;\n            const spacing = this._spacing(this._justifyContent, remaining, current.end - current.start);\n            let position = this._offset(this._justifyContent, remaining, spacing);\n            for (let i = current.start; i < current.end; i++) {\n                const entry = this._items[i];\n                const child = entry.control;\n                const childCross = this._alignItems === \"stretch\" ? current.cross : entry.cross;\n                const extra = current.cross - childCross;\n                let childCrossPosition = crossPosition + (this._alignItems === \"center\" ? extra / 2 : this._alignItems === \"flex-end\" ? extra : 0);\n                if (reverseLines) {\n                    childCrossPosition = cross - childCrossPosition - childCross;\n                }\n                const childMainPosition = reverse ? main - position - entry.size : position;\n                const left = row ? childMainPosition : childCrossPosition;\n                const top = row ? childCrossPosition : childMainPosition;\n                const childWidth = row ? entry.size : childCross;\n                const childHeight = row ? childCross : entry.size;\n                let box = this._boxes.get(child);\n                if (!box) {\n                    box = new Measure(left, top, childWidth, childHeight);\n                    this._boxes.set(child, box);\n                    child._markAsDirty();\n                } else if (box.left !== left || box.top !== top || box.width !== childWidth || box.height !== childHeight) {\n                    box.copyFromFloats(left, top, childWidth, childHeight);\n                    child._markAsDirty();\n                }\n                position += entry.size + gap + spacing;\n            }\n            crossPosition += current.cross + gap + lineSpacing;\n        }\n    }\n}\n\nlet _Registered = false;\n/**\n * Registers FlexPanel for serialization. Safe to call repeatedly.\n */\nexport function RegisterFlexPanel(): void {\n    if (_Registered) {\n        return;\n    }\n    _Registered = true;\n    RegisterClass(\"BABYLON.GUI.FlexPanel\", FlexPanel);\n}\n"]}

package/2D/controls/index.d.ts

@@ -7,6 +7,7 @@ export * from "./ellipse.js";
 export * from "./focusableButton.js";
 export * from "./focusableControl.js";
 export * from "./grid.js";
+export * from "./flexPanel.js";
 export * from "./image.js";
 export * from "./inputText.js";
 export * from "./inputTextArea.js";

package/2D/controls/index.js

@@ -7,6 +7,7 @@ export * from "./ellipse.js";
 export * from "./focusableButton.js";
 export * from "./focusableControl.js";
 export * from "./grid.js";
+export * from "./flexPanel.js";
 export * from "./image.js";
 export * from "./inputText.js";
 export * from "./inputTextArea.js";

package/2D/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC","sourcesContent":["export * from \"./button\";\r\nexport * from \"./checkbox\";\r\nexport * from \"./colorpicker\";\r\nexport * from \"./container\";\r\nexport * from \"./control\";\r\nexport * from \"./ellipse\";\r\nexport * from \"./focusableButton\";\r\nexport * from \"./focusableControl\";\r\nexport * from \"./grid\";\r\nexport * from \"./image\";\r\nexport * from \"./inputText\";\r\nexport * from \"./inputTextArea\";\r\nexport * from \"./inputPassword\";\r\nexport * from \"./line\";\r\nexport * from \"./multiLine\";\r\nexport * from \"./radioButton\";\r\nexport * from \"./stackPanel\";\r\nexport * from \"./selector\";\r\nexport * from \"./scrollViewers/scrollViewer\";\r\nexport * from \"./textBlock\";\r\nexport * from \"./textWrapper\";\r\nexport * from \"./toggleButton\";\r\nexport * from \"./virtualKeyboard\";\r\nexport * from \"./rectangle\";\r\nexport * from \"./displayGrid\";\r\nexport * from \"./sliders/baseSlider\";\r\nexport * from \"./sliders/slider\";\r\nexport * from \"./sliders/imageBasedSlider\";\r\nexport * from \"./sliders/scrollBar\";\r\nexport * from \"./sliders/imageScrollBar\";\r\nexport * from \"./statics\";\r\nexport * from \"./gradient/BaseGradient\";\r\nexport * from \"./gradient/LinearGradient\";\r\nexport * from \"./gradient/RadialGradient\";\r\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC","sourcesContent":["export * from \"./button\";\r\nexport * from \"./checkbox\";\r\nexport * from \"./colorpicker\";\r\nexport * from \"./container\";\r\nexport * from \"./control\";\r\nexport * from \"./ellipse\";\r\nexport * from \"./focusableButton\";\r\nexport * from \"./focusableControl\";\r\nexport * from \"./grid\";\r\nexport * from \"./flexPanel\";\r\nexport * from \"./image\";\r\nexport * from \"./inputText\";\r\nexport * from \"./inputTextArea\";\r\nexport * from \"./inputPassword\";\r\nexport * from \"./line\";\r\nexport * from \"./multiLine\";\r\nexport * from \"./radioButton\";\r\nexport * from \"./stackPanel\";\r\nexport * from \"./selector\";\r\nexport * from \"./scrollViewers/scrollViewer\";\r\nexport * from \"./textBlock\";\r\nexport * from \"./textWrapper\";\r\nexport * from \"./toggleButton\";\r\nexport * from \"./virtualKeyboard\";\r\nexport * from \"./rectangle\";\r\nexport * from \"./displayGrid\";\r\nexport * from \"./sliders/baseSlider\";\r\nexport * from \"./sliders/slider\";\r\nexport * from \"./sliders/imageBasedSlider\";\r\nexport * from \"./sliders/scrollBar\";\r\nexport * from \"./sliders/imageScrollBar\";\r\nexport * from \"./statics\";\r\nexport * from \"./gradient/BaseGradient\";\r\nexport * from \"./gradient/LinearGradient\";\r\nexport * from \"./gradient/RadialGradient\";\r\n"]}

package/2D/controls/inputText.pure.js

@@ -68,7 +68,7 @@ let InputText = (() => {
             }
             /** Gets the maximum width allowed by the control in pixels */
             get maxWidthInPixels() {
-                return this._maxWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._maxWidth, this._cachedParentMeasure.width);
             }
             set maxWidth(value) {
                 if (this._maxWidth.toString(this._host) === value) {
@@ -129,7 +129,7 @@ let InputText = (() => {
             }
             /** Gets control margin in pixels */
             get marginInPixels() {
-                return this._margin.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._margin, this._cachedParentMeasure.width);
             }
             set margin(value) {
                 if (this._margin.toString(this._host) === value) {
@@ -835,7 +835,7 @@ let InputText = (() => {
                     this._fontOffset = Control._GetFontOffset(context.font, this._host.getScene()?.getEngine());
                 }
                 // Text
-                const clipTextLeft = this._currentMeasure.left + this._margin.getValueInPixel(this._host, this._tempParentMeasure.width);
+                const clipTextLeft = this._currentMeasure.left + this._getValueInPixel(this._margin, this._tempParentMeasure.width);
                 if (this.color) {
                     context.fillStyle = this.color;
                 }
@@ -848,13 +848,14 @@ let InputText = (() => {
                     }
                 }
                 this._textWidth = context.measureText(text.text).width;
-                const marginWidth = this._margin.getValueInPixel(this._host, this._tempParentMeasure.width) * 2;
+                const marginWidth = this._getValueInPixel(this._margin, this._tempParentMeasure.width) * 2;
                 if (this._autoStretchWidth) {
-                    this.width = Math.min(this._maxWidth.getValueInPixel(this._host, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
+                    this.width = Math.min(this._getValueInPixel(this._maxWidth, this._tempParentMeasure.width), this._textWidth + marginWidth) + "px";
                     this._autoStretchWidth = true; // setting the width will have reset _autoStretchWidth to false!
                 }
                 const rootY = this._fontOffset.ascent + (this._currentMeasure.height - this._fontOffset.height) / 2;
-                const availableWidth = this._width.getValueInPixel(this._host, this._tempParentMeasure.width) - marginWidth;
+                const allocatedWidth = this.parent?._getLayoutMeasureForChild(this)?.width;
+                const availableWidth = (allocatedWidth ?? this._getValueInPixel(this._width, this._tempParentMeasure.width)) - marginWidth;
                 context.save();
                 context.beginPath();
                 context.rect(clipTextLeft, this._currentMeasure.top + (this._currentMeasure.height - this._fontOffset.height) / 2, availableWidth + 2, this._currentMeasure.height);