@babylonjs/gui 5.0.0-alpha.9 → 5.0.0-beta.4

package/3D/gizmos/gizmoHandle.js

@@ -0,0 +1,210 @@
+import { __extends } from "tslib";
+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
+ */
+var GizmoHandle = /** @class */ (function () {
+    /**
+     * Creates a handle for a SlateGizmo
+     * @param gizmo associated SlateGizmo
+     * @param scene scene
+     */
+    function GizmoHandle(gizmo, scene) {
+        this._state = HandleState.IDLE;
+        this._materials = [];
+        this._scene = scene;
+        this._gizmo = gizmo;
+        this.node = this.createNode();
+        this.node.reservedDataStore = {
+            handle: this,
+        };
+    }
+    Object.defineProperty(GizmoHandle.prototype, "state", {
+        /**
+         * The current state of the handle
+         */
+        get: function () {
+            return this._state;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GizmoHandle.prototype, "gizmo", {
+        /**
+         * Returns the gizmo carrying this handle
+         */
+        get: function () {
+            return this._gizmo;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GizmoHandle.prototype, "hover", {
+        /**
+         * Sets hover state
+         */
+        set: function (value) {
+            if (value) {
+                this._state |= HandleState.HOVER;
+            }
+            else {
+                this._state &= ~HandleState.HOVER;
+            }
+            this._updateMaterial();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GizmoHandle.prototype, "drag", {
+        /**
+         * Sets drag state
+         */
+        set: function (value) {
+            if (value) {
+                this._state |= HandleState.DRAG;
+            }
+            else {
+                this._state &= ~HandleState.DRAG;
+            }
+            this._updateMaterial();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GizmoHandle.prototype._createMaterial = function (positionOffset) {
+        var mat = new HandleMaterial("handle", this._scene);
+        if (positionOffset) {
+            mat._positionOffset = positionOffset;
+        }
+        return mat;
+    };
+    GizmoHandle.prototype._updateMaterial = function () {
+        var state = this._state;
+        for (var _i = 0, _a = this._materials; _i < _a.length; _i++) {
+            var mat = _a[_i];
+            mat.hover = false;
+            mat.drag = false;
+        }
+        if (state & HandleState.DRAG) {
+            for (var _b = 0, _c = this._materials; _b < _c.length; _b++) {
+                var mat = _c[_b];
+                mat.drag = true;
+            }
+        }
+        else if (state & HandleState.HOVER) {
+            for (var _d = 0, _e = this._materials; _d < _e.length; _d++) {
+                var mat = _e[_d];
+                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
+     */
+    GizmoHandle.prototype.setDragBehavior = function (dragStartFn, dragFn, dragEndFn) {
+        var 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
+     */
+    GizmoHandle.prototype.dispose = function () {
+        this._dragBehavior.onDragStartObservable.remove(this._dragStartObserver);
+        this._dragBehavior.onDragObservable.remove(this._draggingObserver);
+        this._dragBehavior.onDragEndObservable.remove(this._dragEndObserver);
+        this._dragBehavior.detach();
+        for (var _i = 0, _a = this._materials; _i < _a.length; _i++) {
+            var material = _a[_i];
+            material.dispose();
+        }
+        this.node.dispose();
+    };
+    return GizmoHandle;
+}());
+export { GizmoHandle };
+/**
+ * Side handle class that rotates the slate
+ */
+var SideHandle = /** @class */ (function (_super) {
+    __extends(SideHandle, _super);
+    function SideHandle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Creates the meshes and parent node of the handle
+     * @returns created node
+     */
+    SideHandle.prototype.createNode = function () {
+        // Create a simple vertical rectangle
+        var verticalBox = CreateBox("sideVert", { width: 1, height: 10, depth: 0.1 }, this._scene);
+        var sideNode = new TransformNode("side", this._scene);
+        verticalBox.parent = sideNode;
+        var mat = this._createMaterial();
+        verticalBox.material = mat;
+        verticalBox.isNearGrabbable = true;
+        this._materials.push(mat);
+        return sideNode;
+    };
+    return SideHandle;
+}(GizmoHandle));
+export { SideHandle };
+/**
+ * Corner handle that resizes the slate
+ */
+var CornerHandle = /** @class */ (function (_super) {
+    __extends(CornerHandle, _super);
+    function CornerHandle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Creates the meshes and parent node of the handle
+     * @returns created node
+     */
+    CornerHandle.prototype.createNode = function () {
+        // Create 2 boxes making a bottom left corner
+        var horizontalBox = CreateBox("angleHor", { width: 3, height: 1, depth: 0.1 }, this._scene);
+        var verticalBox = CreateBox("angleVert", { width: 1, height: 3, depth: 0.1 }, this._scene);
+        var 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;
+    };
+    return CornerHandle;
+}(GizmoHandle));
+export { CornerHandle };
+//# sourceMappingURL=gizmoHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gizmoHandle.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/3D/gizmos/gizmoHandle.ts"],"names":[],"mappings":"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","sourcesContent":["import { Scene } from \"@babylonjs/core/scene\";\r\nimport { CreateBox } from \"@babylonjs/core/Meshes/Builders/boxBuilder\";\r\nimport { TransformNode } from \"@babylonjs/core/Meshes/transformNode\";\r\nimport { Vector3 } from \"@babylonjs/core/Maths/math.vector\";\r\nimport { HandleMaterial } from \"../materials/handle/handleMaterial\";\r\nimport { SlateGizmo } from \"./slateGizmo\";\r\nimport { BaseSixDofDragBehavior } from \"@babylonjs/core/Behaviors/Meshes/baseSixDofDragBehavior\";\r\nimport { Nullable } from \"@babylonjs/core/types\";\r\nimport { Observer } from \"@babylonjs/core/Misc/observable\";\r\n\r\n/**\r\n * State of the handle regarding user interaction\r\n */\r\nexport 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     * @hidden\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 overriden 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";
+export * from "./gizmoHandle";

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":["../../../../sourceES6/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,59 @@
+import { Gizmo } from "@babylonjs/core/Gizmos/gizmo";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh";
+import { UtilityLayerRenderer } from "@babylonjs/core/Rendering/utilityLayerRenderer";
+import { Nullable } from "@babylonjs/core/types";
+import { HolographicSlate } from "../controls/holographicSlate";
+/**
+ * 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 _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;
+    /**
+     * Size of the handles (meters in XR)
+     */
+    handleSize: 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;
+    protected _update(): void;
+    dispose(): void;
+}

package/3D/gizmos/slateGizmo.js

@@ -0,0 +1,364 @@
+import { __extends } from "tslib";
+import { Gizmo } from "@babylonjs/core/Gizmos/gizmo.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
+ */
+var SlateGizmo = /** @class */ (function (_super) {
+    __extends(SlateGizmo, _super);
+    function SlateGizmo(utilityLayer) {
+        var _this = _super.call(this, utilityLayer) || this;
+        _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._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;
+        /**
+         * Size of the handles (meters in XR)
+         */
+        _this.handleSize = 0.01;
+        _this._createNode();
+        _this.updateScale = false;
+        _this._renderObserver = _this.gizmoLayer.originalScene.onBeforeRenderObservable.add(function () {
+            // Only update the bounding box if scaling has changed
+            if (_this.attachedMesh && !_this._existingSlateScale.equals(_this.attachedMesh.scaling)) {
+                _this.updateBoundingBox();
+            }
+        });
+        return _this;
+    }
+    Object.defineProperty(SlateGizmo.prototype, "attachedSlate", {
+        get: function () {
+            return this._attachedSlate;
+        },
+        /**
+         * The slate attached to this gizmo
+         */
+        set: function (control) {
+            var _this = this;
+            if (control) {
+                this.attachedMesh = control.mesh;
+                this.updateBoundingBox();
+                this._pickedPointObserver = control._host.onPickingObservable.add(function (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) {
+                        var 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;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SlateGizmo.prototype._createNode = function () {
+        var _this = this;
+        this._handlesParent = new TransformNode("handlesParent", this.gizmoLayer.utilityLayerScene);
+        this._handlesParent.rotationQuaternion = Quaternion.Identity();
+        var 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 (var i = 0; i < 4; i++) {
+            var corner = new CornerHandle(this, this.gizmoLayer.utilityLayerScene);
+            this._corners.push(corner);
+            corner.node.rotation.z = (Math.PI / 2) * i;
+            corner.node.scaling.setAll(this.handleSize);
+            corner.node.parent = this._handlesParent;
+            this._assignDragBehaviorCorners(corner, function (originStart, dimensionsStart, offset, masks) { return _this._moveHandle(originStart, dimensionsStart, offset, masks, true); }, masksCorners[i]);
+        }
+        for (var i = 0; i < 4; i++) {
+            var side = new SideHandle(this, this.gizmoLayer.utilityLayerScene);
+            this._sides.push(side);
+            side.node.rotation.z = (Math.PI / 2) * i;
+            side.node.scaling.copyFromFloats(this.handleSize, this.handleSize, this.handleSize);
+            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;
+    };
+    SlateGizmo.prototype._keepAspectRatio = function (vector, aspectRatio, invertDiagonal) {
+        if (invertDiagonal === void 0) { invertDiagonal = false; }
+        var axis = TmpVectors.Vector3[0];
+        axis.copyFromFloats(aspectRatio, 1, 0).normalize();
+        if (invertDiagonal) {
+            axis.y *= -1;
+        }
+        var dot = Vector3.Dot(vector, axis);
+        vector.copyFrom(axis).scaleInPlace(dot);
+    };
+    SlateGizmo.prototype._clampDimensions = function (vector, dimensions, mask, keepAspectRatio) {
+        if (keepAspectRatio === void 0) { keepAspectRatio = false; }
+        var impact = TmpVectors.Vector3[0];
+        impact.copyFrom(vector).multiplyInPlace(mask);
+        var 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
+            var 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);
+    };
+    SlateGizmo.prototype._moveHandle = function (originStart, dimensionsStart, offset, masks, isCorner) {
+        if (!this._attachedSlate) {
+            return;
+        }
+        if (isCorner) {
+            var aspectRatio = dimensionsStart.x / dimensionsStart.y;
+            this._keepAspectRatio(offset, aspectRatio, masks.dimensions.x * masks.dimensions.y < 0);
+        }
+        this._clampDimensions(offset, dimensionsStart, masks.dimensions, isCorner);
+        var offsetOriginMasked = TmpVectors.Vector3[0];
+        var 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.copyFrom(dimensionsStart).addInPlace(offsetDimensionsMasked);
+        this._attachedSlate.backplateDimensions.x = this._attachedSlate.dimensions.x;
+    };
+    SlateGizmo.prototype._assignDragBehaviorCorners = function (handle, moveFn, masks) {
+        var _this = this;
+        var dimensionsStart = new Vector3();
+        var originStart = new Vector3();
+        var dragOrigin = new Vector3();
+        var toObjectFrame = new Matrix();
+        var dragPlaneNormal = new Vector3();
+        var previousFollowState = false;
+        var projectToRef = function (position, normal, origin, ref) {
+            // Projects on the plane with its normal and origin
+            position.subtractToRef(origin, TmpVectors.Vector3[0]);
+            var 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);
+        };
+        var dragStart = function (event) {
+            if (_this.attachedSlate && _this.attachedMesh) {
+                dimensionsStart.copyFrom(_this.attachedSlate.dimensions);
+                originStart.copyFrom(_this.attachedSlate.origin);
+                dragOrigin.copyFrom(event.position);
+                toObjectFrame.copyFrom(_this.attachedMesh.computeWorldMatrix(true));
+                toObjectFrame.invert();
+                previousFollowState = _this.attachedSlate.defaultBehavior.followBehaviorEnabled;
+                _this.attachedSlate.defaultBehavior.followBehaviorEnabled = false;
+                Vector3.TransformNormalToRef(Vector3.Forward(), _this.attachedMesh.getWorldMatrix(), dragPlaneNormal);
+                dragPlaneNormal.normalize();
+                if (_this._handleHovered) {
+                    _this._handleDragged = _this._handleHovered;
+                    _this._handleDragged.drag = true;
+                }
+            }
+        };
+        var dragging = function (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();
+            }
+        };
+        var dragEnd = function () {
+            if (_this.attachedSlate && _this.attachedNode) {
+                _this.attachedSlate._updatePivot();
+                _this.attachedSlate.defaultBehavior.followBehaviorEnabled = previousFollowState;
+                if (_this._handleDragged) {
+                    _this._handleDragged.drag = false;
+                    _this._handleDragged = null;
+                }
+            }
+        };
+        handle.setDragBehavior(dragStart, dragging, dragEnd);
+    };
+    SlateGizmo.prototype._assignDragBehaviorSides = function (handle, dragPlaneNormal) {
+        var _this = this;
+        var quaternionOrigin = new Quaternion();
+        var dragOrigin = new Vector3();
+        var directionOrigin = new Vector3();
+        var worldPivot = new Vector3();
+        var previousFollowState;
+        var worldPlaneNormal = new Vector3();
+        var dragStart = function (event) {
+            if (_this.attachedSlate && _this.attachedMesh) {
+                quaternionOrigin.copyFrom(_this.attachedMesh.rotationQuaternion);
+                dragOrigin.copyFrom(event.position);
+                previousFollowState = _this.attachedSlate.defaultBehavior.followBehaviorEnabled;
+                _this.attachedSlate.defaultBehavior.followBehaviorEnabled = false;
+                worldPivot.copyFrom(_this.attachedMesh.getAbsolutePivotPoint());
+                directionOrigin.copyFrom(dragOrigin).subtractInPlace(worldPivot).normalize();
+                Vector3.TransformNormalToRef(dragPlaneNormal, _this.attachedMesh.getWorldMatrix(), worldPlaneNormal);
+                worldPlaneNormal.normalize();
+                if (_this._handleHovered) {
+                    _this._handleDragged = _this._handleHovered;
+                    _this._handleDragged.drag = true;
+                }
+            }
+        };
+        var dragging = function (event) {
+            if (_this.attachedSlate && _this.attachedMesh) {
+                _this._tmpVector.copyFrom(event.position);
+                _this._tmpVector.subtractInPlace(worldPivot);
+                _this._tmpVector.normalize();
+                var angle = -Vector3.GetAngleBetweenVectorsOnPlane(_this._tmpVector, directionOrigin, worldPlaneNormal);
+                Quaternion.RotationAxisToRef(dragPlaneNormal, angle, _this._tmpQuaternion);
+                quaternionOrigin.multiplyToRef(_this._tmpQuaternion, _this.attachedMesh.rotationQuaternion);
+            }
+        };
+        var dragEnd = function () {
+            if (_this.attachedSlate && _this.attachedNode) {
+                _this.attachedSlate._updatePivot();
+                _this.attachedSlate.defaultBehavior.followBehaviorEnabled = previousFollowState;
+                if (_this._handleDragged) {
+                    _this._handleDragged.drag = false;
+                    _this._handleDragged = null;
+                }
+            }
+        };
+        handle.setDragBehavior(dragStart, dragging, dragEnd);
+    };
+    SlateGizmo.prototype._attachedNodeChanged = function (value) {
+        if (value) {
+            this.updateBoundingBox();
+        }
+    };
+    /**
+     * Updates the bounding box information for the gizmo
+     */
+    SlateGizmo.prototype.updateBoundingBox = function () {
+        if (this.attachedMesh) {
+            PivotTools._RemoveAndStorePivotPoint(this.attachedMesh);
+            // Store original parent
+            var 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
+            var 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();
+            // 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);
+        }
+    };
+    SlateGizmo.prototype._updateHandlesPosition = function () {
+        var min = this._boundingBoxGizmo.min.clone();
+        var max = this._boundingBoxGizmo.max.clone();
+        var 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;
+        var 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);
+    };
+    SlateGizmo.prototype._update = function () {
+        _super.prototype._update.call(this);
+        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);
+                var distanceFromCamera = (this.handleSize * this._tmpVector.length()) / this.fixedScreenSizeDistanceFactor;
+                for (var i = 0; i < this._corners.length; i++) {
+                    this._corners[i].node.scaling.set(distanceFromCamera, distanceFromCamera, distanceFromCamera);
+                }
+            }
+            this._updateHandlesPosition();
+        }
+    };
+    SlateGizmo.prototype.dispose = function () {
+        this.gizmoLayer.originalScene.onBeforeRenderObservable.remove(this._renderObserver);
+        // Will dispose rootMesh and all descendants
+        _super.prototype.dispose.call(this);
+        for (var _i = 0, _a = this._corners; _i < _a.length; _i++) {
+            var corner = _a[_i];
+            corner.dispose();
+        }
+        for (var _b = 0, _c = this._sides; _b < _c.length; _b++) {
+            var side = _c[_b];
+            side.dispose();
+        }
+    };
+    return SlateGizmo;
+}(Gizmo));
+export { SlateGizmo };
+//# sourceMappingURL=slateGizmo.js.map