@xeokit/xeokit-sdk 2.6.52 → 2.6.54

package/dist/xeokit-sdk.es.js

@@ -21944,6 +21944,30 @@ class Input extends Component {
          */
         this.KEY_SPACE = 32;
 
+        /**
+         * Code for the left mouse button.
+         * @property MOUSE_LEFT_BUTTON
+         * @final
+         * @type {Number}
+         */
+        this.MOUSE_LEFT_BUTTON = 260;
+
+        /**
+         * Code for the middle mouse button.
+         * @property MOUSE_MIDDLE_BUTTON
+         * @final
+         * @type {Number}
+         */
+        this.MOUSE_MIDDLE_BUTTON = 261;
+
+        /**
+         * Code for the right mouse button.
+         * @property MOUSE_RIGHT_BUTTON
+         * @final
+         * @type {Number}
+         */
+        this.MOUSE_RIGHT_BUTTON = 262;
+
         /**
          * The canvas element that mouse and keyboards are bound to.
          *
@@ -97402,6 +97426,7 @@ class MousePanRotateDollyHandler {
         this._scene = scene;
 
         const pickController = controllers.pickController;
+        const cameraControl = controllers.cameraControl;
 
         let lastX = 0;
         let lastY = 0;
@@ -97466,6 +97491,15 @@ class MousePanRotateDollyHandler {
             }
         }
 
+        function isPanning() {
+            return cameraControl._isKeyDownForAction(cameraControl.MOUSE_PAN, keyDown);
+        }
+
+        function isRotating() {
+            return cameraControl._isKeyDownForAction(cameraControl.MOUSE_ROTATE, keyDown);
+        }
+
+
         canvas.addEventListener("mousedown", this._mouseDownHandler = (e) => {
 
             if (!(configs.active && configs.pointerEnabled)) {
@@ -97479,12 +97513,14 @@ class MousePanRotateDollyHandler {
                     if (keyDown[scene.input.KEY_SHIFT] || configs.planView) {
 
                         mouseDownLeft = true;
+                        keyDown[scene.input.MOUSE_LEFT_BUTTON] = true;
 
                         setMousedownState();
 
                     } else {
 
                         mouseDownLeft = true;
+                        keyDown[scene.input.MOUSE_LEFT_BUTTON] = true;
 
                         setMousedownState(false);
                     }
@@ -97494,6 +97530,7 @@ class MousePanRotateDollyHandler {
                 case 2: // Middle/both buttons
 
                     mouseDownMiddle = true;
+                    keyDown[scene.input.MOUSE_MIDDLE_BUTTON] = true;
 
                     setMousedownState();
 
@@ -97502,6 +97539,7 @@ class MousePanRotateDollyHandler {
                 case 3: // Right button
 
                     mouseDownRight = true;
+                    keyDown[scene.input.MOUSE_RIGHT_BUTTON] = true;
 
                     if (configs.panRightClick) {
 
@@ -97531,7 +97569,8 @@ class MousePanRotateDollyHandler {
             const x = states.pointerCanvasPos[0];
             const y = states.pointerCanvasPos[1];
 
-            const panning = keyDown[scene.input.KEY_SHIFT] || configs.planView || (!configs.panRightClick && mouseDownMiddle) || (configs.panRightClick && mouseDownRight);
+            const panning = isPanning();
+            const rotating = isRotating();
 
             const xDelta = document.pointerLockElement ? e.movementX : (x - lastX);
             const yDelta = document.pointerLockElement ? e.movementY : (y - lastY);
@@ -97556,7 +97595,7 @@ class MousePanRotateDollyHandler {
                     updates.panDeltaY += 0.5 * camera.ortho.scale * (yDelta / canvasHeight);
                 }
 
-            } else if (mouseDownLeft && !mouseDownMiddle && !mouseDownRight) {
+            } else if (rotating) {
 
                 if (!configs.planView) { // No rotating in plan-view mode
 
@@ -97597,16 +97636,25 @@ class MousePanRotateDollyHandler {
                     mouseDownLeft = false;
                     mouseDownMiddle = false;
                     mouseDownRight = false;
+                    keyDown[scene.input.MOUSE_LEFT_BUTTON] = false;
+                    keyDown[scene.input.MOUSE_MIDDLE_BUTTON] = false;
+                    keyDown[scene.input.MOUSE_RIGHT_BUTTON] = false;
                     break;
                 case 2: // Middle/both buttons
                     mouseDownLeft = false;
                     mouseDownMiddle = false;
                     mouseDownRight = false;
+                    keyDown[scene.input.MOUSE_LEFT_BUTTON] = false;
+                    keyDown[scene.input.MOUSE_MIDDLE_BUTTON] = false;
+                    keyDown[scene.input.MOUSE_RIGHT_BUTTON] = false;
                     break;
                 case 3: // Right button
                     mouseDownLeft = false;
                     mouseDownMiddle = false;
                     mouseDownRight = false;
+                    keyDown[scene.input.MOUSE_LEFT_BUTTON] = false;
+                    keyDown[scene.input.MOUSE_MIDDLE_BUTTON] = false;
+                    keyDown[scene.input.MOUSE_RIGHT_BUTTON] = false;
                     break;
             }
         });
@@ -97644,7 +97692,7 @@ class MousePanRotateDollyHandler {
         let secsNowLast = null;
 
         canvas.addEventListener("wheel", this._mouseWheelHandler = (e) => {
-            if (!(configs.active && configs.pointerEnabled && configs.zoomOnMouseWheel)) {
+            if (!(configs.active && configs.pointerEnabled && configs.zoomOnMouseWheel && cameraControl._isKeyDownForAction(cameraControl.MOUSE_DOLLY, keyDown))) {
                 return;
             }
             const secsNow = performance.now() / 1000.0;
@@ -97825,6 +97873,7 @@ class MousePickHandler {
         this._clicks = 0;
         this._timeout = null;
         this._lastPickedEntityId = null;
+        this._lastClickedWorldPos = null;
 
         let leftDown = false;
         let rightDown = false;
@@ -97974,11 +98023,16 @@ class MousePickHandler {
                     if (pickResult && pickResult.worldPos) {
                         pivotController.setPivotPos(pickResult.worldPos);
                         pivotController.startPivot();
+                        this._lastClickedWorldPos = pickResult.worldPos.slice();
                     } else {
                         if (configs.smartPivot) {
                             pivotController.setCanvasPivotPos(states.pointerCanvasPos);
                         } else {
-                            pivotController.setPivotPos(scene.camera.look);
+                            if (this._lastClickedWorldPos) {
+                                pivotController.setPivotPos(this._lastClickedWorldPos);
+                            } else {
+                                pivotController.setPivotPos(scene.camera.look);
+                            }
                         }
                         pivotController.startPivot();
                     }
@@ -99694,6 +99748,12 @@ const DEFAULT_SNAP_EDGE = true;
  * keyMap[cameraControl.AXIS_VIEW_FRONT] = [input.KEY_NUM_4];
  * keyMap[cameraControl.AXIS_VIEW_TOP] = [input.KEY_NUM_5];
  * keyMap[cameraControl.AXIS_VIEW_BOTTOM] = [input.KEY_NUM_6];
+ * keyMap[cameraControl.MOUSE_PAN] = [[input.KEY_SHIFT, input.MOUSE_LEFT_BUTTON]];
+ * keyMap[cameraControl.MOUSE_ROTATE] = [
+ *     [input.KEY_SHIFT, input.MOUSE_MIDDLE_BUTTON],
+ *     [input.KEY_SHIFT, input.MOUSE_RIGHT_BUTTON]
+ * ]
+ * keyMap[cameraControl.MOUSE_DOLLY] = [[input.KEY_CTRL, input.MOUSE_RIGHT_BUTTON]];
  *
  * cameraControl.keyMap = keyMap;
  * ````
@@ -99712,6 +99772,70 @@ const DEFAULT_SNAP_EDGE = true;
  *
  * * ````"qwerty"````
  * * ````"azerty"````
+ * 
+ * ## Basic Keyboard Mapping
+ * * ````"OR" Relation````
+ * Set multiple keys to trigger an action if any one is pressed:
+ * 
+ * ````javascript
+ * keyMap[cameraControl.DOLLY_BACKWARDS] = [input.KEY_S, input.KEY_SUBTRACT];
+ * ````
+ * 
+ * If either ````KEY_S```` or ````KEY_SUBTRACT```` is pressed, the camera will dolly backward.
+ * 
+ * * ````"AND" Relation````
+ * To require all keys in a combination to be pressed:
+ * 
+ * ````javascript
+ * keyMap[cameraControl.DOLLY_BACKWARDS] = [[input.KEY_S, input.KEY_SUBTRACT]];
+ * ````
+ * 
+ * The camera will dolly backward if ````both KEY_S```` and ````KEY_SUBTRACT```` are pressed.
+ * 
+ * * ````Mix "AND" and "OR" Relation````
+ * Use a combination of keys and groups for flexibility:
+ * 
+ * ````javascript
+ * keyMap[cameraControl.DOLLY_BACKWARDS] = [
+ *     [input.KEY_S, input.KEY_SUBTRACT],  // 'And' group
+ *     input.KEY_SHIFT                      // 'Or' with previous
+ * ];
+ * ````
+ * 
+ * The camera will dolly backward if ````KEY_S```` + ````KEY_SUBTRACT```` are pressed together, or if ````KEY_SHIFT```` is pressed.
+ * 
+ * ## Special Mouse Actions
+ * Certain actions support combinations with specific mouse buttons or events:
+ * 
+ * * ````MOUSE_PAN````
+ * For panning with a key and mouse movement:
+ * 
+ * ````javascript
+ * keyMap[cameraControl.MOUSE_PAN] = [[input.KEY_SHIFT, input.MOUSE_LEFT_BUTTON]];
+ * ````
+ * 
+ * Panning is triggered by pressing ````KEY_SHIFT```` + ````MOUSE_LEFT_BUTTON```` while moving the mouse.
+ * 
+ * * ````MOUSE_ROTATE````
+ * Similar to panning, rotation can be configured with key and mouse button combinations:
+ * 
+ * ````javascript
+ * keyMap[cameraControl.MOUSE_ROTATE] = [[input.KEY_CTRL, input.MOUSE_LEFT_BUTTON]];
+ * ````
+ * 
+ * Rotation is triggered by pressing ````KEY_CTRL```` + ````MOUSE_LEFT_BUTTON```` during mouse movement.
+ * 
+ * * ````MOUSE_DOLLY````
+ * Dolly with mouse wheel scrolling and optional key combinations:
+ * 
+ * ````javascript
+ * keyMap[cameraControl.MOUSE_DOLLY] = [[input.KEY_ALT]];
+ * ````
+ * 
+ * Dolly action occurs when scrolling the mouse wheel with ````KEY_ALT```` held (no need to specify MOUSE_WHEEL).
+ * 
+ * ## Special Mouse Actions
+ * Use ````input.MOUSE_LEFT_BUTTON````, ````input.MOUSE_MIDDLE_BUTTON````, and ````input.MOUSE_RIGHT_BUTTON```` in combinations only for camera movements involving the mouse.
  */
 class CameraControl extends Component {
 
@@ -99849,6 +99973,27 @@ class CameraControl extends Component {
          */
         this.AXIS_VIEW_BOTTOM = 17;
 
+        /**
+         * Identifies the XX action.
+         * @final
+         * @type {Number}
+         */
+        this.MOUSE_PAN = 18;
+
+        /**
+         * Identifies the XX action.
+         * @final
+         * @type {Number}
+         */
+        this.MOUSE_ROTATE = 19;
+
+        /**
+         * Identifies the XX action.
+         * @final
+         * @type {Number}
+         */
+        this.MOUSE_DOLLY = 20;
+
         this._keyMap = {}; // Maps key codes to the above actions
 
         this.scene.canvas.canvas.oncontextmenu = (e) => {
@@ -100037,6 +100182,12 @@ class CameraControl extends Component {
                     keyMap[this.AXIS_VIEW_FRONT] = [input.KEY_NUM_4];
                     keyMap[this.AXIS_VIEW_TOP] = [input.KEY_NUM_5];
                     keyMap[this.AXIS_VIEW_BOTTOM] = [input.KEY_NUM_6];
+                    keyMap[this.MOUSE_PAN] = [
+                        [input.MOUSE_LEFT_BUTTON, input.KEY_SHIFT],
+                        this._configs.panRightClick ? input.MOUSE_RIGHT_BUTTON : input.MOUSE_MIDDLE_BUTTON
+                    ];
+                    keyMap[this.MOUSE_ROTATE] = [input.MOUSE_LEFT_BUTTON];
+                    keyMap[this.MOUSE_DOLLY] = [];
                     break;
 
                 case "azerty":
@@ -100058,6 +100209,12 @@ class CameraControl extends Component {
                     keyMap[this.AXIS_VIEW_FRONT] = [input.KEY_NUM_4];
                     keyMap[this.AXIS_VIEW_TOP] = [input.KEY_NUM_5];
                     keyMap[this.AXIS_VIEW_BOTTOM] = [input.KEY_NUM_6];
+                    keyMap[this.MOUSE_PAN] = [
+                        [input.MOUSE_LEFT_BUTTON, input.KEY_SHIFT],
+                        this._configs.panRightClick ? input.MOUSE_RIGHT_BUTTON : input.MOUSE_MIDDLE_BUTTON
+                    ];
+                    keyMap[this.MOUSE_ROTATE] = [input.MOUSE_LEFT_BUTTON];
+                    keyMap[this.MOUSE_DOLLY] = [];
                     break;
             }
 
@@ -100077,6 +100234,44 @@ class CameraControl extends Component {
         return this._keyMap;
     }
 
+    _areAllKeysDown(keyDownMap, keys) {
+        if (!keys || keys.length <= 0) {
+            return true;
+        }
+        if (!keyDownMap) {
+            return false;
+        }
+        for (let i = 0, len = keys.length; i < len; i++) {
+            const key = keys[i];
+            if (!keyDownMap[key])
+                return false;
+        }
+        return true;
+    }
+
+    _isAnyOtherKeyDown(keyDownMap, keyMap) {
+        for (let i = 0, len = keyDownMap.length; i < len; i++) {
+            if (keyDownMap[i]) {
+                if (Array.isArray(keyMap)) {
+                    if (keyMap.indexOf(i) < 0) return true;
+                }
+                else if (i !== keyMap) return true;
+            }
+        }
+        return false;
+    }
+
+    _isMouseAction(action) {
+        switch (action) {
+            case this.MOUSE_ROTATE:
+            case this.MOUSE_DOLLY:
+            case this.MOUSE_PAN:
+                return true;
+            default:
+                return false;
+        }
+    }
+
     /**
      * Returns true if any keys configured for the given action are down.
      * @param action
@@ -100088,14 +100283,21 @@ class CameraControl extends Component {
         if (!keys) {
             return false;
         }
+        if (keys.length === 0 && this._isMouseAction(action)) return true;
         if (!keyDownMap) {
             keyDownMap = this.scene.input.keyDown;
         }
         for (let i = 0, len = keys.length; i < len; i++) {
             const key = keys[i];
-            if (keyDownMap[key]) {
-                return true;
+            if (!Array.isArray(key)) {
+                if (keyDownMap[key] && !this._isAnyOtherKeyDown(keyDownMap, key))
+                    return true;
             }
+            else {
+                if (this._areAllKeysDown(keyDownMap, key) && !this._isAnyOtherKeyDown(keyDownMap, key))
+                    return true;
+            }
+
         }
         return false;
     }
@@ -100531,6 +100733,16 @@ class CameraControl extends Component {
      */
     set panRightClick(value) {
         this._configs.panRightClick = value !== false;
+        const panKeyMap = this._keyMap[this.MOUSE_PAN];
+        if (panKeyMap && panKeyMap.length > 0) {
+            const input = this.scene.input;
+            for (let i = 0, len = panKeyMap.length; i < len; i++) {
+                if (this._configs.panRightClick && panKeyMap[i] === input.MOUSE_MIDDLE_BUTTON) 
+                    this._keyMap[this.MOUSE_PAN][i] = input.MOUSE_RIGHT_BUTTON;
+                else if (!this._configs.panRightClick && panKeyMap[i] === input.MOUSE_RIGHT_BUTTON)
+                    this._keyMap[this.MOUSE_PAN][i] = input.MOUSE_MIDDLE_BUTTON;
+            }
+        }
     }
 
     /**
@@ -110465,19 +110677,15 @@ class Viewer {
 
         for (let i = 0, len = pluginContainerElements.length; i < len; i++) {
             const containerElement = pluginContainerElements[i];
-            //only calculate the scale for first plugin
-            //for all others keep the scale 1 otherwise it will keep multiplying the scale with the base scale of canvas
-            //resulting in increase/decreased size for the the canvas that is being overlapped
-            const scale = i == 0 ? snapshotCanvas.width / containerElement.clientWidth : 1;
-            const off = math.vec2([ 0, 0 ]);
-            transformToNode(canvas, containerElement, off);
             await html2canvas(containerElement, {
                 canvas: snapshotCanvas,
                 backgroundColor: null,
-                x: off[0],
-                y: off[1],
-                scale
+                scale: snapshotCanvas.width / containerElement.clientWidth
             });
+            // Reverts translation and scaling applied to the snapshotCanvas's context
+            // by the html2canvas call (inside the ForeignObjectRenderer's constructor)
+            // (implemented to compensate XCD-153 issue)
+            snapshotCanvas.getContext("2d").resetTransform();
         }
         if (!params.includeGizmos) {
             this.sendToPlugins("snapshotFinished");
@@ -123725,9 +123933,10 @@ class StoreyViewsPlugin extends Plugin {
      * @param {Number[]} worldPos 3D World-space position.
      * @returns {String} ID of the storey containing the position, or null if the position falls outside all the storeys.
      */
-    getStoreyContainingWorldPos(worldPos) {
-        for (var storeyId in this.storeys) {
-            const storey = this.storeys[storeyId];
+    getStoreyContainingWorldPos(worldPos, modelId = null) {
+        const storeys = modelId ? this._filterStoreys(modelId) : this.storeys;
+        for (let storeyId in storeys) {
+            const storey = storeys[storeyId];
             if (math.point3AABB3AbsoluteIntersect(storey.storeyAABB, worldPos)) {
                 return storeyId;
             }
@@ -123741,9 +123950,10 @@ class StoreyViewsPlugin extends Plugin {
      * @param {Number[]} worldPos 3D World-space position.
      * @returns {String} ID of the storey containing the position, or null if the position falls outside all the storeys.
      */
-    getStoreyInVerticalRange(worldPos) {
-        for (let storeyId in this.storeys) {
-            const storey = this.storeys[storeyId];
+    getStoreyInVerticalRange(worldPos, modelId = null) {
+        const storeys = modelId ? this._filterStoreys(modelId) : this.storeys;
+        for (let storeyId in storeys) {
+            const storey = storeys[storeyId];
             const aabb = [0, 0, 0, 0, 0, 0], pos = [0, 0, 0];
             aabb[1] = storey.storeyAABB[1];
             aabb[4] = storey.storeyAABB[4];
@@ -123761,12 +123971,14 @@ class StoreyViewsPlugin extends Plugin {
      * @param {Number[]} worldPos 3D World-space position.
      * @returns {String} ID of the lowest/highest story or null.
      */
-    isPositionAboveOrBelowBuilding(worldPos) {
-        const keys = Object.keys(this.storeys);
+    isPositionAboveOrBelowBuilding(worldPos, modelId = null) {
+        const storeys = modelId ? this._filterStoreys(modelId) : this.storeys;
+        const keys = Object.keys(storeys);
+        if(keys.length <= 0) return null;
         const ids = [keys[0], keys[keys.length - 1]];
-        if (worldPos[1] < this.storeys[ids[0]].storeyAABB[1])
+        if (worldPos[1] < storeys[ids[0]].storeyAABB[1])
             return ids[0];
-        else if (worldPos[1] > this.storeys[ids[1]].storeyAABB[4])
+        else if (worldPos[1] > storeys[ids[1]].storeyAABB[4])
             return ids[1];
         return null;
     }
@@ -123890,8 +124102,8 @@ class StoreyViewsPlugin extends Plugin {
 
             if (storey1MetaObject && (storey1MetaObject.attributes && storey1MetaObject.attributes.elevation !== undefined) &&
                 storey2MetaObject && (storey2MetaObject.attributes && storey2MetaObject.attributes.elevation !== undefined)) {
-                const elevation1 = storey1MetaObject.attributes.elevation;
-                const elevation2 = storey2MetaObject.attributes.elevation;
+                const elevation1 = Number.parseFloat(storey1MetaObject.attributes.elevation);
+                const elevation2 = Number.parseFloat(storey2MetaObject.attributes.elevation);
                 if (elevation1 > elevation2) {
                     return -1;
                 }
@@ -123910,6 +124122,12 @@ class StoreyViewsPlugin extends Plugin {
             }
         });
     }
+
+    _filterStoreys(modelId) {
+        return Object.fromEntries(
+            Object.entries(this.storeys).filter(([_, value]) => value.modelId === modelId)
+        );
+    }
 }
 
 const zeroVec = new Float64Array([0, 0, 1]);
@@ -127473,7 +127691,7 @@ class TreeViewPlugin extends Plugin {
             return;
         }
         const firstChild = children[0];
-        if (this._hierarchy === "storeys" && firstChild.type === "IfcBuildingStorey") {
+        if ((this._hierarchy === "storeys" || this._hierarchy === "containment") &&  firstChild.type === "IfcBuildingStorey") {
             children.sort(this._getSpatialSortFunc());
         } else {
             children.sort(this._alphaSortFunc);
@@ -127484,36 +127702,30 @@ class TreeViewPlugin extends Plugin {
         }
     }
 
-    _getSpatialSortFunc() { // Creates cached sort func with Viewer in scope
+    _getSpatialSortFunc() {
         const viewer = this.viewer;
         const scene = viewer.scene;
         const camera = scene.camera;
-        const metaScene = viewer.metaScene;
-        return this._spatialSortFunc || (this._spatialSortFunc = (node1, node2) => {
-            if (!node1.aabb || !node2.aabb) {
-                // Sorting on lowest point of the AABB is likely more more robust when objects could overlap storeys
-                if (!node1.aabb) {
-                    node1.aabb = scene.getAABB(metaScene.getObjectIDsInSubtree(node1.objectId));
+        return this._spatialSortFunc || (this._spatialSortFunc = (storey1, storey2) => {
+            if (camera.xUp) ; else if (camera.yUp) ; else ;
+            const metaScene = this.viewer.metaScene;
+            const storey1MetaObject = metaScene.metaObjects[storey1.objectId];
+            const storey2MetaObject = metaScene.metaObjects[storey2.objectId];
+
+            if (storey1MetaObject && (storey1MetaObject.attributes && storey1MetaObject.attributes.elevation !== undefined) &&
+                storey2MetaObject && (storey2MetaObject.attributes && storey2MetaObject.attributes.elevation !== undefined)) {
+                const elevation1 = Number.parseFloat(storey1MetaObject.attributes.elevation);
+                const elevation2 = Number.parseFloat(storey2MetaObject.attributes.elevation);
+                if (elevation1 > elevation2) {
+                    return -1;
                 }
-                if (!node2.aabb) {
-                    node2.aabb = scene.getAABB(metaScene.getObjectIDsInSubtree(node2.objectId));
+                if (elevation1 < elevation2) {
+                    return 1;
                 }
-            }
-            let idx = 0;
-            if (camera.xUp) {
-                idx = 0;
-            } else if (camera.yUp) {
-                idx = 1;
+                return 0;
             } else {
-                idx = 2;
-            }
-            if (node1.aabb[idx] > node2.aabb[idx]) {
-                return -1;
-            }
-            if (node1.aabb[idx] < node2.aabb[idx]) {
-                return 1;
+                return 0;
             }
-            return 0;
         });
     }