@xeokit/xeokit-sdk 2.6.60 → 2.6.62

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@xeokit/xeokit-sdk",
-  "version": "2.6.60",
+  "version": "2.6.62",
   "description": "Web Programming Toolkit for 3D/2D BIM and AEC Graphics",
   "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",

package/src/extras/ContextMenu/ContextMenu.js

@@ -738,12 +738,19 @@ class ContextMenu {
                             const menuRect = subMenuElement.getBoundingClientRect();
 
                             const subMenuWidth = 200; // TODO
-                            const showOnLeft = ((itemRect.right + subMenuWidth) > window.innerWidth);
+                            const showOnRight = (itemRect.right + subMenuWidth) < window.innerWidth;
+                            const showOnLeft = (itemRect.left - subMenuWidth) > 0;
 
-                            if (showOnLeft) {
-                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth, itemRect.top - 1);
-                            } else {
+                            if(showOnRight)
                                 self._showMenu(subMenu.id, itemRect.right - 5, itemRect.top - 1);
+                            else if (showOnLeft)
+                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth, itemRect.top - 1);
+                            else {
+                                const spaceOnLeft = itemRect.left, spaceOnRight = window.innerWidth - itemRect.right;
+                                if(spaceOnRight > spaceOnLeft) 
+                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top - 1);
+                                else 
+                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top - 1);
                             }
 
                             lastSubMenu = subMenu;

package/src/plugins/AnnotationsPlugin/Annotation.js

@@ -46,10 +46,10 @@ class Annotation extends Marker {
             this._marker.addEventListener("click", this._onMouseClickedExternalMarker = () => {
                 this.plugin.fire("markerClicked", this);
             });
-            this._onContextMenuExtenalMarker = () => {
+            this._onContextMenuExternalMarker = () => {
                 this.plugin.fire("contextmenu", this);
             }
-            this._onContextMenuExtenalMarkerRemover = addContextMenuListener(this._markerHTML, this._onContextMenuExtenalMarker);
+            this._onContextMenuExternalMarkerRemover = addContextMenuListener(this._marker, this._onContextMenuExternalMarker);
             this._marker.addEventListener("mouseenter", this._onMouseEnterExternalMarker = () => {
                 this.plugin.fire("markerMouseEnter", this);
             });
@@ -420,7 +420,7 @@ class Annotation extends Marker {
                 this._marker = null;
             } else {
                 this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
-                this._onContextMenuExtenalMarkerRemover();
+                this._onContextMenuExternalMarkerRemover();
                 this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
                 this._marker.removeEventListener("mouseleave", this._onMouseLeaveExternalMarker);
                 this._marker = null;

package/src/plugins/FastNavPlugin/FastNavPlugin.js

@@ -119,7 +119,7 @@ class FastNavPlugin extends Plugin {
         this._hideEdges = cfg.hideEdges !== false;
         this._hideTransparentObjects = !!cfg.hideTransparentObjects;
         this._scaleCanvasResolution = !!cfg.scaleCanvasResolution;
-        this._defaultScaleCanvasResolutionFactor = cfg.defaultScaleCanvasResolutionFactor || 1.0;
+        this._defaultScaleCanvasResolutionFactor = cfg.defaultScaleCanvasResolutionFactor;
         this._scaleCanvasResolutionFactor = cfg.scaleCanvasResolutionFactor || 0.6;
         this._delayBeforeRestore = (cfg.delayBeforeRestore !== false);
         this._delayBeforeRestoreSeconds = cfg.delayBeforeRestoreSeconds || 0.5;
@@ -135,6 +135,7 @@ class FastNavPlugin extends Plugin {
                 viewer.scene._renderer.setSAOEnabled(!this._hideSAO);
                 viewer.scene._renderer.setTransparentEnabled(!this._hideTransparentObjects);
                 viewer.scene._renderer.setEdgesEnabled(!this._hideEdges);
+                this._originalCanvasResolutionScale = viewer.scene.canvas.resolutionScale;
                 if (this._scaleCanvasResolution) {
                     viewer.scene.canvas.resolutionScale = this._scaleCanvasResolutionFactor;
                 } else {
@@ -145,7 +146,7 @@ class FastNavPlugin extends Plugin {
         };
 
         const switchToHighQuality = () => {
-            viewer.scene.canvas.resolutionScale = this._defaultScaleCanvasResolutionFactor;
+            viewer.scene.canvas.resolutionScale = this._defaultScaleCanvasResolutionFactor || this._originalCanvasResolutionScale || 1.0;
             viewer.scene._renderer.setEdgesEnabled(true);
             viewer.scene._renderer.setColorTextureEnabled(true);
             viewer.scene._renderer.setPBREnabled(true);
@@ -350,7 +351,7 @@ class FastNavPlugin extends Plugin {
      * @param {Number} defaultScaleCanvasResolutionFactor Factor by scale canvas resolution when we stop interacting with the viewer.
      */
     set defaultScaleCanvasResolutionFactor(defaultScaleCanvasResolutionFactor) {
-        this._defaultScaleCanvasResolutionFactor = defaultScaleCanvasResolutionFactor || 1.0;
+        this._defaultScaleCanvasResolutionFactor = defaultScaleCanvasResolutionFactor;
     }
 
     /**

package/src/plugins/TreeViewPlugin/TreeViewPlugin.js

@@ -362,6 +362,7 @@ export class TreeViewPlugin extends Plugin {
      * @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
+     * @param {Boolean} [cfg.showProjectNode=false] When true, will show top level project node when hierarchy is set to "storeys"
      */
     constructor(viewer, cfg = {}) {
 
@@ -414,6 +415,7 @@ export class TreeViewPlugin extends Plugin {
         this._showListItemElementId = null;
         this._renderService = cfg.renderService || new RenderService();
         this._showIndeterminate = cfg.showIndeterminate ?? false;
+        this._showProjectNode = cfg.showProjectNode ?? false;
 
         if (!this._renderService) {
             throw new Error('TreeViewPlugin: no render service set');
@@ -968,11 +970,11 @@ export class TreeViewPlugin extends Plugin {
     _createStoreysNodes() {
         const rootMetaObjects = this._viewer.metaScene.rootMetaObjects;
         for (let id in rootMetaObjects) {
-            this._createStoreysNodes2(rootMetaObjects[id], null, null, null);
+            this._createStoreysNodes2(rootMetaObjects[id], null, null, null, null);
         }
     }
 
-    _createStoreysNodes2(metaObject, buildingNode, storeyNode, typeNodes) {
+    _createStoreysNodes2(metaObject, projectNode, buildingNode, storeyNode, typeNodes) {
         if (this._pruneEmptyNodes && (metaObject._countEntities === 0)) {
             return;
         }
@@ -980,20 +982,41 @@ export class TreeViewPlugin extends Plugin {
         const metaObjectName = metaObject.name;
         const children = metaObject.children;
         const objectId = metaObject.id;
-        if (metaObjectType === "IfcBuilding") {
+
+        if (this._showProjectNode && metaObjectType === 'IfcProject') {
+            projectNode = {
+                nodeId: `${this._id}-${objectId}`,
+                objectId,
+                title: (metaObject.metaModels.length === 0) ? metaObjectName : this._rootNames[metaObject.metaModels[0].id] || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
+                type: metaObjectType,
+                parent: null,
+                numEntities: 0,
+                numVisibleEntities: 0,
+                checked: false,
+                xrayed: false,
+                children: [],
+            };
+            this._rootNodes.push(projectNode);
+            this._objectNodes[projectNode.objectId] = projectNode;
+            this._nodeNodes[projectNode.nodeId] = projectNode;
+        } else if (metaObjectType === "IfcBuilding") {
             buildingNode = {
                 nodeId: `${this._id}-${objectId}`,
                 objectId: objectId,
                 title: (metaObject.metaModels.length === 0) ? metaObjectName : this._rootNames[metaObject.metaModels[0].id] || ((metaObjectName && metaObjectName !== "" && metaObjectName !== "Undefined" && metaObjectName !== "Default") ? metaObjectName : metaObjectType),
                 type: metaObjectType,
-                parent: null,
+                parent: projectNode,
                 numEntities: 0,
                 numVisibleEntities: 0,
                 checked: false,
                 xrayed: false,
                 children: []
             };
-            this._rootNodes.push(buildingNode);
+            if (projectNode) {
+                projectNode.children.push(buildingNode);
+            } else {
+                this._rootNodes.push(buildingNode);
+            }
             this._objectNodes[buildingNode.objectId] = buildingNode;
             this._nodeNodes[buildingNode.nodeId] = buildingNode;
         } else if (metaObjectType === "IfcBuildingStorey") {
@@ -1063,7 +1086,7 @@ export class TreeViewPlugin extends Plugin {
         if (children) {
             for (let i = 0, len = children.length; i < len; i++) {
                 const childMetaObject = children[i];
-                this._createStoreysNodes2(childMetaObject, buildingNode, storeyNode, typeNodes);
+                this._createStoreysNodes2(childMetaObject, projectNode, buildingNode, storeyNode, typeNodes);
             }
         }
     }

package/src/plugins/ZonesPlugin/ZonesPlugin.js

@@ -482,8 +482,21 @@ class Zone extends Component {
         }
 
 
-        const positions = [].concat(...pos);
+        const min = idx => Math.min(...pos.map(p => p[idx]));
+        const max = idx => Math.max(...pos.map(p => p[idx]));
+
+        const xmin = min(0);
+        const ymin = min(1);
+        const zmin = min(2);
+        const xmax = max(0);
+        const ymax = max(1);
+        const zmax = max(2);
+
+        this._center = math.vec3([ (xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2 ]);
+
+        const positions = [].concat(...pos.map(p => math.subVec3(p, this._center, p)));
         this._zoneMesh = new Mesh(scene, {
+            origin: this._center,
             edges: this._edges,
             geometry: new ReadableGeometry(
                 scene,
@@ -524,19 +537,6 @@ class Zone extends Component {
         }
 
         this._metrics = null;
-
-
-        const min = idx => Math.min(...pos.map(p => p[idx]));
-        const max = idx => Math.max(...pos.map(p => p[idx]));
-
-        const xmin = min(0);
-        const ymin = min(1);
-        const zmin = min(2);
-        const xmax = max(0);
-        const ymax = max(1);
-        const zmax = max(2);
-
-        this._center = math.vec3([ (xmin + xmax) / 2, (ymin + ymax) / 2, (zmin + zmax) / 2 ]);
     }
 
     get baseArea() {

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

@@ -10,14 +10,17 @@ export function addContextMenuListener(elem, callback) {
 
     const touchStartHandler = (event) => {
         event.preventDefault();
-        const touch = event.touches[0];
-        startX = touch.clientX;
-        startY = touch.clientY;
-
+        
         if (timeout) {
             clearTimeout(timeout);
             timeout = null;
         }
+        // If more than one finger touches the screen, cancel the timeout
+        if (event.touches.length > 1) return;
+
+        const touch = event.touches[0];
+        startX = touch.clientX;
+        startY = touch.clientY;
 
         timeout = setTimeout(() => {
             event.clientX = touch.clientX;
@@ -28,6 +31,14 @@ export function addContextMenuListener(elem, callback) {
         }, longPressTimer);
     };
 
+    const globalTouchStartHandler = (event) => {
+        // Cancel timeout if multiple touches are detected anywhere on the screen
+        if (event.touches.length > 1 && timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+
     const touchMoveHandler = (event) => {
         if (!timeout) return;
         const touch = event.touches[0];
@@ -58,6 +69,7 @@ export function addContextMenuListener(elem, callback) {
         elem.addEventListener('touchstart', touchStartHandler);
         elem.addEventListener('touchmove', touchMoveHandler);
         elem.addEventListener('touchend', touchEndHandler);
+        window.addEventListener('touchstart', globalTouchStartHandler);
     } else {
         elem.addEventListener('contextmenu', contextMenuHandler);
     }
@@ -67,6 +79,7 @@ export function addContextMenuListener(elem, callback) {
             elem.removeEventListener('touchstart', touchStartHandler);
             elem.removeEventListener('touchmove', touchMoveHandler);
             elem.removeEventListener('touchend', touchEndHandler);
+            window.removeEventListener('touchstart', globalTouchStartHandler);
         } else {
             elem.removeEventListener('contextmenu', contextMenuHandler);
         }

package/src/viewer/metadata/MetaScene.js

@@ -253,8 +253,8 @@ class MetaScene {
 
         for (let modelId in this.metaModels) {
             const metaModel = this.metaModels[modelId];
-            for (let i = 0, len = metaModel.metaObjects.length; i < len; i++) {
-                const metaObject = metaModel.metaObjects[i];
+            for (let objectId in metaModel.metaObjects) {
+                const metaObject = metaModel.metaObjects[objectId];
                 metaObject.metaModels.push(metaModel);
             }
         }

package/src/viewer/scene/CameraControl/lib/handlers/MousePickHandler.js

@@ -272,7 +272,7 @@ class MousePickHandler {
 
                 this._timeout = setTimeout(() => {
 
-                    if (firstClickPickResult && firstClickPickResult.worldPos) {
+                    if (firstClickPickResult) {
 
                         cameraControl.fire("picked", firstClickPickResult, true);
 

package/src/viewer/scene/model/dtx/triangles/renderers/DTXTrianglesColorRenderer.js

@@ -110,6 +110,10 @@ export class DTXTrianglesColorRenderer {
             const sectionPlanes = scene._sectionPlanesState.sectionPlanes;
             const baseIndex = dataTextureLayer.layerIndex * numSectionPlanes;
             const renderFlags = model.renderFlags;
+            if (scene.crossSections) {
+                gl.uniform4fv(this._uSliceColor, scene.crossSections.sliceColor);
+                gl.uniform1f(this._uSliceThickness, scene.crossSections.sliceThickness);
+            }
             for (let sectionPlaneIndex = 0; sectionPlaneIndex < numAllocatedSectionPlanes; sectionPlaneIndex++) {
                 const sectionPlaneUniforms = this._uSectionPlanes[sectionPlaneIndex];
                 if (sectionPlaneUniforms) {
@@ -247,6 +251,11 @@ export class DTXTrianglesColorRenderer {
         this._uTexturePerPolygonIdPortionIds = "uTexturePerPolygonIdPortionIds";
         this._uTexturePerObjectMatrix= "uTexturePerObjectMatrix";
         this._uCameraEyeRtc = program.getLocation("uCameraEyeRtc");
+
+        if (scene.crossSections) {
+            this._uSliceColor = program.getLocation("sliceColor");
+            this._uSliceThickness = program.getLocation("sliceThickness");
+        }
     }
 
     _bindProgram(frameCtx) {
@@ -563,11 +572,14 @@ export class DTXTrianglesColorRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
-
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = vFlags2 > 0u;");
             src.push("  if (clippable) {");
@@ -577,9 +589,12 @@ export class DTXTrianglesColorRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;")
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
 
@@ -597,9 +612,9 @@ export class DTXTrianglesColorRenderer {
             src.push("   float blendFactor       = uSAOParams[3];");
             src.push("   vec2 uv                 = vec2(gl_FragCoord.x / viewportWidth, gl_FragCoord.y / viewportHeight);");
             src.push("   float ambient           = smoothstep(blendCutoff, 1.0, unpackRGBToFloat(texture(uOcclusionTexture, uv))) * blendFactor;");
-            src.push("   outColor            = vec4(vColor.rgb * ambient, 1.0);");
+            src.push("   outColor            = vec4(newColor.rgb * ambient, 1.0);");
         } else {
-            src.push("   outColor            = vColor;");
+            src.push("   outColor            = newColor;");
         }
 
         src.push("}");

package/src/viewer/scene/model/dtx/triangles/renderers/DTXTrianglesEdgesColorRenderer.js

@@ -377,10 +377,14 @@ export class DTXTrianglesEdgesColorRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = vFlags2 > 0u;");
             src.push("  if (clippable) {");
@@ -390,13 +394,18 @@ export class DTXTrianglesEdgesColorRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { discard; }");
+            src.push("  if (dist > sliceThickness) { ");
+            src.push("      discard;")
+            src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
         if (scene.logarithmicDepthBufferEnabled) {
               src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
         }
-        src.push("   outColor            = vColor;");
+        src.push("   outColor            = newColor;");
         src.push("}");
         return src;
     }

package/src/viewer/scene/model/dtx/triangles/renderers/DTXTrianglesEdgesRenderer.js

@@ -385,10 +385,14 @@ export class DTXTrianglesEdgesRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("in vec4 vColor;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
+        src.push("  vec4 newColor;");
+        src.push("  newColor = vColor;");
         if (clipping) {
             src.push("  bool clippable = vFlags2 > 0u;");
             src.push("  if (clippable) {");
@@ -398,13 +402,18 @@ export class DTXTrianglesEdgesRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { discard; }");
+            src.push("  if (dist > sliceThickness) { ");
+            src.push("      discard;")
+            src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
         }
-        src.push("   outColor            = vColor;");
+        src.push("   outColor            = newColor;");
         src.push("}");
         return src;
     }

package/src/viewer/scene/model/dtx/triangles/renderers/DTXTrianglesSilhouetteRenderer.js

@@ -426,10 +426,14 @@ export class DTXTrianglesSilhouetteRenderer {
                 src.push("uniform vec3 sectionPlanePos" + i + ";");
                 src.push("uniform vec3 sectionPlaneDir" + i + ";");
             }
+            src.push("uniform float sliceThickness;");
+            src.push("uniform vec4 sliceColor;");
         }
         src.push("uniform vec4 color;");
         src.push("out vec4 outColor;");
         src.push("void main(void) {");
+        src.push("  vec4 newColor;");
+        src.push("  newColor = color;");
         if (clipping) {
             src.push("  bool clippable = vFlags2 > 0u;");
             src.push("  if (clippable) {");
@@ -439,15 +443,18 @@ export class DTXTrianglesSilhouetteRenderer {
                 src.push("   dist += clamp(dot(-sectionPlaneDir" + i + ".xyz, vWorldPosition.xyz - sectionPlanePos" + i + ".xyz), 0.0, 1000.0);");
                 src.push("}");
             }
-            src.push("  if (dist > 0.0) { ");
+            src.push("  if (dist > sliceThickness) { ");
             src.push("      discard;")
             src.push("  }");
+            src.push("  if (dist > 0.0) { ");
+            src.push("      newColor = sliceColor;");
+            src.push("  }");
             src.push("}");
         }
         if (scene.logarithmicDepthBufferEnabled) {
             src.push("    gl_FragDepth = isPerspective == 0.0 ? gl_FragCoord.z : log2( vFragDepth ) * logDepthBufFC * 0.5;");
         }
-        src.push("    outColor = color;");
+        src.push("    outColor = newColor;");
         src.push("}");
         return src;
     }

package/src/viewer/scene/webgl/Renderer.js

@@ -11,6 +11,8 @@ import {SAODepthLimitedBlurRenderer} from "./sao/SAODepthLimitedBlurRenderer.js"
 import {RenderBufferManager} from "./RenderBufferManager.js";
 import {getExtension} from "./getExtension.js";
 
+const vec3_0 = math.vec3([0,0,0]);
+
 /**
  * @private
  */
@@ -713,9 +715,11 @@ const Renderer = function (scene, options) {
             // Transparent color fill
 
             if (normalFillTransparentBinLen > 0) {
+                const eye = frameCtx.pickOrigin || scene.camera.eye;
+                const byDist = normalFillTransparentBin.map(d => ({ drawable: d, distSq: math.distVec3(d.origin || vec3_0, eye) }));
+                byDist.sort((a, b) => b.distSq - a.distSq);
                 for (i = 0; i < normalFillTransparentBinLen; i++) {
-                    drawable = normalFillTransparentBin[i];
-                    drawable.drawColorTransparent(frameCtx);
+                    byDist[i].drawable.drawColorTransparent(frameCtx);
                 }
             }