@babylonjs/gui 5.0.0-alpha.8 → 5.0.0-beta.10

package/3D/controls/nearMenu.js

@@ -0,0 +1,113 @@
+import { __extends } from "tslib";
+import { TouchHolographicButton } from "./touchHolographicButton.js";
+import { DefaultBehavior } from "../behaviors/defaultBehavior.js";
+import { TouchHolographicMenu } from "./touchHolographicMenu.js";
+/**
+ * NearMenu that displays buttons and follows the camera
+ * @since 5.0.0
+ */
+var NearMenu = /** @class */ (function (_super) {
+    __extends(NearMenu, _super);
+    /**
+     * Creates a near menu GUI 3D control
+     * @param name name of the near menu
+     */
+    function NearMenu(name) {
+        var _this = _super.call(this, name) || this;
+        _this._isPinned = false;
+        _this._defaultBehavior = new DefaultBehavior();
+        _this._dragObserver = _this._defaultBehavior.sixDofDragBehavior.onDragObservable.add(function () {
+            _this.isPinned = true;
+        });
+        _this.backPlateMargin = 1;
+        return _this;
+    }
+    Object.defineProperty(NearMenu.prototype, "defaultBehavior", {
+        /**
+         * Regroups all mesh behaviors for the near menu
+         */
+        get: function () {
+            return this._defaultBehavior;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(NearMenu.prototype, "isPinned", {
+        /**
+         * Indicates if the near menu is world-pinned
+         */
+        get: function () {
+            return this._isPinned;
+        },
+        set: function (value) {
+            // Tell the pin button to toggle if this was called manually, for clean state control
+            if (this._pinButton.isToggled !== value) {
+                this._pinButton.isToggled = value;
+                return;
+            }
+            this._isPinned = value;
+            if (value) {
+                this._defaultBehavior.followBehaviorEnabled = false;
+            }
+            else {
+                this._defaultBehavior.followBehaviorEnabled = true;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    NearMenu.prototype._createPinButton = function (parent) {
+        var _this = this;
+        var control = new TouchHolographicButton("pin" + this.name, false);
+        control.imageUrl = NearMenu.ASSETS_BASE_URL + NearMenu.PIN_ICON_FILENAME;
+        control.parent = this;
+        control._host = this._host;
+        control.isToggleButton = true;
+        control.onToggleObservable.add(function (newState) { _this.isPinned = newState; });
+        if (this._host.utilityLayer) {
+            control._prepareNode(this._host.utilityLayer.utilityLayerScene);
+            control.scaling.scaleInPlace(TouchHolographicMenu.MENU_BUTTON_SCALE);
+            if (control.node) {
+                control.node.parent = parent;
+            }
+        }
+        return control;
+    };
+    NearMenu.prototype._createNode = function (scene) {
+        var node = _super.prototype._createNode.call(this, scene);
+        this._pinButton = this._createPinButton(node);
+        this.isPinned = false;
+        this._defaultBehavior.attach(node, [this._backPlate]);
+        this._defaultBehavior.followBehavior.ignoreCameraPitchAndRoll = true;
+        this._defaultBehavior.followBehavior.pitchOffset = -15;
+        this._defaultBehavior.followBehavior.minimumDistance = 0.3;
+        this._defaultBehavior.followBehavior.defaultDistance = 0.4;
+        this._defaultBehavior.followBehavior.maximumDistance = 0.6;
+        this._backPlate.isNearGrabbable = true;
+        node.isVisible = false;
+        return node;
+    };
+    NearMenu.prototype._finalProcessing = function () {
+        _super.prototype._finalProcessing.call(this);
+        this._pinButton.position.copyFromFloats((this._backPlate.scaling.x + TouchHolographicMenu.MENU_BUTTON_SCALE) / 2, this._backPlate.scaling.y / 2, 0);
+    };
+    /**
+     * Disposes the near menu
+     */
+    NearMenu.prototype.dispose = function () {
+        _super.prototype.dispose.call(this);
+        this._defaultBehavior.sixDofDragBehavior.onDragObservable.remove(this._dragObserver);
+        this._defaultBehavior.detach();
+    };
+    /**
+     * Base Url for the assets.
+     */
+    NearMenu.ASSETS_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
+    /**
+     * File name for the close icon.
+     */
+    NearMenu.PIN_ICON_FILENAME = "IconPin.png";
+    return NearMenu;
+}(TouchHolographicMenu));
+export { NearMenu };
+//# sourceMappingURL=nearMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nearMenu.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/nearMenu.ts"],"names":[],"mappings":"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","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 { TouchHolographicButton } from \"./touchHolographicButton\";\r\nimport { DefaultBehavior } from \"../behaviors/defaultBehavior\";\r\nimport { TouchHolographicMenu } from \"./touchHolographicMenu\";\r\nimport { Observer } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { PickingInfo } from \"@babylonjs/core/Collisions/pickingInfo\";\r\n\r\n/**\r\n * NearMenu that displays buttons and follows the camera\r\n * @since 5.0.0\r\n */\r\nexport class NearMenu extends TouchHolographicMenu {\r\n    /**\r\n     * Base Url for the assets.\r\n     */\r\n    private static ASSETS_BASE_URL: string = \"https://assets.babylonjs.com/meshes/MRTK/\";\r\n    /**\r\n     * File name for the close icon.\r\n     */\r\n    private static PIN_ICON_FILENAME: string = \"IconPin.png\";\r\n\r\n    private _pinButton: TouchHolographicButton;\r\n    private _dragObserver: Nullable<\r\n        Observer<{\r\n            delta: Vector3;\r\n            position: Vector3;\r\n            pickInfo: PickingInfo;\r\n        }>\r\n    >;\r\n\r\n    private _defaultBehavior: DefaultBehavior;\r\n    /**\r\n     * Regroups all mesh behaviors for the near menu\r\n     */\r\n    public get defaultBehavior(): DefaultBehavior {\r\n        return this._defaultBehavior;\r\n    }\r\n\r\n    private _isPinned: boolean = false;\r\n    /**\r\n     * Indicates if the near menu is world-pinned\r\n     */\r\n    public get isPinned(): boolean {\r\n        return this._isPinned;\r\n    }\r\n\r\n    public set isPinned(value: boolean) {\r\n        // Tell the pin button to toggle if this was called manually, for clean state control\r\n        if (this._pinButton.isToggled !== value) {\r\n            this._pinButton.isToggled = value;\r\n            return;\r\n        }\r\n\r\n        this._isPinned = value;\r\n\r\n        if (value) {\r\n            this._defaultBehavior.followBehaviorEnabled = false;\r\n        } else {\r\n            this._defaultBehavior.followBehaviorEnabled = true;\r\n        }\r\n    }\r\n\r\n    private _createPinButton(parent: TransformNode) {\r\n        const control = new TouchHolographicButton(\"pin\" + this.name, false);\r\n        control.imageUrl = NearMenu.ASSETS_BASE_URL + NearMenu.PIN_ICON_FILENAME;\r\n        control.parent = this;\r\n        control._host = this._host;\r\n        control.isToggleButton = true;\r\n        control.onToggleObservable.add((newState) => { this.isPinned = newState; });\r\n\r\n        if (this._host.utilityLayer) {\r\n            control._prepareNode(this._host.utilityLayer.utilityLayerScene);\r\n            control.scaling.scaleInPlace(TouchHolographicMenu.MENU_BUTTON_SCALE);\r\n\r\n            if (control.node) {\r\n                control.node.parent = parent;\r\n            }\r\n        }\r\n\r\n        return control;\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._pinButton = this._createPinButton(node);\r\n        this.isPinned = false;\r\n\r\n        this._defaultBehavior.attach(node, [this._backPlate]);\r\n        this._defaultBehavior.followBehavior.ignoreCameraPitchAndRoll = true;\r\n        this._defaultBehavior.followBehavior.pitchOffset = -15;\r\n        this._defaultBehavior.followBehavior.minimumDistance = 0.3;\r\n        this._defaultBehavior.followBehavior.defaultDistance = 0.4;\r\n        this._defaultBehavior.followBehavior.maximumDistance = 0.6;\r\n\r\n        this._backPlate.isNearGrabbable = true;\r\n        node.isVisible = false;\r\n\r\n        return node;\r\n    }\r\n\r\n    protected _finalProcessing() {\r\n        super._finalProcessing();\r\n\r\n        this._pinButton.position.copyFromFloats((this._backPlate.scaling.x + TouchHolographicMenu.MENU_BUTTON_SCALE) / 2, this._backPlate.scaling.y / 2, 0);\r\n    }\r\n\r\n    /**\r\n     * Creates a near menu GUI 3D control\r\n     * @param name name of the near menu\r\n     */\r\n    constructor(name?: string) {\r\n        super(name);\r\n\r\n        this._defaultBehavior = new DefaultBehavior();\r\n        this._dragObserver = this._defaultBehavior.sixDofDragBehavior.onDragObservable.add(() => {\r\n            this.isPinned = true;\r\n        });\r\n\r\n        this.backPlateMargin = 1;\r\n    }\r\n\r\n    /**\r\n     * Disposes the near menu\r\n     */\r\n    public dispose() {\r\n        super.dispose();\r\n\r\n        this._defaultBehavior.sixDofDragBehavior.onDragObservable.remove(this._dragObserver);\r\n        this._defaultBehavior.detach();\r\n    }\r\n}\r\n"]}

package/3D/controls/planePanel.js

@@ -1,7 +1,7 @@
 import { __extends } from "tslib";
-import { TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector";
-import { Container3D } from "./container3D";
-import { VolumeBasedPanel } from "./volumeBasedPanel";
+import { TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Container3D } from "./container3D.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
 /**
  * Class used to create a container panel deployed on the surface of a plane
  */

package/3D/controls/scatterPanel.js

@@ -1,8 +1,8 @@
 import { __extends } from "tslib";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector";
-import { VolumeBasedPanel } from "./volumeBasedPanel";
-import { Container3D } from "./container3D";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+import { Container3D } from "./container3D.js";
 /**
  * Class used to create a container panel where items get randomized planar mapping
  */

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

@@ -0,0 +1,80 @@
+import { Nullable } from "@babylonjs/core/types";
+import { Observable } from "@babylonjs/core/Misc/observable";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
+import { Scene } from "@babylonjs/core/scene";
+import { Control3D } from "./control3D";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
+import { MRDLSliderBarMaterial } from "../materials/mrdl/mrdlSliderBarMaterial";
+import { MRDLSliderThumbMaterial } from "../materials/mrdl/mrdlSliderThumbMaterial";
+import { MRDLBackplateMaterial } from "../materials/mrdl/mrdlBackplateMaterial";
+/**
+ * Class used to create a slider in 3D
+ */
+export declare class Slider3D extends Control3D {
+    /**
+     * Base Url for the models.
+     */
+    static MODEL_BASE_URL: string;
+    /**
+     * File name for the 8x4 model.
+     */
+    static MODEL_FILENAME: string;
+    private _sliderBackplate;
+    private _sliderBackplateMaterial;
+    private _sliderBarMaterial;
+    private _sliderThumbMaterial;
+    private _sliderThumb;
+    private _sliderBar;
+    private _sliderBackplateVisible;
+    private _minimum;
+    private _maximum;
+    private _value;
+    private _step;
+    /** Observable raised when the sldier value changes */
+    onValueChangedObservable: Observable<number>;
+    /**
+     * Creates a new slider
+     * @param name defines the control name
+     * @param sliderBackplateVisible defines if the control has a backplate, default is false
+     */
+    constructor(name?: string, sliderBackplateVisible?: boolean);
+    /**
+     * Gets the mesh used to render this control
+     */
+    get mesh(): Nullable<AbstractMesh>;
+    /** Gets or sets minimum value */
+    get minimum(): number;
+    set minimum(value: number);
+    /** Gets or sets maximum value */
+    get maximum(): number;
+    set maximum(value: number);
+    /** Gets or sets step value */
+    get step(): number;
+    set step(value: number);
+    /** Gets or sets current value */
+    get value(): number;
+    set value(value: number);
+    protected get start(): number;
+    protected get end(): number;
+    /**
+     * Gets the slider bar material used by this control
+     */
+    get sliderBarMaterial(): MRDLSliderBarMaterial;
+    /**
+     * Gets the slider thumb material used by this control
+     */
+    get sliderThumbMaterial(): MRDLSliderThumbMaterial;
+    /**
+     * Gets the slider backplate material used by this control
+     */
+    get sliderBackplateMaterial(): MRDLBackplateMaterial;
+    protected _createNode(scene: Scene): TransformNode;
+    protected _affectMaterial(mesh: AbstractMesh): void;
+    private _createBehavior;
+    private _convertToPosition;
+    private _convertToValue;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}

package/3D/controls/slider3D.js

@@ -0,0 +1,268 @@
+import { __extends } from "tslib";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Control3D } from "./control3D.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { PointerDragBehavior } from "@babylonjs/core/Behaviors/Meshes/pointerDragBehavior.js";
+import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader.js";
+import { MRDLSliderBarMaterial } from "../materials/mrdl/mrdlSliderBarMaterial.js";
+import { MRDLSliderThumbMaterial } from "../materials/mrdl/mrdlSliderThumbMaterial.js";
+import { MRDLBackplateMaterial } from "../materials/mrdl/mrdlBackplateMaterial.js";
+var SLIDER_MIN = 0;
+var SLIDER_MAX = 100;
+var SLIDER_VAL = 50;
+var SLIDER_STEP = 0;
+var SLIDER_SCALING = 1.0;
+var SLIDER_MARGIN = 0.2;
+/**
+ * Class used to create a slider in 3D
+ */
+var Slider3D = /** @class */ (function (_super) {
+    __extends(Slider3D, _super);
+    /**
+     * Creates a new slider
+     * @param name defines the control name
+     * @param sliderBackplateVisible defines if the control has a backplate, default is false
+     */
+    function Slider3D(name, sliderBackplateVisible) {
+        var _this = _super.call(this, name) || this;
+        /** Observable raised when the sldier value changes */
+        _this.onValueChangedObservable = new Observable();
+        _this._sliderBackplateVisible = sliderBackplateVisible || false;
+        _this._minimum = SLIDER_MIN;
+        _this._maximum = SLIDER_MAX;
+        _this._step = SLIDER_STEP;
+        _this._value = SLIDER_VAL;
+        return _this;
+    }
+    Object.defineProperty(Slider3D.prototype, "mesh", {
+        /**
+         * Gets the mesh used to render this control
+         */
+        get: function () {
+            if (this.node) {
+                return this._sliderThumb;
+            }
+            return null;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "minimum", {
+        /** Gets or sets minimum value */
+        get: function () {
+            return this._minimum;
+        },
+        set: function (value) {
+            if (this._minimum === value) {
+                return;
+            }
+            this._minimum = Math.max(value, SLIDER_MIN);
+            this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "maximum", {
+        /** Gets or sets maximum value */
+        get: function () {
+            return this._maximum;
+        },
+        set: function (value) {
+            if (this._maximum === value) {
+                return;
+            }
+            this._maximum = Math.max(value, this._minimum);
+            this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "step", {
+        /** Gets or sets step value */
+        get: function () {
+            return this._step;
+        },
+        set: function (value) {
+            if (this._step === value) {
+                return;
+            }
+            this._step = Math.max(Math.min(value, this._maximum - this._minimum), SLIDER_STEP);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "value", {
+        /** Gets or sets current value */
+        get: function () {
+            return this._value;
+        },
+        set: function (value) {
+            if (this._value === value) {
+                return;
+            }
+            this._value = Math.max(Math.min(value, this._maximum), this._minimum);
+            this.onValueChangedObservable.notifyObservers(this._value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "start", {
+        get: function () {
+            if (!this.node) {
+                return -SLIDER_SCALING / 2;
+            }
+            return this._sliderBar.position.x - this._sliderBar.scaling.x / 2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "end", {
+        get: function () {
+            if (!this.node) {
+                return SLIDER_SCALING / 2;
+            }
+            return this._sliderBar.position.x + this._sliderBar.scaling.x / 2;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "sliderBarMaterial", {
+        /**
+         * Gets the slider bar material used by this control
+         */
+        get: function () {
+            return this._sliderBarMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "sliderThumbMaterial", {
+        /**
+         * Gets the slider thumb material used by this control
+         */
+        get: function () {
+            return this._sliderThumbMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Slider3D.prototype, "sliderBackplateMaterial", {
+        /**
+         * Gets the slider backplate material used by this control
+         */
+        get: function () {
+            return this._sliderBackplateMaterial;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    // Mesh association
+    Slider3D.prototype._createNode = function (scene) {
+        var _this = this;
+        var sliderBackplate = CreateBox("".concat(this.name, "_sliderbackplate"), {
+            width: 1.0,
+            height: 1.0,
+            depth: 1.0,
+        }, scene);
+        sliderBackplate.isPickable = false;
+        sliderBackplate.visibility = 0;
+        sliderBackplate.scaling = new Vector3(1, 0.5, 0.8);
+        SceneLoader.ImportMeshAsync(undefined, Slider3D.MODEL_BASE_URL, Slider3D.MODEL_FILENAME, scene)
+            .then(function (result) {
+            var sliderBackplateModel = result.meshes[1];
+            var sliderBarModel = result.meshes[1].clone("".concat(_this.name, "_sliderbar"), sliderBackplate);
+            var sliderThumbModel = result.meshes[1].clone("".concat(_this.name, "_sliderthumb"), sliderBackplate);
+            sliderBackplateModel.visibility = 0;
+            if (_this._sliderBackplateVisible) {
+                sliderBackplateModel.visibility = 1;
+                sliderBackplateModel.name = "".concat(_this.name, "_sliderbackplate");
+                sliderBackplateModel.isPickable = false;
+                sliderBackplateModel.scaling.x = 1;
+                sliderBackplateModel.scaling.z = 0.2;
+                sliderBackplateModel.parent = sliderBackplate;
+                if (!!_this._sliderBackplateMaterial) {
+                    sliderBackplateModel.material = _this._sliderBackplateMaterial;
+                }
+                _this._sliderBackplate = sliderBackplateModel;
+            }
+            if (!!sliderBarModel) {
+                sliderBarModel.parent = sliderBackplate;
+                sliderBarModel.position.z = -0.1;
+                sliderBarModel.scaling = new Vector3(SLIDER_SCALING - SLIDER_MARGIN, 0.04, 0.3);
+                sliderBarModel.isPickable = false;
+                if (!!_this._sliderBarMaterial) {
+                    sliderBarModel.material = _this._sliderBarMaterial;
+                }
+                _this._sliderBar = sliderBarModel;
+            }
+            if (!!sliderThumbModel) {
+                sliderThumbModel.parent = sliderBackplate;
+                sliderThumbModel.isPickable = true;
+                sliderThumbModel.position.z = -0.115;
+                sliderThumbModel.scaling = new Vector3(0.025, 0.3, 0.6);
+                sliderThumbModel.position.x = _this._convertToPosition(_this.value);
+                sliderThumbModel.addBehavior(_this._createBehavior());
+                if (!!_this._sliderThumbMaterial) {
+                    sliderThumbModel.material = _this._sliderThumbMaterial;
+                }
+                _this._sliderThumb = sliderThumbModel;
+            }
+        });
+        this._affectMaterial(sliderBackplate);
+        return sliderBackplate;
+    };
+    Slider3D.prototype._affectMaterial = function (mesh) {
+        var _a, _b, _c;
+        this._sliderBackplateMaterial = (_a = this._sliderBackplateMaterial) !== null && _a !== void 0 ? _a : new MRDLBackplateMaterial("".concat(this.name, "_sliderbackplate_material"), mesh.getScene());
+        this._sliderBarMaterial = (_b = this._sliderBarMaterial) !== null && _b !== void 0 ? _b : new MRDLSliderBarMaterial("".concat(this.name, "_sliderbar_material"), mesh.getScene());
+        this._sliderThumbMaterial = (_c = this._sliderThumbMaterial) !== null && _c !== void 0 ? _c : new MRDLSliderThumbMaterial("".concat(this.name, "_sliderthumb_material"), mesh.getScene());
+    };
+    Slider3D.prototype._createBehavior = function () {
+        var _this = this;
+        var pointerDragBehavior = new PointerDragBehavior({ dragAxis: Vector3.Right() });
+        pointerDragBehavior.moveAttached = false;
+        pointerDragBehavior.onDragObservable.add(function (event) {
+            var newPosition = _this._sliderThumb.position.x + event.dragDistance / _this.scaling.x;
+            _this._sliderThumb.position.x = Math.max(Math.min(newPosition, _this.end), _this.start);
+            _this.value = _this._convertToValue(_this._sliderThumb.position.x);
+        });
+        pointerDragBehavior.onDragEndObservable.add(function (event) {
+            _this._sliderThumb.position.x = _this._convertToPosition(_this.value);
+        });
+        return pointerDragBehavior;
+    };
+    Slider3D.prototype._convertToPosition = function (value) {
+        var position = ((value - this.minimum) / (this.maximum - this.minimum)) * (this.end - this.start) + this.start;
+        return Math.min(Math.max(position, this.start), this.end);
+    };
+    Slider3D.prototype._convertToValue = function (position) {
+        var value = ((position - this.start) / (this.end - this.start)) * (this.maximum - this.minimum);
+        value = this.step ? Math.round(value / this.step) * this.step : value;
+        return Math.max(Math.min(this.minimum + value, this._maximum), this._minimum);
+    };
+    /**
+     * Releases all associated resources
+     */
+    Slider3D.prototype.dispose = function () {
+        var _a, _b, _c, _d, _e, _f;
+        _super.prototype.dispose.call(this);
+        (_a = this._sliderBar) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this._sliderThumb) === null || _b === void 0 ? void 0 : _b.dispose();
+        (_c = this._sliderBarMaterial) === null || _c === void 0 ? void 0 : _c.dispose();
+        (_d = this._sliderThumbMaterial) === null || _d === void 0 ? void 0 : _d.dispose();
+        (_e = this._sliderBackplate) === null || _e === void 0 ? void 0 : _e.dispose();
+        (_f = this._sliderBackplateMaterial) === null || _f === void 0 ? void 0 : _f.dispose();
+    };
+    /**
+     * Base Url for the models.
+     */
+    Slider3D.MODEL_BASE_URL = "https://assets.babylonjs.com/meshes/MRTK/";
+    /**
+     * File name for the 8x4 model.
+     */
+    Slider3D.MODEL_FILENAME = 'mrtk-fluent-backplate.glb';
+    return Slider3D;
+}(Control3D));
+export { Slider3D };
+//# sourceMappingURL=slider3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider3D.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/controls/slider3D.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAE3F,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,MAAM,2CAA2C,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAEhF,IAAM,UAAU,GAAW,CAAC,CAAC;AAC7B,IAAM,UAAU,GAAW,GAAG,CAAC;AAC/B,IAAM,UAAU,GAAW,EAAE,CAAC;AAC9B,IAAM,WAAW,GAAW,CAAC,CAAC;AAC9B,IAAM,cAAc,GAAW,GAAG,CAAC;AACnC,IAAM,aAAa,GAAW,GAAG,CAAC;AAElC;;GAEG;AACH;IAA8B,4BAAS;IA2BnC;;;;OAIG;IACH,kBAAY,IAAa,EAAE,sBAAgC;QAA3D,YACI,kBAAM,IAAI,CAAC,SAOd;QAhBD,sDAAsD;QAC/C,8BAAwB,GAAG,IAAI,UAAU,EAAU,CAAC;QASvD,KAAI,CAAC,uBAAuB,GAAG,sBAAsB,IAAI,KAAK,CAAC;QAE/D,KAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC3B,KAAI,CAAC,QAAQ,GAAG,UAAU,CAAC;QAC3B,KAAI,CAAC,KAAK,GAAG,WAAW,CAAC;QACzB,KAAI,CAAC,MAAM,GAAG,UAAU,CAAC;;IAC7B,CAAC;IAKD,sBAAW,0BAAI;QAHf;;WAEG;aACH;YACI,IAAI,IAAI,CAAC,IAAI,EAAE;gBACX,OAAO,IAAI,CAAC,YAAY,CAAC;aAC5B;YAED,OAAO,IAAI,CAAC;QAChB,CAAC;;;OAAA;IAGD,sBAAW,6BAAO;QADlB,iCAAiC;aACjC;YACI,OAAO,IAAI,CAAC,QAAQ,CAAC;QACzB,CAAC;aAED,UAAmB,KAAa;YAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;gBACzB,OAAO;aACV;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;YAC5C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChF,CAAC;;;OATA;IAYD,sBAAW,6BAAO;QADlB,iCAAiC;aACjC;YACI,OAAO,IAAI,CAAC,QAAQ,CAAC;QACzB,CAAC;aAED,UAAmB,KAAa;YAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;gBACzB,OAAO;aACV;YAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC/C,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChF,CAAC;;;OATA;IAYD,sBAAW,0BAAI;QADf,8BAA8B;aAC9B;YACI,OAAO,IAAI,CAAC,KAAK,CAAC;QACtB,CAAC;aAED,UAAgB,KAAa;YACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE;gBACtB,OAAO;aACV;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,CAAC;QACvF,CAAC;;;OARA;IAWD,sBAAW,2BAAK;QADhB,iCAAiC;aACjC;YACI,OAAO,IAAI,CAAC,MAAM,CAAC;QACvB,CAAC;aAED,UAAiB,KAAa;YAC1B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACvB,OAAO;aACV;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACtE,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,CAAC;;;OATA;IAWD,sBAAc,2BAAK;aAAnB;YACI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACZ,OAAO,CAAC,cAAc,GAAG,CAAC,CAAC;aAC9B;YAED,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;QACtE,CAAC;;;OAAA;IAED,sBAAc,yBAAG;aAAjB;YACI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBACZ,OAAO,cAAc,GAAG,CAAC,CAAC;aAC7B;YAED,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;QACtE,CAAC;;;OAAA;IAKD,sBAAW,uCAAiB;QAH5B;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,kBAAkB,CAAC;QACnC,CAAC;;;OAAA;IAKD,sBAAW,yCAAmB;QAH9B;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,oBAAoB,CAAC;QACrC,CAAC;;;OAAA;IAKD,sBAAW,6CAAuB;QAHlC;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,wBAAwB,CAAC;QACzC,CAAC;;;OAAA;IAED,mBAAmB;IACT,8BAAW,GAArB,UAAsB,KAAY;QAAlC,iBA6DC;QA5DG,IAAM,eAAe,GAAG,SAAS,CAAC,UAAG,IAAI,CAAC,IAAI,qBAAkB,EAAE;YAC9D,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,KAAK,EAAE,GAAG;SACb,EAAE,KAAK,CAAC,CAAC;QACV,eAAe,CAAC,UAAU,GAAG,KAAK,CAAC;QACnC,eAAe,CAAC,UAAU,GAAG,CAAC,CAAC;QAC/B,eAAe,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAEnD,WAAW,CAAC,eAAe,CACvB,SAAS,EACT,QAAQ,CAAC,cAAc,EACvB,QAAQ,CAAC,cAAc,EACvB,KAAK,CAAC;aACL,IAAI,CAAC,UAAC,MAAM;YACT,IAAM,oBAAoB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAC9C,IAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAG,KAAI,CAAC,IAAI,eAAY,EAAE,eAAe,CAAC,CAAC;YACzF,IAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAG,KAAI,CAAC,IAAI,iBAAc,EAAE,eAAe,CAAC,CAAC;YAC7F,oBAAoB,CAAC,UAAU,GAAG,CAAC,CAAC;YAEpC,IAAI,KAAI,CAAC,uBAAuB,EAAE;gBAC9B,oBAAoB,CAAC,UAAU,GAAG,CAAC,CAAC;gBACpC,oBAAoB,CAAC,IAAI,GAAG,UAAG,KAAI,CAAC,IAAI,qBAAkB,CAAC;gBAC3D,oBAAoB,CAAC,UAAU,GAAG,KAAK,CAAC;gBACxC,oBAAoB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;gBACnC,oBAAoB,CAAC,OAAO,CAAC,CAAC,GAAG,GAAG,CAAC;gBACrC,oBAAoB,CAAC,MAAM,GAAG,eAAe,CAAC;gBAC9C,IAAI,CAAC,CAAC,KAAI,CAAC,wBAAwB,EAAE;oBACjC,oBAAoB,CAAC,QAAQ,GAAG,KAAI,CAAC,wBAAwB,CAAC;iBACjE;gBACD,KAAI,CAAC,gBAAgB,GAAG,oBAAoB,CAAC;aAChD;YAED,IAAI,CAAC,CAAC,cAAc,EAAE;gBAClB,cAAc,CAAC,MAAM,GAAG,eAAe,CAAC;gBACxC,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,cAAc,GAAG,aAAa,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;gBAChF,cAAc,CAAC,UAAU,GAAG,KAAK,CAAC;gBAClC,IAAI,CAAC,CAAC,KAAI,CAAC,kBAAkB,EAAE;oBAC3B,cAAc,CAAC,QAAQ,GAAG,KAAI,CAAC,kBAAkB,CAAC;iBACrD;gBACD,KAAI,CAAC,UAAU,GAAG,cAAc,CAAC;aACpC;YAED,IAAI,CAAC,CAAC,gBAAgB,EAAE;gBACpB,gBAAgB,CAAC,MAAM,GAAG,eAAe,CAAC;gBAC1C,gBAAgB,CAAC,UAAU,GAAG,IAAI,CAAC;gBACnC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;gBACrC,gBAAgB,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBACxD,gBAAgB,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAI,CAAC,kBAAkB,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;gBAClE,gBAAgB,CAAC,WAAW,CAAC,KAAI,CAAC,eAAe,EAAE,CAAC,CAAC;gBACrD,IAAI,CAAC,CAAC,KAAI,CAAC,oBAAoB,EAAE;oBAC7B,gBAAgB,CAAC,QAAQ,GAAG,KAAI,CAAC,oBAAoB,CAAC;iBACzD;gBACD,KAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;aACxC;QACL,CAAC,CAAC,CAAC;QAEP,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACtC,OAAO,eAAe,CAAC;IAC3B,CAAC;IAES,kCAAe,GAAzB,UAA0B,IAAkB;;QACxC,IAAI,CAAC,wBAAwB,GAAG,MAAA,IAAI,CAAC,wBAAwB,mCAAI,IAAI,qBAAqB,CAAC,UAAG,IAAI,CAAC,IAAI,8BAA2B,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACrJ,IAAI,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,kBAAkB,mCAAI,IAAI,qBAAqB,CAAC,UAAG,IAAI,CAAC,IAAI,wBAAqB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACnI,IAAI,CAAC,oBAAoB,GAAG,MAAA,IAAI,CAAC,oBAAoB,mCAAI,IAAI,uBAAuB,CAAC,UAAG,IAAI,CAAC,IAAI,0BAAuB,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC/I,CAAC;IAEO,kCAAe,GAAvB;QAAA,iBAeC;QAdG,IAAM,mBAAmB,GAAG,IAAI,mBAAmB,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACnF,mBAAmB,CAAC,YAAY,GAAG,KAAK,CAAC;QAEzC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAC,KAAK;YAC3C,IAAM,WAAW,GAAG,KAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,GAAG,KAAI,CAAC,OAAO,CAAC,CAAC,CAAC;YACvF,KAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,KAAI,CAAC,GAAG,CAAC,EAAE,KAAI,CAAC,KAAK,CAAC,CAAC;YACrF,KAAI,CAAC,KAAK,GAAG,KAAI,CAAC,eAAe,CAAC,KAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC,CAAC;QAEH,mBAAmB,CAAC,mBAAmB,CAAC,GAAG,CAAC,UAAC,KAAK;YAC9C,KAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG,KAAI,CAAC,kBAAkB,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC;QACvE,CAAC,CAAC,CAAC;QAEH,OAAO,mBAAmB,CAAC;IAC/B,CAAC;IAEO,qCAAkB,GAA1B,UAA2B,KAAa;QACpC,IAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QACjH,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9D,CAAC;IAEO,kCAAe,GAAvB,UAAwB,QAAgB;QACpC,IAAI,KAAK,GAAG,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAChG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAEtE,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClF,CAAC;IAED;;OAEG;IACI,0BAAO,GAAd;;QACI,iBAAM,OAAO,WAAE,CAAC;QAChB,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,EAAE,CAAC;QAC3B,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,EAAE,CAAC;QAC7B,MAAA,IAAI,CAAC,kBAAkB,0CAAE,OAAO,EAAE,CAAC;QACnC,MAAA,IAAI,CAAC,oBAAoB,0CAAE,OAAO,EAAE,CAAC;QACrC,MAAA,IAAI,CAAC,gBAAgB,0CAAE,OAAO,EAAE,CAAC;QACjC,MAAA,IAAI,CAAC,wBAAwB,0CAAE,OAAO,EAAE,CAAC;IAC7C,CAAC;IA9PD;;OAEG;IACW,uBAAc,GAAW,2CAA2C,CAAC;IAEnF;;OAEG;IACW,uBAAc,GAAW,2BAA2B,CAAC;IAuPvE,eAAC;CAAA,AAhQD,CAA8B,SAAS,GAgQtC;SAhQY,QAAQ","sourcesContent":["import { Nullable } from \"@babylonjs/core/types\";\r\nimport { Observable } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Scene } from \"@babylonjs/core/scene\";\r\nimport { Control3D } from \"./control3D\";\r\nimport { CreateBox } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { PointerDragBehavior } from \"@babylonjs/core/Behaviors/Meshes/pointerDragBehavior\";\r\nimport { AbstractMesh } from \"@babylonjs/core/Meshes/abstractMesh\";\r\nimport { SceneLoader } from \"@babylonjs/core/Loading/sceneLoader\";\r\nimport { MRDLSliderBarMaterial } from \"../materials/mrdl/mrdlSliderBarMaterial\";\r\nimport { MRDLSliderThumbMaterial } from \"../materials/mrdl/mrdlSliderThumbMaterial\";\r\nimport { MRDLBackplateMaterial } from \"../materials/mrdl/mrdlBackplateMaterial\";\r\n\r\nconst SLIDER_MIN: number = 0;\r\nconst SLIDER_MAX: number = 100;\r\nconst SLIDER_VAL: number = 50;\r\nconst SLIDER_STEP: number = 0;\r\nconst SLIDER_SCALING: number = 1.0;\r\nconst SLIDER_MARGIN: number = 0.2;\r\n\r\n/**\r\n * Class used to create a slider in 3D\r\n */\r\nexport class Slider3D extends Control3D {\r\n    /**\r\n     * Base Url for the models.\r\n     */\r\n    public static MODEL_BASE_URL: string = \"https://assets.babylonjs.com/meshes/MRTK/\";\r\n\r\n    /**\r\n     * File name for the 8x4 model.\r\n     */\r\n    public static MODEL_FILENAME: string = 'mrtk-fluent-backplate.glb';\r\n\r\n    private _sliderBackplate: AbstractMesh;\r\n    private _sliderBackplateMaterial: MRDLBackplateMaterial;\r\n    private _sliderBarMaterial: MRDLSliderBarMaterial;\r\n    private _sliderThumbMaterial: MRDLSliderThumbMaterial;\r\n    private _sliderThumb: AbstractMesh;\r\n    private _sliderBar: AbstractMesh;\r\n    private _sliderBackplateVisible: boolean;\r\n\r\n    private _minimum: number;\r\n    private _maximum: number;\r\n    private _value: number;\r\n    private _step: number;\r\n\r\n    /** Observable raised when the sldier value changes */\r\n    public onValueChangedObservable = new Observable<number>();\r\n\r\n    /**\r\n     * Creates a new slider\r\n     * @param name defines the control name\r\n     * @param sliderBackplateVisible defines if the control has a backplate, default is false\r\n     */\r\n    constructor(name?: string, sliderBackplateVisible?: boolean) {\r\n        super(name);\r\n        this._sliderBackplateVisible = sliderBackplateVisible || false;\r\n\r\n        this._minimum = SLIDER_MIN;\r\n        this._maximum = SLIDER_MAX;\r\n        this._step = SLIDER_STEP;\r\n        this._value = SLIDER_VAL;\r\n    }\r\n\r\n    /**\r\n     * Gets the mesh used to render this control\r\n     */\r\n    public get mesh(): Nullable<AbstractMesh> {\r\n        if (this.node) {\r\n            return this._sliderThumb;\r\n        }\r\n\r\n        return null;\r\n    }\r\n\r\n    /** Gets or sets minimum value */\r\n    public get minimum(): number {\r\n        return this._minimum;\r\n    }\r\n\r\n    public set minimum(value: number) {\r\n        if (this._minimum === value) {\r\n            return;\r\n        }\r\n\r\n        this._minimum = Math.max(value, SLIDER_MIN);\r\n        this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /** Gets or sets maximum value */\r\n    public get maximum(): number {\r\n        return this._maximum;\r\n    }\r\n\r\n    public set maximum(value: number) {\r\n        if (this._maximum === value) {\r\n            return;\r\n        }\r\n\r\n        this._maximum = Math.max(value, this._minimum);\r\n        this._value = Math.max(Math.min(this._value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /** Gets or sets step value */\r\n    public get step(): number {\r\n        return this._step;\r\n    }\r\n\r\n    public set step(value: number) {\r\n        if (this._step === value) {\r\n            return;\r\n        }\r\n\r\n        this._step = Math.max(Math.min(value, this._maximum - this._minimum), SLIDER_STEP);\r\n    }\r\n\r\n    /** Gets or sets current value */\r\n    public get value(): number {\r\n        return this._value;\r\n    }\r\n\r\n    public set value(value: number) {\r\n        if (this._value === value) {\r\n            return;\r\n        }\r\n\r\n        this._value = Math.max(Math.min(value, this._maximum), this._minimum);\r\n        this.onValueChangedObservable.notifyObservers(this._value);\r\n    }\r\n\r\n    protected get start(): number {\r\n        if (!this.node) {\r\n            return -SLIDER_SCALING / 2;\r\n        }\r\n\r\n        return this._sliderBar.position.x - this._sliderBar.scaling.x / 2;\r\n    }\r\n\r\n    protected get end(): number {\r\n        if (!this.node) {\r\n            return SLIDER_SCALING / 2;\r\n        }\r\n\r\n        return this._sliderBar.position.x + this._sliderBar.scaling.x / 2;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider bar material used by this control\r\n     */\r\n    public get sliderBarMaterial(): MRDLSliderBarMaterial {\r\n        return this._sliderBarMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider thumb material used by this control\r\n     */\r\n    public get sliderThumbMaterial(): MRDLSliderThumbMaterial {\r\n        return this._sliderThumbMaterial;\r\n    }\r\n\r\n    /**\r\n     * Gets the slider backplate material used by this control\r\n     */\r\n    public get sliderBackplateMaterial(): MRDLBackplateMaterial {\r\n        return this._sliderBackplateMaterial;\r\n    }\r\n\r\n    // Mesh association\r\n    protected _createNode(scene: Scene): TransformNode {\r\n        const sliderBackplate = CreateBox(`${this.name}_sliderbackplate`, {\r\n            width: 1.0,\r\n            height: 1.0,\r\n            depth: 1.0,\r\n        }, scene);\r\n        sliderBackplate.isPickable = false;\r\n        sliderBackplate.visibility = 0;\r\n        sliderBackplate.scaling = new Vector3(1, 0.5, 0.8);\r\n\r\n        SceneLoader.ImportMeshAsync(\r\n            undefined,\r\n            Slider3D.MODEL_BASE_URL,\r\n            Slider3D.MODEL_FILENAME,\r\n            scene)\r\n            .then((result) => {\r\n                const sliderBackplateModel = result.meshes[1];\r\n                const sliderBarModel = result.meshes[1].clone(`${this.name}_sliderbar`, sliderBackplate);\r\n                const sliderThumbModel = result.meshes[1].clone(`${this.name}_sliderthumb`, sliderBackplate);\r\n                sliderBackplateModel.visibility = 0;\r\n\r\n                if (this._sliderBackplateVisible) {\r\n                    sliderBackplateModel.visibility = 1;\r\n                    sliderBackplateModel.name = `${this.name}_sliderbackplate`;\r\n                    sliderBackplateModel.isPickable = false;\r\n                    sliderBackplateModel.scaling.x = 1;\r\n                    sliderBackplateModel.scaling.z = 0.2;\r\n                    sliderBackplateModel.parent = sliderBackplate;\r\n                    if (!!this._sliderBackplateMaterial) {\r\n                        sliderBackplateModel.material = this._sliderBackplateMaterial;\r\n                    }\r\n                    this._sliderBackplate = sliderBackplateModel;\r\n                }\r\n\r\n                if (!!sliderBarModel) {\r\n                    sliderBarModel.parent = sliderBackplate;\r\n                    sliderBarModel.position.z = -0.1;\r\n                    sliderBarModel.scaling = new Vector3(SLIDER_SCALING - SLIDER_MARGIN, 0.04, 0.3);\r\n                    sliderBarModel.isPickable = false;\r\n                    if (!!this._sliderBarMaterial) {\r\n                        sliderBarModel.material = this._sliderBarMaterial;\r\n                    }\r\n                    this._sliderBar = sliderBarModel;\r\n                }\r\n\r\n                if (!!sliderThumbModel) {\r\n                    sliderThumbModel.parent = sliderBackplate;\r\n                    sliderThumbModel.isPickable = true;\r\n                    sliderThumbModel.position.z = -0.115;\r\n                    sliderThumbModel.scaling = new Vector3(0.025, 0.3, 0.6);\r\n                    sliderThumbModel.position.x = this._convertToPosition(this.value);\r\n                    sliderThumbModel.addBehavior(this._createBehavior());\r\n                    if (!!this._sliderThumbMaterial) {\r\n                        sliderThumbModel.material = this._sliderThumbMaterial;\r\n                    }\r\n                    this._sliderThumb = sliderThumbModel;\r\n                }\r\n            });\r\n\r\n        this._affectMaterial(sliderBackplate);\r\n        return sliderBackplate;\r\n    }\r\n\r\n    protected _affectMaterial(mesh: AbstractMesh) {\r\n        this._sliderBackplateMaterial = this._sliderBackplateMaterial ?? new MRDLBackplateMaterial(`${this.name}_sliderbackplate_material`, mesh.getScene());\r\n        this._sliderBarMaterial = this._sliderBarMaterial ?? new MRDLSliderBarMaterial(`${this.name}_sliderbar_material`, mesh.getScene());\r\n        this._sliderThumbMaterial = this._sliderThumbMaterial ?? new MRDLSliderThumbMaterial(`${this.name}_sliderthumb_material`, mesh.getScene());\r\n    }\r\n\r\n    private _createBehavior(): PointerDragBehavior {\r\n        const pointerDragBehavior = new PointerDragBehavior({ dragAxis: Vector3.Right() });\r\n        pointerDragBehavior.moveAttached = false;\r\n\r\n        pointerDragBehavior.onDragObservable.add((event) => {\r\n            const newPosition = this._sliderThumb.position.x + event.dragDistance / this.scaling.x;\r\n            this._sliderThumb.position.x = Math.max(Math.min(newPosition, this.end), this.start);\r\n            this.value = this._convertToValue(this._sliderThumb.position.x);\r\n        });\r\n\r\n        pointerDragBehavior.onDragEndObservable.add((event) => {\r\n            this._sliderThumb.position.x = this._convertToPosition(this.value);\r\n        });\r\n\r\n        return pointerDragBehavior;\r\n    }\r\n\r\n    private _convertToPosition(value: number): number {\r\n        const position = ((value - this.minimum) / (this.maximum - this.minimum)) * (this.end - this.start) + this.start;\r\n        return Math.min(Math.max(position, this.start), this.end);\r\n    }\r\n\r\n    private _convertToValue(position: number): number {\r\n        let value = ((position - this.start) / (this.end - this.start)) * (this.maximum - this.minimum);\r\n        value = this.step ? Math.round(value / this.step) * this.step : value;\r\n\r\n        return Math.max(Math.min(this.minimum + value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /**\r\n     * Releases all associated resources\r\n     */\r\n    public dispose() {\r\n        super.dispose();\r\n        this._sliderBar?.dispose();\r\n        this._sliderThumb?.dispose();\r\n        this._sliderBarMaterial?.dispose();\r\n        this._sliderThumbMaterial?.dispose();\r\n        this._sliderBackplate?.dispose();\r\n        this._sliderBackplateMaterial?.dispose();\r\n    }\r\n}\r\n"]}

package/3D/controls/spherePanel.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 sphere
  */

package/3D/controls/stackPanel3D.js

@@ -1,7 +1,7 @@
 import { __extends } from "tslib";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { Matrix, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector";
-import { Container3D } from "./container3D";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Matrix, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Container3D } from "./container3D.js";
 /**
  * Class used to create a stack panel in 3D on XY plane
  */

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

@@ -1,8 +1,8 @@
 import { Vector3 } from "@babylonjs/core/Maths/math.vector";
 import { Mesh } from "@babylonjs/core/Meshes/mesh";
-import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
 import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
 import { Scene } from "@babylonjs/core/scene";
+import { Observable } from "@babylonjs/core/Misc/observable";
 import { Button3D } from "./button3D";
 /**
  * Class used to create a touchable button in 3D
@@ -10,16 +10,14 @@ import { Button3D } from "./button3D";
 export declare class TouchButton3D extends Button3D {
     private _collisionMesh;
     private _collidableFrontDirection;
-    private _lastTouchPoint;
-    private _tempButtonForwardRay;
-    private _lastKnownCollidableScale;
-    private _collidableInitialized;
-    private _frontOffset;
-    private _backOffset;
-    private _hoverOffset;
-    private _pushThroughBackOffset;
-    private _activeInteractions;
-    private _previousHeight;
+    protected _isNearPressed: boolean;
+    private _isToggleButton;
+    private _toggleState;
+    private _toggleButtonCallback;
+    /**
+     * An event triggered when the button is toggled. Only fired if 'isToggleButton' is true
+     */
+    onToggleObservable: Observable<boolean>;
     /**
      * Creates a new touchable button
      * @param name defines the control name
@@ -27,25 +25,36 @@ export declare class TouchButton3D extends Button3D {
      */
     constructor(name?: string, collisionMesh?: Mesh);
     /**
-     * Sets the front-facing direction of the button
+     * Sets the front-facing direction of the button. Pass in Vector3.Zero to allow interactions from any direction
      * @param frontDir the forward direction of the button
      */
     set collidableFrontDirection(frontWorldDir: Vector3);
-    private _getWorldMatrixData;
+    /**
+     * Returns the front-facing direction of the button, or Vector3.Zero if there is no 'front'
+     */
+    get collidableFrontDirection(): Vector3;
     /**
      * Sets the mesh used for testing input collision
      * @param collisionMesh the new collision mesh for the button
      */
     set collisionMesh(collisionMesh: Mesh);
-    private _getShortestDistancePointToLine;
-    private _isPrimedForInteraction;
-    private _getPointOnButton;
-    private _updateDistanceOffsets;
-    private _getHeightFromButtonCenter;
-    private _getDistanceOffPlane;
-    private _updateButtonState;
+    /**
+     * Setter for if this TouchButton3D should be treated as a toggle button
+     * @param value If this TouchHolographicButton should act like a toggle button
+     */
+    set isToggleButton(value: boolean);
+    get isToggleButton(): boolean;
+    /**
+     * A public entrypoint to set the toggle state of the TouchHolographicButton. Only works if 'isToggleButton' is true
+     * @param newState The new state to set the TouchHolographicButton's toggle state to
+     */
+    set isToggled(newState: boolean);
+    get isToggled(): boolean;
+    protected _onToggle(newState: boolean): void;
+    private _isInteractionInFrontOfButton;
+    protected _getInteractionHeight(interactionPos: Vector3, basePos: Vector3): number;
     /** @hidden */
-    _collisionCheckForStateChange(mesh: AbstractMesh): void;
+    _generatePointerEventType(providedType: number, nearMeshPosition: Vector3, activeInteractionCount: number): number;
     protected _getTypeName(): string;
     protected _createNode(scene: Scene): TransformNode;
     /**