@xeokit/xeokit-sdk 2.6.69 → 2.6.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.69",
+  "version": "2.6.72",
   "description": "3D BIM IFC Viewer SDK for AEC engineering applications. Open Source JavaScript Toolkit based on pure WebGL for top performance, real-world coordinates and full double precision",
   "module": "./dist/xeokit-sdk.es.js",
   "main": "./dist/xeokit-sdk.cjs.js",
@@ -53,6 +53,7 @@
   },
   "homepage": "https://xeokit.io",
   "dependencies": {
+    "@creooxag/cx-converter": "^0.0.12-alpha",
     "@loaders.gl/core": "^4.3.3",
     "@loaders.gl/gltf": "^4.3.3",
     "@loaders.gl/las": "^4.3.3",
@@ -76,6 +77,7 @@
     "eslint": "^8.13.0",
     "parse5": "^7.0.0",
     "rollup": "^2.70.2",
+    "rollup-plugin-banner": "^0.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "typedoc": "^0.22.15"
   },

package/src/extras/ContextMenu/ContextMenu.js

@@ -282,6 +282,7 @@ class ContextMenu {
      * @param {Boolean} [cfg.enabled=true] Whether this ````ContextMenu```` is initially enabled. {@link ContextMenu#show} does nothing while this is ````false````.
      * @param {Boolean} [cfg.hideOnMouseDown=true] Whether this ````ContextMenu```` automatically hides whenever we mouse-down or tap anywhere in the page.
      * @param {Boolean} [cfg.hideOnAction=true] Whether this ````ContextMenu```` automatically hides after we select a menu item. Se false if we want the menu to remain shown and show any updates to its item titles, after we've selected an item.
+     * @param {Node | undefined} [cfg.parentNode] Optional reference to an existing DOM Node (e.g. ShadowRoot), to which the menu's HTML element will be appended, defaults to ````document.body````.
      */
     constructor(cfg = {}) {
 
@@ -296,6 +297,7 @@ class ContextMenu {
         this._itemMap = {};     // Items mapped to their IDs
         this._shown = false;    // True when the ContextMenu is visible
         this._nextId = 0;
+        this._parentNode = cfg.parentNode || document.body;
 
         /**
          * Subscriptions to events fired at this ContextMenu.
@@ -304,12 +306,12 @@ class ContextMenu {
         this._eventSubs = {};
 
         if (cfg.hideOnMouseDown !== false) {
-            document.addEventListener("mousedown", (event) => {
+            this._parentNode.addEventListener("mousedown", (event) => {
                 if (!event.target.classList.contains("xeokit-context-menu-item")) {
                     this.hide();
                 }
             });
-            document.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
+            this._parentNode.addEventListener("touchstart", this._canvasTouchStartHandler = (event) => {
                 if (!event.target.classList.contains("xeokit-context-menu-item")) {
                     this.hide();
                 }
@@ -613,7 +615,10 @@ class ContextMenu {
         const groups = menu.groups;
         const html = [];
 
-        html.push('<div class="xeokit-context-menu ' + menu.id + '" style="z-index:300000; position: absolute;">');
+        const menuElement= document.createElement("div");
+        menuElement.classList.add("xeokit-context-menu", menu.id);
+        menuElement.style.zIndex = 300000;
+        menuElement.style.position = "absolute";
 
         html.push('<ul>');
 
@@ -664,13 +669,10 @@ class ContextMenu {
         }
 
         html.push('</ul>');
-        html.push('</div>');
 
         const htmlString = html.join("");
-
-        document.body.insertAdjacentHTML('beforeend', htmlString);
-
-        const menuElement = document.querySelector("." + menu.id);
+        menuElement.innerHTML = htmlString;
+        this._parentNode.appendChild(menuElement);
 
         menu.menuElement = menuElement;
 
@@ -704,7 +706,7 @@ class ContextMenu {
                         const item = groupItems[j];
                         const itemSubMenu = item.subMenu;
 
-                        item.itemElement = document.getElementById(item.id);
+                        item.itemElement = this._parentNode.querySelector(`#${item.id}`);
 
                         if (!item.itemElement) {
                             console.error("ContextMenu item element not found: " + item.id);

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -7,6 +7,8 @@ const tempVec3a = math.vec3();
 const tempVec3b = math.vec3();
 const tempVec3c = math.vec3();
 
+const px = x => x + "px";
+
 /**
  * A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
  *
@@ -213,22 +215,29 @@ class Annotation extends Marker {
      * @private
      */
     _updateWithCurWidths() {
-        const px = x => x + "px";
         const boundary = this.scene.canvas.boundary;
         const left = boundary[0] + this.canvasPos[0];
         const top  = boundary[1] + this.canvasPos[1];
-        const markerWidth = this._curMarkerWidth;
-        const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
-        const markerCenter = left + markerDir * (markerWidth / 2 - 12);
-        this._marker.style.left = px(markerCenter - markerWidth / 2);
-        this._marker.style.top  = px(top - 12);
-        this._marker.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
-
-        const labelWidth = this._curLabelWidth;
-        const labelDir = Math.sign(this._labelPosition);
-        this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        this._marker.style.top = px(top - 12);
         this._label.style.top  = px(top - 17);
-        this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
+
+        if (this._markerAlign === "legacy") {
+            this._marker.style.left = px(left - 12);
+            this._label.style.left  = px(left + 40);
+        } else {
+            const markerWidth = this._curMarkerWidth;
+            const markerDir = (this._markerAlign === "right") ? -1 : ((this._markerAlign === "center") ? 0 : 1);
+            const markerCenter = left + markerDir * (markerWidth / 2 - 12);
+            this._marker.style.left = px(markerCenter - markerWidth / 2);
+
+            const labelWidth = this._curLabelWidth;
+            const labelDir = Math.sign(this._labelPosition);
+            this._label.style.left = px(markerCenter + labelDir * (markerWidth / 2 + Math.abs(this._labelPosition) + labelWidth / 2) - labelWidth / 2);
+        }
+
+        const zIndex = 90005 + Math.floor(this._viewPos[2]) + 1;
+        this._marker.style["z-index"] = zIndex;
+        this._label.style["z-index"]  = zIndex;
     }
 
     /**
@@ -259,7 +268,8 @@ class Annotation extends Marker {
      * @private
      */
     _updatePosition() {
-        if (this._curMarkerWidth === undefined) {
+        const isLegacy = this._markerAlign === "legacy";
+        if ((! isLegacy) && (this._curMarkerWidth === undefined)) {
             this._updateIfWidthsChanged();
         } else {
             // Update position with cached width values
@@ -267,7 +277,9 @@ class Annotation extends Marker {
             // so they don't interfere with e.g. interactive scene manipulation
             this._updateWithCurWidths();
             window.clearTimeout(this._widthTimeout);
-            this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+            if (! isLegacy) {
+                this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+            }
         }
     }
 
@@ -305,10 +317,10 @@ class Annotation extends Marker {
     /**
      * Sets the horizontal alignment of the Annotation's marker HTML.
      *
-     * @param {String} align Either "left", "center", "right" (default "left")
+     * @param {String} align Either "left", "center", "right", "legacy" (default "left")
      */
     setMarkerAlign(align) {
-        const valid = [ "left", "center", "right" ];
+        const valid = [ "left", "center", "right", "legacy" ];
         if (! valid.includes(align)) {
             this.error("Param 'align' should be one of: " + JSON.stringify(valid));
         } else {

package/src/plugins/CxConverterIFCLoaderPlugin/CxConverterIFCLoaderPlugin.js

@@ -0,0 +1,86 @@
+import { Plugin } from "../../viewer/Plugin.js";
+import { GLTFLoaderPlugin } from "../GLTFLoaderPlugin/GLTFLoaderPlugin.js";
+import { ifc2gltf } from "@creooxag/cx-converter";
+
+/**
+ * Fetches a file from the given URL and returns its contents as text.
+ *
+ * @param {string} url - The URL to fetch the file from.
+ * @returns {Promise<string>} A promise that resolves to the file contents.
+ * @private
+ */
+async function fetchFile(url) {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+        return response.text();
+    } catch (error) {
+        console.error('Error fetching file:', error);
+    }
+}
+
+/**
+ * {@link Viewer} plugin that uses [CxConverter](https://github.com/Creoox/cxconverter) to load BIM models directly from IFC files, using its WebAssembly buid from [npm package](https://www.npmjs.com/package/@creooxag/cx-converter).
+ *
+ * ## Overview
+ * The WebAssembly build of CxConverter is still in alfa stage, so it may not work as expected. This documentation will be updated as the library and the plugin evolve. The example below shows how to use the plugin:
+ * ````javascript
+ * import { CxConverterIFCLoaderPlugin, Viewer } from "../../dist/xeokit-sdk.es.js";
+ * const cxConverterIFCLoaderPlugin = new CxConverterIFCLoaderPlugin(viewer);
+ * 
+ * const sceneModel = await cxConverterIFCLoaderPlugin.load({
+ *        src: "../../assets/models/ifc/Duplex.ifc"
+ * }); 
+ * ````
+    See the code in action [here](https://xeokit.github.io/xeokit-sdk/examples/buildings/#cxConverterIFC_vbo_Duplex).
+ */
+
+class CxConverterIFCLoaderPlugin extends Plugin {
+    /**
+     * @constructor
+     * @param {Viewer} viewer The Viewer.
+     * @param {Object} [cfg={}] Plugin configuration.
+     */
+    constructor(viewer, cfg = {}) {
+        super("ifcLoader", viewer, cfg);
+
+        /**
+         * The GLTFLoaderPlugin used internally to load the converted GLTF.
+         * @type {GLTFLoaderPlugin}
+         */
+        this.gltfLoader = new GLTFLoaderPlugin(this.viewer);
+    }
+
+    /**
+     * Loads an IFC model from the given source.
+     *
+     * @param {Object} [params={}] Loading parameters.
+     * @param {string} params.src Path to an IFC file.
+     * @param {Function} [params.progressCallback] Callback to track loading progress.
+     * @param {Function} [params.progressTextCallback] Callback to track loading progress with text updates.
+     * @returns {Promise<SceneModel>} A promise that resolves to the loaded SceneModel.
+     */
+    async load(params = {}) {
+        if (!params.src) {
+            this.error("load() param expected: src");
+        }
+        const data = await fetchFile(params.src);
+        const { gltf, metaData } = await ifc2gltf(
+            data,
+            {
+                remote: true,
+                progressCallback: params.progressCallback,
+                progressTextCallback: params.progressTextCallback
+            }
+        );
+        const sceneModel = this.gltfLoader.load({
+            id: "myModel",
+            gltf: gltf,
+            metaModelJSON: metaData
+        });
+        return sceneModel;
+    }
+}
+export { CxConverterIFCLoaderPlugin };

package/src/plugins/CxConverterIFCLoaderPlugin/index.js

@@ -0,0 +1 @@
+export * from "./CxConverterIFCLoaderPlugin.js";

package/src/plugins/LASLoaderPlugin/LASDefaultDataSource.js

@@ -1,3 +1,5 @@
+import {utils} from "../../viewer/scene/utils.js";
+
 /**
  * Default data access strategy for {@link LASLoaderPlugin}.
  */
@@ -60,13 +62,23 @@ class LASDefaultDataSource {
                     if (request.status === 200) {
                         ok(request.response);
                     } else {
-                        error('getXKT error : ' + request.response);
+                        error('getLAS error : ' + request.response);
                     }
                 }
             };
             request.send(null);
         }
     }
+
+    getManifest(manifestSrc, ok, error) {
+        utils.loadJSON(this._cacheBusterURL(manifestSrc),
+            (json) => {
+                ok(json);
+            },
+            function (errMsg) {
+                error(errMsg);
+            });
+    }
 }
 
 export {LASDefaultDataSource};

package/src/plugins/LASLoaderPlugin/LASLoaderPlugin.js

@@ -430,6 +430,8 @@ class LASLoaderPlugin extends Plugin {
      * @param {String} [params.id] ID to assign to the root {@link Entity#id}, unique among all components in the Viewer's {@link Scene}, generated automatically by default.
      * @param {String} [params.src] Path to a LAS file, as an alternative to the ````las```` parameter.
      * @param {ArrayBuffer} [params.las] The LAS file data, as an alternative to the ````src```` parameter.
+     *  @param {String} [params.manifestSrc] Path or URL to a JSON manifest file that provides paths to ````.laz```` || ````.las```` files to load as parts of the model. Use this option to load models that have been split into
+     * @param {Object} [params.manifest] A JSON manifest object (as an alternative to a path or URL) that provides paths to ````.laz```` || ````.las```` files to load as parts of the model. Use this option to load models that have been split into
      * @param {Boolean} [params.loadMetadata=true] Whether to load metadata for the LAS model.
      * @param {Number[]} [params.origin=[0,0,0]] The model's World-space double-precision 3D origin. Use this to position the model within xeokit's World coordinate system, using double-precision coordinates.
      * @param {Number[]} [params.position=[0,0,0]] The model single-precision 3D position, relative to the ````origin```` parameter.
@@ -451,7 +453,7 @@ class LASLoaderPlugin extends Plugin {
             isModel: true
         }));
 
-        if (!params.src && !params.las) {
+        if (!params.src && !params.las && !params.manifest && !params.manifestSrc) {
             this.error("load() param expected: src or las");
             return sceneModel; // Return new empty model
         }
@@ -464,18 +466,77 @@ class LASLoaderPlugin extends Plugin {
             }
         };
 
+        const spinner = this.viewer.scene.canvas.spinner;
+        const done = () => {
+            sceneModel.scene.once("tick", () => {
+                if (sceneModel.destroyed) {
+                    return;
+                }
+                sceneModel.scene.fire("modelLoaded", sceneModel.id); // FIXME: Assumes listeners know order of these two events
+                sceneModel.fire("loaded", true, false); // Don't forget the event, for late subscribers
+            });
+            spinner.processes--;
+        }
+        const error = (errMsg) => {
+            spinner.processes--;
+            this.error(errMsg);
+            sceneModel.fire("error", errMsg);
+        }
+
         if (params.src) {
             this._loadModel(params.src, params, options, sceneModel);
-        } else {
-            const spinner = this.viewer.scene.canvas.spinner;
+        } else if(params.las) {
             spinner.processes++;
-            this._parseModel(params.las, params, options, sceneModel).then(() => {
-                spinner.processes--;
-            }, (errMsg) => {
-                spinner.processes--;
-                this.error(errMsg);
-                sceneModel.fire("error", errMsg);
-            });
+            this._parseModel(params.las, params, options, sceneModel).then(done, error);
+        } else if (params.manifest || params.manifestSrc) {
+            const baseDir = params.manifestSrc ? getBaseDirectory(params.manifestSrc) : "";
+            const loadAllFiles = (lasFiles) => { 
+                let i = 0;
+                const modelsLoaded = new Array(lasFiles.length);
+                const loadNext = () => {
+                    if (sceneModel.destroyed) {
+                        done();
+                    } else if (i >= lasFiles.length) {
+                        return
+                    } else {
+                        modelsLoaded[i] = false;
+                        this._dataSource.getLAS(`${baseDir}${lasFiles[i]}`, (arrayBuffer) => {
+                            const modelParams = utils.apply(params, {isManifest: true, index: i});
+                            this._parseModel(arrayBuffer, modelParams, options, sceneModel).then(() => {
+                                modelsLoaded[modelParams.index] = true;
+                                let allLoaded = true;
+                                modelsLoaded.forEach((loaded) => {
+                                    if(!loaded) allLoaded = false;
+                                })
+                                if(allLoaded) done();
+                            });
+                            i++;
+                            this.scheduleTask(loadNext, 200);
+                        }, error);
+                    }
+                }
+                loadNext();
+            };
+            const loadManifestData = (manifestData) => {
+                if(sceneModel.destroyed) return;
+                const files = manifestData.lasFiles || manifestData.lazFiles;
+                if(!files || files.length <= 0) {
+                    this.error(`load(): Failed to load model manifest - manifest not valid`);
+                    return;
+                }
+                loadAllFiles(files);
+            }
+            if(params.manifestSrc) {
+                this._dataSource.getManifest(params.manifestSrc, (manifestData) => {
+                    loadManifestData(manifestData);
+                }, (errMsg) => {
+                    this.error(errMsg);
+                    sceneModel.fire("error", errMsg);
+                })
+            } else {
+                const manifestData = params.manifest;
+                loadManifestData(manifestData);
+            }
         }
 
         return sceneModel;
@@ -486,6 +547,13 @@ class LASLoaderPlugin extends Plugin {
         spinner.processes++;
         this._dataSource.getLAS(params.src, (arrayBuffer) => {
                 this._parseModel(arrayBuffer, params, options, sceneModel).then(() => {
+                    sceneModel.scene.once("tick", () => {
+                        if (sceneModel.destroyed) {
+                            return;
+                        }
+                        sceneModel.scene.fire("modelLoaded", sceneModel.id); // FIXME: Assumes listeners know order of these two events
+                        sceneModel.fire("loaded", true, false); // Don't forget the event, for late subscribers
+                    });
                     spinner.processes--;
                 }, (errMsg) => {
                     spinner.processes--;
@@ -668,7 +736,7 @@ class LASLoaderPlugin extends Plugin {
                     const meshIds = [];
 
                     for (let i = 0, len = pointsChunks.length; i < len; i++) {
-                        const meshId = `pointsMesh${i}`;
+                        const meshId = `${params.isManifest ? 'model'+params.index : ''}pointsMesh${i}`;
                         meshIds.push(meshId);
                         sceneModel.createMesh({
                             id: meshId,
@@ -677,30 +745,6 @@ class LASLoaderPlugin extends Plugin {
                             colorsCompressed: (i < colorsChunks.length) ? colorsChunks[i] : null
                         });
                     }
-                    /*
-                                const pointsChunks = chunkArray(positionsValue, MAX_VERTICES * 3);
-                    const colorsChunks = chunkArray(colorsCompressed, MAX_VERTICES * 4);
-                    const meshIds = [];
-
-                    for (let i = 0, len = pointsChunks.length; i < len; i++) {
-
-                        const geometryId = `geometryMesh${i}`;
-                        const meshId = `pointsMesh${i}`;
-                        meshIds.push(meshId);
-
-                        sceneModel.createGeometry({
-                            id: geometryId,
-                            primitive: "points",
-                            positions: pointsChunks[i],
-                            colorsCompressed: (i < colorsChunks.length) ? colorsChunks[i] : null
-                        });
-
-                        sceneModel.createMesh({
-                            id: meshId,
-                            geometryId
-                        });
-                    }
-                     */
 
                     const pointsObjectId = params.entityId || math.createUUID();
 
@@ -743,14 +787,6 @@ class LASLoaderPlugin extends Plugin {
                         this.viewer.metaScene.createMetaModel(metaModelId, metadata, options);
                     }
 
-                    sceneModel.scene.once("tick", () => {
-                        if (sceneModel.destroyed) {
-                            return;
-                        }
-                        sceneModel.scene.fire("modelLoaded", sceneModel.id); // FIXME: Assumes listeners know order of these two events
-                        sceneModel.fire("loaded", true, false); // Don't forget the event, for late subscribers
-                    });
-
                     resolve();
                 });
             } catch (e) {
@@ -772,4 +808,14 @@ function chunkArray(array, chunkSize) {
     return result;
 }
 
+function getBaseDirectory(filePath) {
+    if (filePath.indexOf('?') > -1) {
+        filePath = filePath.split('?')[0];
+    }
+
+    const pathArray = filePath.split('/');
+    pathArray.pop(); // Remove the file name or the last segment of the path
+    return pathArray.join('/') + '/';
+}
+
 export {LASLoaderPlugin};

package/src/plugins/NavCubePlugin/CubeTextureCanvas.js

@@ -8,6 +8,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
     const cubeColor = "lightgrey";
     const cubeHighlightColor = cfg.hoverColor || "rgba(0,0,0,0.4)";
     const textColor = cfg.textColor || "black";
+    const parentNode = cfg.canvasElement || document.body;
 
     const height = 500;
     const width = height + (height / 3);
@@ -119,8 +120,7 @@ function CubeTextureCanvas(viewer, navCubeScene, cfg = {}) {
     this._textureCanvas.style.visibility = "hidden";
     this._textureCanvas.style["z-index"] = 2000000;
 
-    const body = document.getElementsByTagName("body")[0];
-    body.appendChild(this._textureCanvas);
+    parentNode.appendChild(this._textureCanvas);
 
     const context = this._textureCanvas.getContext("2d");
 

package/src/plugins/NavCubePlugin/NavCubePlugin.js

@@ -115,7 +115,7 @@ class NavCubePlugin extends Plugin {
             this._navCubeScene = new Scene(viewer, {
                 canvasId: cfg.canvasId,
                 canvasElement: cfg.canvasElement,
-                transparent: true
+                transparent: true,
             });
 
             this._navCubeCanvas = this._navCubeScene.canvas.canvas;
@@ -361,7 +361,7 @@ class NavCubePlugin extends Plugin {
                 }
             });
 
-            document.addEventListener("mouseup", self._onMouseUp = function (e) {
+            self._navCubeCanvas.addEventListener("mouseup", self._onMouseUp = function (e) {
                 if (e.which !== 1) {// Left button
                     return;
                 }
@@ -378,7 +378,7 @@ class NavCubePlugin extends Plugin {
                     if (hit.uv) {
                         var areaId = self._cubeTextureCanvas.getArea(hit.uv);
                         if (areaId >= 0) {
-                            document.body.style.cursor = "pointer";
+                            self._navCubeCanvas.style.cursor = "pointer";
                             if (lastAreaId >= 0) {
                                 self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                                 self._repaint();
@@ -404,7 +404,7 @@ class NavCubePlugin extends Plugin {
                                             self._repaint();
                                             lastAreaId = -1;
                                         }
-                                        document.body.style.cursor = "pointer";
+                                        self._navCubeCanvas.style.cursor = "pointer";
                                         if (lastAreaId >= 0) {
                                             self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                                             self._repaint();
@@ -423,7 +423,7 @@ class NavCubePlugin extends Plugin {
                 }
             });
 
-            document.addEventListener("mousemove", self._onMouseMove = function (e) {
+            self._navCubeCanvas.addEventListener("mousemove", self._onMouseMove = function (e) {
                 if (lastAreaId >= 0) {
                     self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                     self._repaint();
@@ -435,7 +435,7 @@ class NavCubePlugin extends Plugin {
                 if (down) {
                     var posX = e.clientX;
                     var posY = e.clientY;
-                    document.body.style.cursor = "move";
+                    self._navCubeCanvas.style.cursor = "move";
                     actionMove(posX, posY);
                     return;
                 }
@@ -449,7 +449,7 @@ class NavCubePlugin extends Plugin {
                 });
                 if (hit) {
                     if (hit.uv) {
-                        document.body.style.cursor = "pointer";
+                        self._navCubeCanvas.style.cursor = "pointer";
                         var areaId = self._cubeTextureCanvas.getArea(hit.uv);
                         if (areaId === lastAreaId) {
                             return;
@@ -464,7 +464,7 @@ class NavCubePlugin extends Plugin {
                         }
                     }
                 } else {
-                    document.body.style.cursor = "default";
+                    self._navCubeCanvas.style.cursor = "default";
                     if (lastAreaId >= 0) {
                         self._cubeTextureCanvas.setAreaHighlighted(lastAreaId, false);
                         self._repaint();
@@ -727,8 +727,8 @@ class NavCubePlugin extends Plugin {
             this._navCubeCanvas.removeEventListener("mouseleave", this._onMouseLeave);
             this._navCubeCanvas.removeEventListener("mousedown", this._onMouseDown);
 
-            document.removeEventListener("mousemove", this._onMouseMove);
-            document.removeEventListener("mouseup", this._onMouseUp);
+            this._navCubeCanvas.removeEventListener("mousemove", this._onMouseMove);
+            this._navCubeCanvas.removeEventListener("mouseup", this._onMouseUp);
 
             this._navCubeCanvas = null;
             this._cubeTextureCanvas.destroy();

package/src/plugins/SectionPlanesPlugin/Control.js

@@ -482,8 +482,8 @@ class Control {
             const canvasPos = math.vec2();
 
             const copyCanvasPos = (event, vec2) => {
-                vec2[0] = event.clientX;
-                vec2[1] = event.clientY;
+                vec2[0] = event.pageX;
+                vec2[1] = event.pageY;
                 transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
             };
 

package/src/plugins/TreeViewPlugin/TreeViewPlugin.js

@@ -464,7 +464,8 @@ export class TreeViewPlugin extends Plugin {
                 const indeterminate = this._showIndeterminate 
                   && parent.numVisibleEntities > 0 
                   && parent.numVisibleEntities < parent.numEntities;
-                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0), indeterminate);
+                parent.checked = parent.numVisibleEntities > 0;
+                this._renderService.setCheckbox(parent.nodeId, parent.checked, indeterminate);
 
                 parent = parent.parent;
             }
@@ -539,7 +540,6 @@ export class TreeViewPlugin extends Plugin {
 
             let parent = checkedNode.parent;
             while (parent) {
-                parent.checked = visible;
                 
                 if (visible) {
                     parent.numVisibleEntities += numUpdated;
@@ -549,7 +549,8 @@ export class TreeViewPlugin extends Plugin {
                 const indeterminate = this._showIndeterminate 
                   && parent.numVisibleEntities > 0 
                   && parent.numVisibleEntities < parent.numEntities;
-                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0), indeterminate);
+                parent.checked = parent.numVisibleEntities > 0;
+                this._renderService.setCheckbox(parent.nodeId, parent.checked, indeterminate);
                 
                 parent = parent.parent;
             }