@realsee/dnalogel 3.65.7 → 3.65.9

package/libs/PanoMeasurePlugin/utils/dom/base.d.ts

@@ -16,7 +16,7 @@ export declare abstract class ItemDom {
     setCanSelect(canSelect: boolean): void;
     highlight(): void;
     unHighlight(): void;
-    appendTo(container: Element): void;
+    appendTo(container: Element): this;
     remove(): void;
     show(): void;
     hide(): void;

package/libs/PanoMeasurePlugin/utils/dom/base.js

@@ -13,7 +13,7 @@ function D(e) {
   const t = document.createElement("div");
   return e != null && e.id && (t.id = e == null ? void 0 : e.id), t.classList.add("five-plugin-measure__distance"), t.style.position = "absolute", t.style.left = "0", t.style.top = "0", t.style.width = "0", t.style.height = "0", t.style.transform = "translate(-10px, -10px)", t.style.transformOrigin = "left top", e != null && e.style && Object.assign(t.style, e.style), t;
 }
-class u {
+class f {
   constructor(t) {
     n(this, "ndcPosition");
     n(this, "contentDom");
@@ -36,7 +36,7 @@ class u {
     this.contentDom.style.border = "0.5px solid rgba(255,255,255,0.6)", this.contentDom.style.background = "rgba(195,195,195,0.70)";
   }
   appendTo(t) {
-    t.appendChild(this.containerDom), this.containerDom.addEventListener("click", this.handleClick);
+    return t.appendChild(this.containerDom), this.containerDom.addEventListener("click", this.handleClick), this;
   }
   remove() {
     this.contentDom.removeEventListener("click", this.handleClick), this.containerDom.remove();
@@ -74,5 +74,5 @@ class u {
   }
 }
 export {
-  u as ItemDom
+  f as ItemDom
 };

package/libs/PanoMeasurePlugin/utils/dom/distanceItem.d.ts

@@ -19,9 +19,16 @@ interface DistanceItemParams extends ItemDomParams {
 export declare class DistanceItem extends ItemDom {
     protected params: DistanceItemParams;
     private line;
+    private lastFOV;
+    private cameraUpdateHandler;
     constructor(params: DistanceItemParams);
-    update(five: Five): void;
+    appendTo(container: Element): this;
+    remove(): void;
     /** 获取内容文本 */
     getCurrentContent(): string;
+    update(five: Five): void;
+    private getFiveInstance;
+    private onCameraUpdate;
+    private onPanoChange;
 }
 export {};

package/libs/PanoMeasurePlugin/utils/dom/distanceItem.js

@@ -1,63 +1,147 @@
-var j = Object.defineProperty, w = Object.defineProperties;
-var H = Object.getOwnPropertyDescriptors;
-var P = Object.getOwnPropertySymbols;
-var z = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
-var u = (n, e, t) => e in n ? j(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, y = (n, e) => {
-  for (var t in e || (e = {}))
-    z.call(e, t) && u(n, t, e[t]);
-  if (P)
-    for (var t of P(e))
-      F.call(e, t) && u(n, t, e[t]);
-  return n;
-}, b = (n, e) => w(n, H(e));
-var C = (n, e, t) => (u(n, typeof e != "symbol" ? e + "" : e, t), t);
-import { ItemDom as Y } from "./base.js";
+var j = Object.defineProperty, V = Object.defineProperties;
+var $ = Object.getOwnPropertyDescriptors;
+var F = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable;
+var u = (i, t, e) => t in i ? j(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, y = (i, t) => {
+  for (var e in t || (t = {}))
+    A.call(t, e) && u(i, e, t[e]);
+  if (F)
+    for (var e of F(t))
+      B.call(t, e) && u(i, e, t[e]);
+  return i;
+}, D = (i, t) => V(i, $(t));
+var m = (i, t, e) => (u(i, typeof t != "symbol" ? t + "" : t, e), e);
+import { ItemDom as L } from "./base.js";
 import { Vector2 as I } from "three";
 import { isNDCPointInFront as g } from "../isNDCPointInScreen.js";
-import { centerPoint as k } from "../../../shared-utils/three/centerPoint.js";
-class B extends Y {
-  constructor(t) {
-    var o;
-    t.contentStyle = b(y({}, t.contentStyle), {
-      background: "rgba(195,195,195,0.70)",
-      border: "0.5px solid rgba(255,255,255,0.6)",
-      borderRadius: "999px"
+import { centerPoint as U } from "../../../shared-utils/three/centerPoint.js";
+class K extends L {
+  constructor(e) {
+    var n;
+    e.contentStyle = D(y({}, e.contentStyle), {
+      background: "#FFFFFF",
+      color: "#041066",
+      fontFamily: "Arial-BoldMT",
+      fontWeight: "BoldMT",
+      letterSpacing: "0",
+      lineHeight: "20px",
+      padding: "2px 8px",
+      borderRadius: "12px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      "--distance-scale": "1",
+      transition: "font-size 0.5s ease"
     });
-    super(t);
-    C(this, "line");
-    this.line = t.line, (o = this.params.userDistanceItem) != null && o.element ? this.containerDom.appendChild(this.params.userDistanceItem.element) : this.containerDom.appendChild(this.contentDom);
+    super(e);
+    m(this, "line");
+    m(this, "lastFOV");
+    m(this, "cameraUpdateHandler", null);
+    m(this, "onPanoChange", () => {
+      const e = this.getFiveInstance();
+      e && setTimeout(() => this.update(e), 100);
+    });
+    if (this.line = e.line, (n = this.params.userDistanceItem) != null && n.element ? this.containerDom.appendChild(this.params.userDistanceItem.element) : this.containerDom.appendChild(this.contentDom), !document.getElementById("PanoMeasurePluginFontSizes")) {
+      const a = document.createElement("style");
+      a.id = "PanoMeasurePluginFontSizes", document.head.appendChild(a), a.innerHTML = `
+        .pano-measure-item-content {
+          transition: font-size 0.5s ease; /* Smooth transition for font size */
+        }
+        
+        /* sm screen */
+        @media screen and (max-width: 499px) {
+          .pano-measure-item-content {
+            font-size: calc(12px + (14px - 12px) * var(--distance-scale));
+          }
+        }
+        
+        /* md screen */
+        @media screen and (min-width: 500px) and (max-width: 929px) {
+          .pano-measure-item-content {
+            font-size: calc(12px + (14px - 12px) * var(--distance-scale));
+          }
+        }
+        
+        /* lg screen */
+        @media screen and (min-width: 930px) and (max-width: 1365px) {
+          .pano-measure-item-content {
+            font-size: calc(14px + (16px - 14px) * var(--distance-scale));
+          }
+        }
+        
+        /* xl screen */
+        @media screen and (min-width: 1366px) and (max-width: 2549px) {
+          .pano-measure-item-content {
+            font-size: calc(14px + (16px - 14px) * var(--distance-scale));
+          }
+        }
+        
+        /* xxl screen */
+        @media screen and (min-width: 2550px) {
+          .pano-measure-item-content {
+            font-size: calc(0.875rem + (1rem - 0.875rem) * var(--distance-scale));
+          }
+        }
+      `;
+    }
+    this.contentDom.classList.add("pano-measure-item-content");
+  }
+  appendTo(e) {
+    if (super.appendTo(e), !this.cameraUpdateHandler) {
+      this.cameraUpdateHandler = () => this.onCameraUpdate();
+      const n = this.getFiveInstance();
+      n && (n.on("cameraUpdate", this.cameraUpdateHandler), n.on("cameraFovUpdate", this.cameraUpdateHandler), n.on("panoArrived", this.onPanoChange));
+    }
+    return this;
+  }
+  remove() {
+    if (this.cameraUpdateHandler) {
+      const e = this.getFiveInstance();
+      e && (e.off("cameraUpdate", this.cameraUpdateHandler), e.off("cameraFovUpdate", this.cameraUpdateHandler), e.off("panoArrived", this.onPanoChange)), this.cameraUpdateHandler = null;
+    }
+    super.remove();
+  }
+  /** 获取内容文本 */
+  getCurrentContent() {
+    var l, d, s, o;
+    if (this.line.points.length < 2)
+      return "";
+    const [e, n] = this.line.points, a = e.position.clone().distanceTo(n.position), r = (d = this.line.text) != null ? d : (l = this.line.model.config) == null ? void 0 : l.defaultText, p = (o = (s = this.line.model.config) == null ? void 0 : s.getDistanceText) == null ? void 0 : o.call(s, a), c = r != null ? r : p;
+    return c != null ? c : a.toFixed(2) + "m";
   }
-  update(t) {
-    var D;
+  update(e) {
+    var v;
     if (this.line.mesh.visible === !1) {
       this.hide();
       return;
     }
-    const o = t.getElement();
-    if (!o)
+    const n = e.getElement();
+    if (!n)
       return;
-    const a = o.clientWidth, r = o.clientHeight, d = a / 2, c = r / 2;
+    const a = n.clientWidth, r = n.clientHeight, p = a / 2, c = r / 2;
     if (this.line.points.length < 2)
       return;
-    const [l, h] = this.line.points.map(($) => $.position.clone().applyMatrix4(this.line.mesh.matrixWorld)), i = l.clone().project(t.camera), s = h.clone().project(t.camera), m = k(l, h).clone().project(t.camera), p = new I(i.x * d, i.y * c), f = new I(s.x * d, s.y * c), x = p.distanceTo(f);
-    if ((() => !(Math.abs(i.z) > 1 || Math.abs(s.z) > 1 || !g(i) && !g(s) || !g(m) || x === 0))() === !1) {
+    const [l, d] = this.line.points.map((W) => W.position.clone().applyMatrix4(this.line.mesh.matrixWorld)), s = l.clone().project(e.camera), o = d.clone().project(e.camera), h = U(l, d).clone().project(e.camera), f = new I(s.x * p, s.y * c), x = new I(o.x * p, o.y * c), P = f.distanceTo(x);
+    if ((() => !(Math.abs(s.z) > 1 || Math.abs(o.z) > 1 || !g(s) && !g(o) || !g(h) || P === 0))() === !1) {
       this.hide();
       return;
     }
-    const S = (m.x + 1) / 2 * a, E = -(m.y - 1) / 2 * r, M = -(Math.atan((p.y - f.y) / (p.x - f.x)) * 180) / Math.PI, W = this.containerDom.parentElement && this.contentDom.clientWidth > x ? -20 : 0;
-    this.containerDom.style.transform = `translate(${S}px, ${E}px) rotate(${M}deg) translateY(${W}px)`, this.show(), (D = this.params.userDistanceItem) == null || D.update({ line: this.line, polyline: this.line.getPolyline() });
-    const T = this.getCurrentContent();
-    this.contentDom.innerText = T;
+    const C = U(l, d).distanceTo(e.camera.position), H = e.camera.fov || 60, M = 2 * Math.tan(0.5 * H / 180 * Math.PI), z = Math.max(Math.min(1 - M * C / 40, 1), 0);
+    this.contentDom.style.setProperty("--distance-scale", z.toString());
+    const S = (h.x + 1) / 2 * a, w = -(h.y - 1) / 2 * r, T = -(Math.atan((f.y - x.y) / (f.x - x.x)) * 180) / Math.PI, b = this.containerDom.parentElement && this.contentDom.clientWidth > P ? -20 : 0;
+    this.containerDom.style.transform = `translate(${S}px, ${w}px) rotate(${T}deg) translateY(${b}px)`, this.show(), (v = this.params.userDistanceItem) == null || v.update({ line: this.line, polyline: this.line.getPolyline() });
+    const E = this.getCurrentContent();
+    this.contentDom.innerText = E;
   }
-  /** 获取内容文本 */
-  getCurrentContent() {
-    var l, h, i, s;
-    if (this.line.points.length < 2)
-      return "";
-    const [t, o] = this.line.points, a = t.position.clone().distanceTo(o.position), r = (h = this.line.text) != null ? h : (l = this.line.model.config) == null ? void 0 : l.defaultText, d = (s = (i = this.line.model.config) == null ? void 0 : i.getDistanceText) == null ? void 0 : s.call(i, a), c = r != null ? r : d;
-    return c != null ? c : a.toFixed(2) + "m";
+  getFiveInstance() {
+    var e, n;
+    return (n = (e = this.line.model) == null ? void 0 : e.config) == null ? void 0 : n.five;
+  }
+  onCameraUpdate() {
+    const e = this.getFiveInstance();
+    e != null && e.camera && this.lastFOV !== e.camera.fov && (this.lastFOV = e.camera.fov, this.update(e));
   }
 }
 export {
-  B as DistanceItem
+  K as DistanceItem
 };

package/libs/Sculpt/Meshes/Line.d.ts

@@ -35,6 +35,7 @@ export declare class LineMesh extends IObject3D implements RenderDomObjectType {
     private colorBeforeHighlight;
     private paramsStyle;
     private lastRenderDomItem;
+    private lastFOV;
     constructor(params?: Partial<LineMeshStyle & LineData>);
     updateMatrixWorld(force?: boolean): void;
     setPoints(points: AnyPositions): void;
@@ -49,4 +50,6 @@ export declare class LineMesh extends IObject3D implements RenderDomObjectType {
     _onShowed: () => void;
     _onHidden: () => void;
     private updateDomItems;
+    private onCameraUpdate;
+    private onPanoArrived;
 }

package/libs/Sculpt/Meshes/Line.js

@@ -1,89 +1,99 @@
-var b = Object.defineProperty, v = Object.defineProperties;
-var I = Object.getOwnPropertyDescriptors;
-var M = Object.getOwnPropertySymbols;
-var O = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
-var H = (r, l, e) => l in r ? b(r, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[l] = e, y = (r, l) => {
-  for (var e in l || (l = {}))
-    O.call(l, e) && H(r, e, l[e]);
-  if (M)
-    for (var e of M(l))
-      C.call(l, e) && H(r, e, l[e]);
-  return r;
-}, _ = (r, l) => v(r, I(l));
-var s = (r, l, e) => (H(r, typeof l != "symbol" ? l + "" : l, e), e);
-import * as g from "three";
-import { DEFAULT_LINE_COLOR as R, DEFAULT_LINE_WIDTH as B, DEFAULT_HIGHLIGHT_OPACITY as W } from "../typings/style.js";
-import { anyPositionToVector3 as x } from "../../shared-utils/positionToVector3.js";
-import { IObject3D as V } from "../../shared-utils/three/IObject3D.js";
-import { LightTag as P } from "../../shared-utils/tag.js";
+var $ = Object.defineProperty, Y = Object.defineProperties;
+var q = Object.getOwnPropertyDescriptors;
+var B = Object.getOwnPropertySymbols;
+var J = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable;
+var L = (a, n, e) => n in a ? $(a, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[n] = e, p = (a, n) => {
+  for (var e in n || (n = {}))
+    J.call(n, e) && L(a, e, n[e]);
+  if (B)
+    for (var e of B(n))
+      K.call(n, e) && L(a, e, n[e]);
+  return a;
+}, E = (a, n) => Y(a, q(n));
+var o = (a, n, e) => (L(a, typeof n != "symbol" ? n + "" : n, e), e);
+import * as v from "three";
+import { DEFAULT_LINE_COLOR as Q, DEFAULT_LINE_WIDTH as X, DEFAULT_HIGHLIGHT_OPACITY as Z } from "../typings/style.js";
+import { anyPositionToVector3 as ee } from "../../shared-utils/positionToVector3.js";
+import { IObject3D as te } from "../../shared-utils/three/IObject3D.js";
+import { LightTag as ie } from "../../shared-utils/tag.js";
 import "../../vendor/hammerjs/hammer.js";
 import "../../shared-utils/three/PointSelector/index.js";
-import { centerPoint as j } from "../../shared-utils/three/centerPoint.js";
+import { centerPoint as U } from "../../shared-utils/three/centerPoint.js";
 import "../../shared-utils/three/CSS3DRenderer/index.js";
 import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import { getLengthHTML as A } from "../utils/Meshes/getLengthHTML.js";
-import { localToWorld as w } from "../../shared-utils/three/applyObjectMatrixWorld.js";
-import { LineGeometry as E } from "../../shared-utils/three/core/LineGeometry.js";
-import { LineMaterial as k } from "../../shared-utils/three/core/LineMaterial.js";
-import { THREE_Line2 as D } from "../../shared-utils/three/core/Line2.js";
-import { LineMaterial2 as z } from "../../shared-utils/three/core/LineMaterial2.js";
-import { transformUnit as F } from "../utils/unit.js";
-import { RenderDom as S } from "../utils/renderDom.js";
+import { getLengthHTML as se } from "../utils/Meshes/getLengthHTML.js";
+import { localToWorld as V } from "../../shared-utils/three/applyObjectMatrixWorld.js";
+import { LineGeometry as H } from "../../shared-utils/three/core/LineGeometry.js";
+import { LineMaterial as oe } from "../../shared-utils/three/core/LineMaterial.js";
+import { THREE_Line2 as F } from "../../shared-utils/three/core/Line2.js";
+import { LineMaterial2 as ne } from "../../shared-utils/three/core/LineMaterial2.js";
+import { transformUnit as le } from "../utils/unit.js";
+import { RenderDom as T } from "../utils/renderDom.js";
 import "../../shared-utils/three/core/Sphere.js";
 import "../../vendor/animejs/lib/anime.es.js";
 import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import { notNil as d } from "../../shared-utils/isNil.js";
+import { notNil as m } from "../../shared-utils/isNil.js";
 import "../../shared-utils/five/FivePuppet.js";
-class fe extends V {
+class Oe extends te {
   constructor(e) {
-    var c, n, m, a;
+    var h, l, f, d;
     super();
-    s(this, "name", "LineMesh");
-    s(this, "type", "Line2");
-    s(this, "object");
-    s(this, "points", []);
-    s(this, "doms", []);
-    s(this, "highlighted", !1);
-    s(this, "_geometry");
-    s(this, "line1");
-    s(this, "line2");
-    s(this, "opacityBeforeHighlight");
-    s(this, "colorBeforeHighlight");
-    s(this, "paramsStyle", {});
-    s(this, "lastRenderDomItem");
-    s(this, "_onAdded", () => {
+    o(this, "name", "LineMesh");
+    o(this, "type", "Line2");
+    o(this, "object");
+    o(this, "points", []);
+    o(this, "doms", []);
+    o(this, "highlighted", !1);
+    o(this, "_geometry");
+    o(this, "line1");
+    o(this, "line2");
+    o(this, "opacityBeforeHighlight");
+    o(this, "colorBeforeHighlight");
+    o(this, "paramsStyle", {});
+    o(this, "lastRenderDomItem");
+    o(this, "lastFOV");
+    o(this, "_onAdded", () => {
       this.doms.length === 0 && this.paramsStyle.lengthEnable && this.updateDomItems();
     });
-    s(this, "_onRemoved", () => {
+    o(this, "_onRemoved", () => {
       this.doms.forEach((e) => e.destroy()), this.doms = [];
     });
-    s(this, "_onShowed", () => {
+    o(this, "_onShowed", () => {
       this.doms.forEach((e) => e.container.style.display = "block");
     });
-    s(this, "_onHidden", () => {
+    o(this, "_onHidden", () => {
       this.doms.forEach((e) => e.container.style.display = "none");
     });
-    this.paramsStyle = y({ dashed: !1, lineOpacity: 1 }, e), this.geometry = new E();
+    // Handle camera updates (zoom changes)
+    o(this, "onCameraUpdate", () => {
+      var e;
+      (e = this.five) != null && e.camera && this.lastFOV !== this.five.camera.fov && (this.lastFOV = this.five.camera.fov, this.updateDomItems({ force: !0 }));
+    });
+    // Handle panorama point changes
+    o(this, "onPanoArrived", () => {
+      setTimeout(() => this.updateDomItems({ force: !0 }), 100);
+    });
+    this.paramsStyle = p({ dashed: !1, lineOpacity: 1 }, e), this.geometry = new H();
     const i = {
-      color: new g.Color((c = e == null ? void 0 : e.lineColor) != null ? c : R),
-      linewidth: (n = e == null ? void 0 : e.lineWidth) != null ? n : B,
+      color: new v.Color((h = e == null ? void 0 : e.lineColor) != null ? h : Q),
+      linewidth: (l = e == null ? void 0 : e.lineWidth) != null ? l : X,
       dashScale: 1,
       dashSize: 0.02,
       gapSize: 0.02,
-      opacity: (m = e == null ? void 0 : e.lineOpacity) != null ? m : 1,
+      opacity: (f = e == null ? void 0 : e.lineOpacity) != null ? f : 1,
       depthWrite: !1,
       transparent: !0
-    }, o = new k(_(y({}, i), { dashed: !1, depthTest: !0 })), t = new z(_(y({}, i), { dashed: !0, depthTest: !1 }));
-    if (this.line1 = new D(this.geometry, o), this.line2 = new D(this.geometry, t), this.line1.renderOrder = 2, this.line2.renderOrder = 2, this.line1.name = "line1", this.line2.name = "line2", this.add(this.line1), this.five) {
-      const f = (a = this.five.renderer) == null ? void 0 : a.getSize(new g.Vector2());
-      f && this.setResolution(f.width, f.height);
+    }, s = new oe(E(p({}, i), { dashed: !1, depthTest: !0 })), t = new ne(E(p({}, i), { dashed: !0, depthTest: !1 }));
+    if (this.line1 = new F(this.geometry, s), this.line2 = new F(this.geometry, t), this.line1.renderOrder = 2, this.line2.renderOrder = 2, this.line1.name = "line1", this.line2.name = "line2", this.add(this.line1), this.five) {
+      const y = (d = this.five.renderer) == null ? void 0 : d.getSize(new v.Vector2());
+      y && this.setResolution(y.width, y.height), this.five.on("cameraUpdate", this.onCameraUpdate), this.five.on("cameraFovUpdate", this.onCameraUpdate), this.five.on("panoArrived", this.onPanoArrived);
     }
     e && this.setStyle(e), e != null && e.points && this.setPoints(e.points), this.addEventListener("removed", () => {
-      S.cacheObject.delete(this), S.checkDom(this);
+      this.five && (this.five.off("cameraUpdate", this.onCameraUpdate), this.five.off("cameraFovUpdate", this.onCameraUpdate), this.five.off("panoArrived", this.onPanoArrived)), T.cacheObject.delete(this), T.checkDom(this);
     }), this.addEventListener("added", () => {
-      S.cacheObject.add(this);
-    }), S.checkDomEveryFrame();
+      T.cacheObject.add(this);
+    }), T.checkDomEveryFrame();
   }
   get style() {
     return {
@@ -107,7 +117,7 @@ class fe extends V {
   }
   get color() {
     var e;
-    return new g.Color((e = this.line1.material.three_color) != null ? e : this.paramsStyle.lineColor);
+    return new v.Color((e = this.line1.material.three_color) != null ? e : this.paramsStyle.lineColor);
   }
   get dashed() {
     return this.paramsStyle.dashed;
@@ -119,8 +129,8 @@ class fe extends V {
     return this.paramsStyle.occlusionMode;
   }
   get five() {
-    var i, o;
-    const e = (o = (i = window.globalModules) == null ? void 0 : i.five) != null ? o : window.$five;
+    var i, s;
+    const e = (s = (i = window.globalModules) == null ? void 0 : i.five) != null ? s : window.$five;
     return e || console.error("请先调用 Sculpt.modules.init(five) "), e;
   }
   set geometry(e) {
@@ -133,57 +143,57 @@ class fe extends V {
   updateMatrixWorld(e) {
     var i;
     if (super.updateMatrixWorld(e), this.points) {
-      const o = (i = w(this, this.points)) == null ? void 0 : i.map((t) => t.toArray().join(",")).join(",");
-      o !== this.lastRenderDomItem && (this.updateDomItems(), this.lastRenderDomItem = o);
+      const s = (i = V(this, this.points)) == null ? void 0 : i.map((t) => t.toArray().join(",")).join(",");
+      s !== this.lastRenderDomItem && (this.updateDomItems(), this.lastRenderDomItem = s);
     }
   }
   setPoints(e) {
     if (this.points.length === 0 && e.length === 0)
       return;
-    const i = e.map(x).filter(d);
+    const i = e.map(ee).filter(m);
     if (this.points = i, i.length < 2) {
-      const t = new E();
+      const t = new H();
       this.line1.geometry = t, this.line2.geometry = t, this.updateDomItems();
       return;
     }
-    const o = i.flatMap((t) => [t.x, t.y, t.z]);
-    if (o.length > 2) {
+    const s = i.flatMap((t) => [t.x, t.y, t.z]);
+    if (s.length > 2) {
       this.line1.geometry.dispose();
-      const t = new E();
+      const t = new H();
       this.line1.geometry = t, this.line2.geometry = t;
     }
-    this.line1.geometry.setPositions(o), this.line1.computeLineDistances(), this.updateDomItems(), this.needsRender = !0;
+    this.line1.geometry.setPositions(s), this.line1.computeLineDistances(), this.updateDomItems(), this.needsRender = !0;
   }
   setResolution(e, i) {
-    const o = this.line1.material.resolution;
-    (o.x !== e || o.y !== i) && (o.set(e, i), this.needsRender = !0);
+    const s = this.line1.material.resolution;
+    (s.x !== e || s.y !== i) && (s.set(e, i), this.needsRender = !0);
     const t = this.line2.material.resolution;
     (t.x !== e || t.y !== i) && (t.set(e, i), this.needsRender = !0);
   }
   setStyle(e) {
-    var t, c, n, m;
-    if (this.paramsStyle = y(y({}, this.paramsStyle), e), d(e.lineColor)) {
-      const a = new g.Color(e.lineColor);
-      this.line1.material.three_color = a, this.line2.material.three_color = a;
+    var t, h, l, f;
+    if (this.paramsStyle = p(p({}, this.paramsStyle), e), m(e.lineColor)) {
+      const d = new v.Color(e.lineColor);
+      this.line1.material.three_color = d, this.line2.material.three_color = d;
     }
-    d(e.lineWidth) && (this.line1.material.linewidth = e.lineWidth, this.line2.material.linewidth = e.lineWidth), d(e.dashed) && (this.line1.material.dashed = e.dashed), d(e.lineOpacity) && (this.line1.material.opacity = e.lineOpacity, this.line2.material.opacity = e.lineOpacity), this.updateDomItems({ force: !0 });
-    const i = (c = (t = e.occlusionVisibility) != null ? t : this.paramsStyle.occlusionVisibility) != null ? c : !0, o = (m = (n = e.occlusionMode) != null ? n : this.paramsStyle.occlusionMode) != null ? m : "translucence";
-    i ? this.dashed ? (this.remove(this.line2), this.line1.material.dashed = !0, this.line1.material.depthTest = !1) : o === "depthTest" ? (this.remove(this.line2), this.line1.material.dashed = !1, this.line1.material.depthTest = !1) : o === "translucence" && (this.line1.material.depthTest = !0, this.line2.material.depthTest = !1, this.line1.material.dashed = !0, this.line2.material.dashed = !0, this.addIfNotExists(this.line2)) : (this.remove(this.line2), this.line1.material.depthTest = !0, this.line1.material.dashed = this.paramsStyle.dashed), this.doms.forEach((a) => a.intersectCheck = !i), this.needsRender = !0;
+    m(e.lineWidth) && (this.line1.material.linewidth = e.lineWidth, this.line2.material.linewidth = e.lineWidth), m(e.dashed) && (this.line1.material.dashed = e.dashed), m(e.lineOpacity) && (this.line1.material.opacity = e.lineOpacity, this.line2.material.opacity = e.lineOpacity), this.updateDomItems({ force: !0 });
+    const i = (h = (t = e.occlusionVisibility) != null ? t : this.paramsStyle.occlusionVisibility) != null ? h : !0, s = (f = (l = e.occlusionMode) != null ? l : this.paramsStyle.occlusionMode) != null ? f : "translucence";
+    i ? this.dashed ? (this.remove(this.line2), this.line1.material.dashed = !0, this.line1.material.depthTest = !1) : s === "depthTest" ? (this.remove(this.line2), this.line1.material.dashed = !1, this.line1.material.depthTest = !1) : s === "translucence" && (this.line1.material.depthTest = !0, this.line2.material.depthTest = !1, this.line1.material.dashed = !0, this.line2.material.dashed = !0, this.addIfNotExists(this.line2)) : (this.remove(this.line2), this.line1.material.depthTest = !0, this.line1.material.dashed = this.paramsStyle.dashed), this.doms.forEach((d) => d.intersectCheck = !i), this.needsRender = !0;
   }
   highlight(e) {
-    var i, o;
+    var i, s;
     if (this.highlighted = !0, e != null && e.color) {
-      const t = new g.Color(e.color);
+      const t = new v.Color(e.color);
       this.colorBeforeHighlight = (i = this.colorBeforeHighlight) != null ? i : this.line1.material.three_color, this.line1.material.three_color = t, this.line2.material.three_color = t;
     } else {
-      this.opacityBeforeHighlight = (o = this.opacityBeforeHighlight) != null ? o : this.line1.material.opacity;
-      const t = this.opacityBeforeHighlight * W;
+      this.opacityBeforeHighlight = (s = this.opacityBeforeHighlight) != null ? s : this.line1.material.opacity;
+      const t = this.opacityBeforeHighlight * Z;
       this.line1.material.opacity = t, this.line2.material.opacity = t;
     }
     this.needsRender = !0;
   }
   unhighlight() {
-    this.highlighted && (this.highlighted = !1, d(this.opacityBeforeHighlight) && (this.line1.material.opacity = this.opacityBeforeHighlight, this.line2.material.opacity = this.line1.material.opacity, this.opacityBeforeHighlight = void 0), d(this.colorBeforeHighlight) && (this.line1.material.three_color = this.colorBeforeHighlight, this.line2.material.three_color = this.colorBeforeHighlight, this.colorBeforeHighlight = void 0), this.needsRender = !0);
+    this.highlighted && (this.highlighted = !1, m(this.opacityBeforeHighlight) && (this.line1.material.opacity = this.opacityBeforeHighlight, this.line2.material.opacity = this.line1.material.opacity, this.opacityBeforeHighlight = void 0), m(this.colorBeforeHighlight) && (this.line1.material.three_color = this.colorBeforeHighlight, this.line2.material.three_color = this.colorBeforeHighlight, this.colorBeforeHighlight = void 0), this.needsRender = !0);
   }
   updateDomItems(e) {
     const i = () => {
@@ -193,31 +203,60 @@ class fe extends V {
       return i();
     if (!this.five)
       return console.error("Five not found");
-    const o = this.points.map((t, c) => c !== 0 ? [this.points[c - 1], t] : null).filter(d).map((t) => w(this, t));
-    o.forEach(([t, c], n) => {
-      var f;
-      const m = j(t, c);
-      this.doms[n] = (f = this.doms[n]) != null ? f : (() => {
-        var p;
-        const h = new P(this.five), u = (p = this.paramsStyle.occlusionVisibility) != null ? p : !0;
-        return h.intersectCheck = !u, h.simulate3D = !0, h;
-      })(), this.doms[n].setPosition(m, [t, c]);
-      const a = (h, u) => {
-        var L, T;
-        const p = (L = u == null ? void 0 : u.force) != null ? L : !1;
-        this.doms[n].__text === h && !p || (this.doms[n].__text = h, h instanceof HTMLElement ? (this.doms[n].container.innerHTML = "", this.doms[n].container.appendChild(h)) : h ? this.doms[n].container.innerHTML = A(h, {
-          style: `color: #${d((T = this.style) == null ? void 0 : T.lineColor) ? new g.Color(this.style.lineColor).getHexString() : "ffffff"}; ${this.paramsStyle.cssStyle}`
-        }) : this.doms[n].container.innerHTML = "");
+    const s = this.points.map((t, h) => h !== 0 ? [this.points[h - 1], t] : null).filter(m).map((t) => V(this, t));
+    s.forEach(([t, h], l) => {
+      var y;
+      const f = U(t, h);
+      this.doms[l] = (y = this.doms[l]) != null ? y : (() => {
+        var S;
+        const r = new ie(this.five), u = (S = this.paramsStyle.occlusionVisibility) != null ? S : !0;
+        return r.intersectCheck = !u, r.simulate3D = !0, r;
+      })(), this.doms[l].setPosition(f, [t, h]);
+      const d = (r, u) => {
+        var _, D, b;
+        const S = (_ = u == null ? void 0 : u.force) != null ? _ : !1;
+        if (!(this.doms[l].__text === r && !S))
+          if (this.doms[l].__text = r, r instanceof HTMLElement)
+            this.doms[l].container.innerHTML = "", this.doms[l].container.appendChild(r);
+          else if (r) {
+            const w = (() => {
+              if (!this.five || !this.five.camera)
+                return 0;
+              const g = this.five.getElement();
+              if (!g)
+                return 0;
+              const c = g.clientWidth, M = g.clientHeight, C = c / 2, I = M / 2, O = t.clone().project(this.five.camera), W = h.clone().project(this.five.camera), P = {
+                x: O.x * C,
+                y: O.y * I
+              }, R = {
+                x: W.x * C,
+                y: W.y * I
+              };
+              return Math.sqrt(Math.pow(R.x - P.x, 2) + Math.pow(R.y - P.y, 2));
+            })(), A = (() => !this.five || !this.five.camera ? 20 : U(t, h).distanceTo(this.five.camera.position))(), j = ((b = (D = this.five) == null ? void 0 : D.camera) == null ? void 0 : b.fov) || 60, z = 2 * Math.tan(0.5 * j / 180 * Math.PI), k = `--distance-scale: ${Math.max(Math.min(1 - z * A / 40, 1), 0)};`, G = (g) => {
+              const c = document.createElement("div");
+              c.classList.add("LineLengthTag"), c.style.visibility = "hidden", c.style.position = "absolute", c.style.padding = "2px 8px", c.style.fontFamily = "Arial-BoldMT", c.style.fontSize = "14px", c.innerText = g, document.body.appendChild(c);
+              const M = c.offsetWidth;
+              return document.body.removeChild(c), M;
+            };
+            let x = 0;
+            const N = G(r);
+            w > 0 && N > w && (x = -20), this.doms[l].container.innerHTML = se(r, {
+              style: `${k} ${this.paramsStyle.cssStyle || ""}`,
+              offsetY: x
+            });
+          } else
+            this.doms[l].container.innerHTML = "";
       };
       if (this.paramsStyle.tip)
-        a(this.paramsStyle.tip, e);
+        d(this.paramsStyle.tip, e);
       else {
-        const h = F(t.distanceTo(c), this.paramsStyle.lengthUnit);
-        a(h || null, e);
+        const r = le(t.distanceTo(h), this.paramsStyle.lengthUnit);
+        d(r || null, e);
       }
-    }), this.doms.length > o.length && (this.doms.slice(o.length).forEach((t) => t.destroy()), this.doms.length = o.length);
+    }), this.doms.length > s.length && (this.doms.slice(s.length).forEach((t) => t.destroy()), this.doms.length = s.length);
   }
 }
 export {
-  fe as LineMesh
+  Oe as LineMesh
 };