babylonjs-gui 5.0.0-beta.1 → 5.0.0-beta.10

package/babylon.gui.module.d.ts

@@ -583,7 +583,7 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
          * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
          */
-        constructor(name: string, width: number | undefined, height: number | undefined, scene: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
+        constructor(name: string, width?: number, height?: number, scene?: Nullable<Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
         /**
          * Get the current class name of the texture useful for serialization or dynamic coding.
          * @returns "AdvancedDynamicTexture"
@@ -772,6 +772,17 @@ declare module "babylonjs-gui/2D/advancedDynamicTexture" {
          * @returns a new AdvancedDynamicTexture
          */
         static CreateFullscreenUI(name: string, foreground?: boolean, scene?: Nullable<Scene>, sampling?: number, adaptiveScaling?: boolean): AdvancedDynamicTexture;
+        /**
+         * Scales the texture
+         * @param ratio the scale factor to apply to both width and height
+         */
+        scale(ratio: number): void;
+        /**
+         * Resizes the texture
+         * @param width the new width
+         * @param height the new height
+         */
+        scaleTo(width: number, height: number): void;
     }
 }
 declare module "babylonjs-gui/2D/controls/control" {
@@ -1266,10 +1277,10 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** Gets or sets if control is Enabled */
         get isEnabled(): boolean;
         set isEnabled(value: boolean);
-        /** Gets or sets background color of control if it's disabled */
+        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
         get disabledColor(): string;
         set disabledColor(value: string);
-        /** Gets or sets front color of control if it's disabled */
+        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
         get disabledColorItem(): string;
         set disabledColorItem(value: string);
         /**
@@ -1298,6 +1309,15 @@ declare module "babylonjs-gui/2D/controls/control" {
          * @returns the ascendant or null if not found
          */
         getAscendantOfClass(className: string): Nullable<Control>;
+        /**
+         * Mark control element as dirty
+         * @param force force non visible elements to be marked too
+         */
+        markAsDirty(force: false): void;
+        /**
+         * Mark the element and its children as dirty
+         */
+        markAllAsDirty(): void;
         /** @hidden */
         _resetFontCache(): void;
         /**
@@ -1380,7 +1400,7 @@ declare module "babylonjs-gui/2D/controls/control" {
         /** @hidden */
         _flagDescendantsAsMatrixDirty(): void;
         /** @hidden */
-        _intersectsRect(rect: Measure): boolean;
+        _intersectsRect(rect: Measure, context?: ICanvasRenderingContext): boolean;
         /** @hidden */
         protected _computeAdditionnalOffsetX(): number;
         /** @hidden */
@@ -4348,6 +4368,7 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
     import { Mesh } from "babylonjs/Meshes/mesh";
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Scene } from "babylonjs/scene";
+    import { Observable } from "babylonjs/Misc/observable";
     import { Button3D } from "babylonjs-gui/3D/controls/button3D";
     /**
      * Class used to create a touchable button in 3D
@@ -4356,6 +4377,13 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
         private _collisionMesh;
         private _collidableFrontDirection;
         protected _isNearPressed: boolean;
+        private _isToggleButton;
+        private _toggleState;
+        private _toggleButtonCallback;
+        /**
+         * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+         */
+        onToggleObservable: Observable<boolean>;
         /**
          * Creates a new touchable button
          * @param name defines the control name
@@ -4376,6 +4404,19 @@ declare module "babylonjs-gui/3D/controls/touchButton3D" {
          * @param collisionMesh the new collision mesh for the button
          */
         set collisionMesh(collisionMesh: Mesh);
+        /**
+         * Setter for if this TouchButton3D should be treated as a toggle button
+         * @param value If this TouchHolographicButton should act like a toggle button
+         */
+        set isToggleButton(value: boolean);
+        get isToggleButton(): boolean;
+        /**
+         * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+         * @param newState The new state to set the TouchHolographicButton's toggle state to
+         */
+        set isToggled(newState: boolean);
+        get isToggled(): boolean;
+        protected _onToggle(newState: boolean): void;
         private _isInteractionInFrontOfButton;
         protected _getInteractionHeight(interactionPos: Vector3, basePos: Vector3): number;
         /** @hidden */
@@ -4768,7 +4809,7 @@ declare module "babylonjs-gui/3D/materials/fluent/fluentMaterial" {
          * @param name defines the name of the material
          * @param scene defines the hosting scene
          */
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -5055,7 +5096,7 @@ declare module "babylonjs-gui/3D/materials/fluentButton/fluentButtonMaterial" {
          */
         globalRightIndexTipPosition: Vector3;
         private _blobTexture;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -5079,6 +5120,7 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Mesh } from "babylonjs/Meshes/mesh";
     import { Scene } from "babylonjs/scene";
+    import { FluentMaterial } from "babylonjs-gui/3D/materials/fluent/fluentMaterial";
     import { FluentButtonMaterial } from "babylonjs-gui/3D/materials/fluentButton/fluentButtonMaterial";
     import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
     import { TouchButton3D } from "babylonjs-gui/3D/controls/touchButton3D";
@@ -5109,6 +5151,8 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         private _pointerHoverObserver;
         private _frontPlateDepth;
         private _backPlateDepth;
+        private _backplateColor;
+        private _backplateToggledColor;
         private _tooltipFade;
         private _tooltipTextBlock;
         private _tooltipTexture;
@@ -5139,7 +5183,7 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         /**
          * Gets the back material used by this button
          */
-        get backMaterial(): StandardMaterial;
+        get backMaterial(): FluentMaterial;
         /**
          * Gets the front material used by this button
          */
@@ -5168,6 +5212,7 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         private _createBackMaterial;
         private _createFrontMaterial;
         private _createPlateMaterial;
+        protected _onToggle(newState: boolean): void;
         protected _affectMaterial(mesh: Mesh): void;
         /**
          * Releases all associated resources
@@ -5175,6 +5220,81 @@ declare module "babylonjs-gui/3D/controls/touchHolographicButton" {
         dispose(): void;
     }
 }
+declare module "babylonjs-gui/3D/behaviors/defaultBehavior" {
+    import { Behavior } from "babylonjs/Behaviors/behavior";
+    import { FollowBehavior } from "babylonjs/Behaviors/Meshes/followBehavior";
+    import { SixDofDragBehavior } from "babylonjs/Behaviors/Meshes/sixDofDragBehavior";
+    import { Mesh } from "babylonjs/Meshes/mesh";
+    import { Nullable } from "babylonjs/types";
+    import { SurfaceMagnetismBehavior } from "babylonjs/Behaviors/Meshes/surfaceMagnetismBehavior";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+    /**
+     * Default behavior for 3D UI elements.
+     * Handles a FollowBehavior, SixDofBehavior and SurfaceMagnetismBehavior
+     * @since 5.0.0
+     */
+    export class DefaultBehavior implements Behavior<Mesh> {
+        private _scene;
+        private _followBehavior;
+        private _sixDofDragBehavior;
+        private _surfaceMagnetismBehavior;
+        private _onBeforeRenderObserver;
+        private _onDragObserver;
+        /**
+         * Instantiates the default behavior
+         */
+        constructor();
+        /**
+         * Attached node of this behavior
+         */
+        attachedNode: Nullable<Mesh>;
+        /**
+         *  The name of the behavior
+         */
+        get name(): string;
+        /**
+         *  The follow behavior
+         */
+        get followBehavior(): FollowBehavior;
+        /**
+         *  The six DoF drag behavior
+         */
+        get sixDofDragBehavior(): SixDofDragBehavior;
+        /**
+         * The surface magnetism behavior
+         */
+        get surfaceMagnetismBehavior(): SurfaceMagnetismBehavior;
+        /**
+         * Enables the follow behavior
+         */
+        followBehaviorEnabled: boolean;
+        /**
+         * Enables the six DoF drag behavior
+         */
+        sixDofDragBehaviorEnabled: boolean;
+        /**
+         * Enables the surface magnetism behavior
+         */
+        surfaceMagnetismBehaviorEnabled: boolean;
+        /**
+         *  Initializes the behavior
+         */
+        init(): void;
+        /**
+         * Attaches the default behavior
+         * @param ownerMesh The top level mesh
+         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
+         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
+         */
+        attach(ownerMesh: Mesh, draggablesMeshes?: Mesh[], sceneUnderstandingMeshes?: AbstractMesh[]): void;
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        detach(): void;
+        private _addObservables;
+        private _removeObservables;
+    }
+}
 declare module "babylonjs-gui/3D/materials/handle/shaders/handle.vertex" {
     /** @hidden */
     export var handleVertexShader: {
@@ -5430,81 +5550,6 @@ declare module "babylonjs-gui/3D/gizmos/slateGizmo" {
         dispose(): void;
     }
 }
-declare module "babylonjs-gui/3D/behaviors/defaultBehavior" {
-    import { Behavior } from "babylonjs/Behaviors/behavior";
-    import { FollowBehavior } from "babylonjs/Behaviors/Meshes/followBehavior";
-    import { SixDofDragBehavior } from "babylonjs/Behaviors/Meshes/sixDofDragBehavior";
-    import { Mesh } from "babylonjs/Meshes/mesh";
-    import { Nullable } from "babylonjs/types";
-    import { SurfaceMagnetismBehavior } from "babylonjs/Behaviors/Meshes/surfaceMagnetismBehavior";
-    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-    /**
-     * Default behavior for 3D UI elements.
-     * Handles a FollowBehavior, SixDofBehavior and SurfaceMagnetismBehavior
-     * @since 5.0.0
-     */
-    export class DefaultBehavior implements Behavior<Mesh> {
-        private _scene;
-        private _followBehavior;
-        private _sixDofDragBehavior;
-        private _surfaceMagnetismBehavior;
-        private _onBeforeRenderObserver;
-        private _onDragObserver;
-        /**
-         * Instantiates the default behavior
-         */
-        constructor();
-        /**
-         * Attached node of this behavior
-         */
-        attachedNode: Nullable<Mesh>;
-        /**
-         *  The name of the behavior
-         */
-        get name(): string;
-        /**
-         *  The follow behavior
-         */
-        get followBehavior(): FollowBehavior;
-        /**
-         *  The six DoF drag behavior
-         */
-        get sixDofDragBehavior(): SixDofDragBehavior;
-        /**
-         * The surface magnetism behavior
-         */
-        get surfaceMagnetismBehavior(): SurfaceMagnetismBehavior;
-        /**
-         * Enables the follow behavior
-         */
-        followBehaviorEnabled: boolean;
-        /**
-         * Enables the six DoF drag behavior
-         */
-        sixDofDragBehaviorEnabled: boolean;
-        /**
-         * Enables the surface magnetism behavior
-         */
-        surfaceMagnetismBehaviorEnabled: boolean;
-        /**
-         *  Initializes the behavior
-         */
-        init(): void;
-        /**
-         * Attaches the default behavior
-         * @param ownerMesh The top level mesh
-         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
-         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
-         */
-        attach(ownerMesh: Mesh, draggablesMeshes?: Mesh[], sceneUnderstandingMeshes?: AbstractMesh[]): void;
-        /**
-         *  Detaches the behavior from the mesh
-         */
-        detach(): void;
-        private _addObservables;
-        private _removeObservables;
-    }
-}
 declare module "babylonjs-gui/3D/materials/fluentBackplate/shaders/fluentBackplate.fragment" {
     /** @hidden */
     export var fluentBackplatePixelShader: {
@@ -5657,7 +5702,7 @@ declare module "babylonjs-gui/3D/materials/fluentBackplate/fluentBackplateMateri
          */
         globalRightIndexTipPosition: Vector3;
         private _globalRightIndexTipPosition4;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -5676,16 +5721,16 @@ declare module "babylonjs-gui/3D/materials/fluentBackplate/fluentBackplateMateri
     }
 }
 declare module "babylonjs-gui/3D/controls/holographicSlate" {
-    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-    import { Scene } from "babylonjs/scene";
-    import { TransformNode } from "babylonjs/Meshes/transformNode";
-    import { Mesh } from "babylonjs/Meshes/mesh";
-    import { TouchHolographicButton } from "babylonjs-gui/3D/controls/touchHolographicButton";
-    import { Vector3 } from "babylonjs/Maths/math.vector";
     import { ContentDisplay3D } from "babylonjs-gui/3D/controls/contentDisplay3D";
+    import { TouchHolographicButton } from "babylonjs-gui/3D/controls/touchHolographicButton";
     import { AdvancedDynamicTexture } from "babylonjs-gui/2D/advancedDynamicTexture";
-    import { SlateGizmo } from "babylonjs-gui/3D/gizmos/slateGizmo";
     import { DefaultBehavior } from "babylonjs-gui/3D/behaviors/defaultBehavior";
+    import { SlateGizmo } from "babylonjs-gui/3D/gizmos/slateGizmo";
+    import { Vector2, Vector3 } from "babylonjs/Maths/math.vector";
+    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
+    import { TransformNode } from "babylonjs/Meshes/transformNode";
+    import { Mesh } from "babylonjs/Meshes/mesh";
+    import { Scene } from "babylonjs/scene";
     /**
      * Class used to create a holographic slate
      * @since 5.0.0
@@ -5703,35 +5748,37 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
          * File name for the close icon.
          */
         static FOLLOW_ICON_FILENAME: string;
+        private static DEFAULT_TEXT_RESOLUTION_Y;
         /**
-         * Dimensions of the slate
+         * 2D dimensions of the slate
          */
-        dimensions: Vector3;
+        dimensions: Vector2;
         /**
          * Minimum dimensions of the slate
          */
-        minDimensions: Vector3;
+        minDimensions: Vector2;
         /**
          * Default dimensions of the slate
          */
-        readonly defaultDimensions: Vector3;
+        readonly defaultDimensions: Vector2;
         /**
-         * Dimensions of the backplate
+         * Height of the title bar component
          */
-        backplateDimensions: Vector3;
+        titleBarHeight: number;
         /**
-         * Margin between backplate and contentplate
+         * Margin between title bar and contentplate
          */
-        backPlateMargin: number;
+        titleBarMargin: number;
         /**
          * Origin in local coordinates (top left corner)
          */
         origin: Vector3;
-        private _backPlateMaterial;
+        private _titleBarMaterial;
         private _contentMaterial;
         private _pickedPointObserver;
         private _positionChangedObserver;
-        private _imageUrl;
+        private _titleText;
+        private _titleTextComponent;
         private _contentViewport;
         private _contentDragBehavior;
         private _defaultBehavior;
@@ -5741,21 +5788,22 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
         get defaultBehavior(): DefaultBehavior;
         /** @hidden */
         _gizmo: SlateGizmo;
-        protected _backPlate: Mesh;
+        protected _titleBar: Mesh;
+        protected _titleBarTitle: Mesh;
         protected _contentPlate: Mesh;
         protected _followButton: TouchHolographicButton;
         protected _closeButton: TouchHolographicButton;
         protected _contentScaleRatio: number;
         /**
-         * Rendering ground id of all the mesh in the button
+         * Rendering ground id of all the meshes
          */
         set renderingGroupId(id: number);
         get renderingGroupId(): number;
         /**
-         * Gets or sets the image url for the button
+         * The title text displayed at the top of the slate
          */
-        get imageUrl(): string;
-        set imageUrl(value: string);
+        set title(title: string);
+        get title(): string;
         /**
          * Creates a new slate
          * @param name defines the control name
@@ -5767,7 +5815,6 @@ declare module "babylonjs-gui/3D/controls/holographicSlate" {
          * @param facadeTexture defines the AdvancedDynamicTexture to use
          */
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
-        private _rebuildContent;
         private _addControl;
         protected _getTypeName(): string;
         /**
@@ -5931,7 +5978,6 @@ declare module "babylonjs-gui/3D/controls/nearMenu" {
          */
         private static PIN_ICON_FILENAME;
         private _pinButton;
-        private _pinMaterial;
         private _dragObserver;
         private _defaultBehavior;
         /**
@@ -6320,7 +6366,7 @@ declare module "babylonjs-gui/3D/materials/mrdl/mrdlSliderBarMaterial" {
          * @hidden
          */
         globalRightIndexMiddlePosition: Vector4;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -6669,7 +6715,7 @@ declare module "babylonjs-gui/3D/materials/mrdl/mrdlSliderThumbMaterial" {
          * @hidden
          */
         globalRightIndexMiddlePosition: Vector4;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -6832,7 +6878,7 @@ declare module "babylonjs-gui/3D/materials/mrdl/mrdlBackplateMaterial" {
          * Gets or sets the edge width of the backplate.
          */
         edgeLineGradientBlend: number;
-        constructor(name: string, scene: Scene);
+        constructor(name: string, scene?: Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): Nullable<BaseTexture>;
@@ -6999,43 +7045,6 @@ declare module "babylonjs-gui/3D/controls/touchMeshButton3D" {
         protected _affectMaterial(mesh: AbstractMesh): void;
     }
 }
-declare module "babylonjs-gui/3D/controls/touchToggleButton3D" {
-    import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
-    import { Mesh } from "babylonjs/Meshes/mesh";
-    import { Observable } from "babylonjs/Misc/observable";
-    import { Scene } from "babylonjs/scene";
-    import { TransformNode } from "babylonjs/Meshes/transformNode";
-    import { Vector3 } from "babylonjs/Maths/math.vector";
-    import { TouchButton3D } from "babylonjs-gui/3D/controls/touchButton3D";
-    /**
-     * Class used as base class for touch-enabled toggleable buttons
-     */
-    export class TouchToggleButton3D extends TouchButton3D {
-        private _isPressed;
-        /**
-         * An event triggered when the button is toggled on
-         */
-        onToggleOnObservable: Observable<Vector3>;
-        /**
-         * An event triggered when the button is toggled off
-         */
-        onToggleOffObservable: Observable<Vector3>;
-        /**
-         * Creates a new button
-         * @param name defines the control name
-         * @param collisionMesh defines the mesh to track near interactions with
-         */
-        constructor(name?: string, collisionMesh?: Mesh);
-        private _onToggle;
-        protected _getTypeName(): string;
-        protected _createNode(scene: Scene): TransformNode;
-        protected _affectMaterial(mesh: AbstractMesh): void;
-        /**
-         * Releases all associated resources
-         */
-        dispose(): void;
-    }
-}
 declare module "babylonjs-gui/3D/controls/holographicBackplate" {
     import { TransformNode } from "babylonjs/Meshes/transformNode";
     import { Mesh } from "babylonjs/Meshes/mesh";
@@ -7106,7 +7115,6 @@ declare module "babylonjs-gui/3D/controls/index" {
     export * from "babylonjs-gui/3D/controls/touchMeshButton3D";
     export * from "babylonjs-gui/3D/controls/touchHolographicButton";
     export * from "babylonjs-gui/3D/controls/touchHolographicMenu";
-    export * from "babylonjs-gui/3D/controls/touchToggleButton3D";
     export * from "babylonjs-gui/3D/controls/volumeBasedPanel";
     export * from "babylonjs-gui/3D/controls/holographicBackplate";
 }
@@ -7721,7 +7729,7 @@ declare module BABYLON.GUI {
          * @param samplingMode defines the texture sampling mode (Texture.NEAREST_SAMPLINGMODE by default)
          * @param invertY defines if the texture needs to be inverted on the y axis during loading (true by default)
          */
-        constructor(name: string, width: number | undefined, height: number | undefined, scene: BABYLON.Nullable<BABYLON.Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
+        constructor(name: string, width?: number, height?: number, scene?: BABYLON.Nullable<BABYLON.Scene>, generateMipMaps?: boolean, samplingMode?: number, invertY?: boolean);
         /**
          * Get the current class name of the texture useful for serialization or dynamic coding.
          * @returns "AdvancedDynamicTexture"
@@ -7910,6 +7918,17 @@ declare module BABYLON.GUI {
          * @returns a new AdvancedDynamicTexture
          */
         static CreateFullscreenUI(name: string, foreground?: boolean, scene?: BABYLON.Nullable<BABYLON.Scene>, sampling?: number, adaptiveScaling?: boolean): AdvancedDynamicTexture;
+        /**
+         * Scales the texture
+         * @param ratio the scale factor to apply to both width and height
+         */
+        scale(ratio: number): void;
+        /**
+         * Resizes the texture
+         * @param width the new width
+         * @param height the new height
+         */
+        scaleTo(width: number, height: number): void;
     }
 }
 declare module BABYLON.GUI {
@@ -8391,10 +8410,10 @@ declare module BABYLON.GUI {
         /** Gets or sets if control is Enabled */
         get isEnabled(): boolean;
         set isEnabled(value: boolean);
-        /** Gets or sets background color of control if it's disabled */
+        /** Gets or sets background color of control if it's disabled. Only applies to Button class. */
         get disabledColor(): string;
         set disabledColor(value: string);
-        /** Gets or sets front color of control if it's disabled */
+        /** Gets or sets front color of control if it's disabled. Only applies to Checkbox class. */
         get disabledColorItem(): string;
         set disabledColorItem(value: string);
         /**
@@ -8423,6 +8442,15 @@ declare module BABYLON.GUI {
          * @returns the ascendant or null if not found
          */
         getAscendantOfClass(className: string): BABYLON.Nullable<Control>;
+        /**
+         * Mark control element as dirty
+         * @param force force non visible elements to be marked too
+         */
+        markAsDirty(force: false): void;
+        /**
+         * Mark the element and its children as dirty
+         */
+        markAllAsDirty(): void;
         /** @hidden */
         _resetFontCache(): void;
         /**
@@ -8505,7 +8533,7 @@ declare module BABYLON.GUI {
         /** @hidden */
         _flagDescendantsAsMatrixDirty(): void;
         /** @hidden */
-        _intersectsRect(rect: Measure): boolean;
+        _intersectsRect(rect: Measure, context?: BABYLON.ICanvasRenderingContext): boolean;
         /** @hidden */
         protected _computeAdditionnalOffsetX(): number;
         /** @hidden */
@@ -11254,6 +11282,13 @@ declare module BABYLON.GUI {
         private _collisionMesh;
         private _collidableFrontDirection;
         protected _isNearPressed: boolean;
+        private _isToggleButton;
+        private _toggleState;
+        private _toggleButtonCallback;
+        /**
+         * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+         */
+        onToggleObservable: BABYLON.Observable<boolean>;
         /**
          * Creates a new touchable button
          * @param name defines the control name
@@ -11274,6 +11309,19 @@ declare module BABYLON.GUI {
          * @param collisionMesh the new collision mesh for the button
          */
         set collisionMesh(collisionMesh: BABYLON.Mesh);
+        /**
+         * Setter for if this TouchButton3D should be treated as a toggle button
+         * @param value If this TouchHolographicButton should act like a toggle button
+         */
+        set isToggleButton(value: boolean);
+        get isToggleButton(): boolean;
+        /**
+         * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+         * @param newState The new state to set the TouchHolographicButton's toggle state to
+         */
+        set isToggled(newState: boolean);
+        get isToggled(): boolean;
+        protected _onToggle(newState: boolean): void;
         private _isInteractionInFrontOfButton;
         protected _getInteractionHeight(interactionPos: BABYLON.Vector3, basePos: BABYLON.Vector3): number;
         /** @hidden */
@@ -11630,7 +11678,7 @@ declare module BABYLON.GUI {
          * @param name defines the name of the material
          * @param scene defines the hosting scene
          */
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -11897,7 +11945,7 @@ declare module BABYLON.GUI {
          */
         globalRightIndexTipPosition: BABYLON.Vector3;
         private _blobTexture;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -11943,6 +11991,8 @@ declare module BABYLON.GUI {
         private _pointerHoverObserver;
         private _frontPlateDepth;
         private _backPlateDepth;
+        private _backplateColor;
+        private _backplateToggledColor;
         private _tooltipFade;
         private _tooltipTextBlock;
         private _tooltipTexture;
@@ -11973,7 +12023,7 @@ declare module BABYLON.GUI {
         /**
          * Gets the back material used by this button
          */
-        get backMaterial(): BABYLON.StandardMaterial;
+        get backMaterial(): FluentMaterial;
         /**
          * Gets the front material used by this button
          */
@@ -12002,6 +12052,7 @@ declare module BABYLON.GUI {
         private _createBackMaterial;
         private _createFrontMaterial;
         private _createPlateMaterial;
+        protected _onToggle(newState: boolean): void;
         protected _affectMaterial(mesh: BABYLON.Mesh): void;
         /**
          * Releases all associated resources
@@ -12009,6 +12060,74 @@ declare module BABYLON.GUI {
         dispose(): void;
     }
 }
+declare module BABYLON.GUI {
+    /**
+     * Default behavior for 3D UI elements.
+     * Handles a BABYLON.FollowBehavior, SixDofBehavior and BABYLON.SurfaceMagnetismBehavior
+     * @since 5.0.0
+     */
+    export class DefaultBehavior implements BABYLON.Behavior<BABYLON.Mesh> {
+        private _scene;
+        private _followBehavior;
+        private _sixDofDragBehavior;
+        private _surfaceMagnetismBehavior;
+        private _onBeforeRenderObserver;
+        private _onDragObserver;
+        /**
+         * Instantiates the default behavior
+         */
+        constructor();
+        /**
+         * Attached node of this behavior
+         */
+        attachedNode: BABYLON.Nullable<BABYLON.Mesh>;
+        /**
+         *  The name of the behavior
+         */
+        get name(): string;
+        /**
+         *  The follow behavior
+         */
+        get followBehavior(): BABYLON.FollowBehavior;
+        /**
+         *  The six DoF drag behavior
+         */
+        get sixDofDragBehavior(): BABYLON.SixDofDragBehavior;
+        /**
+         * The surface magnetism behavior
+         */
+        get surfaceMagnetismBehavior(): BABYLON.SurfaceMagnetismBehavior;
+        /**
+         * Enables the follow behavior
+         */
+        followBehaviorEnabled: boolean;
+        /**
+         * Enables the six DoF drag behavior
+         */
+        sixDofDragBehaviorEnabled: boolean;
+        /**
+         * Enables the surface magnetism behavior
+         */
+        surfaceMagnetismBehaviorEnabled: boolean;
+        /**
+         *  Initializes the behavior
+         */
+        init(): void;
+        /**
+         * Attaches the default behavior
+         * @param ownerMesh The top level mesh
+         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
+         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
+         */
+        attach(ownerMesh: BABYLON.Mesh, draggablesMeshes?: BABYLON.Mesh[], sceneUnderstandingMeshes?: BABYLON.AbstractMesh[]): void;
+        /**
+         *  Detaches the behavior from the mesh
+         */
+        detach(): void;
+        private _addObservables;
+        private _removeObservables;
+    }
+}
 declare module BABYLON.GUI {
     /** @hidden */
     export var handleVertexShader: {
@@ -12247,74 +12366,6 @@ declare module BABYLON.GUI {
         dispose(): void;
     }
 }
-declare module BABYLON.GUI {
-    /**
-     * Default behavior for 3D UI elements.
-     * Handles a BABYLON.FollowBehavior, SixDofBehavior and BABYLON.SurfaceMagnetismBehavior
-     * @since 5.0.0
-     */
-    export class DefaultBehavior implements BABYLON.Behavior<BABYLON.Mesh> {
-        private _scene;
-        private _followBehavior;
-        private _sixDofDragBehavior;
-        private _surfaceMagnetismBehavior;
-        private _onBeforeRenderObserver;
-        private _onDragObserver;
-        /**
-         * Instantiates the default behavior
-         */
-        constructor();
-        /**
-         * Attached node of this behavior
-         */
-        attachedNode: BABYLON.Nullable<BABYLON.Mesh>;
-        /**
-         *  The name of the behavior
-         */
-        get name(): string;
-        /**
-         *  The follow behavior
-         */
-        get followBehavior(): BABYLON.FollowBehavior;
-        /**
-         *  The six DoF drag behavior
-         */
-        get sixDofDragBehavior(): BABYLON.SixDofDragBehavior;
-        /**
-         * The surface magnetism behavior
-         */
-        get surfaceMagnetismBehavior(): BABYLON.SurfaceMagnetismBehavior;
-        /**
-         * Enables the follow behavior
-         */
-        followBehaviorEnabled: boolean;
-        /**
-         * Enables the six DoF drag behavior
-         */
-        sixDofDragBehaviorEnabled: boolean;
-        /**
-         * Enables the surface magnetism behavior
-         */
-        surfaceMagnetismBehaviorEnabled: boolean;
-        /**
-         *  Initializes the behavior
-         */
-        init(): void;
-        /**
-         * Attaches the default behavior
-         * @param ownerMesh The top level mesh
-         * @param draggablesMeshes Descendant meshes that can be used for dragging the owner mesh
-         * @param sceneUnderstandingMeshes Meshes from the scene understanding that will be used for surface magnetism
-         */
-        attach(ownerMesh: BABYLON.Mesh, draggablesMeshes?: BABYLON.Mesh[], sceneUnderstandingMeshes?: BABYLON.AbstractMesh[]): void;
-        /**
-         *  Detaches the behavior from the mesh
-         */
-        detach(): void;
-        private _addObservables;
-        private _removeObservables;
-    }
-}
 declare module BABYLON.GUI {
     /** @hidden */
     export var fluentBackplatePixelShader: {
@@ -12455,7 +12506,7 @@ declare module BABYLON.GUI {
          */
         globalRightIndexTipPosition: BABYLON.Vector3;
         private _globalRightIndexTipPosition4;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -12491,35 +12542,37 @@ declare module BABYLON.GUI {
          * File name for the close icon.
          */
         static FOLLOW_ICON_FILENAME: string;
+        private static DEFAULT_TEXT_RESOLUTION_Y;
         /**
-         * Dimensions of the slate
+         * 2D dimensions of the slate
          */
-        dimensions: BABYLON.Vector3;
+        dimensions: BABYLON.Vector2;
         /**
          * Minimum dimensions of the slate
          */
-        minDimensions: BABYLON.Vector3;
+        minDimensions: BABYLON.Vector2;
         /**
          * Default dimensions of the slate
          */
-        readonly defaultDimensions: BABYLON.Vector3;
+        readonly defaultDimensions: BABYLON.Vector2;
         /**
-         * Dimensions of the backplate
+         * Height of the title bar component
          */
-        backplateDimensions: BABYLON.Vector3;
+        titleBarHeight: number;
         /**
-         * Margin between backplate and contentplate
+         * Margin between title bar and contentplate
          */
-        backPlateMargin: number;
+        titleBarMargin: number;
         /**
          * Origin in local coordinates (top left corner)
          */
         origin: BABYLON.Vector3;
-        private _backPlateMaterial;
+        private _titleBarMaterial;
         private _contentMaterial;
         private _pickedPointObserver;
         private _positionChangedObserver;
-        private _imageUrl;
+        private _titleText;
+        private _titleTextComponent;
         private _contentViewport;
         private _contentDragBehavior;
         private _defaultBehavior;
@@ -12529,21 +12582,22 @@ declare module BABYLON.GUI {
         get defaultBehavior(): DefaultBehavior;
         /** @hidden */
         _gizmo: SlateGizmo;
-        protected _backPlate: BABYLON.Mesh;
+        protected _titleBar: BABYLON.Mesh;
+        protected _titleBarTitle: BABYLON.Mesh;
         protected _contentPlate: BABYLON.Mesh;
         protected _followButton: TouchHolographicButton;
         protected _closeButton: TouchHolographicButton;
         protected _contentScaleRatio: number;
         /**
-         * Rendering ground id of all the mesh in the button
+         * Rendering ground id of all the meshes
          */
         set renderingGroupId(id: number);
         get renderingGroupId(): number;
         /**
-         * Gets or sets the image url for the button
+         * The title text displayed at the top of the slate
          */
-        get imageUrl(): string;
-        set imageUrl(value: string);
+        set title(title: string);
+        get title(): string;
         /**
          * Creates a new slate
          * @param name defines the control name
@@ -12555,7 +12609,6 @@ declare module BABYLON.GUI {
          * @param facadeTexture defines the AdvancedDynamicTexture to use
          */
         protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
-        private _rebuildContent;
         private _addControl;
         protected _getTypeName(): string;
         /**
@@ -12693,7 +12746,6 @@ declare module BABYLON.GUI {
          */
         private static PIN_ICON_FILENAME;
         private _pinButton;
-        private _pinMaterial;
         private _dragObserver;
         private _defaultBehavior;
         /**
@@ -13062,7 +13114,7 @@ declare module BABYLON.GUI {
          * @hidden
          */
         globalRightIndexMiddlePosition: BABYLON.Vector4;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -13398,7 +13450,7 @@ declare module BABYLON.GUI {
          * @hidden
          */
         globalRightIndexMiddlePosition: BABYLON.Vector4;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -13549,7 +13601,7 @@ declare module BABYLON.GUI {
          * Gets or sets the edge width of the backplate.
          */
         edgeLineGradientBlend: number;
-        constructor(name: string, scene: BABYLON.Scene);
+        constructor(name: string, scene?: BABYLON.Scene);
         needAlphaBlending(): boolean;
         needAlphaTesting(): boolean;
         getAlphaTestTexture(): BABYLON.Nullable<BABYLON.BaseTexture>;
@@ -13697,36 +13749,6 @@ declare module BABYLON.GUI {
         protected _affectMaterial(mesh: BABYLON.AbstractMesh): void;
     }
 }
-declare module BABYLON.GUI {
-    /**
-     * Class used as base class for touch-enabled toggleable buttons
-     */
-    export class TouchToggleButton3D extends TouchButton3D {
-        private _isPressed;
-        /**
-         * An event triggered when the button is toggled on
-         */
-        onToggleOnObservable: BABYLON.Observable<BABYLON.Vector3>;
-        /**
-         * An event triggered when the button is toggled off
-         */
-        onToggleOffObservable: BABYLON.Observable<BABYLON.Vector3>;
-        /**
-         * Creates a new button
-         * @param name defines the control name
-         * @param collisionMesh defines the mesh to track near interactions with
-         */
-        constructor(name?: string, collisionMesh?: BABYLON.Mesh);
-        private _onToggle;
-        protected _getTypeName(): string;
-        protected _createNode(scene: BABYLON.Scene): BABYLON.TransformNode;
-        protected _affectMaterial(mesh: BABYLON.AbstractMesh): void;
-        /**
-         * Releases all associated resources
-         */
-        dispose(): void;
-    }
-}
 declare module BABYLON.GUI {
     /**
      * Class used to create a holographic backplate in 3D