three-cad-viewer 3.3.0 → 3.3.2

package/dist/three-cad-viewer.js

@@ -57640,6 +57640,7 @@ void main() {
 	    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();
@@ -57788,9 +57789,29 @@ void main() {
 
 	    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);
@@ -57907,6 +57928,7 @@ void main() {
 	    super(viewer, new DistancePanel(viewer.display));
 	    this.point1 = null;
 	    this.point2 = null;
+	    this.middlePoint = null;
 	  }
 
 	  _setMeasurementVals() {
@@ -57944,13 +57966,13 @@ void main() {
 	    );
 	    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,
@@ -57977,6 +57999,7 @@ void main() {
 	class PropertiesMeasurement extends Measurement {
 	  constructor(viewer) {
 	    super(viewer, new PropertiesPanel(viewer.display));
+	    this.middlePoint = null;
 	  }
 
 	  _setMeasurementVals() {
@@ -58006,11 +58029,11 @@ void main() {
 
 	  _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,
@@ -58034,6 +58057,7 @@ void main() {
 	class AngleMeasurement extends Measurement {
 	  constructor(viewer) {
 	    super(viewer, new AnglePanel(viewer.display));
+	    this.middlePoint = null;
 	  }
 
 	  _setMeasurementVals() {
@@ -58093,6 +58117,9 @@ void main() {
 	    );
 	    this.scene.add(item1Line);
 	    this.scene.add(item2Line);
+	    this.middlePoint = new Vector3()
+	      .addVectors(this.point1, this.point2)
+	      .multiplyScalar(0.5);
 	  }
 
 	  handleResponse(response) {
@@ -58375,10 +58402,10 @@ void main() {
 	      (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";
 	    }
 
@@ -59772,7 +59799,16 @@ void main() {
 	    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;
@@ -62287,6 +62323,33 @@ void main() {
 	   *  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.
 	   *
@@ -62296,13 +62359,11 @@ void main() {
 	    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);
@@ -62315,6 +62376,7 @@ void main() {
 	        break;
 	      }
 	    }
+	    this.scrollCentered(el);
 	    this.toggleLabelColor(node);
 	  }
 
@@ -62330,7 +62392,8 @@ void main() {
 	      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");
@@ -62362,7 +62425,10 @@ void main() {
 	    };
 	    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");
@@ -64991,7 +65057,7 @@ void main() {
 	  }
 	}
 
-	const version = "3.3.0";
+	const version = "3.3.2";
 
 	Mesh.prototype.dispose = function () {
 	  if (this.geometry) {
@@ -66318,9 +66384,9 @@ void main() {
 
 	    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
@@ -67053,39 +67119,120 @@ void main() {
 	    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);
 	  };
 
 	  /**
@@ -67322,47 +67469,6 @@ void main() {
 	    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.
 	   **/
@@ -67583,19 +67689,22 @@ void main() {
 	   * @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);
@@ -67616,7 +67725,11 @@ void main() {
 	      .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);
 	  };
 
 	  /**