@onerjs/gui 8.23.1

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

@@ -0,0 +1,44 @@
+import type { Scene } from "@babylonjs/core/scene.js";
+import type { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import { DefaultBehavior } from "../behaviors/defaultBehavior.js";
+import { TouchHolographicMenu } from "./touchHolographicMenu.js";
+/**
+ * NearMenu that displays buttons and follows the camera
+ * @since 5.0.0
+ */
+export declare class NearMenu extends TouchHolographicMenu {
+    /**
+     * Base Url for the assets.
+     */
+    private static _ASSETS_BASE_URL;
+    /**
+     * File name for the close icon.
+     */
+    private static _PIN_ICON_FILENAME;
+    private _pinButton;
+    private _dragObserver;
+    private _defaultBehavior;
+    /**
+     * Regroups all mesh behaviors for the near menu
+     */
+    get defaultBehavior(): DefaultBehavior;
+    private _isPinned;
+    /**
+     * Indicates if the near menu is world-pinned
+     */
+    get isPinned(): boolean;
+    set isPinned(value: boolean);
+    private _createPinButton;
+    protected _createNode(scene: Scene): Nullable<TransformNode>;
+    protected _finalProcessing(): void;
+    /**
+     * Creates a near menu GUI 3D control
+     * @param name name of the near menu
+     */
+    constructor(name?: string);
+    /**
+     * Disposes the near menu
+     */
+    dispose(): void;
+}

package/3D/controls/nearMenu.js

@@ -0,0 +1,103 @@
+import { TouchHolographicButton } from "./touchHolographicButton.js";
+import { DefaultBehavior } from "../behaviors/defaultBehavior.js";
+import { TouchHolographicMenu } from "./touchHolographicMenu.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+/**
+ * NearMenu that displays buttons and follows the camera
+ * @since 5.0.0
+ */
+export class NearMenu extends TouchHolographicMenu {
+    /**
+     * Regroups all mesh behaviors for the near menu
+     */
+    get defaultBehavior() {
+        return this._defaultBehavior;
+    }
+    /**
+     * Indicates if the near menu is world-pinned
+     */
+    get isPinned() {
+        return this._isPinned;
+    }
+    set isPinned(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;
+        }
+    }
+    _createPinButton(parent) {
+        const control = new TouchHolographicButton("pin" + this.name, false);
+        const baseUrl = Tools.GetAssetUrl(NearMenu._ASSETS_BASE_URL);
+        control.imageUrl = baseUrl + NearMenu._PIN_ICON_FILENAME;
+        control.parent = this;
+        control._host = this._host;
+        control.isToggleButton = true;
+        control.onToggleObservable.add((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;
+    }
+    _createNode(scene) {
+        const node = super._createNode(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;
+    }
+    _finalProcessing() {
+        super._finalProcessing();
+        this._pinButton.position.copyFromFloats((this._backPlate.scaling.x + TouchHolographicMenu.MENU_BUTTON_SCALE) / 2, this._backPlate.scaling.y / 2, 0);
+    }
+    /**
+     * Creates a near menu GUI 3D control
+     * @param name name of the near menu
+     */
+    constructor(name) {
+        super(name);
+        this._isPinned = false;
+        this._defaultBehavior = new DefaultBehavior();
+        this._dragObserver = this._defaultBehavior.sixDofDragBehavior.onDragObservable.add(() => {
+            this.isPinned = true;
+        });
+        this.backPlateMargin = 1;
+    }
+    /**
+     * Disposes the near menu
+     */
+    dispose() {
+        super.dispose();
+        this._defaultBehavior.sixDofDragBehavior.onDragObservable.remove(this._dragObserver);
+        this._defaultBehavior.detach();
+    }
+}
+/**
+ * Base Url for the assets.
+ */
+NearMenu._ASSETS_BASE_URL = "https://assets.babylonjs.com/core/MRTK/";
+/**
+ * File name for the close icon.
+ */
+NearMenu._PIN_ICON_FILENAME = "IconPin.png";
+//# sourceMappingURL=nearMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nearMenu.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/nearMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Scene } from \"core/scene\";\r\nimport type { TransformNode } from \"core/Meshes/transformNode\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Mesh } from \"core/Meshes/mesh\";\r\nimport { TouchHolographicButton } from \"./touchHolographicButton\";\r\nimport { DefaultBehavior } from \"../behaviors/defaultBehavior\";\r\nimport { TouchHolographicMenu } from \"./touchHolographicMenu\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport type { PickingInfo } from \"core/Collisions/pickingInfo\";\r\nimport { Tools } from \"core/Misc/tools\";\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/core/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        const baseUrl = Tools.GetAssetUrl(NearMenu._ASSETS_BASE_URL);\r\n        control.imageUrl = baseUrl + 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) => {\r\n            this.isPinned = newState;\r\n        });\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 override _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 override _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 override 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.d.ts

@@ -0,0 +1,9 @@
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import type { Control3D } from "./control3D.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+/**
+ * Class used to create a container panel deployed on the surface of a plane
+ */
+export declare class PlanePanel extends VolumeBasedPanel {
+    protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+}

package/3D/controls/planePanel.js

@@ -0,0 +1,30 @@
+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
+ */
+export class PlanePanel extends VolumeBasedPanel {
+    _mapGridNode(control, nodePosition) {
+        const mesh = control.mesh;
+        if (!mesh) {
+            return;
+        }
+        control.position = nodePosition.clone();
+        const target = TmpVectors.Vector3[0];
+        target.copyFrom(nodePosition);
+        switch (this.orientation) {
+            case Container3D.FACEORIGIN_ORIENTATION:
+            case Container3D.FACEFORWARD_ORIENTATION:
+                target.addInPlace(new Vector3(0, 0, 1));
+                mesh.lookAt(target);
+                break;
+            case Container3D.FACEFORWARDREVERSED_ORIENTATION:
+            case Container3D.FACEORIGINREVERSED_ORIENTATION:
+                target.addInPlace(new Vector3(0, 0, -1));
+                mesh.lookAt(target);
+                break;
+        }
+    }
+}
+//# sourceMappingURL=planePanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"planePanel.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/planePanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,6CAA+B;AAE7D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,gBAAgB;IAClC,YAAY,CAAC,OAAkB,EAAE,YAAqB;QAC5D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAE1B,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,OAAO,CAAC,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAErC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAE9B,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,KAAK,WAAW,CAAC,sBAAsB,CAAC;YACxC,KAAK,WAAW,CAAC,uBAAuB;gBACpC,MAAM,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBACxC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACpB,MAAM;YACV,KAAK,WAAW,CAAC,+BAA+B,CAAC;YACjD,KAAK,WAAW,CAAC,8BAA8B;gBAC3C,MAAM,CAAC,UAAU,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACzC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACpB,MAAM;QACd,CAAC;IACL,CAAC;CACJ","sourcesContent":["import { TmpVectors, Vector3 } from \"core/Maths/math.vector\";\r\n\r\nimport { Container3D } from \"./container3D\";\r\nimport type { Control3D } from \"./control3D\";\r\nimport { VolumeBasedPanel } from \"./volumeBasedPanel\";\r\n\r\n/**\r\n * Class used to create a container panel deployed on the surface of a plane\r\n */\r\nexport class PlanePanel extends VolumeBasedPanel {\r\n    protected _mapGridNode(control: Control3D, nodePosition: Vector3) {\r\n        const mesh = control.mesh;\r\n\r\n        if (!mesh) {\r\n            return;\r\n        }\r\n\r\n        control.position = nodePosition.clone();\r\n        const target = TmpVectors.Vector3[0];\r\n\r\n        target.copyFrom(nodePosition);\r\n\r\n        switch (this.orientation) {\r\n            case Container3D.FACEORIGIN_ORIENTATION:\r\n            case Container3D.FACEFORWARD_ORIENTATION:\r\n                target.addInPlace(new Vector3(0, 0, 1));\r\n                mesh.lookAt(target);\r\n                break;\r\n            case Container3D.FACEFORWARDREVERSED_ORIENTATION:\r\n            case Container3D.FACEORIGINREVERSED_ORIENTATION:\r\n                target.addInPlace(new Vector3(0, 0, -1));\r\n                mesh.lookAt(target);\r\n                break;\r\n        }\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,18 @@
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import type { float } from "@babylonjs/core/types.js";
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+import type { Control3D } from "./control3D.js";
+/**
+ * Class used to create a container panel where items get randomized planar mapping
+ */
+export declare class ScatterPanel extends VolumeBasedPanel {
+    private _iteration;
+    /**
+     * Gets or sets the number of iteration to use to scatter the controls (100 by default)
+     */
+    get iteration(): float;
+    set iteration(value: float);
+    protected _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+    private _scatterMapping;
+    protected _finalProcessing(): void;
+}

package/3D/controls/scatterPanel.js

@@ -0,0 +1,98 @@
+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
+ */
+export class ScatterPanel extends VolumeBasedPanel {
+    constructor() {
+        super(...arguments);
+        this._iteration = 100.0;
+    }
+    /**
+     * Gets or sets the number of iteration to use to scatter the controls (100 by default)
+     */
+    get iteration() {
+        return this._iteration;
+    }
+    set iteration(value) {
+        if (this._iteration === value) {
+            return;
+        }
+        this._iteration = value;
+        Tools.SetImmediate(() => {
+            this._arrangeChildren();
+        });
+    }
+    _mapGridNode(control, nodePosition) {
+        const mesh = control.mesh;
+        const newPos = this._scatterMapping(nodePosition);
+        if (!mesh) {
+            return;
+        }
+        switch (this.orientation) {
+            case Container3D.FACEORIGIN_ORIENTATION:
+            case Container3D.FACEFORWARD_ORIENTATION:
+                mesh.lookAt(new Vector3(0, 0, 1));
+                break;
+            case Container3D.FACEFORWARDREVERSED_ORIENTATION:
+            case Container3D.FACEORIGINREVERSED_ORIENTATION:
+                mesh.lookAt(new Vector3(0, 0, -1));
+                break;
+        }
+        control.position = newPos;
+    }
+    _scatterMapping(source) {
+        source.x = (1.0 - Math.random() * 2.0) * this._cellWidth;
+        source.y = (1.0 - Math.random() * 2.0) * this._cellHeight;
+        return source;
+    }
+    _finalProcessing() {
+        const meshes = [];
+        for (const child of this._children) {
+            if (!child.mesh) {
+                continue;
+            }
+            meshes.push(child.mesh);
+        }
+        for (let count = 0; count < this._iteration; count++) {
+            meshes.sort((a, b) => {
+                const distance1 = a.position.lengthSquared();
+                const distance2 = b.position.lengthSquared();
+                if (distance1 < distance2) {
+                    return 1;
+                }
+                else if (distance1 > distance2) {
+                    return -1;
+                }
+                return 0;
+            });
+            const radiusPaddingSquared = Math.pow(this.margin, 2.0);
+            const cellSize = Math.max(this._cellWidth, this._cellHeight);
+            const difference2D = TmpVectors.Vector2[0];
+            const difference = TmpVectors.Vector3[0];
+            for (let i = 0; i < meshes.length - 1; i++) {
+                for (let j = i + 1; j < meshes.length; j++) {
+                    if (i != j) {
+                        meshes[j].position.subtractToRef(meshes[i].position, difference);
+                        // Ignore Z axis
+                        difference2D.x = difference.x;
+                        difference2D.y = difference.y;
+                        const combinedRadius = cellSize;
+                        let distance = difference2D.lengthSquared() - radiusPaddingSquared;
+                        const minSeparation = Math.min(distance, radiusPaddingSquared);
+                        distance -= minSeparation;
+                        if (distance < Math.pow(combinedRadius, 2.0)) {
+                            difference2D.normalize();
+                            difference.scaleInPlace((combinedRadius - Math.sqrt(distance)) * 0.5);
+                            meshes[j].position.addInPlace(difference);
+                            meshes[i].position.subtractInPlace(difference);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+//# sourceMappingURL=scatterPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scatterPanel.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/scatterPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,sCAAwB;AACxC,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,6CAA+B;AAG7D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,gBAAgB;IAAlD;;QACY,eAAU,GAAG,KAAK,CAAC;IAuG/B,CAAC;IArGG;;OAEG;IACH,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IAED,IAAW,SAAS,CAAC,KAAY;QAC7B,IAAI,IAAI,CAAC,UAAU,KAAK,KAAK,EAAE,CAAC;YAC5B,OAAO;QACX,CAAC;QAED,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE;YACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACP,CAAC;IAES,YAAY,CAAC,OAAkB,EAAE,YAAqB;QAC5D,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;QAElD,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO;QACX,CAAC;QAED,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;YACvB,KAAK,WAAW,CAAC,sBAAsB,CAAC;YACxC,KAAK,WAAW,CAAC,uBAAuB;gBACpC,IAAI,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;gBAClC,MAAM;YACV,KAAK,WAAW,CAAC,+BAA+B,CAAC;YACjD,KAAK,WAAW,CAAC,8BAA8B;gBAC3C,IAAI,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBACnC,MAAM;QACd,CAAC;QAED,OAAO,CAAC,QAAQ,GAAG,MAAM,CAAC;IAC9B,CAAC;IAEO,eAAe,CAAC,MAAe;QACnC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;QACzD,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC;QAE1D,OAAO,MAAM,CAAC;IAClB,CAAC;IAEkB,gBAAgB;QAC/B,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACd,SAAS;YACb,CAAC;YAED,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;QAED,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC;YACnD,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;gBACjB,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;gBAC7C,MAAM,SAAS,GAAG,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC;gBAE7C,IAAI,SAAS,GAAG,SAAS,EAAE,CAAC;oBACxB,OAAO,CAAC,CAAC;gBACb,CAAC;qBAAM,IAAI,SAAS,GAAG,SAAS,EAAE,CAAC;oBAC/B,OAAO,CAAC,CAAC,CAAC;gBACd,CAAC;gBAED,OAAO,CAAC,CAAC;YACb,CAAC,CAAC,CAAC;YAEH,MAAM,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YAC7D,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAC3C,MAAM,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAEzC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACzC,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;oBACzC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;wBACT,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;wBAEjE,gBAAgB;wBAChB,YAAY,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;wBAC9B,YAAY,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;wBAC9B,MAAM,cAAc,GAAG,QAAQ,CAAC;wBAChC,IAAI,QAAQ,GAAG,YAAY,CAAC,aAAa,EAAE,GAAG,oBAAoB,CAAC;wBACnE,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;wBAC/D,QAAQ,IAAI,aAAa,CAAC;wBAE1B,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,GAAG,CAAC,EAAE,CAAC;4BAC3C,YAAY,CAAC,SAAS,EAAE,CAAC;4BACzB,UAAU,CAAC,YAAY,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;4BACtE,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;4BAC1C,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;wBACnD,CAAC;oBACL,CAAC;gBACL,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;CACJ","sourcesContent":["import { Tools } from \"core/Misc/tools\";\r\nimport { TmpVectors, Vector3 } from \"core/Maths/math.vector\";\r\nimport type { float } from \"core/types\";\r\n\r\nimport { VolumeBasedPanel } from \"./volumeBasedPanel\";\r\nimport type { Control3D } from \"./control3D\";\r\nimport { Container3D } from \"./container3D\";\r\n\r\n/**\r\n * Class used to create a container panel where items get randomized planar mapping\r\n */\r\nexport class ScatterPanel extends VolumeBasedPanel {\r\n    private _iteration = 100.0;\r\n\r\n    /**\r\n     * Gets or sets the number of iteration to use to scatter the controls (100 by default)\r\n     */\r\n    public get iteration(): float {\r\n        return this._iteration;\r\n    }\r\n\r\n    public set iteration(value: float) {\r\n        if (this._iteration === value) {\r\n            return;\r\n        }\r\n\r\n        this._iteration = value;\r\n\r\n        Tools.SetImmediate(() => {\r\n            this._arrangeChildren();\r\n        });\r\n    }\r\n\r\n    protected _mapGridNode(control: Control3D, nodePosition: Vector3) {\r\n        const mesh = control.mesh;\r\n        const newPos = this._scatterMapping(nodePosition);\r\n\r\n        if (!mesh) {\r\n            return;\r\n        }\r\n\r\n        switch (this.orientation) {\r\n            case Container3D.FACEORIGIN_ORIENTATION:\r\n            case Container3D.FACEFORWARD_ORIENTATION:\r\n                mesh.lookAt(new Vector3(0, 0, 1));\r\n                break;\r\n            case Container3D.FACEFORWARDREVERSED_ORIENTATION:\r\n            case Container3D.FACEORIGINREVERSED_ORIENTATION:\r\n                mesh.lookAt(new Vector3(0, 0, -1));\r\n                break;\r\n        }\r\n\r\n        control.position = newPos;\r\n    }\r\n\r\n    private _scatterMapping(source: Vector3): Vector3 {\r\n        source.x = (1.0 - Math.random() * 2.0) * this._cellWidth;\r\n        source.y = (1.0 - Math.random() * 2.0) * this._cellHeight;\r\n\r\n        return source;\r\n    }\r\n\r\n    protected override _finalProcessing() {\r\n        const meshes = [];\r\n        for (const child of this._children) {\r\n            if (!child.mesh) {\r\n                continue;\r\n            }\r\n\r\n            meshes.push(child.mesh);\r\n        }\r\n\r\n        for (let count = 0; count < this._iteration; count++) {\r\n            meshes.sort((a, b) => {\r\n                const distance1 = a.position.lengthSquared();\r\n                const distance2 = b.position.lengthSquared();\r\n\r\n                if (distance1 < distance2) {\r\n                    return 1;\r\n                } else if (distance1 > distance2) {\r\n                    return -1;\r\n                }\r\n\r\n                return 0;\r\n            });\r\n\r\n            const radiusPaddingSquared = Math.pow(this.margin, 2.0);\r\n            const cellSize = Math.max(this._cellWidth, this._cellHeight);\r\n            const difference2D = TmpVectors.Vector2[0];\r\n            const difference = TmpVectors.Vector3[0];\r\n\r\n            for (let i = 0; i < meshes.length - 1; i++) {\r\n                for (let j = i + 1; j < meshes.length; j++) {\r\n                    if (i != j) {\r\n                        meshes[j].position.subtractToRef(meshes[i].position, difference);\r\n\r\n                        // Ignore Z axis\r\n                        difference2D.x = difference.x;\r\n                        difference2D.y = difference.y;\r\n                        const combinedRadius = cellSize;\r\n                        let distance = difference2D.lengthSquared() - radiusPaddingSquared;\r\n                        const minSeparation = Math.min(distance, radiusPaddingSquared);\r\n                        distance -= minSeparation;\r\n\r\n                        if (distance < Math.pow(combinedRadius, 2.0)) {\r\n                            difference2D.normalize();\r\n                            difference.scaleInPlace((combinedRadius - Math.sqrt(distance)) * 0.5);\r\n                            meshes[j].position.addInPlace(difference);\r\n                            meshes[i].position.subtractInPlace(difference);\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,95 @@
+import type { Nullable } from "@babylonjs/core/types.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import type { Scene } from "@babylonjs/core/scene.js";
+import { Control3D } from "./control3D.js";
+import type { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
+import { MRDLSliderBarMaterial } from "../materials/mrdl/mrdlSliderBarMaterial.js";
+import { MRDLSliderThumbMaterial } from "../materials/mrdl/mrdlSliderThumbMaterial.js";
+import { MRDLBackplateMaterial } from "../materials/mrdl/mrdlBackplateMaterial.js";
+/**
+ * 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;
+    private _draggedPosition;
+    /** 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;
+    /**
+     * Gets the slider bar mesh used by this control
+     */
+    get sliderBar(): AbstractMesh;
+    /**
+     * Gets the slider thumb mesh used by this control
+     */
+    get sliderThumb(): AbstractMesh;
+    /**
+     * Gets the slider backplate mesh used by this control
+     */
+    get sliderBackplate(): AbstractMesh;
+    /** Sets a boolean indicating if the control is visible */
+    set isVisible(value: boolean);
+    protected _createNode(scene: Scene): TransformNode;
+    protected _affectMaterial(mesh: AbstractMesh): void;
+    private _createBehavior;
+    private _convertToPosition;
+    private _convertToValue;
+    /**
+     * Releases all associated resources
+     */
+    dispose(): void;
+}