fix: allow to use measurement tools with clipping planes

Author: agviegas

packages/front/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@thatopen/components-front",
   "description": "Collection of frontend tools to author BIM apps.",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "author": "That Open Company",
   "contributors": [
     "Antonio Gonzalez Viegas (https://github.com/agviegas)",

packages/front/src/core/Marker/src/mark.ts

@@ -16,12 +16,18 @@ export class Mark implements OBC.Hideable, OBC.Disposable {
    */
   world: OBC.World;
 
+  /**
+   * The visibility state of the marker, used for culling (e.g. clipping planes).
+   */
+  wasVisible = true;
+
   /** {@link OBC.Disposable.onDisposed} */
   readonly onDisposed = new OBC.Event();
 
   /** {@link OBC.Hideable.visible} */
   set visible(value: boolean) {
     this.three.visible = value;
+    this.wasVisible = value;
   }
 
   /** {@link OBC.Hideable.visible} */

packages/front/src/measurement/Measurement/index.ts

@@ -75,6 +75,18 @@ export abstract class Measurement<
 
   private pointerStopTimeout: number | null = null;
 
+  applyPlanesVisibility(planes: THREE.Plane[]) {
+    for (const line of this.lines) {
+      line.applyPlanesVisibility(planes);
+    }
+    for (const fill of this.fills) {
+      fill.applyPlanesVisibility(planes);
+    }
+    for (const volume of this.volumes) {
+      volume.applyPlanesVisibility(planes);
+    }
+  }
+
   private onMove = () => {
     if (!this.enabled) return;
 

packages/front/src/utils/area.ts

@@ -95,7 +95,7 @@ export class Area {
     const points = this.points2D;
     if (!points) return 0;
     const area = Math.abs(THREE.ShapeUtils.area(points));
-    return area
+    return area;
   }
 
   get boundingBox() {
@@ -184,9 +184,9 @@ export class Area {
   // Create an exact copy of this area
   clone() {
     const area = new Area([...this.points]);
-    area.units = this.units
-    area.rounding = this.rounding
-    area.tolerance = this.tolerance
+    area.units = this.units;
+    area.rounding = this.rounding;
+    area.tolerance = this.tolerance;
     return area;
   }
 

packages/front/src/utils/dimension-line.ts

@@ -253,6 +253,36 @@ export class DimensionLine {
     (this._components as any) = null;
   }
 
+  applyPlanesVisibility(planes: THREE.Plane[]) {
+    // Using wasVisible prevents showing labels that were hidden before
+
+    for (const endpoint of this._endpoints) {
+      if (!endpoint.wasVisible) continue;
+      let isBehind = false;
+      for (const plane of planes) {
+        if (plane.distanceToPoint(endpoint.three.position) < 0) {
+          isBehind = true;
+          break;
+        }
+      }
+      endpoint.three.visible = !isBehind;
+    }
+
+    // Check if label (measurement mark) is behind any plane
+
+    if (this.label.wasVisible) {
+      let labelIsBehind = false;
+      const labelPos = this.label.three.position;
+      for (const plane of planes) {
+        if (plane.distanceToPoint(labelPos) < 0) {
+          labelIsBehind = true;
+          break;
+        }
+      }
+      this.label.three.visible = !labelIsBehind;
+    }
+  }
+
   /**
    * Creates a bounding box for the dimension line.
    * The bounding box is a 3D box that encloses the dimension line.

packages/front/src/utils/measure-fill.ts

@@ -93,6 +93,24 @@ export class MeasureFill {
     area.points.onCleared.add(this._triggerUpdate);
   }
 
+  applyPlanesVisibility(planes: THREE.Plane[]) {
+    // Using wasVisible prevents showing labels that were hidden before
+    if (!this.label.wasVisible) {
+      return;
+    }
+    let isHidden = false;
+    const center = this.area.center;
+    if (center) {
+      for (const plane of planes) {
+        if (plane.distanceToPoint(center) < 0) {
+          isHidden = true;
+          break;
+        }
+      }
+    }
+    this.label.three.visible = !isHidden;
+  }
+
   private _triggerUpdate = () => this.update();
 
   private updateMesh() {

packages/front/src/utils/measure-volume.ts

@@ -94,6 +94,24 @@ export class MeasureVolume {
     this.volume.onItemsChanged.add(() => this.update());
   }
 
+  applyPlanesVisibility(planes: THREE.Plane[]) {
+    // Using wasVisible prevents showing labels that were hidden before
+    if (!this.label.wasVisible) {
+      return;
+    }
+    let isBehind = false;
+    for (const mesh of this.meshes) {
+      for (const plane of planes) {
+        if (plane.distanceToPoint(mesh.position) < 0) {
+          isBehind = true;
+          break;
+        }
+      }
+
+      this.label.three.visible = !isBehind;
+    }
+  }
+
   private async updateMesh() {
     this.cleanMeshes();
     const mesher = this._components.get(Mesher);