@xeokit/xeokit-sdk 2.6.32 → 2.6.34

package/dist/xeokit-sdk.cjs.js

@@ -1038,20 +1038,23 @@ class PointerLens {
         this._lensCursorDiv.style.pointerEvents = "none";
 
         this._lensContainer = document.createElement('div');
+        this._lensContainerId = cfg.containerId || 'xeokit-lens';
+        this._lensContainer.setAttribute("id", this._lensContainerId);
+
         this._lensContainer.style.border = "1px solid black";
         this._lensContainer.style.background = "white";
     //    this._lensContainer.style.opacity = "0";
         this._lensContainer.style.borderRadius = "50%";
         this._lensContainer.style.width = "300px";
         this._lensContainer.style.height = "300px";
-        this._lensContainer.style.marginTop = "85px";
-        this._lensContainer.style.marginLeft = "25px";
+        
         this._lensContainer.style.zIndex = "15000";
         this._lensContainer.style.position = "absolute";
         this._lensContainer.style.pointerEvents = "none";
         this._lensContainer.style.visibility = "hidden";
 
         this._lensCanvas = document.createElement('canvas');
+        this._lensCanvas.id = `${this._lensContainerId}-canvas`;
         // this._lensCanvas.style.background = "darkblue";
         this._lensCanvas.style.borderRadius = "50%";
 
@@ -1068,7 +1071,12 @@ class PointerLens {
 
         this._canvasPos = null;
         this._snappedCanvasPos = null;
-        this._lensPosToggle = true;
+        this._lensPosToggle = cfg.lensPosToggle || true;
+        this._lensPosToggleAmount = cfg.lensPosToggleAmount || 85;
+        this._lensPosMarginLeft = cfg.lensPosMarginLeft || 85;
+        this._lensPosMarginTop = cfg.lensPosMarginTop || 25;
+        this._lensContainer.style.marginTop = `${this._lensPosMarginTop}px`;
+        this._lensContainer.style.marginLeft = `${this._lensPosMarginLeft}px`;
 
         this._zoomLevel = cfg.zoomLevel || 2;
 
@@ -1098,12 +1106,12 @@ class PointerLens {
         const pointerOnLens =
             this._canvasPos[0] < lensRect.right && this._canvasPos[0] > lensRect.left &&
             this._canvasPos[1] < lensRect.bottom && this._canvasPos[1] > lensRect.top;
-        this._lensContainer.style.marginLeft = `25px`;
+            this._lensContainer.style.marginLeft = `${this._lensPosMarginLeft}px`;
         if (pointerOnLens) {
             if (this._lensPosToggle) {
-                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - 85}px`;
+                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - this._lensPosToggleAmount}px`;
             } else {
-                this._lensContainer.style.marginTop = `85px`;
+                this._lensContainer.style.marginTop = `${this._lensPosMarginTop}px`;
             }
             this._lensPosToggle = !this._lensPosToggle;
         }
@@ -50864,7 +50872,7 @@ class MeshVolume {
             volume += math.dotVec3(v1$1, v3$1);
         }
 
-        return volume;
+        return volume / 6;
     }
 }
 
@@ -61388,7 +61396,7 @@ class VBOInstancingTrianglesLayer {
      */
     constructor(cfg) {
 
-      //   console.info("Creating VBOInstancingTrianglesLayer");
+        //   console.info("Creating VBOInstancingTrianglesLayer");
 
         /**
          * Owner model
@@ -61730,7 +61738,9 @@ class VBOInstancingTrianglesLayer {
             && !!textureSet
             && !!textureSet.colorTexture;
 
-        this._state.geometry = null;
+        if (!this.model.scene.readableGeometryEnabled) {
+            this._state.geometry = null;
+        }
 
         this._finalized = true;
     }
@@ -62057,11 +62067,11 @@ class VBOInstancingTrianglesLayer {
             this.model.error("portion not found: " + portionId);
             return;
         }
-        const positions = geometry.quantizedPositions;
+        const positions = geometry.positionsCompressed;
         const origin = state.origin;
-        const offsetX = origin[0] ;
-        const offsetY = origin[1] ;
-        const offsetZ = origin[2] ;
+        const offsetX = origin[0];
+        const offsetY = origin[1];
+        const offsetZ = origin[2];
         const worldPos = tempVec4a$7;
         const portionMatrix = portion.matrix;
         const sceneModelMatrix = this.model.matrix;
@@ -62137,7 +62147,7 @@ class VBOInstancingTrianglesLayer {
             return;
         }
         this._updateBackfaceCull(renderFlags, frameCtx);
-        const useAlphaCutoff = this._state.textureSet && (typeof(this._state.textureSet.alphaCutoff) === "number");
+        const useAlphaCutoff = this._state.textureSet && (typeof (this._state.textureSet.alphaCutoff) === "number");
         if (frameCtx.withSAO && this.model.saoEnabled) {
             if (frameCtx.pbrEnabled && this.model.pbrEnabled && this._state.pbrSupported) {
                 if (this._renderers.pbrRendererWithSAO) {
@@ -65557,7 +65567,9 @@ class VBOInstancingLinesLayer {
             this._modelMatrixCol1 = [];
             this._modelMatrixCol2 = [];
         }
-        this._state.geometry = null;
+        if (!this.model.scene.readableGeometryEnabled) {
+            this._state.geometry = null;
+        }
         this._finalized = true;
     }
 
@@ -87793,6 +87805,7 @@ function colorizeToRGB(color) {
 }
 
 const distVec3 = math.vec3();
+const tmpVec3 = math.vec3();
 
 const lengthWire = (x1, y1, x2, y2) => {
     var a = x1 - x2;
@@ -88103,6 +88116,44 @@ class DistanceMeasurement extends Component {
         this.labelsVisible = cfg.labelsVisible;
         this.labelsOnWires = cfg.labelsOnWires;
         this.useRotationAdjustment = cfg.useRotationAdjustment;
+
+        /**
+         * @type {number[]}
+         */
+        this._axesBasis = [
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1,
+        ];
+    }
+
+    /**
+     * Sets the axes basis for the measurement.
+     * 
+     * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
+     * 
+     * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
+     * 
+     * @param {number[]} value 
+     */
+    set axesBasis(value) {
+        this._axesBasis = value.slice();
+        this._wpDirty = true;
+        this._needUpdate(0); // No lag
+    }
+
+    /**
+     * Gets the axes basis for the measurement.
+     * 
+     * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
+     * 
+     * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
+     * 
+     * @type {number[]}
+     */
+    get axesBasis() {
+        return this._axesBasis;
     }
 
     _update() {
@@ -88138,20 +88189,30 @@ class DistanceMeasurement extends Component {
                 this._wp[15] = 1.0;
             }
             else {
+                const delta = math.subVec3(
+                    this._targetWorld,
+                    this._originWorld,
+                    tmpVec3
+                );
+
+                /**
+                 * The length detected for each measurement axis.
+                 */
+                this._factors = math.transformVec3(this._axesBasis, delta);
+
                 this._wp[0] = this._originWorld[0];
                 this._wp[1] = this._originWorld[1];
                 this._wp[2] = this._originWorld[2];
                 this._wp[3] = 1.0;
 
-                this._wp[4] = this._targetWorld[0];
-                this._wp[5] = this._originWorld[1];
-                this._wp[6] = this._originWorld[2];
+                this._wp[4] = this._originWorld[0] + this._axesBasis[0]*this._factors[0];
+                this._wp[5] = this._originWorld[1] + this._axesBasis[4]*this._factors[0];
+                this._wp[6] = this._originWorld[2] + this._axesBasis[8]*this._factors[0];
                 this._wp[7] = 1.0;
 
-                this._wp[8] = this._targetWorld[0];
-                this._wp[9] = this._targetWorld[1];
-                this._wp[10] = this._originWorld[2];
-                this._wp[11] = 1.0;
+                this._wp[8] = this._originWorld[0] + this._axesBasis[0]*this._factors[0]+ this._axesBasis[1]*this._factors[1];
+                this._wp[9] = this._originWorld[1] + this._axesBasis[4]*this._factors[0]+ this._axesBasis[5]*this._factors[1];
+                this._wp[10] = this._originWorld[2] + this._axesBasis[8]*this._factors[0]+ this._axesBasis[9]*this._factors[1];                this._wp[11] = 1.0;
 
                 this._wp[12] = this._targetWorld[0];
                 this._wp[13] = this._targetWorld[1];
@@ -88312,14 +88373,14 @@ class DistanceMeasurement extends Component {
                 }
 
                 if (!this._xAxisLabelCulled) {
-                    this._xAxisLabel.setText(tilde + Math.abs((this._targetWorld[0] - this._originWorld[0]) * scale).toFixed(2) + unitAbbrev);
+                    this._xAxisLabel.setText(tilde + Math.abs(this._factors[0] * scale).toFixed(2) + unitAbbrev);
                     this._xAxisLabel.setCulled(!this.axisVisible);
                 } else {
                     this._xAxisLabel.setCulled(true);
                 }
 
                 if (!this._yAxisLabelCulled) {
-                    this._yAxisLabel.setText(tilde + Math.abs((this._targetWorld[1] - this._originWorld[1]) * scale).toFixed(2) + unitAbbrev);
+                    this._yAxisLabel.setText(tilde + Math.abs(this._factors[1] * scale).toFixed(2) + unitAbbrev);
                     this._yAxisLabel.setCulled(!this.axisVisible);
                 } else {
                     this._yAxisLabel.setCulled(true);
@@ -88332,7 +88393,7 @@ class DistanceMeasurement extends Component {
                     }
                     else {
                         this._zAxisLabel.setPrefix("Z");
-                        this._zAxisLabel.setText(tilde + Math.abs((this._targetWorld[2] - this._originWorld[2]) * scale).toFixed(2) + unitAbbrev);
+                        this._zAxisLabel.setText(tilde + Math.abs(this._factors[2] * scale).toFixed(2) + unitAbbrev);
                     }
                     this._zAxisLabel.setCulled(!this.axisVisible);
                 } else {

package/dist/xeokit-sdk.es.js

@@ -1034,20 +1034,23 @@ class PointerLens {
         this._lensCursorDiv.style.pointerEvents = "none";
 
         this._lensContainer = document.createElement('div');
+        this._lensContainerId = cfg.containerId || 'xeokit-lens';
+        this._lensContainer.setAttribute("id", this._lensContainerId);
+
         this._lensContainer.style.border = "1px solid black";
         this._lensContainer.style.background = "white";
     //    this._lensContainer.style.opacity = "0";
         this._lensContainer.style.borderRadius = "50%";
         this._lensContainer.style.width = "300px";
         this._lensContainer.style.height = "300px";
-        this._lensContainer.style.marginTop = "85px";
-        this._lensContainer.style.marginLeft = "25px";
+        
         this._lensContainer.style.zIndex = "15000";
         this._lensContainer.style.position = "absolute";
         this._lensContainer.style.pointerEvents = "none";
         this._lensContainer.style.visibility = "hidden";
 
         this._lensCanvas = document.createElement('canvas');
+        this._lensCanvas.id = `${this._lensContainerId}-canvas`;
         // this._lensCanvas.style.background = "darkblue";
         this._lensCanvas.style.borderRadius = "50%";
 
@@ -1064,7 +1067,12 @@ class PointerLens {
 
         this._canvasPos = null;
         this._snappedCanvasPos = null;
-        this._lensPosToggle = true;
+        this._lensPosToggle = cfg.lensPosToggle || true;
+        this._lensPosToggleAmount = cfg.lensPosToggleAmount || 85;
+        this._lensPosMarginLeft = cfg.lensPosMarginLeft || 85;
+        this._lensPosMarginTop = cfg.lensPosMarginTop || 25;
+        this._lensContainer.style.marginTop = `${this._lensPosMarginTop}px`;
+        this._lensContainer.style.marginLeft = `${this._lensPosMarginLeft}px`;
 
         this._zoomLevel = cfg.zoomLevel || 2;
 
@@ -1094,12 +1102,12 @@ class PointerLens {
         const pointerOnLens =
             this._canvasPos[0] < lensRect.right && this._canvasPos[0] > lensRect.left &&
             this._canvasPos[1] < lensRect.bottom && this._canvasPos[1] > lensRect.top;
-        this._lensContainer.style.marginLeft = `25px`;
+            this._lensContainer.style.marginLeft = `${this._lensPosMarginLeft}px`;
         if (pointerOnLens) {
             if (this._lensPosToggle) {
-                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - 85}px`;
+                this._lensContainer.style.marginTop = `${canvasRect.bottom - canvasRect.top - this._lensCanvas.height - this._lensPosToggleAmount}px`;
             } else {
-                this._lensContainer.style.marginTop = `85px`;
+                this._lensContainer.style.marginTop = `${this._lensPosMarginTop}px`;
             }
             this._lensPosToggle = !this._lensPosToggle;
         }
@@ -50860,7 +50868,7 @@ class MeshVolume {
             volume += math.dotVec3(v1$1, v3$1);
         }
 
-        return volume;
+        return volume / 6;
     }
 }
 
@@ -61384,7 +61392,7 @@ class VBOInstancingTrianglesLayer {
      */
     constructor(cfg) {
 
-      //   console.info("Creating VBOInstancingTrianglesLayer");
+        //   console.info("Creating VBOInstancingTrianglesLayer");
 
         /**
          * Owner model
@@ -61726,7 +61734,9 @@ class VBOInstancingTrianglesLayer {
             && !!textureSet
             && !!textureSet.colorTexture;
 
-        this._state.geometry = null;
+        if (!this.model.scene.readableGeometryEnabled) {
+            this._state.geometry = null;
+        }
 
         this._finalized = true;
     }
@@ -62053,11 +62063,11 @@ class VBOInstancingTrianglesLayer {
             this.model.error("portion not found: " + portionId);
             return;
         }
-        const positions = geometry.quantizedPositions;
+        const positions = geometry.positionsCompressed;
         const origin = state.origin;
-        const offsetX = origin[0] ;
-        const offsetY = origin[1] ;
-        const offsetZ = origin[2] ;
+        const offsetX = origin[0];
+        const offsetY = origin[1];
+        const offsetZ = origin[2];
         const worldPos = tempVec4a$7;
         const portionMatrix = portion.matrix;
         const sceneModelMatrix = this.model.matrix;
@@ -62133,7 +62143,7 @@ class VBOInstancingTrianglesLayer {
             return;
         }
         this._updateBackfaceCull(renderFlags, frameCtx);
-        const useAlphaCutoff = this._state.textureSet && (typeof(this._state.textureSet.alphaCutoff) === "number");
+        const useAlphaCutoff = this._state.textureSet && (typeof (this._state.textureSet.alphaCutoff) === "number");
         if (frameCtx.withSAO && this.model.saoEnabled) {
             if (frameCtx.pbrEnabled && this.model.pbrEnabled && this._state.pbrSupported) {
                 if (this._renderers.pbrRendererWithSAO) {
@@ -65553,7 +65563,9 @@ class VBOInstancingLinesLayer {
             this._modelMatrixCol1 = [];
             this._modelMatrixCol2 = [];
         }
-        this._state.geometry = null;
+        if (!this.model.scene.readableGeometryEnabled) {
+            this._state.geometry = null;
+        }
         this._finalized = true;
     }
 
@@ -87789,6 +87801,7 @@ function colorizeToRGB(color) {
 }
 
 const distVec3 = math.vec3();
+const tmpVec3 = math.vec3();
 
 const lengthWire = (x1, y1, x2, y2) => {
     var a = x1 - x2;
@@ -88099,6 +88112,44 @@ class DistanceMeasurement extends Component {
         this.labelsVisible = cfg.labelsVisible;
         this.labelsOnWires = cfg.labelsOnWires;
         this.useRotationAdjustment = cfg.useRotationAdjustment;
+
+        /**
+         * @type {number[]}
+         */
+        this._axesBasis = [
+            1, 0, 0, 0,
+            0, 1, 0, 0,
+            0, 0, 1, 0,
+            0, 0, 0, 1,
+        ];
+    }
+
+    /**
+     * Sets the axes basis for the measurement.
+     * 
+     * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
+     * 
+     * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
+     * 
+     * @param {number[]} value 
+     */
+    set axesBasis(value) {
+        this._axesBasis = value.slice();
+        this._wpDirty = true;
+        this._needUpdate(0); // No lag
+    }
+
+    /**
+     * Gets the axes basis for the measurement.
+     * 
+     * The value is a 4x4 matrix where each column-vector defines an axis and must have unit length.
+     * 
+     * This is the ```identity``` matrix by default, meaning the measurement axes are the same as the world axes.
+     * 
+     * @type {number[]}
+     */
+    get axesBasis() {
+        return this._axesBasis;
     }
 
     _update() {
@@ -88134,20 +88185,30 @@ class DistanceMeasurement extends Component {
                 this._wp[15] = 1.0;
             }
             else {
+                const delta = math.subVec3(
+                    this._targetWorld,
+                    this._originWorld,
+                    tmpVec3
+                );
+
+                /**
+                 * The length detected for each measurement axis.
+                 */
+                this._factors = math.transformVec3(this._axesBasis, delta);
+
                 this._wp[0] = this._originWorld[0];
                 this._wp[1] = this._originWorld[1];
                 this._wp[2] = this._originWorld[2];
                 this._wp[3] = 1.0;
 
-                this._wp[4] = this._targetWorld[0];
-                this._wp[5] = this._originWorld[1];
-                this._wp[6] = this._originWorld[2];
+                this._wp[4] = this._originWorld[0] + this._axesBasis[0]*this._factors[0];
+                this._wp[5] = this._originWorld[1] + this._axesBasis[4]*this._factors[0];
+                this._wp[6] = this._originWorld[2] + this._axesBasis[8]*this._factors[0];
                 this._wp[7] = 1.0;
 
-                this._wp[8] = this._targetWorld[0];
-                this._wp[9] = this._targetWorld[1];
-                this._wp[10] = this._originWorld[2];
-                this._wp[11] = 1.0;
+                this._wp[8] = this._originWorld[0] + this._axesBasis[0]*this._factors[0]+ this._axesBasis[1]*this._factors[1];
+                this._wp[9] = this._originWorld[1] + this._axesBasis[4]*this._factors[0]+ this._axesBasis[5]*this._factors[1];
+                this._wp[10] = this._originWorld[2] + this._axesBasis[8]*this._factors[0]+ this._axesBasis[9]*this._factors[1];                this._wp[11] = 1.0;
 
                 this._wp[12] = this._targetWorld[0];
                 this._wp[13] = this._targetWorld[1];
@@ -88308,14 +88369,14 @@ class DistanceMeasurement extends Component {
                 }
 
                 if (!this._xAxisLabelCulled) {
-                    this._xAxisLabel.setText(tilde + Math.abs((this._targetWorld[0] - this._originWorld[0]) * scale).toFixed(2) + unitAbbrev);
+                    this._xAxisLabel.setText(tilde + Math.abs(this._factors[0] * scale).toFixed(2) + unitAbbrev);
                     this._xAxisLabel.setCulled(!this.axisVisible);
                 } else {
                     this._xAxisLabel.setCulled(true);
                 }
 
                 if (!this._yAxisLabelCulled) {
-                    this._yAxisLabel.setText(tilde + Math.abs((this._targetWorld[1] - this._originWorld[1]) * scale).toFixed(2) + unitAbbrev);
+                    this._yAxisLabel.setText(tilde + Math.abs(this._factors[1] * scale).toFixed(2) + unitAbbrev);
                     this._yAxisLabel.setCulled(!this.axisVisible);
                 } else {
                     this._yAxisLabel.setCulled(true);
@@ -88328,7 +88389,7 @@ class DistanceMeasurement extends Component {
                     }
                     else {
                         this._zAxisLabel.setPrefix("Z");
-                        this._zAxisLabel.setText(tilde + Math.abs((this._targetWorld[2] - this._originWorld[2]) * scale).toFixed(2) + unitAbbrev);
+                        this._zAxisLabel.setText(tilde + Math.abs(this._factors[2] * scale).toFixed(2) + unitAbbrev);
                     }
                     this._zAxisLabel.setCulled(!this.axisVisible);
                 } else {