babylonjs-gui 5.43.0 → 5.43.2

package/babylon.gui.module.d.ts

@@ -555,6 +555,7 @@ import { TextBlock } from "babylonjs-gui/2D/controls/textBlock";
 import { Image } from "babylonjs-gui/2D/controls/image";
 import { PointerInfoBase } from "babylonjs/Events/pointerEvents";
 import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
+import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
 /**
  * Class used to create 2D buttons
  */
@@ -612,6 +613,7 @@ export class Button extends Rectangle {
      * @internal
      */
     _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+    protected _getRectangleFill(context: ICanvasRenderingContext): string | import("babylonjs/Engines/ICanvas").ICanvasGradient;
     /**
      * @internal
      */
@@ -824,9 +826,10 @@ import { Control } from "babylonjs-gui/2D/controls/control";
 import { Measure } from "babylonjs-gui/2D/measure";
 import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
 import { PointerInfoBase } from "babylonjs/Events/pointerEvents";
-import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
 import { DynamicTexture } from "babylonjs/Materials/Textures/dynamicTexture";
 import { Observable } from "babylonjs/Misc/observable";
+import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/BaseGradient";
 /**
  * Root class for 2D containers
  * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#containers
@@ -840,6 +843,8 @@ export class Container extends Control {
     /** @internal */
     protected _background: string;
     /** @internal */
+    protected _backgroundGradient: Nullable<BaseGradient>;
+    /** @internal */
     protected _adaptWidthToChildren: boolean;
     /** @internal */
     protected _adaptHeightToChildren: boolean;
@@ -867,6 +872,9 @@ export class Container extends Control {
     /** Gets or sets background color */
     get background(): string;
     set background(value: string);
+    /** Gets or sets background gradient color. Takes precedence over background */
+    get backgroundGradient(): Nullable<BaseGradient>;
+    set backgroundGradient(value: Nullable<BaseGradient>);
     /** Gets the list of children */
     get children(): Control[];
     get isReadOnly(): boolean;
@@ -936,6 +944,7 @@ export class Container extends Control {
     _offsetTop(offset: number): void;
     /** @internal */
     _markAllAsDirty(): void;
+    protected _getBackgroundColor(context: ICanvasRenderingContext): string | ICanvasGradient;
     /**
      * @internal
      */
@@ -995,10 +1004,11 @@ import { ValueAndUnit } from "babylonjs-gui/2D/valueAndUnit";
 import { Measure } from "babylonjs-gui/2D/measure";
 import { Style } from "babylonjs-gui/2D/style";
 import { Matrix2D, Vector2WithInfo } from "babylonjs-gui/2D/math2D";
-import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
 import { IAccessibilityTag } from "babylonjs/IAccessibilityTag";
 import { IAnimatable } from "babylonjs/Animations/animatable.interface";
 import { Animation } from "babylonjs/Animations/animation";
+import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/BaseGradient";
 /**
  * Root class used for all 2D controls
  * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#controls
@@ -1094,6 +1104,7 @@ export class Control implements IAnimatable {
     protected _disabledColor: string;
     protected _disabledColorItem: string;
     protected _isReadOnly: boolean;
+    private _gradient;
     /** @internal */
     protected _rebuildLayout: boolean;
     /** @internal */
@@ -1363,6 +1374,9 @@ export class Control implements IAnimatable {
     /** Gets or sets foreground color */
     get color(): string;
     set color(value: string);
+    /** Gets or sets gradient. Setting a gradient will override the color */
+    get gradient(): Nullable<BaseGradient>;
+    set gradient(value: Nullable<BaseGradient>);
     /** Gets or sets z index which is used to reorder controls on the z axis */
     get zIndex(): number;
     set zIndex(value: number);
@@ -1659,6 +1673,7 @@ export class Control implements IAnimatable {
      * @internal
      */
     _renderHighlightSpecific(context: ICanvasRenderingContext): void;
+    protected _getColor(context: ICanvasRenderingContext): string | ICanvasGradient;
     /**
      * @internal
      */
@@ -1989,6 +2004,170 @@ export interface IFocusableControl {
     blur(): void;
 }
 
+}
+declare module "babylonjs-gui/2D/controls/gradient/BaseGradient" {
+import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+/**
+ * Type that represents a single stop on the gradient.
+ */
+export 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 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;
+}
+
+}
+declare module "babylonjs-gui/2D/controls/gradient/LinearGradient" {
+import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/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 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;
+}
+
+}
+declare module "babylonjs-gui/2D/controls/gradient/RadialGradient" {
+import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/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 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;
+}
+
 }
 declare module "babylonjs-gui/2D/controls/grid" {
 import { Nullable } from "babylonjs/types";
@@ -2169,9 +2348,14 @@ export 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
@@ -2385,6 +2569,9 @@ export * from "babylonjs-gui/2D/controls/sliders/imageBasedSlider";
 export * from "babylonjs-gui/2D/controls/sliders/scrollBar";
 export * from "babylonjs-gui/2D/controls/sliders/imageScrollBar";
 export * from "babylonjs-gui/2D/controls/statics";
+export * from "babylonjs-gui/2D/controls/gradient/BaseGradient";
+export * from "babylonjs-gui/2D/controls/gradient/LinearGradient";
+export * from "babylonjs-gui/2D/controls/gradient/RadialGradient";
 
 }
 declare module "babylonjs-gui/2D/controls/inputPassword" {
@@ -2973,7 +3160,7 @@ export class RadioButton extends Control {
 declare module "babylonjs-gui/2D/controls/rectangle" {
 import { Container } from "babylonjs-gui/2D/controls/container";
 import { Measure } from "babylonjs-gui/2D/measure";
-import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { ICanvasGradient, ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
 /** Class used to create rectangle container */
 export class Rectangle extends Container {
     name?: string | undefined;
@@ -2995,6 +3182,7 @@ export class Rectangle extends Container {
     protected _computeAdditionnalOffsetX(): 1 | 0;
     /** @internal */
     protected _computeAdditionnalOffsetY(): 1 | 0;
+    protected _getRectangleFill(context: ICanvasRenderingContext): string | ICanvasGradient;
     protected _localDraw(context: ICanvasRenderingContext): void;
     protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     private _drawRoundedRect;
@@ -3686,6 +3874,9 @@ import { BaseSlider } from "babylonjs-gui/2D/controls/sliders/baseSlider";
 import { Control } from "babylonjs-gui/2D/controls/control";
 import { PointerInfoBase } from "babylonjs/Events/pointerEvents";
 import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { Nullable } from "babylonjs/types";
+import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/BaseGradient";
+import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
 /**
  * Class used to create slider controls
  */
@@ -3695,12 +3886,16 @@ export 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);
@@ -3711,6 +3906,7 @@ export class ScrollBar extends BaseSlider {
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
     protected _getThumbThickness(): number;
+    private _getBackgroundColor;
     _draw(context: ICanvasRenderingContext): void;
     private _first;
     private _originX;
@@ -3720,12 +3916,17 @@ export 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;
 }
 
 }
 declare module "babylonjs-gui/2D/controls/sliders/slider" {
 import { BaseSlider } from "babylonjs-gui/2D/controls/sliders/baseSlider";
 import { ICanvasRenderingContext } from "babylonjs/Engines/ICanvas";
+import { Nullable } from "babylonjs/types";
+import { BaseGradient } from "babylonjs-gui/2D/controls/gradient/BaseGradient";
+import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
 /**
  * Class used to create slider controls
  */
@@ -3736,6 +3937,7 @@ export 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);
@@ -3745,6 +3947,9 @@ export 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);
@@ -3757,7 +3962,11 @@ export 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;
 }
 
 }
@@ -3880,6 +4089,7 @@ export class TextBlock extends Control {
     private _underline;
     private _lineThrough;
     private _wordDivider;
+    private _forceResizeWidth;
     /**
      * An event triggered after the text is changed
      */
@@ -3984,6 +4194,13 @@ export 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
@@ -9067,6 +9284,7 @@ declare module BABYLON.GUI {
          * @internal
          */
         _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean;
+        protected _getRectangleFill(context: BABYLON.ICanvasRenderingContext): string | import("core/Engines/ICanvas").ICanvasGradient;
         /**
          * @internal
          */
@@ -9270,6 +9488,8 @@ declare module BABYLON.GUI {
         /** @internal */
         protected _background: string;
         /** @internal */
+        protected _backgroundGradient: BABYLON.Nullable<BaseGradient>;
+        /** @internal */
         protected _adaptWidthToChildren: boolean;
         /** @internal */
         protected _adaptHeightToChildren: boolean;
@@ -9297,6 +9517,9 @@ declare module BABYLON.GUI {
         /** Gets or sets background color */
         get background(): string;
         set background(value: string);
+        /** Gets or sets background gradient color. Takes precedence over background */
+        get backgroundGradient(): BABYLON.Nullable<BaseGradient>;
+        set backgroundGradient(value: BABYLON.Nullable<BaseGradient>);
         /** Gets the list of children */
         get children(): Control[];
         get isReadOnly(): boolean;
@@ -9366,6 +9589,7 @@ declare module BABYLON.GUI {
         _offsetTop(offset: number): void;
         /** @internal */
         _markAllAsDirty(): void;
+        protected _getBackgroundColor(context: BABYLON.ICanvasRenderingContext): string | BABYLON.ICanvasGradient;
         /**
          * @internal
          */
@@ -9507,6 +9731,7 @@ declare module BABYLON.GUI {
         protected _disabledColor: string;
         protected _disabledColorItem: string;
         protected _isReadOnly: boolean;
+        private _gradient;
         /** @internal */
         protected _rebuildLayout: boolean;
         /** @internal */
@@ -9776,6 +10001,9 @@ declare module BABYLON.GUI {
         /** Gets or sets foreground color */
         get color(): string;
         set color(value: string);
+        /** Gets or sets gradient. Setting a gradient will override the color */
+        get gradient(): BABYLON.Nullable<BaseGradient>;
+        set gradient(value: BABYLON.Nullable<BaseGradient>);
         /** Gets or sets z index which is used to reorder controls on the z axis */
         get zIndex(): number;
         set zIndex(value: number);
@@ -10072,6 +10300,7 @@ declare module BABYLON.GUI {
          * @internal
          */
         _renderHighlightSpecific(context: BABYLON.ICanvasRenderingContext): void;
+        protected _getColor(context: BABYLON.ICanvasRenderingContext): string | BABYLON.ICanvasGradient;
         /**
          * @internal
          */
@@ -10383,6 +10612,162 @@ declare module BABYLON.GUI {
     }
 
 
+    /**
+     * Type that represents a single stop on the gradient.
+     */
+    export 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 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: BABYLON.ICanvasRenderingContext): BABYLON.ICanvasGradient;
+        private _addColorStopsToCanvasGradient;
+        /**
+         * If there are any changes or the context changed, regenerate the canvas gradient object. Else,
+         * reuse the existing gradient.
+         **/
+        getCanvasGradient(context: BABYLON.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;
+    }
+
+
+    /**
+     * 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 {
+        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: BABYLON.ICanvasRenderingContext): BABYLON.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;
+    }
+
+
+    /**
+     * 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 {
+        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: BABYLON.ICanvasRenderingContext): BABYLON.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;
+    }
+
+
     /**
      * Class used to create a 2D grid container
      */
@@ -10548,9 +10933,14 @@ declare module BABYLON.GUI {
         private _populateNinePatchSlicesFromImage;
         private _detectPointerOnOpaqueOnly;
         private _imageDataCache;
+        /**
+         * Cache of images to avoid loading the same image multiple times
+         */
         static SourceImgCache: Map<string, {
             img: BABYLON.IImage;
             timesUsed: number;
+            loaded: boolean;
+            waitingForLoadCallback: Array<() => void>;
         }>;
         /**
          * BABYLON.Observable notified when the content is loaded
@@ -11291,6 +11681,7 @@ declare module BABYLON.GUI {
         protected _computeAdditionnalOffsetX(): 1 | 0;
         /** @internal */
         protected _computeAdditionnalOffsetY(): 1 | 0;
+        protected _getRectangleFill(context: BABYLON.ICanvasRenderingContext): string | BABYLON.ICanvasGradient;
         protected _localDraw(context: BABYLON.ICanvasRenderingContext): void;
         protected _additionalProcessing(parentMeasure: Measure, context: BABYLON.ICanvasRenderingContext): void;
         private _drawRoundedRect;
@@ -11949,12 +12340,16 @@ declare module BABYLON.GUI {
         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(): BABYLON.Nullable<BaseGradient>;
+        set backgroundGradient(value: BABYLON.Nullable<BaseGradient>);
         /** Inverts the scrolling direction (default: false) */
         get invertScrollDirection(): boolean;
         set invertScrollDirection(invert: boolean);
@@ -11965,6 +12360,7 @@ declare module BABYLON.GUI {
         constructor(name?: string | undefined);
         protected _getTypeName(): string;
         protected _getThumbThickness(): number;
+        private _getBackgroundColor;
         _draw(context: BABYLON.ICanvasRenderingContext): void;
         private _first;
         private _originX;
@@ -11974,6 +12370,8 @@ declare module BABYLON.GUI {
          */
         protected _updateValueFromPointer(x: number, y: number): void;
         _onPointerDown(target: Control, coordinates: BABYLON.Vector2, pointerId: number, buttonIndex: number, pi: BABYLON.PointerInfoBase): boolean;
+        serialize(serializationObject: any): void;
+        _parseFromContent(serializationObject: any, host: AdvancedDynamicTexture): void;
     }
 
 
@@ -11987,6 +12385,7 @@ declare module BABYLON.GUI {
         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);
@@ -11996,6 +12395,9 @@ declare module BABYLON.GUI {
         /** Gets or sets background color */
         get background(): string;
         set background(value: string);
+        /** Gets or sets background gradient */
+        get backgroundGradient(): BABYLON.Nullable<BaseGradient>;
+        set backgroundGradient(value: BABYLON.Nullable<BaseGradient>);
         /** Gets or sets thumb's color */
         get thumbColor(): string;
         set thumbColor(value: string);
@@ -12008,7 +12410,11 @@ declare module BABYLON.GUI {
          */
         constructor(name?: string | undefined);
         protected _getTypeName(): string;
+        protected _getBackgroundColor(context: BABYLON.ICanvasRenderingContext): string | CanvasGradient;
         _draw(context: BABYLON.ICanvasRenderingContext): void;
+        serialize(serializationObject: any): void;
+        /** @internal */
+        _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void;
     }
 
 
@@ -12118,6 +12524,7 @@ declare module BABYLON.GUI {
         private _underline;
         private _lineThrough;
         private _wordDivider;
+        private _forceResizeWidth;
         /**
          * An event triggered after the text is changed
          */
@@ -12222,6 +12629,13 @@ declare module BABYLON.GUI {
          * 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