@babylonjs/gui 5.0.0-alpha.6 → 5.0.0-alpha.63

package/3D/controls/cylinderPanel.js

@@ -1,9 +1,9 @@
 import { __extends } from "tslib";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { Matrix, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector";
-import { VolumeBasedPanel } from "./volumeBasedPanel";
-import { Container3D } from "./container3D";
-import { Axis, Space } from '@babylonjs/core/Maths/math.axis';
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Matrix, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+import { Container3D } from "./container3D.js";
+import { Axis, Space } from '@babylonjs/core/Maths/math.axis.js';
 /**
  * Class used to create a container panel deployed on the surface of a cylinder
  */

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

@@ -0,0 +1,28 @@
+import { Scene } from "@babylonjs/core/scene";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { Nullable } from "@babylonjs/core/types";
+import { TouchHolographicMenu } from "./touchHolographicMenu";
+import { HandConstraintBehavior } from "@babylonjs/core/Behaviors/Meshes/handConstraintBehavior";
+import { WebXRExperienceHelper } from "@babylonjs/core/XR/webXRExperienceHelper";
+/**
+ * Hand menu that displays buttons and floats around the hand.
+ * @since 5.0.0
+ */
+export declare class HandMenu extends TouchHolographicMenu {
+    private _handConstraintBehavior;
+    /**
+     * The hand constraint behavior setting the transformation of this node
+     */
+    get handConstraintBehavior(): HandConstraintBehavior;
+    protected _createNode(scene: Scene): Nullable<TransformNode>;
+    /**
+     * Creates a hand menu GUI 3D control
+     * @param xr the WebXRExperienceHelper used to link this control to the enabled WebXRHandTracking feature
+     * @param name name of the hand menu
+     */
+    constructor(xr: WebXRExperienceHelper, name?: string);
+    /**
+     * Disposes the hand menu
+     */
+    dispose(): void;
+}

package/3D/controls/handMenu.js

@@ -0,0 +1,48 @@
+import { __extends } from "tslib";
+import { TouchHolographicMenu } from "./touchHolographicMenu.js";
+import { HandConstraintBehavior } from "@babylonjs/core/Behaviors/Meshes/handConstraintBehavior.js";
+/**
+ * Hand menu that displays buttons and floats around the hand.
+ * @since 5.0.0
+ */
+var HandMenu = /** @class */ (function (_super) {
+    __extends(HandMenu, _super);
+    /**
+     * Creates a hand menu GUI 3D control
+     * @param xr the WebXRExperienceHelper used to link this control to the enabled WebXRHandTracking feature
+     * @param name name of the hand menu
+     */
+    function HandMenu(xr, name) {
+        var _this = _super.call(this, name) || this;
+        _this._handConstraintBehavior = new HandConstraintBehavior();
+        _this._handConstraintBehavior.linkToXRExperience(xr);
+        _this.backPlateMargin = 0.15;
+        _this.rows = 3;
+        return _this;
+    }
+    Object.defineProperty(HandMenu.prototype, "handConstraintBehavior", {
+        /**
+         * The hand constraint behavior setting the transformation of this node
+         */
+        get: function () {
+            return this._handConstraintBehavior;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    HandMenu.prototype._createNode = function (scene) {
+        var node = _super.prototype._createNode.call(this, scene);
+        this._handConstraintBehavior.attach(node);
+        return node;
+    };
+    /**
+     * Disposes the hand menu
+     */
+    HandMenu.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this._handConstraintBehavior.detach();
+    };
+    return HandMenu;
+}(TouchHolographicMenu));
+export { HandMenu };
+//# sourceMappingURL=handMenu.js.map

package/3D/controls/handMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handMenu.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/handMenu.ts"],"names":[],"mappings":";AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yDAAyD,CAAC;AAGjG;;;GAGG;AACH;IAA8B,4BAAoB;IAkB9C;;;;OAIG;IACH,kBAAY,EAAyB,EAAE,IAAa;QAApD,YACI,kBAAM,IAAI,CAAC,SAMd;QAJG,KAAI,CAAC,uBAAuB,GAAG,IAAI,sBAAsB,EAAE,CAAC;QAC5D,KAAI,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACpD,KAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,KAAI,CAAC,IAAI,GAAG,CAAC,CAAC;;IAClB,CAAC;IAxBD,sBAAW,4CAAsB;QAHjC;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,uBAAuB,CAAC;QACxC,CAAC;;;OAAA;IAES,8BAAW,GAArB,UAAsB,KAAY;QAC9B,IAAM,IAAI,GAAG,iBAAM,WAAW,YAAC,KAAK,CAAU,CAAC;QAE/C,IAAI,CAAC,uBAAuB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAE1C,OAAO,IAAI,CAAC;IAChB,CAAC;IAgBD;;OAEG;IACI,0BAAO,GAAd;QACI,iBAAM,OAAO,WAAE,CAAC;QAEhB,IAAI,CAAC,uBAAuB,CAAC,MAAM,EAAE,CAAC;IAC1C,CAAC;IACL,eAAC;AAAD,CAAC,AAxCD,CAA8B,oBAAoB,GAwCjD","sourcesContent":["import { Scene } from \"@babylonjs/core/scene\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Nullable } from \"@babylonjs/core/types\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { TouchHolographicMenu } from \"./touchHolographicMenu\";\r\nimport { HandConstraintBehavior } from \"@babylonjs/core/Behaviors/Meshes/handConstraintBehavior\";\r\nimport { WebXRExperienceHelper } from \"@babylonjs/core/XR/webXRExperienceHelper\";\r\n\r\n/**\r\n * Hand menu that displays buttons and floats around the hand.\r\n * @since 5.0.0\r\n */\r\nexport class HandMenu extends TouchHolographicMenu {\r\n    private _handConstraintBehavior: HandConstraintBehavior;\r\n\r\n    /**\r\n     * The hand constraint behavior setting the transformation of this node\r\n     */\r\n    public get handConstraintBehavior() {\r\n        return this._handConstraintBehavior;\r\n    }\r\n\r\n    protected _createNode(scene: Scene): Nullable<TransformNode> {\r\n        const node = super._createNode(scene)! as Mesh;\r\n\r\n        this._handConstraintBehavior.attach(node);\r\n\r\n        return node;\r\n    }\r\n\r\n    /**\r\n     * Creates a hand menu GUI 3D control\r\n     * @param xr the WebXRExperienceHelper used to link this control to the enabled WebXRHandTracking feature\r\n     * @param name name of the hand menu\r\n     */\r\n    constructor(xr: WebXRExperienceHelper, name?: string) {\r\n        super(name);\r\n\r\n        this._handConstraintBehavior = new HandConstraintBehavior();\r\n        this._handConstraintBehavior.linkToXRExperience(xr);\r\n        this.backPlateMargin = 0.15;\r\n        this.rows = 3;\r\n    }\r\n\r\n    /**\r\n     * Disposes the hand menu\r\n     */\r\n    public dispose() {\r\n        super.dispose();\r\n\r\n        this._handConstraintBehavior.detach();\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,48 @@
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
+import { Scene } from "@babylonjs/core/scene";
+import { FluentBackplateMaterial } from "../materials/fluentBackplate/fluentBackplateMaterial";
+import { Control3D } from "./control3D";
+/**
+ * Class used to create a holographic backplate in 3D
+ * @since 5.0.0
+ */
+export declare class HolographicBackplate extends Control3D {
+    private _shareMaterials;
+    /**
+     * Base Url for the button model.
+     */
+    static MODEL_BASE_URL: string;
+    /**
+     * File name for the button model.
+     */
+    static MODEL_FILENAME: string;
+    private _model;
+    private _material;
+    /**
+     * Rendering ground id of the backplate mesh.
+     */
+    set renderingGroupId(id: number);
+    get renderingGroupId(): number;
+    /**
+     * Gets the material used by the backplate
+     */
+    get material(): FluentBackplateMaterial;
+    /**
+     * Gets a boolean indicating if this backplate shares its material with other HolographicBackplates
+     */
+    get shareMaterials(): boolean;
+    /**
+     * Creates a new holographic backplate
+     * @param name defines the control name
+     */
+    constructor(name?: string, _shareMaterials?: boolean);
+    protected _getTypeName(): string;
+    protected _createNode(scene: Scene): TransformNode;
+    private _createMaterial;
+    protected _affectMaterial(mesh: Mesh): void;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}

package/3D/controls/holographicBackplate.js

@@ -0,0 +1,121 @@
+import { __extends } from "tslib";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { FluentBackplateMaterial } from "../materials/fluentBackplate/fluentBackplateMaterial.js";
+import { Control3D } from "./control3D.js";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+/**
+ * Class used to create a holographic backplate in 3D
+ * @since 5.0.0
+ */
+var HolographicBackplate = /** @class */ (function (_super) {
+    __extends(HolographicBackplate, _super);
+    /**
+     * Creates a new holographic backplate
+     * @param name defines the control name
+     */
+    function HolographicBackplate(name, _shareMaterials) {
+        if (_shareMaterials === void 0) { _shareMaterials = true; }
+        var _this = _super.call(this, name) || this;
+        _this._shareMaterials = _shareMaterials;
+        return _this;
+    }
+    Object.defineProperty(HolographicBackplate.prototype, "renderingGroupId", {
+        get: function () {
+            return this._model.renderingGroupId;
+        },
+        /**
+         * Rendering ground id of the backplate mesh.
+         */
+        set: function (id) {
+            this._model.renderingGroupId = id;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(HolographicBackplate.prototype, "material", {
+        /**
+         * Gets the material used by the backplate
+         */
+        get: function () {
+            return this._material;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(HolographicBackplate.prototype, "shareMaterials", {
+        /**
+         * Gets a boolean indicating if this backplate shares its material with other HolographicBackplates
+         */
+        get: function () {
+            return this._shareMaterials;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    HolographicBackplate.prototype._getTypeName = function () {
+        return "HolographicBackplate";
+    };
+    // Mesh association
+    HolographicBackplate.prototype._createNode = function (scene) {
+        var _this = this;
+        var _a;
+        var collisionMesh = CreateBox(((_a = this.name) !== null && _a !== void 0 ? _a : "HolographicBackplate") + "_CollisionMesh", {
+            width: 1.0,
+            height: 1.0,
+            depth: 1.0,
+        }, scene);
+        collisionMesh.isPickable = true;
+        collisionMesh.visibility = 0;
+        SceneLoader.ImportMeshAsync(undefined, HolographicBackplate.MODEL_BASE_URL, HolographicBackplate.MODEL_FILENAME, scene)
+            .then(function (result) {
+            var importedModel = result.meshes[1];
+            importedModel.name = _this.name + "_frontPlate";
+            importedModel.isPickable = false;
+            importedModel.parent = collisionMesh;
+            if (!!_this._material) {
+                importedModel.material = _this._material;
+            }
+            _this._model = importedModel;
+        });
+        return collisionMesh;
+    };
+    HolographicBackplate.prototype._createMaterial = function (mesh) {
+        this._material = new FluentBackplateMaterial(this.name + " Material", mesh.getScene());
+    };
+    HolographicBackplate.prototype._affectMaterial = function (mesh) {
+        // Back
+        if (this._shareMaterials) {
+            if (!this._host._touchSharedMaterials["fluentBackplateMaterial"]) {
+                this._createMaterial(mesh);
+                this._host._touchSharedMaterials["fluentBackplateMaterial"] = this._material;
+            }
+            else {
+                this._material = this._host._touchSharedMaterials["fluentBackplateMaterial"];
+            }
+        }
+        else {
+            this._createMaterial(mesh);
+        }
+    };
+    /**
+     * Releases all associated resources
+     */
+    HolographicBackplate.prototype.dispose = function () {
+        _super.prototype.dispose.call(this); // will dispose main mesh ie. back plate
+        if (!this.shareMaterials) {
+            this._material.dispose();
+        }
+        this._model.dispose();
+    };
+    /**
+     * Base Url for the button model.
+     */
+    HolographicBackplate.MODEL_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
+    /**
+     * File name for the button model.
+     */
+    HolographicBackplate.MODEL_FILENAME = 'mrtk-fluent-backplate.glb';
+    return HolographicBackplate;
+}(Control3D));
+export { HolographicBackplate };
+//# sourceMappingURL=holographicBackplate.js.map

package/3D/controls/holographicBackplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"holographicBackplate.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/holographicBackplate.ts"],"names":[],"mappings":"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","sourcesContent":["import { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { CreateBox } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { FluentBackplateMaterial } from \"../materials/fluentBackplate/fluentBackplateMaterial\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { SceneLoader } from \"@babylonjs/core/Loading/sceneLoader\";\r\nimport { AbstractMesh } from \"@babylonjs/core/Meshes/abstractMesh\";\r\n\r\n/**\r\n * Class used to create a holographic backplate in 3D\r\n * @since 5.0.0\r\n */\r\nexport class HolographicBackplate extends Control3D {\r\n    /**\r\n     * Base Url for the button model.\r\n     */\r\n    public static MODEL_BASE_URL: string = \"https://assets.babylonjs.com/meshes/MRTK/\";\r\n    /**\r\n     * File name for the button model.\r\n     */\r\n    public static MODEL_FILENAME: string = 'mrtk-fluent-backplate.glb';\r\n\r\n    private _model: AbstractMesh;\r\n    private _material: FluentBackplateMaterial;\r\n\r\n    /**\r\n     * Rendering ground id of the backplate mesh.\r\n     */\r\n    public set renderingGroupId(id: number) {\r\n        this._model.renderingGroupId = id;\r\n    }\r\n    public get renderingGroupId(): number {\r\n        return this._model.renderingGroupId;\r\n    }\r\n\r\n    /**\r\n     * Gets the material used by the backplate\r\n     */\r\n    public get material(): FluentBackplateMaterial {\r\n        return this._material;\r\n    }\r\n\r\n    /**\r\n     * Gets a boolean indicating if this backplate shares its material with other HolographicBackplates\r\n     */\r\n    public get shareMaterials(): boolean {\r\n        return this._shareMaterials;\r\n    }\r\n\r\n    /**\r\n     * Creates a new holographic backplate\r\n     * @param name defines the control name\r\n     */\r\n    constructor(name?: string, private _shareMaterials = true) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"HolographicBackplate\";\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        const collisionMesh = CreateBox((this.name ?? \"HolographicBackplate\") + \"_CollisionMesh\", {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: 1.0,\r\n        }, scene);\r\n        collisionMesh.isPickable = true;\r\n        collisionMesh.visibility = 0;\r\n\r\n        SceneLoader.ImportMeshAsync(\r\n            undefined,\r\n            HolographicBackplate.MODEL_BASE_URL,\r\n            HolographicBackplate.MODEL_FILENAME,\r\n            scene)\r\n            .then((result) => {\r\n                var importedModel = result.meshes[1];\r\n                importedModel.name = `${this.name}_frontPlate`;\r\n                importedModel.isPickable = false;\r\n                importedModel.parent = collisionMesh;\r\n                if (!!this._material) {\r\n                    importedModel.material = this._material;\r\n                }\r\n                this._model = importedModel;\r\n            });\r\n\r\n        return collisionMesh;\r\n    }\r\n\r\n    private _createMaterial(mesh: Mesh) {\r\n        this._material = new FluentBackplateMaterial(this.name + \" Material\", mesh.getScene());\r\n    }\r\n\r\n    protected _affectMaterial(mesh: Mesh) {\r\n        // Back\r\n        if (this._shareMaterials) {\r\n            if (!this._host._touchSharedMaterials[\"fluentBackplateMaterial\"]) {\r\n                this._createMaterial(mesh);\r\n                this._host._touchSharedMaterials[\"fluentBackplateMaterial\"] = this._material;\r\n            } else {\r\n                this._material = this._host._touchSharedMaterials[\"fluentBackplateMaterial\"] as FluentBackplateMaterial;\r\n            }\r\n        } else {\r\n            this._createMaterial(mesh);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose(); // will dispose main mesh ie. back plate\r\n\r\n        if (!this.shareMaterials) {\r\n            this._material.dispose();\r\n        }\r\n\r\n        this._model.dispose();\r\n    }\r\n}"]}

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

@@ -4,7 +4,7 @@ import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
 import { Mesh } from "@babylonjs/core/Meshes/mesh";
 import { Scene } from "@babylonjs/core/scene";
-import { FluentMaterial } from "../materials/fluentMaterial";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial";
 import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
 /**
  * Class used to create a holographic button in 3D

package/3D/controls/holographicButton.js

@@ -1,16 +1,17 @@
 import { __extends } from "tslib";
-import { Button3D } from "./button3D";
-import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
-import { Mesh } from "@babylonjs/core/Meshes/mesh";
-import { PlaneBuilder } from "@babylonjs/core/Meshes/Builders/planeBuilder";
-import { BoxBuilder } from "@babylonjs/core/Meshes/Builders/boxBuilder";
-import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior";
-import { FluentMaterial } from "../materials/fluentMaterial";
-import { StackPanel } from "../../2D/controls/stackPanel";
-import { Image } from "../../2D/controls/image";
-import { TextBlock } from "../../2D/controls/textBlock";
-import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
-import { Color3 } from '@babylonjs/core/Maths/math.color';
+import { Button3D } from "./button3D.js";
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial.js";
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import { CreatePlane } from "@babylonjs/core/Meshes/Builders/planeBuilder.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { FadeInOutBehavior } from "@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior.js";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
+import { StackPanel } from "../../2D/controls/stackPanel.js";
+import { Image } from "../../2D/controls/image.js";
+import { TextBlock } from "../../2D/controls/textBlock.js";
+import { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture.js";
+import { Color3 } from '@babylonjs/core/Maths/math.color.js';
+import { DomManagement } from "@babylonjs/core/Misc/domManagement.js";
 /**
  * Class used to create a holographic button in 3D
  */
@@ -90,8 +91,8 @@ var HolographicButton = /** @class */ (function (_super) {
             }
             if (!this._tooltipFade) {
                 // Create tooltip with mesh and text
-                this._tooltipMesh = PlaneBuilder.CreatePlane("", { size: 1 }, this._backPlate._scene);
-                var tooltipBackground = PlaneBuilder.CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
+                this._tooltipMesh = CreatePlane("", { size: 1 }, this._backPlate._scene);
+                var tooltipBackground = CreatePlane("", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);
                 var mat = new StandardMaterial("", this._backPlate._scene);
                 mat.diffuseColor = Color3.FromHexString("#212121");
                 tooltipBackground.material = mat;
@@ -213,14 +214,16 @@ var HolographicButton = /** @class */ (function (_super) {
         this._disposeFacadeTexture();
         var panel = new StackPanel();
         panel.isVertical = true;
-        if (this._imageUrl) {
-            var image = new Image();
-            image.source = this._imageUrl;
-            image.paddingTop = "40px";
-            image.height = "180px";
-            image.width = "100px";
-            image.paddingBottom = "40px";
-            panel.addControl(image);
+        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {
+            if (this._imageUrl) {
+                var image = new Image();
+                image.source = this._imageUrl;
+                image.paddingTop = "40px";
+                image.height = "180px";
+                image.width = "100px";
+                image.paddingBottom = "40px";
+                panel.addControl(image);
+            }
         }
         if (this._text) {
             var text = new TextBlock();
@@ -236,12 +239,12 @@ var HolographicButton = /** @class */ (function (_super) {
     };
     // Mesh association
     HolographicButton.prototype._createNode = function (scene) {
-        this._backPlate = BoxBuilder.CreateBox(this.name + "BackMesh", {
+        this._backPlate = CreateBox(this.name + "BackMesh", {
             width: 1.0,
             height: 1.0,
             depth: 0.08
         }, scene);
-        this._frontPlate = BoxBuilder.CreateBox(this.name + "FrontMesh", {
+        this._frontPlate = CreateBox(this.name + "FrontMesh", {
             width: 1.0,
             height: 1.0,
             depth: 0.08

package/3D/controls/holographicButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"holographicButton.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/holographicButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { Button3D } from \"./button3D\";\r\n\r\nimport { Nullable } from \"@babylonjs/core/types\";\r\nimport { Observer } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { StandardMaterial } from \"@babylonjs/core/Materials/standardMaterial\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { PlaneBuilder } from \"@babylonjs/core/Meshes/Builders/planeBuilder\";\r\nimport { BoxBuilder } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { FadeInOutBehavior } from \"@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\n\r\nimport { FluentMaterial } from \"../materials/fluentMaterial\";\r\nimport { StackPanel } from \"../../2D/controls/stackPanel\";\r\nimport { Image } from \"../../2D/controls/image\";\r\nimport { TextBlock } from \"../../2D/controls/textBlock\";\r\nimport { AdvancedDynamicTexture } from \"../../2D/advancedDynamicTexture\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { Color3 } from '@babylonjs/core/Maths/math.color';\r\n\r\n/**\r\n * Class used to create a holographic button in 3D\r\n */\r\nexport class HolographicButton extends Button3D {\r\n    private _backPlate: Mesh;\r\n    private _textPlate: Mesh;\r\n    private _frontPlate: Mesh;\r\n    private _text: string;\r\n    private _imageUrl: string;\r\n    private _shareMaterials = true;\r\n    private _frontMaterial: FluentMaterial;\r\n    private _backMaterial: FluentMaterial;\r\n    private _plateMaterial: StandardMaterial;\r\n    private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;\r\n\r\n    // Tooltip\r\n    private _tooltipFade: Nullable<FadeInOutBehavior>;\r\n    private _tooltipTextBlock: Nullable<TextBlock>;\r\n    private _tooltipTexture: Nullable<AdvancedDynamicTexture>;\r\n    private _tooltipMesh: Nullable<Mesh>;\r\n    private _tooltipHoverObserver: Nullable<Observer<Control3D>>;\r\n    private _tooltipOutObserver: Nullable<Observer<Control3D>>;\r\n\r\n    private _disposeTooltip() {\r\n        this._tooltipFade = null;\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.dispose();\r\n        }\r\n        if (this._tooltipTexture) {\r\n            this._tooltipTexture.dispose();\r\n        }\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.dispose();\r\n        }\r\n        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);\r\n        this.onPointerOutObservable.remove(this._tooltipOutObserver);\r\n    }\r\n\r\n    /**\r\n     * Rendering ground id of all the mesh in the button\r\n     */\r\n    public set renderingGroupId(id: number) {\r\n        this._backPlate.renderingGroupId = id;\r\n        this._textPlate.renderingGroupId = id;\r\n        this._frontPlate.renderingGroupId = id;\r\n\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.renderingGroupId = id;\r\n        }\r\n    }\r\n    public get renderingGroupId(): number {\r\n        return this._backPlate.renderingGroupId;\r\n    }\r\n\r\n    /**\r\n     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)\r\n     */\r\n    public set tooltipText(text: Nullable<string>) {\r\n        if (!text) {\r\n            this._disposeTooltip();\r\n            return;\r\n        }\r\n        if (!this._tooltipFade) {\r\n            // Create tooltip with mesh and text\r\n            this._tooltipMesh = PlaneBuilder.CreatePlane(\"\", { size: 1 }, this._backPlate._scene);\r\n            var tooltipBackground = PlaneBuilder.CreatePlane(\"\", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);\r\n            var mat = new StandardMaterial(\"\", this._backPlate._scene);\r\n            mat.diffuseColor = Color3.FromHexString(\"#212121\");\r\n            tooltipBackground.material = mat;\r\n            tooltipBackground.isPickable = false;\r\n            this._tooltipMesh.addChild(tooltipBackground);\r\n            tooltipBackground.position.z = 0.05;\r\n            this._tooltipMesh.scaling.y = 1 / 3;\r\n            this._tooltipMesh.position.y = 0.7;\r\n            this._tooltipMesh.position.z = -0.15;\r\n            this._tooltipMesh.isPickable = false;\r\n            this._tooltipMesh.parent = this._backPlate;\r\n\r\n            // Create text texture for the tooltip\r\n            this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);\r\n            this._tooltipTextBlock = new TextBlock();\r\n            this._tooltipTextBlock.scaleY = 3;\r\n            this._tooltipTextBlock.color = \"white\";\r\n            this._tooltipTextBlock.fontSize = 130;\r\n            this._tooltipTexture.addControl(this._tooltipTextBlock);\r\n\r\n            // Add hover action to tooltip\r\n            this._tooltipFade = new FadeInOutBehavior();\r\n            this._tooltipFade.delay = 500;\r\n            this._tooltipMesh.addBehavior(this._tooltipFade);\r\n            this._tooltipHoverObserver = this.onPointerEnterObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(true);\r\n                }\r\n            });\r\n            this._tooltipOutObserver = this.onPointerOutObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(false);\r\n                }\r\n            });\r\n        }\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.text = text;\r\n        }\r\n    }\r\n\r\n    public get tooltipText() {\r\n        if (this._tooltipTextBlock) {\r\n            return this._tooltipTextBlock.text;\r\n        }\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Gets or sets text for the button\r\n     */\r\n    public get text(): string {\r\n        return this._text;\r\n    }\r\n\r\n    public set text(value: string) {\r\n        if (this._text === value) {\r\n            return;\r\n        }\r\n\r\n        this._text = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image url for the button\r\n     */\r\n    public get imageUrl(): string {\r\n        return this._imageUrl;\r\n    }\r\n\r\n    public set imageUrl(value: string) {\r\n        if (this._imageUrl === value) {\r\n            return;\r\n        }\r\n\r\n        this._imageUrl = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets the back material used by this button\r\n     */\r\n    public get backMaterial(): FluentMaterial {\r\n        return this._backMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the front material used by this button\r\n     */\r\n    public get frontMaterial(): FluentMaterial {\r\n        return this._frontMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the plate material used by this button\r\n     */\r\n    public get plateMaterial(): StandardMaterial {\r\n        return this._plateMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets a boolean indicating if this button shares its material with other HolographicButtons\r\n     */\r\n    public get shareMaterials(): boolean {\r\n        return this._shareMaterials;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button\r\n     * @param name defines the control name\r\n     */\r\n    constructor(name?: string, shareMaterials = true) {\r\n        super(name);\r\n\r\n        this._shareMaterials = shareMaterials;\r\n\r\n        // Default animations\r\n        this.pointerEnterAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this._frontPlate.setEnabled(true);\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this._frontPlate.setEnabled(false);\r\n        };\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"HolographicButton\";\r\n    }\r\n\r\n    private _rebuildContent(): void {\r\n        this._disposeFacadeTexture();\r\n\r\n        let panel = new StackPanel();\r\n        panel.isVertical = true;\r\n\r\n        if (this._imageUrl) {\r\n            let image = new Image();\r\n            image.source = this._imageUrl;\r\n            image.paddingTop = \"40px\";\r\n            image.height = \"180px\";\r\n            image.width = \"100px\";\r\n            image.paddingBottom = \"40px\";\r\n            panel.addControl(image);\r\n        }\r\n\r\n        if (this._text) {\r\n            let text = new TextBlock();\r\n            text.text = this._text;\r\n            text.color = \"white\";\r\n            text.height = \"30px\";\r\n            text.fontSize = 24;\r\n            panel.addControl(text);\r\n        }\r\n\r\n        if (this._frontPlate) {\r\n            this.content = panel;\r\n        }\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        this._backPlate = BoxBuilder.CreateBox(this.name + \"BackMesh\", {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: 0.08\r\n        }, scene);\r\n\r\n        this._frontPlate = BoxBuilder.CreateBox(this.name + \"FrontMesh\", {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: 0.08\r\n        }, scene);\r\n\r\n        this._frontPlate.parent = this._backPlate;\r\n        this._frontPlate.position.z = -0.08;\r\n        this._frontPlate.isPickable = false;\r\n        this._frontPlate.setEnabled(false);\r\n\r\n        this._textPlate = <Mesh>super._createNode(scene);\r\n        this._textPlate.parent = this._backPlate;\r\n        this._textPlate.position.z = -0.08;\r\n        this._textPlate.isPickable = false;\r\n\r\n        return this._backPlate;\r\n    }\r\n\r\n    protected _applyFacade(facadeTexture: AdvancedDynamicTexture) {\r\n        this._plateMaterial.emissiveTexture = facadeTexture;\r\n        this._plateMaterial.opacityTexture = facadeTexture;\r\n    }\r\n\r\n    private _createBackMaterial(mesh: Mesh) {\r\n        this._backMaterial = new FluentMaterial(this.name + \"Back Material\", mesh.getScene());\r\n        this._backMaterial.renderHoverLight = true;\r\n        this._pickedPointObserver = this._host.onPickedPointChangedObservable.add((pickedPoint) => {\r\n            if (pickedPoint) {\r\n                this._backMaterial.hoverPosition = pickedPoint;\r\n                this._backMaterial.hoverColor.a = 1.0;\r\n            } else {\r\n                this._backMaterial.hoverColor.a = 0;\r\n            }\r\n        });\r\n    }\r\n\r\n    private _createFrontMaterial(mesh: Mesh) {\r\n        this._frontMaterial = new FluentMaterial(this.name + \"Front Material\", mesh.getScene());\r\n        this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow\r\n        this._frontMaterial.alpha = 0.5; // Additive\r\n        this._frontMaterial.renderBorders = true;\r\n    }\r\n\r\n    private _createPlateMaterial(mesh: Mesh) {\r\n        this._plateMaterial = new StandardMaterial(this.name + \"Plate Material\", mesh.getScene());\r\n        this._plateMaterial.specularColor = Color3.Black();\r\n    }\r\n\r\n    protected _affectMaterial(mesh: Mesh) {\r\n        // Back\r\n        if (this._shareMaterials) {\r\n            if (!this._host._sharedMaterials[\"backFluentMaterial\"]) {\r\n                this._createBackMaterial(mesh);\r\n                this._host._sharedMaterials[\"backFluentMaterial\"] = this._backMaterial;\r\n            } else {\r\n                this._backMaterial = this._host._sharedMaterials[\"backFluentMaterial\"] as FluentMaterial;\r\n            }\r\n\r\n            // Front\r\n            if (!this._host._sharedMaterials[\"frontFluentMaterial\"]) {\r\n                this._createFrontMaterial(mesh);\r\n                this._host._sharedMaterials[\"frontFluentMaterial\"] = this._frontMaterial;\r\n            } else {\r\n                this._frontMaterial = this._host._sharedMaterials[\"frontFluentMaterial\"] as FluentMaterial;\r\n            }\r\n        } else {\r\n            this._createBackMaterial(mesh);\r\n            this._createFrontMaterial(mesh);\r\n        }\r\n\r\n        this._createPlateMaterial(mesh);\r\n        this._backPlate.material = this._backMaterial;\r\n        this._frontPlate.material = this._frontMaterial;\r\n        this._textPlate.material = this._plateMaterial;\r\n\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose(); // will dispose main mesh ie. back plate\r\n\r\n        this._disposeTooltip();\r\n\r\n        if (!this.shareMaterials) {\r\n            this._backMaterial.dispose();\r\n            this._frontMaterial.dispose();\r\n            this._plateMaterial.dispose();\r\n\r\n            if (this._pickedPointObserver) {\r\n                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);\r\n                this._pickedPointObserver = null;\r\n            }\r\n        }\r\n    }\r\n}"]}
+{"version":3,"file":"holographicButton.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/holographicButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { Button3D } from \"./button3D\";\r\n\r\nimport { Nullable } from \"@babylonjs/core/types\";\r\nimport { Observer } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { StandardMaterial } from \"@babylonjs/core/Materials/standardMaterial\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Mesh } from \"@babylonjs/core/Meshes/mesh\";\r\nimport { CreatePlane } from \"@babylonjs/core/Meshes/Builders/planeBuilder\";\r\nimport { CreateBox } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { FadeInOutBehavior } from \"@babylonjs/core/Behaviors/Meshes/fadeInOutBehavior\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\n\r\nimport { FluentMaterial } from \"../materials/fluent/fluentMaterial\";\r\nimport { StackPanel } from \"../../2D/controls/stackPanel\";\r\nimport { Image } from \"../../2D/controls/image\";\r\nimport { TextBlock } from \"../../2D/controls/textBlock\";\r\nimport { AdvancedDynamicTexture } from \"../../2D/advancedDynamicTexture\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { Color3 } from '@babylonjs/core/Maths/math.color';\r\nimport { DomManagement } from \"@babylonjs/core/Misc/domManagement\";\r\n\r\n/**\r\n * Class used to create a holographic button in 3D\r\n */\r\nexport class HolographicButton extends Button3D {\r\n    private _backPlate: Mesh;\r\n    private _textPlate: Mesh;\r\n    private _frontPlate: Mesh;\r\n    private _text: string;\r\n    private _imageUrl: string;\r\n    private _shareMaterials = true;\r\n    private _frontMaterial: FluentMaterial;\r\n    private _backMaterial: FluentMaterial;\r\n    private _plateMaterial: StandardMaterial;\r\n    private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;\r\n\r\n    // Tooltip\r\n    private _tooltipFade: Nullable<FadeInOutBehavior>;\r\n    private _tooltipTextBlock: Nullable<TextBlock>;\r\n    private _tooltipTexture: Nullable<AdvancedDynamicTexture>;\r\n    private _tooltipMesh: Nullable<Mesh>;\r\n    private _tooltipHoverObserver: Nullable<Observer<Control3D>>;\r\n    private _tooltipOutObserver: Nullable<Observer<Control3D>>;\r\n\r\n    private _disposeTooltip() {\r\n        this._tooltipFade = null;\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.dispose();\r\n        }\r\n        if (this._tooltipTexture) {\r\n            this._tooltipTexture.dispose();\r\n        }\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.dispose();\r\n        }\r\n        this.onPointerEnterObservable.remove(this._tooltipHoverObserver);\r\n        this.onPointerOutObservable.remove(this._tooltipOutObserver);\r\n    }\r\n\r\n    /**\r\n     * Rendering ground id of all the mesh in the button\r\n     */\r\n    public set renderingGroupId(id: number) {\r\n        this._backPlate.renderingGroupId = id;\r\n        this._textPlate.renderingGroupId = id;\r\n        this._frontPlate.renderingGroupId = id;\r\n\r\n        if (this._tooltipMesh) {\r\n            this._tooltipMesh.renderingGroupId = id;\r\n        }\r\n    }\r\n    public get renderingGroupId(): number {\r\n        return this._backPlate.renderingGroupId;\r\n    }\r\n\r\n    /**\r\n     * Text to be displayed on the tooltip shown when hovering on the button. When set to null tooltip is disabled. (Default: null)\r\n     */\r\n    public set tooltipText(text: Nullable<string>) {\r\n        if (!text) {\r\n            this._disposeTooltip();\r\n            return;\r\n        }\r\n        if (!this._tooltipFade) {\r\n            // Create tooltip with mesh and text\r\n            this._tooltipMesh = CreatePlane(\"\", { size: 1 }, this._backPlate._scene);\r\n            var tooltipBackground = CreatePlane(\"\", { size: 1, sideOrientation: Mesh.DOUBLESIDE }, this._backPlate._scene);\r\n            var mat = new StandardMaterial(\"\", this._backPlate._scene);\r\n            mat.diffuseColor = Color3.FromHexString(\"#212121\");\r\n            tooltipBackground.material = mat;\r\n            tooltipBackground.isPickable = false;\r\n            this._tooltipMesh.addChild(tooltipBackground);\r\n            tooltipBackground.position.z = 0.05;\r\n            this._tooltipMesh.scaling.y = 1 / 3;\r\n            this._tooltipMesh.position.y = 0.7;\r\n            this._tooltipMesh.position.z = -0.15;\r\n            this._tooltipMesh.isPickable = false;\r\n            this._tooltipMesh.parent = this._backPlate;\r\n\r\n            // Create text texture for the tooltip\r\n            this._tooltipTexture = AdvancedDynamicTexture.CreateForMesh(this._tooltipMesh);\r\n            this._tooltipTextBlock = new TextBlock();\r\n            this._tooltipTextBlock.scaleY = 3;\r\n            this._tooltipTextBlock.color = \"white\";\r\n            this._tooltipTextBlock.fontSize = 130;\r\n            this._tooltipTexture.addControl(this._tooltipTextBlock);\r\n\r\n            // Add hover action to tooltip\r\n            this._tooltipFade = new FadeInOutBehavior();\r\n            this._tooltipFade.delay = 500;\r\n            this._tooltipMesh.addBehavior(this._tooltipFade);\r\n            this._tooltipHoverObserver = this.onPointerEnterObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(true);\r\n                }\r\n            });\r\n            this._tooltipOutObserver = this.onPointerOutObservable.add(() => {\r\n                if (this._tooltipFade) {\r\n                    this._tooltipFade.fadeIn(false);\r\n                }\r\n            });\r\n        }\r\n        if (this._tooltipTextBlock) {\r\n            this._tooltipTextBlock.text = text;\r\n        }\r\n    }\r\n\r\n    public get tooltipText() {\r\n        if (this._tooltipTextBlock) {\r\n            return this._tooltipTextBlock.text;\r\n        }\r\n        return null;\r\n    }\r\n\r\n    /**\r\n     * Gets or sets text for the button\r\n     */\r\n    public get text(): string {\r\n        return this._text;\r\n    }\r\n\r\n    public set text(value: string) {\r\n        if (this._text === value) {\r\n            return;\r\n        }\r\n\r\n        this._text = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image url for the button\r\n     */\r\n    public get imageUrl(): string {\r\n        return this._imageUrl;\r\n    }\r\n\r\n    public set imageUrl(value: string) {\r\n        if (this._imageUrl === value) {\r\n            return;\r\n        }\r\n\r\n        this._imageUrl = value;\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Gets the back material used by this button\r\n     */\r\n    public get backMaterial(): FluentMaterial {\r\n        return this._backMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the front material used by this button\r\n     */\r\n    public get frontMaterial(): FluentMaterial {\r\n        return this._frontMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the plate material used by this button\r\n     */\r\n    public get plateMaterial(): StandardMaterial {\r\n        return this._plateMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets a boolean indicating if this button shares its material with other HolographicButtons\r\n     */\r\n    public get shareMaterials(): boolean {\r\n        return this._shareMaterials;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button\r\n     * @param name defines the control name\r\n     */\r\n    constructor(name?: string, shareMaterials = true) {\r\n        super(name);\r\n\r\n        this._shareMaterials = shareMaterials;\r\n\r\n        // Default animations\r\n        this.pointerEnterAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this._frontPlate.setEnabled(true);\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this._frontPlate.setEnabled(false);\r\n        };\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"HolographicButton\";\r\n    }\r\n\r\n    private _rebuildContent(): void {\r\n        this._disposeFacadeTexture();\r\n\r\n        let panel = new StackPanel();\r\n        panel.isVertical = true;\r\n\r\n        if (DomManagement.IsDocumentAvailable() && !!document.createElement) {\r\n            if (this._imageUrl) {\r\n                let image = new Image();\r\n                image.source = this._imageUrl;\r\n                image.paddingTop = \"40px\";\r\n                image.height = \"180px\";\r\n                image.width = \"100px\";\r\n                image.paddingBottom = \"40px\";\r\n                panel.addControl(image);\r\n            }\r\n        }\r\n\r\n        if (this._text) {\r\n            let text = new TextBlock();\r\n            text.text = this._text;\r\n            text.color = \"white\";\r\n            text.height = \"30px\";\r\n            text.fontSize = 24;\r\n            panel.addControl(text);\r\n        }\r\n\r\n        if (this._frontPlate) {\r\n            this.content = panel;\r\n        }\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        this._backPlate = CreateBox(this.name + \"BackMesh\", {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: 0.08\r\n        }, scene);\r\n\r\n        this._frontPlate = CreateBox(this.name + \"FrontMesh\", {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: 0.08\r\n        }, scene);\r\n\r\n        this._frontPlate.parent = this._backPlate;\r\n        this._frontPlate.position.z = -0.08;\r\n        this._frontPlate.isPickable = false;\r\n        this._frontPlate.setEnabled(false);\r\n\r\n        this._textPlate = <Mesh>super._createNode(scene);\r\n        this._textPlate.parent = this._backPlate;\r\n        this._textPlate.position.z = -0.08;\r\n        this._textPlate.isPickable = false;\r\n\r\n        return this._backPlate;\r\n    }\r\n\r\n    protected _applyFacade(facadeTexture: AdvancedDynamicTexture) {\r\n        this._plateMaterial.emissiveTexture = facadeTexture;\r\n        this._plateMaterial.opacityTexture = facadeTexture;\r\n    }\r\n\r\n    private _createBackMaterial(mesh: Mesh) {\r\n        this._backMaterial = new FluentMaterial(this.name + \"Back Material\", mesh.getScene());\r\n        this._backMaterial.renderHoverLight = true;\r\n        this._pickedPointObserver = this._host.onPickedPointChangedObservable.add((pickedPoint) => {\r\n            if (pickedPoint) {\r\n                this._backMaterial.hoverPosition = pickedPoint;\r\n                this._backMaterial.hoverColor.a = 1.0;\r\n            } else {\r\n                this._backMaterial.hoverColor.a = 0;\r\n            }\r\n        });\r\n    }\r\n\r\n    private _createFrontMaterial(mesh: Mesh) {\r\n        this._frontMaterial = new FluentMaterial(this.name + \"Front Material\", mesh.getScene());\r\n        this._frontMaterial.innerGlowColorIntensity = 0; // No inner glow\r\n        this._frontMaterial.alpha = 0.5; // Additive\r\n        this._frontMaterial.renderBorders = true;\r\n    }\r\n\r\n    private _createPlateMaterial(mesh: Mesh) {\r\n        this._plateMaterial = new StandardMaterial(this.name + \"Plate Material\", mesh.getScene());\r\n        this._plateMaterial.specularColor = Color3.Black();\r\n    }\r\n\r\n    protected _affectMaterial(mesh: Mesh) {\r\n        // Back\r\n        if (this._shareMaterials) {\r\n            if (!this._host._sharedMaterials[\"backFluentMaterial\"]) {\r\n                this._createBackMaterial(mesh);\r\n                this._host._sharedMaterials[\"backFluentMaterial\"] = this._backMaterial;\r\n            } else {\r\n                this._backMaterial = this._host._sharedMaterials[\"backFluentMaterial\"] as FluentMaterial;\r\n            }\r\n\r\n            // Front\r\n            if (!this._host._sharedMaterials[\"frontFluentMaterial\"]) {\r\n                this._createFrontMaterial(mesh);\r\n                this._host._sharedMaterials[\"frontFluentMaterial\"] = this._frontMaterial;\r\n            } else {\r\n                this._frontMaterial = this._host._sharedMaterials[\"frontFluentMaterial\"] as FluentMaterial;\r\n            }\r\n        } else {\r\n            this._createBackMaterial(mesh);\r\n            this._createFrontMaterial(mesh);\r\n        }\r\n\r\n        this._createPlateMaterial(mesh);\r\n        this._backPlate.material = this._backMaterial;\r\n        this._frontPlate.material = this._frontMaterial;\r\n        this._textPlate.material = this._plateMaterial;\r\n\r\n        this._rebuildContent();\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose(); // will dispose main mesh ie. back plate\r\n\r\n        this._disposeTooltip();\r\n\r\n        if (!this.shareMaterials) {\r\n            this._backMaterial.dispose();\r\n            this._frontMaterial.dispose();\r\n            this._plateMaterial.dispose();\r\n\r\n            if (this._pickedPointObserver) {\r\n                this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);\r\n                this._pickedPointObserver = null;\r\n            }\r\n        }\r\n    }\r\n}"]}

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

@@ -0,0 +1,118 @@
+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 { AdvancedDynamicTexture } from "../../2D/advancedDynamicTexture";
+import { SlateGizmo } from "../gizmos/slateGizmo";
+import { DefaultBehavior } from "../behaviors/defaultBehavior";
+/**
+ * Class used to create a holographic slate
+ * @since 5.0.0
+ */
+export declare class HolographicSlate extends ContentDisplay3D {
+    /**
+     * Base Url for the assets.
+     */
+    static ASSETS_BASE_URL: string;
+    /**
+     * File name for the close icon.
+     */
+    static CLOSE_ICON_FILENAME: string;
+    /**
+     * File name for the close icon.
+     */
+    static FOLLOW_ICON_FILENAME: string;
+    /**
+     * Dimensions of the slate
+     */
+    dimensions: Vector3;
+    /**
+     * Minimum dimensions of the slate
+     */
+    minDimensions: Vector3;
+    /**
+     * Default dimensions of the slate
+     */
+    readonly defaultDimensions: Vector3;
+    /**
+     * Dimensions of the backplate
+     */
+    backplateDimensions: Vector3;
+    /**
+     * Margin between backplate and contentplate
+     */
+    backPlateMargin: number;
+    /**
+     * Origin in local coordinates (top left corner)
+     */
+    origin: Vector3;
+    private _backPlateMaterial;
+    private _contentMaterial;
+    private _pickedPointObserver;
+    private _positionChangedObserver;
+    private _imageUrl;
+    private _contentViewport;
+    private _contentDragBehavior;
+    private _defaultBehavior;
+    /**
+     * Regroups all mesh behaviors for the slate
+     */
+    get defaultBehavior(): DefaultBehavior;
+    /** @hidden */
+    _gizmo: SlateGizmo;
+    protected _backPlate: Mesh;
+    protected _contentPlate: Mesh;
+    protected _followButton: TouchHolographicButton;
+    protected _closeButton: TouchHolographicButton;
+    protected _contentScaleRatio: number;
+    /**
+     * Rendering ground id of all the mesh in the button
+     */
+    set renderingGroupId(id: number);
+    get renderingGroupId(): number;
+    /**
+     * Gets or sets the image url for the button
+     */
+    get imageUrl(): string;
+    set imageUrl(value: string);
+    /**
+     * Creates a new slate
+     * @param name defines the control name
+     */
+    constructor(name?: string);
+    /**
+     * Apply the facade texture (created from the content property).
+     * This function can be overloaded by child classes
+     * @param facadeTexture defines the AdvancedDynamicTexture to use
+     */
+    protected _applyFacade(facadeTexture: AdvancedDynamicTexture): void;
+    private _rebuildContent;
+    private _addControl;
+    protected _getTypeName(): string;
+    /**
+     * @hidden
+     */
+    _positionElements(): void;
+    private _applyContentViewport;
+    private _resetContentPositionAndZoom;
+    /**
+     * @hidden
+     */
+    _updatePivot(): void;
+    protected _createNode(scene: Scene): TransformNode;
+    private _attachContentPlateBehavior;
+    protected _affectMaterial(mesh: AbstractMesh): void;
+    /** @hidden **/
+    _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.
+     */
+    resetDefaultAspectAndPose(): void;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}