@xeokit/xeokit-sdk 2.6.65 → 2.6.67

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.65",
-  "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
+  "version": "2.6.67",
+  "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",
   "types": "./types/index.d.ts",
-
   "scripts": {
     "build": "rollup --config rollup.config.js; rollup --config rollup.minified.config.js",
     "dev-build": "rollup --config rollup.dev.config.js",
     "docs": "rm -Rf ./docs/*; ./node_modules/.bin/esdoc",
     "typedocs": "rm -Rf ./docs/*; typedoc --tsconfig tsconfig.json",
     "publish": "npm publish --access public",
-    "changelog": "git fetch; auto-changelog --commit-limit false --package --template changelog-template.hbs"
+    "changelog": "git fetch; auto-changelog --commit-limit false --package --template changelog-template.hbs",
+    "test": "npx percy exec -- npx playwright test"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/xeokit/xeokit-sdk.git"
+    "url": "https://github.com/xeokit/xeokit-sdk.git"
   },
   "auto-changelog": {
     "output": "CHANGELOG.md",
@@ -25,47 +25,50 @@
     "commitLimit": false
   },
   "keywords": [
-    "webgl",
-    "webgl2",
-    "javascript",
-    "xeokit",
-    "xeolabs",
-    "creoox",
-    "ifc",
-    "bcf",
+    "ifc-viewer",
+    "bim-viewer",
+    "3d-web-viewer",
+    "point-cloud-viewer",
+    "online-viewer",
+    "web-gl",
+    "viewer-sdk",
+    "3d-viewers",
     "bim",
-    "gis",
-    "cad",
+    "ifc",
+    "geometry",
+    "point-cloud",
+    "las-viewer",
+    "laz-viewer",
+    "webgl-viewer",
+    "javascript-viewer",
     "buildingsmart",
-    "openbim",
-    "opensource",
-    "solidworks",
-    "gltf",
-    "3dxml",
-    "obj",
-    "stl",
-    "laz",
-    "las",
-    "pointcloud",
-    "3d-viewer"
+    "geospatial",
+    "gis",
+    "3d-tiles"
   ],
   "author": "Lindsay Kay",
-  "license": "See LICENSE.txt",
+  "license": "AGPL-3.0",
   "bugs": {
     "url": "https://github.com/xeokit/xeokit-sdk/issues"
   },
   "homepage": "https://xeokit.io",
   "dependencies": {
-    "@loaders.gl/core": "^3.2.6",
-    "@loaders.gl/gltf": "^3.2.6",
-    "@loaders.gl/las": "^3.2.6",
+    "@loaders.gl/core": "^4.3.3",
+    "@loaders.gl/gltf": "^4.3.3",
+    "@loaders.gl/las": "^4.3.3",
     "html2canvas": "^1.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
+    "@percy/cli": "^1.30.7",
+    "@percy/playwright": "^1.0.7",
+    "@playwright/test": "^1.49.1",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.2.1",
+    "@types/node": "^22.10.6",
+    "auto-changelog": "^2.4.0",
+    "dotenv": "^16.4.7",
     "esdoc": "^1.1.0",
     "esdoc-custom-theme": "^1.4.2",
     "esdoc-publish-html-plugin": "^1.1.2",
@@ -74,8 +77,7 @@
     "parse5": "^7.0.0",
     "rollup": "^2.70.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typedoc": "^0.22.15",
-    "auto-changelog": "^2.4.0"
+    "typedoc": "^0.22.15"
   },
   "files": [
     "/src",

package/src/extras/PointerCircle/PointerCircle.js

@@ -87,7 +87,7 @@ export class PointerCircle {
     }
 
     /**
-     * Stop the shricking circle and hide it.
+     * Stop the shrinking circle and hide it.
      */
     stop() {
         if (this._destroyed) {

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -40,6 +40,8 @@ class Annotation extends Marker {
         }
 
         this._htmlDirty = false;
+        this._curMarkerWidth = undefined;
+        this._curLabelWidth = 0;
 
         if (cfg.markerElement) {
             this._marker = cfg.markerElement;
@@ -210,27 +212,65 @@ class Annotation extends Marker {
     /**
      * @private
      */
-    _updatePosition() {
+    _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 markerRect = this._marker.getBoundingClientRect();
-        const markerWidth = markerRect.width;
+        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 labelRect = this._label.getBoundingClientRect();
-        const labelWidth = labelRect.width;
+        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._label.style.top  = px(top - 17);
         this._label.style["z-index"] = 90005 + Math.floor(this._viewPos[2]) + 1;
     }
 
+    /**
+     * @private
+     */
+    _updateIfWidthsChanged() {
+        let needsUpdate = false;
+        const markerWidth = this._marker.getBoundingClientRect().width;
+        if (this._curMarkerWidth !== markerWidth) {
+            this._curMarkerWidth = markerWidth;
+            needsUpdate = true;
+        }
+        const labelDir = Math.sign(this._labelPosition);
+        // if (labelDir === 1) then don't perform relatively expensive label.getBoundingClientRect call
+        if (labelDir !== 1) {
+            const labelWidth = this._label.getBoundingClientRect().width;
+            if (this._curLabelWidth !== labelWidth) {
+                this._curLabelWidth = labelWidth;
+                needsUpdate = true;
+            }
+        }
+        if (needsUpdate) {
+            this._updateWithCurWidths();
+        }
+    }
+
+    /**
+     * @private
+     */
+    _updatePosition() {
+        if (this._curMarkerWidth === undefined) {
+            this._updateIfWidthsChanged();
+        } else {
+            // Update position with cached width values
+            // and postpone expensive Annotation's getBoundingClientRect calls
+            // so they don't interfere with e.g. interactive scene manipulation
+            this._updateWithCurWidths();
+            window.clearTimeout(this._widthTimeout);
+            this._widthTimeout = window.setTimeout(() => this._updateIfWidthsChanged(), 500);
+        }
+    }
+
     /**
      * @private
      */

package/src/plugins/CityJSONLoaderPlugin/CityJSONLoaderPlugin.js

@@ -1,7 +1,7 @@
 import {math, Plugin, SceneModel, utils} from "../../viewer/index.js";
 import {CityJSONDefaultDataSource} from "./CityJSONDefaultDataSource.js";
 
-import {earcut} from '../lib/earcut.js';
+import earcut from '../../viewer/scene/libs/earcut.js';
 
 const tempVec2a = math.vec2();
 const tempVec3a = math.vec3();

package/src/plugins/GLTFLoaderPlugin/GLTFSceneModelLoader.js

@@ -4,7 +4,7 @@ import {core} from "../../viewer/scene/core.js";
 import {sRGBEncoding} from "../../viewer/scene/constants/constants.js";
 import {worldToRTCPositions} from "../../viewer/scene/math/rtcCoords.js";
 import {parse} from '@loaders.gl/core';
-import {GLTFLoader} from '@loaders.gl/gltf/dist/esm/gltf-loader.js';
+import {GLTFLoader, postProcessGLTF} from '@loaders.gl/gltf';
 
 import {
     ClampToEdgeWrapping,
@@ -104,6 +104,7 @@ function parseGLTF(plugin, src, gltf, metaModelJSON, options, sceneModel, ok) {
     parse(gltf, GLTFLoader, {
         baseUri: options.basePath
     }).then((gltfData) => {
+        const processedGLTF = postProcessGLTF(gltfData);
         const ctx = {
             src: src,
             entityId: options.entityId,
@@ -115,7 +116,7 @@ function parseGLTF(plugin, src, gltf, metaModelJSON, options, sceneModel, ok) {
             basePath: options.basePath,
             handlenode: options.handlenode,
             backfaces: !!options.backfaces,
-            gltfData: gltfData,
+            gltfData: processedGLTF,
             scene: sceneModel.scene,
             plugin: plugin,
             sceneModel: sceneModel,

package/src/plugins/LASLoaderPlugin/LASLoaderPlugin.js

@@ -4,7 +4,7 @@ import {Plugin} from "../../viewer/Plugin.js";
 import {LASDefaultDataSource} from "./LASDefaultDataSource.js";
 import {math} from "../../viewer/index.js";
 import {parse} from '@loaders.gl/core';
-import {LASLoader} from '@loaders.gl/las/dist/esm/las-loader.js';
+import {LASLoader} from '@loaders.gl/las';
 import {loadLASHeader} from "./loadLASHeader";
 
 const MAX_VERTICES = 500000; // TODO: Rough estimate

package/src/plugins/SectionPlanesPlugin/Control.js

@@ -132,15 +132,13 @@ class Control {
         });
 
         const handlers = { };
-        const addAxis = (rgb, axisDirection, hoopDirection) => {
+        const addAxis = (rgb, hoopRot) => {
+            const axisDirection = math.mulVec3Scalar(rgb, -1, math.vec3());
             const material = colorMaterial(rgb);
 
-            const rotateToHorizontal = math.rotationMat4v(270 * math.DEGTORAD, [1, 0, 0], math.identityMat4());
-            const hoopRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], hoopDirection), math.identityMat4());
-            const hoopMatrix = math.mulMat4(hoopRotation, rotateToHorizontal, math.identityMat4());
-
+            const hoopMatrix = math.quaternionToRotationMat4(hoopRot, math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), hoopMatrix, hoopMatrix);
             const scale = math.scaleMat4v([0.6, 0.6, 0.6], math.identityMat4());
-
             const scaledArrowMatrix = (t, matR) => {
                 const matT = math.translateMat4v(t, math.identityMat4());
                 const ret = math.identityMat4();
@@ -209,7 +207,8 @@ class Control {
             }), NO_STATE_INHERIT);
 
 
-            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], axisDirection), math.identityMat4());
+            const axisRotation = math.quaternionToRotationMat4(math.vec3PairToQuaternion([ 0, 1, 0 ], rgb), math.identityMat4());
+            math.mulMat4(math.rotationMat4v(Math.PI, [0,1,0], math.mat4()), axisRotation, axisRotation);
 
             const translatedAxisMatrix = (yOffset) => math.mulMat4(axisRotation, math.translateMat4c(0, yOffset, 0, math.identityMat4()), math.identityMat4());
             const arrowMatrix = translatedAxisMatrix(arrowLength + .1);
@@ -338,7 +337,7 @@ class Control {
                         rootNode.rotate(rgb, (rotation - lastRotation) * 180 / Math.PI);
                         if (this._sectionPlane) {
                             ignoreNextSectionPlaneDirUpdate = true;
-                            this._sectionPlane.dir = math.vec3ApplyQuaternion(rootNode.quaternion, [0, 0, 1], tempVec3);
+                            this._sectionPlane.quaternion = rootNode.quaternion;
                         }
                         lastRotation = rotation;
                     };
@@ -452,9 +451,9 @@ class Control {
             //
             //----------------------------------------------------------------------------------------------------------
 
-            addAxis([1,0,0], [ 1,  0,  0 ], [ 1, 0,  0 ]),
-            addAxis([0,1,0], [ 0, -1,  0 ], [ 0, 1,  0 ]),
-            addAxis([0,0,1], [ 0,  0, -1 ], [ 0, 0, -1 ])
+            addAxis([1,0,0], math.vec3PairToQuaternion([1,0,0], [0,0,1])),
+            addAxis([0,1,0], math.eulerToQuaternion([90,0,0], "XYZ")),
+            addAxis([0,0,1], math.identityQuaternion())
         ];
 
         const cleanups = [ ];
@@ -592,7 +591,7 @@ class Control {
             this.id = sectionPlane.id;
             this._sectionPlane = sectionPlane;
             const setPosFromSectionPlane = () => setPos(sectionPlane.pos);
-            const setDirFromSectionPlane = () => rootNode.quaternion = math.vec3PairToQuaternion(zeroVec, sectionPlane.dir, quat);
+            const setDirFromSectionPlane = () => rootNode.quaternion = sectionPlane.quaternion;
             setPosFromSectionPlane();
             setDirFromSectionPlane();
             const onSectionPlanePos = sectionPlane.on("pos", setPosFromSectionPlane);

package/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js

@@ -16,6 +16,7 @@ import {ParserV8} from "./parsers/ParserV8.js";
 import {ParserV9} from "./parsers/ParserV9.js";
 import {ParserV10} from "./parsers/ParserV10.js";
 import {ParserV11} from "./parsers/ParserV11.js";
+import {ParserV12} from './parsers/ParserV12.js';
 
 
 const parsers = {};
@@ -31,6 +32,7 @@ parsers[ParserV8.version] = ParserV8;
 parsers[ParserV9.version] = ParserV9;
 parsers[ParserV10.version] = ParserV10;
 parsers[ParserV11.version] = ParserV11;
+parsers[ParserV12.version] = ParserV12;
 
 /**
  * {@link Viewer} plugin that loads models from xeokit's optimized *````.XKT````* format.
@@ -253,6 +255,20 @@ parsers[ParserV11.version] = ParserV11;
  * });
  * ````
  *
+ * # Including specific elements by id
+ *
+ * We can also load only those objects that have the specified ids.
+ *
+ * In the example below, we'll load only the objects that represent a specified wall with 4 windows.
+ *
+ * ````javascript
+ * const model4 = xktLoader.load({
+ *      id: "myModel4",
+ *      src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
+ *      includeIds: ["2O2Fr$t4X7Zf8NOew3FLOH", "1hOSvn6df7F8_7GcBWlS_W", "1hOSvn6df7F8_7GcBWlS4Q", "1hOSvn6df7F8_7GcBWlS1M", "1hOSvn6df7F8_7GcBWlS2V"],
+ * });
+ * ````
+ *
  * # Configuring initial IFC object appearances
  *
  * We can specify the custom initial appearance of loaded objects according to their IFC types.
@@ -747,6 +763,34 @@ class XKTLoaderPlugin extends Plugin {
         this._excludeTypes = value;
     }
 
+    /**
+     * Gets the whitelist of the specified elements loaded by this XKTLoaderPlugin.
+     *
+     * When loading models with metadata, causes this XKTLoaderPlugin to only load objects whose ids are in this
+     * list. An object's id is indicated by its {@link MetaObject}'s {@link MetaObject#id}.
+     *
+     * Default value is ````undefined````.
+     *
+     * @type {String[]}
+     */
+    get includeIds() {
+        return this._includeIds;
+    }
+
+    /**
+     * Sets the whitelist of the specified elements by this XKTLoaderPlugin.
+     *
+     * When loading models with metadata, causes this XKTLoaderPlugin to only load objects whose ids are in this
+     * list. An object's id is indicated by its {@link MetaObject}'s {@link MetaObject#id}.
+     *
+     * Default value is ````undefined````.
+     *
+     * @type {String[]}
+     */
+    set includeIds(value) {
+        this._includeIds = value;
+    }
+
     /**
      * Gets whether we load objects that don't have IFC types.
      *
@@ -859,6 +903,7 @@ class XKTLoaderPlugin extends Plugin {
      * @param {{String:Object}} [params.objectDefaults] Map of initial default states for each loaded {@link Entity} that represents an object. Default value is {@link IFCObjectDefaults}.
      * @param {String[]} [params.includeTypes] When loading metadata, only loads objects that have {@link MetaObject}s with {@link MetaObject#type} values in this list.
      * @param {String[]} [params.excludeTypes] When loading metadata, never loads objects that have {@link MetaObject}s with {@link MetaObject#type} values in this list.
+     * @param {String[]} [params.includeIds] When loading metadata, only loads objects that have {@link MetaObject}s with {@link MetaObject#id} values in this list.
      * @param {Boolean} [params.edges=false] Whether or not xeokit renders the model with edges emphasized.
      * @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.
@@ -900,6 +945,7 @@ class XKTLoaderPlugin extends Plugin {
         const options = {};
         const includeTypes = params.includeTypes || this._includeTypes;
         const excludeTypes = params.excludeTypes || this._excludeTypes;
+        const includeIds = params.includeIds || this._includeIds;
         const objectDefaults = params.objectDefaults || this._objectDefaults;
 
         options.reuseGeometries = (params.reuseGeometries !== null && params.reuseGeometries !== undefined) ? params.reuseGeometries : (this._reuseGeometries !== false);
@@ -918,6 +964,13 @@ class XKTLoaderPlugin extends Plugin {
             }
         }
 
+        if (includeIds) {
+            options.includeIdsMap = {};
+            for (let i = 0, len = includeIds.length; i < len; i++) {
+                options.includeIdsMap[includeIds[i]] = true;
+            }
+        }
+
         if (objectDefaults) {
             options.objectDefaults = objectDefaults;
         }
@@ -1139,7 +1192,9 @@ class XKTLoaderPlugin extends Plugin {
         }
         const dataView = new DataView(arrayBuffer);
         const dataArray = new Uint8Array(arrayBuffer);
-        const xktVersion = dataView.getUint32(0, true);
+        const firstUint = dataView.getUint32(0, true);
+        const xktVersion = firstUint & 0x7fffffff;
+        const zipped = (xktVersion < 11) || ((xktVersion >= 12) && (firstUint >>> 31));
         const parser = parsers[xktVersion];
         if (!parser) {
             this.error("Unsupported .XKT file version: " + xktVersion + " - this XKTLoaderPlugin supports versions " + Object.keys(parsers));
@@ -1147,7 +1202,7 @@ class XKTLoaderPlugin extends Plugin {
         }
         //   this.log("Loading .xkt V" + xktVersion);
 
-        if (parser.parseArrayBuffer) {
+        if (!zipped) {
             parser.parseArrayBuffer(this.viewer, options, arrayBuffer, sceneModel, metaModel, manifestCtx);
             return;
         }

package/src/plugins/XKTLoaderPlugin/parsers/ParserV10.js

@@ -320,6 +320,12 @@ function load(viewer, options, inflatedData, sceneModel, metaModel, manifestCtx)
                     continue;
                 }
 
+                // Mask loading of object ids
+
+                if (options.includeIdsMap && metaObject.id && (!options.includeIdsMap[metaObject.id])) {
+                    continue;
+                }
+
                 // Get initial property values for object types
 
                 const props = options.objectDefaults ? options.objectDefaults[metaObject.type] || options.objectDefaults["DEFAULT"] : null;

package/src/plugins/XKTLoaderPlugin/parsers/ParserV11.js

@@ -313,6 +313,12 @@ function load(viewer, options, inflatedData, sceneModel, metaModel, manifestCtx)
                     continue;
                 }
 
+                // Mask loading of object ids
+
+                if (options.includeIdsMap && metaObject.id && (!options.includeIdsMap[metaObject.id])) {
+                    continue;
+                }
+
                 // Get initial property values for object types
 
                 const props = options.objectDefaults ? options.objectDefaults[metaObject.type] || options.objectDefaults["DEFAULT"] : null;