@xeokit/xeokit-sdk 2.4.2-beta-14 → 2.4.2-beta-19

package/dist/xeokit-sdk.es.js

@@ -1041,8 +1041,8 @@ 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;
@@ -1065,14 +1065,14 @@ 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) {
@@ -1086,8 +1086,8 @@ 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
@@ -1101,9 +1101,9 @@ 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`;
@@ -1139,10 +1139,10 @@ 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();
     }
 
@@ -1150,25 +1150,25 @@ 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;
     }
 
     /**
@@ -6649,6 +6649,8 @@ const kdTreeDimLength$1 = new Float32Array(3);
  * Automatically indexes a {@link Viewer}'s {@link Entity}s in a 3D k-d tree
  * to support fast collision detection with 3D World-space axis-aligned boundaries (AABBs) and frustums.
  *
+ * See {@link MarqueePicker} for usage example.
+ *
  * An ObjectsKdTree3 is configured with a Viewer, and will then automatically
  * keep itself populated with k-d nodes that contain the Viewer's Entitys.
  *
@@ -8577,6 +8579,87 @@ function frustumIntersectsAABB3(frustum, aabb) {
 
 /**
  * Picks a {@link Viewer}'s {@link Entity}s with a canvas-space 2D marquee box.
+ *
+ * [<img src="https://xeokit.github.io/xeokit-sdk/assets/images/MarqueeSelect.gif">](https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_select)
+ *
+ * * [[Example 1: Select Objects with Marquee](https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_select)]
+ * * [[Example 2: View-Fit Objects with Marquee](https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_viewFit)]
+ *
+ * # Usage
+ *
+ * In the example below, we
+ *
+ * 1. Create a {@link Viewer}, arrange the {@link Camera}
+ * 2. Use an {@link XKTLoaderPlugin} to load a BIM model,
+ * 3. Create a {@link ObjectsKdTree3} to automatically index the `Viewer's` {@link Entity}s for fast spatial lookup,
+ * 4. Create a `MarqueePicker` to pick {@link Entity}s in the {@link Viewer}, using the {@link ObjectsKdTree3} to accelerate picking
+ * 5. Create a {@link MarqueePickerMouseControl} to perform the marquee-picking with the `MarqueePicker`, using mouse input to draw the marquee box on the `Viewer's` canvas.
+ *
+ * When the {@link MarqueePickerMouseControl} is active:
+ *
+ * * Long-click, drag and release on the canvas to define a marque box that picks {@link Entity}s.
+ * * Drag left-to-right to pick {@link Entity}s that intersect the box.
+ * * Drag right-to-left to pick {@link Entity}s that are fully inside the box.
+ * * On release, the `MarqueePicker` will fire a "picked" event with IDs of the picked {@link Entity}s, if any.
+ * * Handling that event, we mark the {@link Entity}s as selected.
+ * * Hold down CTRL to multi-pick.
+ *
+ * ````javascript
+ * import {
+ *         Viewer,
+ *         XKTLoaderPlugin,
+ *         ObjectsKdTree3,
+ *         MarqueePicker,
+ *         MarqueePickerMouseControl
+ * } from "xeokit-sdk.es.js";
+ *
+ * // 1
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas"
+ * });
+ *
+ * viewer.scene.camera.eye = [14.9, 14.3, 5.4];
+ * viewer.scene.camera.look = [6.5, 8.3, -4.1];
+ * viewer.scene.camera.up = [-0.28, 0.9, -0.3];
+ *
+ * // 2
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const sceneModel = xktLoader.load({
+ *     id: "myModel",
+ *     src: "../../assets/models/xkt/v8/ifc/HolterTower.ifc.xkt"
+ * });
+ *
+ * // 3
+ *
+ * const objectsKdTree3 = new ObjectsKdTree3({viewer});
+ *
+ * // 4
+ *
+ * const marqueePicker = new MarqueePicker({viewer, objectsKdTree3});
+ *
+ * // 5
+ *
+ * const marqueePickerMouseControl = new MarqueePickerMouseControl({marqueePicker});
+ *
+ * marqueePicker.on("clear", () => {
+ *     viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false);
+ * });
+ *
+ * marqueePicker.on("picked", (objectIds) => {
+ *     viewer.scene.setObjectsSelected(objectIds, true);
+ * });
+ *
+ * marqueePickerMouseControl.setActive(true);
+ * ````
+ *
+ * # Design Notes
+ *
+ * * The {@link ObjectsKdTree3} can be shared with any other components that want to use it to spatially search for {@link Entity}s.
+ * * The {@link MarqueePickerMouseControl} can be replaced with other types of controllers (i.e. touch), or used alongside them.
+ * * The `MarqueePicker` has no input handlers of its own, and provides an API through which to programmatically control marquee picking. By firing the "picked" events, `MarqueePicker` implements the *Blackboard Pattern*.
  */
 class MarqueePicker extends Component {
 
@@ -8846,6 +8929,8 @@ MarqueePicker.PICK_MODE_INSIDE = 1;
 /**
  * Controls a {@link MarqueePicker} with mouse input.
  *
+ * See {@link MarqueePicker} for usage example.
+ *
  * When the MarqueePickerMouseControl is active:
  *
  * * Long-click, drag and release on the canvas to define a marque box that picks {@link Entity}s.
@@ -11924,8 +12009,8 @@ 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";
@@ -11933,21 +12018,22 @@ 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) {
@@ -12063,8 +12149,8 @@ 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`;
@@ -14704,13 +14790,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]);
@@ -14719,7 +14806,7 @@ class PickResult {
     }
 
     /**
-     * Canvas coordinates when picking with a 2D pointer.
+     * Canvas pick coordinates.
      * @property canvasPos
      * @type {Number[]}
      */
@@ -14837,6 +14924,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
@@ -14965,6 +15075,7 @@ class PickResult {
         this.primitive = null;
         this.pickSurfacePrecision = false;
         this._gotCanvasPos = false;
+        this._gotSnappedCanvasPos = false;
         this._gotOrigin = false;
         this._gotDirection = false;
         this._gotIndices = false;
@@ -18361,254 +18472,258 @@ const Renderer$1 = function (scene, options) {
      * @param {number} [snapRadiusInPixels=30]
      * @param {boolean} [snapToVertex=true]
      * @param {boolean} [snapToEdge=true]
-     *
-     * @returns {{worldPos:number[],snappedWorldPos:null|number[],snappedCanvasPos:null|number[], snapType:null|"vertex"|"edge"}}
+     * @param pickResult
+     * @returns {PickResult}
      */
-    this.snapPick = function (canvasPos, snapRadiusInPixels = 30, snapToVertex = true, snapToEdge = true) {
+    this.snapPick = (function () {
 
-        if (!snapToVertex && !snapToEdge) {
-            return this.pick({canvasPos, pickSurface: true});
-        }
+        const _pickResult = new PickResult();
 
-        const resolutionScale = scene.canvas.resolutionScale;
+        return function (canvasPos, snapRadiusInPixels, snapToVertex, snapToEdge, pickResult = _pickResult) {
 
-        frameCtx.reset();
-        frameCtx.backfaces = true;
-        frameCtx.frontface = true; // "ccw"
-        frameCtx.pickZNear = scene.camera.project.near;
-        frameCtx.pickZFar = scene.camera.project.far;
-
-        const vertexPickBuffer = renderBufferManager.getRenderBuffer("uniquePickColors-aabs", {
-            depthTexture: true,
-            size: [
-                2 * snapRadiusInPixels + 1,
-                2 * snapRadiusInPixels + 1,
-            ]
-        });
+            if (!snapToVertex && !snapToEdge) {
+                return this.pick({canvasPos, pickSurface: true});
+            }
 
-        frameCtx.snapVectorA = [
-            getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth),
-            getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight),
-        ];
+            const resolutionScale = scene.canvas.resolutionScale;
 
-        frameCtx.snapInvVectorAB = [
-            gl.drawingBufferWidth / (2 * snapRadiusInPixels),
-            gl.drawingBufferHeight / (2 * snapRadiusInPixels),
-        ];
+            frameCtx.reset();
+            frameCtx.backfaces = true;
+            frameCtx.frontface = true; // "ccw"
+            frameCtx.pickZNear = scene.camera.project.near;
+            frameCtx.pickZFar = scene.camera.project.far;
 
-        // Bind and clear the snap render target
+            snapRadiusInPixels = snapRadiusInPixels || 30;
 
-        vertexPickBuffer.bind(gl.RGBA32I, gl.RGBA32I, gl.RGBA8UI);
-        gl.viewport(0, 0, vertexPickBuffer.size[0], vertexPickBuffer.size[1]);
-        gl.enable(gl.DEPTH_TEST);
-        gl.frontFace(gl.CCW);
-        gl.disable(gl.CULL_FACE);
-        gl.depthMask(true);
-        gl.disable(gl.BLEND);
-        gl.depthFunc(gl.LEQUAL);
-        gl.clear(gl.DEPTH_BUFFER_BIT);
-        gl.clearBufferiv(gl.COLOR, 0, new Int32Array([0, 0, 0, 0]));
-        gl.clearBufferiv(gl.COLOR, 1, new Int32Array([0, 0, 0, 0]));
-        gl.clearBufferuiv(gl.COLOR, 2, new Uint32Array([0, 0, 0, 0]));
+            const vertexPickBuffer = renderBufferManager.getRenderBuffer("uniquePickColors-aabs", {
+                depthTexture: true,
+                size: [
+                    2 * snapRadiusInPixels + 1,
+                    2 * snapRadiusInPixels + 1,
+                ]
+            });
 
-        //////////////////////////////////
-        // Set view and proj mats for VBO renderers
-        ///////////////////////////////////////
+            frameCtx.snapVectorA = [
+                getClipPosX(canvasPos[0] * resolutionScale, gl.drawingBufferWidth),
+                getClipPosY(canvasPos[1] * resolutionScale, gl.drawingBufferHeight),
+            ];
 
-        const pickViewMatrix = scene.camera.viewMatrix;
-        const pickProjMatrix = scene.camera.projMatrix;
+            frameCtx.snapInvVectorAB = [
+                gl.drawingBufferWidth / (2 * snapRadiusInPixels),
+                gl.drawingBufferHeight / (2 * snapRadiusInPixels),
+            ];
 
-        for (let type in drawableTypeInfo) {
-            if (drawableTypeInfo.hasOwnProperty(type)) {
-                const drawableList = drawableTypeInfo[type].drawableList;
-                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);
+            // Bind and clear the snap render target
+
+            vertexPickBuffer.bind(gl.RGBA32I, gl.RGBA32I, gl.RGBA8UI);
+            gl.viewport(0, 0, vertexPickBuffer.size[0], vertexPickBuffer.size[1]);
+            gl.enable(gl.DEPTH_TEST);
+            gl.frontFace(gl.CCW);
+            gl.disable(gl.CULL_FACE);
+            gl.depthMask(true);
+            gl.disable(gl.BLEND);
+            gl.depthFunc(gl.LEQUAL);
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+            gl.clearBufferiv(gl.COLOR, 0, new Int32Array([0, 0, 0, 0]));
+            gl.clearBufferiv(gl.COLOR, 1, new Int32Array([0, 0, 0, 0]));
+            gl.clearBufferuiv(gl.COLOR, 2, new Uint32Array([0, 0, 0, 0]));
+
+            //////////////////////////////////
+            // Set view and proj mats for VBO renderers
+            ///////////////////////////////////////
+
+            const pickViewMatrix = scene.camera.viewMatrix;
+            const pickProjMatrix = scene.camera.projMatrix;
+
+            for (let type in drawableTypeInfo) {
+                if (drawableTypeInfo.hasOwnProperty(type)) {
+                    const drawableList = drawableTypeInfo[type].drawableList;
+                    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);
+                        }
                     }
                 }
             }
-        }
 
-        // a) init z-buffer
-        gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);
-        const layerParamsSurface = snapInitDepthBuf(frameCtx);
+            // a) init z-buffer
+            gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]);
+            const layerParamsSurface = snapInitDepthBuf(frameCtx);
 
-        // b) snap-pick
-        const layerParamsSnap = [];
-        frameCtx.snapPickLayerParams = layerParamsSnap;
+            // b) snap-pick
+            const layerParamsSnap = [];
+            frameCtx.snapPickLayerParams = layerParamsSnap;
 
-        gl.depthMask(false);
-        gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
+            gl.depthMask(false);
+            gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
 
-        if (snapToVertex && snapToEdge) {
-            frameCtx.snapMode = "edge";
-            snapPickDrawSnapDepths(frameCtx);
+            if (snapToVertex && snapToEdge) {
+                frameCtx.snapMode = "edge";
+                snapPickDrawSnapDepths(frameCtx);
 
-            frameCtx.snapMode = "vertex";
-            frameCtx.snapPickLayerNumber++;
+                frameCtx.snapMode = "vertex";
+                frameCtx.snapPickLayerNumber++;
 
-            snapPickDrawSnapDepths(frameCtx);
-        } else {
-            frameCtx.snapMode = snapToVertex ? "vertex" : "edge";
+                snapPickDrawSnapDepths(frameCtx);
+            } else {
+                frameCtx.snapMode = snapToVertex ? "vertex" : "edge";
 
-            snapPickDrawSnapDepths(frameCtx);
-        }
+                snapPickDrawSnapDepths(frameCtx);
+            }
 
-        gl.depthMask(true);
+            gl.depthMask(true);
 
-        // Read and decode the snapped coordinates
+            // Read and decode the snapped coordinates
 
-        const snapPickResultArray = vertexPickBuffer.readArray(gl.RGBA_INTEGER, gl.INT, Int32Array, 4);
-        const snapPickNormalResultArray = vertexPickBuffer.readArray(gl.RGBA_INTEGER, gl.INT, Int32Array, 4, 1);
-        const snapPickIdResultArray = vertexPickBuffer.readArray(gl.RGBA_INTEGER, gl.UNSIGNED_INT, Uint32Array, 4, 2);
+            const snapPickResultArray = vertexPickBuffer.readArray(gl.RGBA_INTEGER, gl.INT, Int32Array, 4);
+            const snapPickNormalResultArray = vertexPickBuffer.readArray(gl.RGBA_INTEGER, gl.INT, Int32Array, 4, 1);
+            const snapPickIdResultArray = vertexPickBuffer.readArray(gl.RGBA_INTEGER, gl.UNSIGNED_INT, Uint32Array, 4, 2);
 
-        vertexPickBuffer.unbind();
+            vertexPickBuffer.unbind();
 
-        // result 1) regular hi-precision world position
+            // result 1) regular hi-precision world position
 
-        let worldPos = null;
-        let worldNormal = null;
+            let worldPos = null;
 
-        const middleX = snapRadiusInPixels;
-        const middleY = snapRadiusInPixels;
-        const middleIndex = (middleX * 4) + (middleY * vertexPickBuffer.size[0] * 4);
-        const pickResultMiddleXY = snapPickResultArray.slice(middleIndex, middleIndex + 4);
-        const pickNormalResultMiddleXY = snapPickNormalResultArray.slice(middleIndex, middleIndex + 4);
-        const pickPickableResultMiddleXY = snapPickIdResultArray.slice(middleIndex, middleIndex + 4);
+            const middleX = snapRadiusInPixels;
+            const middleY = snapRadiusInPixels;
+            const middleIndex = (middleX * 4) + (middleY * vertexPickBuffer.size[0] * 4);
+            const pickResultMiddleXY = snapPickResultArray.slice(middleIndex, middleIndex + 4);
+            const pickNormalResultMiddleXY = snapPickNormalResultArray.slice(middleIndex, middleIndex + 4);
+            const pickPickableResultMiddleXY = snapPickIdResultArray.slice(middleIndex, middleIndex + 4);
 
-        if (pickResultMiddleXY[3] !== 0) {
-            const pickedLayerParmasSurface = layerParamsSurface[Math.abs(pickResultMiddleXY[3]) % layerParamsSurface.length];
-            const origin = pickedLayerParmasSurface.origin;
-            const scale = pickedLayerParmasSurface.coordinateScale;
-            worldPos = [
-                pickResultMiddleXY[0] * scale[0] + origin[0],
-                pickResultMiddleXY[1] * scale[1] + origin[1],
-                pickResultMiddleXY[2] * scale[2] + origin[2],
-            ];
-            worldNormal = math.normalizeVec3([
-                pickNormalResultMiddleXY[0] / math.MAX_INT,
-                pickNormalResultMiddleXY[1] / math.MAX_INT,
-                pickNormalResultMiddleXY[2] / math.MAX_INT,
-            ]);
-
-            const pickID =
-                pickPickableResultMiddleXY[0]
-                + (pickPickableResultMiddleXY[1] << 8)
-                + (pickPickableResultMiddleXY[2] << 16)
-                + (pickPickableResultMiddleXY[3] << 24);
-    
-            pickIDs.items[pickID];
-        }
-
-        // result 2) hi-precision snapped (to vertex/edge) world position
-
-        let snapPickResult = [];
-
-        for (let i = 0; i < snapPickResultArray.length; i += 4) {
-            if (snapPickResultArray[i + 3] > 0) {
-                const pixelNumber = Math.floor(i / 4);
-                const w = vertexPickBuffer.size[0];
-                const x = pixelNumber % w - Math.floor(w / 2);
-                const y = Math.floor(pixelNumber / w) - Math.floor(w / 2);
-                const dist = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
-                snapPickResult.push({
-                    x,
-                    y,
-                    dist,
-                    isVertex: snapToVertex && snapToEdge ? snapPickResultArray[i + 3] > layerParamsSnap.length / 2 : snapToVertex,
-                    result: [
-                        snapPickResultArray[i + 0],
-                        snapPickResultArray[i + 1],
-                        snapPickResultArray[i + 2],
-                        snapPickResultArray[i + 3],
-                    ],
-                    normal: [
-                        snapPickNormalResultArray[i + 0],
-                        snapPickNormalResultArray[i + 1],
-                        snapPickNormalResultArray[i + 2],
-                        snapPickNormalResultArray[i + 3],
-                    ],
-                    id: [
-                        snapPickIdResultArray[i + 0],
-                        snapPickIdResultArray[i + 1],
-                        snapPickIdResultArray[i + 2],
-                        snapPickIdResultArray[i + 3],
-                    ]
-                });
+            if (pickResultMiddleXY[3] !== 0) {
+                const pickedLayerParmasSurface = layerParamsSurface[Math.abs(pickResultMiddleXY[3]) % layerParamsSurface.length];
+                const origin = pickedLayerParmasSurface.origin;
+                const scale = pickedLayerParmasSurface.coordinateScale;
+                worldPos = [
+                    pickResultMiddleXY[0] * scale[0] + origin[0],
+                    pickResultMiddleXY[1] * scale[1] + origin[1],
+                    pickResultMiddleXY[2] * scale[2] + origin[2],
+                ];
+                math.normalizeVec3([
+                    pickNormalResultMiddleXY[0] / math.MAX_INT,
+                    pickNormalResultMiddleXY[1] / math.MAX_INT,
+                    pickNormalResultMiddleXY[2] / math.MAX_INT,
+                ]);
+
+                const pickID =
+                    pickPickableResultMiddleXY[0]
+                    + (pickPickableResultMiddleXY[1] << 8)
+                    + (pickPickableResultMiddleXY[2] << 16)
+                    + (pickPickableResultMiddleXY[3] << 24);
+
+                pickIDs.items[pickID];
+            }
+
+            // result 2) hi-precision snapped (to vertex/edge) world position
+
+            let snapPickResult = [];
+
+            for (let i = 0; i < snapPickResultArray.length; i += 4) {
+                if (snapPickResultArray[i + 3] > 0) {
+                    const pixelNumber = Math.floor(i / 4);
+                    const w = vertexPickBuffer.size[0];
+                    const x = pixelNumber % w - Math.floor(w / 2);
+                    const y = Math.floor(pixelNumber / w) - Math.floor(w / 2);
+                    const dist = (Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)));
+                    snapPickResult.push({
+                        x,
+                        y,
+                        dist,
+                        isVertex: snapToVertex && snapToEdge ? snapPickResultArray[i + 3] > layerParamsSnap.length / 2 : snapToVertex,
+                        result: [
+                            snapPickResultArray[i + 0],
+                            snapPickResultArray[i + 1],
+                            snapPickResultArray[i + 2],
+                            snapPickResultArray[i + 3],
+                        ],
+                        normal: [
+                            snapPickNormalResultArray[i + 0],
+                            snapPickNormalResultArray[i + 1],
+                            snapPickNormalResultArray[i + 2],
+                            snapPickNormalResultArray[i + 3],
+                        ],
+                        id: [
+                            snapPickIdResultArray[i + 0],
+                            snapPickIdResultArray[i + 1],
+                            snapPickIdResultArray[i + 2],
+                            snapPickIdResultArray[i + 3],
+                        ]
+                    });
+                }
             }
-        }
 
-        let snappedWorldPos = null;
-        let snappedWorldNormal = null;
-        let snappedPickable = null;
-        let snapType = null;
+            let snappedWorldPos = null;
+            let snappedWorldNormal = null;
+            let snappedPickable = null;
+            let snapType = null;
 
-        if (snapPickResult.length > 0) {
-            // vertex snap first, then edge snap
-            snapPickResult.sort((a, b) => {
-                if (a.isVertex !== b.isVertex) {
-                    return a.isVertex ? -1 : 1;
-                } else {
-                    return a.dist - b.dist;
-                }
-            });
+            if (snapPickResult.length > 0) {
+                // vertex snap first, then edge snap
+                snapPickResult.sort((a, b) => {
+                    if (a.isVertex !== b.isVertex) {
+                        return a.isVertex ? -1 : 1;
+                    } else {
+                        return a.dist - b.dist;
+                    }
+                });
 
-            snapType = snapPickResult[0].isVertex ? "vertex" : "edge";
-            const snapPick = snapPickResult[0].result;
-            const snapPickNormal = snapPickResult[0].normal;
-            const snapPickId = snapPickResult[0].id;
+                snapType = snapPickResult[0].isVertex ? "vertex" : "edge";
+                const snapPick = snapPickResult[0].result;
+                const snapPickNormal = snapPickResult[0].normal;
+                const snapPickId = snapPickResult[0].id;
 
-            const pickedLayerParmas = layerParamsSnap[snapPick[3]];
+                const pickedLayerParmas = layerParamsSnap[snapPick[3]];
 
-            const origin = pickedLayerParmas.origin;
-            const scale = pickedLayerParmas.coordinateScale;
+                const origin = pickedLayerParmas.origin;
+                const scale = pickedLayerParmas.coordinateScale;
 
-            snappedWorldNormal = math.normalizeVec3([
-                snapPickNormal[0] / math.MAX_INT,
-                snapPickNormal[1] / math.MAX_INT,
-                snapPickNormal[2] / math.MAX_INT,
-            ]);
+                snappedWorldNormal = math.normalizeVec3([
+                    snapPickNormal[0] / math.MAX_INT,
+                    snapPickNormal[1] / math.MAX_INT,
+                    snapPickNormal[2] / math.MAX_INT,
+                ]);
 
-            snappedWorldPos = [
-                snapPick[0] * scale[0] + origin[0],
-                snapPick[1] * scale[1] + origin[1],
-                snapPick[2] * scale[2] + origin[2],
-            ];
+                snappedWorldPos = [
+                    snapPick[0] * scale[0] + origin[0],
+                    snapPick[1] * scale[1] + origin[1],
+                    snapPick[2] * scale[2] + origin[2],
+                ];
 
-            snappedPickable = pickIDs.items[
+                snappedPickable = pickIDs.items[
                 snapPickId[0]
                 + (snapPickId[1] << 8)
                 + (snapPickId[2] << 16)
                 + (snapPickId[3] << 24)
-            ];
-        }
+                    ];
+            }
 
-        if (null === worldPos && null == snappedWorldPos) {   // If neither regular pick or snap pick, return null
-            return null;
-        }
+            if (null === worldPos && null == snappedWorldPos) {   // If neither regular pick or snap pick, return null
+                return null;
+            }
 
-        let snappedCanvasPos = null;
+            let snappedCanvasPos = null;
 
-        if (null !== snappedWorldPos) {
-            snappedCanvasPos = scene.camera.projectWorldPos(snappedWorldPos);
-        }
+            if (null !== snappedWorldPos) {
+                snappedCanvasPos = scene.camera.projectWorldPos(snappedWorldPos);
+            }
 
-        const snappedEntity = (snappedPickable && snappedPickable.delegatePickedEntity) ? snappedPickable.delegatePickedEntity() : snappedPickable;
+            const snappedEntity = (snappedPickable && snappedPickable.delegatePickedEntity) ? snappedPickable.delegatePickedEntity() : snappedPickable;
 
-        return {
-            snapType,
-            snappedToVertex: snapType === "vertex",
-            snappedToEdge: snapType === "edge",
-            worldPos,
-            worldNormal,
-            snappedWorldPos,
-            snappedWorldNormal,
-            snappedCanvasPos,
-            snappedEntity,
-            entity: snappedEntity
+            pickResult.reset();
+            pickResult.snappedToEdge = (snapType === "edge");
+            pickResult.snappedToVertex = (snapType === "vertex");
+            pickResult.worldPos = snappedWorldPos;
+            pickResult.worldNormal = snappedWorldNormal;
+            pickResult.entity = snappedEntity;
+            pickResult.canvasPos = canvasPos;
+            pickResult.snappedCanvasPos = snappedCanvasPos || canvasPos;
+
+            return pickResult;
         };
-    };
+    })();
 
     function unpackDepth(depthZ) {
         const vec = [depthZ[0] / 256.0, depthZ[1] / 256.0, depthZ[2] / 256.0, depthZ[3] / 256.0];
@@ -20014,23 +20129,31 @@ class Input extends Component {
             }
         });
 
+        const tickifedMouseMoveFn = this.scene.tickify(
+            () => this.fire("mousemove", this.mouseCanvasPos, true)
+        );
+
         this.element.addEventListener("mousemove", this._mouseMoveListener = (e) => {
             if (!this.enabled) {
                 return;
             }
             this._getMouseCanvasPos(e);
-            this.fire("mousemove", this.mouseCanvasPos, true);
+            tickifedMouseMoveFn();  
             if (this.mouseover) {
                 e.preventDefault();
             }
         });
 
+        const tickifiedMouseWheelFn = this.scene.tickify(
+            (delta) => { this.fire("mousewheel", delta, true); }
+        );
+
         this.element.addEventListener("wheel", this._mouseWheelListener = (e, d) => {
             if (!this.enabled) {
                 return;
             }
             const delta = Math.max(-1, Math.min(1, -e.deltaY * 40));
-            this.fire("mousewheel", delta, true);
+            tickifiedMouseWheelFn(delta);
         }, {passive: true});
 
         // mouseclicked
@@ -27854,6 +27977,11 @@ class Scene extends Component {
             throw "Mandatory config expected: valid canvasId or canvasElement";
         }
 
+        /**
+         * @type {{[key: string]: {wrapperFunc: Function, tickSubId: string}}}
+         */
+        this._tickifiedFunctions = {};
+
         const transparent = (!!cfg.transparent);
         const alphaDepthMask = (!!cfg.alphaDepthMask);
 
@@ -29603,6 +29731,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.
      */
@@ -29637,14 +29768,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;
     }
 
     /**
@@ -29653,8 +29795,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,
@@ -30016,6 +30163,63 @@ class Scene extends Component {
         return changed;
     }
 
+    /**
+     * This method will "tickify" the provided `cb` function.
+     * 
+     * This means, the function will be wrapped so:
+     * 
+     * - it runs time-aligned to scene ticks
+     * - it runs maximum once per scene-tick
+     * 
+     * @param {Function} cb The function to tickify
+     * @returns {Function)}
+     */
+    tickify(cb) {
+        const cbString = cb.toString();
+
+        /**
+         * Check if the function is already tickified, and if so return the cached one.
+         */
+        if (cbString in this._tickifiedFunctions) {
+            return this._tickifiedFunctions[cbString].wrapperFunc;
+        }
+
+        let alreadyRun = 0;
+        let needToRun = 0;
+
+        let lastArgs;
+
+        /**
+         * The provided `cb` function is replaced with a "set-dirty" function
+         * 
+         * @type {Function}
+         */
+        const wrapperFunc = function (...args) {
+            lastArgs = args;
+            needToRun++;
+        };
+
+        /**
+         * An each scene tick, if the "dirty-flag" is set, run the `cb` function.
+         * 
+         * This will make it run time-aligned to the scene tick.
+         */
+        const tickSubId = this.on("tick", () => {
+            const tmp = needToRun;
+            if (tmp > alreadyRun) {
+                alreadyRun = tmp;
+                cb(...lastArgs);
+            }
+        });
+
+        /**
+         * And, store the list of subscribers.
+         */
+        this._tickifiedFunctions[cbString] = { tickSubId, wrapperFunc };
+
+        return wrapperFunc;
+    }
+
     /**
      * Destroys this Scene.
      */
@@ -49770,18 +49974,19 @@ class DistanceMeasurementsMouseControl extends DistanceMeasurementsControl {
             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";
@@ -49789,8 +49994,8 @@ class DistanceMeasurementsMouseControl extends DistanceMeasurementsControl {
                     } 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";
@@ -49872,8 +50077,8 @@ class DistanceMeasurementsMouseControl extends DistanceMeasurementsControl {
                 : "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`;
@@ -87283,29 +87488,12 @@ class PickController {
         this._lastPickedEntityId = null;
 
         this._needFireEvents = 0;
-
-        this._needToUpdate = false;
-
-        this._tickSub = this._scene.on("tick", () => {
-            this.runUpdate();
-        });
-    }
-
-    update() {
-        this._needToUpdate = true;
     }
 
     /**
      * Immediately attempts a pick, if scheduled.
      */
-    runUpdate() {
-
-        if (!this._needToUpdate) {
-            return;
-        }
-
-        this._needToUpdate = false;
-
+    update() {
         if (!this._configs.pointerEnabled) {
             return;
         }
@@ -87322,13 +87510,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++;
@@ -87410,14 +87598,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);
         }
 
@@ -87426,9 +87614,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 {
@@ -87480,10 +87668,6 @@ class PickController {
 
         this._needFireEvents = 0;
     }
-
-    destroy() {
-        this._scene.off(this._tickSub);
-    }
 }
 
 /**
@@ -87978,75 +88162,78 @@ class MousePickHandler {
             }
         };
 
-        canvas.addEventListener("mousemove", this._canvasMouseMoveHandler = (e) => {
+        const tickifiedMouseMoveFn = scene.tickify (
+            this._canvasMouseMoveHandler = (e) => {
+                if (!(configs.active && configs.pointerEnabled)) {
+                    return;
+                }
 
-            if (!(configs.active && configs.pointerEnabled)) {
-                return;
-            }
+                if (leftDown || rightDown) {
+                    return;
+                }
 
-            if (leftDown || rightDown) {
-                return;
-            }
+                const hoverSubs = cameraControl.hasSubs("hover");
+                const hoverEnterSubs = cameraControl.hasSubs("hoverEnter");
+                const hoverOutSubs = cameraControl.hasSubs("hoverOut");
+                const hoverOffSubs = cameraControl.hasSubs("hoverOff");
+                const hoverSurfaceSubs = cameraControl.hasSubs("hoverSurface");
+                const hoverSnapOrSurfaceSubs = cameraControl.hasSubs("hoverSnapOrSurface");
 
-            const hoverSubs = cameraControl.hasSubs("hover");
-            const hoverEnterSubs = cameraControl.hasSubs("hoverEnter");
-            const hoverOutSubs = cameraControl.hasSubs("hoverOut");
-            const hoverOffSubs = cameraControl.hasSubs("hoverOff");
-            const hoverSurfaceSubs = cameraControl.hasSubs("hoverSurface");
-            const hoverSnapOrSurfaceSubs = cameraControl.hasSubs("hoverSnapOrSurface");
+                if (hoverSubs || hoverEnterSubs || hoverOutSubs || hoverOffSubs || hoverSurfaceSubs || hoverSnapOrSurfaceSubs) {
 
-            if (hoverSubs || hoverEnterSubs || hoverOutSubs || hoverOffSubs || hoverSurfaceSubs || hoverSnapOrSurfaceSubs) {
+                    pickController.pickCursorPos = states.pointerCanvasPos;
+                    pickController.schedulePickEntity = true;
+                    pickController.schedulePickSurface = hoverSurfaceSubs;
+                    pickController.scheduleSnapOrPick = hoverSnapOrSurfaceSubs;
 
-                pickController.pickCursorPos = states.pointerCanvasPos;
-                pickController.schedulePickEntity = true;
-                pickController.schedulePickSurface = hoverSurfaceSubs;
-                pickController.scheduleSnapOrPick = hoverSnapOrSurfaceSubs;
+                    pickController.update();
 
-                pickController.update();
+                    if (pickController.pickResult) {
 
-                if (pickController.pickResult) {
+                        if (pickController.pickResult.entity) {
+                            const pickedEntityId = pickController.pickResult.entity.id;
 
-                    if (pickController.pickResult.entity) {
-                        const pickedEntityId = pickController.pickResult.entity.id;
+                            if (this._lastPickedEntityId !== pickedEntityId) {
 
-                        if (this._lastPickedEntityId !== pickedEntityId) {
+                                if (this._lastPickedEntityId !== undefined) {
 
-                            if (this._lastPickedEntityId !== undefined) {
+                                    cameraControl.fire("hoverOut", { // Hovered off an entity
+                                        entity: scene.objects[this._lastPickedEntityId]
+                                    }, true);
+                                }
+
+                                cameraControl.fire("hoverEnter", pickController.pickResult, true); // Hovering over a new entity
 
-                                cameraControl.fire("hoverOut", { // Hovered off an entity
-                                    entity: scene.objects[this._lastPickedEntityId]
-                                }, true);
+                                this._lastPickedEntityId = pickedEntityId;
                             }
+                        }
 
-                            cameraControl.fire("hoverEnter", pickController.pickResult, true); // Hovering over a new entity
+                        cameraControl.fire("hover", pickController.pickResult, true);
 
-                            this._lastPickedEntityId = pickedEntityId;
+                        if (pickController.pickResult.worldPos || pickController.pickResult.snappedWorldPos) { // Hovering the surface of an entity
+                            cameraControl.fire("hoverSurface", pickController.pickResult, true);
                         }
-                    }
 
-                    cameraControl.fire("hover", pickController.pickResult, true);
+                    } else {
 
-                    if (pickController.pickResult.worldPos || pickController.pickResult.snappedWorldPos) { // Hovering the surface of an entity
-                        cameraControl.fire("hoverSurface", pickController.pickResult, true);
-                    }
+                        if (this._lastPickedEntityId !== undefined) {
 
-                } else {
+                            cameraControl.fire("hoverOut", { // Hovered off an entity
+                                entity: scene.objects[this._lastPickedEntityId]
+                            }, true);
 
-                    if (this._lastPickedEntityId !== undefined) {
+                            this._lastPickedEntityId = undefined;
+                        }
 
-                        cameraControl.fire("hoverOut", { // Hovered off an entity
-                            entity: scene.objects[this._lastPickedEntityId]
+                        cameraControl.fire("hoverOff", { // Not hovering on any entity
+                            canvasPos: pickController.pickCursorPos
                         }, true);
-
-                        this._lastPickedEntityId = undefined;
                     }
-
-                    cameraControl.fire("hoverOff", { // Not hovering on any entity
-                        canvasPos: pickController.pickCursorPos
-                    }, true);
                 }
             }
-        });
+        );
+
+        canvas.addEventListener("mousemove", tickifiedMouseMoveFn);
 
         canvas.addEventListener('mousedown', this._canvasMouseDownHandler = (e) => {