@babylonjs/gui 5.43.1 → 5.44.0

package/2D/controls/rectangle.js

@@ -58,6 +58,9 @@ export class Rectangle extends Container {
         }
         return 0;
     }
+    _getRectangleFill(context) {
+        return this._getBackgroundColor(context);
+    }
     _localDraw(context) {
         context.save();
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -66,8 +69,8 @@ export class Rectangle extends Container {
             context.shadowOffsetX = this.shadowOffsetX;
             context.shadowOffsetY = this.shadowOffsetY;
         }
-        if (this._background) {
-            context.fillStyle = this.typeName === "Button" ? (this.isEnabled ? this._background : this.disabledColor) : this._background;
+        if (this._background || this._backgroundGradient) {
+            context.fillStyle = this._getRectangleFill(context);
             if (this._cornerRadius) {
                 this._drawRoundedRect(context, this._thickness / 2);
                 context.fill();
@@ -82,8 +85,8 @@ export class Rectangle extends Container {
                 context.shadowOffsetX = 0;
                 context.shadowOffsetY = 0;
             }
-            if (this.color) {
-                context.strokeStyle = this.color;
+            if (this.color || this.gradient) {
+                context.strokeStyle = this.gradient ? this.gradient.getCanvasGradient(context) : this.color;
             }
             context.lineWidth = this._thickness;
             if (this._cornerRadius) {

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

@@ -1 +1 @@
-{"version":3,"file":"rectangle.js","sourceRoot":"","sources":["../../../../../lts/gui/generated/2D/controls/rectangle.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport type { Measure } from \"../measure\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/** Class used to create rectangle container */\r\nexport class Rectangle extends Container {\r\n    private _thickness = 1;\r\n    private _cornerRadius = 0;\r\n\r\n    /** Gets or sets border thickness */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the corner radius angle */\r\n    @serialize()\r\n    public get cornerRadius(): number {\r\n        return this._cornerRadius;\r\n    }\r\n\r\n    public set cornerRadius(value: number) {\r\n        if (value < 0) {\r\n            value = 0;\r\n        }\r\n\r\n        if (this._cornerRadius === value) {\r\n            return;\r\n        }\r\n\r\n        this._cornerRadius = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new Rectangle\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Rectangle\";\r\n    }\r\n\r\n    /** @internal */\r\n    protected _computeAdditionnalOffsetX() {\r\n        if (this._cornerRadius) {\r\n            // Take in account the aliasing\r\n            return 1;\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    /** @internal */\r\n    protected _computeAdditionnalOffsetY() {\r\n        if (this._cornerRadius) {\r\n            // Take in account the aliasing\r\n            return 1;\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    protected _localDraw(context: ICanvasRenderingContext): void {\r\n        context.save();\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        if (this._background) {\r\n            context.fillStyle = this.typeName === \"Button\" ? (this.isEnabled ? this._background : this.disabledColor) : this._background;\r\n\r\n            if (this._cornerRadius) {\r\n                this._drawRoundedRect(context, this._thickness / 2);\r\n                context.fill();\r\n            } else {\r\n                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n            }\r\n        }\r\n\r\n        if (this._thickness) {\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            if (this.color) {\r\n                context.strokeStyle = this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            if (this._cornerRadius) {\r\n                this._drawRoundedRect(context, this._thickness / 2);\r\n                context.stroke();\r\n            } else {\r\n                context.strokeRect(\r\n                    this._currentMeasure.left + this._thickness / 2,\r\n                    this._currentMeasure.top + this._thickness / 2,\r\n                    this._currentMeasure.width - this._thickness,\r\n                    this._currentMeasure.height - this._thickness\r\n                );\r\n            }\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void {\r\n        super._additionalProcessing(parentMeasure, context);\r\n\r\n        this._measureForChildren.width -= 2 * this._thickness;\r\n        this._measureForChildren.height -= 2 * this._thickness;\r\n        this._measureForChildren.left += this._thickness;\r\n        this._measureForChildren.top += this._thickness;\r\n    }\r\n\r\n    private _drawRoundedRect(context: ICanvasRenderingContext, offset: number = 0): void {\r\n        const x = this._currentMeasure.left + offset;\r\n        const y = this._currentMeasure.top + offset;\r\n        const width = this._currentMeasure.width - offset * 2;\r\n        const height = this._currentMeasure.height - offset * 2;\r\n\r\n        let radius = Math.min(height / 2, Math.min(width / 2, this._cornerRadius));\r\n        radius = Math.abs(radius);\r\n\r\n        context.beginPath();\r\n        context.moveTo(x + radius, y);\r\n        context.lineTo(x + width - radius, y);\r\n        context.arc(x + width - radius, y + radius, radius, (3 * Math.PI) / 2, Math.PI * 2);\r\n        context.lineTo(x + width, y + height - radius);\r\n        context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);\r\n        context.lineTo(x + radius, y + height);\r\n        context.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);\r\n        context.lineTo(x, y + radius);\r\n        context.arc(x + radius, y + radius, radius, Math.PI, (3 * Math.PI) / 2);\r\n        context.closePath();\r\n    }\r\n\r\n    protected _clipForChildren(context: ICanvasRenderingContext) {\r\n        if (this._cornerRadius) {\r\n            this._drawRoundedRect(context, this._thickness);\r\n            context.clip();\r\n        }\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Rectangle\", Rectangle);\r\n"]}
+{"version":3,"file":"rectangle.js","sourceRoot":"","sources":["../../../../../lts/gui/generated/2D/controls/rectangle.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport type { Measure } from \"../measure\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasGradient, ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/** Class used to create rectangle container */\r\nexport class Rectangle extends Container {\r\n    private _thickness = 1;\r\n    private _cornerRadius = 0;\r\n\r\n    /** Gets or sets border thickness */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the corner radius angle */\r\n    @serialize()\r\n    public get cornerRadius(): number {\r\n        return this._cornerRadius;\r\n    }\r\n\r\n    public set cornerRadius(value: number) {\r\n        if (value < 0) {\r\n            value = 0;\r\n        }\r\n\r\n        if (this._cornerRadius === value) {\r\n            return;\r\n        }\r\n\r\n        this._cornerRadius = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new Rectangle\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Rectangle\";\r\n    }\r\n\r\n    /** @internal */\r\n    protected _computeAdditionnalOffsetX() {\r\n        if (this._cornerRadius) {\r\n            // Take in account the aliasing\r\n            return 1;\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    /** @internal */\r\n    protected _computeAdditionnalOffsetY() {\r\n        if (this._cornerRadius) {\r\n            // Take in account the aliasing\r\n            return 1;\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    protected _getRectangleFill(context: ICanvasRenderingContext): string | ICanvasGradient {\r\n        return this._getBackgroundColor(context);\r\n    }\r\n\r\n    protected _localDraw(context: ICanvasRenderingContext): void {\r\n        context.save();\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        if (this._background || this._backgroundGradient) {\r\n            context.fillStyle = this._getRectangleFill(context);\r\n\r\n            if (this._cornerRadius) {\r\n                this._drawRoundedRect(context, this._thickness / 2);\r\n                context.fill();\r\n            } else {\r\n                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n            }\r\n        }\r\n\r\n        if (this._thickness) {\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            if (this.color || this.gradient) {\r\n                context.strokeStyle = this.gradient ? this.gradient.getCanvasGradient(context) : this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            if (this._cornerRadius) {\r\n                this._drawRoundedRect(context, this._thickness / 2);\r\n                context.stroke();\r\n            } else {\r\n                context.strokeRect(\r\n                    this._currentMeasure.left + this._thickness / 2,\r\n                    this._currentMeasure.top + this._thickness / 2,\r\n                    this._currentMeasure.width - this._thickness,\r\n                    this._currentMeasure.height - this._thickness\r\n                );\r\n            }\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void {\r\n        super._additionalProcessing(parentMeasure, context);\r\n\r\n        this._measureForChildren.width -= 2 * this._thickness;\r\n        this._measureForChildren.height -= 2 * this._thickness;\r\n        this._measureForChildren.left += this._thickness;\r\n        this._measureForChildren.top += this._thickness;\r\n    }\r\n\r\n    private _drawRoundedRect(context: ICanvasRenderingContext, offset: number = 0): void {\r\n        const x = this._currentMeasure.left + offset;\r\n        const y = this._currentMeasure.top + offset;\r\n        const width = this._currentMeasure.width - offset * 2;\r\n        const height = this._currentMeasure.height - offset * 2;\r\n\r\n        let radius = Math.min(height / 2, Math.min(width / 2, this._cornerRadius));\r\n        radius = Math.abs(radius);\r\n\r\n        context.beginPath();\r\n        context.moveTo(x + radius, y);\r\n        context.lineTo(x + width - radius, y);\r\n        context.arc(x + width - radius, y + radius, radius, (3 * Math.PI) / 2, Math.PI * 2);\r\n        context.lineTo(x + width, y + height - radius);\r\n        context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);\r\n        context.lineTo(x + radius, y + height);\r\n        context.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);\r\n        context.lineTo(x, y + radius);\r\n        context.arc(x + radius, y + radius, radius, Math.PI, (3 * Math.PI) / 2);\r\n        context.closePath();\r\n    }\r\n\r\n    protected _clipForChildren(context: ICanvasRenderingContext) {\r\n        if (this._cornerRadius) {\r\n            this._drawRoundedRect(context, this._thickness);\r\n            context.clip();\r\n        }\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Rectangle\", Rectangle);\r\n"]}

package/2D/controls/sliders/scrollBar.d.ts

@@ -3,6 +3,9 @@ import { BaseSlider } from "./baseSlider";
 import type { Control } from "../control";
 import type { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
 import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { BaseGradient } from "../gradient/BaseGradient";
+import type { AdvancedDynamicTexture } from "../../advancedDynamicTexture.js";
 /**
  * Class used to create slider controls
  */
@@ -12,12 +15,16 @@ export declare class ScrollBar extends BaseSlider {
     private _borderColor;
     private _tempMeasure;
     private _invertScrollDirection;
+    private _backgroundGradient;
     /** Gets or sets border color */
     get borderColor(): string;
     set borderColor(value: string);
     /** Gets or sets background color */
     get background(): string;
     set background(value: string);
+    /** Gets or sets background gradient. Takes precedence over gradient. */
+    get backgroundGradient(): Nullable<BaseGradient>;
+    set backgroundGradient(value: Nullable<BaseGradient>);
     /** Inverts the scrolling direction (default: false) */
     get invertScrollDirection(): boolean;
     set invertScrollDirection(invert: boolean);
@@ -28,6 +35,7 @@ export declare class ScrollBar extends BaseSlider {
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
     protected _getThumbThickness(): number;
+    private _getBackgroundColor;
     _draw(context: ICanvasRenderingContext): void;
     private _first;
     private _originX;
@@ -37,4 +45,6 @@ export declare class ScrollBar extends BaseSlider {
      */
     protected _updateValueFromPointer(x: number, y: number): void;
     _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+    serialize(serializationObject: any): void;
+    _parseFromContent(serializationObject: any, host: AdvancedDynamicTexture): void;
 }

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

@@ -2,6 +2,8 @@ import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { BaseSlider } from "./baseSlider.js";
 import { Measure } from "../../measure.js";
 import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
 /**
  * Class used to create slider controls
  */
@@ -17,6 +19,7 @@ export class ScrollBar extends BaseSlider {
         this._borderColor = "white";
         this._tempMeasure = new Measure(0, 0, 0, 0);
         this._invertScrollDirection = false;
+        this._backgroundGradient = null;
     }
     /** Gets or sets border color */
     get borderColor() {
@@ -40,6 +43,17 @@ export class ScrollBar extends BaseSlider {
         this._background = value;
         this._markAsDirty();
     }
+    /** Gets or sets background gradient. Takes precedence over gradient. */
+    get backgroundGradient() {
+        return this._backgroundGradient;
+    }
+    set backgroundGradient(value) {
+        if (this._backgroundGradient === value) {
+            return;
+        }
+        this._backgroundGradient = value;
+        this._markAsDirty();
+    }
     /** Inverts the scrolling direction (default: false) */
     get invertScrollDirection() {
         return this._invertScrollDirection;
@@ -60,16 +74,19 @@ export class ScrollBar extends BaseSlider {
         }
         return thumbThickness;
     }
+    _getBackgroundColor(context) {
+        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;
+    }
     _draw(context) {
         context.save();
         this._applyStates(context);
         this._prepareRenderingData("rectangle");
         const left = this._renderLeft;
         const thumbPosition = this._getThumbPosition();
-        context.fillStyle = this._background;
+        context.fillStyle = this._getBackgroundColor(context);
         context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
         // Value bar
-        context.fillStyle = this.color;
+        context.fillStyle = this._getColor(context);
         // Thumb
         if (this.isVertical) {
             this._tempMeasure.left = left - this._effectiveBarOffset;
@@ -129,6 +146,21 @@ export class ScrollBar extends BaseSlider {
         this._first = true;
         return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
     }
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
+        if (this.backgroundGradient) {
+            serializationObject.backgroundGradient = {};
+            this.backgroundGradient.serialize(serializationObject.backgroundGradient);
+        }
+    }
+    _parseFromContent(serializationObject, host) {
+        super._parseFromContent(serializationObject, host);
+        if (serializationObject.backgroundGradient) {
+            const className = Tools.Instantiate("BABYLON.GUI." + serializationObject.backgroundGradient.className);
+            this.backgroundGradient = new className();
+            this.backgroundGradient.parse(serializationObject.backgroundGradient);
+        }
+    }
 }
 __decorate([
     serialize()
@@ -139,4 +171,5 @@ __decorate([
 __decorate([
     serialize()
 ], ScrollBar.prototype, "invertScrollDirection", null);
+RegisterClass("BABYLON.GUI.Scrollbar", ScrollBar);
 //# sourceMappingURL=scrollBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"scrollBar.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/sliders/scrollBar.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { BaseSlider } from \"./baseSlider\";\r\nimport type { Control } from \"../control\";\r\nimport { Measure } from \"../../measure\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to create slider controls\r\n */\r\nexport class ScrollBar extends BaseSlider {\r\n    private _background = \"black\";\r\n    private _borderColor = \"white\";\r\n    private _tempMeasure = new Measure(0, 0, 0, 0);\r\n    private _invertScrollDirection = false;\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    /** Inverts the scrolling direction (default: false) */\r\n    @serialize()\r\n    public get invertScrollDirection() {\r\n        return this._invertScrollDirection;\r\n    }\r\n\r\n    public set invertScrollDirection(invert: boolean) {\r\n        this._invertScrollDirection = invert;\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 name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Scrollbar\";\r\n    }\r\n\r\n    protected _getThumbThickness(): number {\r\n        let thumbThickness = 0;\r\n        if (this._thumbWidth.isPixel) {\r\n            thumbThickness = this._thumbWidth.getValue(this._host);\r\n        } else {\r\n            thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);\r\n        }\r\n        return thumbThickness;\r\n    }\r\n\r\n    public _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        this._prepareRenderingData(\"rectangle\");\r\n        const left = this._renderLeft;\r\n\r\n        const thumbPosition = this._getThumbPosition();\r\n        context.fillStyle = this._background;\r\n\r\n        context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n\r\n        // Value bar\r\n        context.fillStyle = this.color;\r\n\r\n        // Thumb\r\n        if (this.isVertical) {\r\n            this._tempMeasure.left = left - this._effectiveBarOffset;\r\n            this._tempMeasure.top = this._currentMeasure.top + thumbPosition;\r\n            this._tempMeasure.width = this._currentMeasure.width;\r\n            this._tempMeasure.height = this._effectiveThumbThickness;\r\n        } else {\r\n            this._tempMeasure.left = this._currentMeasure.left + thumbPosition;\r\n            this._tempMeasure.top = this._currentMeasure.top;\r\n            this._tempMeasure.width = this._effectiveThumbThickness;\r\n            this._tempMeasure.height = this._currentMeasure.height;\r\n        }\r\n\r\n        context.fillRect(this._tempMeasure.left, this._tempMeasure.top, this._tempMeasure.width, this._tempMeasure.height);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    private _first: boolean;\r\n    private _originX: number;\r\n    private _originY: number;\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    protected _updateValueFromPointer(x: number, y: number): void {\r\n        if (this.rotation != 0) {\r\n            this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);\r\n            x = this._transformedPosition.x;\r\n            y = this._transformedPosition.y;\r\n        }\r\n\r\n        const sign = this._invertScrollDirection ? -1 : 1;\r\n\r\n        if (this._first) {\r\n            this._first = false;\r\n            this._originX = x;\r\n            this._originY = y;\r\n\r\n            // Check if move is required\r\n            if (\r\n                x < this._tempMeasure.left ||\r\n                x > this._tempMeasure.left + this._tempMeasure.width ||\r\n                y < this._tempMeasure.top ||\r\n                y > this._tempMeasure.top + this._tempMeasure.height\r\n            ) {\r\n                if (this.isVertical) {\r\n                    this.value = this.minimum + (1 - (y - this._currentMeasure.top) / this._currentMeasure.height) * (this.maximum - this.minimum);\r\n                } else {\r\n                    this.value = this.minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this.maximum - this.minimum);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Delta mode\r\n        let delta = 0;\r\n        if (this.isVertical) {\r\n            delta = -((y - this._originY) / (this._currentMeasure.height - this._effectiveThumbThickness));\r\n        } else {\r\n            delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);\r\n        }\r\n\r\n        this.value += sign * delta * (this.maximum - this.minimum);\r\n\r\n        this._originX = x;\r\n        this._originY = y;\r\n    }\r\n\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        this._first = true;\r\n\r\n        return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"scrollBar.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/sliders/scrollBar.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\nimport { BaseSlider } from \"./baseSlider\";\r\nimport type { Control } from \"../control\";\r\nimport { Measure } from \"../../measure\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\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\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\n\r\n/**\r\n * Class used to create slider controls\r\n */\r\nexport class ScrollBar extends BaseSlider {\r\n    private _background = \"black\";\r\n    private _borderColor = \"white\";\r\n    private _tempMeasure = new Measure(0, 0, 0, 0);\r\n    private _invertScrollDirection = false;\r\n    private _backgroundGradient: Nullable<BaseGradient> = null;\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. Takes precedence over 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    /** Inverts the scrolling direction (default: false) */\r\n    @serialize()\r\n    public get invertScrollDirection() {\r\n        return this._invertScrollDirection;\r\n    }\r\n\r\n    public set invertScrollDirection(invert: boolean) {\r\n        this._invertScrollDirection = invert;\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 name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Scrollbar\";\r\n    }\r\n\r\n    protected _getThumbThickness(): number {\r\n        let thumbThickness = 0;\r\n        if (this._thumbWidth.isPixel) {\r\n            thumbThickness = this._thumbWidth.getValue(this._host);\r\n        } else {\r\n            thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);\r\n        }\r\n        return thumbThickness;\r\n    }\r\n\r\n    private _getBackgroundColor(context: ICanvasRenderingContext) {\r\n        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;\r\n    }\r\n\r\n    public _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        this._prepareRenderingData(\"rectangle\");\r\n        const left = this._renderLeft;\r\n\r\n        const thumbPosition = this._getThumbPosition();\r\n        context.fillStyle = this._getBackgroundColor(context);\r\n\r\n        context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n\r\n        // Value bar\r\n        context.fillStyle = this._getColor(context);\r\n\r\n        // Thumb\r\n        if (this.isVertical) {\r\n            this._tempMeasure.left = left - this._effectiveBarOffset;\r\n            this._tempMeasure.top = this._currentMeasure.top + thumbPosition;\r\n            this._tempMeasure.width = this._currentMeasure.width;\r\n            this._tempMeasure.height = this._effectiveThumbThickness;\r\n        } else {\r\n            this._tempMeasure.left = this._currentMeasure.left + thumbPosition;\r\n            this._tempMeasure.top = this._currentMeasure.top;\r\n            this._tempMeasure.width = this._effectiveThumbThickness;\r\n            this._tempMeasure.height = this._currentMeasure.height;\r\n        }\r\n\r\n        context.fillRect(this._tempMeasure.left, this._tempMeasure.top, this._tempMeasure.width, this._tempMeasure.height);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    private _first: boolean;\r\n    private _originX: number;\r\n    private _originY: number;\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    protected _updateValueFromPointer(x: number, y: number): void {\r\n        if (this.rotation != 0) {\r\n            this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);\r\n            x = this._transformedPosition.x;\r\n            y = this._transformedPosition.y;\r\n        }\r\n\r\n        const sign = this._invertScrollDirection ? -1 : 1;\r\n\r\n        if (this._first) {\r\n            this._first = false;\r\n            this._originX = x;\r\n            this._originY = y;\r\n\r\n            // Check if move is required\r\n            if (\r\n                x < this._tempMeasure.left ||\r\n                x > this._tempMeasure.left + this._tempMeasure.width ||\r\n                y < this._tempMeasure.top ||\r\n                y > this._tempMeasure.top + this._tempMeasure.height\r\n            ) {\r\n                if (this.isVertical) {\r\n                    this.value = this.minimum + (1 - (y - this._currentMeasure.top) / this._currentMeasure.height) * (this.maximum - this.minimum);\r\n                } else {\r\n                    this.value = this.minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this.maximum - this.minimum);\r\n                }\r\n            }\r\n        }\r\n\r\n        // Delta mode\r\n        let delta = 0;\r\n        if (this.isVertical) {\r\n            delta = -((y - this._originY) / (this._currentMeasure.height - this._effectiveThumbThickness));\r\n        } else {\r\n            delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);\r\n        }\r\n\r\n        this.value += sign * delta * (this.maximum - this.minimum);\r\n\r\n        this._originX = x;\r\n        this._originY = y;\r\n    }\r\n\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        this._first = true;\r\n\r\n        return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);\r\n    }\r\n\r\n    public 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    public _parseFromContent(serializationObject: any, host: AdvancedDynamicTexture) {\r\n        super._parseFromContent(serializationObject, host);\r\n\r\n        if (serializationObject.backgroundGradient) {\r\n            const className = Tools.Instantiate(\"BABYLON.GUI.\" + serializationObject.backgroundGradient.className);\r\n            this.backgroundGradient = new className();\r\n            this.backgroundGradient!.parse(serializationObject.backgroundGradient);\r\n        }\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Scrollbar\", ScrollBar);\r\n"]}

package/2D/controls/sliders/slider.d.ts

@@ -1,5 +1,8 @@
 import { BaseSlider } from "./baseSlider";
 import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { BaseGradient } from "../gradient/BaseGradient";
+import type { AdvancedDynamicTexture } from "../../advancedDynamicTexture.js";
 /**
  * Class used to create slider controls
  */
@@ -10,6 +13,7 @@ export declare class Slider extends BaseSlider {
     private _thumbColor;
     private _isThumbCircle;
     protected _displayValueBar: boolean;
+    private _backgroundGradient;
     /** Gets or sets a boolean indicating if the value bar must be rendered */
     get displayValueBar(): boolean;
     set displayValueBar(value: boolean);
@@ -19,6 +23,9 @@ export declare class Slider extends BaseSlider {
     /** Gets or sets background color */
     get background(): string;
     set background(value: string);
+    /** Gets or sets background gradient */
+    get backgroundGradient(): Nullable<BaseGradient>;
+    set backgroundGradient(value: Nullable<BaseGradient>);
     /** Gets or sets thumb's color */
     get thumbColor(): string;
     set thumbColor(value: string);
@@ -31,5 +38,9 @@ export declare class Slider extends BaseSlider {
      */
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
+    protected _getBackgroundColor(context: ICanvasRenderingContext): string | CanvasGradient;
     _draw(context: ICanvasRenderingContext): void;
+    serialize(serializationObject: any): void;
+    /** @internal */
+    _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void;
 }

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

@@ -2,6 +2,7 @@ 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
  */
@@ -18,6 +19,7 @@ export class Slider extends BaseSlider {
         this._thumbColor = "";
         this._isThumbCircle = false;
         this._displayValueBar = true;
+        this._backgroundGradient = null;
     }
     /** Gets or sets a boolean indicating if the value bar must be rendered */
     get displayValueBar() {
@@ -52,6 +54,17 @@ export class Slider extends BaseSlider {
         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;
@@ -77,6 +90,9 @@ export class Slider extends BaseSlider {
     _getTypeName() {
         return "Slider";
     }
+    _getBackgroundColor(context) {
+        return this._backgroundGradient ? this._backgroundGradient.getCanvasGradient(context) : this._background;
+    }
     _draw(context) {
         context.save();
         this._applyStates(context);
@@ -105,7 +121,7 @@ export class Slider extends BaseSlider {
             context.shadowOffsetY = this.shadowOffsetY;
         }
         const thumbPosition = this._getThumbPosition();
-        context.fillStyle = this._background;
+        context.fillStyle = this._getBackgroundColor(context);
         if (this.isVertical) {
             if (this.isThumbClamped) {
                 if (this.isThumbCircle) {
@@ -144,7 +160,7 @@ export class Slider extends BaseSlider {
             context.shadowOffsetY = 0;
         }
         // Value bar
-        context.fillStyle = this.color;
+        context.fillStyle = this._getColor(context);
         if (this._displayValueBar) {
             if (this.isVertical) {
                 if (this.isThumbClamped) {
@@ -180,7 +196,7 @@ export class Slider extends BaseSlider {
             }
         }
         // Thumb
-        context.fillStyle = this._thumbColor || this.color;
+        context.fillStyle = this._thumbColor || this._getColor(context);
         if (this.displayThumb) {
             if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                 context.shadowColor = this.shadowColor;
@@ -228,6 +244,22 @@ export class Slider extends BaseSlider {
         }
         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()

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

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/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\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\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 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 name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Slider\";\r\n    }\r\n\r\n    public _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\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._background;\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.color;\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.color;\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\nRegisterClass(\"BABYLON.GUI.Slider\", Slider);\r\n"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/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 name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _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 _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\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 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 _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/textBlock.d.ts

@@ -44,6 +44,7 @@ export declare class TextBlock extends Control {
     private _underline;
     private _lineThrough;
     private _wordDivider;
+    private _forceResizeWidth;
     /**
      * An event triggered after the text is changed
      */
@@ -148,6 +149,13 @@ export declare class TextBlock extends Control {
      * Gets or sets word divider
      */
     set wordDivider(value: string);
+    /**
+     * By default, if a text block has text wrapping other than Clip, its width
+     * is not resized even if resizeToFit = true. This parameter forces the width
+     * to be resized.
+     */
+    get forceResizeWidth(): boolean;
+    set forceResizeWidth(value: boolean);
     /**
      * Creates a new TextBlock object
      * @param name defines the name of the control

package/2D/controls/textBlock.js

@@ -54,6 +54,7 @@ export class TextBlock extends Control {
         this._underline = false;
         this._lineThrough = false;
         this._wordDivider = " ";
+        this._forceResizeWidth = false;
         /**
          * An event triggered after the text is changed
          */
@@ -250,6 +251,21 @@ export class TextBlock extends Control {
         this._wordDivider = value;
         this._markAsDirty();
     }
+    /**
+     * By default, if a text block has text wrapping other than Clip, its width
+     * is not resized even if resizeToFit = true. This parameter forces the width
+     * to be resized.
+     */
+    get forceResizeWidth() {
+        return this._forceResizeWidth;
+    }
+    set forceResizeWidth(value) {
+        if (this._forceResizeWidth === value) {
+            return;
+        }
+        this._forceResizeWidth = value;
+        this._markAsDirty();
+    }
     _getTypeName() {
         return "TextBlock";
     }
@@ -269,9 +285,9 @@ export class TextBlock extends Control {
             }
         }
         if (this._resizeToFit) {
-            if (this._textWrapping === TextWrapping.Clip) {
-                const newWidth = (this._paddingLeftInPixels + this._paddingRightInPixels + maxLineWidth) | 0;
-                if (newWidth !== this._width.internalValue) {
+            if (this._textWrapping === TextWrapping.Clip || this._forceResizeWidth) {
+                const newWidth = Math.ceil(this._paddingLeftInPixels + this._paddingRightInPixels + maxLineWidth);
+                if (newWidth !== this._width.getValueInPixel(this._host, this._tempParentMeasure.width)) {
                     this._width.updateInPlace(newWidth, ValueAndUnit.UNITMODE_PIXEL);
                     this._rebuildLayout = true;
                 }
@@ -564,5 +580,8 @@ __decorate([
 __decorate([
     serialize()
 ], TextBlock.prototype, "wordDivider", null);
+__decorate([
+    serialize()
+], TextBlock.prototype, "forceResizeWidth", null);
 RegisterClass("BABYLON.GUI.TextBlock", TextBlock);
 //# sourceMappingURL=textBlock.js.map