@xeokit/xeokit-sdk 2.6.64 → 2.6.65

package/dist/xeokit-sdk.cjs.js

@@ -1059,13 +1059,10 @@ 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";
@@ -1078,8 +1075,8 @@ 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";
@@ -1091,13 +1088,14 @@ 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;
@@ -1115,7 +1113,7 @@ 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) {
@@ -1162,21 +1160,13 @@ 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`;
     }
 
 
@@ -1244,14 +1234,10 @@ 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;
     }
 
     /**
@@ -1263,19 +1249,19 @@ 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();
     }
 
     /**
@@ -1294,12 +1280,7 @@ 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();
     }
 
     /**
@@ -9590,7 +9571,8 @@ const os = {
     }
 };
 
-function addContextMenuListener(elem, callback) {
+//failCallback will be called when the press is not long enough to considered a long press
+function addContextMenuListener(elem, callback, failCallback = () => {}) {
     if (!elem || !callback) return;
 
     let timeout = null;
@@ -9644,6 +9626,7 @@ function addContextMenuListener(elem, callback) {
     const touchEndHandler = (event) => {
         event.preventDefault();
         if (timeout) {
+            failCallback(event);
             clearTimeout(timeout);
             timeout = null;
         }
@@ -13785,6 +13768,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END$1 = 8;
 
 const TOUCH_CANCELING$1 = 7;
 
+const tmpVec2$1 = math.vec2();
+
 /**
  * Creates {@link AngleMeasurement}s from touch input.
  *
@@ -13923,6 +13908,19 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             this._touchState = WAITING_FOR_ORIGIN_TOUCH_START$1;
         };
 
+        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;
@@ -13936,11 +13934,8 @@ 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) {
 
@@ -13956,7 +13951,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                     });
                     if (snapPickResult && snapPickResult.snapped) {
                         pointerWorldPos.set(snapPickResult.worldPos);
-                        this.pointerCircle.start(snapPickResult.snappedCanvasPos);
+                        this.pointerCircle.start(toBodyPos(snapPickResult.snappedCanvasPos, tmpVec2$1));
                     } else {
                         const pickResult = scene.pick({
                             canvasPos: touchMoveCanvasPos,
@@ -13964,7 +13959,7 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                         });
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2$1));
                         } else {
                             return;
                         }
@@ -14071,7 +14066,7 @@ 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$1));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.corner.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.corner.entity = snapPickResult.entity;
@@ -14093,7 +14088,7 @@ 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$1));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.corner.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.corner.entity = pickResult.entity;
@@ -14164,7 +14159,7 @@ 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$1));
                                 pointerWorldPos.set(snapPickResult.worldPos);
                                 this._currentAngleMeasurement.target.worldPos = snapPickResult.worldPos;
                                 this._currentAngleMeasurement.target.entity = snapPickResult.entity;
@@ -14186,7 +14181,7 @@ 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$1));
                                     pointerWorldPos.set(pickResult.worldPos);
                                     this._currentAngleMeasurement.target.worldPos = pickResult.worldPos;
                                     this._currentAngleMeasurement.target.entity = pickResult.entity;
@@ -14250,14 +14245,11 @@ 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;
@@ -14427,9 +14419,6 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
             }
 
             const touch = event.changedTouches[0];
-            const touchX = touch.clientX;
-            const touchY = touch.clientY;
-
             if (touch.identifier !== touchId) {
                 return;
             }
@@ -14439,7 +14428,10 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 
@@ -14920,6 +14912,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);
@@ -66124,7 +66119,7 @@ class VBOInstancingLinesLayer {
 
         let pickFlag = (visible && !culled && pickable) ? RENDER_PASSES.PICK : RENDER_PASSES.NOT_RENDERED;
 
-        const clippableFlag = !!(flags & ENTITY_FLAGS.CLIPPABLE) ? 255 : 0;
+        const clippableFlag = !!(flags & ENTITY_FLAGS.CLIPPABLE) ? 1 : 0;
 
         let vertFlag = 0;
         vertFlag |= colorFlag;
@@ -80701,8 +80696,7 @@ class DTXTrianglesLayer {
                 worldPos[2] = positions[i + 2];
                 worldPos[3] = 1.0;
                 math.decompressPosition(worldPos, positionsDecodeMatrix);
-                math.transformPoint4(this.model.worldMatrix, worldPos, worldPos);
-                math.transformPoint4(this.model.worldMatrix, worldPos, worldPos);
+                math.mulMat4v4(this.model.worldMatrix, worldPos, worldPos);
                 worldPos[0] += offsetX;
                 worldPos[1] += offsetY;
                 worldPos[2] += offsetZ;
@@ -89878,6 +89872,8 @@ const WAITING_FOR_TARGET_LONG_TOUCH_END = 5;
 
 const TOUCH_CANCELING = 7;
 
+const tmpVec2 = math.vec2();
+
 /**
  * Creates {@link DistanceMeasurement}s from touch input.
  *
@@ -90024,6 +90020,19 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             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;
@@ -90037,16 +90046,8 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             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) {
 
@@ -90062,7 +90063,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                     });
                     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,
@@ -90070,7 +90071,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                         });
                         if (pickResult && pickResult.worldPos) {
                             pointerWorldPos.set(pickResult.worldPos);
-                            this.pointerCircle.start(pickResult.canvasPos);
+                            this.pointerCircle.start(toBodyPos(pickResult.canvasPos, tmpVec2));
                         } else {
                             return;
                         }
@@ -90174,7 +90175,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                                     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;
@@ -90192,7 +90193,7 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                                         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;
@@ -90251,19 +90252,11 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             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;
@@ -90425,14 +90418,6 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
             }
 
             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;
             }
@@ -90442,7 +90427,10 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
                 longTouchTimeout = null;
             }
 
-            touchEndCanvasPos.set([touchX, touchY]);
+            copyCanvasPos(touch, touchEndCanvasPos);
+
+            const touchX = touchEndCanvasPos[0];
+            const touchY = touchEndCanvasPos[1];
 
             switch (this._touchState) {
 
@@ -120991,8 +120979,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) => {
@@ -121027,22 +121017,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;
                     };
                 }
             };
@@ -121178,101 +121185,6 @@ class Control {
             cleanups.push(() => scene.off(onSceneTick));
         }
 
-        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;
@@ -126055,6 +125967,8 @@ 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 = {}) {
 
@@ -126108,6 +126022,8 @@ 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');
@@ -126921,9 +126837,11 @@ 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];