@onerjs/gui 8.23.1

package/3D/controls/touchHolographicMenu.js

@@ -0,0 +1,139 @@
+import { VolumeBasedPanel } from "./volumeBasedPanel.js";
+import { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.js";
+import { FluentMaterial } from "../materials/fluent/fluentMaterial.js";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+/**
+ * Simple menu that can contain holographic buttons
+ */
+export class TouchHolographicMenu extends VolumeBasedPanel {
+    /**
+     * Gets or sets the margin size of the backplate in button size units.
+     * Setting this to 1, will make the backPlate margin the size of 1 button
+     */
+    get backPlateMargin() {
+        return this._backPlateMargin;
+    }
+    set backPlateMargin(value) {
+        this._backPlateMargin = value;
+        if (this._children.length >= 1) {
+            for (const control of this.children) {
+                this._updateCurrentMinMax(control.position);
+            }
+            this._updateMargins();
+        }
+    }
+    _createNode(scene) {
+        const node = new Mesh(`menu_${this.name}`, scene);
+        this._backPlate = CreateBox("backPlate" + this.name, { size: 1 }, scene);
+        this._backPlate.parent = node;
+        return node;
+    }
+    _affectMaterial(mesh) {
+        this._backPlateMaterial = new FluentMaterial(this.name + "backPlateMaterial", mesh.getScene());
+        this._backPlateMaterial.albedoColor = new Color3(0.08, 0.15, 0.55);
+        this._backPlateMaterial.renderBorders = true;
+        this._backPlateMaterial.renderHoverLight = true;
+        this._pickedPointObserver = this._host.onPickedPointChangedObservable.add((pickedPoint) => {
+            if (pickedPoint) {
+                this._backPlateMaterial.hoverPosition = pickedPoint;
+                this._backPlateMaterial.hoverColor.a = 1.0;
+            }
+            else {
+                this._backPlateMaterial.hoverColor.a = 0;
+            }
+        });
+        this._backPlate.material = this._backPlateMaterial;
+    }
+    _mapGridNode(control, nodePosition) {
+        // Simple plane mapping for the menu
+        const mesh = control.mesh;
+        if (!mesh) {
+            return;
+        }
+        control.position = nodePosition.clone();
+        this._updateCurrentMinMax(nodePosition);
+    }
+    _finalProcessing() {
+        this._updateMargins();
+    }
+    _updateCurrentMinMax(nodePosition) {
+        if (!this._currentMin) {
+            this._currentMin = nodePosition.clone();
+            this._currentMax = nodePosition.clone();
+        }
+        this._currentMin.minimizeInPlace(nodePosition);
+        this._currentMax.maximizeInPlace(nodePosition);
+    }
+    _updateMargins() {
+        if (this._children.length > 0) {
+            this._currentMin.addInPlaceFromFloats(-this._cellWidth / 2, -this._cellHeight / 2, 0);
+            this._currentMax.addInPlaceFromFloats(this._cellWidth / 2, this._cellHeight / 2, 0);
+            const extendSize = this._currentMax.subtract(this._currentMin);
+            // Also add a % margin
+            this._backPlate.scaling.x = extendSize.x + this._cellWidth * this.backPlateMargin;
+            this._backPlate.scaling.y = extendSize.y + this._cellHeight * this.backPlateMargin;
+            this._backPlate.scaling.z = 0.001;
+            for (let i = 0; i < this._children.length; i++) {
+                this._children[i].position.subtractInPlace(this._currentMin).subtractInPlace(extendSize.scale(0.5));
+                this._children[i].position.z -= 0.01;
+            }
+        }
+        this._currentMin = null;
+        this._currentMax = null;
+    }
+    /**
+     * Creates a holographic menu GUI 3D control
+     * @param name name of the menu
+     */
+    constructor(name) {
+        super(name);
+        this._backPlateMargin = 1.25;
+    }
+    /**
+     * Adds a button to the menu.
+     * Please note that the back material of the button will be set to transparent as it is attached to the menu.
+     *
+     * @param button Button to add
+     * @returns This menu
+     */
+    addButton(button) {
+        // Block updating the layout until the button is resized (which has to happen after node creation)
+        const wasLayoutBlocked = this.blockLayout;
+        if (!wasLayoutBlocked) {
+            this.blockLayout = true;
+        }
+        super.addControl(button);
+        button.isBackplateVisible = false;
+        button.scaling.scaleInPlace(TouchHolographicMenu.MENU_BUTTON_SCALE);
+        // Unblocking the layout triggers the pending layout update that uses the size of the buttons to determine the size of the backing mesh
+        if (!wasLayoutBlocked) {
+            this.blockLayout = false;
+        }
+        return this;
+    }
+    /**
+     * This method should not be used directly. It is inherited from `Container3D`.
+     * Please use `addButton` instead.
+     * @param _control the control to add
+     * @returns the current container
+     */
+    addControl(_control) {
+        Logger.Warn("TouchHolographicMenu can only contain buttons. Please use the method `addButton` instead.");
+        return this;
+    }
+    /**
+     * Disposes the menu
+     */
+    dispose() {
+        super.dispose();
+        this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);
+    }
+}
+/**
+ * Scale for the buttons added to the menu
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+TouchHolographicMenu.MENU_BUTTON_SCALE = 1;
+//# sourceMappingURL=touchHolographicMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"touchHolographicMenu.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/touchHolographicMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Scene } from \"core/scene\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport type { TransformNode } from \"core/Meshes/transformNode\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Control3D } from \"./control3D\";\r\nimport { VolumeBasedPanel } from \"./volumeBasedPanel\";\r\nimport { Mesh } from \"core/Meshes/mesh\";\r\nimport { CreateBox } from \"core/Meshes/Builders/boxBuilder\";\r\nimport type { AbstractMesh } from \"core/Meshes/abstractMesh\";\r\nimport { FluentMaterial } from \"../materials/fluent/fluentMaterial\";\r\nimport { Color3 } from \"core/Maths/math.color\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\nimport { Logger } from \"core/Misc/logger\";\r\nimport type { Container3D } from \"./container3D\";\r\nimport type { TouchHolographicButton } from \"./touchHolographicButton\";\r\n\r\n/**\r\n * Simple menu that can contain holographic buttons\r\n */\r\nexport class TouchHolographicMenu extends VolumeBasedPanel {\r\n    protected _backPlate: Mesh;\r\n    private _backPlateMaterial: FluentMaterial;\r\n    private _pickedPointObserver: Nullable<Observer<Nullable<Vector3>>>;\r\n\r\n    private _currentMin: Nullable<Vector3>;\r\n    private _currentMax: Nullable<Vector3>;\r\n\r\n    private _backPlateMargin = 1.25;\r\n\r\n    /**\r\n     * Scale for the buttons added to the menu\r\n     */\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    protected static MENU_BUTTON_SCALE: number = 1;\r\n\r\n    /**\r\n     * Gets or sets the margin size of the backplate in button size units.\r\n     * Setting this to 1, will make the backPlate margin the size of 1 button\r\n     */\r\n    public get backPlateMargin(): number {\r\n        return this._backPlateMargin;\r\n    }\r\n\r\n    public set backPlateMargin(value: number) {\r\n        this._backPlateMargin = value;\r\n\r\n        if (this._children.length >= 1) {\r\n            for (const control of this.children) {\r\n                this._updateCurrentMinMax(control.position);\r\n            }\r\n\r\n            this._updateMargins();\r\n        }\r\n    }\r\n\r\n    protected override _createNode(scene: Scene): Nullable<TransformNode> {\r\n        const node = new Mesh(`menu_${this.name}`, scene);\r\n\r\n        this._backPlate = CreateBox(\"backPlate\" + this.name, { size: 1 }, scene);\r\n        this._backPlate.parent = node;\r\n\r\n        return node;\r\n    }\r\n\r\n    protected override _affectMaterial(mesh: AbstractMesh) {\r\n        this._backPlateMaterial = new FluentMaterial(this.name + \"backPlateMaterial\", mesh.getScene());\r\n        this._backPlateMaterial.albedoColor = new Color3(0.08, 0.15, 0.55);\r\n        this._backPlateMaterial.renderBorders = true;\r\n        this._backPlateMaterial.renderHoverLight = true;\r\n\r\n        this._pickedPointObserver = this._host.onPickedPointChangedObservable.add((pickedPoint) => {\r\n            if (pickedPoint) {\r\n                this._backPlateMaterial.hoverPosition = pickedPoint;\r\n                this._backPlateMaterial.hoverColor.a = 1.0;\r\n            } else {\r\n                this._backPlateMaterial.hoverColor.a = 0;\r\n            }\r\n        });\r\n\r\n        this._backPlate.material = this._backPlateMaterial;\r\n    }\r\n\r\n    protected _mapGridNode(control: Control3D, nodePosition: Vector3) {\r\n        // Simple plane mapping for the menu\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\r\n        this._updateCurrentMinMax(nodePosition);\r\n    }\r\n\r\n    protected override _finalProcessing() {\r\n        this._updateMargins();\r\n    }\r\n\r\n    private _updateCurrentMinMax(nodePosition: Vector3) {\r\n        if (!this._currentMin) {\r\n            this._currentMin = nodePosition.clone();\r\n            this._currentMax = nodePosition.clone();\r\n        }\r\n\r\n        this._currentMin.minimizeInPlace(nodePosition);\r\n        this._currentMax!.maximizeInPlace(nodePosition);\r\n    }\r\n\r\n    private _updateMargins() {\r\n        if (this._children.length > 0) {\r\n            this._currentMin!.addInPlaceFromFloats(-this._cellWidth / 2, -this._cellHeight / 2, 0);\r\n            this._currentMax!.addInPlaceFromFloats(this._cellWidth / 2, this._cellHeight / 2, 0);\r\n            const extendSize = this._currentMax!.subtract(this._currentMin!);\r\n\r\n            // Also add a % margin\r\n            this._backPlate.scaling.x = extendSize.x + this._cellWidth * this.backPlateMargin;\r\n            this._backPlate.scaling.y = extendSize.y + this._cellHeight * this.backPlateMargin;\r\n            this._backPlate.scaling.z = 0.001;\r\n\r\n            for (let i = 0; i < this._children.length; i++) {\r\n                this._children[i].position.subtractInPlace(this._currentMin!).subtractInPlace(extendSize.scale(0.5));\r\n                this._children[i].position.z -= 0.01;\r\n            }\r\n        }\r\n\r\n        this._currentMin = null;\r\n        this._currentMax = null;\r\n    }\r\n\r\n    /**\r\n     * Creates a holographic menu GUI 3D control\r\n     * @param name name of the menu\r\n     */\r\n    constructor(name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    /**\r\n     * Adds a button to the menu.\r\n     * Please note that the back material of the button will be set to transparent as it is attached to the menu.\r\n     *\r\n     * @param button Button to add\r\n     * @returns This menu\r\n     */\r\n    public addButton(button: TouchHolographicButton): TouchHolographicMenu {\r\n        // Block updating the layout until the button is resized (which has to happen after node creation)\r\n        const wasLayoutBlocked = this.blockLayout;\r\n        if (!wasLayoutBlocked) {\r\n            this.blockLayout = true;\r\n        }\r\n\r\n        super.addControl(button);\r\n\r\n        button.isBackplateVisible = false;\r\n        button.scaling.scaleInPlace(TouchHolographicMenu.MENU_BUTTON_SCALE);\r\n\r\n        // Unblocking the layout triggers the pending layout update that uses the size of the buttons to determine the size of the backing mesh\r\n        if (!wasLayoutBlocked) {\r\n            this.blockLayout = false;\r\n        }\r\n        return this;\r\n    }\r\n\r\n    /**\r\n     * This method should not be used directly. It is inherited from `Container3D`.\r\n     * Please use `addButton` instead.\r\n     * @param _control the control to add\r\n     * @returns the current container\r\n     */\r\n    public override addControl(_control: Control3D): Container3D {\r\n        Logger.Warn(\"TouchHolographicMenu can only contain buttons. Please use the method `addButton` instead.\");\r\n\r\n        return this;\r\n    }\r\n\r\n    /**\r\n     * Disposes the menu\r\n     */\r\n    public override dispose() {\r\n        super.dispose();\r\n\r\n        this._host.onPickedPointChangedObservable.remove(this._pickedPointObserver);\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,21 @@
+import type { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import type { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
+import type { Mesh } from "@babylonjs/core/Meshes/mesh.js";
+import { TouchButton3D } from "./touchButton3D.js";
+/**
+ * Class used to create an interactable object. It's a touchable 3D button using a mesh coming from the current scene
+ * @since 5.0.0
+ */
+export declare class TouchMeshButton3D extends TouchButton3D {
+    /** @internal */
+    protected _currentMesh: Mesh;
+    /**
+     * Creates a new 3D button based on a mesh
+     * @param mesh mesh to become a 3D button. By default this is also the mesh for near interaction collision checking
+     * @param name defines the control name
+     */
+    constructor(mesh: Mesh, name?: string);
+    protected _getTypeName(): string;
+    protected _createNode(): TransformNode;
+    protected _affectMaterial(mesh: AbstractMesh): void;
+}

package/3D/controls/touchMeshButton3D.js

@@ -0,0 +1,58 @@
+import { TouchButton3D } from "./touchButton3D.js";
+/**
+ * Class used to create an interactable object. It's a touchable 3D button using a mesh coming from the current scene
+ * @since 5.0.0
+ */
+export class TouchMeshButton3D extends TouchButton3D {
+    /**
+     * Creates a new 3D button based on a mesh
+     * @param mesh mesh to become a 3D button. By default this is also the mesh for near interaction collision checking
+     * @param name defines the control name
+     */
+    constructor(mesh, name) {
+        super(name, mesh);
+        this._currentMesh = mesh;
+        /**
+         * Provides a default behavior on hover/out & up/down
+         * Override those function to create your own desired behavior specific to your mesh
+         */
+        this.pointerEnterAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(1.1);
+        };
+        this.pointerOutAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(1.0 / 1.1);
+        };
+        this.pointerDownAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(0.95);
+        };
+        this.pointerUpAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(1.0 / 0.95);
+        };
+    }
+    _getTypeName() {
+        return "TouchMeshButton3D";
+    }
+    // Mesh association
+    _createNode() {
+        const meshes = this._currentMesh.getChildMeshes();
+        for (const mesh of meshes) {
+            this._injectGUI3DReservedDataStore(mesh).control = this;
+        }
+        return this._currentMesh;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _affectMaterial(mesh) { }
+}
+//# sourceMappingURL=touchMeshButton3D.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"touchMeshButton3D.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/touchMeshButton3D.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,OAAO,iBAAkB,SAAQ,aAAa;IAIhD;;;;OAIG;IACH,YAAY,IAAU,EAAE,IAAa;QACjC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAElB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzB;;;WAGG;QACH,IAAI,CAAC,qBAAqB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;QACxC,CAAC,CAAC;QAEF,IAAI,CAAC,mBAAmB,GAAG,GAAG,EAAE;YAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEF,IAAI,CAAC,oBAAoB,GAAG,GAAG,EAAE;YAC7B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzC,CAAC,CAAC;QAEF,IAAI,CAAC,kBAAkB,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;gBACb,OAAO;YACX,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC;QAC/C,CAAC,CAAC;IACN,CAAC;IAEkB,YAAY;QAC3B,OAAO,mBAAmB,CAAC;IAC/B,CAAC;IAED,mBAAmB;IACA,WAAW;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC;QAElD,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5D,CAAC;QAED,OAAO,IAAI,CAAC,YAAY,CAAC;IAC7B,CAAC;IAED,6DAA6D;IAC1C,eAAe,CAAC,IAAkB,IAAG,CAAC;CAC5D","sourcesContent":["import type { TransformNode } from \"core/Meshes/transformNode\";\r\nimport type { AbstractMesh } from \"core/Meshes/abstractMesh\";\r\nimport type { Mesh } from \"core/Meshes/mesh\";\r\n\r\nimport { TouchButton3D } from \"./touchButton3D\";\r\n\r\n/**\r\n * Class used to create an interactable object. It's a touchable 3D button using a mesh coming from the current scene\r\n * @since 5.0.0\r\n */\r\nexport class TouchMeshButton3D extends TouchButton3D {\r\n    /** @internal */\r\n    protected _currentMesh: Mesh;\r\n\r\n    /**\r\n     * Creates a new 3D button based on a mesh\r\n     * @param mesh mesh to become a 3D button. By default this is also the mesh for near interaction collision checking\r\n     * @param name defines the control name\r\n     */\r\n    constructor(mesh: Mesh, name?: string) {\r\n        super(name, mesh);\r\n\r\n        this._currentMesh = mesh;\r\n\r\n        /**\r\n         * Provides a default behavior on hover/out & up/down\r\n         * Override those function to create your own desired behavior specific to your mesh\r\n         */\r\n        this.pointerEnterAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this.mesh.scaling.scaleInPlace(1.1);\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this.mesh.scaling.scaleInPlace(1.0 / 1.1);\r\n        };\r\n\r\n        this.pointerDownAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this.mesh.scaling.scaleInPlace(0.95);\r\n        };\r\n\r\n        this.pointerUpAnimation = () => {\r\n            if (!this.mesh) {\r\n                return;\r\n            }\r\n            this.mesh.scaling.scaleInPlace(1.0 / 0.95);\r\n        };\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"TouchMeshButton3D\";\r\n    }\r\n\r\n    // Mesh association\r\n    protected override _createNode(): TransformNode {\r\n        const meshes = this._currentMesh.getChildMeshes();\r\n\r\n        for (const mesh of meshes) {\r\n            this._injectGUI3DReservedDataStore(mesh).control = this;\r\n        }\r\n\r\n        return this._currentMesh;\r\n    }\r\n\r\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n    protected override _affectMaterial(mesh: AbstractMesh) {}\r\n}\r\n"]}

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

@@ -0,0 +1,53 @@
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import type { int } from "@babylonjs/core/types.js";
+import { Container3D } from "./container3D.js";
+import type { Control3D } from "./control3D.js";
+/**
+ * Abstract class used to create a container panel deployed on the surface of a volume
+ */
+export declare abstract class VolumeBasedPanel extends Container3D {
+    private _columns;
+    private _rows;
+    private _rowThenColum;
+    private _orientation;
+    protected _cellWidth: number;
+    protected _cellHeight: number;
+    /**
+     * Gets or sets the distance between elements
+     */
+    margin: number;
+    /**
+     * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)
+     * | Value | Type                                | Description |
+     * | ----- | ----------------------------------- | ----------- |
+     * | 0     | UNSET_ORIENTATION                   |  Control rotation will remain unchanged |
+     * | 1     | FACEORIGIN_ORIENTATION              |  Control will rotate to make it look at sphere central axis |
+     * | 2     | FACEORIGINREVERSED_ORIENTATION      |  Control will rotate to make it look back at sphere central axis |
+     * | 3     | FACEFORWARD_ORIENTATION             |  Control will rotate to look at z axis (0, 0, 1) |
+     * | 4     | FACEFORWARDREVERSED_ORIENTATION     |  Control will rotate to look at negative z axis (0, 0, -1) |
+     */
+    get orientation(): number;
+    set orientation(value: number);
+    /**
+     * Gets or sets the number of columns requested (10 by default).
+     * The panel will automatically compute the number of rows based on number of child controls.
+     */
+    get columns(): int;
+    set columns(value: int);
+    /**
+     * Gets or sets a the number of rows requested.
+     * The panel will automatically compute the number of columns based on number of child controls.
+     */
+    get rows(): int;
+    set rows(value: int);
+    /**
+     * Creates new VolumeBasedPanel
+     * @param name
+     */
+    constructor(name?: string);
+    protected _arrangeChildren(): void;
+    /** Child classes must implement this function to provide correct control positioning */
+    protected abstract _mapGridNode(control: Control3D, nodePosition: Vector3): void;
+    /** Child classes can implement this function to provide additional processing */
+    protected _finalProcessing(): void;
+}

package/3D/controls/volumeBasedPanel.js

@@ -0,0 +1,158 @@
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { Container3D } from "./container3D.js";
+/**
+ * Abstract class used to create a container panel deployed on the surface of a volume
+ */
+export class VolumeBasedPanel extends Container3D {
+    /**
+     * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)
+     * | Value | Type                                | Description |
+     * | ----- | ----------------------------------- | ----------- |
+     * | 0     | UNSET_ORIENTATION                   |  Control rotation will remain unchanged |
+     * | 1     | FACEORIGIN_ORIENTATION              |  Control will rotate to make it look at sphere central axis |
+     * | 2     | FACEORIGINREVERSED_ORIENTATION      |  Control will rotate to make it look back at sphere central axis |
+     * | 3     | FACEFORWARD_ORIENTATION             |  Control will rotate to look at z axis (0, 0, 1) |
+     * | 4     | FACEFORWARDREVERSED_ORIENTATION     |  Control will rotate to look at negative z axis (0, 0, -1) |
+     */
+    get orientation() {
+        return this._orientation;
+    }
+    set orientation(value) {
+        if (this._orientation === value) {
+            return;
+        }
+        this._orientation = value;
+        Tools.SetImmediate(() => {
+            this._arrangeChildren();
+        });
+    }
+    /**
+     * Gets or sets the number of columns requested (10 by default).
+     * The panel will automatically compute the number of rows based on number of child controls.
+     */
+    get columns() {
+        return this._columns;
+    }
+    set columns(value) {
+        if (this._columns === value) {
+            return;
+        }
+        this._columns = value;
+        this._rowThenColum = true;
+        Tools.SetImmediate(() => {
+            this._arrangeChildren();
+        });
+    }
+    /**
+     * Gets or sets a the number of rows requested.
+     * The panel will automatically compute the number of columns based on number of child controls.
+     */
+    get rows() {
+        return this._rows;
+    }
+    set rows(value) {
+        if (this._rows === value) {
+            return;
+        }
+        this._rows = value;
+        this._rowThenColum = false;
+        Tools.SetImmediate(() => {
+            this._arrangeChildren();
+        });
+    }
+    /**
+     * Creates new VolumeBasedPanel
+     * @param name
+     */
+    constructor(name) {
+        super(name);
+        this._columns = 10;
+        this._rows = 0;
+        this._rowThenColum = true;
+        this._orientation = Container3D.FACEORIGIN_ORIENTATION;
+        /**
+         * Gets or sets the distance between elements
+         */
+        this.margin = 0;
+    }
+    _arrangeChildren() {
+        this._cellWidth = 0;
+        this._cellHeight = 0;
+        let rows = 0;
+        let columns = 0;
+        let controlCount = 0;
+        // Measure
+        for (const child of this._children) {
+            if (!child.mesh) {
+                continue;
+            }
+            controlCount++;
+            child.mesh.computeWorldMatrix(true);
+            const extendSize = child.mesh.getBoundingInfo().boundingBox.extendSize;
+            // to be safe, check descendants
+            const descendants = child.mesh.getDescendants(false);
+            for (const descendant of descendants) {
+                descendant.computeWorldMatrix(true);
+                const casted = descendant;
+                if (typeof casted.getBoundingInfo === "function") {
+                    const extendSizeChild = casted.getBoundingInfo().boundingBox.extendSize;
+                    extendSize.x = Math.max(extendSize.x, extendSizeChild.x);
+                    extendSize.y = Math.max(extendSize.y, extendSizeChild.y);
+                    extendSize.z = Math.max(extendSize.z, extendSizeChild.z);
+                }
+            }
+            this._cellWidth = Math.max(this._cellWidth, extendSize.x * 2);
+            this._cellHeight = Math.max(this._cellHeight, extendSize.y * 2);
+        }
+        this._cellWidth += this.margin * 2;
+        this._cellHeight += this.margin * 2;
+        // Arrange
+        if (this._rowThenColum) {
+            columns = this._columns;
+            rows = Math.ceil(controlCount / this._columns);
+        }
+        else {
+            rows = this._rows;
+            columns = Math.ceil(controlCount / this._rows);
+        }
+        const startOffsetX = columns * 0.5 * this._cellWidth;
+        const startOffsetY = rows * 0.5 * this._cellHeight;
+        const nodeGrid = [];
+        let cellCounter = 0;
+        if (this._rowThenColum) {
+            for (let r = 0; r < rows; r++) {
+                for (let c = 0; c < columns; c++) {
+                    nodeGrid.push(new Vector3(c * this._cellWidth - startOffsetX + this._cellWidth / 2, r * this._cellHeight - startOffsetY + this._cellHeight / 2, 0));
+                    cellCounter++;
+                    if (cellCounter > controlCount) {
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            for (let c = 0; c < columns; c++) {
+                for (let r = 0; r < rows; r++) {
+                    nodeGrid.push(new Vector3(c * this._cellWidth - startOffsetX + this._cellWidth / 2, r * this._cellHeight - startOffsetY + this._cellHeight / 2, 0));
+                    cellCounter++;
+                    if (cellCounter > controlCount) {
+                        break;
+                    }
+                }
+            }
+        }
+        cellCounter = 0;
+        for (const child of this._children) {
+            if (!child.mesh) {
+                continue;
+            }
+            this._mapGridNode(child, nodeGrid[cellCounter]);
+            cellCounter++;
+        }
+        this._finalProcessing();
+    }
+    /** Child classes can implement this function to provide additional processing */
+    _finalProcessing() { }
+}
+//# sourceMappingURL=volumeBasedPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volumeBasedPanel.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/controls/volumeBasedPanel.ts"],"names":[],"mappings":"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","sourcesContent":["import { Tools } from \"core/Misc/tools\";\r\nimport { Vector3 } from \"core/Maths/math.vector\";\r\nimport type { int } from \"core/types\";\r\n\r\nimport { Container3D } from \"./container3D\";\r\nimport type { Control3D } from \"./control3D\";\r\nimport type { AbstractMesh } from \"core/Meshes/abstractMesh\";\r\n\r\n/**\r\n * Abstract class used to create a container panel deployed on the surface of a volume\r\n */\r\nexport abstract class VolumeBasedPanel extends Container3D {\r\n    private _columns = 10;\r\n    private _rows = 0;\r\n    private _rowThenColum = true;\r\n\r\n    private _orientation = Container3D.FACEORIGIN_ORIENTATION;\r\n\r\n    protected _cellWidth: number;\r\n    protected _cellHeight: number;\r\n\r\n    /**\r\n     * Gets or sets the distance between elements\r\n     */\r\n    public margin = 0;\r\n\r\n    /**\r\n     * Gets or sets the orientation to apply to all controls (BABYLON.Container3D.FaceOriginReversedOrientation by default)\r\n     * | Value | Type                                | Description |\r\n     * | ----- | ----------------------------------- | ----------- |\r\n     * | 0     | UNSET_ORIENTATION                   |  Control rotation will remain unchanged |\r\n     * | 1     | FACEORIGIN_ORIENTATION              |  Control will rotate to make it look at sphere central axis |\r\n     * | 2     | FACEORIGINREVERSED_ORIENTATION      |  Control will rotate to make it look back at sphere central axis |\r\n     * | 3     | FACEFORWARD_ORIENTATION             |  Control will rotate to look at z axis (0, 0, 1) |\r\n     * | 4     | FACEFORWARDREVERSED_ORIENTATION     |  Control will rotate to look at negative z axis (0, 0, -1) |\r\n     */\r\n    public get orientation(): number {\r\n        return this._orientation;\r\n    }\r\n\r\n    public set orientation(value: number) {\r\n        if (this._orientation === value) {\r\n            return;\r\n        }\r\n\r\n        this._orientation = value;\r\n\r\n        Tools.SetImmediate(() => {\r\n            this._arrangeChildren();\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the number of columns requested (10 by default).\r\n     * The panel will automatically compute the number of rows based on number of child controls.\r\n     */\r\n    public get columns(): int {\r\n        return this._columns;\r\n    }\r\n\r\n    public set columns(value: int) {\r\n        if (this._columns === value) {\r\n            return;\r\n        }\r\n\r\n        this._columns = value;\r\n        this._rowThenColum = true;\r\n\r\n        Tools.SetImmediate(() => {\r\n            this._arrangeChildren();\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Gets or sets a the number of rows requested.\r\n     * The panel will automatically compute the number of columns based on number of child controls.\r\n     */\r\n    public get rows(): int {\r\n        return this._rows;\r\n    }\r\n\r\n    public set rows(value: int) {\r\n        if (this._rows === value) {\r\n            return;\r\n        }\r\n\r\n        this._rows = value;\r\n        this._rowThenColum = false;\r\n\r\n        Tools.SetImmediate(() => {\r\n            this._arrangeChildren();\r\n        });\r\n    }\r\n\r\n    /**\r\n     * Creates new VolumeBasedPanel\r\n     * @param name\r\n     */\r\n    public constructor(name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected override _arrangeChildren() {\r\n        this._cellWidth = 0;\r\n        this._cellHeight = 0;\r\n        let rows = 0;\r\n        let columns = 0;\r\n        let controlCount = 0;\r\n        // Measure\r\n        for (const child of this._children) {\r\n            if (!child.mesh) {\r\n                continue;\r\n            }\r\n\r\n            controlCount++;\r\n            child.mesh.computeWorldMatrix(true);\r\n            const extendSize = child.mesh.getBoundingInfo().boundingBox.extendSize;\r\n            // to be safe, check descendants\r\n            const descendants = child.mesh.getDescendants(false);\r\n            for (const descendant of descendants) {\r\n                descendant.computeWorldMatrix(true);\r\n                const casted = descendant as AbstractMesh;\r\n                if (typeof casted.getBoundingInfo === \"function\") {\r\n                    const extendSizeChild = casted.getBoundingInfo().boundingBox.extendSize;\r\n                    extendSize.x = Math.max(extendSize.x, extendSizeChild.x);\r\n                    extendSize.y = Math.max(extendSize.y, extendSizeChild.y);\r\n                    extendSize.z = Math.max(extendSize.z, extendSizeChild.z);\r\n                }\r\n            }\r\n\r\n            this._cellWidth = Math.max(this._cellWidth, extendSize.x * 2);\r\n            this._cellHeight = Math.max(this._cellHeight, extendSize.y * 2);\r\n        }\r\n\r\n        this._cellWidth += this.margin * 2;\r\n        this._cellHeight += this.margin * 2;\r\n\r\n        // Arrange\r\n        if (this._rowThenColum) {\r\n            columns = this._columns;\r\n            rows = Math.ceil(controlCount / this._columns);\r\n        } else {\r\n            rows = this._rows;\r\n            columns = Math.ceil(controlCount / this._rows);\r\n        }\r\n\r\n        const startOffsetX = columns * 0.5 * this._cellWidth;\r\n        const startOffsetY = rows * 0.5 * this._cellHeight;\r\n        const nodeGrid = [];\r\n        let cellCounter = 0;\r\n\r\n        if (this._rowThenColum) {\r\n            for (let r = 0; r < rows; r++) {\r\n                for (let c = 0; c < columns; c++) {\r\n                    nodeGrid.push(new Vector3(c * this._cellWidth - startOffsetX + this._cellWidth / 2, r * this._cellHeight - startOffsetY + this._cellHeight / 2, 0));\r\n                    cellCounter++;\r\n                    if (cellCounter > controlCount) {\r\n                        break;\r\n                    }\r\n                }\r\n            }\r\n        } else {\r\n            for (let c = 0; c < columns; c++) {\r\n                for (let r = 0; r < rows; r++) {\r\n                    nodeGrid.push(new Vector3(c * this._cellWidth - startOffsetX + this._cellWidth / 2, r * this._cellHeight - startOffsetY + this._cellHeight / 2, 0));\r\n                    cellCounter++;\r\n                    if (cellCounter > controlCount) {\r\n                        break;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        cellCounter = 0;\r\n        for (const child of this._children) {\r\n            if (!child.mesh) {\r\n                continue;\r\n            }\r\n\r\n            this._mapGridNode(child, nodeGrid[cellCounter]);\r\n\r\n            cellCounter++;\r\n        }\r\n\r\n        this._finalProcessing();\r\n    }\r\n\r\n    /** Child classes must implement this function to provide correct control positioning */\r\n    protected abstract _mapGridNode(control: Control3D, nodePosition: Vector3): void;\r\n\r\n    /** Child classes can implement this function to provide additional processing */\r\n    protected _finalProcessing() {}\r\n}\r\n"]}

package/3D/gizmos/gizmoHandle.d.ts

@@ -0,0 +1,108 @@
+import type { Scene } from "@babylonjs/core/scene.js";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { HandleMaterial } from "../materials/handle/handleMaterial.js";
+import type { SlateGizmo } from "./slateGizmo.js";
+import { BaseSixDofDragBehavior } from "@babylonjs/core/Behaviors/Meshes/baseSixDofDragBehavior.js";
+/**
+ * State of the handle regarding user interaction
+ */
+export declare const enum HandleState {
+    /**
+     * Handle is idle
+     */
+    IDLE = 0,
+    /**
+     * Handle is hovered
+     */
+    HOVER = 1,
+    /**
+     * Handle is dragged
+     */
+    DRAG = 2
+}
+/**
+ * Base class for SlateGizmo handles
+ */
+export declare abstract class GizmoHandle {
+    protected _scene: Scene;
+    protected _state: HandleState;
+    protected _materials: HandleMaterial[];
+    private _dragStartObserver;
+    private _draggingObserver;
+    private _dragEndObserver;
+    /**
+     * @internal
+     */
+    _dragBehavior: BaseSixDofDragBehavior;
+    /**
+     * The current state of the handle
+     */
+    get state(): HandleState;
+    private _gizmo;
+    /**
+     * Returns the gizmo carrying this handle
+     */
+    get gizmo(): SlateGizmo;
+    /**
+     * Sets hover state
+     */
+    set hover(value: boolean);
+    /**
+     * Sets drag state
+     */
+    set drag(value: boolean);
+    /**
+     * Node of this handle
+     */
+    node: TransformNode;
+    /**
+     * Creates a handle for a SlateGizmo
+     * @param gizmo associated SlateGizmo
+     * @param scene scene
+     */
+    constructor(gizmo: SlateGizmo, scene: Scene);
+    protected _createMaterial(positionOffset?: Vector3): HandleMaterial;
+    private _updateMaterial;
+    /**
+     * Binds callbacks from dragging interaction
+     * @param dragStartFn Function to call on drag start
+     * @param dragFn Function to call on drag
+     * @param dragEndFn Function to call on drag end
+     */
+    setDragBehavior(dragStartFn: (event: {
+        position: Vector3;
+    }) => void, dragFn: (event: {
+        position: Vector3;
+    }) => void, dragEndFn: () => void): void;
+    /**
+     * Creates the meshes and parent node of the handle
+     * Should be overridden by child classes
+     * @returns created node
+     */
+    abstract createNode(): TransformNode;
+    /**
+     * Disposes the handle
+     */
+    dispose(): void;
+}
+/**
+ * Side handle class that rotates the slate
+ */
+export declare class SideHandle extends GizmoHandle {
+    /**
+     * Creates the meshes and parent node of the handle
+     * @returns created node
+     */
+    createNode(): TransformNode;
+}
+/**
+ * Corner handle that resizes the slate
+ */
+export declare class CornerHandle extends GizmoHandle {
+    /**
+     * Creates the meshes and parent node of the handle
+     * @returns created node
+     */
+    createNode(): TransformNode;
+}