@babylonjs/gui 5.0.0-beta.9 → 5.0.0-rc.10

package/3D/controls/holographicSlate.js

@@ -1,370 +1,432 @@
-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 { 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 { FluentBackplateMaterial } from "../materials/fluentBackplate/fluentBackplateMaterial.js";
-import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
-import { Vector4 } from "@babylonjs/core/Maths/math.js";
-/**
- * Class used to create a holographic slate
- * @since 5.0.0
- */
-var HolographicSlate = /** @class */ (function (_super) {
-    __extends(HolographicSlate, _super);
-    /**
-     * Creates a new slate
-     * @param name defines the control name
-     */
-    function HolographicSlate(name) {
-        var _this = _super.call(this, name) || this;
-        /**
-         * Dimensions of the slate
-         */
-        _this.dimensions = new Vector3(21.875, 12.5, 0.001);
-        /**
-         * 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
-         */
-        _this.backplateDimensions = new Vector3(21.875, 0.625, 0.001);
-        /**
-         * Margin between backplate and contentplate
-         */
-        _this.backPlateMargin = 0.005;
-        /**
-         * Origin in local coordinates (top left corner)
-         */
-        _this.origin = new Vector3(0, 0, 0);
-        _this._contentScaleRatio = 1;
-        _this._followButton = new TouchHolographicButton("followButton" + _this.name);
-        _this._closeButton = new TouchHolographicButton("closeButton" + _this.name);
-        _this._contentViewport = new Viewport(0, 0, 1, 1);
-        _this._contentDragBehavior = new PointerDragBehavior({
-            dragPlaneNormal: new Vector3(0, 0, -1),
-        });
-        return _this;
-    }
-    Object.defineProperty(HolographicSlate.prototype, "defaultBehavior", {
-        /**
-         * Regroups all mesh behaviors for the slate
-         */
-        get: function () {
-            return this._defaultBehavior;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(HolographicSlate.prototype, "renderingGroupId", {
-        get: function () {
-            return this._backPlate.renderingGroupId;
-        },
-        /**
-         * Rendering ground id of all the mesh in the button
-         */
-        set: function (id) {
-            this._backPlate.renderingGroupId = id;
-            this._contentPlate.renderingGroupId = id;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(HolographicSlate.prototype, "imageUrl", {
-        /**
-         * Gets or sets the image url for the button
-         */
-        get: function () {
-            return this._imageUrl;
-        },
-        set: function (value) {
-            if (this._imageUrl === value) {
-                return;
-            }
-            this._imageUrl = value;
-            this._rebuildContent();
-            this._resetContentPositionAndZoom();
-            this._applyContentViewport();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * Apply the facade texture (created from the content property).
-     * This function can be overloaded by child classes
-     * @param facadeTexture defines the AdvancedDynamicTexture to use
-     */
-    HolographicSlate.prototype._applyFacade = function (facadeTexture) {
-        this._contentMaterial.albedoTexture = facadeTexture;
-        // We should have a content plate by this point, but check for safety
-        if (this._contentPlate) {
-            facadeTexture.attachToMesh(this._contentPlate, true);
-        }
-    };
-    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;
-                }
-            }
-        }
-    };
-    HolographicSlate.prototype._addControl = function (control) {
-        control._host = this._host;
-        if (this._host.utilityLayer) {
-            control._prepareNode(this._host.utilityLayer.utilityLayerScene);
-        }
-    };
-    HolographicSlate.prototype._getTypeName = function () {
-        return "HolographicSlate";
-    };
-    /**
-     * @hidden
-     */
-    HolographicSlate.prototype._positionElements = function () {
-        var followButtonMesh = this._followButton.mesh;
-        var closeButtonMesh = this._closeButton.mesh;
-        var backPlate = this._backPlate;
-        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))
-                .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))
-                .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 aspectRatio = this.dimensions.x / contentPlateHeight;
-            this._contentViewport.width = this._contentScaleRatio;
-            this._contentViewport.height = this._contentScaleRatio / aspectRatio;
-            this._applyContentViewport();
-        }
-    };
-    HolographicSlate.prototype._applyContentViewport = function () {
-        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;
-            tex.uOffset = this._contentViewport.x;
-            tex.vOffset = this._contentViewport.y;
-        }
-    };
-    HolographicSlate.prototype._resetContentPositionAndZoom = function () {
-        this._contentViewport.x = 0;
-        this._contentViewport.y = 1 - this._contentViewport.height / this._contentViewport.width;
-        this._contentScaleRatio = 1;
-    };
-    /**
-     * @hidden
-     */
-    HolographicSlate.prototype._updatePivot = function () {
-        if (!this.mesh) {
-            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;
-        center.addInPlace(this.origin);
-        center.z = 0;
-        var origin = new Vector3(0, 0, 0);
-        Vector3.TransformCoordinatesToRef(origin, this.mesh.computeWorldMatrix(true), origin);
-        this.mesh.setPivotPoint(center);
-        var origin2 = new Vector3(0, 0, 0);
-        Vector3.TransformCoordinatesToRef(origin2, this.mesh.computeWorldMatrix(true), origin2);
-        this.mesh.position.addInPlace(origin).subtractInPlace(origin2);
-    };
-    // 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));
-        if (scene.useRightHandedSystem) {
-            faceUV[0].copyFromFloats(0, 1, 1, 0);
-        }
-        this._contentPlate = CreateBox("contentPlate" + this.name, { size: 1, faceUV: faceUV }, scene);
-        this._backPlate.parent = node;
-        this._backPlate.isNearGrabbable = true;
-        this._contentPlate.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;
-        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;
-            if (_this._defaultBehavior.followBehaviorEnabled) {
-                _this._defaultBehavior.followBehavior.recenter();
-            }
-        });
-        this._closeButton.onPointerClickObservable.add(function () {
-            _this.dispose();
-        });
-        node.rotationQuaternion = Quaternion.Identity();
-        node.isVisible = false;
-        return node;
-    };
-    HolographicSlate.prototype._attachContentPlateBehavior = function () {
-        var _this = this;
-        this._contentDragBehavior.attach(this._contentPlate);
-        this._contentDragBehavior.moveAttached = false;
-        this._contentDragBehavior.useObjectOrientationForDragging = true;
-        this._contentDragBehavior.updateDragPlane = false;
-        var origin = new Vector3();
-        var worldDimensions = new Vector3();
-        var upWorld = new Vector3();
-        var rightWorld = new Vector3();
-        var projectedOffset = new Vector2();
-        var startViewport;
-        var worldMatrix;
-        this._contentDragBehavior.onDragStartObservable.add(function (event) {
-            if (!_this.node) {
-                return;
-            }
-            startViewport = _this._contentViewport.clone();
-            worldMatrix = _this.node.computeWorldMatrix(true);
-            origin.copyFrom(event.dragPlanePoint);
-            worldDimensions.copyFrom(_this.dimensions);
-            worldDimensions.y -= _this.backplateDimensions.y + _this.backPlateMargin;
-            Vector3.TransformNormalToRef(worldDimensions, worldMatrix, worldDimensions);
-            upWorld.copyFromFloats(0, 1, 0);
-            Vector3.TransformNormalToRef(upWorld, worldMatrix, upWorld);
-            rightWorld.copyFromFloats(1, 0, 0);
-            Vector3.TransformNormalToRef(rightWorld, worldMatrix, rightWorld);
-            upWorld.normalize();
-            upWorld.scaleInPlace(1 / Vector3.Dot(upWorld, worldDimensions));
-            rightWorld.normalize();
-            rightWorld.scaleInPlace(1 / Vector3.Dot(rightWorld, worldDimensions));
-        });
-        var offset = new Vector3();
-        this._contentDragBehavior.onDragObservable.add(function (event) {
-            offset.copyFrom(event.dragPlanePoint);
-            offset.subtractInPlace(origin);
-            projectedOffset.copyFromFloats(Vector3.Dot(offset, rightWorld), Vector3.Dot(offset, upWorld));
-            // By default, content takes full width available and height is cropped to keep aspect ratio
-            _this._contentViewport.x = Scalar.Clamp(startViewport.x - offset.x, 0, 1 - _this._contentViewport.width * _this._contentScaleRatio);
-            _this._contentViewport.y = Scalar.Clamp(startViewport.y - offset.y, 0, 1 - _this._contentViewport.height * _this._contentScaleRatio);
-            _this._applyContentViewport();
-        });
-    };
-    HolographicSlate.prototype._affectMaterial = function (mesh) {
-        // TODO share materials
-        this._backPlateMaterial = new FluentBackplateMaterial("".concat(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._contentMaterial.renderBorders = true;
-        this._backPlate.material = this._backPlateMaterial;
-        this._contentPlate.material = this._contentMaterial;
-        this._rebuildContent();
-        this._applyContentViewport();
-    };
-    /** @hidden **/
-    HolographicSlate.prototype._prepareNode = function (scene) {
-        var _this = this;
-        _super.prototype._prepareNode.call(this, scene);
-        this._gizmo = new SlateGizmo(this._host.utilityLayer);
-        this._gizmo.attachedSlate = this;
-        this._defaultBehavior = new DefaultBehavior();
-        this._defaultBehavior.attach(this.node, [this._backPlate]);
-        this._positionChangedObserver = this._defaultBehavior.sixDofDragBehavior.onPositionChangedObservable.add(function () {
-            _this._gizmo.updateBoundingBox();
-        });
-        this._updatePivot();
-        this.resetDefaultAspectAndPose();
-    };
-    /**
-     * Resets the aspect and pose of the slate so it is right in front of the active camera, facing towards it.
-     */
-    HolographicSlate.prototype.resetDefaultAspectAndPose = function () {
-        if (!this._host || !this._host.utilityLayer || !this.node) {
-            return;
-        }
-        var scene = this._host.utilityLayer.utilityLayerScene;
-        var camera = scene.activeCamera;
-        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));
-        }
-    };
-    /**
-     * Releases all associated resources
-     */
-    HolographicSlate.prototype.dispose = function () {
-        _super.prototype.dispose.call(this);
-        this._backPlateMaterial.dispose();
-        this._contentMaterial.dispose();
-        this._backPlate.dispose();
-        this._contentPlate.dispose();
-        this._followButton.dispose();
-        this._closeButton.dispose();
-        this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
-        this._defaultBehavior.sixDofDragBehavior.onPositionChangedObservable.remove(this._positionChangedObserver);
-        this._defaultBehavior.detach();
-        this._gizmo.dispose();
-        this._contentDragBehavior.detach();
-    };
-    /**
-     * Base Url for the assets.
-     */
-    HolographicSlate.ASSETS_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
-    /**
-     * File name for the close icon.
-     */
-    HolographicSlate.CLOSE_ICON_FILENAME = "IconClose.png";
-    /**
-     * File name for the close icon.
-     */
-    HolographicSlate.FOLLOW_ICON_FILENAME = "IconFollowMe.png";
-    return HolographicSlate;
-}(ContentDisplay3D));
-export { HolographicSlate };
+import { __extends } from "tslib";
+import { ContentDisplay3D } from "./contentDisplay3D";
+import { TouchHolographicButton } from "./touchHolographicButton";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
+import { Control } from "../../2D/controls/control";
+import { TextBlock, TextWrapping } from "../../2D/controls/textBlock";
+import { DefaultBehavior } from "../behaviors/defaultBehavior";
+import { SlateGizmo } from "../gizmos/slateGizmo";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial";
+import { FluentBackplateMaterial } from "../materials/fluentBackplate/fluentBackplateMaterial";
+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
+ */
+var HolographicSlate = /** @class */ (function (_super) {
+    __extends(HolographicSlate, _super);
+    /**
+     * Creates a new slate
+     * @param name defines the control name
+     */
+    function HolographicSlate(name) {
+        var _this = _super.call(this, name) || this;
+        /**
+         * Margin between title bar and contentplate
+         */
+        _this.titleBarMargin = 0.005;
+        /**
+         * Origin in local coordinates (top left corner)
+         */
+        _this.origin = new Vector3(0, 0, 0);
+        _this._dimensions = new Vector2(21.875, 12.5);
+        _this._titleBarHeight = 0.625;
+        _this._titleText = "";
+        _this._contentScaleRatio = 1;
+        /**
+         * Minimum dimensions of the slate
+         */
+        _this.minDimensions = new Vector2(15.625, 6.25);
+        /**
+         * Default dimensions of the slate
+         */
+        _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({
+            dragPlaneNormal: new Vector3(0, 0, -1),
+        });
+        return _this;
+    }
+    Object.defineProperty(HolographicSlate.prototype, "defaultBehavior", {
+        /**
+         * Regroups all mesh behaviors for the slate
+         */
+        get: function () {
+            return this._defaultBehavior;
+        },
+        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._titleBar.renderingGroupId;
+        },
+        /**
+         * Rendering ground id of all the meshes
+         */
+        set: function (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, "title", {
+        get: function () {
+            return this._titleText;
+        },
+        /**
+         * The title text displayed at the top of the slate
+         */
+        set: function (title) {
+            this._titleText = title;
+            if (this._titleTextComponent) {
+                this._titleTextComponent.text = title;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * Apply the facade texture (created from the content property).
+     * This function can be overloaded by child classes
+     * @param facadeTexture defines the AdvancedDynamicTexture to use
+     */
+    HolographicSlate.prototype._applyFacade = function (facadeTexture) {
+        this._contentMaterial.albedoTexture = facadeTexture;
+        this._resetContentPositionAndZoom();
+        this._applyContentViewport();
+        facadeTexture.attachToMesh(this._contentPlate, true);
+    };
+    HolographicSlate.prototype._addControl = function (control) {
+        control._host = this._host;
+        if (this._host.utilityLayer) {
+            control._prepareNode(this._host.utilityLayer.utilityLayerScene);
+        }
+    };
+    HolographicSlate.prototype._getTypeName = function () {
+        return "HolographicSlate";
+    };
+    /**
+     * @hidden
+     */
+    HolographicSlate.prototype._positionElements = function () {
+        var followButton = this._followButton;
+        var closeButton = this._closeButton;
+        var titleBar = this._titleBar;
+        var titleBarTitle = this._titleBarTitle;
+        var contentPlate = this._contentPlate;
+        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);
+            followButton.position.copyFromFloats(this.dimensions.x - (3 * this.titleBarHeight) / 2, -this.titleBarHeight / 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 () {
+        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;
+            tex.uOffset = this._contentViewport.x;
+            tex.vOffset = this._contentViewport.y;
+        }
+    };
+    HolographicSlate.prototype._resetContentPositionAndZoom = function () {
+        this._contentViewport.x = 0;
+        this._contentViewport.y = 1 - this._contentViewport.height / this._contentViewport.width;
+        this._contentScaleRatio = 1;
+    };
+    /**
+     * @hidden
+     */
+    HolographicSlate.prototype._updatePivot = function () {
+        if (!this.mesh) {
+            return;
+        }
+        // Update pivot point so it is at the center of geometry
+        // As origin is topleft corner in 2D, dimensions are calculated towards bottom right corner, thus y axis is downwards
+        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);
+        Vector3.TransformCoordinatesToRef(origin, this.mesh.computeWorldMatrix(true), origin);
+        this.mesh.setPivotPoint(center);
+        var origin2 = new Vector3(0, 0, 0);
+        Vector3.TransformCoordinatesToRef(origin2, this.mesh.computeWorldMatrix(true), origin2);
+        this.mesh.position.addInPlace(origin).subtractInPlace(origin2);
+    };
+    // Mesh association
+    HolographicSlate.prototype._createNode = function (scene) {
+        var _this = this;
+        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) {
+            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);
+        }
+        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 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.onToggleObservable.add(function (isToggled) {
+            _this._defaultBehavior.followBehaviorEnabled = isToggled;
+            if (_this._defaultBehavior.followBehaviorEnabled) {
+                _this._defaultBehavior.followBehavior.recenter();
+            }
+        });
+        this._closeButton.onPointerClickObservable.add(function () {
+            _this.dispose();
+        });
+        node.rotationQuaternion = Quaternion.Identity();
+        node.isVisible = false;
+        return node;
+    };
+    HolographicSlate.prototype._attachContentPlateBehavior = function () {
+        var _this = this;
+        this._contentDragBehavior.attach(this._contentPlate);
+        this._contentDragBehavior.moveAttached = false;
+        this._contentDragBehavior.useObjectOrientationForDragging = true;
+        this._contentDragBehavior.updateDragPlane = false;
+        var origin = new Vector3();
+        var worldDimensions = new Vector3();
+        var upWorld = new Vector3();
+        var rightWorld = new Vector3();
+        var projectedOffset = new Vector2();
+        var startViewport;
+        var worldMatrix;
+        this._contentDragBehavior.onDragStartObservable.add(function (event) {
+            if (!_this.node) {
+                return;
+            }
+            startViewport = _this._contentViewport.clone();
+            worldMatrix = _this.node.computeWorldMatrix(true);
+            origin.copyFrom(event.dragPlanePoint);
+            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);
+            rightWorld.copyFromFloats(1, 0, 0);
+            Vector3.TransformNormalToRef(rightWorld, worldMatrix, rightWorld);
+            upWorld.normalize();
+            upWorld.scaleInPlace(1 / Vector3.Dot(upWorld, worldDimensions));
+            rightWorld.normalize();
+            rightWorld.scaleInPlace(1 / Vector3.Dot(rightWorld, worldDimensions));
+        });
+        var offset = new Vector3();
+        this._contentDragBehavior.onDragObservable.add(function (event) {
+            offset.copyFrom(event.dragPlanePoint);
+            offset.subtractInPlace(origin);
+            projectedOffset.copyFromFloats(Vector3.Dot(offset, rightWorld), Vector3.Dot(offset, upWorld));
+            // By default, content takes full width available and height is cropped to keep aspect ratio
+            _this._contentViewport.x = Scalar.Clamp(startViewport.x - offset.x, 0, 1 - _this._contentViewport.width * _this._contentScaleRatio);
+            _this._contentViewport.y = Scalar.Clamp(startViewport.y - offset.y, 0, 1 - _this._contentViewport.height * _this._contentScaleRatio);
+            _this._applyContentViewport();
+        });
+    };
+    HolographicSlate.prototype._affectMaterial = function (mesh) {
+        // TODO share materials
+        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._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._backPlate.material = this._backMaterial;
+        this._resetContent();
+        this._applyContentViewport();
+    };
+    /**
+     * @param scene
+     * @hidden*
+     */
+    HolographicSlate.prototype._prepareNode = function (scene) {
+        var _this = this;
+        _super.prototype._prepareNode.call(this, scene);
+        this._gizmo = new SlateGizmo(this._host.utilityLayer);
+        this._gizmo.attachedSlate = this;
+        this._defaultBehavior = new DefaultBehavior();
+        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(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 (resetAspect) {
+        if (resetAspect === void 0) { resetAspect = true; }
+        if (!this._host || !this._host.utilityLayer || !this.node) {
+            return;
+        }
+        var scene = this._host.utilityLayer.utilityLayerScene;
+        var camera = scene.activeCamera;
+        if (camera) {
+            var worldMatrix = camera.getWorldMatrix();
+            var backward = Vector3.TransformNormal(Vector3.Backward(scene.useRightHandedSystem), worldMatrix);
+            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;
+            }
+        }
+    };
+    /**
+     * Releases all associated resources
+     */
+    HolographicSlate.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this._titleBarMaterial.dispose();
+        this._contentMaterial.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);
+        this._defaultBehavior.sixDofDragBehavior.onPositionChangedObservable.remove(this._positionChangedObserver);
+        this._defaultBehavior.detach();
+        this._gizmo.dispose();
+        this._contentDragBehavior.detach();
+    };
+    /**
+     * Base Url for the assets.
+     */
+    HolographicSlate.ASSETS_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
+    /**
+     * File name for the close icon.
+     */
+    HolographicSlate.CLOSE_ICON_FILENAME = "IconClose.png";
+    /**
+     * File name for the close icon.
+     */
+    HolographicSlate.FOLLOW_ICON_FILENAME = "IconFollowMe.png";
+    HolographicSlate._DEFAULT_TEXT_RESOLUTION_Y = 102.4;
+    return HolographicSlate;
+}(ContentDisplay3D));
+export { HolographicSlate };
 //# sourceMappingURL=holographicSlate.js.map