@inweb/viewer-three 26.11.0 → 26.11.1

package/lib/Viewer/Viewer.d.ts

@@ -105,7 +105,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *       object
      *
      * @param params - Loading parameters.
-     * @param params.format - File format. Can be `gltf`, `glb` or format from an extension. Required when
+     * @param params.format - File format. Can be `gltf`, `glb` or format from a plugin. Required when
      *   loading a file as `ArrayBuffer` or `Data URL`.
      * @param params.mode - File opening mode. Can be one of:
      *

package/lib/Viewer/components/SelectionComponent.d.ts

@@ -1,10 +1,11 @@
-import { Object3D, Vector2 } from "three";
+import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import type { IModelImpl } from "../models/IModelImpl";
 import type { HighlighterComponent } from "./HighlighterComponent";
 export declare class SelectionComponent implements IComponent {
     protected viewer: Viewer;
+    protected raycaster: Raycaster;
     protected downPosition: Vector2;
     protected highlighter: HighlighterComponent;
     constructor(viewer: Viewer);
@@ -13,6 +14,7 @@ export declare class SelectionComponent implements IComponent {
     onPointerUp: (event: PointerEvent) => void;
     onDoubleClick: (event: MouseEvent) => void;
     getMousePosition(event: MouseEvent, target: Vector2): Vector2;
+    getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>>;
     select(objects: Object3D | Object3D[], model?: IModelImpl): void;
     deselect(objects: Object3D | Object3D[], model?: IModelImpl): void;
     toggleSelection(objects: Object3D | Object3D[], model?: IModelImpl): void;

package/lib/Viewer/draggers/MeasureLineDragger.d.ts

@@ -4,10 +4,6 @@ export declare class MeasureLineDragger extends OrbitDragger {
     private overlay;
     private line;
     private snapper;
-    private objects;
-    private scale;
-    private units;
-    private precision;
     constructor(viewer: Viewer);
     dispose(): void;
     onPointerDown: (event: PointerEvent) => void;
@@ -15,9 +11,7 @@ export declare class MeasureLineDragger extends OrbitDragger {
     onPointerUp: (event: PointerEvent) => void;
     onPointerCancel: (event: PointerEvent) => void;
     onPointerLeave: () => void;
-    clearOverlay: () => void;
     renderOverlay: () => void;
-    updateObjects: () => void;
+    updateSnapper: () => void;
     updateSnapperCamera: () => void;
-    updateUnits: () => void;
 }

package/lib/Viewer/models/IModelImpl.d.ts

@@ -5,10 +5,6 @@ import { IModel } from "@inweb/viewer-core";
  */
 export interface IModelImpl extends IModel {
     scene: Object3D;
-    getUnits(): string;
-    getUnitScale(): number;
-    getUnitString(): string;
-    getPrecision(): number;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];

package/lib/Viewer/models/ModelImpl.d.ts

@@ -5,10 +5,6 @@ export declare class ModelImpl implements IModelImpl {
     scene: Object3D;
     constructor(scene: Object3D);
     dispose(): void;
-    getUnits(): string;
-    getUnitScale(): number;
-    getUnitString(): string;
-    getPrecision(): number;
     getExtents(target: Box3): Box3;
     getObjects(): Object3D[];
     getVisibleObjects(): Object3D[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "26.11.0",
+  "version": "26.11.1",
   "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",
@@ -14,7 +14,7 @@
     "three.js"
   ],
   "sideEffects": [
-    "dist/extensions/**/*"
+    "dist/plugins/**/*"
   ],
   "main": "dist/viewer-three.js",
   "module": "dist/viewer-three.module.js",
@@ -23,22 +23,22 @@
     "dist",
     "lib/**/*.d.ts",
     "src",
-    "extensions"
+    "plugins"
   ],
   "scripts": {
-    "build": "npm run build:viewer && npm run build:extensions",
+    "build": "npm run build:viewer && npm run build:plugins",
     "build:viewer": "rollup -c rollup.config.js",
-    "build:extensions": "rollup -c rollup.extensions.config.js",
-    "test": "npm run test:viewer && npm run test:extensions",
+    "build:plugins": "rollup -c rollup.plugins.config.js",
+    "test": "npm run test:viewer && npm run test:plugins",
     "test:viewer": "karma start karma.conf.js",
-    "test:extensions": "karma start karma.extensions.conf.js",
+    "test:plugins": "karma start karma.plugins.conf.js",
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~26.11.0",
-    "@inweb/eventemitter2": "~26.11.0",
-    "@inweb/markup": "~26.11.0",
-    "@inweb/viewer-core": "~26.11.0"
+    "@inweb/client": "~26.11.1",
+    "@inweb/eventemitter2": "~26.11.1",
+    "@inweb/markup": "~26.11.1",
+    "@inweb/viewer-core": "~26.11.1"
   },
   "devDependencies": {
     "@types/three": "^0.180.0",

package/src/Viewer/Viewer.ts

@@ -388,7 +388,7 @@ export class Viewer
    *       object
    *
    * @param params - Loading parameters.
-   * @param params.format - File format. Can be `gltf`, `glb` or format from an extension. Required when
+   * @param params.format - File format. Can be `gltf`, `glb` or format from a plugin. Required when
    *   loading a file as `ArrayBuffer` or `Data URL`.
    * @param params.mode - File opening mode. Can be one of:
    *

package/src/Viewer/components/SelectionComponent.ts

@@ -21,21 +21,22 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Object3D, Vector2 } from "three";
+import { Intersection, Object3D, Raycaster, Vector2 } from "three";
 
 import type { IComponent } from "@inweb/viewer-core";
 import type { Viewer } from "../Viewer";
 import type { IModelImpl } from "../models/IModelImpl";
 import type { HighlighterComponent } from "./HighlighterComponent";
-import { Snapper } from "../measurement/Snapper";
 
 export class SelectionComponent implements IComponent {
   protected viewer: Viewer;
+  protected raycaster: Raycaster;
   protected downPosition: Vector2;
   protected highlighter: HighlighterComponent;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
+    this.raycaster = new Raycaster();
     this.downPosition = new Vector2();
 
     this.viewer.addEventListener("pointerdown", this.onPointerDown);
@@ -63,12 +64,10 @@ export class SelectionComponent implements IComponent {
     const upPosition = this.getMousePosition(event, new Vector2());
     if (upPosition.distanceTo(this.downPosition) !== 0) return;
 
-    const snapper = new Snapper(this.viewer.camera, this.viewer.renderer, this.viewer.canvas);
-
     let intersections = [];
     this.viewer.models.forEach((model) => {
       const objects = model.getVisibleObjects();
-      const intersects = snapper.getPointerIntersects(upPosition, objects);
+      const intersects = this.getPointerIntersects(upPosition, objects);
       if (intersects.length > 0) intersections.push({ ...intersects[0], model });
     });
     intersections = intersections.sort((a, b) => a.distance - b.distance);
@@ -100,6 +99,32 @@ export class SelectionComponent implements IComponent {
     return target.set(event.clientX, event.clientY);
   }
 
+  getPointerIntersects(mouse: Vector2, objects: Object3D[]): Array<Intersection<Object3D>> {
+    const rect = this.viewer.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.viewer.camera);
+
+    this.raycaster.params = {
+      Mesh: {},
+      Line: { threshold: 0.05 },
+      Line2: { threshold: 0.05 },
+      LOD: {},
+      Points: { threshold: 0.01 },
+      Sprite: {},
+    };
+
+    let intersects = this.raycaster.intersectObjects(objects, false);
+
+    (this.viewer.renderer.clippingPlanes || []).forEach((plane) => {
+      intersects = intersects.filter((intersect) => plane.distanceToPoint(intersect.point) >= 0);
+    });
+
+    return intersects;
+  }
+
   select(objects: Object3D | Object3D[], model?: IModelImpl) {
     if (!model) {
       this.viewer.models.forEach((model) => this.select(objects, model));

package/src/Viewer/draggers/MeasureLineDragger.ts

@@ -21,24 +21,32 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { Camera, MathUtils, Matrix4, Object3D, Vector2, Vector3, Vector4 } from "three";
+import {
+  Camera,
+  EdgesGeometry,
+  Intersection,
+  Line3,
+  MathUtils,
+  Matrix4,
+  Object3D,
+  Plane,
+  Raycaster,
+  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 _downPoint = new Vector2();
+const PRECISION = 0.01;
+const DESKTOP_SNAP_DISTANCE = 10;
+const MOBILE_SNAP_DISTANCE = 50;
 
 export class MeasureLineDragger extends OrbitDragger {
   private overlay: MeasureOverlay;
   private line: MeasureLine;
-  private snapper: Snapper;
-  private objects: Object3D[];
-  private scale = 1.0;
-  private units = "";
-  private precision: any = 2;
+  private snapper: MeasureSnapper;
 
   constructor(viewer: Viewer) {
     super(viewer);
@@ -46,15 +54,11 @@ export class MeasureLineDragger extends OrbitDragger {
     this.overlay = new MeasureOverlay(viewer.camera, viewer.canvas);
     this.overlay.attach();
 
-    this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
+    this.line = new MeasureLine(this.overlay);
     this.overlay.addLine(this.line);
 
-    this.snapper = new Snapper(viewer.camera, viewer.renderer, viewer.canvas);
-
-    this.objects = [];
-    this.updateObjects();
-
-    this.updateUnits();
+    this.snapper = new MeasureSnapper(viewer.camera, viewer.canvas);
+    this.updateSnapper();
 
     this.viewer.canvas.addEventListener("pointerdown", this.onPointerDown);
     this.viewer.canvas.addEventListener("pointermove", this.onPointerMove);
@@ -63,12 +67,11 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.canvas.addEventListener("pointerleave", this.onPointerLeave);
 
     this.viewer.addEventListener("render", this.renderOverlay);
-    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("hide", this.updateSnapper);
+    this.viewer.addEventListener("isolate", this.updateSnapper);
+    this.viewer.addEventListener("show", this.updateSnapper);
+    this.viewer.addEventListener("showall", this.updateSnapper);
     this.viewer.addEventListener("changecameramode", this.updateSnapperCamera);
-    this.viewer.addEventListener("optionschange", this.updateUnits);
   }
 
   override dispose() {
@@ -79,14 +82,13 @@ export class MeasureLineDragger extends OrbitDragger {
     this.viewer.canvas.removeEventListener("pointerleave", this.onPointerLeave);
 
     this.viewer.removeEventListener("render", this.renderOverlay);
-    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("hide", this.updateSnapper);
+    this.viewer.removeEventListener("isolate", this.updateSnapper);
+    this.viewer.removeEventListener("show", this.updateSnapper);
+    this.viewer.removeEventListener("showall", this.updateSnapper);
     this.viewer.removeEventListener("changecameramode", this.updateSnapperCamera);
-    this.viewer.removeEventListener("optionschange", this.updateUnits);
 
-    this.objects.length = 0;
+    this.snapper.dispose();
 
     this.overlay.detach();
     this.overlay.dispose();
@@ -97,8 +99,7 @@ export class MeasureLineDragger extends OrbitDragger {
   onPointerDown = (event: PointerEvent) => {
     if (event.button !== 0) return;
 
-    const mouse = this.snapper.getMousePosition(event, _downPoint);
-    this.line.startPoint = this.snapper.getSnapPoint(mouse, this.objects);
+    this.line.startPoint = this.snapper.getSnapPoint(event);
     this.line.render();
 
     this.viewer.canvas.setPointerCapture(event.pointerId);
@@ -108,8 +109,7 @@ export class MeasureLineDragger extends OrbitDragger {
   onPointerMove = (event: PointerEvent) => {
     if (this.orbit.enabled && this.orbit.state !== -1) return;
 
-    const mouse = this.snapper.getMousePosition(event, _downPoint);
-    const snapPoint = this.snapper.getSnapPoint(mouse, this.objects);
+    const snapPoint = this.snapper.getSnapPoint(event);
     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() > 0) {
-      this.line = new MeasureLine(this.overlay, this.scale, this.units, this.precision);
+    if (this.line.startPoint && this.line.endPoint && this.line.getDistance() >= PRECISION) {
+      this.line = new MeasureLine(this.overlay);
       this.overlay.addLine(this.line);
     } else {
       this.line.startPoint = undefined;
@@ -141,50 +141,204 @@ 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();
   };
 
-  updateObjects = () => {
-    this.objects.length = 0;
-    this.viewer.models.forEach((model) => {
-      model.getVisibleObjects().forEach((object) => this.objects.push(object));
-    });
+  updateSnapper = () => {
+    this.snapper.setFromViewer(this.viewer);
   };
 
   updateSnapperCamera = () => {
     this.snapper.camera = this.viewer.camera;
     this.overlay.camera = this.viewer.camera;
   };
+}
 
-  updateUnits = () => {
-    const model = this.viewer.models[0];
-    const units = this.viewer.options.rulerUnit ?? "Default";
-    const precision = this.viewer.options.rulerPrecision ?? "Default";
+const _vertex = new Vector3();
+const _start = new Vector3();
+const _end = new Vector3();
+const _line = new Line3();
+const _center = new Vector3();
+const _projection = new Vector3();
 
-    if (units === "Default") {
-      this.scale = model.getUnitScale();
-      this.units = model.getUnitString();
-    } else {
-      this.scale = convertUnits(model.getUnits(), units, 1);
-      this.units = units;
+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;
+
+      const canvasHeight = this.canvas.height;
+      const worldUnitsPerPixel = fieldHeight / canvasHeight;
+
+      return this.detectRadiusInPixels * worldUnitsPerPixel;
     }
 
-    if (precision === "Default") {
-      this.precision = model.getPrecision();
-    } else {
-      this.precision = precision;
+    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;
     }
 
-    this.overlay.updateLineUnits(this.scale, this.units, this.precision);
-  };
+    // ===================== 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);
+    }
+
+    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();
+  }
+
+  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 || [];
+  }
 }
 
 class MeasureOverlay {
@@ -202,10 +356,6 @@ class MeasureOverlay {
     this.resizeObserver = new ResizeObserver(this.resizeContainer);
   }
 
-  dispose() {
-    this.clear();
-  }
-
   attach() {
     this.container = document.createElement("div");
     this.container.id = "measure-container";
@@ -220,6 +370,10 @@ class MeasureOverlay {
     this.resizeObserver.observe(this.canvas);
   }
 
+  dispose() {
+    this.clear();
+  }
+
   detach() {
     this.resizeObserver.disconnect();
 
@@ -229,7 +383,7 @@ class MeasureOverlay {
 
   clear() {
     this.lines.forEach((line) => line.dispose());
-    this.lines.length = 0;
+    this.lines = [];
   }
 
   render() {
@@ -249,14 +403,6 @@ 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;
 
@@ -284,9 +430,8 @@ class MeasureLine {
   public endPoint: Vector3;
 
   public id = MathUtils.generateUUID();
-  public scale: number;
-  public units: string;
-  public precision: any;
+  public unit = "";
+  public scale = 1.0;
   public size = 10.0;
   public lineWidth = 2;
 
@@ -298,11 +443,8 @@ class MeasureLine {
     font: "1rem system-ui",
   };
 
-  constructor(overlay: MeasureOverlay, scale: number, units: string, precision: any) {
+  constructor(overlay: MeasureOverlay) {
     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"));
@@ -369,10 +511,10 @@ class MeasureLine {
 
       const distance = this.getDistance();
 
-      this.elementLabel.style.display = visible && distance > 0 ? "block" : "none";
+      this.elementLabel.style.display = visible && distance >= PRECISION ? "block" : "none";
       this.elementLabel.style.left = `${point.x}px`;
       this.elementLabel.style.top = `${point.y}px`;
-      this.elementLabel.innerHTML = formatDistance(distance, this.units, this.precision);
+      this.elementLabel.innerHTML = `${distance.toFixed(2)} ${this.unit}`;
     } else {
       this.elementLabel.style.display = "none";
     }