babylonjs-editcontrol 3.2.4 → 3.3.0

package/src/EditControl.ts

@@ -17,7 +17,10 @@ import {
     Space,
     StandardMaterial,
     Vector3,
-    TransformNode
+    TransformNode,
+    Engine,
+    DeepImmutableObject,
+    UtilityLayerRenderer
 }
     from 'babylonjs';
 
@@ -48,6 +51,7 @@ export class EditControl {
 
     private _canvas: HTMLCanvasElement;
     private _scene: Scene;
+    private _utilLayer: UtilityLayerRenderer;
     private _mainCamera: Camera;
     //root of the edit control
     private _ecRoot: Mesh;
@@ -76,6 +80,7 @@ export class EditControl {
     private _pointerdown: EventListener;
     private _pointerup: EventListener;
     private _pointermove: EventListener;
+
     //axes visibility
     private _visibility: number = 0.75;
 
@@ -103,7 +108,11 @@ export class EditControl {
             this._pickWidth = pickWidth;
         }
 
-        this._scene = mesh.getScene();
+
+        this._utilLayer = UtilityLayerRenderer.DefaultUtilityLayer;
+        this._utilLayer.onlyCheckPointerDownEvents = false;
+        this._scene = this._utilLayer.utilityLayerScene;
+
         this._actHist = new ActHist(mesh, 10);
 
         mesh.computeWorldMatrix(true);
@@ -133,7 +142,7 @@ export class EditControl {
 
         //use canvas rather than scene to handle pointer events
         //scene cannot have mutiple eventlisteners for an event
-        //with canvas one will have to do ones own pickinfo generattion.
+        //with canvas one will have to do ones own pickinfo generation.
 
         canvas.addEventListener("pointerdown", this._pointerdown, false);
         canvas.addEventListener("pointerup", this._pointerup, false);
@@ -261,7 +270,7 @@ export class EditControl {
     private _cameraNormal: Vector3 = new Vector3(0, 0, 0);
     private _setECScale() {
         this._ecRoot.position.subtractToRef(this._mainCamera.position, this._cameraTOec);
-        Vector3.FromFloatArrayToRef(this._mainCamera.getWorldMatrix().asArray(), 8, this._cameraNormal);
+        Vector3.FromArrayToRef(<DeepImmutableObject<Float32Array>>this._mainCamera.getWorldMatrix().asArray(), 8, this._cameraNormal);
 
         //get distance of edit control from the camera plane 
         //project "camera to edit control" vector onto the camera normal
@@ -488,9 +497,10 @@ export class EditControl {
         evt.preventDefault();
         this._pDown = true;
         if ((<PointerEvent>evt).button != 0) return;
-        //TODO: do we really need to do a pick here?
-        //onPointerOver() has already done this.
-        let pickResult: PickingInfo = this._scene.pick(this._scene.pointerX, this._scene.pointerY, (mesh) => {
+        let engine: Engine = this._scene.getEngine();
+        let x = (engine.isPointerLock) ? this._canvas.width * 0.5 : this._scene.pointerX;
+        let y = (engine.isPointerLock) ? this._canvas.height * 0.5 : this._scene.pointerY;
+        let pickResult: PickingInfo = this._scene.pick(x, y, (mesh) => {
             if (this._transEnabled) {
                 if ((mesh == this._tX) || (mesh == this._tY) || (mesh == this._tZ) || (mesh == this._tXZ) || (mesh == this._tZY) || (mesh == this._tYX) || (mesh == this._tAll)) return true;
             } else if ((this._rotEnabled)) {
@@ -499,7 +509,7 @@ export class EditControl {
                 if ((mesh == this._sX) || (mesh == this._sY) || (mesh == this._sZ) || (mesh == this._sXZ) || (mesh == this._sZY) || (mesh == this._sYX) || (mesh == this._sAll)) return true;
             }
             return false;
-        }, null, this._mainCamera);
+        }, false, this._mainCamera);
 
         if (pickResult.hit) {
             //this.setAxesVisiblity(0);
@@ -563,7 +573,10 @@ export class EditControl {
     private _detachCamera(cam: Object, can: Object) {
         let camera: Camera = <Camera>cam;
         let canvas: HTMLCanvasElement = <HTMLCanvasElement>can;
-        camera.detachControl(canvas);
+        let engine: Engine = this._scene.getEngine();
+        if (!engine.isPointerLock) {
+            camera.detachControl(canvas)
+        }
     }
 
     private _prevOverMesh: Mesh;
@@ -577,7 +590,10 @@ export class EditControl {
     private _savedCol: Color3;
     private _onPointerOver() {
         //if(this.pDown) return;
-        let pickResult: PickingInfo = this._scene.pick(this._scene.pointerX, this._scene.pointerY, (mesh) => {
+        let engine: Engine = this._scene.getEngine();
+        let x = (engine.isPointerLock) ? this._canvas.width * 0.5 : this._scene.pointerX;
+        let y = (engine.isPointerLock) ? this._canvas.height * 0.5 : this._scene.pointerY;
+        let pickResult: PickingInfo = this._scene.pick(x, y, (mesh) => {
             if (this._transEnabled) {
                 if ((mesh == this._tX) || (mesh == this._tY) || (mesh == this._tZ) || (mesh == this._tXZ) || (mesh == this._tZY) || (mesh == this._tYX) || (mesh == this._tAll)) return true;
             } else if ((this._rotEnabled)) {
@@ -586,7 +602,7 @@ export class EditControl {
                 if ((mesh == this._sX) || (mesh == this._sY) || (mesh == this._sZ) || (mesh == this._sXZ) || (mesh == this._sZY) || (mesh == this._sYX) || (mesh == this._sAll)) return true;
             }
             return false;
-        }, null, this._mainCamera);
+        }, false, this._mainCamera);
         if (pickResult.hit) {
             //if we are still over the same axis mesh then don't do anything
             if (<Mesh>pickResult.pickedMesh != this._prevOverMesh) {
@@ -662,7 +678,10 @@ export class EditControl {
     private _onPointerUp(evt: Event) {
         this._pDown = false;
         if (this._editing) {
-            this._mainCamera.attachControl(this._canvas);
+            let engine: Engine = this._scene.getEngine();
+            if (!engine.isPointerLock) {
+                this._mainCamera.attachControl(true);
+            }
             this._setEditing(false);
             //this.setAxesVisiblity(1);
             this._hideBaxis();
@@ -1024,9 +1043,9 @@ export class EditControl {
      */
     private _setLocalAxes(mesh: Node) {
         let meshMatrix: Matrix = mesh.getWorldMatrix();
-        Vector3.FromFloatArrayToRef(meshMatrix.m, 0, this._localX);
-        Vector3.FromFloatArrayToRef(meshMatrix.m, 4, this._localY);
-        Vector3.FromFloatArrayToRef(meshMatrix.m, 8, this._localZ);
+        Vector3.FromArrayToRef(<DeepImmutableObject<Float32Array>>meshMatrix.m, 0, this._localX);
+        Vector3.FromArrayToRef(<DeepImmutableObject<Float32Array>>meshMatrix.m, 4, this._localY);
+        Vector3.FromArrayToRef(<DeepImmutableObject<Float32Array>>meshMatrix.m, 8, this._localZ);
     }
 
 
@@ -1141,7 +1160,10 @@ export class EditControl {
     }
 
     private _getPosOnPickPlane(): Vector3 {
-        let pickinfo: PickingInfo = this._scene.pick(this._scene.pointerX, this._scene.pointerY, (mesh) => {
+        let engine: Engine = this._scene.getEngine();
+        let x = (engine.isPointerLock) ? this._canvas.width * 0.5 : this._scene.pointerX;
+        let y = (engine.isPointerLock) ? this._canvas.height * 0.5 : this._scene.pointerY;
+        let pickinfo: PickingInfo = this._scene.pick(x, y, (mesh) => {
             return mesh == this._pickedPlane;
         }, null, this._mainCamera);
 
@@ -1343,9 +1365,9 @@ export class EditControl {
         let guideAxes: Mesh = new Mesh("", this._scene);
 
         //the big axes, shown when an axis is selected
-        this._bXaxis = Mesh.CreateLines("", [new Vector3(-100, 0, 0), new Vector3(100, 0, 0)], this._scene);
-        this._bYaxis = Mesh.CreateLines("", [new Vector3(0, -100, 0), new Vector3(0, 100, 0)], this._scene);
-        this._bZaxis = Mesh.CreateLines("", [new Vector3(0, 0, -100), new Vector3(0, 0, 100)], this._scene);
+        this._bXaxis = MeshBuilder.CreateLines("", { points: [new Vector3(-100, 0, 0), new Vector3(100, 0, 0)] }, this._scene);
+        this._bYaxis = MeshBuilder.CreateLines("", { points: [new Vector3(0, -100, 0), new Vector3(0, 100, 0)] }, this._scene);
+        this._bZaxis = MeshBuilder.CreateLines("", { points: [new Vector3(0, 0, -100), new Vector3(0, 0, 100)] }, this._scene);
 
         //lines are now pickable too
         this._bXaxis.isPickable = false;
@@ -1362,9 +1384,9 @@ export class EditControl {
 
         //the small axis
         let al: number = this._axesLen * this._axesScale * 0.75;
-        this._xaxis = Mesh.CreateLines("", [new Vector3(0, 0, 0), new Vector3(al, 0, 0)], this._scene);
-        this._yaxis = Mesh.CreateLines("", [new Vector3(0, 0, 0), new Vector3(0, al, 0)], this._scene);
-        this._zaxis = Mesh.CreateLines("", [new Vector3(0, 0, 0), new Vector3(0, 0, al)], this._scene);
+        this._xaxis = MeshBuilder.CreateLines("", { points: [new Vector3(0, 0, 0), new Vector3(al, 0, 0)] }, this._scene);
+        this._yaxis = MeshBuilder.CreateLines("", { points: [new Vector3(0, 0, 0), new Vector3(0, al, 0)] }, this._scene);
+        this._zaxis = MeshBuilder.CreateLines("", { points: [new Vector3(0, 0, 0), new Vector3(0, 0, al)] }, this._scene);
 
         //lines are now pickable too
         this._xaxis.isPickable = false;
@@ -1392,10 +1414,10 @@ export class EditControl {
     private _pYX: Mesh;
 
     private _createPickPlanes() {
-        this._pALL = Mesh.CreatePlane("", 5, this._scene);
-        this._pXZ = Mesh.CreatePlane("", 5, this._scene);
-        this._pZY = Mesh.CreatePlane("", 5, this._scene);
-        this._pYX = Mesh.CreatePlane("", 5, this._scene);
+        this._pALL = MeshBuilder.CreatePlane("", { size: 5 }, this._scene);
+        this._pXZ = MeshBuilder.CreatePlane("", { size: 5 }, this._scene);
+        this._pZY = MeshBuilder.CreatePlane("", { size: 5 }, this._scene);
+        this._pYX = MeshBuilder.CreatePlane("", { size: 5 }, this._scene);
 
         this._pALL.isPickable = false;
         this._pXZ.isPickable = false;
@@ -1454,22 +1476,33 @@ export class EditControl {
 
         this._tCtl = new Mesh("", this._scene);
 
-        /*pickable invisible boxes around axes lines*/
+        // pickable invisible boxes around axes lines
         this._createPickableTrans(r, l, this._tCtl, this._scene);
 
         //non pickable but visible cones at end of axes lines
         this._createNonPickableTrans(r, l, this._scene);
     }
 
+    /**
+     * pickable but invisible 
+     * a) 3 boxes around each of the 3 small axes lines
+     * b) 3 small planes near origin for movement along a plane
+     * @param r 
+     * @param l 
+     * @param tCtl 
+     * @param scene 
+     */
+
     private _createPickableTrans(r: number, l: number, tCtl: Mesh, scene: Scene) {
         let tX = this._extrudeBox(r / 2, l);
         tX.name = "X";
         let tY = tX.clone("Y");
         let tZ = tX.clone("Z");
 
-        let tXZ = MeshBuilder.CreatePlane("XZ", { size: r * 2 }, scene);
-        let tZY = MeshBuilder.CreatePlane("ZY", { size: r * 2 }, scene);
-        let tYX = MeshBuilder.CreatePlane("YX", { size: r * 2 }, scene);
+        let s = r * 2;
+        let tXZ = MeshBuilder.CreatePlane("XZ", { size: s }, scene);
+        let tZY = MeshBuilder.CreatePlane("ZY", { size: s }, scene);
+        let tYX = MeshBuilder.CreatePlane("YX", { size: s }, scene);
 
         tXZ.rotation.x = 1.57;
         tZY.rotation.y = -1.57;
@@ -1487,7 +1520,7 @@ export class EditControl {
         tZY.bakeCurrentTransformIntoVertices();
         tYX.bakeCurrentTransformIntoVertices();
 
-        let tAll = Mesh.CreateBox("ALL", r * 2, scene);
+        let tAll = MeshBuilder.CreateBox("ALL", { size: r * 2 }, scene);
 
         tX.parent = tCtl;
         tY.parent = tCtl;
@@ -1515,12 +1548,15 @@ export class EditControl {
         this._setPickableFalse(this._all_t)
     }
 
+    //non pickable but visible 
+    // a) 3 cones at end of the 3 small axes lines
+    // b) 3 small planes near origin for movement along a plane
     private _createNonPickableTrans(r: number, l: number, scene: Scene) {
         //cone length
         let cl: number = l / 5;
         //cone base radius
         //let cr: number = r;
-        let tEndX = Mesh.CreateCylinder("", cl, 0, r, 6, 1, scene);
+        let tEndX = MeshBuilder.CreateCylinder("", { height: cl, diameterTop: 0, diameterBottom: r, tessellation: 6, subdivisions: 1 }, scene);
         let tEndY = tEndX.clone("");
         let tEndZ = tEndX.clone("");
 
@@ -1530,7 +1566,7 @@ export class EditControl {
         let tEndZY = MeshBuilder.CreatePlane("ZY", { size: s }, scene);
         let tEndYX = MeshBuilder.CreatePlane("YX", { size: s }, scene);
 
-        let tEndAll = Mesh.CreateBox("ALL", r, scene);
+        let tEndAll = MeshBuilder.CreateBox("ALL", { size: r }, scene);
 
         tEndX.rotation.x = 1.57;
         tEndY.rotation.x = 1.57;
@@ -1709,7 +1745,7 @@ export class EditControl {
     private _extrudeBox(w: number, l: number): Mesh {
         let shape: Vector3[] = [new Vector3(w, w, 0), new Vector3(-w, w, 0), new Vector3(-w, -w, 0), new Vector3(w, -w, 0), new Vector3(w, w, 0)];
         let path: Vector3[] = [new Vector3(0, 0, 0), new Vector3(0, 0, l)];
-        let box: Mesh = Mesh.ExtrudeShape("", shape, path, 1, 0, 2, this._scene);
+        let box: Mesh = MeshBuilder.ExtrudeShape("", { shape: shape, path: path, scale: 1, rotation: 0, cap: 2 }, this._scene);
         return box;
     }
 
@@ -1735,7 +1771,7 @@ export class EditControl {
                 p++;
             }
         }
-        let circle: LinesMesh = Mesh.CreateLines("", points, this._scene);
+        let circle: LinesMesh = MeshBuilder.CreateLines("", { points: points }, this._scene);
         return circle;
     }
 
@@ -1752,7 +1788,7 @@ export class EditControl {
             points[p] = new Vector3(x, 0, z);
             p++;
         }
-        let tube: Mesh = Mesh.CreateTube("", points, this._pickWidth * this._axesScale * 2, 3, null, Mesh.NO_CAP, this._scene);
+        let tube: Mesh = MeshBuilder.CreateTube("", { path: points, radius: this._pickWidth * this._axesScale * 2, tessellation: 3, cap: Mesh.NO_CAP }, this._scene);
         return tube;
     }
 
@@ -1820,7 +1856,7 @@ export class EditControl {
         sZY.bakeCurrentTransformIntoVertices();
         sYX.bakeCurrentTransformIntoVertices();
 
-        let sAll: Mesh = Mesh.CreateBox("ALL", 2 * r, this._scene);
+        let sAll: Mesh = MeshBuilder.CreateBox("ALL", { size: 2 * r }, this._scene);
 
         sX.parent = sCtl;
         sY.parent = sCtl;
@@ -1850,7 +1886,7 @@ export class EditControl {
 
     private _createNonPickableScale(r: number, l: number) {
 
-        let sEndX = Mesh.CreateBox("", r, this._scene);
+        let sEndX = MeshBuilder.CreateBox("", { size: r }, this._scene);
         let sEndY = sEndX.clone("");
         let sEndZ = sEndX.clone("");
 
@@ -1860,7 +1896,7 @@ export class EditControl {
         let sEndYX = MeshBuilder.CreatePlane("YX", { size: s }, this._scene);
 
 
-        let sEndAll = Mesh.CreateBox("ALL", r, this._scene);
+        let sEndAll = MeshBuilder.CreateBox("ALL", { size: r }, this._scene);
 
         sEndXZ.rotation.x = 1.57;
         sEndZY.rotation.y = -1.57;
@@ -1949,31 +1985,46 @@ export class EditControl {
         this._snapT = s;
     }
 
+    public isTransSnap(): boolean {
+        return this._snapT;
+    }
+
     public setRotSnap(s: boolean) {
         this._snapR = s;
     }
+    public isRotSnap(): boolean {
+        return this._snapR;
+    }
 
     public setScaleSnap(s: boolean) {
         this._snapS = s;
     }
+    public isScaleSnap(): boolean {
+        return this._snapS;
+    }
 
     private _tSnap: Vector3 = new Vector3(this._transSnap, this._transSnap, this._transSnap);
     public setTransSnapValue(t: number) {
         this._tSnap.copyFromFloats(t, t, t);
         this._transSnap = t;
     }
+    public getTransSnapValue(): number {
+        return this._transSnap;
+    }
 
     public setRotSnapValue(r: number) {
         this._rotSnap = r;
     }
+    public getRotSnapValue(): number {
+        return this._rotSnap;
+    }
 
-    /**
-     * use this to set the scale snap value
-     */
     public setScaleSnapValue(r: number) {
         this._scaleSnap = r;
     }
-
+    public getScaleSnapValue(): number {
+        return this._scaleSnap;
+    }
     //few temp vectors & matrix
     private _tv1: Vector3 = new Vector3(0, 0, 0);
     private _tv2: Vector3 = new Vector3(0, 0, 0);
@@ -2064,6 +2115,14 @@ export class EditControl {
         return angle;
     }
 
+    private static _getStandardMaterial(col: Color3, scene: Scene): StandardMaterial {
+        let mat: StandardMaterial = new StandardMaterial("", scene);
+        mat.emissiveColor = col;
+        mat.diffuseColor = Color3.Black();
+        mat.specularColor = Color3.Black();
+        mat.backFaceCulling = false;
+        return mat;
+    }
 
     private _createMaterials(scene: Scene) {
         this._redMat = EditControl._getStandardMaterial(this._redCol, scene);
@@ -2081,14 +2140,7 @@ export class EditControl {
         this._yellowMat.dispose();
     }
 
-    private static _getStandardMaterial(col: Color3, scene: Scene): StandardMaterial {
-        let mat: StandardMaterial = new StandardMaterial("", scene);
-        mat.emissiveColor = col;
-        mat.diffuseColor = Color3.Black();
-        mat.specularColor = Color3.Black();
-        mat.backFaceCulling = false;
-        return mat;
-    }
+
 }
 
 class ActHist {