@xeokit/xeokit-sdk 2.6.38 → 2.6.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.38",
+  "version": "2.6.41",
   "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/ContextMenu/ContextMenu.js

@@ -642,7 +642,7 @@ class ContextMenu {
                                 '</li>');
                             if (!((groupIdx === groupLen - 1) || (j < lenj - 1))) {
                                 html.push(
-                                    '<li id="' + item.id + '" class="xeokit-context-menu-item-seperator"></li>'
+                                    '<li id="' + item.id + '" class="xeokit-context-menu-item-separator"></li>'
                                 );
                             }
 
@@ -654,7 +654,7 @@ class ContextMenu {
                                 '</li>');
                             if (!((groupIdx === groupLen - 1) || (j < lenj - 1))) {
                                 html.push(
-                                    '<li id="' + item.id + '" class="xeokit-context-menu-item-seperator"></li>'
+                                    '<li id="' + item.id + '" class="xeokit-context-menu-item-separator"></li>'
                                 );
                             }
                         }
@@ -854,12 +854,10 @@ class ContextMenu {
             const shown = getShown(this._context);
             item.shown = shown;
             if (!shown) {
-                itemElement.classList.remove("xeokit-context-menu-item-visible");
-                itemElement.classList.add("xeokit-context-menu-item-hidden");
+                itemElement.style.display = "none";
                 continue;
             } else {
-                itemElement.classList.remove("ceokit-context-menu-item-hidden");
-                itemElement.classList.add("xeokit-context-menu-item-visible");
+                itemElement.style.display = "";
 
             }
             const enabled = getEnabled(this._context);

package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js

@@ -366,6 +366,16 @@ class DistanceMeasurement extends Component {
         const scene = this.plugin.viewer.scene;
 
         if (this._wpDirty) {
+            const delta = math.subVec3(
+                this._targetWorld,
+                this._originWorld,
+                tmpVec3
+            );
+
+            /**
+             * The length detected for each measurement axis.
+             */
+            this._factors = math.transformVec3(this._axesBasis, delta);
 
             this._measurementOrientation = determineMeasurementOrientation(this._originWorld, this._targetWorld, 0);
             if(this._measurementOrientation === 'Vertical' && this.useRotationAdjustment){
@@ -390,16 +400,6 @@ class DistanceMeasurement extends Component {
                 this._wp[15] = 1.0;
             }
             else {
-                const delta = math.subVec3(
-                    this._targetWorld,
-                    this._originWorld,
-                    tmpVec3
-                );
-
-                /**
-                 * The length detected for each measurement axis.
-                 */
-                this._factors = math.transformVec3(this._axesBasis, delta);
 
                 this._wp[0] = this._originWorld[0];
                 this._wp[1] = this._originWorld[1];

package/src/plugins/DotBIMLoaderPlugin/DotBIMLoaderPlugin.js

@@ -16,8 +16,8 @@ import {IFCObjectDefaults} from "../../viewer/metadata/IFCObjectDefaults.js";
  * set ````true```` and will be registered by {@link Entity#id} in {@link Scene#objects}.
  * * When loading, can set the World-space position, scale and rotation of each model within World space,
  * along with initial properties for all the model's {@link Entity}s.
- * * Allows to mask which IFC types we want to load.
- * * Allows to configure initial viewer state for specified IFC types (color, visibility, selection, highlighted, X-rayed, pickable, etc).
+ * * Allows to mask which types we want to load.
+ * * Allows to configure initial viewer state for specified types (color, visibility, selection, highlighted, X-rayed, pickable, etc).
  *
  * ## Usage
  *
@@ -87,9 +87,9 @@ import {IFCObjectDefaults} from "../../viewer/metadata/IFCObjectDefaults.js";
  * });
  * ````
  *
- * ## Including and excluding IFC types
+ * ## Including and excluding types
  *
- * We can also load only those objects that have the specified IFC types. In the example below, we'll load only the
+ * We can also load only those objects that have the specified types. In the example below, we'll load only the
  * objects that represent walls.
  *
  * ````javascript
@@ -100,7 +100,7 @@ import {IFCObjectDefaults} from "../../viewer/metadata/IFCObjectDefaults.js";
  * });
  * ````
  *
- * We can also load only those objects that **don't** have the specified IFC types. In the example below, we'll load only the
+ * We can also load only those objects that **don't** have the specified types. In the example below, we'll load only the
  * objects that do not represent empty space.
  *
  * ````javascript
@@ -111,13 +111,13 @@ import {IFCObjectDefaults} from "../../viewer/metadata/IFCObjectDefaults.js";
  * });
  * ````
  *
- * # Configuring initial IFC object appearances
+ * # Configuring initial object appearances
  *
- * We can specify the custom initial appearance of loaded objects according to their IFC types.
+ * We can specify the custom initial appearance of loaded objects according to their types.
  *
  * This is useful for things like:
  *
- * * setting the colors to our objects according to their IFC types,
+ * * setting the colors to our objects according to their types,
  * * automatically hiding ````IfcSpace```` objects, and
  * * ensuring that ````IfcWindow```` objects are always transparent.
  * <br>
@@ -149,7 +149,7 @@ import {IFCObjectDefaults} from "../../viewer/metadata/IFCObjectDefaults.js";
  * });
  * ````
  *
- * When we don't customize the appearance of IFC types, as just above, then IfcSpace elements tend to obscure other
+ * When we don't customize the appearance of types, as just above, then IfcSpace elements tend to obscure other
  * elements, which can be confusing.
  *
  * It's often helpful to make IfcSpaces transparent and unpickable, like this:
@@ -349,36 +349,36 @@ export class DotBIMLoaderPlugin extends Plugin {
 
             const dbMeshLoaded = {};
 
-            const ifcProjectId = math.createUUID();
-            const ifcSiteId = math.createUUID();
-            const ifcBuildingId = math.createUUID();
-            const ifcBuildingStoryId = math.createUUID();
+            const projectId = math.createUUID();
+            const siteId = math.createUUID();
+            const buildingId = math.createUUID();
+            const buildingStoryId = math.createUUID();
 
             const metaModelData = {
                 metaObjects: [
                     {
-                        id: ifcProjectId,
-                        name: "IfcProject",
-                        type: "IfcProject",
+                        id: projectId,
+                        name: "Project",
+                        type: "Project",
                         parent: null
                     },
                     {
-                        id: ifcSiteId,
-                        name: "IfcSite",
-                        type: "IfcSite",
-                        parent: ifcProjectId
+                        id: siteId,
+                        name: "Site",
+                        type: "Site",
+                        parent: projectId
                     },
                     {
-                        id: ifcBuildingId,
-                        name: "IfcBuilding",
-                        type: "IfcBuilding",
-                        parent: ifcSiteId
+                        id: buildingId,
+                        name: "Building",
+                        type: "Building",
+                        parent: siteId
                     },
                     {
-                        id: ifcBuildingStoryId,
-                        name: "IfcBuildingStorey",
-                        type: "IfcBuildingStorey",
-                        parent: ifcBuildingId
+                        id: buildingStoryId,
+                        name: "BuildingStorey",
+                        type: "BuildingStorey",
+                        parent: buildingId
                     }
                 ],
                 propertySets: []
@@ -545,30 +545,23 @@ export class DotBIMLoaderPlugin extends Plugin {
                     });
                 }
 
+                let properties = [];
                 for (let infoKey in info) {
-                    let properties;
-                    if (infoKey.startsWith("IFC_Pset_")) {
-                        if (!properties) {
-                            properties = [];
-                        }
-                        properties.push({
-                            name: infoKey,
-                            value: info[infoKey]
-                        });
-                    }
-                    if (properties) {
-                        metaModelData.propertySets.push({
-                            id: objectId,
-                            properties
-                        });
-                    }
+                    properties.push({
+                        name: infoKey,
+                        value: info[infoKey]
+                    });
                 }
+                metaModelData.propertySets.push({
+                    id: objectId,
+                    properties
+                });
 
                 metaModelData.metaObjects.push({
                     id: objectId,
                     name: info && info.Name && info.Name !== "None" ? info.Name : `${element.type} ${objectId}`,
                     type: element.type,
-                    parent: ifcBuildingStoryId,
+                    parent: buildingStoryId,
                     propertySetIds: [objectId]
                 });
             }

package/src/plugins/GLTFLoaderPlugin/GLTFDefaultDataSource.js

@@ -9,6 +9,12 @@ import {core} from "../../viewer/scene/core.js";
 class GLTFDefaultDataSource {
 
     constructor(cfg = {}) {
+
+        /**
+         * Set `true` to enable cache busting for HTTP GETs.
+         * This is `true` by default.
+         * @type {boolean}
+         */
         this.cacheBuster = (cfg.cacheBuster !== false);
     }
 

package/src/plugins/TreeViewPlugin/RenderService.js

@@ -135,12 +135,15 @@ export class RenderService {
     return element.checked;
   }
 
-  setCheckbox(nodeId, checked) {
+  setCheckbox(nodeId, checked, indeterminate = false) {
     const checkbox = document.getElementById(`checkbox-${nodeId}`);
     if (checkbox) {
       if (checked !== checkbox.checked) {
         checkbox.checked = checked;
       }
+      if (indeterminate !== checkbox.indeterminate) {
+        checkbox.indeterminate = indeterminate;
+      }
     }
   }
 

package/src/plugins/TreeViewPlugin/TreeViewPlugin.js

@@ -361,6 +361,7 @@ export class TreeViewPlugin extends Plugin {
      * vertical World axis. For all hierarchy types, other node types will be ordered in the ascending alphanumeric order of their titles.
      * @param {Boolean} [cfg.pruneEmptyNodes=true] When true, will not contain nodes that don't have content in the {@link Scene}. These are nodes whose {@link MetaObject}s don't have {@link Entity}s.
      * @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
      */
     constructor(viewer, cfg = {}) {
 
@@ -412,6 +413,7 @@ export class TreeViewPlugin extends Plugin {
         this._pruneEmptyNodes = cfg.pruneEmptyNodes;
         this._showListItemElementId = null;
         this._renderService = cfg.renderService || new RenderService();
+        this._showIndeterminate = cfg.showIndeterminate ?? false;
 
         if (!this._renderService) {
             throw new Error('TreeViewPlugin: no render service set');
@@ -453,8 +455,10 @@ export class TreeViewPlugin extends Plugin {
                 } else {
                     parent.numVisibleEntities--;
                 }
-
-                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0));
+                const indeterminate = this._showIndeterminate 
+                  && parent.numVisibleEntities > 0 
+                  && parent.numVisibleEntities < parent.numEntities;
+                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0), indeterminate);
 
                 parent = parent.parent;
             }
@@ -536,8 +540,10 @@ export class TreeViewPlugin extends Plugin {
                 } else {
                     parent.numVisibleEntities -= numUpdated;
                 }
-
-                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0));
+                const indeterminate = this._showIndeterminate 
+                  && parent.numVisibleEntities > 0 
+                  && parent.numVisibleEntities < parent.numEntities;
+                this._renderService.setCheckbox(parent.nodeId, (parent.numVisibleEntities > 0), indeterminate);
                 
                 parent = parent.parent;
             }
@@ -695,6 +701,8 @@ export class TreeViewPlugin extends Plugin {
             return; // Node may not exist for the given object if (this._pruneEmptyNodes == true)
         }
 
+        this.collapse();
+
         const nodeId = node.nodeId;
 
         const switchElement = this._renderService.getSwitchElement(nodeId);
@@ -777,8 +785,8 @@ export class TreeViewPlugin extends Plugin {
     collapse() {
         for (let i = 0, len = this._rootNodes.length; i < len; i++) {
             const rootNode = this._rootNodes[i];
-            const objectId = rootNode.objectId;
-            this._collapseNode(objectId);
+            const nodeId = rootNode.nodeId;
+            this._collapseNode(nodeId);
         }
     }
 

package/src/plugins/ZonesPlugin/ZonesPlugin.js

@@ -408,122 +408,6 @@ const mousePointSelector = function(viewer, ray2WorldPos) {
     };
 };
 
-const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
-    return function(onCancel, onChange, onCommit) {
-        const scene = viewer.scene;
-        const canvas = scene.canvas.canvas;
-        const longTouchTimeoutMs = 300;
-        const moveTolerance = 20;
-
-        const copyCanvasPos = (event, vec2) => {
-            vec2[0] = event.clientX;
-            vec2[1] = event.clientY;
-            transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
-            return vec2;
-        };
-
-        const pickWorldPos = canvasPos => {
-            const origin = math.vec3();
-            const direction = math.vec3();
-            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, origin, direction);
-            return ray2WorldPos(origin, direction);
-        };
-
-        let longTouchTimeout = null;
-        const nop = () => { };
-        let onSingleTouchMove = nop;
-        let startTouchIdentifier;
-
-        const resetAction = function() {
-            pointerCircle.stop();
-            clearTimeout(longTouchTimeout);
-            viewer.cameraControl.active = true;
-            onSingleTouchMove = nop;
-            startTouchIdentifier = null;
-        };
-
-        const cleanup = function() {
-            resetAction();
-            canvas.removeEventListener("touchstart", onCanvasTouchStart);
-            canvas.removeEventListener("touchmove",  onCanvasTouchMove);
-            canvas.removeEventListener("touchend",   onCanvasTouchEnd);
-        };
-
-        const onCanvasTouchStart = function(event) {
-            const touches = event.touches;
-
-            if (touches.length !== 1)
-            {
-                resetAction();
-                onCancel();
-            }
-            else
-            {
-                const startTouch = touches[0];
-                const startCanvasPos = copyCanvasPos(startTouch, math.vec2());
-
-                const startWorldPos = pickWorldPos(startCanvasPos);
-                if (startWorldPos)
-                {
-                    startTouchIdentifier = startTouch.identifier;
-
-                    onSingleTouchMove = canvasPos => {
-                        if (math.distVec2(startCanvasPos, canvasPos) > moveTolerance)
-                        {
-                            resetAction();
-                        }
-                    };
-
-                    longTouchTimeout = setTimeout(
-                        function() {
-                            pointerCircle.start(startCanvasPos);
-
-                            longTouchTimeout = setTimeout(
-                                function() {
-                                    pointerCircle.stop();
-
-                                    viewer.cameraControl.active = false;
-
-                                    onSingleTouchMove = canvasPos => {
-                                        onChange(canvasPos, pickWorldPos(canvasPos));
-                                    };
-
-                                    onSingleTouchMove(startCanvasPos);
-                                },
-                                longTouchTimeoutMs);
-                        },
-                        250);
-                }
-            }
-        };
-        canvas.addEventListener("touchstart", onCanvasTouchStart, {passive: true});
-
-        // canvas.addEventListener("touchcancel", e => console.log("touchcancel", e), {passive: true});
-
-        const onCanvasTouchMove = function(event) {
-            const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
-            if (touch)
-            {
-                onSingleTouchMove(copyCanvasPos(touch, math.vec2()));
-            }
-        };
-        canvas.addEventListener("touchmove", onCanvasTouchMove, {passive: true});
-
-        const onCanvasTouchEnd = function(event) {
-            const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
-            if (touch)
-            {
-                cleanup();
-                const canvasPos = copyCanvasPos(touch, math.vec2());
-                onCommit(canvasPos, pickWorldPos(canvasPos));
-            }
-        };
-        canvas.addEventListener("touchend", onCanvasTouchEnd, {passive: true});
-
-        return cleanup;
-    };
-};
-
 const planeIntersect = function(p0, n, origin, direction) {
     const t = - (math.dotVec3(origin, n) - p0) / math.dotVec3(direction, n);
     if (false) // (t < 0)

package/src/plugins/index.js

@@ -21,3 +21,4 @@ export * from "./LASLoaderPlugin/index.js";
 export * from "./CityJSONLoaderPlugin/index.js";
 export * from "./DotBIMLoaderPlugin/index.js";
 export * from "./ZonesPlugin/index.js";
+export * from "./lib/ui/index.js";

package/src/plugins/lib/ui/index.js

@@ -284,3 +284,119 @@ export function activateDraggableDots(cfg) {
         updatePointerLens(null);
     };
 }
+
+export const touchPointSelector = function(viewer, pointerCircle, ray2WorldPos) {
+    return function(onCancel, onChange, onCommit) {
+        const scene = viewer.scene;
+        const canvas = scene.canvas.canvas;
+        const longTouchTimeoutMs = 300;
+        const moveTolerance = 20;
+
+        const copyCanvasPos = (event, vec2) => {
+            vec2[0] = event.clientX;
+            vec2[1] = event.clientY;
+            transformToNode(canvas.ownerDocument.documentElement, canvas, vec2);
+            return vec2;
+        };
+
+        const pickWorldPos = canvasPos => {
+            const origin = math.vec3();
+            const direction = math.vec3();
+            math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, scene.camera.projection, canvasPos, origin, direction);
+            return ray2WorldPos(origin, direction);
+        };
+
+        let longTouchTimeout = null;
+        const nop = () => { };
+        let onSingleTouchMove = nop;
+        let startTouchIdentifier;
+
+        const resetAction = function() {
+            pointerCircle.stop();
+            clearTimeout(longTouchTimeout);
+            viewer.cameraControl.active = true;
+            onSingleTouchMove = nop;
+            startTouchIdentifier = null;
+        };
+
+        const cleanup = function() {
+            resetAction();
+            canvas.removeEventListener("touchstart", onCanvasTouchStart);
+            canvas.removeEventListener("touchmove",  onCanvasTouchMove);
+            canvas.removeEventListener("touchend",   onCanvasTouchEnd);
+        };
+
+        const onCanvasTouchStart = function(event) {
+            const touches = event.touches;
+
+            if (touches.length !== 1)
+            {
+                resetAction();
+                onCancel();
+            }
+            else
+            {
+                const startTouch = touches[0];
+                const startCanvasPos = copyCanvasPos(startTouch, math.vec2());
+
+                const startWorldPos = pickWorldPos(startCanvasPos);
+                if (startWorldPos)
+                {
+                    startTouchIdentifier = startTouch.identifier;
+
+                    onSingleTouchMove = canvasPos => {
+                        if (math.distVec2(startCanvasPos, canvasPos) > moveTolerance)
+                        {
+                            resetAction();
+                        }
+                    };
+
+                    longTouchTimeout = setTimeout(
+                        function() {
+                            pointerCircle.start(startCanvasPos);
+
+                            longTouchTimeout = setTimeout(
+                                function() {
+                                    pointerCircle.stop();
+
+                                    viewer.cameraControl.active = false;
+
+                                    onSingleTouchMove = canvasPos => {
+                                        onChange(canvasPos, pickWorldPos(canvasPos));
+                                    };
+
+                                    onSingleTouchMove(startCanvasPos);
+                                },
+                                longTouchTimeoutMs);
+                        },
+                        250);
+                }
+            }
+        };
+        canvas.addEventListener("touchstart", onCanvasTouchStart, {passive: true});
+
+        // canvas.addEventListener("touchcancel", e => console.log("touchcancel", e), {passive: true});
+
+        const onCanvasTouchMove = function(event) {
+            const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+            if (touch)
+            {
+                onSingleTouchMove(copyCanvasPos(touch, math.vec2()));
+            }
+        };
+        canvas.addEventListener("touchmove", onCanvasTouchMove, {passive: true});
+
+        const onCanvasTouchEnd = function(event) {
+            const touch = [...event.changedTouches].find(e => e.identifier === startTouchIdentifier);
+            if (touch)
+            {
+                cleanup();
+                const canvasPos = copyCanvasPos(touch, math.vec2());
+                onCommit(canvasPos, pickWorldPos(canvasPos));
+            }
+        };
+        canvas.addEventListener("touchend", onCanvasTouchEnd, {passive: true});
+
+        return cleanup;
+    };
+};

package/src/viewer/scene/model/SceneModel.js

@@ -2505,7 +2505,21 @@ export class SceneModel extends Component {
         if (cfg.image) { // Ignore transcoder for Images
             const image = cfg.image;
             image.crossOrigin = "Anonymous";
-            texture.setImage(image, {minFilter, magFilter, wrapS, wrapT, wrapR, flipY: cfg.flipY, encoding});
+            if (image.compressed) {
+                // see `parsedImage` in @loaders.gl/gltf/src/lib/parsers/parse-gltf.ts
+                // NOTE: @loaders.gl in its current version discards potential mipmaps, leaving only a single one
+                const data = image.data;
+                texture.setCompressedData({
+                    mipmaps: data,
+                    props: {
+                        format: data[0].format,
+                        minFilter: minFilter,
+                        magFilter: magFilter
+                    }
+                });
+            } else {
+                texture.setImage(image, {minFilter, magFilter, wrapS, wrapT, wrapR, flipY: cfg.flipY, encoding});
+            }
         } else if (cfg.src) {
             const ext = cfg.src.split('.').pop();
             switch (ext) { // Don't transcode recognized image file types

package/src/viewer/scene/model/vbo/batching/triangles/VBOBatchingTrianglesBuffer.js

@@ -7,9 +7,9 @@ const configs = new Configs();
  */
 export class VBOBatchingTrianglesBuffer {
 
-    constructor() {
-        this.maxVerts = configs.maxGeometryBatchSize;
-        this.maxIndices = configs.maxGeometryBatchSize * 3; // Rough rule-of-thumb
+    constructor(maxBatchSize = configs.maxGeometryBatchSize) {
+        this.maxVerts = maxBatchSize;
+        this.maxIndices = maxBatchSize * 3; // Rough rule-of-thumb
         this.positions = [];
         this.colors = [];
         this.uv = [];

package/types/plugins/FastNavPlugin/FastNavPlugin.d.ts

@@ -4,6 +4,8 @@ import { Viewer } from "../../viewer/Viewer";
 export declare type FastNavPluginConfiguration = {
   /** Optional ID for this plugin, so that we can find it within {@link Viewer.plugins}. */
   id?: string;
+  /** Whether to temporarily hide color textures whenever we interact with the Viewer. */
+  hideColorTexture?: boolean;
   /** Whether to temporarily hide physically-based rendering (PBR) whenever we interact with the Viewer. */
   hidePBR?: boolean;
   /** Whether to temporarily hide scalable ambient occlusion (SAO) whenever we interact with the Viewer. */

package/types/plugins/TreeViewPlugin/TreeViewPlugin.d.ts

@@ -19,6 +19,8 @@ export declare type TreeViewPluginConfiguration = {
   pruneEmptyNodes?: boolean;
   /** Optional {@link ITreeViewRenderService} to use. Defaults to the {@link TreeViewPlugin}'s default {@link RenderService}. */
   renderService?: ITreeViewRenderService;
+  /** When true, will show indeterminate state for checkboxes when some but not all child nodes are checked */
+  showIndeterminate?: boolean;
 };
 
 /**