@xeokit/xeokit-sdk 2.6.73 → 2.6.75

package/dist/xeokit-sdk.es.js

@@ -1,7 +1,7 @@
 /**
- * xeokit-sdk v2.6.73
- *  Commit: 3b3bb2ad8abfdf189cf4ba7f67d6798375772b7b
- *  Built: 2025-04-10T16:46:49.684Z
+ * xeokit-sdk v2.6.75
+ *  Commit: c9b6b9ca6ba5bea44b4e84678d4f9ffbf152086d
+ *  Built: 2025-04-17T10:44:28.149Z
  */
 
 /** @private */
@@ -346,7 +346,8 @@ class ContextMenu {
         this._shown = false;    // True when the ContextMenu is visible
         this._nextId = 0;
         this._parentNode = cfg.parentNode || document.body;
-
+        this._offsetParent = (this._parentNode instanceof ShadowRoot) ? this._parentNode.host : this._parentNode;
+        
         /**
          * Subscriptions to events fired at this ContextMenu.
          * @private
@@ -558,7 +559,7 @@ class ContextMenu {
         for (let i = 0, len = this._menuList.length; i < len; i++) {
             const menu = this._menuList[i];
             const menuElement = menu.menuElement;
-            menuElement.parentElement.removeChild(menuElement);
+            menuElement.remove();
         }
         this._itemsCfg = [];
         this._rootMenu = null;
@@ -786,21 +787,22 @@ class ContextMenu {
 
                             const itemRect = itemElement.getBoundingClientRect();
                             subMenuElement.getBoundingClientRect();
+                            const offsetRect = self._offsetParent.getBoundingClientRect();
 
                             const subMenuWidth = 200; // TODO
-                            const showOnRight = (itemRect.right + subMenuWidth) < window.innerWidth;
-                            const showOnLeft = (itemRect.left - subMenuWidth) > 0;
-
+                            const showOnRight = (itemRect.right + subMenuWidth) < offsetRect.right;
+                            const showOnLeft = (itemRect.left - subMenuWidth) > offsetRect.left;
+                        
                             if(showOnRight)
-                                self._showMenu(subMenu.id, itemRect.right - 5, itemRect.top - 1);
+                                self._showMenu(subMenu.id, itemRect.right + window.scrollX - 5, itemRect.top + window.scrollY - 1);
                             else if (showOnLeft)
-                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth, itemRect.top - 1);
+                                self._showMenu(subMenu.id, itemRect.left - subMenuWidth + window.scrollX, itemRect.top + window.scrollY - 1);
                             else {
-                                const spaceOnLeft = itemRect.left, spaceOnRight = window.innerWidth - itemRect.right;
+                                const spaceOnLeft = itemRect.left - offsetRect.left, spaceOnRight = offsetRect.right - itemRect.right;
                                 if(spaceOnRight > spaceOnLeft) 
-                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top - 1);
+                                    self._showMenu(subMenu.id, itemRect.right - 5 - (subMenuWidth - spaceOnRight), itemRect.top + window.scrollY - 1);
                                 else 
-                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top - 1);
+                                    self._showMenu(subMenu.id, itemRect.left - spaceOnLeft, itemRect.top + window.scrollY - 1);
                             }
 
                             lastSubMenu = subMenu;
@@ -993,14 +995,21 @@ class ContextMenu {
         menuElement.style.display = 'block';
         const menuHeight = menuElement.offsetHeight;
         const menuWidth = menuElement.offsetWidth;
-        if ((pageY + menuHeight) > window.innerHeight) {
-            pageY = window.innerHeight - menuHeight;
+
+        const offsetRect = this._offsetParent.getBoundingClientRect();
+        
+        const bottomContainerBorder = offsetRect.bottom + window.scrollY;
+        const rightContainerBorder = offsetRect.right + window.scrollX;
+        if ((pageY + menuHeight) > bottomContainerBorder) {
+            pageY = bottomContainerBorder- menuHeight;
         }
-        if ((pageX + menuWidth) > window.innerWidth) {
-            pageX = window.innerWidth - menuWidth;
+        if ((pageX + menuWidth) > rightContainerBorder) {
+            pageX = rightContainerBorder - menuWidth;
         }
-        menuElement.style.left = pageX + 'px';
-        menuElement.style.top = pageY + 'px';
+
+
+        menuElement.style.left = pageX - offsetRect.left - window.scrollX + 'px';
+        menuElement.style.top = pageY - offsetRect.top - window.scrollY + 'px';
     }
 
     _hideMenuElement(menuElement) {
@@ -89179,7 +89188,7 @@ class LineSet extends Component {
      * @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
      * @param {Number[]} cfg.positions World-space 3D vertex positions.
      * @param {Number[]} [cfg.indices] Indices to connect ````positions```` into line segments. Note that these are separate line segments, not a polyline.
-     * @param {Number[]} [cfg.color=[0,0,0]] The color of this ````LineSet````. This is both emissive and diffuse.
+     * @param {Number[]} [cfg.color=[1,1,1]] The color of this ````LineSet````. This is both emissive and diffuse.
      * @param {Boolean} [cfg.visible=true] Indicates whether or not this ````LineSet```` is visible.
      * @param {Number} [cfg.opacity=1.0] ````LineSet````'s initial opacity factor.
      */
@@ -89199,6 +89208,9 @@ class LineSet extends Component {
             }
         }
 
+        this._color = cfg.color || [1, 1, 1];
+        this._opacity = cfg.opacity || 1.0;
+
         this._sceneModel = new SceneModel(this, {
             isModel: false // Don't register in Scene.models
         });
@@ -89207,7 +89219,9 @@ class LineSet extends Component {
             id: "linesMesh",
             primitive: "lines",
             positions: this._positions,
-            indices: this._indices
+            indices: this._indices,
+            color: this._color,
+            opacity: this._opacity,
         });
 
         this._sceneModel.createEntity({
@@ -92935,6 +92949,7 @@ class FastNavPlugin extends Plugin {
      * @param {Number} [cfg.scaleCanvasResolutionFactor=0.6] The factor by which we downscale the canvas resolution whenever we interact with the Viewer.
      * @param {Boolean} [cfg.delayBeforeRestore=true] Whether to temporarily have a delay before restoring normal rendering after we stop interacting with the Viewer.
      * @param {Number} [cfg.delayBeforeRestoreSeconds=0.5] Delay in seconds before restoring normal rendering after we stop interacting with the Viewer.
+     * @param {Function} [cfg.onMoved] Optional callback function fired during moving mode, should return the callback function that will be fired when the interaction stops.
      */
     constructor(viewer, cfg = {}) {
 
@@ -92950,6 +92965,8 @@ class FastNavPlugin extends Plugin {
         this._scaleCanvasResolutionFactor = cfg.scaleCanvasResolutionFactor || 0.6;
         this._delayBeforeRestore = (cfg.delayBeforeRestore !== false);
         this._delayBeforeRestoreSeconds = cfg.delayBeforeRestoreSeconds || 0.5;
+        this._onMoved = cfg.onMoved;
+        this._onStopped = null;
 
         let timer = this._delayBeforeRestoreSeconds * 1000;
         let fastMode = false;
@@ -92968,6 +92985,10 @@ class FastNavPlugin extends Plugin {
                 } else {
                     viewer.scene.canvas.resolutionScale = this._defaultScaleCanvasResolutionFactor;
                 }
+                if (this._onMoved) {
+                    this._onStopped = this._onMoved();
+                }
+
                 fastMode = true;
             }
         };
@@ -92979,6 +93000,9 @@ class FastNavPlugin extends Plugin {
             viewer.scene._renderer.setPBREnabled(true);
             viewer.scene._renderer.setSAOEnabled(true);
             viewer.scene._renderer.setTransparentEnabled(true);
+            if (this._onStopped) {
+                this._onStopped();
+            }
             fastMode = false;
         };
 
@@ -98305,8 +98329,8 @@ class Skybox extends Component {
      * @param {Component} owner Owner component. When destroyed, the owner will destroy this PointLight as well.
      * @param {*} [cfg]  Skybox configuration
      * @param {String} [cfg.id] Optional ID, unique among all components in the parent {Scene}, generated automatically when omitted.
-     * @param {String} [cfg.src=null] Path to skybox texture
-     * @param {String} [cfg.encoding="linear"] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+     * @param {String | String[]} [cfg.src=null] Path to skybox texture
+     * @param {Number} [cfg.encoding=LinearEncoding] Texture encoding format.  See the {@link Texture#encoding} property for more info.
      * @param {Number} [cfg.size=1000] Size of this Skybox, given as the distance from the center at ````[0,0,0]```` to each face.
      * @param {Boolean} [cfg.active=true] True when this Skybox is visible.
      */
@@ -98314,6 +98338,32 @@ class Skybox extends Component {
 
         super(owner, cfg);
 
+        const useMultipleTexture = typeof cfg.src === "object" && cfg.src !== null;
+
+        if (useMultipleTexture) {
+            this._createCombinedTexture(cfg).then(combinedTexture => {
+                this._createSkyboxMesh(cfg, combinedTexture);
+            }).catch(e => this.error(e));
+        } else {
+            this._createSkyboxMesh(cfg);
+        }
+    }
+
+    /**
+     * 
+     * @private
+     * @param {*} cfg 
+     * @param {Texture} combinedTexture 
+     */
+    _createSkyboxMesh(cfg, combinedTexture = null) {
+        const texture = combinedTexture || new Texture(this, {
+            src: cfg.src,
+            flipY: true,
+            wrapS: ClampToEdgeWrapping,
+            wrapT: ClampToEdgeWrapping,
+            encoding: cfg.encoding || LinearEncoding
+        });
+
         this._skyboxMesh = new Mesh(this, {
 
             geometry: new ReadableGeometry(this, { // Box-shaped geometry
@@ -98344,13 +98394,7 @@ class Skybox extends Component {
                 diffuse: [0, 0, 0],
                 specular: [0, 0, 0],
                 emissive: [1, 1, 1],
-                emissiveMap: new Texture(this, {
-                    src: cfg.src,
-                    flipY: true,
-                    wrapS: "clampToEdge",
-                    wrapT: "clampToEdge",
-                    encoding: cfg.encoding || "sRGB"
-                }),
+                emissiveMap: texture,
                 backfaces: true // Show interior faces of our skybox geometry
             }),
             // stationary: true,
@@ -98364,6 +98408,86 @@ class Skybox extends Component {
         this.active = cfg.active;
     }
 
+    /**
+     * 
+     * @private
+     * @param {*} cfg 
+     * @returns {Texture}
+     */
+    async _createCombinedTexture(cfg) {
+        const [
+            posX,
+            negX,
+            posY,
+            negY,
+            posZ,
+            negZ
+        ] = cfg.src;
+
+        if (!posX || !negX || !posY || !negY || !posZ || !negZ) {
+            throw new Error("All six skybox textures must be provided");
+        }
+
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        const loadImage = src => {
+            return new Promise((resolve, reject) => {
+                const img = new Image();
+                img.crossOrigin = "anonymous";
+                img.onload = () => resolve(img);
+                img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+                img.src = src;
+            });
+        };
+
+        try {
+            const [imgPosX, imgNegX, imgPosY, imgNegY, imgPosZ, imgNegZ] = await Promise.all([
+                loadImage(posX),
+                loadImage(negX),
+                loadImage(posY),
+                loadImage(negY),
+                loadImage(posZ),
+                loadImage(negZ)
+            ]);
+
+            const imageSize = imgPosX.width;
+            if (
+                imgNegX.width !== imageSize || imgPosY.width !== imageSize ||
+                imgNegY.width !== imageSize || imgPosZ.width !== imageSize ||
+                imgNegZ.width !== imageSize
+            ) {
+                throw new Error("All skybox textures must have the same dimensions");
+            }
+
+            // Set canvas size for the Christ cross layout (3×4 grid)
+            canvas.width = imageSize * 4;
+            canvas.height = imageSize * 3;
+
+            ctx.fillStyle = 'black';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            ctx.drawImage(imgNegX, imageSize * 0, imageSize * 1, imageSize, imageSize);  // -X (left)
+            ctx.drawImage(imgPosX, imageSize * 2, imageSize * 1, imageSize, imageSize);  // +X (right)
+            ctx.drawImage(imgPosY, imageSize * 1, imageSize * 0, imageSize, imageSize);  // +Y (top)
+            ctx.drawImage(imgNegY, imageSize * 1, imageSize * 2, imageSize, imageSize);  // -Y (bottom)
+            ctx.drawImage(imgPosZ, imageSize * 1, imageSize * 1, imageSize, imageSize);  // +Z (front)
+            ctx.drawImage(imgNegZ, imageSize * 3, imageSize * 1, imageSize, imageSize);  // -Z (back)
+
+            const combinedTexture = new Texture(this, {
+                image: canvas,
+                flipY: true,
+                wrapS: ClampToEdgeWrapping,
+                wrapT: ClampToEdgeWrapping,
+                encoding: cfg.encoding || LinearEncoding
+            });
+
+            return combinedTexture;
+        } catch (error) {
+            console.error("Error creating combined skybox texture:", error);
+            throw error;
+        }
+    }
 
     /**
      * Sets the size of this Skybox, given as the distance from the center at [0,0,0] to each face.
@@ -98558,6 +98682,9 @@ const tempVec4a$5 = math.vec4();
 const tempVec4b$5 = math.vec4();
 const tempVec4c = math.vec4();
 
+const TOP_LIMIT = 0.001;
+const BOTTOM_LIMIT = Math.PI - 0.001;
+
 
 /** @private */
 class PivotController {
@@ -98733,14 +98860,9 @@ class PivotController {
      */
     startPivot() {
 
-        if (this._cameraLookingDownwards()) {
-            this._pivoting = false;
-            return false;
-        }
-
         const camera = this._scene.camera;
 
-        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.worldUp);
+        let lookat = math.lookAtMat4v(camera.eye, camera.look, camera.up);
         math.transformPoint3(lookat, this.getPivotPos(), this._cameraOffset);
 
         const pivotPos = this.getPivotPos();
@@ -98843,8 +98965,31 @@ class PivotController {
             dx = -dx;
         }
         this._azimuth += -dx * .01;
-        this._polar += dy * .01;
-        this._polar = math.clamp(this._polar, .001, Math.PI - .001);
+
+        const isMovingUp = dy < 0;
+        const isMovingDown = dy > 0;
+        
+        // Track if we're at limits - only check if we're very close to the limit
+        const atTopLimit = Math.abs(this._polar - TOP_LIMIT) < 0.005;
+        const atBottomLimit = Math.abs(this._polar - BOTTOM_LIMIT) < 0.005;
+        
+        let newPolar = this._polar + dy * .01;
+        
+        // Case 1: At top limit and trying to go beyond
+        if (atTopLimit && isMovingUp) {
+            newPolar = TOP_LIMIT;
+        }
+        // Case 2: At bottom limit and trying to go beyond
+        else if (atBottomLimit && isMovingDown) {
+            newPolar = BOTTOM_LIMIT;
+        }
+        // Case 3: Normal rotation or moving away from a limit
+        else {
+            newPolar = math.clamp(newPolar, TOP_LIMIT, BOTTOM_LIMIT);
+        }
+
+        this._polar = newPolar;
+
         const pos = [
             this._radius * Math.sin(this._polar) * Math.sin(this._azimuth),
             this._radius * Math.cos(this._polar),
@@ -112394,22 +112539,6 @@ class Viewer {
             this.sendToPlugins("snapshotStarting"); // Tells plugins to hide things that shouldn't be in snapshot
         }
 
-        const captured = {};
-        for (let i = 0, len = this._plugins.length; i < len; i++) {
-            const plugin = this._plugins[i];
-            if (plugin.getContainerElement) {
-                const container = plugin.getContainerElement();
-                if (container !== document.body) {
-                    if (!captured[container.id]) {
-                        captured[container.id] = true;
-                        html2canvas(container).then(function (canvas) {
-                            document.body.appendChild(canvas);
-                        });
-                    }
-                }
-            }
-        }
-
         // firing "rendering" is necessary to trigger DTX{Lines,Triangles}Layer::_uploadDeferredFlags
         this.scene.fire("rendering", { }, true);
 
@@ -130060,46 +130189,27 @@ class FaceAlignedSectionPlanesPlugin extends Plugin {
  * });
  *
  * // Add a GLTFModelsPlugin
- * var gltfLoaderPlugin = new GLTFModelsPlugin(viewer, {
- *     id: "GLTFModels"  // Default value
- * });
+ * var xktLoaderPlugin = new XKTLoaderPlugin(viewer);
  *
  * // Add a SkyboxesPlugin
- * var skyboxesPlugin = new SkyboxesPlugin(viewer, {
- *     id: "Skyboxes" // Default value
- * });
+ * var skyboxesPlugin = new SkyboxesPlugin(viewer);
+ * 
+ * // Create a skybox
+ * skyBoxesPlugin.createSkybox({
+ *     src: [
+ *         "./assets/images/posx.jpg",
+ *         "./assets/images/negx.jpg",
+ *         "./assets/images/posy.jpg",
+ *         "./assets/images/negy.jpg",
+ *         "./assets/images/posz.jpg",
+ *         "./assets/images/negz.jpg"
+ *     ]
+ * })
  *
- * // Load a glTF model
- * const model = gltfLoaderPlugin.load({
+ * // Load an XKT model
+ * const model = xktLoaderPlugin.load({
  *     id: "myModel",
- *     src: "./models/gltf/mygltfmodel.gltf"
- * });
- *
- * // Create three directional World-space lights. "World" means that they will appear as if part
- * // of the world, instead of "View", where they move with the user's head.
- *
- * skyboxesPlugin.createLight({
- *     id: "keyLight",
- *     dir: [0.8, -0.6, -0.8],
- *     color: [1.0, 0.3, 0.3],
- *     intensity: 1.0,
- *     space: "world"
- * });
- *
- * skyboxesPlugin.createLight({
- *     id: "fillLight",
- *     dir: [-0.8, -0.4, -0.4],
- *     color: [0.3, 1.0, 0.3],
- *     intensity: 1.0,
- *     space: "world"
- * });
- *
- * skyboxesPlugin.createDirLight({
- *     id: "rimLight",
- *     dir: [0.2, -0.8, 0.8],
- *     color: [0.6, 0.6, 0.6],
- *     intensity: 1.0,
- *     space: "world"
+ *     src: "./models/xkt/myModel.xkt"
  * });
  *
  * @class SkyboxesPlugin
@@ -130125,23 +130235,17 @@ class SkyboxesPlugin extends Plugin {
     /**
      Creates a skybox.
 
-     @param {String} id Unique ID to assign to the skybox.
      @param {Object} params Skybox configuration.
+     @param {String} [params.id] Optional ID, unique among all components in the parent {Scene}, generated automatically when omitted.
+     @param {String | String[]} [params.src=null] Path to skybox texture
+     @param {Number} [params.encoding=LinearEncoding] Texture encoding format.  See the {@link Texture#encoding} property for more info.
+     @param {Number} [params.size=1000] Size of this Skybox, given as the distance from the center at ````[0,0,0]```` to each face.
      @param {Boolean} [params.active=true] Whether the skybox plane is initially active. Only skyboxes while this is true.
      @returns {Skybox} The new skybox.
      */
-    createSkybox(id, params) {
-        if (this.viewer.scene.components[id]) {
-            this.error("Component with this ID already exists: " + id);
-            return this;
-        }
-        var skybox = new Skybox(this.viewer.scene, {
-            id: id,
-            pos: params.pos,
-            dir: params.dir,
-            active: true 
-        });
-        this.skyboxes[id] = skybox;
+    createSkybox(params) {
+        const skybox = new Skybox(this.viewer.scene, params);
+        this.skyboxes[skybox.id] = skybox;
         return skybox;
     }
 
@@ -130804,6 +130908,15 @@ class STLLoaderPlugin extends Plugin {
  */
 class RenderService {
 
+  /**
+  * @constructor
+  *
+  * @param {HTMLElement} treeViewContainer Container element for the tree which uses this render service.
+  */
+  constructor(treeViewContainer) {
+    this._treeViewContainer = treeViewContainer;
+  }
+
   /*
   * Creates the root node of the tree.
   * @return {HTMLElement} The root node of the tree.
@@ -130928,7 +131041,7 @@ class RenderService {
   }
 
   getSwitchElement(nodeId) {
-    return document.getElementById(`switch-${nodeId}`);
+    return this._treeViewContainer.querySelector(`[id="switch-${nodeId}"]`);
   }
 
   isChecked(element) {
@@ -130936,7 +131049,7 @@ class RenderService {
   }
 
   setCheckbox(nodeId, checked, indeterminate = false) {
-    const checkbox = document.getElementById(`checkbox-${nodeId}`);
+    const checkbox = this._treeViewContainer.querySelector(`[id="checkbox-${nodeId}"]`);
     if (checkbox) {
       if (checked !== checkbox.checked) {
         checkbox.checked = checked;
@@ -130951,7 +131064,7 @@ class RenderService {
   }
 
   setXRayed(nodeId, xrayed) {
-    const treeNode = document.getElementById(nodeId);
+    const treeNode = this._treeViewContainer.querySelector(`[id="${nodeId}"]`);
     if (treeNode) {
       if (xrayed) {
         treeNode.classList.add('xrayed-node');
@@ -130962,7 +131075,7 @@ class RenderService {
   }
 
   setHighlighted(nodeId, highlighted) { 
-    const treeNode = document.getElementById(nodeId);
+    const treeNode = this._treeViewContainer.querySelector(`[id="${nodeId}"]`);
     if (treeNode) {
       if (highlighted) {
         treeNode.scrollIntoView({block: "center"});
@@ -131388,7 +131501,7 @@ class TreeViewPlugin extends Plugin {
         this._sortNodes = cfg.sortNodes;
         this._pruneEmptyNodes = cfg.pruneEmptyNodes;
         this._showListItemElementId = null;
-        this._renderService = cfg.renderService || new RenderService();
+        this._renderService = cfg.renderService || new RenderService(this._containerElement);
         this._showIndeterminate = cfg.showIndeterminate ?? false;
         this._showProjectNode = cfg.showProjectNode ?? false;
         this._elevationSortFunction = cfg.elevationSortFunction ?? undefined;