@xeokit/xeokit-sdk 2.6.64 → 2.6.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.64",
+  "version": "2.6.65",
   "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

@@ -53,13 +53,10 @@ export class PointerLens {
         this.scene = this.viewer.scene;
 
         this._lensCursorDiv = document.createElement('div');
-        this.viewer.scene.canvas.canvas.parentNode.insertBefore(this._lensCursorDiv, this.viewer.scene.canvas.canvas);
-        this._lensCursorDiv.style.background = "pink";
-        this._lensCursorDiv.style.border = "2px solid red";
-        this._lensCursorDiv.style.borderRadius = "20px";
-        this._lensCursorDiv.style.width = "10px";
-        this._lensCursorDiv.style.height = "10px";
-        this._lensCursorDiv.style.margin = "-200px -200px";
+        this._lensParams = { canvasSize: 300, cursorBorder: 2, cursorSize: 10 };
+        this._lensCursorDiv.style.borderRadius = "50%";
+        this._lensCursorDiv.style.width  = this._lensParams.cursorSize + "px";
+        this._lensCursorDiv.style.height = this._lensParams.cursorSize + "px";
         this._lensCursorDiv.style.zIndex = "100000";
         this._lensCursorDiv.style.position = "absolute";
         this._lensCursorDiv.style.pointerEvents = "none";
@@ -72,8 +69,8 @@ export class PointerLens {
         this._lensContainer.style.background = "white";
     //    this._lensContainer.style.opacity = "0";
         this._lensContainer.style.borderRadius = "50%";
-        this._lensContainer.style.width = "300px";
-        this._lensContainer.style.height = "300px";
+        this._lensContainer.style.width  = this._lensParams.canvasSize + "px";
+        this._lensContainer.style.height = this._lensParams.canvasSize + "px";
         
         this._lensContainer.style.zIndex = "15000";
         this._lensContainer.style.position = "absolute";
@@ -85,13 +82,14 @@ export class PointerLens {
         // this._lensCanvas.style.background = "darkblue";
         this._lensCanvas.style.borderRadius = "50%";
 
-        this._lensCanvas.style.width = "300px";
-        this._lensCanvas.style.height = "300px";
+        this._lensCanvas.style.width  = this._lensParams.canvasSize + "px";
+        this._lensCanvas.style.height = this._lensParams.canvasSize + "px";
         this._lensCanvas.style.zIndex = "15000";
         this._lensCanvas.style.pointerEvents = "none";
 
         document.body.appendChild(this._lensContainer);
         this._lensContainer.appendChild(this._lensCanvas);
+        this._lensContainer.appendChild(this._lensCursorDiv);
 
         this._lensCanvasContext = this._lensCanvas.getContext('2d');
         this._canvasElement = this.viewer.scene.canvas.canvas;
@@ -109,7 +107,7 @@ export class PointerLens {
 
         this._active = (cfg.active !== false);
         this._visible = false;
-        this._snapped = false;
+        this.snapped = false;
 
         this._onViewerRendering = this.viewer.scene.on("rendering", () => {
             if (this._active && this._visible) {
@@ -156,21 +154,13 @@ export class PointerLens {
             this._lensCanvas.height // destination height
         );
 
-        const centerLensCanvas = [
-            (lensRect.left + lensRect.right) / 2 - canvasRect.left,
-            (lensRect.top + lensRect.bottom) / 2 - canvasRect.top
-        ];
+        const middle = this._lensParams.canvasSize / 2 - this._lensParams.cursorSize / 2 - this._lensParams.cursorBorder;
 
-        if (this._snappedCanvasPos) {
-            const deltaX = this._snappedCanvasPos[0] - this._canvasPos[0];
-            const deltaY = this._snappedCanvasPos[1] - this._canvasPos[1];
+        const deltaX = this._snappedCanvasPos ? (this._snappedCanvasPos[0] - this._canvasPos[0]) : 0;
+        const deltaY = this._snappedCanvasPos ? (this._snappedCanvasPos[1] - this._canvasPos[1]) : 0;
 
-            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] + deltaX * this._zoomLevel - 10}px`;
-            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] + deltaY * this._zoomLevel - 10}px`;
-        } else {
-            this._lensCursorDiv.style.marginLeft = `${centerLensCanvas[0] - 10}px`;
-            this._lensCursorDiv.style.marginTop = `${centerLensCanvas[1] - 10}px`;
-        }
+        this._lensCursorDiv.style.left = `${middle + deltaX * this._zoomLevel}px`;
+        this._lensCursorDiv.style.top  = `${middle + deltaY * this._zoomLevel}px`;
     }
 
 
@@ -238,14 +228,10 @@ export class PointerLens {
      * @private
      */
     set snapped(snapped) {
-     this._snapped = snapped;
-        if (snapped) {
-            this._lensCursorDiv.style.background = "greenyellow";
-            this._lensCursorDiv.style.border = "2px solid green";
-        } else {
-            this._lensCursorDiv.style.background = "pink";
-            this._lensCursorDiv.style.border = "2px solid red";
-        }
+        this._snapped = snapped;
+        const [ bg, border ] = snapped ? [ "greenyellow", "green" ] : [ "pink", "red" ];
+        this._lensCursorDiv.style.background = bg;
+        this._lensCursorDiv.style.border = this._lensParams.cursorBorder + "px solid " + border;
     }
 
     /**
@@ -257,19 +243,19 @@ export class PointerLens {
     get snapped() {
         return this._snapped;
     }
-    
+
+    _updateActiveVisible() {
+        this._lensContainer.style.visibility = (this._active && this._visible) ? "visible" : "hidden";
+        this.update();
+    }
+
     /**
      * Sets if this PointerLens is active.
      * @param active
      */
     set active(active) {
         this._active = active;
-        this._lensContainer.style.visibility = (active && this._visible) ? "visible" : "hidden";
-        if (!active || !this._visible ) {
-            this._lensCursorDiv.style.marginLeft = `-100px`;
-            this._lensCursorDiv.style.marginTop = `-100px`;
-        }
-        this.update();
+        this._updateActiveVisible();
     }
 
     /**
@@ -288,12 +274,7 @@ export class PointerLens {
      */
     set visible(visible) {
         this._visible = visible;
-        this._lensContainer.style.visibility = (visible && this._active) ? "visible" : "hidden";
-        if (!visible || !this._active) {
-            this._lensCursorDiv.style.marginLeft = `-100px`;
-            this._lensCursorDiv.style.marginTop = `-100px`;
-        }
-        this.update();
+        this._updateActiveVisible();
     }
 
     /**

package/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsTouchControl.js

@@ -1,7 +1,7 @@
 import {math} from "../../viewer/scene/math/math.js";
 import {PointerCircle} from "../../extras/PointerCircle/PointerCircle.js";
 import {AngleMeasurementsControl} from "./AngleMeasurementsControl.js";
-
+import {transformToNode} from "../lib/ui/index.js";
 
 const WAITING_FOR_ORIGIN_TOUCH_START = 0;
 const WAITING_FOR_ORIGIN_QUICK_TOUCH_END = 1;
@@ -17,6 +17,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END = 8;
 
 const TOUCH_CANCELING = 7;
 
+const tmpVec2 = math.vec2();
+
 /**
  * Creates {@link AngleMeasurement}s from touch input.
  *
@@ -155,6 +157,19 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
         }
 
+        const copyCanvasPos = (event, dst) => {
+            dst[0] = event.clientX;
+            dst[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
+            return dst;
+        };
+
+        const toBodyPos = (pos, dst) => {
+            dst.set(pos);
+            transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
+            return dst;
+        };
+
         canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
 
             const currentNumTouches = event.touches.length;
@@ -168,11 +183,8 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.touches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
-            touchStartCanvasPos.set([touchX, touchY]);
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchStartCanvasPos);
+            touchMoveCanvasPos.set(touchStartCanvasPos);
 
             switch (this._touchState) {
 
@@ -188,7 +200,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -196,7 +208,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                         })
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                         } else {
                             return;
                         }
@@ -303,7 +315,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.corner.entity = snapPickResult.entity;
@@ -325,7 +337,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.corner.entity = pickResult.entity;
@@ -396,7 +408,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.target.entity = snapPickResult.entity;
@@ -418,7 +430,7 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.target.entity = pickResult.entity;
@@ -482,14 +494,11 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.touches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
 
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchMoveCanvasPos);
 
             let snapPickResult;
             let pickResult;
@@ -662,9 +671,6 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.changedTouches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -674,7 +680,10 @@ export class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -173,6 +173,9 @@ class Annotation extends Marker {
             addContextMenuListener(this._marker, e => {
                 e.preventDefault();
                 this.plugin.fire("contextmenu", this);
+            }, e => {
+                e.preventDefault();
+                this.plugin.fire("markerClicked", this);
             })
             this._marker.addEventListener("mouseenter", () => {
                 this.plugin.fire("markerMouseEnter", this);

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsTouchControl.js

@@ -1,7 +1,7 @@
 import {math} from "../../viewer/scene/math/math.js";
 import {PointerCircle} from "../../extras/PointerCircle/PointerCircle.js";
 import {DistanceMeasurementsControl} from "./DistanceMeasurementsControl.js";
-
+import {transformToNode} from "../lib/ui/index.js";
 
 const WAITING_FOR_ORIGIN_TOUCH_START = 0;
 const WAITING_FOR_ORIGIN_QUICK_TOUCH_END = 1;
@@ -13,6 +13,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END = 5;
 
 const TOUCH_CANCELING = 7;
 
+const tmpVec2 = math.vec2();
+
 /**
  * Creates {@link DistanceMeasurement}s from touch input.
  *
@@ -159,6 +161,19 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START;
         }
 
+        const copyCanvasPos = (event, dst) => {
+            dst[0] = event.clientX;
+            dst[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, dst);
+            return dst;
+        };
+
+        const toBodyPos = (pos, dst) => {
+            dst.set(pos);
+            transformToNode(canvas, canvas.ownerDocument.documentElement, dst);
+            return dst;
+        };
+
         canvas.addEventListener("touchstart", this._onCanvasTouchStart = (event) => {
 
             const currentNumTouches = event.touches.length;
@@ -172,16 +187,8 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
             }
 
             const touch = event.touches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-
-            touchStartCanvasPos.set([touchX, touchY]);
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchStartCanvasPos);
+            touchMoveCanvasPos.set(touchStartCanvasPos);
 
             switch (this._touchState) {
 
@@ -197,7 +204,7 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -205,7 +212,7 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
                         })
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                         } else {
                             return;
                         }
@@ -309,7 +316,7 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
                                     this.pointerLens.cursorPos = snapPickResult.snappedCanvasPos;
                                     this.pointerLens.snapped = true;
                                 }
-                                this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                                this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentDistanceMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentDistanceMeasurement.target.entity = snapPickResult.entity;
@@ -327,7 +334,7 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
                                         this.pointerLens.cursorPos = pickResult.canvasPos;
                                         this.pointerLens.snapped = false;
                                     }
-                                    this.pointerCircle.start(pickResult.canvasPos);
+                                    this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentDistanceMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentDistanceMeasurement.target.entity = pickResult.entity;
@@ -386,19 +393,11 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
             }
 
             const touch = event.touches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-            
             if (touch.identifier !== touchId) {
                 return;
             }
 
-            touchMoveCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchMoveCanvasPos);
 
             let snapPickResult;
             let pickResult;
@@ -563,14 +562,6 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
             }
 
             const touch = event.changedTouches[0];
-
-            // Get the canvas's bounding rectangle
-            const rect = canvas.getBoundingClientRect();
-
-            // Calculate the touch position relative to the canvas
-            const touchX = touch.clientX - rect.left;
-            const touchY = touch.clientY - rect.top;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -580,7 +571,10 @@ export class DistanceMeasurementsTouchControl extends DistanceMeasurementsContro
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 

package/src/plugins/SectionPlanesPlugin/Control.js

@@ -270,8 +270,10 @@ class Control {
                 isObject: false
             }), NO_STATE_INHERIT);
 
+            const localToWorldVec = (localVec, worldVec) => math.vec3ApplyQuaternion(rootNode.quaternion, localVec, worldVec);
+
             const closestPointOnAxis = (function() {
-                const worldAxis = math.vec4();
+                const worldAxis = math.vec3();
                 const org = math.vec3();
                 const dir = math.vec3();
                 return (canvasPos, dst) => {
@@ -306,22 +308,39 @@ class Control {
                         if (closestPointOnAxis(canvasPos, tempVec3)) {
                             math.subVec3(tempVec3, initOffset, tempVec3);
                             setPos(tempVec3);
-                            if (self._sectionPlane) {
-                                self._sectionPlane.pos = tempVec3;
+                            if (this._sectionPlane) {
+                                this._sectionPlane.pos = tempVec3;
                             }
                         }
                     });
                 }
             };
 
-            const lastCanvasPos = math.vec2();
             handlers[rotateHandle.id] = {
                 setActivated: a => hoop.visible = a,
                 initDragAction: (initCanvasPos) => {
-                    lastCanvasPos.set(initCanvasPos);
+                    const rotationFromCanvasPos = (function() {
+                        const planeCanvasPos = camera.projectWorldPos(pos);
+                        localToWorldVec(rgb, tempVec3);
+                        math.transformVec3(camera.normalMatrix, tempVec3, tempVec3);
+                        const axisCoeff = Math.sign(tempVec3[2]);
+                        return (canvasPos) => {
+                            const dx = canvasPos[0] - planeCanvasPos[0];
+                            const dy = canvasPos[1] - planeCanvasPos[1];
+                            return axisCoeff * Math.atan2(-dy, dx);
+                        };
+                    })();
+
+                    let lastRotation = rotationFromCanvasPos(initCanvasPos);
+
                     return canvasPos => {
-                        dragRotateSectionPlane(rgb, lastCanvasPos, canvasPos);
-                        lastCanvasPos.set(canvasPos);
+                        const rotation = rotationFromCanvasPos(canvasPos);
+                        rootNode.rotate(rgb, (rotation - lastRotation) * 180 / Math.PI);
+                        if (this._sectionPlane) {
+                            ignoreNextSectionPlaneDirUpdate = true;
+                            this._sectionPlane.dir = math.vec3ApplyQuaternion(rootNode.quaternion, [0, 0, 1], tempVec3);
+                        }
+                        lastRotation = rotation;
                     };
                 }
             };
@@ -457,114 +476,6 @@ class Control {
             cleanups.push(() => scene.off(onSceneTick));
         }
 
-        const getClickCoordsWithinElement = (event, canvasPos) => {
-            if (!event) {
-                event = window.event;
-                canvasPos[0] = event.x;
-                canvasPos[1] = event.y;
-            } else {
-                const element = event.target;
-                const rect = element.getBoundingClientRect();
-                canvasPos[0] = event.clientX - rect.left;
-                canvasPos[1] = event.clientY - rect.top;
-            }
-        };
-
-        const localToWorldVec = (function () {
-            const mat = math.mat4();
-            return function (localVec, worldVec) {
-                math.quaternionToMat4(rootNode.quaternion, mat);
-                math.transformVec3(mat, localVec, worldVec);
-                math.normalizeVec3(worldVec);
-                return worldVec;
-            };
-        })();
-
-        const getTranslationPlane = (worldAxis, planeNormal) => {
-            const absX = Math.abs(worldAxis[0]);
-            if (absX > Math.abs(worldAxis[1]) && absX > Math.abs(worldAxis[2])) {
-                math.cross3Vec3(worldAxis, [0, 1, 0], planeNormal);
-            } else {
-                math.cross3Vec3(worldAxis, [1, 0, 0], planeNormal);
-            }
-            math.cross3Vec3(planeNormal, worldAxis, planeNormal);
-            math.normalizeVec3(planeNormal);
-        };
-
-        const self = this;
-        var dragRotateSectionPlane = (function () {
-            const p1 = math.vec4();
-            const p2 = math.vec4();
-            const c = math.vec4();
-            const worldAxis = math.vec4();
-            const dir = math.vec3();
-            const mat = math.mat4();
-            const planeNormal = math.vec3();
-            return function (baseAxis, fromMouse, toMouse) {
-                localToWorldVec(baseAxis, worldAxis);
-                const hasData = getPointerPlaneIntersect(fromMouse, worldAxis, p1) && getPointerPlaneIntersect(toMouse, worldAxis, p2);
-                if (!hasData) { // Find intersections with view plane and project down to origin
-                    getTranslationPlane(worldAxis, planeNormal);
-                    getPointerPlaneIntersect(fromMouse, planeNormal, p1, 1); // Ensure plane moves closer to camera so angles become workable
-                    getPointerPlaneIntersect(toMouse, planeNormal, p2, 1);
-                    var dot = math.dotVec3(p1, worldAxis);
-                    p1[0] -= dot * worldAxis[0];
-                    p1[1] -= dot * worldAxis[1];
-                    p1[2] -= dot * worldAxis[2];
-                    dot = math.dotVec3(p2, worldAxis);
-                    p2[0] -= dot * worldAxis[0];
-                    p2[1] -= dot * worldAxis[1];
-                    p2[2] -= dot * worldAxis[2];
-                }
-                math.normalizeVec3(p1);
-                math.normalizeVec3(p2);
-                dot = math.dotVec3(p1, p2);
-                dot = math.clamp(dot, -1.0, 1.0); // Rounding errors cause dot to exceed allowed range
-                var incDegrees = Math.acos(dot) * math.RADTODEG;
-                math.cross3Vec3(p1, p2, c);
-                if (math.dotVec3(c, worldAxis) < 0.0) {
-                    incDegrees = -incDegrees;
-                }
-                rootNode.rotate(baseAxis, incDegrees);
-
-                if (self._sectionPlane) {
-                    math.quaternionToMat4(rootNode.quaternion, mat);  // << ---
-                    math.transformVec3(mat, [0, 0, 1], dir);
-                    ignoreNextSectionPlaneDirUpdate = true;
-                    self._sectionPlane.dir = dir;
-                }
-            };
-        })();
-
-        var getPointerPlaneIntersect = (function () {
-            const dir = math.vec4([0, 0, 0, 1]);
-            const matrix = math.mat4();
-            return function (mouse, axis, dest, offset) {
-                offset = offset || 0;
-                dir[0] = mouse[0] / canvas.width * 2.0 - 1.0;
-                dir[1] = -(mouse[1] / canvas.height * 2.0 - 1.0);
-                dir[2] = 0.0;
-                dir[3] = 1.0;
-                math.mulMat4(camera.projMatrix, camera.viewMatrix, matrix); // Unproject norm device coords to view coords
-                math.inverseMat4(matrix);
-                math.transformVec4(matrix, dir, dir);
-                math.mulVec4Scalar(dir, 1.0 / dir[3]); // This is now point A on the ray in world space
-                var rayO = camera.eye; // The direction
-                math.subVec4(dir, rayO, dir);
-                const origin = self._sectionPlane.pos; // Plane origin:
-                var d = -math.dotVec3(origin, axis) - offset;
-                var dot = math.dotVec3(axis, dir);
-                if (Math.abs(dot) > 0.005) {
-                    var t = -(math.dotVec3(axis, rayO) + d) / dot;
-                    math.mulVec3Scalar(dir, t, dest);
-                    math.addVec3(dest, rayO);
-                    math.subVec3(dest, origin, dest);
-                    return true;
-                }
-                return false;
-            };
-        })();
-
         {
             let deactivateActive = null;
             let currentDrag = null;

package/src/plugins/TreeViewPlugin/TreeViewPlugin.js

@@ -1,5 +1,5 @@
-import {Plugin} from "../../viewer/Plugin.js";
-import {RenderService} from "./RenderService.js";
+import { Plugin } from "../../viewer/Plugin.js";
+import { RenderService } from "./RenderService.js";
 
 const treeViews = [];
 
@@ -363,6 +363,8 @@ export class TreeViewPlugin extends Plugin {
      * @param {RenderService} [cfg.renderService] Optional {@link RenderService} to use. Defaults to the {@link TreeViewPlugin}'s default {@link RenderService}.
      * @param {Boolean} [cfg.showIndeterminate=false] When true, will show indeterminate state for checkboxes when some but not all child nodes are checked
      * @param {Boolean} [cfg.showProjectNode=false] When true, will show top level project node when hierarchy is set to "storeys"
+     * @param {Function} [cfg.elevationSortFunction] Optional function to replace the default elevation sort function. The function should take two nodes and return -1, 0 or 1. 
+     * @param {Function} [cfg.defaultSortFunction] Optional function to replace the default sort function. The function should take two nodes and return -1, 0 or 1.
      */
     constructor(viewer, cfg = {}) {
 
@@ -416,6 +418,8 @@ export class TreeViewPlugin extends Plugin {
         this._renderService = cfg.renderService || new RenderService();
         this._showIndeterminate = cfg.showIndeterminate ?? false;
         this._showProjectNode = cfg.showProjectNode ?? false;
+        this._elevationSortFunction = cfg.elevationSortFunction ?? undefined;
+        this._defaultSortFunction = cfg.defaultSortFunction ?? undefined;
 
         if (!this._renderService) {
             throw new Error('TreeViewPlugin: no render service set');
@@ -1229,9 +1233,11 @@ export class TreeViewPlugin extends Plugin {
         }
         const firstChild = children[0];
         if ((this._hierarchy === "storeys" || this._hierarchy === "containment") &&  firstChild.type === "IfcBuildingStorey") {
-            children.sort(this._getSpatialSortFunc());
+            if (this._elevationSortFunction) children.sort(this._elevationSortFunction);
+            else children.sort(this._getSpatialSortFunc());
         } else {
-            children.sort(this._alphaSortFunc);
+            if (this._defaultSortFunction) children.sort(this._defaultSortFunction)
+            else children.sort(this._alphaSortFunc);
         }
         for (let i = 0, len = children.length; i < len; i++) {
             const node = children[i];

package/src/plugins/lib/html/MenuEvent.js

@@ -1,6 +1,7 @@
 import { os } from "../../../viewer/utils/os.js";
 
-export function addContextMenuListener(elem, callback) {
+//failCallback will be called when the press is not long enough to considered a long press
+export function addContextMenuListener(elem, callback, failCallback = () => {}) {
     if (!elem || !callback) return;
 
     let timeout = null;
@@ -54,6 +55,7 @@ export function addContextMenuListener(elem, callback) {
     const touchEndHandler = (event) => {
         event.preventDefault();
         if (timeout) {
+            failCallback(event);
             clearTimeout(timeout);
             timeout = null;
         }