@inweb/viewer-three 26.9.7 → 26.9.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.9.7",
+  "version": "26.9.8",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.9.7",
-    "@inweb/eventemitter2": "~26.9.7",
-    "@inweb/markup": "~26.9.7",
-    "@inweb/viewer-core": "~26.9.7"
+    "@inweb/client": "~26.9.8",
+    "@inweb/eventemitter2": "~26.9.8",
+    "@inweb/markup": "~26.9.8",
+    "@inweb/viewer-core": "~26.9.8"
   },
   "devDependencies": {
     "@types/three": "^0.179.0",

package/src/Viewer/commands/ZoomTo.ts

@@ -38,7 +38,7 @@ export function zoomTo(viewer: Viewer, box: Box3): void {
   if (camera.isPerspectiveCamera) {
     const offset = new Vector3(0, 0, 1)
       .applyQuaternion(camera.quaternion)
-      .multiplyScalar(boxSize / Math.tan(MathUtils.DEG2RAD * camera.fov * 0.5));
+      .multiplyScalar(boxSize / Math.tan(MathUtils.degToRad(camera.fov * 0.5)));
 
     camera.position.copy(offset).add(boxCenter);
     camera.updateMatrixWorld();

package/src/Viewer/components/SelectionComponent.ts

@@ -105,12 +105,12 @@ export class SelectionComponent implements IComponent {
     const coords = new Vector2(x, y);
     this.raycaster.setFromCamera(coords, this.viewer.camera);
 
-    this.raycaster.params = this.raycaster.params = {
+    this.raycaster.params = {
       Mesh: {},
-      Line: { threshold: 0.25 },
-      Line2: { threshold: 0.25 },
+      Line: { threshold: 0.05 },
+      Line2: { threshold: 0.05 },
       LOD: {},
-      Points: { threshold: 0.1 },
+      Points: { threshold: 0.01 },
       Sprite: {},
     };
 

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -21,12 +21,26 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Camera, Matrix4, Object3D, Scene, Raycaster, Vector2, Vector3, Vector4 } from "three";
+import {
+  Camera,
+  EdgesGeometry,
+  Intersection,
+  Line3,
+  MathUtils,
+  Matrix4,
+  Object3D,
+  Raycaster,
+  Vector2,
+  Vector3,
+  Vector4,
+} from "three";
 
 import type { Viewer } from "../Viewer";
 import { OrbitDragger } from "./OrbitDragger";
 
 const PRECISION = 0.01;
+const DESKTOP_SNAP_DISTANCE = 10;
+const MOBILE_SNAP_DISTANCE = 50;
 
 export class MeasureLineDragger extends OrbitDragger {
   private overlay: MeasureOverlay;
@@ -43,7 +57,7 @@ export class MeasureLineDragger extends OrbitDragger {
     this.overlay.addLine(this.line);
 
     this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
-    this.snapper.update(viewer.scene);
+    this.updateSnapper();
 
     this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
     this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
@@ -71,6 +85,8 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.removeEventListener("show", this.updateSnapper);
     this.viewer.removeEventListener("showall", this.updateSnapper);
 
+    this.snapper.dispose();
+
     this.overlay.detach();
     this.overlay.dispose();
 
@@ -90,7 +106,10 @@ export class MeasureLineDragger extends OrbitDragger {
   onPointerMove = (event: PointerEvent) => {
     if (this.orbit.enabled && this.orbit.state !== -1) return;
 
-    this.line.endPoint = this.snapper.getSnapPoint(event);
+    const snapPoint = this.snapper.getSnapPoint(event);
+    if (snapPoint && this.line.endPoint && snapPoint.equals(this.line.endPoint)) return;
+
+    this.line.endPoint = snapPoint;
     this.line.render();
 
     if (this.line.startPoint) this.changed = true; // <- to prevent context menu
@@ -124,25 +143,57 @@ export class MeasureLineDragger extends OrbitDragger {
   };
 
   updateSnapper = () => {
-    this.snapper.update(this.viewer.scene);
+    this.snapper.update(this.viewer);
   };
 }
 
+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 {
   private camera: Camera;
   private canvas: HTMLCanvasElement;
-  private objects: Object3D[] = [];
+  private objects: Object3D[];
   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.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 ======================
   }
 
-  getSnapPoint(event: PointerEvent): Vector3 | undefined {
-    const mouse = new Vector2(event.clientX, event.clientY);
+  getMousePosition(event: MouseEvent, target: Vector2): Vector2 {
+    return target.set(event.clientX, event.clientY);
+  }
 
+  getPointerIntersects(mouse: Vector2, objects: Object3D[]): 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;
@@ -152,22 +203,122 @@ class MeasureSnapper {
 
     this.raycaster.params = {
       Mesh: {},
-      Line: { threshold: 0.25 },
-      Line2: { threshold: 0.25 },
+      Line: { threshold: 0.05 },
+      Line2: { threshold: 0.05 },
       LOD: {},
-      Points: { threshold: 0.1 },
+      Points: { threshold: 0.01 },
       Sprite: {},
     };
 
-    const intersects = this.raycaster.intersectObjects(this.objects, false);
-    if (intersects.length === 0) return undefined;
+    return this.raycaster.intersectObjects(objects, false);
+  }
+
+  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 worldHeight = camera.top - camera.bottom;
+
+      const canvasHeight = this.canvas.height;
+      const worldUnitsPerPixel = worldHeight / canvasHeight;
+
+      return this.detectRadiusInPixels * worldUnitsPerPixel;
+    }
+
+    if (camera.isPerspectiveCamera) {
+      const distance = camera.position.distanceTo(point);
+      const worldHeight = 2 * Math.tan(MathUtils.degToRad(camera.fov * 0.5)) * distance;
+
+      const canvasHeight = this.canvas.height;
+      const worldUnitsPerPixel = worldHeight / canvasHeight;
+
+      return this.detectRadiusInPixels * worldUnitsPerPixel;
+    }
+
+    // ===================== AI-CODE-END ======================
 
-    return intersects[0].point;
+    return 0.1;
   }
 
-  update(scene: Scene) {
-    this.objects = [];
-    scene.traverseVisible((child) => this.objects.push(child));
+  getSnapPoint(event: PointerEvent): Vector3 {
+    const mouse = this.getMousePosition(event, new Vector2());
+
+    const intersections = this.getPointerIntersects(mouse, this.objects);
+    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);
+    }
+
+    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 (snapPoint) return object.localToWorld(snapPoint);
+
+    // ===================== AI-CODE-END ======================
+
+    return intersectionPoint.clone();
+  }
+
+  update(viewer: Viewer) {
+    this.objects.length = 0;
+    viewer.models.forEach((model) => {
+      model.getVisibleObjects().forEach((object) => this.objects.push(object));
+    });
   }
 }
 
@@ -197,6 +348,8 @@ class MeasureOverlay {
     this.container.style.pointerEvents = "none";
     this.container.style.overflow = "hidden";
 
+    if (!this.canvas.parentElement) return;
+
     this.canvas.parentElement.appendChild(this.container);
   }
 
@@ -245,7 +398,7 @@ class MeasureLine {
   public startPoint: Vector3;
   public endPoint: Vector3;
 
-  public id = Date.now();
+  public id = MathUtils.generateUUID();
   public unit = "";
   public scale = 1.0;
   public size = 10.0;
@@ -275,6 +428,11 @@ class MeasureLine {
     this.elementEndPoint.remove();
     this.elementLine.remove();
     this.elementLabel.remove();
+
+    this.elementStartPoint = undefined;
+    this.elementEndPoint = undefined;
+    this.elementLine = undefined;
+    this.elementLabel = undefined;
   }
 
   render() {