three-cad-viewer 3.3.0 → 3.3.2

package/dist/three-cad-viewer.esm.js

@@ -57634,6 +57634,7 @@ class Measurement {
     this.selectedShapes = []; // array of dict ObjectGroup, bool
     this.point1 = null;
     this.point2 = null;
+    this.middlePoint = null;
     this.contextEnabled = false; // Tells if the measure context is active
     this.viewer = viewer;
     this.scene = new Scene();
@@ -57782,9 +57783,29 @@ class Measurement {
 
     const canvasRect = this.viewer.renderer.domElement.getBoundingClientRect();
     const panelRect = this.panel.html.getBoundingClientRect();
-    if (this.panelX == null) {
-      this.panelX = canvasRect.width - panelRect.width - 2;
-      this.panelY = canvasRect.height - panelRect.height - 2;
+
+    if (this.panelX == null && this.middlePoint != null) {
+      let center = this.middlePoint
+        .clone()
+        .project(this.viewer.camera.getCamera());
+      let panelX = (center.x + 1) * (canvasRect.width / 2);
+      let panelY = (1 - center.y) * (canvasRect.height / 2);
+
+      if (panelX < canvasRect.width / 2) {
+        this.panelX = panelX + panelRect.width / 2;
+      } else {
+        this.panelX = panelX - panelRect.width - panelRect.width / 2;
+      }
+      this.panelX = Math.max(
+        0,
+        Math.min(canvasRect.width - panelRect.width, this.panelX),
+      );
+
+      this.panelY = panelY;
+      this.panelY = Math.max(
+        0,
+        Math.min(canvasRect.height - panelRect.height, this.panelY),
+      );
     }
 
     this.panel.relocate(this.panelX, this.panelY);
@@ -57901,6 +57922,7 @@ class DistanceMeasurement extends Measurement {
     super(viewer, new DistancePanel(viewer.display));
     this.point1 = null;
     this.point2 = null;
+    this.middlePoint = null;
   }
 
   _setMeasurementVals() {
@@ -57938,13 +57960,13 @@ class DistanceMeasurement extends Measurement {
     );
     this.scene.add(distanceLine);
 
-    const middlePoint = new Vector3()
+    this.middlePoint = new Vector3()
       .addVectors(this.point1, this.point2)
       .multiplyScalar(0.5);
     const connectingLine = new DistanceLineArrow(
       this.coneLength,
       this.panelCenter,
-      middlePoint,
+      this.middlePoint,
       lineWidth,
       this.connectingLineColor,
       false,
@@ -57971,6 +57993,7 @@ class DistanceMeasurement extends Measurement {
 class PropertiesMeasurement extends Measurement {
   constructor(viewer) {
     super(viewer, new PropertiesPanel(viewer.display));
+    this.middlePoint = null;
   }
 
   _setMeasurementVals() {
@@ -58000,11 +58023,11 @@ class PropertiesMeasurement extends Measurement {
 
   _makeLines() {
     const lineWidth = 1.5;
-    const middlePoint = this.responseData.center;
+    this.middlePoint = this.responseData.center;
     const connectingLine = new DistanceLineArrow(
       this.coneLength,
       this.panelCenter,
-      middlePoint,
+      this.middlePoint,
       lineWidth,
       this.connectingLineColor,
       false,
@@ -58028,6 +58051,7 @@ class PropertiesMeasurement extends Measurement {
 class AngleMeasurement extends Measurement {
   constructor(viewer) {
     super(viewer, new AnglePanel(viewer.display));
+    this.middlePoint = null;
   }
 
   _setMeasurementVals() {
@@ -58087,6 +58111,9 @@ class AngleMeasurement extends Measurement {
     );
     this.scene.add(item1Line);
     this.scene.add(item2Line);
+    this.middlePoint = new Vector3()
+      .addVectors(this.point1, this.point2)
+      .multiplyScalar(0.5);
   }
 
   handleResponse(response) {
@@ -58369,10 +58396,10 @@ class Display {
       (options.theme == "browser" &&
         window.matchMedia("(prefers-color-scheme: dark)").matches)
     ) {
-      document.documentElement.setAttribute("data-theme", "dark");
+      this.container.setAttribute("data-theme", "dark");
       theme = "dark";
     } else {
-      document.documentElement.setAttribute("data-theme", "light");
+      this.container.setAttribute("data-theme", "light");
       theme = "light";
     }
 
@@ -59766,7 +59793,16 @@ class BoundingBox extends Box3 {
     const children = object.children;
 
     for (let i = 0, l = children.length; i < l; i++) {
-      this.expandByObject(children[i], precise);
+      if (
+        !(
+          children[i].name == "PlaneMeshes" &&
+          children[i].children &&
+          children[i].children.length > 0 &&
+          children[i].children[0].type.startsWith("StencilPlane")
+        )
+      ) {
+        this.expandByObject(children[i], precise);
+      }
     }
 
     return this;
@@ -62281,6 +62317,33 @@ class TreeView {
    *  Tree handling high level API
    ************************************************************************************/
 
+  /**
+   * Scrolls the parent container to center the specified element within the visible area.
+   * Ensures the scrolling does not exceed the scrollable bounds of the parent container.
+   *
+   * @param {HTMLElement} element - The DOM element to center within the scroll container.
+   */
+  scrollCentered(element) {
+    if (element != null) {
+      let parent = this.scrollContainer;
+
+      // Calculate the center position of the element relative to the parent
+      const elementHeight = element.offsetHeight;
+      const parentHeight = parent.clientHeight;
+
+      // Calculate scroll position that would center the element
+      const elementOffset = element.offsetTop - parent.offsetTop;
+      const scrollTop = elementOffset - parentHeight / 2 + elementHeight / 2;
+
+      // Ensure we don't scroll beyond the parent's scrollable area
+      const maxScroll = parent.scrollHeight - parentHeight;
+      const clampedScrollTop = Math.max(0, Math.min(scrollTop, maxScroll));
+
+      // Perform the scroll
+      parent.scrollTo({ top: clampedScrollTop, behavior: "smooth" });
+    }
+  }
+
   /**
    * Opens the specified path in the tree view.
    *
@@ -62290,13 +62353,11 @@ class TreeView {
     const parts = path.split("/").filter(Boolean);
     var current = "";
     var node;
+    let el;
     for (var part of parts) {
       current += "/" + part;
       node = this.findNodeByPath(current);
-      const el = this.getDomNode(current);
-      if (el != null) {
-        el.children[0].scrollIntoView({ behaviour: "smooth", block: "center" });
-      }
+      el = this.getDomNode(current);
       if (node) {
         node.expanded = true;
         this.showChildContainer(node);
@@ -62309,6 +62370,7 @@ class TreeView {
         break;
       }
     }
+    this.scrollCentered(el);
     this.toggleLabelColor(node);
   }
 
@@ -62324,7 +62386,8 @@ class TreeView {
       this.showChildContainer(node);
       const el = this.getDomNode(path);
       if (el != null) {
-        el.scrollIntoView({ behaviour: "smooth", block: "start" });
+        const parent = this.scrollContainer;
+        parent.scrollTop = el.offsetTop - parent.offsetTop;
       }
       if (this.debug) {
         console.log("update => collapsePath");
@@ -62356,7 +62419,10 @@ class TreeView {
     };
     this.traverse(this.root, setLevel);
     const el = this.getDomNode(this.getNodePath(this.root));
-    el.scrollIntoView({ behaviour: "smooth", block: "start" });
+    if (el != null) {
+      const parent = this.scrollContainer;
+      parent.scrollTop = el.offsetTop - parent.offsetTop;
+    }
     for (var i = 0; i <= (level == -1 ? this.maxLevel : level); i++) {
       if (this.debug) {
         console.log("update => openLevel");
@@ -64985,7 +65051,7 @@ class Camera {
   }
 }
 
-const version = "3.3.0";
+const version = "3.3.2";
 
 Mesh.prototype.dispose = function () {
   if (this.geometry) {
@@ -66312,9 +66378,9 @@ class Viewer {
 
     this.display.setSliderLimits(this.gridSize / 2, this.bbox.center());
 
-    this.setClipNormal(0, viewerOptions.clipNormal0, true);
-    this.setClipNormal(1, viewerOptions.clipNormal1, true);
-    this.setClipNormal(2, viewerOptions.clipNormal2, true);
+    this.setClipNormal(0, viewerOptions.clipNormal0, null, true);
+    this.setClipNormal(1, viewerOptions.clipNormal1, null, true);
+    this.setClipNormal(2, viewerOptions.clipNormal2, null, true);
 
     this.clipSlider0 =
       viewerOptions.clipSlider0 != null
@@ -67047,39 +67113,120 @@ class Viewer {
     this.update(this.updateMarker);
   };
 
+  /**
+   * Get intensity of ambient light.
+   * @returns {number} ambientLight value.
+   **/
+  getAmbientLight() {
+    return this.ambientIntensity;
+  }
+
+  /**
+   * Set the intensity of ambient light
+   * @function
+   * @param {number} val - the new ambient light intensity
+   * @param {boolean} [ui=false] - if true, set the UI slider value
+   * @param {boolean} [notify=true] - whether to send notification or not.
+   */
+  setAmbientLight = (val, ui = false, notify = true) => {
+    this.ambientIntensity = val;
+    this.ambientLight.intensity = scaleLight(val);
+    this.checkChanges({ ambient_intensity: val }, notify);
+    this.update(this.updateMarker, notify);
+    if (ui) {
+      this.display.setAmbientLight(val);
+    }
+  };
+
+  /**
+   * Get intensity of direct light.
+   * @returns {number} directLight value.
+   **/
+  getDirectLight() {
+    return this.directIntensity;
+  }
+  /**
+   * Set the intensity of directional light
+   * @function
+   * @param {number} val - the new direct light intensity
+   * @param {boolean} [ui=false] - if true, set the UI slider value
+   * @param {boolean} [notify=true] - whether to send notification or not.
+   */
+  setDirectLight = (val, ui = false, notify = true) => {
+    this.directIntensity = val;
+    this.directLight.intensity = scaleLight(val);
+    this.checkChanges({ direct_intensity: val }, notify);
+    this.update(this.updateMarker, notify);
+    if (ui) {
+      this.display.setDirectLight(val);
+    }
+  };
+
+  /**
+   * Retrieves the metalness value.
+   *
+   * @returns {number} The current metalness value.
+   */
   getMetalness = () => {
     return this.metalness;
   };
 
-  setMetalness = (value, notify = true) => {
+  /**
+   * Sets the metalness value for the viewer and updates related properties.
+   *
+   * @param {number} value - The metalness value to set.
+   * @param {boolean} [ui=false] - Whether to update the UI with the new metalness value.
+   * @param {boolean} [notify=true] - Whether to notify about the changes.
+   */
+  setMetalness = (value, ui = false, notify = true) => {
     this.metalness = value;
     this.nestedGroup.setMetalness(value);
     this.checkChanges({ metalness: value }, notify);
     this.update(this.updateMarker);
+    if (ui) {
+      this.display.setMetalness(value);
+    }
   };
+
+  /**
+   * Retrieves the roughness value.
+   *
+   * @returns {number} The current roughness value.
+   */
   getRoughness = () => {
     return this.roughness;
   };
 
-  setRoughness = (value, notify = true) => {
+  /**
+   * Sets the roughness value for the viewer and updates related components.
+   *
+   * @param {number} value - The roughness value to set.
+   * @param {boolean} [ui=false] - Whether to update the UI directly.
+   * @param {boolean} [notify=true] - Whether to notify about the changes.
+   * @returns {void}
+   */
+  setRoughness = (value, ui = false, notify = true) => {
     this.roughness = value;
     this.nestedGroup.setRoughness(value);
     this.checkChanges({ roughness: value }, notify);
     this.update(this.updateMarker);
+    if (ui) {
+      this.display.setRoughness(value);
+    }
   };
 
+  /**
+   * Resets the material settings of the viewer to their default values.
+   * Updates the metalness, roughness, ambient light intensity, and direct light intensity
+   * based on the current material settings.
+   *
+   * @returns {void}
+   */
   resetMaterial = () => {
-    this.setMetalness(this.materialSettings.metalness, true);
-    this.display.setMetalness(this.materialSettings.metalness);
-
-    this.setRoughness(this.materialSettings.roughness, true);
-    this.display.setRoughness(this.materialSettings.roughness);
-
-    this.setAmbientLight(this.materialSettings.ambientIntensity, true);
-    this.display.setAmbientLight(this.materialSettings.ambientIntensity);
-
-    this.setDirectLight(this.materialSettings.directIntensity, true);
-    this.display.setDirectLight(this.materialSettings.directIntensity);
+    this.setMetalness(this.materialSettings.metalness, true, true);
+    this.setRoughness(this.materialSettings.roughness, true, true);
+    this.setAmbientLight(this.materialSettings.ambientIntensity, true, true);
+    this.setDirectLight(this.materialSettings.directIntensity, true, true);
   };
 
   /**
@@ -67316,47 +67463,6 @@ class Viewer {
     this.update(this.updateMarker, notify);
   };
 
-  /**
-   * Get intensity of ambient light.
-   * @returns {number} ambientLight value.
-   **/
-  getAmbientLight() {
-    return this.ambientIntensity;
-  }
-
-  /**
-   * Set the intensity of ambient light
-   * @function
-   * @param {number} val - the new ambient light intensity
-   * @param {boolean} [notify=true] - whether to send notification or not.
-   */
-  setAmbientLight = (val, notify = true) => {
-    this.ambientIntensity = val;
-    this.ambientLight.intensity = scaleLight(val);
-    this.checkChanges({ ambient_intensity: val }, notify);
-    this.update(this.updateMarker, notify);
-  };
-
-  /**
-   * Get intensity of direct light.
-   * @returns {number} directLight value.
-   **/
-  getDirectLight() {
-    return this.directIntensity;
-  }
-  /**
-   * Set the intensity of directional light
-   * @function
-   * @param {number} val - the new direct light intensity
-   * @param {boolean} [notify=true] - whether to send notification or not.
-   */
-  setDirectLight = (val, notify = true) => {
-    this.directIntensity = val;
-    this.directLight.intensity = scaleLight(val);
-    this.checkChanges({ direct_intensity: val }, notify);
-    this.update(this.updateMarker, notify);
-  };
-
   /**
    * Get states of a treeview leafs.
    **/
@@ -67577,19 +67683,22 @@ class Viewer {
    * @function
    * @param {number} index - index of the normal: 0, 1 ,2
    * @param {number[]} normal - 3 dim array representing the normal
+   * @param {number} [value=null] - value of the slider, if given
    * @param {boolean} [notify=true] - whether to send notification or not.
    */
-  setClipNormal(index, normal, notify = true) {
+  setClipNormal(index, normal, value = null, notify = true) {
     if (normal == null) return;
     const normal1 = new Vector3(...normal).normalize().toArray();
     this.clipNormals[index] = normal1;
 
     this.clipping.setNormal(index, new Vector3(...normal1));
     this.clipping.setConstant(index, this.gridSize / 2);
-    this.setClipSlider(index, this.gridSize / 2);
+    if (value == null) value = this.gridSize / 2;
+    this.setClipSlider(index, value);
+
     var notifyObject = {};
     notifyObject[`clip_normal_${index}`] = normal1;
-
+    notifyObject[`clip_slider_${index}`] = value;
     this.checkChanges(notifyObject, notify);
 
     this.nestedGroup.setClipPlanes(this.clipping.clipPlanes);
@@ -67610,7 +67719,11 @@ class Viewer {
       .normalize()
       .negate()
       .toArray();
-    this.setClipNormal(index, normal, notify);
+    this.setClipNormal(index, normal, null, notify);
+
+    var notifyObject = {};
+    notifyObject[`clip_normal_${index}`] = normal;
+    this.checkChanges(notifyObject, notify);
   };
 
   /**