@onerjs/gui 8.23.1

package/2D/controls/sliders/slider.js

@@ -0,0 +1,281 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { BaseSlider } from "./baseSlider.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+/**
+ * Class used to create slider controls
+ */
+export class Slider extends BaseSlider {
+    /** Gets or sets a boolean indicating if the value bar must be rendered */
+    get displayValueBar() {
+        return this._displayValueBar;
+    }
+    set displayValueBar(value) {
+        if (this._displayValueBar === value) {
+            return;
+        }
+        this._displayValueBar = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets border color */
+    get borderColor() {
+        return this._borderColor;
+    }
+    set borderColor(value) {
+        if (this._borderColor === value) {
+            return;
+        }
+        this._borderColor = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets background color */
+    get background() {
+        return this._background;
+    }
+    set background(value) {
+        if (this._background === value) {
+            return;
+        }
+        this._background = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets background gradient */
+    get backgroundGradient() {
+        return this._backgroundGradient;
+    }
+    set backgroundGradient(value) {
+        if (this._backgroundGradient === value) {
+            return;
+        }
+        this._backgroundGradient = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets thumb's color */
+    get thumbColor() {
+        return this._thumbColor;
+    }
+    set thumbColor(value) {
+        if (this._thumbColor === value) {
+            return;
+        }
+        this._thumbColor = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a boolean indicating if the thumb should be round or square */
+    get isThumbCircle() {
+        return this._isThumbCircle;
+    }
+    set isThumbCircle(value) {
+        if (this._isThumbCircle === value) {
+            return;
+        }
+        this._isThumbCircle = value;
+        this._markAsDirty();
+    }
+    /**
+     * Creates a new Slider
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._background = "black";
+        this._borderColor = "white";
+        this._thumbColor = "";
+        this._isThumbCircle = false;
+        this._displayValueBar = true;
+        this._backgroundGradient = null;
+    }
+    _getTypeName() {
+        return "Slider";
+    }
+    _getBackgroundColor(context) {
+        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;
+    }
+    _draw(context) {
+        context.save();
+        this._applyStates(context);
+        this._prepareRenderingData(this.isThumbCircle ? "circle" : "rectangle");
+        let left = this._renderLeft;
+        let top = this._renderTop;
+        const width = this._renderWidth;
+        const height = this._renderHeight;
+        let radius = 0;
+        if (this.isThumbClamped && this.isThumbCircle) {
+            if (this.isVertical) {
+                top += this._effectiveThumbThickness / 2;
+            }
+            else {
+                left += this._effectiveThumbThickness / 2;
+            }
+            radius = this._backgroundBoxThickness / 2;
+        }
+        else {
+            radius = (this._effectiveThumbThickness - this._effectiveBarOffset) / 2;
+        }
+        radius = Math.max(0, radius);
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+        }
+        const thumbPosition = this._getThumbPosition();
+        context.fillStyle = this._getBackgroundColor(context);
+        if (this.isVertical) {
+            if (this.isThumbClamped) {
+                if (this.isThumbCircle) {
+                    context.beginPath();
+                    context.arc(left + this._backgroundBoxThickness / 2, top, radius, Math.PI, 2 * Math.PI);
+                    context.fill();
+                    context.fillRect(left, top, width, height);
+                }
+                else {
+                    context.fillRect(left, top, width, height + this._effectiveThumbThickness);
+                }
+            }
+            else {
+                context.fillRect(left, top, width, height);
+            }
+        }
+        else {
+            if (this.isThumbClamped) {
+                if (this.isThumbCircle) {
+                    context.beginPath();
+                    context.arc(left + this._backgroundBoxLength, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);
+                    context.fill();
+                    context.fillRect(left, top, width, height);
+                }
+                else {
+                    context.fillRect(left, top, width + this._effectiveThumbThickness, height);
+                }
+            }
+            else {
+                context.fillRect(left, top, width, height);
+            }
+        }
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowBlur = 0;
+            context.shadowOffsetX = 0;
+            context.shadowOffsetY = 0;
+        }
+        // Value bar
+        context.fillStyle = this._getColor(context);
+        if (this._displayValueBar) {
+            if (this.isVertical) {
+                if (this.isThumbClamped) {
+                    if (this.isThumbCircle) {
+                        context.beginPath();
+                        context.arc(left + this._backgroundBoxThickness / 2, top + this._backgroundBoxLength, radius, 0, 2 * Math.PI);
+                        context.fill();
+                        context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
+                    }
+                    else {
+                        context.fillRect(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);
+                    }
+                }
+                else {
+                    context.fillRect(left, top + thumbPosition, width, height - thumbPosition);
+                }
+            }
+            else {
+                if (this.isThumbClamped) {
+                    if (this.isThumbCircle) {
+                        context.beginPath();
+                        context.arc(left, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);
+                        context.fill();
+                        context.fillRect(left, top, thumbPosition, height);
+                    }
+                    else {
+                        context.fillRect(left, top, thumbPosition, height);
+                    }
+                }
+                else {
+                    context.fillRect(left, top, thumbPosition, height);
+                }
+            }
+        }
+        // Thumb
+        context.fillStyle = this._thumbColor || this._getColor(context);
+        if (this.displayThumb) {
+            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+                context.shadowColor = this.shadowColor;
+                context.shadowBlur = this.shadowBlur;
+                context.shadowOffsetX = this.shadowOffsetX;
+                context.shadowOffsetY = this.shadowOffsetY;
+            }
+            if (this._isThumbCircle) {
+                context.beginPath();
+                if (this.isVertical) {
+                    context.arc(left + this._backgroundBoxThickness / 2, top + thumbPosition, radius, 0, 2 * Math.PI);
+                }
+                else {
+                    context.arc(left + thumbPosition, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);
+                }
+                context.fill();
+                if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
+                context.strokeStyle = this._borderColor;
+                context.stroke();
+            }
+            else {
+                if (this.isVertical) {
+                    context.fillRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
+                }
+                else {
+                    context.fillRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
+                }
+                if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+                    context.shadowBlur = 0;
+                    context.shadowOffsetX = 0;
+                    context.shadowOffsetY = 0;
+                }
+                context.strokeStyle = this._borderColor;
+                if (this.isVertical) {
+                    context.strokeRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
+                }
+                else {
+                    context.strokeRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
+                }
+            }
+        }
+        context.restore();
+    }
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
+        if (this.backgroundGradient) {
+            serializationObject.backgroundGradient = {};
+            this.backgroundGradient.serialize(serializationObject.backgroundGradient);
+        }
+    }
+    /** @internal */
+    _parseFromContent(serializedObject, host) {
+        super._parseFromContent(serializedObject, host);
+        if (serializedObject.backgroundGradient) {
+            const className = Tools.Instantiate("BABYLON.GUI." + serializedObject.backgroundGradient.className);
+            this.backgroundGradient = new className();
+            this.backgroundGradient.parse(serializedObject.backgroundGradient);
+        }
+    }
+}
+__decorate([
+    serialize()
+], Slider.prototype, "displayValueBar", null);
+__decorate([
+    serialize()
+], Slider.prototype, "borderColor", null);
+__decorate([
+    serialize()
+], Slider.prototype, "background", null);
+__decorate([
+    serialize()
+], Slider.prototype, "thumbColor", null);
+__decorate([
+    serialize()
+], Slider.prototype, "isThumbCircle", null);
+RegisterClass("BABYLON.GUI.Slider", Slider);
+//# sourceMappingURL=slider.js.map

package/2D/controls/sliders/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../dev/gui/src/2D/controls/sliders/slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { BaseSlider } from \"./baseSlider\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { BaseGradient } from \"../gradient/BaseGradient\";\r\nimport type { AdvancedDynamicTexture } from \"gui/2D/advancedDynamicTexture\";\r\nimport { Tools } from \"core/Misc/tools\";\r\n\r\n/**\r\n * Class used to create slider controls\r\n */\r\nexport class Slider extends BaseSlider {\r\n    private _background = \"black\";\r\n    private _borderColor = \"white\";\r\n    private _thumbColor = \"\";\r\n    private _isThumbCircle = false;\r\n    protected _displayValueBar = true;\r\n    private _backgroundGradient: Nullable<BaseGradient> = null;\r\n\r\n    /** Gets or sets a boolean indicating if the value bar must be rendered */\r\n    @serialize()\r\n    public get displayValueBar(): boolean {\r\n        return this._displayValueBar;\r\n    }\r\n\r\n    public set displayValueBar(value: boolean) {\r\n        if (this._displayValueBar === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayValueBar = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets border color */\r\n    @serialize()\r\n    public get borderColor(): string {\r\n        return this._borderColor;\r\n    }\r\n\r\n    public set borderColor(value: string) {\r\n        if (this._borderColor === value) {\r\n            return;\r\n        }\r\n\r\n        this._borderColor = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\r\n    @serialize()\r\n    public get background(): string {\r\n        return this._background;\r\n    }\r\n\r\n    public set background(value: string) {\r\n        if (this._background === value) {\r\n            return;\r\n        }\r\n\r\n        this._background = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background gradient */\r\n    public get backgroundGradient(): Nullable<BaseGradient> {\r\n        return this._backgroundGradient;\r\n    }\r\n\r\n    public set backgroundGradient(value: Nullable<BaseGradient>) {\r\n        if (this._backgroundGradient === value) {\r\n            return;\r\n        }\r\n\r\n        this._backgroundGradient = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets thumb's color */\r\n    @serialize()\r\n    public get thumbColor(): string {\r\n        return this._thumbColor;\r\n    }\r\n\r\n    public set thumbColor(value: string) {\r\n        if (this._thumbColor === value) {\r\n            return;\r\n        }\r\n\r\n        this._thumbColor = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a boolean indicating if the thumb should be round or square */\r\n    @serialize()\r\n    public get isThumbCircle(): boolean {\r\n        return this._isThumbCircle;\r\n    }\r\n\r\n    public set isThumbCircle(value: boolean) {\r\n        if (this._isThumbCircle === value) {\r\n            return;\r\n        }\r\n\r\n        this._isThumbCircle = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new Slider\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"Slider\";\r\n    }\r\n\r\n    protected _getBackgroundColor(context: ICanvasRenderingContext) {\r\n        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;\r\n    }\r\n\r\n    public override _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        this._prepareRenderingData(this.isThumbCircle ? \"circle\" : \"rectangle\");\r\n        let left = this._renderLeft;\r\n        let top = this._renderTop;\r\n        const width = this._renderWidth;\r\n        const height = this._renderHeight;\r\n\r\n        let radius = 0;\r\n\r\n        if (this.isThumbClamped && this.isThumbCircle) {\r\n            if (this.isVertical) {\r\n                top += this._effectiveThumbThickness / 2;\r\n            } else {\r\n                left += this._effectiveThumbThickness / 2;\r\n            }\r\n\r\n            radius = this._backgroundBoxThickness / 2;\r\n        } else {\r\n            radius = (this._effectiveThumbThickness - this._effectiveBarOffset) / 2;\r\n        }\r\n        radius = Math.max(0, radius);\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowColor = this.shadowColor;\r\n            context.shadowBlur = this.shadowBlur;\r\n            context.shadowOffsetX = this.shadowOffsetX;\r\n            context.shadowOffsetY = this.shadowOffsetY;\r\n        }\r\n\r\n        const thumbPosition = this._getThumbPosition();\r\n        context.fillStyle = this._getBackgroundColor(context);\r\n\r\n        if (this.isVertical) {\r\n            if (this.isThumbClamped) {\r\n                if (this.isThumbCircle) {\r\n                    context.beginPath();\r\n                    context.arc(left + this._backgroundBoxThickness / 2, top, radius, Math.PI, 2 * Math.PI);\r\n                    context.fill();\r\n                    context.fillRect(left, top, width, height);\r\n                } else {\r\n                    context.fillRect(left, top, width, height + this._effectiveThumbThickness);\r\n                }\r\n            } else {\r\n                context.fillRect(left, top, width, height);\r\n            }\r\n        } else {\r\n            if (this.isThumbClamped) {\r\n                if (this.isThumbCircle) {\r\n                    context.beginPath();\r\n                    context.arc(left + this._backgroundBoxLength, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);\r\n                    context.fill();\r\n                    context.fillRect(left, top, width, height);\r\n                } else {\r\n                    context.fillRect(left, top, width + this._effectiveThumbThickness, height);\r\n                }\r\n            } else {\r\n                context.fillRect(left, top, width, height);\r\n            }\r\n        }\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowBlur = 0;\r\n            context.shadowOffsetX = 0;\r\n            context.shadowOffsetY = 0;\r\n        }\r\n\r\n        // Value bar\r\n        context.fillStyle = this._getColor(context);\r\n        if (this._displayValueBar) {\r\n            if (this.isVertical) {\r\n                if (this.isThumbClamped) {\r\n                    if (this.isThumbCircle) {\r\n                        context.beginPath();\r\n                        context.arc(left + this._backgroundBoxThickness / 2, top + this._backgroundBoxLength, radius, 0, 2 * Math.PI);\r\n                        context.fill();\r\n                        context.fillRect(left, top + thumbPosition, width, height - thumbPosition);\r\n                    } else {\r\n                        context.fillRect(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);\r\n                    }\r\n                } else {\r\n                    context.fillRect(left, top + thumbPosition, width, height - thumbPosition);\r\n                }\r\n            } else {\r\n                if (this.isThumbClamped) {\r\n                    if (this.isThumbCircle) {\r\n                        context.beginPath();\r\n                        context.arc(left, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);\r\n                        context.fill();\r\n                        context.fillRect(left, top, thumbPosition, height);\r\n                    } else {\r\n                        context.fillRect(left, top, thumbPosition, height);\r\n                    }\r\n                } else {\r\n                    context.fillRect(left, top, thumbPosition, height);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Thumb\r\n        context.fillStyle = this._thumbColor || this._getColor(context);\r\n        if (this.displayThumb) {\r\n            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n                context.shadowColor = this.shadowColor;\r\n                context.shadowBlur = this.shadowBlur;\r\n                context.shadowOffsetX = this.shadowOffsetX;\r\n                context.shadowOffsetY = this.shadowOffsetY;\r\n            }\r\n            if (this._isThumbCircle) {\r\n                context.beginPath();\r\n                if (this.isVertical) {\r\n                    context.arc(left + this._backgroundBoxThickness / 2, top + thumbPosition, radius, 0, 2 * Math.PI);\r\n                } else {\r\n                    context.arc(left + thumbPosition, top + this._backgroundBoxThickness / 2, radius, 0, 2 * Math.PI);\r\n                }\r\n                context.fill();\r\n                if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n                    context.shadowBlur = 0;\r\n                    context.shadowOffsetX = 0;\r\n                    context.shadowOffsetY = 0;\r\n                }\r\n                context.strokeStyle = this._borderColor;\r\n                context.stroke();\r\n            } else {\r\n                if (this.isVertical) {\r\n                    context.fillRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);\r\n                } else {\r\n                    context.fillRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);\r\n                }\r\n                if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n                    context.shadowBlur = 0;\r\n                    context.shadowOffsetX = 0;\r\n                    context.shadowOffsetY = 0;\r\n                }\r\n                context.strokeStyle = this._borderColor;\r\n                if (this.isVertical) {\r\n                    context.strokeRect(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);\r\n                } else {\r\n                    context.strokeRect(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);\r\n                }\r\n            }\r\n        }\r\n        context.restore();\r\n    }\r\n\r\n    public override serialize(serializationObject: any) {\r\n        super.serialize(serializationObject);\r\n\r\n        if (this.backgroundGradient) {\r\n            serializationObject.backgroundGradient = {};\r\n            this.backgroundGradient.serialize(serializationObject.backgroundGradient);\r\n        }\r\n    }\r\n\r\n    /** @internal */\r\n    public override _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {\r\n        super._parseFromContent(serializedObject, host);\r\n\r\n        if (serializedObject.backgroundGradient) {\r\n            const className = Tools.Instantiate(\"BABYLON.GUI.\" + serializedObject.backgroundGradient.className);\r\n            this.backgroundGradient = new className();\r\n            this.backgroundGradient!.parse(serializedObject.backgroundGradient);\r\n        }\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Slider\", Slider);\r\n"]}

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

@@ -0,0 +1,64 @@
+import { Container } from "./container.js";
+import type { Measure } from "../measure.js";
+import type { AdvancedDynamicTexture } from "../advancedDynamicTexture.js";
+import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/**
+ * Class used to create a 2D stack panel container
+ */
+export declare class StackPanel extends Container {
+    name?: string | undefined;
+    private _isVertical;
+    private _manualWidth;
+    private _manualHeight;
+    private _doNotTrackManualChanges;
+    private _spacing;
+    /**
+     * Gets or sets a boolean indicating that layout warnings should be ignored
+     */
+    ignoreLayoutWarnings: boolean;
+    /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
+    get isVertical(): boolean;
+    set isVertical(value: boolean);
+    /**
+     * Gets or sets the spacing (in pixels) between each child.
+     */
+    get spacing(): number;
+    set spacing(value: number);
+    /**
+     * Gets or sets panel width.
+     * This value should not be set when in horizontal mode as it will be computed automatically
+     */
+    set width(value: string | number);
+    get width(): string | number;
+    /**
+     * Gets or sets panel height.
+     * This value should not be set when in vertical mode as it will be computed automatically
+     */
+    set height(value: string | number);
+    get height(): string | number;
+    /**
+     * Creates a new StackPanel
+     * @param name defines control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    /**
+     * @internal
+     */
+    protected _preMeasure(parentMeasure: Measure, context: ICanvasRenderingContext): void;
+    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
+    protected _postMeasure(): void;
+    private _getManualDim;
+    isDimensionFullyDefined(dim: "width" | "height"): boolean;
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     * @param force force serialization even if isSerializable === false
+     * @param allowCanvas defines if the control is allowed to use a Canvas2D object to serialize
+     */
+    serialize(serializationObject: any, force: boolean, allowCanvas: boolean): void;
+    /**
+     * @internal
+     */
+    _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void;
+}

package/2D/controls/stackPanel.js

@@ -0,0 +1,244 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { Container } from "./container.js";
+import { Control } from "./control.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+/**
+ * Class used to create a 2D stack panel container
+ */
+export class StackPanel extends Container {
+    /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/
+    get isVertical() {
+        return this._isVertical;
+    }
+    set isVertical(value) {
+        if (this._isVertical === value) {
+            return;
+        }
+        this._isVertical = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the spacing (in pixels) between each child.
+     */
+    get spacing() {
+        return this._spacing;
+    }
+    set spacing(value) {
+        if (this._spacing === value) {
+            return;
+        }
+        this._spacing = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets panel width.
+     * This value should not be set when in horizontal mode as it will be computed automatically
+     */
+    set width(value) {
+        if (!this._doNotTrackManualChanges) {
+            this._manualWidth = true;
+        }
+        if (this._width.toString(this._host) === value) {
+            return;
+        }
+        if (this._width.fromString(value)) {
+            this._markAsDirty();
+        }
+    }
+    get width() {
+        return this._width.toString(this._host);
+    }
+    /**
+     * Gets or sets panel height.
+     * This value should not be set when in vertical mode as it will be computed automatically
+     */
+    set height(value) {
+        if (!this._doNotTrackManualChanges) {
+            this._manualHeight = true;
+        }
+        if (this._height.toString(this._host) === value) {
+            return;
+        }
+        if (this._height.fromString(value)) {
+            this._markAsDirty();
+        }
+    }
+    get height() {
+        return this._height.toString(this._host);
+    }
+    /**
+     * Creates a new StackPanel
+     * @param name defines control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._isVertical = true;
+        this._manualWidth = false;
+        this._manualHeight = false;
+        this._doNotTrackManualChanges = false;
+        this._spacing = 0;
+        /**
+         * Gets or sets a boolean indicating that layout warnings should be ignored
+         */
+        this.ignoreLayoutWarnings = false;
+    }
+    _getTypeName() {
+        return "StackPanel";
+    }
+    /**
+     * @internal
+     */
+    _preMeasure(parentMeasure, context) {
+        for (const child of this._children) {
+            if (this._isVertical) {
+                child.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+            }
+            else {
+                child.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+            }
+        }
+        super._preMeasure(parentMeasure, context);
+    }
+    _additionalProcessing(parentMeasure, context) {
+        super._additionalProcessing(parentMeasure, context);
+        this._measureForChildren.copyFrom(parentMeasure);
+        this._measureForChildren.left = this._currentMeasure.left;
+        this._measureForChildren.top = this._currentMeasure.top;
+        if (!this.isVertical || this._manualWidth) {
+            this._measureForChildren.width = this._currentMeasure.width;
+        }
+        if (this.isVertical || this._manualHeight) {
+            this._measureForChildren.height = this._currentMeasure.height;
+        }
+    }
+    _postMeasure() {
+        let stackWidth = 0;
+        let stackHeight = 0;
+        const childrenCount = this._children.length;
+        for (let index = 0; index < childrenCount; index++) {
+            const child = this._children[index];
+            if (!child.isVisible || child.notRenderable) {
+                continue;
+            }
+            if (this._isVertical) {
+                const top = stackHeight + "px";
+                if (child.top !== top) {
+                    child.top = top;
+                    this._rebuildLayout = true;
+                    child._top.ignoreAdaptiveScaling = true;
+                }
+                if (!this.ignoreLayoutWarnings && !child.isDimensionFullyDefined("height")) {
+                    Logger.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using height in percentage mode inside a vertical StackPanel`, 1);
+                }
+                else {
+                    stackHeight += child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels + (index < childrenCount - 1 ? this._spacing : 0);
+                }
+            }
+            else {
+                const left = stackWidth + "px";
+                if (child.left !== left) {
+                    child.left = left;
+                    this._rebuildLayout = true;
+                    child._left.ignoreAdaptiveScaling = true;
+                }
+                if (!this.ignoreLayoutWarnings && !child.isDimensionFullyDefined("width")) {
+                    Logger.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using width in percentage mode inside a horizontal StackPanel`, 1);
+                }
+                else {
+                    stackWidth += child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels + (index < childrenCount - 1 ? this._spacing : 0);
+                }
+            }
+        }
+        stackWidth += this._paddingLeftInPixels + this._paddingRightInPixels;
+        stackHeight += this._paddingTopInPixels + this._paddingBottomInPixels;
+        this._doNotTrackManualChanges = true;
+        // Let stack panel width or height default to stackHeight and stackWidth if dimensions are not specified.
+        // User can now define their own height and width for stack panel.
+        let panelWidthChanged = false;
+        let panelHeightChanged = false;
+        if ((!this._manualHeight || this.adaptHeightToChildren) && this._isVertical) {
+            // do not specify height if strictly defined by user
+            const previousHeight = this.height;
+            this.height = stackHeight + "px";
+            panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;
+        }
+        if ((!this._manualWidth || this.adaptWidthToChildren) && !this._isVertical) {
+            // do not specify width if strictly defined by user
+            const previousWidth = this.width;
+            this.width = stackWidth + "px";
+            panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;
+        }
+        if (panelHeightChanged) {
+            this._height.ignoreAdaptiveScaling = true;
+        }
+        if (panelWidthChanged) {
+            this._width.ignoreAdaptiveScaling = true;
+        }
+        this._doNotTrackManualChanges = false;
+        if (panelWidthChanged || panelHeightChanged) {
+            this._rebuildLayout = true;
+        }
+        super._postMeasure();
+    }
+    _getManualDim(dim) {
+        if (dim === "width") {
+            return this._manualWidth;
+        }
+        else {
+            return this._manualHeight;
+        }
+    }
+    isDimensionFullyDefined(dim) {
+        if (dim === "height" ? this.isVertical : !this.isVertical && !this._getManualDim(dim)) {
+            for (const child of this._children) {
+                if (!child.isDimensionFullyDefined(dim)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        return this.getDimension(dim).isPixel || this._getAdaptDimTo(dim);
+    }
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     * @param force force serialization even if isSerializable === false
+     * @param allowCanvas defines if the control is allowed to use a Canvas2D object to serialize
+     */
+    serialize(serializationObject, force, allowCanvas) {
+        super.serialize(serializationObject, force, allowCanvas);
+        if (!this.isSerializable && !force) {
+            return;
+        }
+        serializationObject.manualWidth = this._manualWidth;
+        serializationObject.manualHeight = this._manualHeight;
+    }
+    /**
+     * @internal
+     */
+    _parseFromContent(serializedObject, host) {
+        this._manualWidth = serializedObject.manualWidth;
+        this._manualHeight = serializedObject.manualHeight;
+        super._parseFromContent(serializedObject, host);
+    }
+}
+__decorate([
+    serialize()
+], StackPanel.prototype, "ignoreLayoutWarnings", void 0);
+__decorate([
+    serialize()
+], StackPanel.prototype, "isVertical", null);
+__decorate([
+    serialize()
+], StackPanel.prototype, "spacing", null);
+__decorate([
+    serialize()
+], StackPanel.prototype, "width", null);
+__decorate([
+    serialize()
+], StackPanel.prototype, "height", null);
+RegisterClass("BABYLON.GUI.StackPanel", StackPanel);
+//# sourceMappingURL=stackPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stackPanel.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/stackPanel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport type { Measure } from \"../measure\";\r\nimport { Control } from \"./control\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { AdvancedDynamicTexture } from \"../advancedDynamicTexture\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/**\r\n * Class used to create a 2D stack panel container\r\n */\r\nexport class StackPanel extends Container {\r\n    private _isVertical = true;\r\n    private _manualWidth = false;\r\n    private _manualHeight = false;\r\n    private _doNotTrackManualChanges = false;\r\n    private _spacing = 0;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating that layout warnings should be ignored\r\n     */\r\n    @serialize()\r\n    public ignoreLayoutWarnings = false;\r\n\r\n    /** Gets or sets a boolean indicating if the stack panel is vertical or horizontal*/\r\n    @serialize()\r\n    public get isVertical(): boolean {\r\n        return this._isVertical;\r\n    }\r\n\r\n    public set isVertical(value: boolean) {\r\n        if (this._isVertical === value) {\r\n            return;\r\n        }\r\n\r\n        this._isVertical = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the spacing (in pixels) between each child.\r\n     */\r\n    @serialize()\r\n    public get spacing(): number {\r\n        return this._spacing;\r\n    }\r\n\r\n    public set spacing(value: number) {\r\n        if (this._spacing === value) {\r\n            return;\r\n        }\r\n\r\n        this._spacing = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets panel width.\r\n     * This value should not be set when in horizontal mode as it will be computed automatically\r\n     */\r\n    @serialize()\r\n    public override set width(value: string | number) {\r\n        if (!this._doNotTrackManualChanges) {\r\n            this._manualWidth = true;\r\n        }\r\n\r\n        if (this._width.toString(this._host) === value) {\r\n            return;\r\n        }\r\n\r\n        if (this._width.fromString(value)) {\r\n            this._markAsDirty();\r\n        }\r\n    }\r\n\r\n    public override get width(): string | number {\r\n        return this._width.toString(this._host);\r\n    }\r\n\r\n    /**\r\n     * Gets or sets panel height.\r\n     * This value should not be set when in vertical mode as it will be computed automatically\r\n     */\r\n    @serialize()\r\n    public override set height(value: string | number) {\r\n        if (!this._doNotTrackManualChanges) {\r\n            this._manualHeight = true;\r\n        }\r\n\r\n        if (this._height.toString(this._host) === value) {\r\n            return;\r\n        }\r\n\r\n        if (this._height.fromString(value)) {\r\n            this._markAsDirty();\r\n        }\r\n    }\r\n\r\n    public override get height(): string | number {\r\n        return this._height.toString(this._host);\r\n    }\r\n\r\n    /**\r\n     * Creates a new StackPanel\r\n     * @param name defines control name\r\n     */\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"StackPanel\";\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    protected override _preMeasure(parentMeasure: Measure, context: ICanvasRenderingContext): void {\r\n        for (const child of this._children) {\r\n            if (this._isVertical) {\r\n                child.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;\r\n            } else {\r\n                child.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n            }\r\n        }\r\n\r\n        super._preMeasure(parentMeasure, context);\r\n    }\r\n\r\n    protected override _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void {\r\n        super._additionalProcessing(parentMeasure, context);\r\n\r\n        this._measureForChildren.copyFrom(parentMeasure);\r\n\r\n        this._measureForChildren.left = this._currentMeasure.left;\r\n        this._measureForChildren.top = this._currentMeasure.top;\r\n\r\n        if (!this.isVertical || this._manualWidth) {\r\n            this._measureForChildren.width = this._currentMeasure.width;\r\n        }\r\n\r\n        if (this.isVertical || this._manualHeight) {\r\n            this._measureForChildren.height = this._currentMeasure.height;\r\n        }\r\n    }\r\n\r\n    protected override _postMeasure(): void {\r\n        let stackWidth = 0;\r\n        let stackHeight = 0;\r\n        const childrenCount = this._children.length;\r\n        for (let index = 0; index < childrenCount; index++) {\r\n            const child = this._children[index];\r\n            if (!child.isVisible || child.notRenderable) {\r\n                continue;\r\n            }\r\n\r\n            if (this._isVertical) {\r\n                const top = stackHeight + \"px\";\r\n                if (child.top !== top) {\r\n                    child.top = top;\r\n                    this._rebuildLayout = true;\r\n                    child._top.ignoreAdaptiveScaling = true;\r\n                }\r\n\r\n                if (!this.ignoreLayoutWarnings && !child.isDimensionFullyDefined(\"height\")) {\r\n                    Logger.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using height in percentage mode inside a vertical StackPanel`, 1);\r\n                } else {\r\n                    stackHeight += child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels + (index < childrenCount - 1 ? this._spacing : 0);\r\n                }\r\n            } else {\r\n                const left = stackWidth + \"px\";\r\n                if (child.left !== left) {\r\n                    child.left = left;\r\n                    this._rebuildLayout = true;\r\n                    child._left.ignoreAdaptiveScaling = true;\r\n                }\r\n\r\n                if (!this.ignoreLayoutWarnings && !child.isDimensionFullyDefined(\"width\")) {\r\n                    Logger.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using width in percentage mode inside a horizontal StackPanel`, 1);\r\n                } else {\r\n                    stackWidth += child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels + (index < childrenCount - 1 ? this._spacing : 0);\r\n                }\r\n            }\r\n        }\r\n\r\n        stackWidth += this._paddingLeftInPixels + this._paddingRightInPixels;\r\n        stackHeight += this._paddingTopInPixels + this._paddingBottomInPixels;\r\n\r\n        this._doNotTrackManualChanges = true;\r\n\r\n        // Let stack panel width or height default to stackHeight and stackWidth if dimensions are not specified.\r\n        // User can now define their own height and width for stack panel.\r\n\r\n        let panelWidthChanged = false;\r\n        let panelHeightChanged = false;\r\n\r\n        if ((!this._manualHeight || this.adaptHeightToChildren) && this._isVertical) {\r\n            // do not specify height if strictly defined by user\r\n            const previousHeight = this.height;\r\n            this.height = stackHeight + \"px\";\r\n            panelHeightChanged = previousHeight !== this.height || !this._height.ignoreAdaptiveScaling;\r\n        }\r\n        if ((!this._manualWidth || this.adaptWidthToChildren) && !this._isVertical) {\r\n            // do not specify width if strictly defined by user\r\n            const previousWidth = this.width;\r\n            this.width = stackWidth + \"px\";\r\n            panelWidthChanged = previousWidth !== this.width || !this._width.ignoreAdaptiveScaling;\r\n        }\r\n\r\n        if (panelHeightChanged) {\r\n            this._height.ignoreAdaptiveScaling = true;\r\n        }\r\n\r\n        if (panelWidthChanged) {\r\n            this._width.ignoreAdaptiveScaling = true;\r\n        }\r\n\r\n        this._doNotTrackManualChanges = false;\r\n\r\n        if (panelWidthChanged || panelHeightChanged) {\r\n            this._rebuildLayout = true;\r\n        }\r\n\r\n        super._postMeasure();\r\n    }\r\n\r\n    private _getManualDim(dim: \"width\" | \"height\") {\r\n        if (dim === \"width\") {\r\n            return this._manualWidth;\r\n        } else {\r\n            return this._manualHeight;\r\n        }\r\n    }\r\n\r\n    public override isDimensionFullyDefined(dim: \"width\" | \"height\"): boolean {\r\n        if (dim === \"height\" ? this.isVertical : !this.isVertical && !this._getManualDim(dim)) {\r\n            for (const child of this._children) {\r\n                if (!child.isDimensionFullyDefined(dim)) {\r\n                    return false;\r\n                }\r\n            }\r\n            return true;\r\n        }\r\n\r\n        return this.getDimension(dim).isPixel || this._getAdaptDimTo(dim);\r\n    }\r\n\r\n    /**\r\n     * Serializes the current control\r\n     * @param serializationObject defined the JSON serialized object\r\n     * @param force force serialization even if isSerializable === false\r\n     * @param allowCanvas defines if the control is allowed to use a Canvas2D object to serialize\r\n     */\r\n    public override serialize(serializationObject: any, force: boolean, allowCanvas: boolean) {\r\n        super.serialize(serializationObject, force, allowCanvas);\r\n        if (!this.isSerializable && !force) {\r\n            return;\r\n        }\r\n        serializationObject.manualWidth = this._manualWidth;\r\n        serializationObject.manualHeight = this._manualHeight;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {\r\n        this._manualWidth = serializedObject.manualWidth;\r\n        this._manualHeight = serializedObject.manualHeight;\r\n\r\n        super._parseFromContent(serializedObject, host);\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.StackPanel\", StackPanel);\r\n"]}