@babylonjs/gui 5.43.0 → 5.43.2

package/2D/controls/ellipse.js

@@ -37,8 +37,8 @@ export class Ellipse extends Container {
             context.shadowOffsetY = this.shadowOffsetY;
         }
         Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, context);
-        if (this._background) {
-            context.fillStyle = this._background;
+        if (this._backgroundGradient || this._background) {
+            context.fillStyle = this._getBackgroundColor(context);
             context.fill();
         }
         if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {

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

@@ -1 +1 @@
-{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../../../../lts/gui/generated/2D/controls/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport { Control } from \"./control\";\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 2D ellipse containers */\r\nexport class Ellipse extends Container {\r\n    private _thickness = 1;\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    /**\r\n     * Creates a new Ellipse\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 \"Ellipse\";\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        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._thickness / 2,\r\n            this._currentMeasure.height / 2 - this._thickness / 2,\r\n            context\r\n        );\r\n\r\n        if (this._background) {\r\n            context.fillStyle = this._background;\r\n\r\n            context.fill();\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        if (this._thickness) {\r\n            if (this.color) {\r\n                context.strokeStyle = this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            context.stroke();\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    protected _clipForChildren(context: ICanvasRenderingContext) {\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2,\r\n            this._currentMeasure.height / 2,\r\n            context\r\n        );\r\n\r\n        context.clip();\r\n    }\r\n\r\n    public _renderHighlightSpecific(context: ICanvasRenderingContext): void {\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._highlightLineWidth / 2,\r\n            this._currentMeasure.height / 2 - this._highlightLineWidth / 2,\r\n            context\r\n        );\r\n        context.stroke();\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Ellipse\", Ellipse);\r\n"]}
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../../../../lts/gui/generated/2D/controls/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport { Control } from \"./control\";\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 2D ellipse containers */\r\nexport class Ellipse extends Container {\r\n    private _thickness = 1;\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    /**\r\n     * Creates a new Ellipse\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 \"Ellipse\";\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        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._thickness / 2,\r\n            this._currentMeasure.height / 2 - this._thickness / 2,\r\n            context\r\n        );\r\n\r\n        if (this._backgroundGradient || this._background) {\r\n            context.fillStyle = this._getBackgroundColor(context);\r\n\r\n            context.fill();\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        if (this._thickness) {\r\n            if (this.color) {\r\n                context.strokeStyle = this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            context.stroke();\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    protected _clipForChildren(context: ICanvasRenderingContext) {\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2,\r\n            this._currentMeasure.height / 2,\r\n            context\r\n        );\r\n\r\n        context.clip();\r\n    }\r\n\r\n    public _renderHighlightSpecific(context: ICanvasRenderingContext): void {\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._highlightLineWidth / 2,\r\n            this._currentMeasure.height / 2 - this._highlightLineWidth / 2,\r\n            context\r\n        );\r\n        context.stroke();\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Ellipse\", Ellipse);\r\n"]}

package/2D/controls/gradient/BaseGradient.d.ts

@@ -0,0 +1,57 @@
+import type { ICanvasGradient, ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/**
+ * Type that represents a single stop on the gradient.
+ */
+export declare type GradientColorStop = {
+    /**
+     * Offset from the start where the color will be applied.
+     */
+    offset: number;
+    /**
+     * Color to be applied.
+     */
+    color: string;
+};
+/**
+ * Class that serves as a base for all the gradients created from context.
+ */
+export declare abstract class BaseGradient {
+    private _colorStops;
+    private _canvasGradient;
+    private _context;
+    private _gradientDirty;
+    /**
+     * Overwritten by child classes to create the canvas gradient.
+     * @param context
+     */
+    protected abstract _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient;
+    private _addColorStopsToCanvasGradient;
+    /**
+     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,
+     * reuse the existing gradient.
+     **/
+    getCanvasGradient(context: ICanvasRenderingContext): CanvasGradient;
+    /**
+     * Adds a new color stop to the gradient.
+     * @param offset the offset of the stop on the gradient. Should be between 0 and 1
+     * @param color the color of the stop
+     */
+    addColorStop(offset: number, color: string): void;
+    /**
+     * Removes an existing color stop with the specified offset from the gradient
+     * @param offset the offset of the stop to be removed
+     */
+    removeColorStop(offset: number): void;
+    /**
+     * Removes all color stops from the gradient
+     */
+    clearColorStops(): void;
+    /** Color stops of the gradient */
+    get colorStops(): GradientColorStop[];
+    /** Type of the gradient */
+    getClassName(): string;
+    /** Serialize into a json object */
+    serialize(serializationObject: any): void;
+    /** Parse from json object */
+    parse(serializationObject: any): void;
+}

package/2D/controls/gradient/BaseGradient.js

@@ -0,0 +1,72 @@
+/*
+ * Base Gradient class. Should not be used directly.
+ */
+/**
+ * Class that serves as a base for all the gradients created from context.
+ */
+export class BaseGradient {
+    constructor() {
+        this._colorStops = [];
+        this._gradientDirty = true;
+    }
+    _addColorStopsToCanvasGradient() {
+        for (const stop of this._colorStops) {
+            this._canvasGradient.addColorStop(stop.offset, stop.color);
+        }
+    }
+    /**
+     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,
+     * reuse the existing gradient.
+     **/
+    getCanvasGradient(context) {
+        if (this._gradientDirty || this._context !== context) {
+            this._context = context;
+            this._canvasGradient = this._createCanvasGradient(context);
+            this._addColorStopsToCanvasGradient();
+            this._gradientDirty = false;
+        }
+        return this._canvasGradient;
+    }
+    /**
+     * Adds a new color stop to the gradient.
+     * @param offset the offset of the stop on the gradient. Should be between 0 and 1
+     * @param color the color of the stop
+     */
+    addColorStop(offset, color) {
+        this._colorStops.push({ offset, color });
+        this._gradientDirty = true;
+    }
+    /**
+     * Removes an existing color stop with the specified offset from the gradient
+     * @param offset the offset of the stop to be removed
+     */
+    removeColorStop(offset) {
+        this._colorStops = this._colorStops.filter((colorStop) => colorStop.offset !== offset);
+        this._gradientDirty = true;
+    }
+    /**
+     * Removes all color stops from the gradient
+     */
+    clearColorStops() {
+        this._colorStops = [];
+        this._gradientDirty = true;
+    }
+    /** Color stops of the gradient */
+    get colorStops() {
+        return this._colorStops;
+    }
+    /** Type of the gradient */
+    getClassName() {
+        return "BaseGradient";
+    }
+    /** Serialize into a json object */
+    serialize(serializationObject) {
+        serializationObject.colorStops = this._colorStops;
+        serializationObject.className = this.getClassName();
+    }
+    /** Parse from json object */
+    parse(serializationObject) {
+        this._colorStops = serializationObject.colorStops;
+    }
+}
+//# sourceMappingURL=BaseGradient.js.map

package/2D/controls/gradient/BaseGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseGradient.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/gradient/BaseGradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AAkBH;;GAEG;AACH,MAAM,OAAgB,YAAY;IAAlC;QACY,gBAAW,GAAwB,EAAE,CAAC;QAItC,mBAAc,GAAY,IAAI,CAAC;IA2E3C,CAAC;IAnEW,8BAA8B;QAClC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE;YACjC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;SAC9D;IACL,CAAC;IAED;;;QAGI;IACG,iBAAiB,CAAC,OAAgC;QACrD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE;YAClD,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;YACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAC3D,IAAI,CAAC,8BAA8B,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;SAC/B;QACD,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACI,YAAY,CAAC,MAAc,EAAE,KAAa;QAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACI,eAAe,CAAC,MAAc;QACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC;QACvF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED;;OAEG;IACI,eAAe;QAClB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,kCAAkC;IAClC,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,2BAA2B;IACpB,YAAY;QACf,OAAO,cAAc,CAAC;IAC1B,CAAC;IAED,mCAAmC;IAC5B,SAAS,CAAC,mBAAwB;QACrC,mBAAmB,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QAClD,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IACxD,CAAC;IAED,6BAA6B;IACtB,KAAK,CAAC,mBAAwB;QACjC,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,UAAU,CAAC;IACtD,CAAC;CACJ","sourcesContent":["/*\r\n * Base Gradient class. Should not be used directly.\r\n */\r\n\r\nimport type { ICanvasGradient, ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Type that represents a single stop on the gradient.\r\n */\r\nexport type GradientColorStop = {\r\n    /**\r\n     * Offset from the start where the color will be applied.\r\n     */\r\n    offset: number;\r\n    /**\r\n     * Color to be applied.\r\n     */\r\n    color: string;\r\n};\r\n\r\n/**\r\n * Class that serves as a base for all the gradients created from context.\r\n */\r\nexport abstract class BaseGradient {\r\n    private _colorStops: GradientColorStop[] = [];\r\n\r\n    private _canvasGradient: CanvasGradient;\r\n    private _context: ICanvasRenderingContext;\r\n    private _gradientDirty: boolean = true;\r\n\r\n    /**\r\n     * Overwritten by child classes to create the canvas gradient.\r\n     * @param context\r\n     */\r\n    protected abstract _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient;\r\n\r\n    private _addColorStopsToCanvasGradient() {\r\n        for (const stop of this._colorStops) {\r\n            this._canvasGradient.addColorStop(stop.offset, stop.color);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,\r\n     * reuse the existing gradient.\r\n     **/\r\n    public getCanvasGradient(context: ICanvasRenderingContext) {\r\n        if (this._gradientDirty || this._context !== context) {\r\n            this._context = context;\r\n            this._canvasGradient = this._createCanvasGradient(context);\r\n            this._addColorStopsToCanvasGradient();\r\n            this._gradientDirty = false;\r\n        }\r\n        return this._canvasGradient;\r\n    }\r\n\r\n    /**\r\n     * Adds a new color stop to the gradient.\r\n     * @param offset the offset of the stop on the gradient. Should be between 0 and 1\r\n     * @param color the color of the stop\r\n     */\r\n    public addColorStop(offset: number, color: string) {\r\n        this._colorStops.push({ offset, color });\r\n        this._gradientDirty = true;\r\n    }\r\n\r\n    /**\r\n     * Removes an existing color stop with the specified offset from the gradient\r\n     * @param offset the offset of the stop to be removed\r\n     */\r\n    public removeColorStop(offset: number) {\r\n        this._colorStops = this._colorStops.filter((colorStop) => colorStop.offset !== offset);\r\n        this._gradientDirty = true;\r\n    }\r\n\r\n    /**\r\n     * Removes all color stops from the gradient\r\n     */\r\n    public clearColorStops() {\r\n        this._colorStops = [];\r\n        this._gradientDirty = true;\r\n    }\r\n\r\n    /** Color stops of the gradient */\r\n    public get colorStops() {\r\n        return this._colorStops;\r\n    }\r\n\r\n    /** Type of the gradient */\r\n    public getClassName() {\r\n        return \"BaseGradient\";\r\n    }\r\n\r\n    /** Serialize into a json object */\r\n    public serialize(serializationObject: any) {\r\n        serializationObject.colorStops = this._colorStops;\r\n        serializationObject.className = this.getClassName();\r\n    }\r\n\r\n    /** Parse from json object */\r\n    public parse(serializationObject: any) {\r\n        this._colorStops = serializationObject.colorStops;\r\n    }\r\n}\r\n"]}

package/2D/controls/gradient/LinearGradient.d.ts

@@ -0,0 +1,45 @@
+import type { ICanvasGradient, ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+import { BaseGradient } from "./BaseGradient";
+/**
+ * Gradient along a line that connects two coordinates.
+ * These coordinates are relative to the canvas' space, not to any control's space.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
+ */
+export declare class LinearGradient extends BaseGradient {
+    private _x0;
+    private _y0;
+    private _x1;
+    private _y1;
+    /**
+     * Creates a new linear gradient
+     * @param x0
+     * @param y0
+     * @param x1
+     * @param y1
+     */
+    constructor(x0?: number, y0?: number, x1?: number, y1?: number);
+    protected _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient;
+    /** X axis coordinate of the starting point in the line */
+    get x0(): number;
+    /** X axis coordinate of the ending point in the line */
+    get x1(): number;
+    /** Y axis coordinate of the starting point in the line */
+    get y0(): number;
+    /** Y axis coordinate of the ending point in the line */
+    get y1(): number;
+    /**
+     * Class name of the gradient
+     * @returns the class name of the gradient
+     */
+    getClassName(): string;
+    /**
+     * Serializes this gradient
+     * @param serializationObject the object to serialize to
+     */
+    serialize(serializationObject: any): void;
+    /**
+     * Parses a gradient from a serialization object
+     * @param serializationObject the object to parse from
+     */
+    parse(serializationObject: any): void;
+}

package/2D/controls/gradient/LinearGradient.js

@@ -0,0 +1,73 @@
+import { BaseGradient } from "./BaseGradient.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+/**
+ * Gradient along a line that connects two coordinates.
+ * These coordinates are relative to the canvas' space, not to any control's space.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient
+ */
+export class LinearGradient extends BaseGradient {
+    /**
+     * Creates a new linear gradient
+     * @param x0
+     * @param y0
+     * @param x1
+     * @param y1
+     */
+    constructor(x0, y0, x1, y1) {
+        super();
+        this._x0 = x0 !== null && x0 !== void 0 ? x0 : 0;
+        this._y0 = y0 !== null && y0 !== void 0 ? y0 : 0;
+        this._x1 = x1 !== null && x1 !== void 0 ? x1 : 0;
+        this._y1 = y1 !== null && y1 !== void 0 ? y1 : 0;
+    }
+    _createCanvasGradient(context) {
+        return context.createLinearGradient(this._x0, this._y0, this._x1, this._y1);
+    }
+    /** X axis coordinate of the starting point in the line */
+    get x0() {
+        return this._x0;
+    }
+    /** X axis coordinate of the ending point in the line */
+    get x1() {
+        return this._x1;
+    }
+    /** Y axis coordinate of the starting point in the line */
+    get y0() {
+        return this._y0;
+    }
+    /** Y axis coordinate of the ending point in the line */
+    get y1() {
+        return this._y1;
+    }
+    /**
+     * Class name of the gradient
+     * @returns the class name of the gradient
+     */
+    getClassName() {
+        return "LinearGradient";
+    }
+    /**
+     * Serializes this gradient
+     * @param serializationObject the object to serialize to
+     */
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
+        serializationObject.x0 = this._x0;
+        serializationObject.y0 = this._y0;
+        serializationObject.x1 = this._x1;
+        serializationObject.y1 = this._y1;
+    }
+    /**
+     * Parses a gradient from a serialization object
+     * @param serializationObject the object to parse from
+     */
+    parse(serializationObject) {
+        super.parse(serializationObject);
+        this._x0 = serializationObject.x0;
+        this._y0 = serializationObject.y0;
+        this._x1 = serializationObject.x1;
+        this._y1 = serializationObject.y1;
+    }
+}
+RegisterClass("BABYLON.GUI.LinearGradient", LinearGradient);
+//# sourceMappingURL=LinearGradient.js.map

package/2D/controls/gradient/LinearGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradient.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/gradient/LinearGradient.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,0CAA4B;AAEpD;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,YAAY;IAM5C;;;;;;OAMG;IACH,YAAY,EAAW,EAAE,EAAW,EAAE,EAAW,EAAE,EAAW;QAC1D,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,CAAC,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,CAAC,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,CAAC,CAAC;QACnB,IAAI,CAAC,GAAG,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,CAAC,CAAC;IACvB,CAAC;IAES,qBAAqB,CAAC,OAAgC;QAC5D,OAAO,OAAO,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAChF,CAAC;IAED,0DAA0D;IAC1D,IAAW,EAAE;QACT,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED,wDAAwD;IACxD,IAAW,EAAE;QACT,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED,0DAA0D;IAC1D,IAAW,EAAE;QACT,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED,wDAAwD;IACxD,IAAW,EAAE;QACT,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED;;;OAGG;IACI,YAAY;QACf,OAAO,gBAAgB,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACI,SAAS,CAAC,mBAAwB;QACrC,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;QACrC,mBAAmB,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,mBAAmB,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,mBAAmB,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;QAClC,mBAAmB,CAAC,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC;IACtC,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,mBAAwB;QACjC,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC;QACjC,IAAI,CAAC,GAAG,GAAG,mBAAmB,CAAC,EAAE,CAAC;QAClC,IAAI,CAAC,GAAG,GAAG,mBAAmB,CAAC,EAAE,CAAC;QAClC,IAAI,CAAC,GAAG,GAAG,mBAAmB,CAAC,EAAE,CAAC;QAClC,IAAI,CAAC,GAAG,GAAG,mBAAmB,CAAC,EAAE,CAAC;IACtC,CAAC;CACJ;AACD,aAAa,CAAC,4BAA4B,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import type { ICanvasGradient, ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\nimport { BaseGradient } from \"./BaseGradient\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\n\r\n/**\r\n * Gradient along a line that connects two coordinates.\r\n * These coordinates are relative to the canvas' space, not to any control's space.\r\n * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient\r\n */\r\nexport class LinearGradient extends BaseGradient {\r\n    private _x0: number;\r\n    private _y0: number;\r\n    private _x1: number;\r\n    private _y1: number;\r\n\r\n    /**\r\n     * Creates a new linear gradient\r\n     * @param x0\r\n     * @param y0\r\n     * @param x1\r\n     * @param y1\r\n     */\r\n    constructor(x0?: number, y0?: number, x1?: number, y1?: number) {\r\n        super();\r\n        this._x0 = x0 ?? 0;\r\n        this._y0 = y0 ?? 0;\r\n        this._x1 = x1 ?? 0;\r\n        this._y1 = y1 ?? 0;\r\n    }\r\n\r\n    protected _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient {\r\n        return context.createLinearGradient(this._x0, this._y0, this._x1, this._y1);\r\n    }\r\n\r\n    /** X axis coordinate of the starting point in the line */\r\n    public get x0() {\r\n        return this._x0;\r\n    }\r\n\r\n    /** X axis coordinate of the ending point in the line */\r\n    public get x1() {\r\n        return this._x1;\r\n    }\r\n\r\n    /** Y axis coordinate of the starting point in the line */\r\n    public get y0() {\r\n        return this._y0;\r\n    }\r\n\r\n    /** Y axis coordinate of the ending point in the line */\r\n    public get y1() {\r\n        return this._y1;\r\n    }\r\n\r\n    /**\r\n     * Class name of the gradient\r\n     * @returns the class name of the gradient\r\n     */\r\n    public getClassName(): string {\r\n        return \"LinearGradient\";\r\n    }\r\n\r\n    /**\r\n     * Serializes this gradient\r\n     * @param serializationObject the object to serialize to\r\n     */\r\n    public serialize(serializationObject: any): void {\r\n        super.serialize(serializationObject);\r\n        serializationObject.x0 = this._x0;\r\n        serializationObject.y0 = this._y0;\r\n        serializationObject.x1 = this._x1;\r\n        serializationObject.y1 = this._y1;\r\n    }\r\n\r\n    /**\r\n     * Parses a gradient from a serialization object\r\n     * @param serializationObject the object to parse from\r\n     */\r\n    public parse(serializationObject: any): void {\r\n        super.parse(serializationObject);\r\n        this._x0 = serializationObject.x0;\r\n        this._y0 = serializationObject.y0;\r\n        this._x1 = serializationObject.x1;\r\n        this._y1 = serializationObject.y1;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.LinearGradient\", LinearGradient);\r\n"]}

package/2D/controls/gradient/RadialGradient.d.ts

@@ -0,0 +1,53 @@
+import type { ICanvasGradient, ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+import { BaseGradient } from "./BaseGradient";
+/**
+ * Gradient formed from two circles with their own centers and radius.
+ * The coordinates of the circles centers are relative to the canvas' space, not to any control's space.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
+ */
+export declare class RadialGradient extends BaseGradient {
+    private _x0;
+    private _y0;
+    private _r0;
+    private _x1;
+    private _y1;
+    private _r1;
+    /**
+     * Creates a new radial gradient
+     * @param x0 x coordinate of the first circle's center
+     * @param y0 y coordinate of the first circle's center
+     * @param r0 radius of the first circle
+     * @param x1 x coordinate of the second circle's center
+     * @param y1 y coordinate of the second circle's center
+     * @param r1 radius of the second circle
+     */
+    constructor(x0?: number, y0?: number, r0?: number, x1?: number, y1?: number, r1?: number);
+    protected _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient;
+    /** x coordinate of the first circle's center */
+    get x0(): number;
+    /** x coordinate of the second circle's center */
+    get x1(): number;
+    /** y coordinate of the first circle's center */
+    get y0(): number;
+    /** y coordinate of the second circle's center */
+    get y1(): number;
+    /** radius of the first circle */
+    get r0(): number;
+    /** radius of the second circle */
+    get r1(): number;
+    /**
+     * Class name of the gradient
+     * @returns the class name of the gradient
+     */
+    getClassName(): string;
+    /**
+     * Serializes this gradient
+     * @param serializationObject the object to serialize to
+     */
+    serialize(serializationObject: any): void;
+    /**
+     * Parses a gradient from a serialization object
+     * @param serializationObject the object to parse from
+     */
+    parse(serializationObject: any): void;
+}

package/2D/controls/gradient/RadialGradient.js

@@ -0,0 +1,89 @@
+import { BaseGradient } from "./BaseGradient.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+/**
+ * Gradient formed from two circles with their own centers and radius.
+ * The coordinates of the circles centers are relative to the canvas' space, not to any control's space.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient
+ */
+export class RadialGradient extends BaseGradient {
+    /**
+     * Creates a new radial gradient
+     * @param x0 x coordinate of the first circle's center
+     * @param y0 y coordinate of the first circle's center
+     * @param r0 radius of the first circle
+     * @param x1 x coordinate of the second circle's center
+     * @param y1 y coordinate of the second circle's center
+     * @param r1 radius of the second circle
+     */
+    constructor(x0, y0, r0, x1, y1, r1) {
+        super();
+        this._x0 = x0 !== null && x0 !== void 0 ? x0 : 0;
+        this._y0 = y0 !== null && y0 !== void 0 ? y0 : 0;
+        this._r0 = r0 !== null && r0 !== void 0 ? r0 : 0;
+        this._x1 = x1 !== null && x1 !== void 0 ? x1 : 0;
+        this._y1 = y1 !== null && y1 !== void 0 ? y1 : 0;
+        this._r1 = r1 !== null && r1 !== void 0 ? r1 : 0;
+    }
+    _createCanvasGradient(context) {
+        return context.createRadialGradient(this._x0, this._y0, this._r0, this._x1, this._y1, this._r1);
+    }
+    /** x coordinate of the first circle's center */
+    get x0() {
+        return this._x0;
+    }
+    /** x coordinate of the second circle's center */
+    get x1() {
+        return this._x1;
+    }
+    /** y coordinate of the first circle's center */
+    get y0() {
+        return this._y0;
+    }
+    /** y coordinate of the second circle's center */
+    get y1() {
+        return this._y1;
+    }
+    /** radius of the first circle */
+    get r0() {
+        return this._r0;
+    }
+    /** radius of the second circle */
+    get r1() {
+        return this._r1;
+    }
+    /**
+     * Class name of the gradient
+     * @returns the class name of the gradient
+     */
+    getClassName() {
+        return "RadialGradient";
+    }
+    /**
+     * Serializes this gradient
+     * @param serializationObject the object to serialize to
+     */
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
+        serializationObject.x0 = this._x0;
+        serializationObject.y0 = this._y0;
+        serializationObject.r0 = this._r0;
+        serializationObject.x1 = this._x1;
+        serializationObject.y1 = this._y1;
+        serializationObject.r1 = this._r1;
+    }
+    /**
+     * Parses a gradient from a serialization object
+     * @param serializationObject the object to parse from
+     */
+    parse(serializationObject) {
+        super.parse(serializationObject);
+        this._x0 = serializationObject.x0;
+        this._y0 = serializationObject.y0;
+        this._r0 = serializationObject.r0;
+        this._x1 = serializationObject.x1;
+        this._y1 = serializationObject.y1;
+        this._r1 = serializationObject.r1;
+    }
+}
+RegisterClass("BABYLON.GUI.RadialGradient", RadialGradient);
+//# sourceMappingURL=RadialGradient.js.map

package/2D/controls/gradient/RadialGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialGradient.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/gradient/RadialGradient.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ICanvasGradient, ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\nimport { BaseGradient } from \"./BaseGradient\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\n\r\n/**\r\n * Gradient formed from two circles with their own centers and radius.\r\n * The coordinates of the circles centers are relative to the canvas' space, not to any control's space.\r\n * @see https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createRadialGradient\r\n */\r\nexport class RadialGradient extends BaseGradient {\r\n    private _x0: number;\r\n    private _y0: number;\r\n    private _r0: number;\r\n    private _x1: number;\r\n    private _y1: number;\r\n    private _r1: number;\r\n\r\n    /**\r\n     * Creates a new radial gradient\r\n     * @param x0 x coordinate of the first circle's center\r\n     * @param y0 y coordinate of the first circle's center\r\n     * @param r0 radius of the first circle\r\n     * @param x1 x coordinate of the second circle's center\r\n     * @param y1 y coordinate of the second circle's center\r\n     * @param r1 radius of the second circle\r\n     */\r\n    constructor(x0?: number, y0?: number, r0?: number, x1?: number, y1?: number, r1?: number) {\r\n        super();\r\n        this._x0 = x0 ?? 0;\r\n        this._y0 = y0 ?? 0;\r\n        this._r0 = r0 ?? 0;\r\n        this._x1 = x1 ?? 0;\r\n        this._y1 = y1 ?? 0;\r\n        this._r1 = r1 ?? 0;\r\n    }\r\n\r\n    protected _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient {\r\n        return context.createRadialGradient(this._x0, this._y0, this._r0, this._x1, this._y1, this._r1);\r\n    }\r\n\r\n    /** x coordinate of the first circle's center */\r\n    public get x0() {\r\n        return this._x0;\r\n    }\r\n\r\n    /** x coordinate of the second circle's center */\r\n    public get x1() {\r\n        return this._x1;\r\n    }\r\n\r\n    /** y coordinate of the first circle's center */\r\n    public get y0() {\r\n        return this._y0;\r\n    }\r\n\r\n    /** y coordinate of the second circle's center */\r\n    public get y1() {\r\n        return this._y1;\r\n    }\r\n\r\n    /** radius of the first circle */\r\n    public get r0() {\r\n        return this._r0;\r\n    }\r\n\r\n    /** radius of the second circle */\r\n    public get r1() {\r\n        return this._r1;\r\n    }\r\n\r\n    /**\r\n     * Class name of the gradient\r\n     * @returns the class name of the gradient\r\n     */\r\n    public getClassName() {\r\n        return \"RadialGradient\";\r\n    }\r\n\r\n    /**\r\n     * Serializes this gradient\r\n     * @param serializationObject the object to serialize to\r\n     */\r\n    public serialize(serializationObject: any): void {\r\n        super.serialize(serializationObject);\r\n        serializationObject.x0 = this._x0;\r\n        serializationObject.y0 = this._y0;\r\n        serializationObject.r0 = this._r0;\r\n        serializationObject.x1 = this._x1;\r\n        serializationObject.y1 = this._y1;\r\n        serializationObject.r1 = this._r1;\r\n    }\r\n\r\n    /**\r\n     * Parses a gradient from a serialization object\r\n     * @param serializationObject the object to parse from\r\n     */\r\n    public parse(serializationObject: any): void {\r\n        super.parse(serializationObject);\r\n        this._x0 = serializationObject.x0;\r\n        this._y0 = serializationObject.y0;\r\n        this._r0 = serializationObject.r0;\r\n        this._x1 = serializationObject.x1;\r\n        this._y1 = serializationObject.y1;\r\n        this._r1 = serializationObject.r1;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.RadialGradient\", RadialGradient);\r\n"]}

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

@@ -36,9 +36,14 @@ export declare class Image extends Control {
     private _populateNinePatchSlicesFromImage;
     private _detectPointerOnOpaqueOnly;
     private _imageDataCache;
+    /**
+     * Cache of images to avoid loading the same image multiple times
+     */
     static SourceImgCache: Map<string, {
         img: IImage;
         timesUsed: number;
+        loaded: boolean;
+        waitingForLoadCallback: Array<() => void>;
     }>;
     /**
      * Observable notified when the content is loaded

package/2D/controls/image.js

@@ -421,14 +421,30 @@ export class Image extends Control {
             const cachedData = Image.SourceImgCache.get(value);
             this._domImage = cachedData.img;
             cachedData.timesUsed += 1;
-            this._onImageLoaded();
+            if (cachedData.loaded) {
+                this._onImageLoaded();
+            }
+            else {
+                cachedData.waitingForLoadCallback.push(this._onImageLoaded.bind(this));
+            }
             return;
         }
         this._domImage = engine.createCanvasImage();
         if (value) {
-            Image.SourceImgCache.set(value, { img: this._domImage, timesUsed: 1 });
+            Image.SourceImgCache.set(value, { img: this._domImage, timesUsed: 1, loaded: false, waitingForLoadCallback: [this._onImageLoaded.bind(this)] });
         }
         this._domImage.onload = () => {
+            if (value) {
+                const cachedData = Image.SourceImgCache.get(value);
+                if (cachedData) {
+                    cachedData.loaded = true;
+                    for (const waitingCallback of cachedData.waitingForLoadCallback) {
+                        waitingCallback();
+                    }
+                    cachedData.waitingForLoadCallback.length = 0;
+                    return;
+                }
+            }
             this._onImageLoaded();
         };
         if (value) {
@@ -761,6 +777,9 @@ export class Image extends Control {
         this._removeCacheUsage(this._source);
     }
 }
+/**
+ * Cache of images to avoid loading the same image multiple times
+ */
 Image.SourceImgCache = new Map();
 // Static
 /** STRETCH_NONE */