@xeokit/xeokit-sdk 2.4.0-alpha-79 → 2.4.0-alpha-80

package/dist/xeokit-sdk.cjs.js

@@ -85706,6 +85706,14 @@ class PivotController {
         this._pivoting = false; // True while pivoting
         this._shown = false;
 
+        this._pivotSphereEnabled = false;
+        this._pivotSphere = null;
+        this._pivotSphereSize = 1;
+        this._pivotSphereGeometry = null;
+        this._pivotSphereMaterial = null;
+        this._rtcCenter = math.vec3();
+        this._rtcPos = math.vec3();
+
         this._pivotViewPos = math.vec4();
         this._pivotProjPos = math.vec4();
         this._pivotCanvasPos = math.vec2();
@@ -85721,7 +85729,44 @@ class PivotController {
 
         this._onTick = this._scene.on("tick", () => {
             this.updatePivotElement();
+            this.updatePivotSphere();
+        });
+    }
+
+    createPivotSphere() {
+        const currentPos = this.getPivotPos();
+        const cameraPos = math.vec3();
+        math.decomposeMat4(math.inverseMat4(this._scene.viewer.camera.viewMatrix, math.mat4()), cameraPos, math.vec4(), math.vec3());
+        const length = math.distVec3(cameraPos, currentPos);
+        let radius = (Math.tan(Math.PI / 500) * length) * this._pivotSphereSize;
+
+        if (this._scene.camera.projection == "ortho") {
+            radius /= (this._scene.camera.ortho.scale / 2);
+        }
+
+        worldToRTCPos(currentPos, this._rtcCenter, this._rtcPos);
+        this._pivotSphereGeometry = new VBOGeometry(
+            this._scene,
+            buildSphereGeometry({ radius })
+        );
+        this._pivotSphere = new Mesh(this._scene, {
+            geometry: this._pivotSphereGeometry,
+            material: this._pivotSphereMaterial,
+            pickable: false,
+            position: this._rtcPos,
+            rtcCenter: this._rtcCenter
         });
+    };
+
+    destroyPivotSphere() {
+        if (this._pivotSphere) {
+            this._pivotSphere.destroy();
+            this._pivotSphere = null;
+        }
+        if (this._pivotSphereGeometry) {
+            this._pivotSphereGeometry.destroy();
+            this._pivotSphereGeometry = null;
+        }
     }
 
     updatePivotElement() {
@@ -85760,6 +85805,15 @@ class PivotController {
         }
     }
 
+    updatePivotSphere() {
+        if (this._pivoting && this._pivotSphere) {
+            worldToRTCPos(this.getPivotPos(), this._rtcCenter, this._rtcPos);
+            if(!math.compareVec3(this._rtcPos, this._pivotSphere.position)) {
+                this.destroyPivotSphere();
+                this.createPivotSphere();
+            }
+        }
+    }
     /**
      * Sets the HTML DOM element that will represent the pivot position.
      *
@@ -85769,6 +85823,37 @@ class PivotController {
         this._pivotElement = pivotElement;
     }
 
+    /**
+     * Sets a sphere as the representation of the pivot position.
+     *
+     * @param {Object} [cfg] Sphere configuration.
+     * @param {String} [cfg.size=1] Optional size factor of the sphere. Defaults to 1.
+     * @param {String} [cfg.color=Array] Optional maretial color. Defaults to a red.
+     */
+    enablePivotSphere(cfg = {}) {
+        this.destroyPivotSphere();
+        this._pivotSphereEnabled = true;
+        if (cfg.size) {
+            this._pivotSphereSize = cfg.size;
+        }
+        const color = cfg.color || [1, 0, 0];
+        this._pivotSphereMaterial = new PhongMaterial(this._scene, {
+            emissive: color,
+            ambient: color,
+            specular: [0,0,0],
+            diffuse: [0,0,0],
+        });
+    }
+
+    /**
+     * Remove the sphere as the representation of the pivot position.
+     *
+     */
+    disablePivotSphere() {
+        this.destroyPivotSphere();
+        this._pivotSphereEnabled = false;
+    }
+
     /**
      * Begins pivoting.
      */
@@ -85838,6 +85923,7 @@ class PivotController {
      * Sets the pivot position to the 3D projection of the given 2D canvas coordinates on a sphere centered
      * at the viewpoint. The radius of the sphere is configured via {@link CameraControl#smartPivot}.
      *
+     *
      * @param canvasPos
      */
     setCanvasPivotPos(canvasPos) {
@@ -85921,18 +86007,15 @@ class PivotController {
         if (this._shown) {
             return;
         }
-        if (this._hideTimeout !== null) {
-            window.clearTimeout(this._hideTimeout);
-            this._hideTimeout = null;
-        }
         if (this._pivotElement) {
             this.updatePivotElement();
             this._pivotElement.style.visibility = "visible";
-            this._shown = true;
-            this._hideTimeout = window.setTimeout(() => {
-                this.hidePivot();
-            }, 1000);
         }
+        if (this._pivotSphereEnabled) {
+            this.destroyPivotSphere();
+            this.createPivotSphere();
+        }
+        this._shown = true;
     }
 
     /**
@@ -85944,13 +86027,12 @@ class PivotController {
         if (!this._shown) {
             return;
         }
-        if (this._hideTimeout !== null) {
-            window.clearTimeout(this._hideTimeout);
-            this._hideTimeout = null;
-        }
         if (this._pivotElement) {
             this._pivotElement.style.visibility = "hidden";
         }
+        if (this._pivotSphereEnabled) {
+            this.destroyPivotSphere();
+        }
         this._shown = false;
     }
 
@@ -85962,6 +86044,7 @@ class PivotController {
     }
 
     destroy() {
+        this.destroyPivotSphere();
         this._scene.camera.off(this._onViewMatrix);
         this._scene.camera.off(this._onProjMatrix);
         this._scene.off(this._onTick);
@@ -86838,6 +86921,10 @@ class MousePickHandler {
             if (e.which === 3) {
                 rightDown = false;
             }
+
+            if (pivotController.getPivoting()) {
+                pivotController.endPivot();
+            }
         });
 
         canvas.addEventListener('mouseup', this._canvasMouseUpHandler = (e) => {
@@ -87070,6 +87157,10 @@ class KeyboardPanRotateDollyHandler {
             if (keyCode === input.KEY_SHIFT) {
                 canvas.style.cursor = null;
             }
+
+            if (controllers.pivotController.getPivoting()) {
+                controllers.pivotController.endPivot();
+            }
         });
 
         this._onTick = scene.on("tick", (e) => {
@@ -87689,6 +87780,12 @@ class TouchPanRotateAndDollyHandler {
             numTouches = touches.length;
         });
 
+        canvas.addEventListener("touchend", this._canvasTouchEndHandler = () => {
+            if (pivotController.getPivoting()) {
+                pivotController.endPivot();
+            }
+        });
+
         canvas.addEventListener("touchmove", this._canvasTouchMoveHandler = (event) => {
 
             if (!(configs.active && configs.pointerEnabled)) {
@@ -87827,6 +87924,7 @@ class TouchPanRotateAndDollyHandler {
     destroy() {
         const canvas = this._scene.canvas.canvas;
         canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
+        canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
         canvas.removeEventListener("touchmove", this._canvasTouchMoveHandler);
         this._scene.off(this._onTick);
     }
@@ -89675,6 +89773,25 @@ class CameraControl extends Component {
         return this._configs.keyboardLayout;
     }
 
+    /**
+     * Sets a sphere as the representation of the pivot position.
+     *
+     * @param {Object} [cfg] Sphere configuration.
+     * @param {String} [cfg.size=1] Optional size factor of the sphere. Defaults to 1.
+     * @param {String} [cfg.material=PhongMaterial] Optional size factor of the sphere. Defaults to a red opaque material.
+     */
+    enablePivotSphere(cfg = {}) {
+        this._controllers.pivotController.enablePivotSphere(cfg);
+    }
+
+    /**
+     * Remove the sphere as the representation of the pivot position.
+     *
+     */
+    disablePivotSphere() {
+        this._controllers.pivotController.disablePivotSphere();
+    }
+    
     /**
      * Sets whether smart default pivoting is enabled.
      *

package/dist/xeokit-sdk.es.js

@@ -85702,6 +85702,14 @@ class PivotController {
         this._pivoting = false; // True while pivoting
         this._shown = false;
 
+        this._pivotSphereEnabled = false;
+        this._pivotSphere = null;
+        this._pivotSphereSize = 1;
+        this._pivotSphereGeometry = null;
+        this._pivotSphereMaterial = null;
+        this._rtcCenter = math.vec3();
+        this._rtcPos = math.vec3();
+
         this._pivotViewPos = math.vec4();
         this._pivotProjPos = math.vec4();
         this._pivotCanvasPos = math.vec2();
@@ -85717,7 +85725,44 @@ class PivotController {
 
         this._onTick = this._scene.on("tick", () => {
             this.updatePivotElement();
+            this.updatePivotSphere();
+        });
+    }
+
+    createPivotSphere() {
+        const currentPos = this.getPivotPos();
+        const cameraPos = math.vec3();
+        math.decomposeMat4(math.inverseMat4(this._scene.viewer.camera.viewMatrix, math.mat4()), cameraPos, math.vec4(), math.vec3());
+        const length = math.distVec3(cameraPos, currentPos);
+        let radius = (Math.tan(Math.PI / 500) * length) * this._pivotSphereSize;
+
+        if (this._scene.camera.projection == "ortho") {
+            radius /= (this._scene.camera.ortho.scale / 2);
+        }
+
+        worldToRTCPos(currentPos, this._rtcCenter, this._rtcPos);
+        this._pivotSphereGeometry = new VBOGeometry(
+            this._scene,
+            buildSphereGeometry({ radius })
+        );
+        this._pivotSphere = new Mesh(this._scene, {
+            geometry: this._pivotSphereGeometry,
+            material: this._pivotSphereMaterial,
+            pickable: false,
+            position: this._rtcPos,
+            rtcCenter: this._rtcCenter
         });
+    };
+
+    destroyPivotSphere() {
+        if (this._pivotSphere) {
+            this._pivotSphere.destroy();
+            this._pivotSphere = null;
+        }
+        if (this._pivotSphereGeometry) {
+            this._pivotSphereGeometry.destroy();
+            this._pivotSphereGeometry = null;
+        }
     }
 
     updatePivotElement() {
@@ -85756,6 +85801,15 @@ class PivotController {
         }
     }
 
+    updatePivotSphere() {
+        if (this._pivoting && this._pivotSphere) {
+            worldToRTCPos(this.getPivotPos(), this._rtcCenter, this._rtcPos);
+            if(!math.compareVec3(this._rtcPos, this._pivotSphere.position)) {
+                this.destroyPivotSphere();
+                this.createPivotSphere();
+            }
+        }
+    }
     /**
      * Sets the HTML DOM element that will represent the pivot position.
      *
@@ -85765,6 +85819,37 @@ class PivotController {
         this._pivotElement = pivotElement;
     }
 
+    /**
+     * Sets a sphere as the representation of the pivot position.
+     *
+     * @param {Object} [cfg] Sphere configuration.
+     * @param {String} [cfg.size=1] Optional size factor of the sphere. Defaults to 1.
+     * @param {String} [cfg.color=Array] Optional maretial color. Defaults to a red.
+     */
+    enablePivotSphere(cfg = {}) {
+        this.destroyPivotSphere();
+        this._pivotSphereEnabled = true;
+        if (cfg.size) {
+            this._pivotSphereSize = cfg.size;
+        }
+        const color = cfg.color || [1, 0, 0];
+        this._pivotSphereMaterial = new PhongMaterial(this._scene, {
+            emissive: color,
+            ambient: color,
+            specular: [0,0,0],
+            diffuse: [0,0,0],
+        });
+    }
+
+    /**
+     * Remove the sphere as the representation of the pivot position.
+     *
+     */
+    disablePivotSphere() {
+        this.destroyPivotSphere();
+        this._pivotSphereEnabled = false;
+    }
+
     /**
      * Begins pivoting.
      */
@@ -85834,6 +85919,7 @@ class PivotController {
      * Sets the pivot position to the 3D projection of the given 2D canvas coordinates on a sphere centered
      * at the viewpoint. The radius of the sphere is configured via {@link CameraControl#smartPivot}.
      *
+     *
      * @param canvasPos
      */
     setCanvasPivotPos(canvasPos) {
@@ -85917,18 +86003,15 @@ class PivotController {
         if (this._shown) {
             return;
         }
-        if (this._hideTimeout !== null) {
-            window.clearTimeout(this._hideTimeout);
-            this._hideTimeout = null;
-        }
         if (this._pivotElement) {
             this.updatePivotElement();
             this._pivotElement.style.visibility = "visible";
-            this._shown = true;
-            this._hideTimeout = window.setTimeout(() => {
-                this.hidePivot();
-            }, 1000);
         }
+        if (this._pivotSphereEnabled) {
+            this.destroyPivotSphere();
+            this.createPivotSphere();
+        }
+        this._shown = true;
     }
 
     /**
@@ -85940,13 +86023,12 @@ class PivotController {
         if (!this._shown) {
             return;
         }
-        if (this._hideTimeout !== null) {
-            window.clearTimeout(this._hideTimeout);
-            this._hideTimeout = null;
-        }
         if (this._pivotElement) {
             this._pivotElement.style.visibility = "hidden";
         }
+        if (this._pivotSphereEnabled) {
+            this.destroyPivotSphere();
+        }
         this._shown = false;
     }
 
@@ -85958,6 +86040,7 @@ class PivotController {
     }
 
     destroy() {
+        this.destroyPivotSphere();
         this._scene.camera.off(this._onViewMatrix);
         this._scene.camera.off(this._onProjMatrix);
         this._scene.off(this._onTick);
@@ -86834,6 +86917,10 @@ class MousePickHandler {
             if (e.which === 3) {
                 rightDown = false;
             }
+
+            if (pivotController.getPivoting()) {
+                pivotController.endPivot();
+            }
         });
 
         canvas.addEventListener('mouseup', this._canvasMouseUpHandler = (e) => {
@@ -87066,6 +87153,10 @@ class KeyboardPanRotateDollyHandler {
             if (keyCode === input.KEY_SHIFT) {
                 canvas.style.cursor = null;
             }
+
+            if (controllers.pivotController.getPivoting()) {
+                controllers.pivotController.endPivot();
+            }
         });
 
         this._onTick = scene.on("tick", (e) => {
@@ -87685,6 +87776,12 @@ class TouchPanRotateAndDollyHandler {
             numTouches = touches.length;
         });
 
+        canvas.addEventListener("touchend", this._canvasTouchEndHandler = () => {
+            if (pivotController.getPivoting()) {
+                pivotController.endPivot();
+            }
+        });
+
         canvas.addEventListener("touchmove", this._canvasTouchMoveHandler = (event) => {
 
             if (!(configs.active && configs.pointerEnabled)) {
@@ -87823,6 +87920,7 @@ class TouchPanRotateAndDollyHandler {
     destroy() {
         const canvas = this._scene.canvas.canvas;
         canvas.removeEventListener("touchstart", this._canvasTouchStartHandler);
+        canvas.removeEventListener("touchend", this._canvasTouchEndHandler);
         canvas.removeEventListener("touchmove", this._canvasTouchMoveHandler);
         this._scene.off(this._onTick);
     }
@@ -89671,6 +89769,25 @@ class CameraControl extends Component {
         return this._configs.keyboardLayout;
     }
 
+    /**
+     * Sets a sphere as the representation of the pivot position.
+     *
+     * @param {Object} [cfg] Sphere configuration.
+     * @param {String} [cfg.size=1] Optional size factor of the sphere. Defaults to 1.
+     * @param {String} [cfg.material=PhongMaterial] Optional size factor of the sphere. Defaults to a red opaque material.
+     */
+    enablePivotSphere(cfg = {}) {
+        this._controllers.pivotController.enablePivotSphere(cfg);
+    }
+
+    /**
+     * Remove the sphere as the representation of the pivot position.
+     *
+     */
+    disablePivotSphere() {
+        this._controllers.pivotController.disablePivotSphere();
+    }
+    
     /**
      * Sets whether smart default pivoting is enabled.
      *