@xeokit/xeokit-sdk 2.4.2-beta-15 → 2.4.2-beta-20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.4.2-beta-15",
+  "version": "2.4.2-beta-20",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",

package/src/extras/PointerLens/PointerLens.js

@@ -93,8 +93,8 @@ export class PointerLens {
         this._lensCanvasContext = this._lensCanvas.getContext('2d');
         this._canvasElement = this.viewer.scene.canvas.canvas;
 
-        this._centerPos = null;
-        this._cursorPos = null;
+        this._canvasPos = null;
+        this._snappedCanvasPos = null;
         this._lensPosToggle = true;
 
         this._zoomLevel = cfg.zoomLevel || 2;
@@ -117,14 +117,14 @@ export class PointerLens {
         if (!this._active || !this._visible) {
             return;
         }
-        if (!this._centerPos) {
+        if (!this._canvasPos) {
             return;
         }
         const lensRect = this._lensContainer.getBoundingClientRect();
         const canvasRect = this._canvasElement.getBoundingClientRect();
         const pointerOnLens =
-            this._centerPos[0] < lensRect.right && this._centerPos[0] > lensRect.left &&
-            this._centerPos[1] < lensRect.bottom && this._centerPos[1] > lensRect.top;
+            this._canvasPos[0] < lensRect.right && this._canvasPos[0] > lensRect.left &&
+            this._canvasPos[1] < lensRect.bottom && this._canvasPos[1] > lensRect.top;
         this._lensContainer.style.marginLeft = `25px`;
         if (pointerOnLens) {
             if (this._lensPosToggle) {
@@ -138,8 +138,8 @@ export class PointerLens {
         const size = Math.max(this._lensCanvas.width, this._lensCanvas.height) / this._zoomLevel;
         this._lensCanvasContext.drawImage(
             this._canvasElement, // source canvas
-            this._centerPos[0] - size / 2, // source x (zoom center)
-            this._centerPos[1] - size / 2, // source y (zoom center)
+            this._canvasPos[0] - size / 2, // source x (zoom center)
+            this._canvasPos[1] - size / 2, // source y (zoom center)
             size, // source width
             size, // source height
             0, // destination x
@@ -153,9 +153,9 @@ export class PointerLens {
             (lensRect.top + lensRect.bottom) / 2
         ];
 
-        if (this._cursorPos) {
-            const deltaX = this._cursorPos[0] - this._centerPos[0];
-            const deltaY = this._cursorPos[1] - this._centerPos[1];
+        if (this._snappedCanvasPos) {
+            const deltaX = this._snappedCanvasPos[0] - this._canvasPos[0];
+            const deltaY = this._snappedCanvasPos[1] - this._canvasPos[1];
 
             this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] + deltaX * this._zoomLevel - 10}px`;
             this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] + deltaY * this._zoomLevel - 10}px`;
@@ -191,10 +191,10 @@ export class PointerLens {
 
     /**
      * Sets the canvas central position of the lens.
-     * @param centerPos
+     * @param canvasPos
      */
-    set centerPos(centerPos) {
-        this._centerPos = centerPos;
+    set canvasPos(canvasPos) {
+        this._canvasPos = canvasPos;
         this.update();
     }
 
@@ -202,25 +202,25 @@ export class PointerLens {
      * Gets the canvas central position of the lens.
      * @returns {Number[]}
      */
-    get centerPos() {
-        return this._centerPos;
+    get canvasPos() {
+        return this._canvasPos;
     }
 
     /**
      * Sets the canvas coordinates of the pointer.
-     * @param cursorPos
+     * @param snappedCanvasPos
      */
-    set cursorPos(cursorPos) {
-        this._cursorPos = cursorPos;
+    set snappedCanvasPos(snappedCanvasPos) {
+        this._snappedCanvasPos = snappedCanvasPos;
         this.update();
     }
 
     /**
-     * Gets the canvas coordinates of the pointer.
+     * Gets the canvas coordinates of the snapped pointer.
      * @returns {Number[]}
      */
-    get cursorPos() {
-        return this._cursorPos;
+    get snappedCanvasPos() {
+        return this._snappedCanvasPos;
     }
 
     /**

package/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js

@@ -177,8 +177,8 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
                 if (event.snappedToVertex || event.snappedToEdge) {
                     if (pointerLens) {
                         pointerLens.visible = true;
-                        pointerLens.centerPos = event.cursorPos || event.canvasPos;
-                        pointerLens.cursorPos = event.canvasPos;
+                        pointerLens.canvasPos = event.canvasPos;
+                        pointerLens.snappedCanvasPos = event.snappedCanvasPos || event.canvasPos;
                         pointerLens.snapped = true;
                     }
                     this.markerDiv.style.background = "greenyellow";
@@ -186,21 +186,22 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
                 } else {
                     if (pointerLens) {
                         pointerLens.visible = true;
-                        pointerLens.centerPos = event.cursorPos || event.canvasPos;
-                        pointerLens.cursorPos = event.canvasPos;
+                        pointerLens.canvasPos =  event.canvasPos;
+                        pointerLens.snappedCanvasPos = event.canvasPos;
                         pointerLens.snapped = false;
                     }
                     this.markerDiv.style.background = "pink";
                     this.markerDiv.style.border = "2px solid red";
                 }
+                const canvasPos = event.snappedCanvasPos || event.canvasPos;
                 mouseHovering = true;
                 mouseHoverEntity = event.entity;
                 mouseWorldPos.set(event.worldPos);
-                mouseHoverCanvasPos.set(event.canvasPos);
+                mouseHoverCanvasPos.set(canvasPos);
                 switch (this._mouseState) {
                     case MOUSE_FINDING_ORIGIN:
-                        this.markerDiv.style.marginLeft = `${event.canvasPos[0] - 5}px`;
-                        this.markerDiv.style.marginTop = `${event.canvasPos[1] - 5}px`;
+                        this.markerDiv.style.marginLeft = `${canvasPos[0] - 5}px`;
+                        this.markerDiv.style.marginTop = `${canvasPos[1] - 5}px`;
                         break;
                     case MOUSE_FINDING_CORNER:
                         if (this._currentAngleMeasurement) {
@@ -316,8 +317,8 @@ export class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
                 mouseHovering = false;
                 if (pointerLens) {
                     pointerLens.visible = true;
-                    pointerLens.centerPos = event.cursorPos;
-                    pointerLens.cursorPos = event.cursorPos;
+                    pointerLens.pointerPos = event.canvasPos;
+                    pointerLens.snappedCanvasPos = event.snappedCanvasPos || event.canvasPos;
                     pointerLens.snapped = false;
                 }
                 this.markerDiv.style.marginLeft = `-100px`;

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js

@@ -181,18 +181,19 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
             this._snapping
                 ? "hoverSnapOrSurface"
                 : "hoverSurface", event => {
+                const canvasPos = event.snappedCanvasPos || event.canvasPos;
                 mouseHovering = true;
                 pointerWorldPos.set(event.worldPos);
                 pointerCanvasPos.set(event.canvasPos);
                 if (this._mouseState === MOUSE_FIRST_CLICK_EXPECTED) {
-                    this._markerDiv.style.marginLeft = `${event.canvasPos[0] - 5}px`;
-                    this._markerDiv.style.marginTop = `${event.canvasPos[1] - 5}px`;
+                    this._markerDiv.style.marginLeft = `${canvasPos[0] - 5}px`;
+                    this._markerDiv.style.marginTop = `${canvasPos[1] - 5}px`;
                     this._markerDiv.style.background = "pink";
                     if (event.snappedToVertex || event.snappedToEdge) {
                         if (this.pointerLens) {
                             this.pointerLens.visible = true;
-                            this.pointerLens.centerPos = event.cursorPos || event.canvasPos;
-                            this.pointerLens.cursorPos = event.canvasPos;
+                            this.pointerLens.canvasPos = event.canvasPos;
+                            this.pointerLens.snappedCanvasPos = event.snappedCanvasPos || event.canvasPos;
                             this.pointerLens.snapped = true;
                         }
                         this._markerDiv.style.background = "greenyellow";
@@ -200,8 +201,8 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
                     } else {
                         if (this.pointerLens) {
                             this.pointerLens.visible = true;
-                            this.pointerLens.centerPos = event.cursorPos || event.canvasPos;
-                            this.pointerLens.cursorPos = event.canvasPos;
+                            this.pointerLens.canvasPos =  event.canvasPos;
+                            this.pointerLens.snappedCanvasPos = event.canvasPos;
                             this.pointerLens.snapped = false;
                         }
                         this._markerDiv.style.background = "pink";
@@ -283,8 +284,8 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
                 : "hoverOff", event => {
             if (this.pointerLens) {
                 this.pointerLens.visible = true;
-                this.pointerLens.centerPos = event.cursorPos || event.canvasPos;
-                this.pointerLens.cursorPos = event.canvasPos;
+                this.pointerLens.canvasPos =  event.canvasPos;
+                this.pointerLens.snappedCanvasPos = event.snappedCanvasPos || event.canvasPos;
             }
             mouseHovering = false;
             this._markerDiv.style.marginLeft = `-100px`;

package/src/viewer/scene/CameraControl/lib/controllers/PickController.js

@@ -69,6 +69,8 @@ class PickController {
 
         this._lastPickedEntityId = null;
 
+        this._lastHash = null;
+
         this._needFireEvents = 0;
     }
 
@@ -76,6 +78,7 @@ class PickController {
      * Immediately attempts a pick, if scheduled.
      */
     update() {
+
         if (!this._configs.pointerEnabled) {
             return;
         }
@@ -84,6 +87,11 @@ class PickController {
             return;
         }
 
+        const hash = `${~~this.pickCursorPos[0]}-${~~this.pickCursorPos[1]}-${this.scheduleSnapOrPick}-${this.schedulePickSurface}-${this.schedulePickEntity}`;
+        if (this._lastHash === hash) {
+            return;
+        }
+
         this.picked = false;
         this.pickedSurface = false;
         this.snappedOrPicked = false;
@@ -92,13 +100,13 @@ class PickController {
         const hasHoverSurfaceSubs = this._cameraControl.hasSubs("hoverSurface");
 
         if (this.scheduleSnapOrPick) {
-            const snapPickResult = this._scene.snapPick({
+            const snapPickResult = this._scene.pick({
                 canvasPos: this.pickCursorPos,
                 snapRadius: this._configs.snapRadius,
                 snapToVertex: this._configs.snapToVertex,
                 snapToEdge: this._configs.snapToEdge,
             });
-            if (snapPickResult && snapPickResult.snappedWorldPos) {
+            if (snapPickResult && (snapPickResult.snappedToEdge || snapPickResult.snappedToVertex)) {
                 this.snapPickResult = snapPickResult;
                 this.snappedOrPicked = true;
                 this._needFireEvents++;
@@ -180,14 +188,14 @@ class PickController {
 
     fireEvents() {
 
-        if (this._needFireEvents == 0) {
+        if (this._needFireEvents === 0) {
             return;
         }
 
         if (this.hoveredSnappedOrSurfaceOff) {
             this._cameraControl.fire("hoverSnapOrSurfaceOff", {
                 canvasPos: this.pickCursorPos,
-                cursorPos : this.pickCursorPos
+                pointerPos : this.pickCursorPos
             }, true);
         }
 
@@ -196,9 +204,9 @@ class PickController {
                 const pickResult = new PickResult();
                 pickResult.snappedToVertex = this.snapPickResult.snappedToVertex;
                 pickResult.snappedToEdge = this.snapPickResult.snappedToEdge;
-                pickResult.worldPos = this.snapPickResult.snappedWorldPos;
-                pickResult.cursorPos = this.pickCursorPos;
-                pickResult.canvasPos = this.snapPickResult.snappedCanvasPos;
+                pickResult.worldPos = this.snapPickResult.worldPos;
+                pickResult.canvasPos = this.pickCursorPos
+                pickResult.snappedCanvasPos = this.snapPickResult.snappedCanvasPos;
                 this._cameraControl.fire("hoverSnapOrSurface", pickResult, true);
                 this.snapPickResult = null;
             } else {

package/src/viewer/scene/scene/Scene.js

@@ -2154,6 +2154,9 @@ class Scene extends Component {
      * @param {Number[]} [params.matrix] 4x4 transformation matrix to define the World-space ray origin and direction, as an alternative to ````origin```` and ````direction````.
      * @param {String[]} [params.includeEntities] IDs of {@link Entity}s to restrict picking to. When given, ignores {@link Entity}s whose IDs are not in this list.
      * @param {String[]} [params.excludeEntities] IDs of {@link Entity}s to ignore. When given, will pick *through* these {@link Entity}s, as if they were not there.
+     * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels
+     * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex.
+     * @param {boolean} [params.snapToEdge=true] Whether to snap to edge.
      * @param {PickResult} [pickResult] Holds the results of the pick attempt. Will use the Scene's singleton PickResult if you don't supply your own.
      * @returns {PickResult} Holds results of the pick attempt, returned when an {@link Entity} is picked, else null. See method comments for description.
      */
@@ -2188,14 +2191,25 @@ class Scene extends Component {
             this._needRecompile = false;
         }
 
-        pickResult = this._renderer.pick(params, pickResult);
+        if (params.snapToEdge || params.snapToVertex) {
+            pickResult = this._renderer.snapPick(
+                params.canvasPos,
+                params.snapRadius || 30,
+                params.snapToVertex,
+                params.snapToEdge,
+                pickResult
+            );
+        } else {
+            pickResult = this._renderer.pick(params, pickResult);
+        }
 
         if (pickResult) {
             if (pickResult.entity && pickResult.entity.fire) {
-                pickResult.entity.fire("picked", pickResult); // TODO: PerformanceModelNode doesn't fire events
+                pickResult.entity.fire("picked", pickResult); // TODO: SceneModelEntity doesn't fire events
             }
-            return pickResult;
         }
+
+        return pickResult;
     }
 
     /**
@@ -2204,8 +2218,13 @@ class Scene extends Component {
      * @param {Number} [params.snapRadius=30] The snap radius, in canvas pixels
      * @param {boolean} [params.snapToVertex=true] Whether to snap to vertex.
      * @param {boolean} [params.snapToEdge=true] Whether to snap to edge.
+     * @deprecated
      */
     snapPick(params) {
+        if (undefined === this._warnSnapPickDeprecated) {
+            this._warnSnapPickDeprecated = true;
+            this.warn("Scene.snapPick() is deprecated since v2.4.2 - use Scene.pick() instead")
+        }
         return this._renderer.snapPick(
             params.canvasPos,
             params.snapRadius || 30,

package/src/viewer/scene/webgl/PickResult.js

@@ -60,13 +60,14 @@ class PickResult {
          */
         this.snappedToVertex = false;
 
-        this._canvasPos = new Int16Array([0, 0]);
         this._origin = new Float64Array([0, 0, 0]);
         this._direction = new Float64Array([0, 0, 0]);
         this._indices = new Int32Array(3);
         this._localPos = new Float64Array([0, 0, 0]);
         this._worldPos = new Float64Array([0, 0, 0]);
         this._viewPos = new Float64Array([0, 0, 0]);
+        this._canvasPos = new Int16Array([0, 0]);
+        this._snappedCanvasPos = new Int16Array([0, 0]);
         this._bary = new Float64Array([0, 0, 0]);
         this._worldNormal = new Float64Array([0, 0, 0]);
         this._uv = new Float64Array([0, 0]);
@@ -75,7 +76,7 @@ class PickResult {
     }
 
     /**
-     * Canvas coordinates when picking with a 2D pointer.
+     * Canvas pick coordinates.
      * @property canvasPos
      * @type {Number[]}
      */
@@ -193,6 +194,29 @@ class PickResult {
         }
     }
 
+    /**
+     * Canvas cursor coordinates, snapped when snap picking, otherwise same as {@link PickResult#pointerPos}.
+     * @property snappedCanvasPos
+     * @type {Number[]}
+     */
+    get snappedCanvasPos() {
+        return this._gotSnappedCanvasPos ? this._snappedCanvasPos : null;
+    }
+
+    /**
+     * @private
+     * @param value
+     */
+    set snappedCanvasPos(value) {
+        if (value) {
+            this._snappedCanvasPos[0] = value[0];
+            this._snappedCanvasPos[1] = value[1];
+            this._gotSnappedCanvasPos = true;
+        } else {
+            this._gotSnappedCanvasPos = false;
+        }
+    }
+
     /**
      * Picked World-space point.
      * @property worldPos
@@ -321,6 +345,7 @@ class PickResult {
         this.primitive = null;
         this.pickSurfacePrecision = false;
         this._gotCanvasPos = false;
+        this._gotSnappedCanvasPos = false;
         this._gotOrigin = false;
         this._gotDirection = false;
         this._gotIndices = false;