@onerjs/gui 8.23.1

package/3D/gizmos/gizmoHandle.js

@@ -0,0 +1,175 @@
+import { CreateBox } from "@babylonjs/core/Meshes/Builders/boxBuilder.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 { BaseSixDofDragBehavior } from "@babylonjs/core/Behaviors/Meshes/baseSixDofDragBehavior.js";
+/**
+ * State of the handle regarding user interaction
+ */
+export var HandleState;
+(function (HandleState) {
+    /**
+     * Handle is idle
+     */
+    HandleState[HandleState["IDLE"] = 0] = "IDLE";
+    /**
+     * Handle is hovered
+     */
+    HandleState[HandleState["HOVER"] = 1] = "HOVER";
+    /**
+     * Handle is dragged
+     */
+    HandleState[HandleState["DRAG"] = 2] = "DRAG";
+})(HandleState || (HandleState = {}));
+/**
+ * Base class for SlateGizmo handles
+ */
+export class GizmoHandle {
+    /**
+     * The current state of the handle
+     */
+    get state() {
+        return this._state;
+    }
+    /**
+     * Returns the gizmo carrying this handle
+     */
+    get gizmo() {
+        return this._gizmo;
+    }
+    /**
+     * Sets hover state
+     */
+    set hover(value) {
+        if (value) {
+            this._state |= 1 /* HandleState.HOVER */;
+        }
+        else {
+            this._state &= ~1 /* HandleState.HOVER */;
+        }
+        this._updateMaterial();
+    }
+    /**
+     * Sets drag state
+     */
+    set drag(value) {
+        if (value) {
+            this._state |= 2 /* HandleState.DRAG */;
+        }
+        else {
+            this._state &= ~2 /* HandleState.DRAG */;
+        }
+        this._updateMaterial();
+    }
+    /**
+     * Creates a handle for a SlateGizmo
+     * @param gizmo associated SlateGizmo
+     * @param scene scene
+     */
+    constructor(gizmo, scene) {
+        this._state = 0 /* HandleState.IDLE */;
+        this._materials = [];
+        this._scene = scene;
+        this._gizmo = gizmo;
+        this.node = this.createNode();
+        this.node.reservedDataStore = {
+            handle: this,
+        };
+    }
+    _createMaterial(positionOffset) {
+        const mat = new HandleMaterial("handle", this._scene);
+        if (positionOffset) {
+            mat._positionOffset = positionOffset;
+        }
+        return mat;
+    }
+    _updateMaterial() {
+        const state = this._state;
+        for (const mat of this._materials) {
+            mat.hover = false;
+            mat.drag = false;
+        }
+        if (state & 2 /* HandleState.DRAG */) {
+            for (const mat of this._materials) {
+                mat.drag = true;
+            }
+        }
+        else if (state & 1 /* HandleState.HOVER */) {
+            for (const mat of this._materials) {
+                mat.hover = true;
+            }
+        }
+    }
+    /**
+     * 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, dragFn, dragEndFn) {
+        const dragBehavior = new BaseSixDofDragBehavior();
+        this._dragBehavior = dragBehavior;
+        this._dragStartObserver = dragBehavior.onDragStartObservable.add(dragStartFn);
+        this._draggingObserver = dragBehavior.onDragObservable.add(dragFn);
+        this._dragEndObserver = dragBehavior.onDragEndObservable.add(dragEndFn);
+        this._dragBehavior.attach(this.node);
+    }
+    /**
+     * Disposes the handle
+     */
+    dispose() {
+        this._dragBehavior.onDragStartObservable.remove(this._dragStartObserver);
+        this._dragBehavior.onDragObservable.remove(this._draggingObserver);
+        this._dragBehavior.onDragEndObservable.remove(this._dragEndObserver);
+        this._dragBehavior.detach();
+        for (const material of this._materials) {
+            material.dispose();
+        }
+        this.node.dispose();
+    }
+}
+/**
+ * Side handle class that rotates the slate
+ */
+export class SideHandle extends GizmoHandle {
+    /**
+     * Creates the meshes and parent node of the handle
+     * @returns created node
+     */
+    createNode() {
+        // Create a simple vertical rectangle
+        const verticalBox = CreateBox("sideVert", { width: 1, height: 10, depth: 0.1 }, this._scene);
+        const sideNode = new TransformNode("side", this._scene);
+        verticalBox.parent = sideNode;
+        const mat = this._createMaterial();
+        verticalBox.material = mat;
+        verticalBox.isNearGrabbable = true;
+        this._materials.push(mat);
+        return sideNode;
+    }
+}
+/**
+ * Corner handle that resizes the slate
+ */
+export class CornerHandle extends GizmoHandle {
+    /**
+     * Creates the meshes and parent node of the handle
+     * @returns created node
+     */
+    createNode() {
+        // Create 2 boxes making a bottom left corner
+        const horizontalBox = CreateBox("angleHor", { width: 3, height: 1, depth: 0.1 }, this._scene);
+        const verticalBox = CreateBox("angleVert", { width: 1, height: 3, depth: 0.1 }, this._scene);
+        const angleNode = new TransformNode("angle", this._scene);
+        horizontalBox.parent = angleNode;
+        verticalBox.parent = angleNode;
+        horizontalBox.material = this._createMaterial(new Vector3(1, 0, 0));
+        verticalBox.material = this._createMaterial(new Vector3(0, 1, 0));
+        verticalBox.isNearGrabbable = true;
+        horizontalBox.isNearGrabbable = true;
+        this._materials.push(horizontalBox.material);
+        this._materials.push(verticalBox.material);
+        return angleNode;
+    }
+}
+//# sourceMappingURL=gizmoHandle.js.map

package/3D/gizmos/gizmoHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gizmoHandle.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/gizmos/gizmoHandle.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,sDAAwC;AAC5D,OAAO,EAAE,aAAa,EAAE,gDAAkC;AAC1D,OAAO,EAAE,OAAO,EAAE,6CAA+B;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAoC,CAAC;AAEpE,OAAO,EAAE,sBAAsB,EAAE,mEAAqD;AAItF;;GAEG;AACH,MAAM,CAAN,IAAkB,WAajB;AAbD,WAAkB,WAAW;IACzB;;OAEG;IACH,6CAAQ,CAAA;IACR;;OAEG;IACH,+CAAS,CAAA;IACT;;OAEG;IACH,6CAAQ,CAAA;AACZ,CAAC,EAbiB,WAAW,KAAX,WAAW,QAa5B;AAED;;GAEG;AACH,MAAM,OAAgB,WAAW;IAa7B;;OAEG;IACH,IAAW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAID;;OAEG;IACH,IAAW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED;;OAEG;IACH,IAAW,KAAK,CAAC,KAAc;QAC3B,IAAI,KAAK,EAAE,CAAC;YACR,IAAI,CAAC,MAAM,6BAAqB,CAAC;QACrC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,MAAM,IAAI,0BAAkB,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IACD;;OAEG;IACH,IAAW,IAAI,CAAC,KAAc;QAC1B,IAAI,KAAK,EAAE,CAAC;YACR,IAAI,CAAC,MAAM,4BAAoB,CAAC;QACpC,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,MAAM,IAAI,yBAAiB,CAAC;QACrC,CAAC;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;IAC3B,CAAC;IAOD;;;;OAIG;IACH,YAAY,KAAiB,EAAE,KAAY;QA9DjC,WAAM,4BAAiC;QACvC,eAAU,GAAqB,EAAE,CAAC;QA8DxC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QAEpB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,iBAAiB,GAAG;YAC1B,MAAM,EAAE,IAAI;SACf,CAAC;IACN,CAAC;IAES,eAAe,CAAC,cAAwB;QAC9C,MAAM,GAAG,GAAG,IAAI,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,cAAc,EAAE,CAAC;YACjB,GAAG,CAAC,eAAe,GAAG,cAAc,CAAC;QACzC,CAAC;QACD,OAAO,GAAG,CAAC;IACf,CAAC;IAEO,eAAe;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;QAC1B,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAChC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC;YAClB,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,IAAI,KAAK,2BAAmB,EAAE,CAAC;YAC3B,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;YACpB,CAAC;QACL,CAAC;aAAM,IAAI,KAAK,4BAAoB,EAAE,CAAC;YACnC,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBAChC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC;YACrB,CAAC;QACL,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACI,eAAe,CAAC,WAAmD,EAAE,MAA8C,EAAE,SAAqB;QAC7I,MAAM,YAAY,GAAG,IAAI,sBAAsB,EAAE,CAAC;QAElD,IAAI,CAAC,aAAa,GAAG,YAAY,CAAC;QAElC,IAAI,CAAC,kBAAkB,GAAG,YAAY,CAAC,qBAAqB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QAC9E,IAAI,CAAC,iBAAiB,GAAG,YAAY,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QACnE,IAAI,CAAC,gBAAgB,GAAG,YAAY,CAAC,mBAAmB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAExE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;IASD;;OAEG;IACI,OAAO;QACV,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACzE,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnE,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAErE,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QAE5B,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACrC,QAAQ,CAAC,OAAO,EAAE,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;IACxB,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,WAAW;IACvC;;;OAGG;IACI,UAAU;QACb,qCAAqC;QACrC,MAAM,WAAW,GAAG,SAAS,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC7F,MAAM,QAAQ,GAAG,IAAI,aAAa,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QACxD,WAAW,CAAC,MAAM,GAAG,QAAQ,CAAC;QAE9B,MAAM,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACnC,WAAW,CAAC,QAAQ,GAAG,GAAG,CAAC;QAC3B,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1B,OAAO,QAAQ,CAAC;IACpB,CAAC;CACJ;AAED;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IACzC;;;OAGG;IACI,UAAU;QACb,6CAA6C;QAC7C,MAAM,aAAa,GAAG,SAAS,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9F,MAAM,WAAW,GAAG,SAAS,CAAC,WAAW,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7F,MAAM,SAAS,GAAG,IAAI,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1D,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC;QACjC,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC;QAE/B,aAAa,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QACpE,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAClE,WAAW,CAAC,eAAe,GAAG,IAAI,CAAC;QACnC,aAAa,CAAC,eAAe,GAAG,IAAI,CAAC;QAErC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,QAA0B,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,QAA0B,CAAC,CAAC;QAC7D,OAAO,SAAS,CAAC;IACrB,CAAC;CACJ","sourcesContent":["import type { Scene } from \"core/scene\";\r\nimport { CreateBox } from \"core/Meshes/Builders/boxBuilder\";\r\nimport { TransformNode } from \"core/Meshes/transformNode\";\r\nimport { Vector3 } from \"core/Maths/math.vector\";\r\nimport { HandleMaterial } from \"../materials/handle/handleMaterial\";\r\nimport type { SlateGizmo } from \"./slateGizmo\";\r\nimport { BaseSixDofDragBehavior } from \"core/Behaviors/Meshes/baseSixDofDragBehavior\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Observer } from \"core/Misc/observable\";\r\n\r\n/**\r\n * State of the handle regarding user interaction\r\n */\r\nexport const enum HandleState {\r\n    /**\r\n     * Handle is idle\r\n     */\r\n    IDLE = 0,\r\n    /**\r\n     * Handle is hovered\r\n     */\r\n    HOVER = 1,\r\n    /**\r\n     * Handle is dragged\r\n     */\r\n    DRAG = 2,\r\n}\r\n\r\n/**\r\n * Base class for SlateGizmo handles\r\n */\r\nexport abstract class GizmoHandle {\r\n    protected _scene: Scene;\r\n    protected _state: HandleState = HandleState.IDLE;\r\n    protected _materials: HandleMaterial[] = [];\r\n\r\n    private _dragStartObserver: Nullable<Observer<any>>;\r\n    private _draggingObserver: Nullable<Observer<any>>;\r\n    private _dragEndObserver: Nullable<Observer<any>>;\r\n    /**\r\n     * @internal\r\n     */\r\n    public _dragBehavior: BaseSixDofDragBehavior;\r\n\r\n    /**\r\n     * The current state of the handle\r\n     */\r\n    public get state(): HandleState {\r\n        return this._state;\r\n    }\r\n\r\n    private _gizmo: SlateGizmo;\r\n\r\n    /**\r\n     * Returns the gizmo carrying this handle\r\n     */\r\n    public get gizmo() {\r\n        return this._gizmo;\r\n    }\r\n\r\n    /**\r\n     * Sets hover state\r\n     */\r\n    public set hover(value: boolean) {\r\n        if (value) {\r\n            this._state |= HandleState.HOVER;\r\n        } else {\r\n            this._state &= ~HandleState.HOVER;\r\n        }\r\n\r\n        this._updateMaterial();\r\n    }\r\n    /**\r\n     * Sets drag state\r\n     */\r\n    public set drag(value: boolean) {\r\n        if (value) {\r\n            this._state |= HandleState.DRAG;\r\n        } else {\r\n            this._state &= ~HandleState.DRAG;\r\n        }\r\n\r\n        this._updateMaterial();\r\n    }\r\n\r\n    /**\r\n     * Node of this handle\r\n     */\r\n    public node: TransformNode;\r\n\r\n    /**\r\n     * Creates a handle for a SlateGizmo\r\n     * @param gizmo associated SlateGizmo\r\n     * @param scene scene\r\n     */\r\n    constructor(gizmo: SlateGizmo, scene: Scene) {\r\n        this._scene = scene;\r\n        this._gizmo = gizmo;\r\n\r\n        this.node = this.createNode();\r\n        this.node.reservedDataStore = {\r\n            handle: this,\r\n        };\r\n    }\r\n\r\n    protected _createMaterial(positionOffset?: Vector3) {\r\n        const mat = new HandleMaterial(\"handle\", this._scene);\r\n        if (positionOffset) {\r\n            mat._positionOffset = positionOffset;\r\n        }\r\n        return mat;\r\n    }\r\n\r\n    private _updateMaterial() {\r\n        const state = this._state;\r\n        for (const mat of this._materials) {\r\n            mat.hover = false;\r\n            mat.drag = false;\r\n        }\r\n\r\n        if (state & HandleState.DRAG) {\r\n            for (const mat of this._materials) {\r\n                mat.drag = true;\r\n            }\r\n        } else if (state & HandleState.HOVER) {\r\n            for (const mat of this._materials) {\r\n                mat.hover = true;\r\n            }\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Binds callbacks from dragging interaction\r\n     * @param dragStartFn Function to call on drag start\r\n     * @param dragFn Function to call on drag\r\n     * @param dragEndFn Function to call on drag end\r\n     */\r\n    public setDragBehavior(dragStartFn: (event: { position: Vector3 }) => void, dragFn: (event: { position: Vector3 }) => void, dragEndFn: () => void) {\r\n        const dragBehavior = new BaseSixDofDragBehavior();\r\n\r\n        this._dragBehavior = dragBehavior;\r\n\r\n        this._dragStartObserver = dragBehavior.onDragStartObservable.add(dragStartFn);\r\n        this._draggingObserver = dragBehavior.onDragObservable.add(dragFn);\r\n        this._dragEndObserver = dragBehavior.onDragEndObservable.add(dragEndFn);\r\n\r\n        this._dragBehavior.attach(this.node);\r\n    }\r\n\r\n    /**\r\n     * Creates the meshes and parent node of the handle\r\n     * Should be overridden by child classes\r\n     * @returns created node\r\n     */\r\n    public abstract createNode(): TransformNode;\r\n\r\n    /**\r\n     * Disposes the handle\r\n     */\r\n    public dispose() {\r\n        this._dragBehavior.onDragStartObservable.remove(this._dragStartObserver);\r\n        this._dragBehavior.onDragObservable.remove(this._draggingObserver);\r\n        this._dragBehavior.onDragEndObservable.remove(this._dragEndObserver);\r\n\r\n        this._dragBehavior.detach();\r\n\r\n        for (const material of this._materials) {\r\n            material.dispose();\r\n        }\r\n        this.node.dispose();\r\n    }\r\n}\r\n\r\n/**\r\n * Side handle class that rotates the slate\r\n */\r\nexport class SideHandle extends GizmoHandle {\r\n    /**\r\n     * Creates the meshes and parent node of the handle\r\n     * @returns created node\r\n     */\r\n    public createNode() {\r\n        // Create a simple vertical rectangle\r\n        const verticalBox = CreateBox(\"sideVert\", { width: 1, height: 10, depth: 0.1 }, this._scene);\r\n        const sideNode = new TransformNode(\"side\", this._scene);\r\n        verticalBox.parent = sideNode;\r\n\r\n        const mat = this._createMaterial();\r\n        verticalBox.material = mat;\r\n        verticalBox.isNearGrabbable = true;\r\n        this._materials.push(mat);\r\n\r\n        return sideNode;\r\n    }\r\n}\r\n\r\n/**\r\n * Corner handle that resizes the slate\r\n */\r\nexport class CornerHandle extends GizmoHandle {\r\n    /**\r\n     * Creates the meshes and parent node of the handle\r\n     * @returns created node\r\n     */\r\n    public createNode() {\r\n        // Create 2 boxes making a bottom left corner\r\n        const horizontalBox = CreateBox(\"angleHor\", { width: 3, height: 1, depth: 0.1 }, this._scene);\r\n        const verticalBox = CreateBox(\"angleVert\", { width: 1, height: 3, depth: 0.1 }, this._scene);\r\n\r\n        const angleNode = new TransformNode(\"angle\", this._scene);\r\n        horizontalBox.parent = angleNode;\r\n        verticalBox.parent = angleNode;\r\n\r\n        horizontalBox.material = this._createMaterial(new Vector3(1, 0, 0));\r\n        verticalBox.material = this._createMaterial(new Vector3(0, 1, 0));\r\n        verticalBox.isNearGrabbable = true;\r\n        horizontalBox.isNearGrabbable = true;\r\n\r\n        this._materials.push(horizontalBox.material as HandleMaterial);\r\n        this._materials.push(verticalBox.material as HandleMaterial);\r\n        return angleNode;\r\n    }\r\n}\r\n"]}

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

@@ -0,0 +1,2 @@
+export * from "./slateGizmo.js";
+export * from "./gizmoHandle.js";

package/3D/gizmos/index.js

@@ -0,0 +1,3 @@
+export * from "./slateGizmo.js";
+export * from "./gizmoHandle.js";
+//# sourceMappingURL=index.js.map

package/3D/gizmos/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../dev/gui/src/3D/gizmos/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC","sourcesContent":["export * from \"./slateGizmo\";\r\nexport * from \"./gizmoHandle\";\r\n"]}

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

@@ -0,0 +1,57 @@
+import { Gizmo } from "@babylonjs/core/Gizmos/gizmo.js";
+import type { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
+import type { UtilityLayerRenderer } from "@babylonjs/core/Rendering/utilityLayerRenderer.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { HolographicSlate } from "../controls/holographicSlate.js";
+/**
+ * Gizmo to resize 2D slates
+ */
+export declare class SlateGizmo extends Gizmo {
+    private _boundingDimensions;
+    private _pickedPointObserver;
+    private _renderObserver;
+    private _tmpQuaternion;
+    private _tmpVector;
+    private _corners;
+    private _sides;
+    private _handlesParent;
+    private _handleHovered;
+    private _handleDragged;
+    private _boundingBoxGizmo;
+    /**
+     * Value we use to offset handles from mesh
+     */
+    private _margin;
+    private _handleSize;
+    private _attachedSlate;
+    private _existingSlateScale;
+    /**
+     * If set, the handles will increase in size based on the distance away from the camera to have a consistent screen size (Default: true)
+     */
+    fixedScreenSize: boolean;
+    /**
+     * The distance away from the object which the draggable meshes should appear world sized when fixedScreenSize is set to true (default: 10)
+     */
+    fixedScreenSizeDistanceFactor: number;
+    /**
+     * The slate attached to this gizmo
+     */
+    set attachedSlate(control: Nullable<HolographicSlate>);
+    get attachedSlate(): Nullable<HolographicSlate>;
+    constructor(utilityLayer?: UtilityLayerRenderer);
+    private _createNode;
+    private _keepAspectRatio;
+    private _clampDimensions;
+    private _moveHandle;
+    private _assignDragBehaviorCorners;
+    private _assignDragBehaviorSides;
+    protected _attachedNodeChanged(value: Nullable<AbstractMesh>): void;
+    /**
+     * Updates the bounding box information for the gizmo
+     */
+    updateBoundingBox(): void;
+    private _updateHandlesPosition;
+    private _updateHandlesScaling;
+    protected _update(): void;
+    dispose(): void;
+}

package/3D/gizmos/slateGizmo.js

@@ -0,0 +1,353 @@
+import { Gizmo } from "@babylonjs/core/Gizmos/gizmo.js";
+import { Epsilon } from "@babylonjs/core/Maths/math.constants.js";
+import { Matrix, Quaternion, TmpVectors, Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import { TransformNode } from "@babylonjs/core/Meshes/transformNode.js";
+import { PivotTools } from "@babylonjs/core/Misc/pivotTools.js";
+import { CornerHandle, SideHandle } from "./gizmoHandle.js";
+/**
+ * Gizmo to resize 2D slates
+ */
+export class SlateGizmo extends Gizmo {
+    /**
+     * The slate attached to this gizmo
+     */
+    set attachedSlate(control) {
+        if (control) {
+            this.attachedMesh = control.mesh;
+            this.updateBoundingBox();
+            this._pickedPointObserver = control._host.onPickingObservable.add((pickedMesh) => {
+                if (this._handleHovered && (!pickedMesh || pickedMesh.parent !== this._handleHovered.node)) {
+                    this._handleHovered.hover = false;
+                    this._handleHovered = null;
+                }
+                if (pickedMesh && pickedMesh.parent && pickedMesh.parent.reservedDataStore && pickedMesh.parent.reservedDataStore.handle) {
+                    const handle = pickedMesh.parent.reservedDataStore.handle;
+                    if (handle.gizmo === this) {
+                        this._handleHovered = handle;
+                        this._handleHovered.hover = true;
+                    }
+                }
+            });
+        }
+        else if (this._attachedSlate) {
+            this._attachedSlate._host.onPickingObservable.remove(this._pickedPointObserver);
+        }
+        this._attachedSlate = control;
+    }
+    get attachedSlate() {
+        return this._attachedSlate;
+    }
+    constructor(utilityLayer) {
+        super(utilityLayer);
+        this._boundingDimensions = new Vector3(0, 0, 0);
+        this._renderObserver = null;
+        this._tmpQuaternion = new Quaternion();
+        this._tmpVector = new Vector3(0, 0, 0);
+        // Ordered bl, br, tr, tl
+        this._corners = [];
+        // Ordered left, bottom, right, top
+        this._sides = [];
+        this._boundingBoxGizmo = {
+            min: new Vector3(),
+            max: new Vector3(),
+        };
+        /**
+         * Value we use to offset handles from mesh
+         */
+        this._margin = 0.35;
+        this._handleSize = 0.075;
+        this._attachedSlate = null;
+        this._existingSlateScale = new Vector3();
+        /**
+         * If set, the handles will increase in size based on the distance away from the camera to have a consistent screen size (Default: true)
+         */
+        this.fixedScreenSize = false;
+        /**
+         * The distance away from the object which the draggable meshes should appear world sized when fixedScreenSize is set to true (default: 10)
+         */
+        this.fixedScreenSizeDistanceFactor = 10;
+        this._createNode();
+        this.updateScale = false;
+        this._renderObserver = this.gizmoLayer.originalScene.onBeforeRenderObservable.add(() => {
+            // Only update the bounding box if scaling has changed
+            if (this.attachedMesh && !this._existingSlateScale.equals(this.attachedMesh.scaling)) {
+                this.updateBoundingBox();
+            }
+        });
+    }
+    _createNode() {
+        this._handlesParent = new TransformNode("handlesParent", this.gizmoLayer.utilityLayerScene);
+        this._handlesParent.rotationQuaternion = Quaternion.Identity();
+        const masksCorners = [
+            {
+                dimensions: new Vector3(-1, -1, 0),
+                origin: new Vector3(1, 0, 0),
+            },
+            {
+                dimensions: new Vector3(1, -1, 0),
+                origin: new Vector3(0, 0, 0),
+            },
+            {
+                dimensions: new Vector3(1, 1, 0),
+                origin: new Vector3(0, 1, 0),
+            },
+            {
+                dimensions: new Vector3(-1, 1, 0),
+                origin: new Vector3(1, 1, 0),
+            },
+        ];
+        for (let i = 0; i < 4; i++) {
+            const corner = new CornerHandle(this, this.gizmoLayer.utilityLayerScene);
+            this._corners.push(corner);
+            corner.node.rotation.z = (Math.PI / 2) * i;
+            corner.node.parent = this._handlesParent;
+            this._assignDragBehaviorCorners(corner, (originStart, dimensionsStart, offset, masks) => this._moveHandle(originStart, dimensionsStart, offset, masks, true), masksCorners[i]);
+        }
+        for (let i = 0; i < 4; i++) {
+            const side = new SideHandle(this, this.gizmoLayer.utilityLayerScene);
+            this._sides.push(side);
+            side.node.rotation.z = (Math.PI / 2) * i;
+            side.node.parent = this._handlesParent;
+            this._assignDragBehaviorSides(side, i % 2 === 0 ? new Vector3(0, 1, 0) : new Vector3(1, 0, 0));
+        }
+        this._handlesParent.parent = this._rootMesh;
+    }
+    _keepAspectRatio(vector, aspectRatio, invertDiagonal = false) {
+        const axis = TmpVectors.Vector3[0];
+        axis.copyFromFloats(aspectRatio, 1, 0).normalize();
+        if (invertDiagonal) {
+            axis.y *= -1;
+        }
+        const dot = Vector3.Dot(vector, axis);
+        vector.copyFrom(axis).scaleInPlace(dot);
+    }
+    _clampDimensions(vector, dimensions, mask, keepAspectRatio = false) {
+        const impact = TmpVectors.Vector3[0];
+        impact.copyFrom(vector).multiplyInPlace(mask);
+        const clampedDimensions = TmpVectors.Vector3[1];
+        clampedDimensions.copyFromFloats(Math.max(this._attachedSlate.minDimensions.x, impact.x + dimensions.x), Math.max(this._attachedSlate.minDimensions.y, impact.y + dimensions.y), 0);
+        if (keepAspectRatio) {
+            // Extra logic to ensure the ratio is maintained when the vector has been clamped
+            const ratio = dimensions.x / dimensions.y;
+            clampedDimensions.x = Math.max(clampedDimensions.x, clampedDimensions.y * ratio);
+            clampedDimensions.y = Math.max(clampedDimensions.y, clampedDimensions.x / ratio);
+        }
+        // Calculating the real impact of vector on clamped dimensions
+        impact.copyFrom(clampedDimensions).subtractInPlace(dimensions);
+        vector.x = Math.sign(vector.x) * Math.abs(impact.x);
+        vector.y = Math.sign(vector.y) * Math.abs(impact.y);
+    }
+    _moveHandle(originStart, dimensionsStart, offset, masks, isCorner) {
+        if (!this._attachedSlate) {
+            return;
+        }
+        if (isCorner) {
+            const aspectRatio = dimensionsStart.x / dimensionsStart.y;
+            this._keepAspectRatio(offset, aspectRatio, masks.dimensions.x * masks.dimensions.y < 0);
+        }
+        this._clampDimensions(offset, dimensionsStart, masks.dimensions, isCorner);
+        const offsetOriginMasked = TmpVectors.Vector3[0];
+        const offsetDimensionsMasked = TmpVectors.Vector3[1];
+        offsetOriginMasked.copyFrom(offset).multiplyInPlace(masks.origin);
+        offsetDimensionsMasked.copyFrom(offset).multiplyInPlace(masks.dimensions);
+        this._attachedSlate.origin.copyFrom(originStart).addInPlace(offsetOriginMasked);
+        this._attachedSlate.dimensions.set(dimensionsStart.x + offsetDimensionsMasked.x, dimensionsStart.y + offsetDimensionsMasked.y);
+    }
+    _assignDragBehaviorCorners(handle, moveFn, masks) {
+        const dimensionsStart = new Vector3();
+        const originStart = new Vector3();
+        const dragOrigin = new Vector3();
+        const toObjectFrame = new Matrix();
+        const dragPlaneNormal = new Vector3();
+        const projectToRef = (position, normal, origin, ref) => {
+            // Projects on the plane with its normal and origin
+            position.subtractToRef(origin, TmpVectors.Vector3[0]);
+            const dot = Vector3.Dot(TmpVectors.Vector3[0], normal);
+            TmpVectors.Vector3[1].copyFrom(normal).scaleInPlace(dot);
+            TmpVectors.Vector3[0].subtractInPlace(TmpVectors.Vector3[1]);
+            TmpVectors.Vector3[0].addToRef(origin, ref);
+        };
+        const dragStart = (event) => {
+            if (this.attachedSlate && this.attachedMesh) {
+                dimensionsStart.set(this.attachedSlate.dimensions.x, this.attachedSlate.dimensions.y, Epsilon);
+                originStart.copyFrom(this.attachedSlate.origin);
+                dragOrigin.copyFrom(event.position);
+                toObjectFrame.copyFrom(this.attachedMesh.computeWorldMatrix(true));
+                toObjectFrame.invert();
+                this.attachedSlate._followButton.isToggled = false;
+                Vector3.TransformNormalToRef(Vector3.Forward(), this.attachedMesh.getWorldMatrix(), dragPlaneNormal);
+                dragPlaneNormal.normalize();
+                if (this._handleHovered) {
+                    this._handleDragged = this._handleHovered;
+                    this._handleDragged.drag = true;
+                }
+            }
+        };
+        const dragging = (event) => {
+            if (this.attachedSlate && this.attachedMesh) {
+                projectToRef(event.position, dragPlaneNormal, dragOrigin, this._tmpVector);
+                this._tmpVector.subtractInPlace(dragOrigin);
+                Vector3.TransformNormalToRef(this._tmpVector, toObjectFrame, this._tmpVector);
+                moveFn(originStart, dimensionsStart, this._tmpVector, masks);
+                this.attachedSlate._positionElements();
+                this.updateBoundingBox();
+            }
+        };
+        const dragEnd = () => {
+            if (this.attachedSlate && this.attachedNode) {
+                this.attachedSlate._updatePivot();
+                if (this._handleDragged) {
+                    this._handleDragged.drag = false;
+                    this._handleDragged = null;
+                }
+            }
+        };
+        handle.setDragBehavior(dragStart, dragging, dragEnd);
+    }
+    _assignDragBehaviorSides(handle, dragPlaneNormal) {
+        const quaternionOrigin = new Quaternion();
+        const dragOrigin = new Vector3();
+        const directionOrigin = new Vector3();
+        const worldPivot = new Vector3();
+        const worldPlaneNormal = new Vector3();
+        const dragStart = (event) => {
+            if (this.attachedSlate && this.attachedMesh) {
+                quaternionOrigin.copyFrom(this.attachedMesh.rotationQuaternion);
+                dragOrigin.copyFrom(event.position);
+                worldPivot.copyFrom(this.attachedMesh.getAbsolutePivotPoint());
+                directionOrigin.copyFrom(dragOrigin).subtractInPlace(worldPivot).normalize();
+                this.attachedSlate._followButton.isToggled = false;
+                Vector3.TransformNormalToRef(dragPlaneNormal, this.attachedMesh.getWorldMatrix(), worldPlaneNormal);
+                worldPlaneNormal.normalize();
+                if (this._handleHovered) {
+                    this._handleDragged = this._handleHovered;
+                    this._handleDragged.drag = true;
+                }
+            }
+        };
+        const dragging = (event) => {
+            if (this.attachedSlate && this.attachedMesh) {
+                this._tmpVector.copyFrom(event.position);
+                this._tmpVector.subtractInPlace(worldPivot);
+                this._tmpVector.normalize();
+                const angle = -Vector3.GetAngleBetweenVectorsOnPlane(this._tmpVector, directionOrigin, worldPlaneNormal);
+                Quaternion.RotationAxisToRef(dragPlaneNormal, angle, this._tmpQuaternion);
+                quaternionOrigin.multiplyToRef(this._tmpQuaternion, this.attachedMesh.rotationQuaternion);
+            }
+        };
+        const dragEnd = () => {
+            if (this.attachedSlate && this.attachedNode) {
+                this.attachedSlate._updatePivot();
+                if (this._handleDragged) {
+                    this._handleDragged.drag = false;
+                    this._handleDragged = null;
+                }
+            }
+        };
+        handle.setDragBehavior(dragStart, dragging, dragEnd);
+    }
+    _attachedNodeChanged(value) {
+        if (value) {
+            this.updateBoundingBox();
+        }
+    }
+    /**
+     * Updates the bounding box information for the gizmo
+     */
+    updateBoundingBox() {
+        if (this.attachedMesh) {
+            PivotTools._RemoveAndStorePivotPoint(this.attachedMesh);
+            // Store original parent
+            const originalParent = this.attachedMesh.parent;
+            this.attachedMesh.setParent(null);
+            this._update();
+            // Rotate based on axis
+            if (!this.attachedMesh.rotationQuaternion) {
+                this.attachedMesh.rotationQuaternion = Quaternion.RotationYawPitchRoll(this.attachedMesh.rotation.y, this.attachedMesh.rotation.x, this.attachedMesh.rotation.z);
+            }
+            // Store original position and reset mesh to origin before computing the bounding box
+            this._tmpQuaternion.copyFrom(this.attachedMesh.rotationQuaternion);
+            this._tmpVector.copyFrom(this.attachedMesh.position);
+            this.attachedMesh.rotationQuaternion.set(0, 0, 0, 1);
+            this.attachedMesh.position.set(0, 0, 0);
+            // Update bounding dimensions/positions
+            const boundingMinMax = this.attachedMesh.getHierarchyBoundingVectors();
+            boundingMinMax.max.subtractToRef(boundingMinMax.min, this._boundingDimensions);
+            this._boundingBoxGizmo.min = boundingMinMax.min;
+            this._boundingBoxGizmo.max = boundingMinMax.max;
+            // Update handles of the gizmo
+            this._updateHandlesPosition();
+            this._updateHandlesScaling();
+            // Restore position/rotation values
+            this.attachedMesh.rotationQuaternion.copyFrom(this._tmpQuaternion);
+            this.attachedMesh.position.copyFrom(this._tmpVector);
+            PivotTools._RestorePivotPoint(this.attachedMesh);
+            // Restore original parent
+            this.attachedMesh.setParent(originalParent);
+            this.attachedMesh.computeWorldMatrix(true);
+            this._existingSlateScale.copyFrom(this.attachedMesh.scaling);
+        }
+    }
+    _updateHandlesPosition() {
+        const min = this._boundingBoxGizmo.min.clone();
+        const max = this._boundingBoxGizmo.max.clone();
+        const handleScaling = this._corners[0].node.scaling.length();
+        min.x -= this._margin * handleScaling;
+        min.y -= this._margin * handleScaling;
+        max.x += this._margin * handleScaling;
+        max.y += this._margin * handleScaling;
+        const center = min.add(max).scaleInPlace(0.5);
+        this._corners[0].node.position.copyFromFloats(min.x, min.y, 0);
+        this._corners[1].node.position.copyFromFloats(max.x, min.y, 0);
+        this._corners[2].node.position.copyFromFloats(max.x, max.y, 0);
+        this._corners[3].node.position.copyFromFloats(min.x, max.y, 0);
+        this._sides[0].node.position.copyFromFloats(min.x, center.y, 0);
+        this._sides[1].node.position.copyFromFloats(center.x, min.y, 0);
+        this._sides[2].node.position.copyFromFloats(max.x, center.y, 0);
+        this._sides[3].node.position.copyFromFloats(center.x, max.y, 0);
+    }
+    _updateHandlesScaling() {
+        if (this._attachedSlate && this._attachedSlate.mesh) {
+            const scaledWidth = this._attachedSlate.mesh.scaling.x * this._attachedSlate.dimensions.x;
+            const scaledHeight = this._attachedSlate.mesh.scaling.y * this._attachedSlate.dimensions.y;
+            const scale = Math.min(scaledWidth, scaledHeight) * this._handleSize;
+            for (let index = 0; index < this._corners.length; index++) {
+                this._corners[index].node.scaling.setAll(scale);
+            }
+            for (let index = 0; index < this._sides.length; index++) {
+                this._sides[index].node.scaling.setAll(scale);
+            }
+        }
+    }
+    _update() {
+        super._update();
+        if (!this.gizmoLayer.utilityLayerScene.activeCamera) {
+            return;
+        }
+        if (this._attachedSlate && this._attachedSlate.mesh) {
+            if (this.fixedScreenSize) {
+                this._attachedSlate.mesh.absolutePosition.subtractToRef(this.gizmoLayer.utilityLayerScene.activeCamera.position, this._tmpVector);
+                const distanceFromCamera = (this._handleSize * this._tmpVector.length()) / this.fixedScreenSizeDistanceFactor;
+                for (let i = 0; i < this._corners.length; i++) {
+                    this._corners[i].node.scaling.set(distanceFromCamera, distanceFromCamera, distanceFromCamera);
+                }
+                for (let i = 0; i < this._sides.length; i++) {
+                    this._sides[i].node.scaling.set(distanceFromCamera, distanceFromCamera, distanceFromCamera);
+                }
+            }
+            this._updateHandlesPosition();
+        }
+    }
+    dispose() {
+        this.gizmoLayer.originalScene.onBeforeRenderObservable.remove(this._renderObserver);
+        // Will dispose rootMesh and all descendants
+        super.dispose();
+        for (const corner of this._corners) {
+            corner.dispose();
+        }
+        for (const side of this._sides) {
+            side.dispose();
+        }
+    }
+}
+//# sourceMappingURL=slateGizmo.js.map