@inweb/viewer-three 26.10.6 → 26.11.0

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -21,32 +21,24 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import {
-  Camera,
-  EdgesGeometry,
-  Intersection,
-  Line3,
-  MathUtils,
-  Matrix4,
-  Object3D,
-  Plane,
-  Raycaster,
-  Vector2,
-  Vector3,
-  Vector4,
-} from "three";
+import { Camera, MathUtils, Matrix4, Object3D, Vector2, Vector3, Vector4 } from "three";
 
 import type { Viewer } from "../Viewer";
 import { OrbitDragger } from "./OrbitDragger";
+import { convertUnits } from "../measurement/UnitConverter";
+import { formatDistance } from "../measurement/UnitFormatter";
+import { Snapper } from "../measurement/Snapper";
 
-const PRECISION = 0.01;
-const DESKTOP_SNAP_DISTANCE = 10;
-const MOBILE_SNAP_DISTANCE = 50;
+const _downPoint = new Vector2();
 
 export class MeasureLineDragger extends OrbitDragger {
   private overlay: MeasureOverlay;
   private line: MeasureLine;
-  private snapper: MeasureSnapper;
+  private snapper: Snapper;
+  private objects: Object3D[];
+  private scale = 1.0;
+  private units = "";
+  private precision: any = 2;
 
   constructor(viewer: Viewer) {
     super(viewer);
@@ -54,11 +46,15 @@ export class MeasureLineDragger extends OrbitDragger {
     this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
     this.overlay.attach();
 
-    this.line = new MeasureLine(this.overlay);
+    this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
     this.overlay.addLine(this.line);
 
-    this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
-    this.updateSnapper();
+    this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
+
+    this.objects = [];
+    this.updateObjects();
+
+    this.updateUnits();
 
     this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
     this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
@@ -67,11 +63,12 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
 
     this.viewer.addEventListener("render", this.renderOverlay);
-    this.viewer.addEventListener("hide", this.updateSnapper);
-    this.viewer.addEventListener("isolate", this.updateSnapper);
-    this.viewer.addEventListener("show", this.updateSnapper);
-    this.viewer.addEventListener("showall", this.updateSnapper);
+    this.viewer.addEventListener("hide", this.updateObjects);
+    this.viewer.addEventListener("isolate", this.updateObjects);
+    this.viewer.addEventListener("show", this.updateObjects);
+    this.viewer.addEventListener("showall", this.updateObjects);
     this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
+    this.viewer.addEventListener("optionschange", this.updateUnits);
   }
 
   override dispose() {
@@ -82,13 +79,14 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
 
     this.viewer.removeEventListener("render", this.renderOverlay);
-    this.viewer.removeEventListener("hide", this.updateSnapper);
-    this.viewer.removeEventListener("isolate", this.updateSnapper);
-    this.viewer.removeEventListener("show", this.updateSnapper);
-    this.viewer.removeEventListener("showall", this.updateSnapper);
+    this.viewer.removeEventListener("hide", this.updateObjects);
+    this.viewer.removeEventListener("isolate", this.updateObjects);
+    this.viewer.removeEventListener("show", this.updateObjects);
+    this.viewer.removeEventListener("showall", this.updateObjects);
     this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
+    this.viewer.removeEventListener("optionschange", this.updateUnits);
 
-    this.snapper.dispose();
+    this.objects.length = 0;
 
     this.overlay.detach();
     this.overlay.dispose();
@@ -99,7 +97,8 @@ export class MeasureLineDragger extends OrbitDragger {
   onPointerDown = (event: PointerEvent) => {
     if (event.button !== 0) return;
 
-    this.line.startPoint = this.snapper.getSnapPoint(event);
+    const mouse = this.snapper.getMousePosition(event, _downPoint);
+    this.line.startPoint = this.snapper.getSnapPoint(mouse, this.objects);
     this.line.render();
 
     this.viewer.canvas.setPointerCapture(event.pointerId);
@@ -109,7 +108,8 @@ export class MeasureLineDragger extends OrbitDragger {
   onPointerMove = (event: PointerEvent) => {
     if (this.orbit.enabled && this.orbit.state !== -1) return;
 
-    const snapPoint = this.snapper.getSnapPoint(event);
+    const mouse = this.snapper.getMousePosition(event, _downPoint);
+    const snapPoint = this.snapper.getSnapPoint(mouse, this.objects);
     if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint)) return;
 
     this.line.endPoint = snapPoint;
@@ -119,8 +119,8 @@ export class MeasureLineDragger extends OrbitDragger {
   };
 
   onPointerUp = (event: PointerEvent) => {
-    if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
-      this.line = new MeasureLine(this.overlay);
+    if (this.line.startPoint && this.line.endPoint && this.line.getDistance() > 0) {
+      this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
       this.overlay.addLine(this.line);
     } else {
       this.line.startPoint = undefined;
@@ -141,204 +141,50 @@ export class MeasureLineDragger extends OrbitDragger {
     this.line.render();
   };
 
+  clearOverlay = () => {
+    this.overlay.clear();
+
+    this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
+    this.overlay.addLine(this.line);
+  };
+
   renderOverlay = () => {
     this.overlay.render();
   };
 
-  updateSnapper = () => {
-    this.snapper.setFromViewer(this.viewer);
+  updateObjects = () => {
+    this.objects.length = 0;
+    this.viewer.models.forEach((model) => {
+      model.getVisibleObjects().forEach((object) => this.objects.push(object));
+    });
   };
 
   updateSnapperCamera = () => {
     this.snapper.camera = this.viewer.camera;
     this.overlay.camera = this.viewer.camera;
   };
-}
-
-const _vertex = new Vector3();
-const _start = new Vector3();
-const _end = new Vector3();
-const _line = new Line3();
-const _center = new Vector3();
-const _projection = new Vector3();
-
-class MeasureSnapper {
-  public camera: Camera;
-  private canvas: HTMLCanvasElement;
-  private objects: Object3D[];
-  private clippingPlanes: Plane[];
-  private raycaster: Raycaster;
-  private detectRadiusInPixels: number;
-  private edgesCache: WeakMap<any, EdgesGeometry>;
-
-  constructor(camera: Camera, canvas: HTMLCanvasElement) {
-    this.camera = camera;
-    this.canvas = canvas;
-    this.objects = [];
-    this.clippingPlanes = [];
-    this.raycaster = new Raycaster();
-    this.detectRadiusInPixels = this.isMobile() ? MOBILE_SNAP_DISTANCE : DESKTOP_SNAP_DISTANCE;
-    this.edgesCache = new WeakMap();
-  }
-
-  dispose() {
-    this.objects = [];
-  }
-
-  isMobile(): boolean {
-    if (typeof navigator === "undefined") return false;
-
-    // ===================== AI-CODE-START ======================
-    // Source: Claude Sonnet 4
-    // Date: 2025-09-09
-    // Reviewer: roman.mochalov@opendesign.com
-    // Issue: CLOUD-5799
-
-    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|Opera Mobi|IEMobile/i.test(navigator.userAgent);
-
-    // ===================== AI-CODE-END ======================
-  }
-
-  getMousePosition(event: MouseEvent, target: Vector2): Vector2 {
-    return target.set(event.clientX, event.clientY);
-  }
-
-  getPointerIntersects(mouse: Vector2): Array<Intersection<Object3D>> {
-    const rect = this.canvas.getBoundingClientRect();
-    const x = ((mouse.x - rect.left) / rect.width) * 2 - 1;
-    const y = (-(mouse.y - rect.top) / rect.height) * 2 + 1;
-
-    const coords = new Vector2(x, y);
-    this.raycaster.setFromCamera(coords, this.camera);
-
-    this.raycaster.params = {
-      Mesh: {},
-      Line: { threshold: 0.05 },
-      Line2: { threshold: 0.05 },
-      LOD: {},
-      Points: { threshold: 0.01 },
-      Sprite: {},
-    };
-
-    let intersects = this.raycaster.intersectObjects(this.objects, false);
-
-    this.clippingPlanes.forEach((plane) => {
-      intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
-    });
-
-    return intersects;
-  }
-
-  getDetectRadius(point: Vector3): number {
-    const camera: any = this.camera;
-
-    // ===================== AI-CODE-START ======================
-    // Source: Gemini 2.5 Pro
-    // Date: 2025-08-27
-    // Reviewer: roman.mochalov@opendesign.com
-    // Issue: CLOUD-5799
-    // Notes: Originally AI-generated, modified manually
 
-    if (camera.isOrthographicCamera) {
-      const fieldHeight = (camera.top - camera.bottom) / camera.zoom;
+  updateUnits = () => {
+    const model = this.viewer.models[0];
+    const units = this.viewer.options.rulerUnit ?? "Default";
+    const precision = this.viewer.options.rulerPrecision ?? "Default";
 
-      const canvasHeight = this.canvas.height;
-      const worldUnitsPerPixel = fieldHeight / canvasHeight;
-
-      return this.detectRadiusInPixels * worldUnitsPerPixel;
-    }
-
-    if (camera.isPerspectiveCamera) {
-      const distance = camera.position.distanceTo(point);
-      const fieldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
-
-      const canvasHeight = this.canvas.height;
-      const worldUnitsPerPixel = fieldHeight / canvasHeight;
-
-      return this.detectRadiusInPixels * worldUnitsPerPixel;
-    }
-
-    // ===================== AI-CODE-END ======================
-
-    return 0.1;
-  }
-
-  getSnapPoint(event: PointerEvent): Vector3 {
-    const mouse = this.getMousePosition(event, new Vector2());
-
-    const intersections = this.getPointerIntersects(mouse);
-    if (intersections.length === 0) return undefined;
-
-    // ===================== AI-CODE-START ======================
-    // Source: Gemini 2.5 Pro
-    // Date: 2025-08-20
-    // Reviewer: roman.mochalov@opendesign.com
-    // Issue: CLOUD-5799
-    // Notes: Originally AI-generated, modified manually
-
-    const object: any = intersections[0].object;
-    const intersectionPoint = intersections[0].point;
-    const localPoint = object.worldToLocal(intersectionPoint.clone());
-
-    let snapPoint: Vector3;
-    let snapDistance = this.getDetectRadius(intersectionPoint);
-
-    const geometry = object.geometry;
-
-    const positions = geometry.attributes.position.array;
-    for (let i = 0; i < positions.length; i += 3) {
-      _vertex.set(positions[i], positions[i + 1], positions[i + 2]);
-      const distance = _vertex.distanceTo(localPoint);
-      if (distance < snapDistance) {
-        snapDistance = distance;
-        snapPoint = _vertex.clone();
-      }
-    }
-    if (snapPoint) return object.localToWorld(snapPoint);
-
-    let edges = this.edgesCache.get(geometry);
-    if (!edges) {
-      edges = new EdgesGeometry(geometry);
-      this.edgesCache.set(geometry, edges);
+    if (units === "Default") {
+      this.scale = model.getUnitScale();
+      this.units = model.getUnitString();
+    } else {
+      this.scale = convertUnits(model.getUnits(), units, 1);
+      this.units = units;
     }
 
-    const edgePositions = edges.attributes.position.array;
-    for (let i = 0; i < edgePositions.length; i += 6) {
-      _start.set(edgePositions[i], edgePositions[i + 1], edgePositions[i + 2]);
-      _end.set(edgePositions[i + 3], edgePositions[i + 4], edgePositions[i + 5]);
-      _line.set(_start, _end);
-
-      _line.getCenter(_center);
-      const centerDistance = _center.distanceTo(localPoint);
-      if (centerDistance < snapDistance) {
-        snapDistance = centerDistance;
-        snapPoint = _center.clone();
-        continue;
-      }
-
-      _line.closestPointToPoint(localPoint, true, _projection);
-      const lineDistance = _projection.distanceTo(localPoint);
-      if (lineDistance < snapDistance) {
-        snapDistance = lineDistance;
-        snapPoint = _projection.clone();
-      }
+    if (precision === "Default") {
+      this.precision = model.getPrecision();
+    } else {
+      this.precision = precision;
     }
-    if (snapPoint) return object.localToWorld(snapPoint);
-
-    // ===================== AI-CODE-END ======================
 
-    return intersectionPoint.clone();
-  }
-
-  setFromViewer(viewer: Viewer) {
-    this.objects.length = 0;
-    viewer.models.forEach((model) => {
-      model.getVisibleObjects().forEach((object) => this.objects.push(object));
-    });
-
-    this.camera = viewer.camera;
-    this.clippingPlanes = viewer.renderer.clippingPlanes || [];
-  }
+    this.overlay.updateLineUnits(this.scale, this.units, this.precision);
+  };
 }
 
 class MeasureOverlay {
@@ -356,6 +202,10 @@ class MeasureOverlay {
     this.resizeObserver = new ResizeObserver(this.resizeContainer);
   }
 
+  dispose() {
+    this.clear();
+  }
+
   attach() {
     this.container = document.createElement("div");
     this.container.id = "measure-container";
@@ -370,10 +220,6 @@ class MeasureOverlay {
     this.resizeObserver.observe(this.canvas);
   }
 
-  dispose() {
-    this.clear();
-  }
-
   detach() {
     this.resizeObserver.disconnect();
 
@@ -383,7 +229,7 @@ class MeasureOverlay {
 
   clear() {
     this.lines.forEach((line) => line.dispose());
-    this.lines = [];
+    this.lines.length = 0;
   }
 
   render() {
@@ -403,6 +249,14 @@ class MeasureOverlay {
     this.lines = this.lines.filter((x) => x !== line);
   }
 
+  updateLineUnits(scale: number, units: string, precision: any) {
+    this.lines.forEach((line) => {
+      line.scale = scale;
+      line.units = units;
+      line.precision = precision;
+    });
+  }
+
   resizeContainer = () => {
     const { offsetLeft, offsetTop, offsetWidth, offsetHeight } = this.canvas;
 
@@ -430,8 +284,9 @@ class MeasureLine {
   public endPoint: Vector3;
 
   public id = MathUtils.generateUUID();
-  public unit = "";
-  public scale = 1.0;
+  public scale: number;
+  public units: string;
+  public precision: any;
   public size = 10.0;
   public lineWidth = 2;
 
@@ -443,8 +298,11 @@ class MeasureLine {
     font: "1rem system-ui",
   };
 
-  constructor(overlay: MeasureOverlay) {
+  constructor(overlay: MeasureOverlay, scale: number, units: string, precision: any) {
     this.overlay = overlay;
+    this.scale = scale;
+    this.units = units;
+    this.precision = precision;
 
     this.elementStartPoint = overlay.container.appendChild(document.createElement("div"));
     this.elementEndPoint = overlay.container.appendChild(document.createElement("div"));
@@ -511,10 +369,10 @@ class MeasureLine {
 
       const distance = this.getDistance();
 
-      this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
+      this.elementLabel.style.display = visible && distance > 0 ? "block" : "none";
       this.elementLabel.style.left = `${point.x}px`;
       this.elementLabel.style.top = `${point.y}px`;
-      this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
+      this.elementLabel.innerHTML = formatDistance(distance, this.units, this.precision);
     } else {
       this.elementLabel.style.display = "none";
     }