@xeokit/xeokit-sdk 2.6.25 → 2.6.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.25",
+  "version": "2.6.27",
   "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/plugins/AnnotationsPlugin/Annotation.js

@@ -75,6 +75,7 @@ class Annotation extends Marker {
         this._values = cfg.values || {};
         this._layoutDirty = true;
         this._visibilityDirty = true;
+        this._labelPosition = 24;
 
         this._buildHTML();
 
@@ -205,17 +206,23 @@ class Annotation extends Marker {
      * @private
      */
     _updatePosition() {
+        const px = x => x + "px";
         const boundary = this.scene.canvas.boundary;
-        const left = boundary[0];
-        const top = boundary[1];
-        const canvasPos = this.canvasPos;
-        this._marker.style.left = (Math.floor(left + canvasPos[0]) - 12) + "px";
-        this._marker.style.top = (Math.floor(top + canvasPos[1]) - 12) + "px";
+        const left = boundary[0] + this.canvasPos[0];
+        const top  = boundary[1] + this.canvasPos[1];
+        const markerRect = this._marker.getBoundingClientRect();
+        const markerWidth = markerRect.width;
+        const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
+        const markerCenter = left + markerDir * (markerWidth / 2 - 12);
+        this._marker.style.left = px(markerCenter - markerWidth / 2);
+        this._marker.style.top  = px(top - 12);
         this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
-        const offsetX = 20;
-        const offsetY = -17;
-        this._label.style.left = 20 + Math.floor(left + canvasPos[0] + offsetX) + "px";
-        this._label.style.top = Math.floor(top + canvasPos[1] + offsetY) + "px";
+
+        const labelRect = this._label.getBoundingClientRect();
+        const labelWidth = labelRect.width;
+        const labelDir = Math.sign(this._labelPosition);
+        this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        this._label.style.top  = px(top - 17);
         this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
     }
 
@@ -250,6 +257,37 @@ class Annotation extends Marker {
         }
     }
 
+    /**
+     * Sets the horizontal alignment of the Annotation's marker HTML.
+     *
+     * @param {String} align Either "left", "center", "right" (default "left")
+     */
+    setMarkerAlign(align) {
+        const valid = [ "left", "center", "right" ];
+        if (! valid.includes(align)) {
+            this.error("Param 'align' should be one of: " + JSON.stringify(valid));
+        } else {
+            this._markerAlign = align;
+            this._updatePosition();
+        }
+    }
+
+    /**
+     * Sets the relative horizontal position of the Annotation's label HTML.
+     *
+     * @param {Number} position Negative - to the left, positive - to the right, otherwise ignore (default 24)
+     */
+    setLabelPosition(position) {
+        if (typeof position !== "number") {
+            this.error("Param 'position' is not a number");
+        } else if (position === 0) {
+            this.error("Param 'position' is zero");
+        } else {
+            this._labelPosition = position;
+            this._updatePosition();
+        }
+    }
+
     /**
      * Sets whether or not to show this Annotation's marker.
      *

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -539,7 +539,7 @@ class DistanceMeasurement extends Component {
                 }
 
                 if (!this._zAxisLabelCulled) {
-                    if(this._measurementOrientation === 'Vertical') {
+                    if(this._measurementOrientation === 'Vertical' && this.useRotationAdjustment) {
                         this._zAxisLabel.setPrefix("");
                         this._zAxisLabel.setText(tilde + Math.abs(math.lenVec3(math.subVec3(this._targetWorld, [this._originWorld[0], this._targetWorld[1], this._originWorld[2]], distVec3)) * scale).toFixed(2) + unitAbbrev);
                     }

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js

@@ -353,27 +353,27 @@ export class DistanceMeasurementsMouseControl extends DistanceMeasurementsContro
         if (!this._active) {
             return;
         }
-
+        
         this.fire("activated", false);
 
         if (this.pointerLens) {
             this.pointerLens.visible = false;
         }
-        if (this._markerDiv) {
-            this._destroyMarkerDiv()
-        }
-        this.reset();
+        // if (this._markerDiv) {
+        //     this._destroyMarkerDiv()
+        // }
+        // this.reset();
         const canvas = this.scene.canvas.canvas;
         canvas.removeEventListener("mousedown", this._onMouseDown);
         canvas.removeEventListener("mouseup", this._onMouseUp);
         const cameraControl = this.distanceMeasurementsPlugin.viewer.cameraControl;
         cameraControl.off(this._onCameraControlHoverSnapOrSurface);
         cameraControl.off(this._onCameraControlHoverSnapOrSurfaceOff);
-        if (this._currentDistanceMeasurement) {
-            this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
-            this._currentDistanceMeasurement.destroy();
-            this._currentDistanceMeasurement = null;
-        }
+        // if (this._currentDistanceMeasurement) {
+        //     this.distanceMeasurementsPlugin.fire("measurementCancel", this._currentDistanceMeasurement);
+        //     this._currentDistanceMeasurement.destroy();
+        //     this._currentDistanceMeasurement = null;
+        // }
         this._active = false;
     }
 

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js

@@ -489,7 +489,7 @@ class DistanceMeasurementsPlugin extends Plugin {
       axisVisible: params.axisVisible !== false && this.defaultAxisVisible !== false,
       xAxisVisible: params.xAxisVisible !== false && this.defaultXAxisVisible !== false,
       yAxisVisible: params.yAxisVisible !== false && this.defaultYAxisVisible !== false,
-      zAxisVisibld: params.zAxisVisible !== false && this.defaultZAxisVisible !== false,
+      zAxisVisible: params.zAxisVisible !== false && this.defaultZAxisVisible !== false,
       xLabelEnabled: params.xLabelEnabled !== false && this.defaultXLabelEnabled !== false,
       yLabelEnabled: params.yLabelEnabled !== false && this.defaultYLabelEnabled !== false,
       zLabelEnabled: params.zLabelEnabled !== false && this.defaultZLabelEnabled !== false,

package/src/plugins/ZonesPlugin/index.js

@@ -393,7 +393,7 @@ const mousePointSelector = function(viewer, ray2WorldPos) {
         const pickWorldPos = canvasPos => {
             const origin = math.vec3();
             const direction = math.vec3();
-            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, origin, direction);
             return ray2WorldPos(origin, direction);
         };
 
@@ -468,7 +468,7 @@ const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
         const pickWorldPos = canvasPos => {
             const origin = math.vec3();
             const direction = math.vec3();
-            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, origin, direction);
             return ray2WorldPos(origin, direction);
         };
 
@@ -1711,7 +1711,7 @@ export class ZoneTranslateControl extends Component {
         const pickWorldPos = canvasPos => {
             const origin = math.vec3();
             const direction = math.vec3();
-            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, origin, direction);
             return ray2WorldPos(origin, direction);
         };
 

package/src/plugins/lib/ui/index.js

@@ -111,7 +111,7 @@ export function activateDraggableDot(dot, cfg) {
     const pickWorldPos = canvasPos => {
         const origin = math.vec3();
         const direction = math.vec3();
-        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
+        math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, origin, direction);
         return ray2WorldPos(origin, direction, canvasPos);
     };
 

package/src/viewer/scene/CameraControl/CameraControl.js

@@ -649,6 +649,8 @@ class CameraControl extends Component {
             snapToEdge: DEFAULT_SNAP_EDGE,
             snapRadius: DEFAULT_SNAP_PICK_RADIUS,
 
+            keyboardEnabledOnlyIfMouseover: true,
+
             // Rotation
 
             dragRotationRate: 360.0,
@@ -959,6 +961,24 @@ class CameraControl extends Component {
     get snapRadius() {
         return this._configs.snapRadius;
     }
+
+    /**
+     * If `true`, the keyboard shortcuts are enabled ONLY if the mouse is over the canvas.
+     * 
+     * @param {boolean} value
+     */
+    set keyboardEnabledOnlyIfMouseover(value) {
+        this._configs.keyboardEnabledOnlyIfMouseover = !!value;
+    }
+
+    /**
+     * Gets whether the keyboard shortcuts are enabled ONLY if the mouse is over the canvas or ALWAYS.
+     * 
+     * @returns {boolean}
+     */
+    get keyboardEnabledOnlyIfMouseover() {
+        return this._configs.keyboardEnabledOnlyIfMouseover;
+    }
     
     /**
      * Sets the current navigation mode.

package/src/viewer/scene/CameraControl/lib/handlers/KeyboardAxisViewHandler.js

@@ -29,7 +29,7 @@ class KeyboardAxisViewHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
 

package/src/viewer/scene/CameraControl/lib/handlers/KeyboardPanRotateDollyHandler.js

@@ -22,7 +22,7 @@ class KeyboardPanRotateDollyHandler {
             if (!(configs.active && configs.pointerEnabled) || (!scene.input.keyboardEnabled)) {
                 return;
             }
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover && !states.mouseover) {
                 return;
             }
             keyDownMap[keyCode] = true;
@@ -53,7 +53,7 @@ class KeyboardPanRotateDollyHandler {
                 return;
             }
 
-            if (!states.mouseover) {
+            if (configs.keyboardEnabledOnlyIfMouseover &&  !states.mouseover) {
                 return;
             }
 

package/src/viewer/scene/CameraControl/lib/handlers/MousePickHandler.js

@@ -59,8 +59,7 @@ class MousePickHandler {
                 {
                     const origin = math.vec3();
                     const direction = math.vec3();
-                    // The origin from math.canvasPosToWorldRay is incorrect for a perspective camera, should be the same as scene.camera.eye
-                    math.canvasPosToWorldRay(scene.canvas.canvas, scene.camera.viewMatrix, scene.camera.projMatrix, states.pointerCanvasPos, origin, direction);
+                    math.canvasPosToWorldRay(scene.canvas.canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, states.pointerCanvasPos, origin, direction);
                     cameraControl.fire("rayMove", { canvasPos: states.pointerCanvasPos, ray: { origin: origin, direction: direction, canvasPos: states.pointerCanvasPos } }, true);
                 }
 

package/src/viewer/scene/math/math.js

@@ -4909,54 +4909,49 @@ const math = {
      @static
      @param {Number[]} viewMatrix View matrix
      @param {Number[]} projMatrix Projection matrix
+     @param {String} projection Projection type (e.g. "ortho")
      @param {Number[]} canvasPos The Canvas-space position.
      @param {Number[]} worldRayOrigin The World-space ray origin.
      @param {Number[]} worldRayDir The World-space ray direction.
      */
     canvasPosToWorldRay: ((() => {
 
-        const tempMat4b = new FloatArrayType(16);
-        const tempMat4c = new FloatArrayType(16);
-        const tempVec4a = new FloatArrayType(4);
-        const tempVec4b = new FloatArrayType(4);
-        const tempVec4c = new FloatArrayType(4);
-        const tempVec4d = new FloatArrayType(4);
-
-        return (canvas, viewMatrix, projMatrix, canvasPos, worldRayOrigin, worldRayDir) => {
+        const pvMatInv = new FloatArrayType(16);
+        const vec4Near = new FloatArrayType(4);
+        const vec4Far  = new FloatArrayType(4);
 
-            const pvMat = math.mulMat4(projMatrix, viewMatrix, tempMat4b);
-            const pvMatInverse = math.inverseMat4(pvMat, tempMat4c);
+        const clipToWorld = (clipX, clipY, clipZ, isOrtho, outVec4) => {
+            outVec4[0] = clipX;
+            outVec4[1] = clipY;
+            outVec4[2] = clipZ;
+            outVec4[3] = 1;
 
-            // Calculate clip space coordinates, which will be in range
-            // of x=[-1..1] and y=[-1..1], with y=(+1) at top
+            math.transformVec4(pvMatInv, outVec4, outVec4);
+            if (! isOrtho)
+                math.mulVec4Scalar(outVec4, 1 / outVec4[3]);
+        };
 
-            const canvasWidth = canvas.width;
-            const canvasHeight = canvas.height;
+        return (canvas, viewMatrix, projMatrix, projection, canvasPos, worldRayOrigin, worldRayDir) => {
+            const isOrtho = projection === "ortho";
 
-            const clipX = (canvasPos[0] - canvasWidth / 2) / (canvasWidth / 2);  // Calculate clip space coordinates
-            const clipY = -(canvasPos[1] - canvasHeight / 2) / (canvasHeight / 2);
+            math.mulMat4(projMatrix, viewMatrix, pvMatInv);
+            math.inverseMat4(pvMatInv, pvMatInv);
 
-            tempVec4a[0] = clipX;
-            tempVec4a[1] = clipY;
-            tempVec4a[2] = -1;
-            tempVec4a[3] = 1;
+            // Calculate clip space coordinates, which will be in range
+            // of x=[-1..1] and y=[-1..1], with y=(+1) at top
 
-            math.transformVec4(pvMatInverse, tempVec4a, tempVec4b);
-            math.mulVec4Scalar(tempVec4b, 1 / tempVec4b[3]);
+            const clipX =     2 * canvasPos[0] / canvas.width - 1;  // Calculate clip space coordinates
+            const clipY = 1 - 2 * canvasPos[1] / canvas.height;
 
-            tempVec4c[0] = clipX;
-            tempVec4c[1] = clipY;
-            tempVec4c[2] = 1;
-            tempVec4c[3] = 1;
+            clipToWorld(clipX, clipY, -1, isOrtho, vec4Near);
 
-            math.transformVec4(pvMatInverse, tempVec4c, tempVec4d);
-            math.mulVec4Scalar(tempVec4d, 1 / tempVec4d[3]);
+            clipToWorld(clipX, clipY,  1, isOrtho, vec4Far);
 
-            worldRayOrigin[0] = tempVec4d[0];
-            worldRayOrigin[1] = tempVec4d[1];
-            worldRayOrigin[2] = tempVec4d[2];
+            worldRayOrigin[0] = vec4Near[0];
+            worldRayOrigin[1] = vec4Near[1];
+            worldRayOrigin[2] = vec4Near[2];
 
-            math.subVec3(tempVec4d, tempVec4b, worldRayDir);
+            math.subVec3(vec4Far, vec4Near, worldRayDir);
 
             math.normalizeVec3(worldRayDir);
         };
@@ -4980,8 +4975,8 @@ const math = {
         const worldRayOrigin = new FloatArrayType(3);
         const worldRayDir = new FloatArrayType(3);
 
-        return (canvas, viewMatrix, projMatrix, worldMatrix, canvasPos, localRayOrigin, localRayDir) => {
-            math.canvasPosToWorldRay(canvas, viewMatrix, projMatrix, canvasPos, worldRayOrigin, worldRayDir);
+        return (canvas, viewMatrix, projMatrix, projection, worldMatrix, canvasPos, localRayOrigin, localRayDir) => {
+            math.canvasPosToWorldRay(canvas, viewMatrix, projMatrix, projection, canvasPos, worldRayOrigin, worldRayDir);
             math.worldRayToLocalRay(worldMatrix, worldRayOrigin, worldRayDir, localRayOrigin, localRayDir);
         };
     }))(),

package/src/viewer/scene/mesh/Mesh.js

@@ -1898,8 +1898,8 @@ class Mesh extends Component {
     }
 
     /** @private */
-    pickTriangleSurface(pickViewMatrix, pickProjMatrix, pickResult) {
-        pickTriangleSurface(this, pickViewMatrix, pickProjMatrix, pickResult);
+    pickTriangleSurface(pickViewMatrix, pickProjMatrix, projection, pickResult) {
+        pickTriangleSurface(this, pickViewMatrix, pickProjMatrix, projection, pickResult);
     }
 
     /** @private  */
@@ -1991,7 +1991,7 @@ const pickTriangleSurface = (function () {
     const tempVec3j = math.vec3();
     const tempVec3k = math.vec3();
 
-    return function (mesh, pickViewMatrix, pickProjMatrix, pickResult) {
+    return function (mesh, pickViewMatrix, pickProjMatrix, projection, pickResult) {
 
         var primIndex = pickResult.primIndex;
 
@@ -2070,7 +2070,7 @@ const pickTriangleSurface = (function () {
                 // Attempt to ray-pick the triangle in local space
 
                 if (pickResult.canvasPos) {
-                    math.canvasPosToLocalRay(canvas.canvas, mesh.origin ? createRTCViewMat(pickViewMatrix, mesh.origin) : pickViewMatrix, pickProjMatrix, mesh.worldMatrix, pickResult.canvasPos, localRayOrigin, localRayDir);
+                    math.canvasPosToLocalRay(canvas.canvas, mesh.origin ? createRTCViewMat(pickViewMatrix, mesh.origin) : pickViewMatrix, pickProjMatrix, projection, mesh.worldMatrix, pickResult.canvasPos, localRayOrigin, localRayDir);
 
                 } else if (pickResult.origin && pickResult.direction) {
                     math.worldRayToLocalRay(mesh.worldMatrix, pickResult.origin, pickResult.direction, localRayOrigin, localRayDir);

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

@@ -2099,10 +2099,10 @@ class Scene extends Component {
      */
     get center() {
         if (this._aabbDirty || !this._center) {
-            if (!this._center || !this._center) {
+            const aabb = this.aabb;
+            if (!this._center) {
                 this._center = math.vec3();
             }
-            const aabb = this.aabb;
             this._center[0] = (aabb[0] + aabb[3]) / 2;
             this._center[1] = (aabb[1] + aabb[4]) / 2;
             this._center[2] = (aabb[2] + aabb[5]) / 2;
@@ -2177,6 +2177,7 @@ class Scene extends Component {
             this._aabb[4] = ymax;
             this._aabb[5] = zmax;
             this._aabbDirty = false;
+            this._center = null;
         }
         return this._aabb;
     }
@@ -2302,11 +2303,6 @@ class Scene extends Component {
             return null;
         }
 
-        if ((params.snapToVertex || params.snapToEdge) && !params.canvasPos) {
-            this.error("Scene.snapPick() `canvasPos` parameter expected for `snapToVertex:true` or `snapToEdge:true`");
-            return;
-        }
-
         params = params || {};
 
         params.pickSurface = params.pickSurface || params.rayPick; // Backwards compatibility
@@ -2332,13 +2328,7 @@ class Scene extends Component {
         }
 
         if (params.snapToEdge || params.snapToVertex) {
-            pickResult = this._renderer.snapPick(
-                params.canvasPos,
-                params.snapRadius || 30,
-                params.snapToVertex,
-                params.snapToEdge,
-                pickResult
-            );
+            pickResult = this._renderer.snapPick(params, pickResult);
         } else {
             pickResult = this._renderer.pick(params, pickResult);
         }
@@ -2369,12 +2359,7 @@ class Scene extends Component {
             this.error("Scene.snapPick() canvasPos parameter expected");
             return;
         }
-        return this._renderer.snapPick(
-            params.canvasPos,
-            params.snapRadius || 30,
-            params.snapToVertex,
-            params.snapToEdge,
-        );
+        return this._renderer.snapPick(params);
     }
 
     /**
@@ -2832,4 +2817,4 @@ class Scene extends Component {
     }
 }
 
-export {Scene};
+export {Scene};

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

@@ -932,6 +932,7 @@ const Renderer = function (scene, options) {
             let look;
             let pickViewMatrix = null;
             let pickProjMatrix = null;
+            let projection = null;
 
             pickResult.pickSurface = params.pickSurface;
 
@@ -942,6 +943,7 @@ const Renderer = function (scene, options) {
 
                 pickViewMatrix = scene.camera.viewMatrix;
                 pickProjMatrix = scene.camera.projMatrix;
+                projection     = scene.camera.projection;
 
                 pickResult.canvasPos = params.canvasPos;
 
@@ -954,6 +956,7 @@ const Renderer = function (scene, options) {
 
                     pickViewMatrix = params.matrix;
                     pickProjMatrix = scene.camera.projMatrix;
+                    projection     = scene.camera.projection;
 
                 } else {
 
@@ -972,6 +975,7 @@ const Renderer = function (scene, options) {
                     pickViewMatrix = math.lookAtMat4v(worldRayOrigin, look, up, tempMat4b);
                     //    pickProjMatrix = scene.camera.projMatrix;
                     pickProjMatrix = scene.camera.ortho.matrix;
+                    projection     = "ortho";
 
                     pickResult.origin = worldRayOrigin;
                     pickResult.direction = worldRayDir;
@@ -1019,7 +1023,7 @@ const Renderer = function (scene, options) {
 
                     gpuPickTriangle(pickBuffer, pickable, canvasPos, pickViewMatrix, pickProjMatrix, pickResult);
 
-                    pickable.pickTriangleSurface(pickViewMatrix, pickProjMatrix, pickResult);
+                    pickable.pickTriangleSurface(pickViewMatrix, pickProjMatrix, projection, pickResult);
 
                     pickResult.pickSurfacePrecision = false;
 
@@ -1292,7 +1296,9 @@ const Renderer = function (scene, options) {
 
         const _pickResult = new PickResult();
 
-        return function (canvasPos, snapRadiusInPixels, snapToVertex, snapToEdge, pickResult = _pickResult) {
+        return function (params, pickResult = _pickResult) {
+
+            const {canvasPos, origin, direction, snapRadius, snapToVertex, snapToEdge} = params;
 
             if (!snapToVertex && !snapToEdge) {
                 return this.pick({canvasPos, pickSurface: true});
@@ -1306,7 +1312,7 @@ const Renderer = function (scene, options) {
             frameCtx.pickZNear = scene.camera.project.near;
             frameCtx.pickZFar = scene.camera.project.far;
 
-            snapRadiusInPixels = snapRadiusInPixels || 30;
+            const snapRadiusInPixels = snapRadius || 30;
 
             const vertexPickBuffer = renderBufferManager.getRenderBuffer("uniquePickColors-aabs", {
                 depthTexture: true,
@@ -1317,8 +1323,8 @@ const Renderer = function (scene, options) {
             });
 
             frameCtx.snapVectorA = [
-                getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth),
-                getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight),
+                canvasPos ? getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth) : 0,
+                canvasPos ? getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight) : 0,
             ];
 
             frameCtx.snapInvVectorAB = [
@@ -1345,7 +1351,14 @@ const Renderer = function (scene, options) {
             // Set view and proj mats for VBO renderers
             ///////////////////////////////////////
 
-            const pickViewMatrix = scene.camera.viewMatrix;
+            frameCtx.pickViewMatrix = (canvasPos
+                                       ? scene.camera.viewMatrix
+                                       : math.lookAtMat4v(
+                                           origin,
+                                           math.addVec3(origin, direction, math.vec3()),
+                                           math.vec3([0, 1, 0]),
+                                           math.mat4()));
+
             const pickProjMatrix = scene.camera.projMatrix;
 
             for (let type in drawableTypeInfo) {
@@ -1354,7 +1367,7 @@ const Renderer = function (scene, options) {
                     for (let i = 0, len = drawableList.length; i < len; i++) {
                         const drawable = drawableList[i];
                         if (drawable.setPickMatrices) { // Eg. SceneModel, which needs pre-loading into texture
-                            drawable.setPickMatrices(pickViewMatrix, pickProjMatrix);
+                            drawable.setPickMatrices(frameCtx.pickViewMatrix, pickProjMatrix);
                         }
                     }
                 }
@@ -1533,7 +1546,7 @@ const Renderer = function (scene, options) {
             pickResult.worldPos = snappedWorldPos;
             pickResult.worldNormal = snappedWorldNormal;
             pickResult.entity = snappedEntity;
-            pickResult.canvasPos = canvasPos;
+            pickResult.canvasPos = canvasPos || scene.camera.projectWorldPos(worldPos || snappedWorldPos);
             pickResult.snappedCanvasPos = snappedCanvasPos || canvasPos;
 
             return pickResult;

package/types/plugins/AngleMeasurementsPlugin/AngleMeasurement.d.ts

@@ -40,6 +40,20 @@ export declare class AngleMeasurement extends Component {
    * @type {Boolean}
    */
   get visible(): boolean;
+
+  /**
+   * Sets whether this AngleMeasurement is highlighted or not.
+   *
+   * @type {Boolean}
+   */
+  set highlighted(arg: boolean);
+  /**
+   * Gets whether this AngleMeasurement is highlighted or not.
+   *
+   * @type {Boolean}
+   */
+  get highlighted(): boolean;
+
   /**
    * Sets if the origin {@link Marker} is visible.
    *