@babylonjs/gui 5.0.0-beta.1 → 5.0.0-beta.12

package/3D/controls/holographicSlate.d.ts

@@ -1,13 +1,13 @@
-import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
-import { Scene } from "@babylonjs/core/scene";
-import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
-import { Mesh } from "@babylonjs/core/Meshes/mesh";
-import { TouchHolographicButton } from "./touchHolographicButton";
-import { Vector3 } from "@babylonjs/core/Maths/math.vector";
 import { ContentDisplay3D } from "./contentDisplay3D";
+import { TouchHolographicButton } from "./touchHolographicButton";
 import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
-import { SlateGizmo } from "../gizmos/slateGizmo";
 import { DefaultBehavior } from "../behaviors/defaultBehavior";
+import { SlateGizmo } from "../gizmos/slateGizmo";
+import { Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
+import { Scene } from "@babylonjs/core/scene";
 /**
  * Class used to create a holographic slate
  * @since 5.0.0
@@ -25,35 +25,24 @@ export declare class HolographicSlate extends ContentDisplay3D {
      * File name for the close icon.
      */
     static FOLLOW_ICON_FILENAME: string;
+    private static DEFAULT_TEXT_RESOLUTION_Y;
     /**
-     * Dimensions of the slate
-     */
-    dimensions: Vector3;
-    /**
-     * Minimum dimensions of the slate
-     */
-    minDimensions: Vector3;
-    /**
-     * Default dimensions of the slate
+     * Margin between title bar and contentplate
      */
-    readonly defaultDimensions: Vector3;
-    /**
-     * Dimensions of the backplate
-     */
-    backplateDimensions: Vector3;
-    /**
-     * Margin between backplate and contentplate
-     */
-    backPlateMargin: number;
+    titleBarMargin: number;
     /**
      * Origin in local coordinates (top left corner)
      */
     origin: Vector3;
-    private _backPlateMaterial;
+    private _dimensions;
+    private _titleBarHeight;
+    private _titleBarMaterial;
+    private _backMaterial;
     private _contentMaterial;
     private _pickedPointObserver;
     private _positionChangedObserver;
-    private _imageUrl;
+    private _titleText;
+    private _titleTextComponent;
     private _contentViewport;
     private _contentDragBehavior;
     private _defaultBehavior;
@@ -63,21 +52,42 @@ export declare class HolographicSlate extends ContentDisplay3D {
     get defaultBehavior(): DefaultBehavior;
     /** @hidden */
     _gizmo: SlateGizmo;
-    protected _backPlate: Mesh;
+    protected _titleBar: Mesh;
+    protected _titleBarTitle: Mesh;
     protected _contentPlate: Mesh;
-    protected _followButton: TouchHolographicButton;
+    protected _backPlate: Mesh;
+    /** @hidden */
+    _followButton: TouchHolographicButton;
     protected _closeButton: TouchHolographicButton;
     protected _contentScaleRatio: number;
     /**
-     * Rendering ground id of all the mesh in the button
+     * 2D dimensions of the slate
+     */
+    get dimensions(): Vector2;
+    set dimensions(value: Vector2);
+    /**
+     * Minimum dimensions of the slate
+     */
+    minDimensions: Vector2;
+    /**
+     * Default dimensions of the slate
+     */
+    readonly defaultDimensions: Vector2;
+    /**
+     * Height of the title bar component
+     */
+    get titleBarHeight(): number;
+    set titleBarHeight(value: number);
+    /**
+     * 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
@@ -89,7 +99,6 @@ export declare class HolographicSlate extends ContentDisplay3D {
      * @param facadeTexture defines the AdvancedDynamicTexture to use
      */
     protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
-    private _rebuildContent;
     private _addControl;
     protected _getTypeName(): string;
     /**
@@ -109,8 +118,9 @@ export declare class HolographicSlate extends ContentDisplay3D {
     _prepareNode(scene: Scene): void;
     /**
      * Resets the aspect and pose of the slate so it is right in front of the active camera, facing towards it.
+     * @param resetAspect Should the slate's dimensions/aspect ratio be reset as well
      */
-    resetDefaultAspectAndPose(): void;
+    resetDefaultAspectAndPose(resetAspect?: boolean): void;
     /**
      * Releases all associated resources
      */

package/3D/controls/holographicSlate.js

@@ -1,19 +1,23 @@
 import { __extends } from "tslib";
-import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
-import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
-import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
-import { TouchHolographicButton } from "./touchHolographicButton.js";
-import { Quaternion, Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
 import { ContentDisplay3D } from "./contentDisplay3D.js";
-import { Image } from "../../2D/controls/image.js";
-import { SlateGizmo } from "../gizmos/slateGizmo.js";
+import { TouchHolographicButton } from "./touchHolographicButton.js";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture.js";
+import { Control } from "../../2D/controls/control.js";
+import { TextBlock, TextWrapping } from "../../2D/controls/textBlock.js";
 import { DefaultBehavior } from "../behaviors/defaultBehavior.js";
-import { Viewport } from "@babylonjs/core/Maths/math.viewport.js";
-import { PointerDragBehavior } from "@babylonjs/core/Behaviors/Meshes/pointerDragBehavior.js";
-import { Scalar } from "@babylonjs/core/Maths/math.scalar.js";
+import { SlateGizmo } from "../gizmos/slateGizmo.js";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
 import { FluentBackplateMaterial } from "../materials/fluentBackplate/fluentBackplateMaterial.js";
-import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
+import { PointerDragBehavior } from "@babylonjs/core/Behaviors/Meshes/pointerDragBehavior.js";
 import { Vector4 } from "@babylonjs/core/Maths/math.js";
+import { Epsilon } from "@babylonjs/core/Maths/math.constants.js";
+import { Scalar } from "@babylonjs/core/Maths/math.scalar.js";
+import { Quaternion, Vector2, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Viewport } from "@babylonjs/core/Maths/math.viewport.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import { VertexData } from "@babylonjs/core/Meshes/mesh.vertexData.js";
 /**
  * Class used to create a holographic slate
  * @since 5.0.0
@@ -27,31 +31,27 @@ var HolographicSlate = /** @class */ (function (_super) {
     function HolographicSlate(name) {
         var _this = _super.call(this, name) || this;
         /**
-         * Dimensions of the slate
+         * Margin between title bar and contentplate
          */
-        _this.dimensions = new Vector3(21.875, 12.5, 0.001);
+        _this.titleBarMargin = 0.005;
         /**
-         * Minimum dimensions of the slate
-         */
-        _this.minDimensions = new Vector3(15.625, 6.25, 0.001);
-        /**
-         * Default dimensions of the slate
-         */
-        _this.defaultDimensions = _this.dimensions.clone();
-        /**
-         * Dimensions of the backplate
+         * Origin in local coordinates (top left corner)
          */
-        _this.backplateDimensions = new Vector3(21.875, 0.625, 0.001);
+        _this.origin = new Vector3(0, 0, 0);
+        _this._dimensions = new Vector2(21.875, 12.5);
+        _this._titleBarHeight = 0.625;
+        _this._titleText = "";
+        _this._contentScaleRatio = 1;
         /**
-         * Margin between backplate and contentplate
+         * Minimum dimensions of the slate
          */
-        _this.backPlateMargin = 0.005;
+        _this.minDimensions = new Vector2(15.625, 6.25);
         /**
-         * Origin in local coordinates (top left corner)
+         * Default dimensions of the slate
          */
-        _this.origin = new Vector3(0, 0, 0);
-        _this._contentScaleRatio = 1;
+        _this.defaultDimensions = _this._dimensions.clone();
         _this._followButton = new TouchHolographicButton("followButton" + _this.name);
+        _this._followButton.isToggleButton = true;
         _this._closeButton = new TouchHolographicButton("closeButton" + _this.name);
         _this._contentViewport = new Viewport(0, 0, 1, 1);
         _this._contentDragBehavior = new PointerDragBehavior({
@@ -69,35 +69,76 @@ var HolographicSlate = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(HolographicSlate.prototype, "dimensions", {
+        /**
+         * 2D dimensions of the slate
+         */
+        get: function () {
+            return this._dimensions;
+        },
+        set: function (value) {
+            //clamp, respecting ratios
+            var scale = 1.0;
+            if (value.x < this.minDimensions.x || value.y < this.minDimensions.y) {
+                var newRatio = value.x / value.y;
+                var minRatio = this.minDimensions.x / this.minDimensions.y;
+                if (minRatio > newRatio) {
+                    // We just need to make sure the x-val is greater than the min
+                    scale = this.minDimensions.x / value.x;
+                }
+                else {
+                    // We just need to make sure the y-val is greater than the min
+                    scale = this.minDimensions.y / value.y;
+                }
+            }
+            this._dimensions.copyFrom(value).scaleInPlace(scale);
+            this._updatePivot();
+            this._positionElements();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(HolographicSlate.prototype, "titleBarHeight", {
+        /**
+         * Height of the title bar component
+         */
+        get: function () {
+            return this._titleBarHeight;
+        },
+        set: function (value) {
+            this._titleBarHeight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(HolographicSlate.prototype, "renderingGroupId", {
         get: function () {
-            return this._backPlate.renderingGroupId;
+            return this._titleBar.renderingGroupId;
         },
         /**
-         * Rendering ground id of all the mesh in the button
+         * Rendering ground id of all the meshes
          */
         set: function (id) {
-            this._backPlate.renderingGroupId = id;
+            this._titleBar.renderingGroupId = id;
+            this._titleBarTitle.renderingGroupId = id;
             this._contentPlate.renderingGroupId = id;
+            this._backPlate.renderingGroupId = id;
         },
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(HolographicSlate.prototype, "imageUrl", {
-        /**
-         * Gets or sets the image url for the button
-         */
+    Object.defineProperty(HolographicSlate.prototype, "title", {
         get: function () {
-            return this._imageUrl;
+            return this._titleText;
         },
-        set: function (value) {
-            if (this._imageUrl === value) {
-                return;
+        /**
+         * The title text displayed at the top of the slate
+         */
+        set: function (title) {
+            this._titleText = title;
+            if (this._titleTextComponent) {
+                this._titleTextComponent.text = title;
             }
-            this._imageUrl = value;
-            this._rebuildContent();
-            this._resetContentPositionAndZoom();
-            this._applyContentViewport();
         },
         enumerable: false,
         configurable: true
@@ -109,18 +150,9 @@ var HolographicSlate = /** @class */ (function (_super) {
      */
     HolographicSlate.prototype._applyFacade = function (facadeTexture) {
         this._contentMaterial.albedoTexture = facadeTexture;
-    };
-    HolographicSlate.prototype._rebuildContent = function () {
-        this._disposeFacadeTexture();
-        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
-            if (this._imageUrl) {
-                var image = new Image();
-                image.source = this._imageUrl;
-                if (this._contentPlate) {
-                    this.content = image;
-                }
-            }
-        }
+        this._resetContentPositionAndZoom();
+        this._applyContentViewport();
+        facadeTexture.attachToMesh(this._contentPlate, true);
     };
     HolographicSlate.prototype._addControl = function (control) {
         control._host = this._host;
@@ -135,36 +167,45 @@ var HolographicSlate = /** @class */ (function (_super) {
      * @hidden
      */
     HolographicSlate.prototype._positionElements = function () {
-        var followButtonMesh = this._followButton.mesh;
-        var closeButtonMesh = this._closeButton.mesh;
-        var backPlate = this._backPlate;
+        var followButton = this._followButton;
+        var closeButton = this._closeButton;
+        var titleBar = this._titleBar;
+        var titleBarTitle = this._titleBarTitle;
         var contentPlate = this._contentPlate;
-        if (followButtonMesh && closeButtonMesh && backPlate) {
-            // World size of a button with 1 scaling
-            var buttonBaseSize = 1;
-            // Buttons take full backPlate on Y axis
-            var backPlateYScale = this.backplateDimensions.y / buttonBaseSize;
-            closeButtonMesh.scaling.setAll(backPlateYScale);
-            followButtonMesh.scaling.setAll(backPlateYScale);
-            closeButtonMesh.position
-                .copyFromFloats(this.backplateDimensions.x - backPlateYScale / 2, -this.backplateDimensions.y / 2, (-this.backplateDimensions.z / 2) * (this._host.scene.useRightHandedSystem ? -1 : 1))
+        var backPlate = this._backPlate;
+        if (followButton && closeButton && titleBar) {
+            closeButton.scaling.setAll(this.titleBarHeight);
+            followButton.scaling.setAll(this.titleBarHeight);
+            closeButton.position
+                .copyFromFloats(this.dimensions.x - this.titleBarHeight / 2, -this.titleBarHeight / 2, 0)
                 .addInPlace(this.origin);
-            followButtonMesh.position
-                .copyFromFloats(this.backplateDimensions.x - (3 * backPlateYScale) / 2, -this.backplateDimensions.y / 2, (-this.backplateDimensions.z / 2) * (this._host.scene.useRightHandedSystem ? -1 : 1))
+            followButton.position
+                .copyFromFloats(this.dimensions.x - (3 * this.titleBarHeight) / 2, -this.titleBarHeight / 2, 0)
                 .addInPlace(this.origin);
-            var contentPlateHeight = this.dimensions.y - this.backplateDimensions.y - this.backPlateMargin;
-            backPlate.scaling.copyFrom(this.backplateDimensions);
-            contentPlate.scaling.copyFromFloats(this.dimensions.x, contentPlateHeight, this.dimensions.z);
-            backPlate.position.copyFromFloats(this.backplateDimensions.x / 2, -(this.backplateDimensions.y / 2), 0).addInPlace(this.origin);
-            contentPlate.position.copyFromFloats(this.dimensions.x / 2, -(this.backplateDimensions.y + this.backPlateMargin + contentPlateHeight / 2), 0).addInPlace(this.origin);
+            var contentPlateHeight = this.dimensions.y - this.titleBarHeight - this.titleBarMargin;
+            var rightHandScene = contentPlate.getScene().useRightHandedSystem;
+            titleBar.scaling.set(this.dimensions.x, this.titleBarHeight, Epsilon);
+            titleBarTitle.scaling.set(this.dimensions.x - (2 * this.titleBarHeight), this.titleBarHeight, Epsilon);
+            contentPlate.scaling.copyFromFloats(this.dimensions.x, contentPlateHeight, Epsilon);
+            backPlate.scaling.copyFromFloats(this.dimensions.x, contentPlateHeight, Epsilon);
+            titleBar.position.copyFromFloats(this.dimensions.x / 2, -(this.titleBarHeight / 2), 0).addInPlace(this.origin);
+            titleBarTitle.position.copyFromFloats((this.dimensions.x / 2) - this.titleBarHeight, -(this.titleBarHeight / 2), rightHandScene ? Epsilon : -Epsilon).addInPlace(this.origin);
+            contentPlate.position.copyFromFloats(this.dimensions.x / 2, -(this.titleBarHeight + this.titleBarMargin + contentPlateHeight / 2), 0).addInPlace(this.origin);
+            backPlate.position.copyFromFloats(this.dimensions.x / 2, -(this.titleBarHeight + this.titleBarMargin + contentPlateHeight / 2), rightHandScene ? -Epsilon : Epsilon).addInPlace(this.origin);
+            // Update the title's AdvancedDynamicTexture scale to avoid visual stretching
+            this._titleTextComponent.host.scaleTo(HolographicSlate.DEFAULT_TEXT_RESOLUTION_Y * titleBarTitle.scaling.x / titleBarTitle.scaling.y, HolographicSlate.DEFAULT_TEXT_RESOLUTION_Y);
             var aspectRatio = this.dimensions.x / contentPlateHeight;
             this._contentViewport.width = this._contentScaleRatio;
             this._contentViewport.height = this._contentScaleRatio / aspectRatio;
             this._applyContentViewport();
+            if (this._gizmo) {
+                this._gizmo.updateBoundingBox();
+            }
         }
     };
     HolographicSlate.prototype._applyContentViewport = function () {
-        if (this._contentPlate.material && this._contentPlate.material.albedoTexture) {
+        var _a;
+        if (((_a = this._contentPlate) === null || _a === void 0 ? void 0 : _a.material) && this._contentPlate.material.albedoTexture) {
             var tex = this._contentPlate.material.albedoTexture;
             tex.uScale = this._contentScaleRatio;
             tex.vScale = (this._contentScaleRatio / this._contentViewport.width) * this._contentViewport.height;
@@ -185,9 +226,8 @@ var HolographicSlate = /** @class */ (function (_super) {
             return;
         }
         // Update pivot point so it is at the center of geometry
-        var center = this.dimensions.scale(0.5);
         // As origin is topleft corner in 2D, dimensions are calculated towards bottom right corner, thus y axis is downwards
-        center.y *= -1;
+        var center = new Vector3(this.dimensions.x * 0.5, -this.dimensions.y * 0.5, Epsilon);
         center.addInPlace(this.origin);
         center.z = 0;
         var origin = new Vector3(0, 0, 0);
@@ -200,30 +240,47 @@ var HolographicSlate = /** @class */ (function (_super) {
     // Mesh association
     HolographicSlate.prototype._createNode = function (scene) {
         var _this = this;
-        var node = new Mesh("slate" + this.name, scene);
-        this._backPlate = CreateBox("backPlate" + this.name, { size: 1 }, scene);
-        var faceUV = new Array(6).fill(new Vector4(0, 0, 1, 1));
+        var node = new Mesh("slate_" + this.name, scene);
+        this._titleBar = CreateBox("titleBar_" + this.name, { size: 1 }, scene);
+        this._titleBarTitle = CreatePlane("titleText_" + this.name, { size: 1 }, scene);
+        this._titleBarTitle.parent = node;
+        this._titleBarTitle.isPickable = false;
+        var adt = AdvancedDynamicTexture.CreateForMesh(this._titleBarTitle);
+        this._titleTextComponent = new TextBlock("titleText_" + this.name, this._titleText);
+        this._titleTextComponent.textWrapping = TextWrapping.Ellipsis;
+        this._titleTextComponent.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._titleTextComponent.color = "white";
+        this._titleTextComponent.fontSize = HolographicSlate.DEFAULT_TEXT_RESOLUTION_Y / 2;
+        this._titleTextComponent.paddingLeft = HolographicSlate.DEFAULT_TEXT_RESOLUTION_Y / 4;
+        adt.addControl(this._titleTextComponent);
         if (scene.useRightHandedSystem) {
-            faceUV[0].copyFromFloats(0, 1, 1, 0);
+            var faceUV = new Vector4(0, 0, 1, 1);
+            this._contentPlate = CreatePlane("contentPlate_" + this.name, { size: 1, sideOrientation: VertexData.BACKSIDE, frontUVs: faceUV }, scene);
+            this._backPlate = CreatePlane("backPlate_" + this.name, { size: 1, sideOrientation: VertexData.FRONTSIDE }, scene);
         }
-        this._contentPlate = CreateBox("contentPlate" + this.name, { size: 1, faceUV: faceUV }, scene);
-        this._backPlate.parent = node;
-        this._backPlate.isNearGrabbable = true;
+        else {
+            var faceUV = new Vector4(0, 0, 1, 1);
+            this._contentPlate = CreatePlane("contentPlate_" + this.name, { size: 1, sideOrientation: VertexData.FRONTSIDE, frontUVs: faceUV }, scene);
+            this._backPlate = CreatePlane("backPlate_" + this.name, { size: 1, sideOrientation: VertexData.BACKSIDE }, scene);
+        }
+        this._titleBar.parent = node;
+        this._titleBar.isNearGrabbable = true;
         this._contentPlate.parent = node;
+        this._backPlate.parent = node;
         this._attachContentPlateBehavior();
         this._addControl(this._followButton);
         this._addControl(this._closeButton);
-        var followButtonMesh = this._followButton.mesh;
-        var closeButtonMesh = this._closeButton.mesh;
-        followButtonMesh.parent = node;
-        closeButtonMesh.parent = node;
+        var followButton = this._followButton;
+        var closeButton = this._closeButton;
+        followButton.node.parent = node;
+        closeButton.node.parent = node;
         this._positionElements();
         this._followButton.imageUrl = HolographicSlate.ASSETS_BASE_URL + HolographicSlate.FOLLOW_ICON_FILENAME;
         this._closeButton.imageUrl = HolographicSlate.ASSETS_BASE_URL + HolographicSlate.CLOSE_ICON_FILENAME;
         this._followButton.isBackplateVisible = false;
         this._closeButton.isBackplateVisible = false;
-        this._followButton.onPointerClickObservable.add(function () {
-            _this._defaultBehavior.followBehaviorEnabled = !_this._defaultBehavior.followBehaviorEnabled;
+        this._followButton.onToggleObservable.add(function (isToggled) {
+            _this._defaultBehavior.followBehaviorEnabled = isToggled;
             if (_this._defaultBehavior.followBehaviorEnabled) {
                 _this._defaultBehavior.followBehavior.recenter();
             }
@@ -255,8 +312,8 @@ var HolographicSlate = /** @class */ (function (_super) {
             startViewport = _this._contentViewport.clone();
             worldMatrix = _this.node.computeWorldMatrix(true);
             origin.copyFrom(event.dragPlanePoint);
-            worldDimensions.copyFrom(_this.dimensions);
-            worldDimensions.y -= _this.backplateDimensions.y + _this.backPlateMargin;
+            worldDimensions.set(_this.dimensions.x, _this.dimensions.y, Epsilon);
+            worldDimensions.y -= _this.titleBarHeight + _this.titleBarMargin;
             Vector3.TransformNormalToRef(worldDimensions, worldMatrix, worldDimensions);
             upWorld.copyFromFloats(0, 1, 0);
             Vector3.TransformNormalToRef(upWorld, worldMatrix, upWorld);
@@ -280,20 +337,17 @@ var HolographicSlate = /** @class */ (function (_super) {
     };
     HolographicSlate.prototype._affectMaterial = function (mesh) {
         // TODO share materials
-        this._backPlateMaterial = new FluentBackplateMaterial(this.name + " plateMaterial", mesh.getScene());
-        this._pickedPointObserver = this._host.onPickedPointChangedObservable.add(function (pickedPoint) {
-            // if (pickedPoint) {
-            //     this._backPlateMaterial. = pickedPoint;
-            //     this._backPlateMaterial.hoverColor.a = 1.0;
-            // } else {
-            //     this._backPlateMaterial.hoverColor.a = 0;
-            // }
-        });
-        this._contentMaterial = new FluentMaterial(this.name + "contentMaterial", mesh.getScene());
+        this._titleBarMaterial = new FluentBackplateMaterial("".concat(this.name, " plateMaterial"), mesh.getScene());
+        this._contentMaterial = new FluentMaterial("".concat(this.name, " contentMaterial"), mesh.getScene());
         this._contentMaterial.renderBorders = true;
-        this._backPlate.material = this._backPlateMaterial;
+        this._backMaterial = new FluentBackplateMaterial("".concat(this.name, " backPlate"), mesh.getScene());
+        this._backMaterial.lineWidth = Epsilon;
+        this._backMaterial.radius = 0.005;
+        this._backMaterial.backFaceCulling = true;
+        this._titleBar.material = this._titleBarMaterial;
         this._contentPlate.material = this._contentMaterial;
-        this._rebuildContent();
+        this._backPlate.material = this._backMaterial;
+        this._resetContent();
         this._applyContentViewport();
     };
     /** @hidden **/
@@ -303,17 +357,22 @@ var HolographicSlate = /** @class */ (function (_super) {
         this._gizmo = new SlateGizmo(this._host.utilityLayer);
         this._gizmo.attachedSlate = this;
         this._defaultBehavior = new DefaultBehavior();
-        this._defaultBehavior.attach(this.node, [this._backPlate]);
+        this._defaultBehavior.attach(this.node, [this._titleBar]);
+        this._defaultBehavior.sixDofDragBehavior.onDragStartObservable.add(function () {
+            _this._followButton.isToggled = false;
+        });
         this._positionChangedObserver = this._defaultBehavior.sixDofDragBehavior.onPositionChangedObservable.add(function () {
             _this._gizmo.updateBoundingBox();
         });
         this._updatePivot();
-        this.resetDefaultAspectAndPose();
+        this.resetDefaultAspectAndPose(false);
     };
     /**
      * Resets the aspect and pose of the slate so it is right in front of the active camera, facing towards it.
+     * @param resetAspect Should the slate's dimensions/aspect ratio be reset as well
      */
-    HolographicSlate.prototype.resetDefaultAspectAndPose = function () {
+    HolographicSlate.prototype.resetDefaultAspectAndPose = function (resetAspect) {
+        if (resetAspect === void 0) { resetAspect = true; }
         if (!this._host || !this._host.utilityLayer || !this.node) {
             return;
         }
@@ -322,12 +381,14 @@ var HolographicSlate = /** @class */ (function (_super) {
         if (camera) {
             var worldMatrix = camera.getWorldMatrix();
             var backward = Vector3.TransformNormal(Vector3.Backward(scene.useRightHandedSystem), worldMatrix);
-            this.dimensions.copyFrom(this.defaultDimensions);
             this.origin.setAll(0);
             this._gizmo.updateBoundingBox();
             var pivot = this.node.getAbsolutePivotPoint();
             this.node.position.copyFrom(camera.position).subtractInPlace(backward).subtractInPlace(pivot);
             this.node.rotationQuaternion = Quaternion.FromLookDirectionLH(backward, new Vector3(0, 1, 0));
+            if (resetAspect) {
+                this.dimensions = this.defaultDimensions;
+            }
         }
     };
     /**
@@ -335,10 +396,12 @@ var HolographicSlate = /** @class */ (function (_super) {
      */
     HolographicSlate.prototype.dispose = function () {
         _super.prototype.dispose.call(this);
-        this._backPlateMaterial.dispose();
+        this._titleBarMaterial.dispose();
         this._contentMaterial.dispose();
-        this._backPlate.dispose();
+        this._titleBar.dispose();
+        this._titleBarTitle.dispose();
         this._contentPlate.dispose();
+        this._backPlate.dispose();
         this._followButton.dispose();
         this._closeButton.dispose();
         this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
@@ -359,6 +422,7 @@ var HolographicSlate = /** @class */ (function (_super) {
      * File name for the close icon.
      */
     HolographicSlate.FOLLOW_ICON_FILENAME = "IconFollowMe.png";
+    HolographicSlate.DEFAULT_TEXT_RESOLUTION_Y = 102.4;
     return HolographicSlate;
 }(ContentDisplay3D));
 export { HolographicSlate };