@xeokit/xeokit-sdk 2.6.55 → 2.6.57

package/src/plugins/StoreyViewsPlugin/StoreyViewsPlugin.js

@@ -308,6 +308,43 @@ class StoreyViewsPlugin extends Plugin {
                 this.modelStoreys[modelId][storeyId] = storey;
             }
         }
+        this._clipBoundingBoxes();
+    }
+
+    _clipBoundingBoxes() {
+        const storeysList = this.storeysList;
+        const metaScene = this.viewer.metaScene;
+        const camera = this.viewer.camera;
+        const worldUp = camera.worldUp;
+        const xUp = worldUp[0] > worldUp[1] && worldUp[0] > worldUp[2];
+        const yUp = !xUp && worldUp[1] > worldUp[0] && worldUp[1] > worldUp[2];
+        const zUp = !xUp && !yUp && worldUp[2] > worldUp[0] && worldUp[2] > worldUp[1];
+
+        let bbIndex;
+
+        if(xUp) bbIndex = 0;
+        else if(yUp) bbIndex = 1;
+        else bbIndex = 2;
+        
+        for (let i = 0, len = storeysList.length; i < len; i++) {
+
+            const storeyMetaObjectCur = metaScene.metaObjects[storeysList[i].storeyId];
+            const elevationCur = storeyMetaObjectCur.attributes.elevation;
+
+            if(isNaN(elevationCur)) return;
+
+            const bb = storeysList[i].storeyAABB;
+            bb[bbIndex] = Math.max(bb[1], parseFloat(elevationCur));
+
+            if (i > 0) {
+                const storeyMetaObjectNext = metaScene.metaObjects[storeysList[i - 1].storeyId];
+                const elevationNext = storeyMetaObjectNext.attributes.elevation;
+                bb[4] = Math.min(bb[bbIndex + 3], parseFloat(elevationNext));
+            }
+
+            this.storeys[storeysList[i].storeyId].storeyAABB = bb;
+        }
+
     }
 
     _deregisterModelStoreys(modelId) {
@@ -504,6 +541,7 @@ class StoreyViewsPlugin extends Plugin {
      * @param {Number} [options.width=300] Image width in pixels. Height will be automatically determined from this, if not given.
      * @param {Number} [options.height=300] Image height in pixels, as an alternative to width. Width will be automatically determined from this, if not given.
      * @param {String} [options.format="png"] Image format. Accepted values are "png" and "jpeg".
+     * @param {Boolean} [options.captureSectionPlanes=false] Whether the storey map is sliced or not.
      * @returns {StoreyMap} The StoreyMap.
      */
     createStoreyMap(storeyId, options = {}) {
@@ -520,6 +558,7 @@ class StoreyViewsPlugin extends Plugin {
         const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
         const aspect = Math.abs((aabb[5] - aabb[2]) / (aabb[3] - aabb[0]));
         const padding = options.padding || 0;
+        const captureSectionPlanes = !!options.captureSectionPlanes;
 
         let width;
         let height;
@@ -551,6 +590,9 @@ class StoreyViewsPlugin extends Plugin {
         this.showStoreyObjects(storeyId, utils.apply(options, {
             hideOthers: true
         }));
+        
+        if (captureSectionPlanes)
+            this._toggleSectionPlanes(false);
 
         this._arrangeStoreyMapCamera(storey);
 
@@ -562,10 +604,19 @@ class StoreyViewsPlugin extends Plugin {
 
         this._objectsMemento.restoreObjects(scene, mask);
         this._cameraMemento.restoreCamera(scene);
+        if (captureSectionPlanes)
+            this._toggleSectionPlanes(true);
 
         return new StoreyMap(storeyId, src, format, width, height, padding);
     }
 
+    _toggleSectionPlanes(visible) {
+        const planes = this.viewer.scene.sectionPlanes;
+        for (const key in planes) {
+            planes[key].active = visible;
+        }
+    }
+
     _arrangeStoreyMapCamera(storey) {
         const viewer = this.viewer;
         const scene = viewer.scene;

package/src/plugins/TreeViewPlugin/RenderService.js

@@ -1,3 +1,4 @@
+import { addContextMenuListener } from "../lib/html/MenuEvent.js";
 /**
  * @desc A {@link TreeViewPlugin} render class.
  * 
@@ -49,7 +50,7 @@ export class RenderService {
     nodeElement.appendChild(span);
 
     if (contextmenuHandler) {
-      span.oncontextmenu = contextmenuHandler;
+      addContextMenuListener(span, contextmenuHandler)
     }
 
     if (titleClickHandler) {

package/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js

@@ -427,7 +427,7 @@ parsers[ParserV11.version] = ParserV11;
  *
  * ````javascript
  * const sceneModel = xktLoader.load({
- *   manifestSrc: "https://xeokit.github.io/xeokit-sdk/assets/models/models/xkt/Schependomlaan.xkt",
+ *   src: "https://xeokit.github.io/xeokit-sdk/assets/models/models/xkt/Schependomlaan.xkt",
  *   id: "myModel",
  * });
  * ````
@@ -1165,6 +1165,10 @@ class XKTLoaderPlugin extends Plugin {
 }
 
 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('/') + '/';

package/src/plugins/ZonesPlugin/ZonesPlugin.js

@@ -2,12 +2,10 @@ import {Plugin} from "../../viewer/Plugin.js";
 import {Component} from "../../viewer/scene/Component.js";
 import {buildBoxGeometry} from "../../viewer/scene/geometry/builders/buildBoxGeometry.js";
 import {ReadableGeometry} from "../../viewer/scene/geometry/ReadableGeometry.js";
-import {Marker} from "../../viewer/scene/marker/Marker.js";
 import {PhongMaterial} from "../../viewer/scene/materials/PhongMaterial.js";
 import {math} from "../../viewer/scene/math/math.js";
 import {Mesh} from "../../viewer/scene/mesh/Mesh.js";
-import {Dot} from "../lib/html/Dot.js";
-import {activateDraggableDots, Dot3D, touchPointSelector, transformToNode} from "../../../src/plugins/lib/ui/index.js";
+import {activateDraggableDots, Dot3D, Wire3D, touchPointSelector, transformToNode} from "../../../src/plugins/lib/ui/index.js";
 
 const hex2rgb = function(color) {
     const rgb = idx => parseInt(color.substr(idx + 1, 2), 16) / 255;
@@ -118,107 +116,45 @@ const triangulateEarClipping = function(planeCoords) {
 };
 
 const marker3D = function(scene, color) {
-    const canvas = scene.canvas.canvas;
-
-    const markerParent = canvas.parentNode;
-    const markerDiv = document.createElement("div");
-    markerParent.insertBefore(markerDiv, canvas);
-
-    let size = 5;
-    markerDiv.style.background = color;
-    markerDiv.style.border = "2px solid white";
-    markerDiv.style.margin = "0 0";
-    markerDiv.style.zIndex = "100";
-    markerDiv.style.position = "absolute";
-    markerDiv.style.pointerEvents = "none";
-    markerDiv.style.display = "none";
-
-    const marker = new Marker(scene, {});
-
-    const px = x => x + "px";
-    const update = function() {
-        const pos = marker.canvasPos.slice();
-        transformToNode(canvas, markerParent, pos);
-        markerDiv.style.left = px(pos[0] - 3 - size / 2);
-        markerDiv.style.top  = px(pos[1] - 3 - size / 2);
-        markerDiv.style.borderRadius = px(size * 2);
-        markerDiv.style.width  = px(size);
-        markerDiv.style.height = px(size);
-    };
-    const onViewMatrix = scene.camera.on("viewMatrix", update);
-    const onProjMatrix = scene.camera.on("projMatrix", update);
+    const marker = new Dot3D(scene, {}, scene.canvas.canvas.parentNode, {
+        borderColor: "white",
+        fillColor: color,
+        zIndex: 100
+    });
 
     return {
         update: function(worldPos) {
             if (worldPos)
             {
                 marker.worldPos = worldPos;
-                update();
             }
-            markerDiv.style.display = worldPos ? "" : "none";
-        },
-
-        setHighlighted: function(h) {
-            size = h ? 10 : 5;
-            update();
+            marker.setVisible(!!worldPos);
         },
 
-        getCanvasPos: () => marker.canvasPos,
-
-        getWorldPos: () => marker.worldPos,
-
-        destroy: function() {
-            markerDiv.parentNode.removeChild(markerDiv);
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
-            marker.destroy();
-        }
+        setHighlighted: h => marker.setHighlighted(h),
+        getCanvasPos:  () => marker.canvasPos,
+        getWorldPos:   () => marker.worldPos,
+        destroy:       () => marker.destroy()
     };
 };
 
-import {Wire} from "../lib/html/Wire.js";
-
 const wire3D = function(scene, color, startWorldPos) {
-    const canvas = scene.canvas.canvas;
-
-    const startMarker = new Marker(scene, {});
-    startMarker.worldPos = startWorldPos;
-    const endMarker = new Marker(scene, {});
-    const wireParent = canvas.ownerDocument.body;
-    const wire = new Wire(wireParent, {
+    const wire = new Wire3D(scene, scene.canvas.canvas.ownerDocument.body, {
         color: color,
         thickness: 1,
         thicknessClickable: 6
     });
     wire.setVisible(false);
-
-    const updatePos = function() {
-        const p0 = startMarker.canvasPos.slice();
-        const p1 = endMarker.canvasPos.slice();
-        transformToNode(canvas, wireParent, p0);
-        transformToNode(canvas, wireParent, p1);
-        wire.setStartAndEnd(p0[0], p0[1], p1[0], p1[1]);
-    };
-    const onViewMatrix = scene.camera.on("viewMatrix", updatePos);
-    const onProjMatrix = scene.camera.on("projMatrix", updatePos);
-
     return {
-        update: function(endWorldPos) {
+        update: endWorldPos => {
             if (endWorldPos)
             {
-                endMarker.worldPos = endWorldPos;
-                updatePos();
+                wire.setEnds(startWorldPos, endWorldPos);
             }
             wire.setVisible(!!endWorldPos);
         },
 
-        destroy: function() {
-            scene.camera.off(onViewMatrix);
-            scene.camera.off(onProjMatrix);
-            startMarker.destroy();
-            endMarker.destroy();
-            wire.destroy();
-        }
+        destroy: () => wire.destroy()
     };
 };
 

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

@@ -1,4 +1,4 @@
-import { os } from "../../../viewer/utils/os.js";
+import { addContextMenuListener } from "./MenuEvent.js";
 /** @private */
 class Dot {
 
@@ -116,41 +116,10 @@ class Dot {
         }
 
         if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                dotClickable.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                })
-
-                dotClickable.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } )
-
-            }
-            else {
-                dotClickable.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu")
-                });
+            const contextMenuCallback = (event) => {
+                cfg.onContextMenu(event, this);
             }
+            addContextMenuListener(dotClickable, contextMenuCallback);
             
         }
 
@@ -163,12 +132,12 @@ class Dot {
         this._x = x;
         this._y = y;
         var dotStyle = this._dot.style;
-        dotStyle["left"] = (Math.round(x) - 4) + 'px';
-        dotStyle["top"] = (Math.round(y) - 4) + 'px';
+        dotStyle["left"] = (Math.round(x) - 6) + 'px';
+        dotStyle["top"] = (Math.round(y) - 6) + 'px';
 
         var dotClickableStyle = this._dotClickable.style;
-        dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
-        dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
+        dotClickableStyle["left"] = (Math.round(x) - 14) + 'px';
+        dotClickableStyle["top"] = (Math.round(y) - 14) + 'px';
     }
 
     setFillColor(color) {
@@ -183,12 +152,16 @@ class Dot {
         this._dot.style.opacity = opacity;
     }
 
+    _updateVisibility() {
+        this._dot.style.visibility = this._dotClickable.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
     setVisible(visible) {
         if (this._visible === visible) {
             return;
         }
         this._visible = !!visible;
-        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setCulled(culled) {
@@ -196,7 +169,7 @@ class Dot {
             return;
         }
         this._culled = !!culled;
-        this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setClickable(clickable) {

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

@@ -1,4 +1,4 @@
-import { os } from "../../../viewer/utils/os.js";
+import { addContextMenuListener } from "./MenuEvent.js";
 /** @private */
 class Label {
 
@@ -86,41 +86,10 @@ class Label {
         }
 
         if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                label.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                })
-
-                label.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } )
-
-            }
-            else {
-                label.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu")
-                });
+            const contextMenuCallback = (event) => {
+                cfg.onContextMenu(event, this);
             }
+            addContextMenuListener(label, contextMenuCallback);
             
         }
     }
@@ -167,12 +136,16 @@ class Label {
         this._label.style.opacity = opacity;
     }
 
+    _updateVisibility() {
+        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
     setVisible(visible) {
         if (this._visible === visible) {
             return;
         }
         this._visible = !!visible;
-        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setCulled(culled) {
@@ -180,7 +153,7 @@ class Label {
             return;
         }
         this._culled = !!culled;
-        this._label.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setHighlighted(highlighted) {

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

@@ -0,0 +1,74 @@
+import { os } from "../../../viewer/utils/os.js";
+
+export function addContextMenuListener(elem, callback) {
+    if (!elem || !callback) return;
+
+    let timeout = null;
+    const longPressTimer = 500;
+    const MOVE_THRESHOLD = 3;
+    let startX, startY;
+
+    const touchStartHandler = (event) => {
+        event.preventDefault();
+        const touch = event.touches[0];
+        startX = touch.clientX;
+        startY = touch.clientY;
+
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+
+        timeout = setTimeout(() => {
+            event.clientX = touch.clientX;
+            event.clientY = touch.clientY;
+            callback(event);
+            clearTimeout(timeout);
+            timeout = null;
+        }, longPressTimer);
+    };
+
+    const touchMoveHandler = (event) => {
+        if (!timeout) return;
+        const touch = event.touches[0];
+        const deltaX = Math.abs(touch.clientX - startX);
+        const deltaY = Math.abs(touch.clientY - startY);
+
+        if (deltaX > MOVE_THRESHOLD || deltaY > MOVE_THRESHOLD) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+
+    const touchEndHandler = (event) => {
+        event.preventDefault();
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    };
+
+    const contextMenuHandler = (event) => {
+        callback(event);
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    
+    if (os.isIphoneSafari()) {
+        elem.addEventListener('touchstart', touchStartHandler);
+        elem.addEventListener('touchmove', touchMoveHandler);
+        elem.addEventListener('touchend', touchEndHandler);
+    } else {
+        elem.addEventListener('contextmenu', contextMenuHandler);
+    }
+
+    return function removeContextMenuListener() {
+        if (os.isIphoneSafari()) {
+            elem.removeEventListener('touchstart', touchStartHandler);
+            elem.removeEventListener('touchmove', touchMoveHandler);
+            elem.removeEventListener('touchend', touchEndHandler);
+        } else {
+            elem.removeEventListener('contextmenu', contextMenuHandler);
+        }
+    };
+}

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

@@ -1,4 +1,4 @@
-import { os } from "../../../viewer/utils/os.js";
+import { addContextMenuListener } from "./MenuEvent.js";
 /** @private */
 class Wire {
 
@@ -115,41 +115,10 @@ class Wire {
         }
 
         if (cfg.onContextMenu) {
-            if(os.isIphoneSafari()){
-                wireClickable.addEventListener('touchstart', (event) => {
-                    event.preventDefault();
-                    if(this._timeout){
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                    this._timeout = setTimeout(() => {
-                        event.clientX = event.touches[0].clientX;
-                        event.clientY = event.touches[0].clientY;
-                        cfg.onContextMenu(event, this);
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }, 500);
-                })
-
-                wireClickable.addEventListener('touchend', (event) => {
-                    event.preventDefault();
-                    //stops short touches from calling the timeout
-                    if(this._timeout) {
-                        clearTimeout(this._timeout);
-                        this._timeout = null;
-                    }
-                } )
-
-            }
-            else {
-                wireClickable.addEventListener('contextmenu', (event) => {
-                    console.log(event);
-                    cfg.onContextMenu(event, this);
-                    event.preventDefault();
-                    event.stopPropagation();
-                    console.log("Label context menu")
-                });
+            const contextMenuCallback = (event) => {
+                cfg.onContextMenu(event, this);
             }
+            addContextMenuListener(wireClickable, contextMenuCallback);
             
         }
 
@@ -174,21 +143,21 @@ class Wire {
         wireStyle["width"] = Math.round(length) + 'px';
         wireStyle["left"] = Math.round(this._x1) + 'px';
         wireStyle["top"] = Math.round(this._y1) + 'px';
-        wireStyle['-webkit-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['-moz-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['-ms-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['-o-transform'] = 'rotate(' + angle + 'deg)';
-        wireStyle['transform'] = 'rotate(' + angle + 'deg)';
+        wireStyle['-webkit-transform'] =
+            wireStyle['-moz-transform'] =
+            wireStyle['-ms-transform'] =
+            wireStyle['-o-transform'] =
+            wireStyle['transform'] = 'rotate(' + angle + 'deg) translate(-' + this._thickness + 'px, -' + this._thickness + 'px)';
 
         var wireClickableStyle = this._wireClickable.style;
         wireClickableStyle["width"] = Math.round(length) + 'px';
         wireClickableStyle["left"] = Math.round(this._x1) + 'px';
         wireClickableStyle["top"] = Math.round(this._y1) + 'px';
-        wireClickableStyle['-webkit-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['-moz-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['-ms-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['-o-transform'] = 'rotate(' + angle + 'deg)';
-        wireClickableStyle['transform'] = 'rotate(' + angle + 'deg)';
+        wireClickableStyle['-webkit-transform'] =
+            wireClickableStyle['-moz-transform'] =
+            wireClickableStyle['-ms-transform'] =
+            wireClickableStyle['-o-transform'] =
+            wireClickableStyle['transform'] = 'rotate(' + angle + 'deg) translate(-' + this._thicknessClickable + 'px, -' + this._thicknessClickable + 'px)';
     }
 
     setStartAndEnd(x1, y1, x2, y2) {
@@ -208,12 +177,16 @@ class Wire {
         this._wire.style.opacity = opacity;
     }
 
+    _updateVisibility() {
+        this._wire.style.visibility = this._wireClickable.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+    }
+
     setVisible(visible) {
         if (this._visible === visible) {
             return;
         }
         this._visible = !!visible;
-        this._wire.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setCulled(culled) {
@@ -221,7 +194,7 @@ class Wire {
             return;
         }
         this._culled = !!culled;
-        this._wire.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
+        this._updateVisibility();
     }
 
     setClickable(clickable) {