@realsee/dnalogel 2.21.0-dev.0 → 2.21.0-dev.10

package/libs/GuideLinePlugin/GuideLineModeItem/index.js

@@ -1,18 +1,18 @@
-var C = Object.defineProperty, y = Object.defineProperties;
-var k = Object.getOwnPropertyDescriptors;
-var c = Object.getOwnPropertySymbols;
-var w = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
-var m = (o, e, i) => e in o ? C(o, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[e] = i, u = (o, e) => {
-  for (var i in e || (e = {}))
-    w.call(e, i) && m(o, i, e[i]);
-  if (c)
-    for (var i of c(e))
-      F.call(e, i) && m(o, i, e[i]);
-  return o;
-}, g = (o, e) => y(o, k(e));
-var t = (o, e, i) => (m(o, typeof e != "symbol" ? e + "" : e, i), i);
+var k = Object.defineProperty, w = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var C = Object.getOwnPropertySymbols;
+var F = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
+var v = (n, e, t) => e in n ? k(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, m = (n, e) => {
+  for (var t in e || (e = {}))
+    F.call(e, t) && v(n, t, e[t]);
+  if (C)
+    for (var t of C(e))
+      L.call(e, t) && v(n, t, e[t]);
+  return n;
+}, p = (n, e) => w(n, P(e));
+var i = (n, e, t) => (v(n, typeof e != "symbol" ? e + "" : e, t), t);
 import * as l from "three";
-import { logWarning as V, logError as T } from "../../shared-utils/log.js";
+import { logWarning as T, logError as V } from "../../shared-utils/log.js";
 import { createLineGeometry as U } from "../utils/createLineGeometry.js";
 import { isPanoramaLike as x, isModelLike as _ } from "../../shared-utils/five/mode.js";
 import "hammerjs";
@@ -20,13 +20,13 @@ import "@realsee/five";
 import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import { BetterTween as M, tweenProgress as E } from "../../shared-utils/animationFrame/BetterTween.js";
-import { loadTexture as L } from "../../shared-utils/three/loadTexture.js";
-import b from "../../PanoTagPlugin/controller/index.js";
+import { BetterTween as M, tweenProgress as G } from "../../shared-utils/animationFrame/BetterTween.js";
+import { loadTexture as E } from "../../shared-utils/three/loadTexture.js";
+import y from "../../PanoTagPlugin/controller/index.js";
 import O from "../Components/Tag.js";
-import { filterAdjacentDistinct as P } from "../utils/index.js";
-import { objectAssignDeepExports as G } from "../../vendor/object-assign-deep/objectAssignDeep.js";
-const S = (
+import { filterAdjacentDistinct as S } from "../utils/index.js";
+import { objectAssignDeepExports as A } from "../../vendor/object-assign-deep/objectAssignDeep.js";
+const B = (
   /* glsl */
   `
   varying vec2 vUv;
@@ -36,7 +36,7 @@ const S = (
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
 `
-), A = (
+), I = (
   /* glsl */
   `
   // 是否使用颜色
@@ -120,77 +120,86 @@ const S = (
   }
 `
 );
-class B {
-  constructor(e, i) {
-    t(this, "startTagContainer");
-    t(this, "endTagContainer");
-    t(this, "mesh");
-    t(this, "five");
-    t(this, "mode");
-    t(this, "path", []);
-    t(this, "_panoGroup", null);
-    t(this, "skippedPositions", null);
-    t(this, "textureUrl", "");
-    t(this, "scale", 1);
-    t(this, "width", 0.5);
-    t(this, "unitLength", 0.5);
-    t(this, "_visibleFloorIndexes", null);
-    t(this, "visible", null);
+class R {
+  constructor(e, t) {
+    i(this, "name", "");
+    i(this, "startTagContainer");
+    i(this, "endTagContainer");
+    i(this, "mesh");
+    i(this, "five");
+    i(this, "mode");
+    i(this, "path", []);
+    i(this, "_curvePath", null);
+    i(this, "_curvePoints", null);
+    i(this, "_panoGroup", []);
+    i(this, "skippedPositions", null);
+    i(this, "textureUrl", "");
+    i(this, "scale", 1);
+    i(this, "width", 0.5);
+    i(this, "unitLength", 0.5);
+    i(this, "_visibleFloorIndexes", null);
+    i(this, "visible", null);
     /** Five Mode 是否满足 */
-    t(this, "modeVisible", !1);
+    i(this, "modeVisible", !1);
     /** 楼层是否满足展示条件 */
-    t(this, "floorVisible", !0);
+    i(this, "floorVisible", !0);
     /** 默认是否展示 */
-    t(this, "defaultVisible", !1);
+    i(this, "defaultVisible", !1);
     /** 走点动画 */
-    t(this, "inWalkAnimation", !1);
-    t(this, "customVisible", null);
-    t(this, "parent");
-    t(this, "plugin");
-    t(this, "textureHasLoaded", !1);
-    t(this, "disposed", !1);
-    t(this, "flowAnime", new M({ progress: 0 }).to({ progress: 1 }).duration(1500).repeat(1 / 0));
-    t(this, "flickerAnime", E(300).yoyo(!0).repeat(5));
-    t(this, "dispose", () => {
-      var e, i;
-      this.disposed || (this.disposed = !0, this.parent.hooks.off("show", this.updateVisible), this.parent.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("show", this.updateVisible), this.plugin.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("enable", this.updateVisible), this.plugin.hooks.off("disable", this.updateVisible), this.five.off("modeChange", this.onFiveModeChange), this.five.off("modelShownFloorChange", this.onFiveModelShownFloorChange), this.doHide(), (e = this.startTagContainer) == null || e.plugin.dispose(), (i = this.endTagContainer) == null || i.plugin.dispose());
+    i(this, "inWalkAnimation", !1);
+    i(this, "customVisible", null);
+    i(this, "parent");
+    i(this, "plugin");
+    i(this, "textureHasLoaded", !1);
+    i(this, "disposed", !1);
+    i(this, "flowAnime", new M({ progress: 0 }).to({ progress: 1 }).duration(1500).repeat(1 / 0));
+    i(this, "flickerAnime", G(300).yoyo(!0).repeat(5));
+    /** 缓存 panoGroup 中每个点距离起点的长度 */
+    i(this, "cacheLengths", []);
+    i(this, "dispose", () => {
+      var e, t;
+      this.disposed || (this.disposed = !0, this.parent.hooks.off("show", this.updateVisible), this.parent.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("show", this.updateVisible), this.plugin.hooks.off("hide", this.updateVisible), this.plugin.hooks.off("enable", this.updateVisible), this.plugin.hooks.off("disable", this.updateVisible), this.five.off("modeChange", this.onFiveModeChange), this.five.off("modelShownFloorChange", this.onFiveModelShownFloorChange), this.doHide(), (e = this.startTagContainer) == null || e.plugin.dispose(), (t = this.endTagContainer) == null || t.plugin.dispose());
     });
     /** 开始走点动画 */
-    t(this, "onWalkAnimationStart", () => {
+    i(this, "onWalkAnimationStart", () => {
       this.inWalkAnimation = !0, this.updateVisible();
     });
     /** 结束走点动画 */
-    t(this, "onWalkAnimationEnd", () => {
+    i(this, "onWalkAnimationEnd", () => {
       this.inWalkAnimation = !1, this.updateVisible();
     });
     /** 模型状态变更 */
-    t(this, "onFiveModeChange", (e) => {
+    i(this, "onFiveModeChange", (e) => {
       this.modeVisible = this.mode === "panorama" ? x(e) : _(e), this.updateVisible();
     });
-    t(this, "onFiveModelShownFloorChange", (e) => {
+    i(this, "onFiveModelShownFloorChange", (e) => {
       this.floorVisible = e === null || this.visibleFloorIndexes === null || this.visibleFloorIndexes.includes(e), this.updateVisible();
     });
     /** 更新可见性 */
-    t(this, "updateVisible", () => {
+    i(this, "updateVisible", () => {
       const e = (() => !this.parent.visible || !this.plugin.state.enabled || !this.plugin.state.visible ? !1 : this.customVisible !== null ? this.customVisible : this.inWalkAnimation ? !0 : this.modeVisible && this.textureHasLoaded && this.defaultVisible && this.floorVisible)();
       this.visible !== e && (this.visible = e, e ? this.doShow() : this.doHide());
     });
-    t(this, "onFlowAnimeUpdate", (e) => {
-      const { progress: i } = e;
-      this.mesh.material.uniforms.vOffset.value = i, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
+    i(this, "onFlowAnimeUpdate", (e) => {
+      const { progress: t } = e;
+      this.mesh.material.uniforms.vOffset.value = t, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0;
     });
-    t(this, "onFlickerAnimeUpdate", (e) => {
-      var n, s;
-      const { progress: i } = e, r = 1 - i;
-      this.mesh.material.uniforms.flicker.value = r, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0, this.startTagContainer.tag && f(this.startTagContainer.tag) && ((n = this.startTagContainer.app) == null || n.$set(g(u({}, this.startTagContainer.tag.data), { opacity: r }))), this.endTagContainer.tag && f(this.endTagContainer.tag) && ((s = this.endTagContainer.app) == null || s.$set(g(u({}, this.endTagContainer.tag.data), { opacity: r })));
+    i(this, "onFlickerAnimeUpdate", (e) => {
+      var a, r;
+      const { progress: t } = e, s = 1 - t;
+      this.mesh.material.uniforms.flicker.value = s, this.mesh.material.uniformsNeedUpdate = !0, this.five.needsRender = !0, this.startTagContainer.tag && b(this.startTagContainer.tag) && ((a = this.startTagContainer.app) == null || a.$set(p(m({}, this.startTagContainer.tag.data), {
+        opacity: s,
+        name: this.name,
+        distance: Math.round(this.curvePath.getLength())
+      }))), this.endTagContainer.tag && b(this.endTagContainer.tag) && ((r = this.endTagContainer.app) == null || r.$set(p(m({}, this.endTagContainer.tag.data), { opacity: s })));
     });
-    t(this, "logWarning", (e) => V("GuideLineModeItem: ", e));
-    t(this, "logError", (e) => T("GuideLineModeItem: ", e));
-    var s, a;
-    this.five = e, this.mode = i.mode, this.plugin = i.plugin, this.parent = i.parent, this.startTagContainer = { tag: null, plugin: new b(this.five) }, this.endTagContainer = { tag: null, plugin: new b(this.five) };
-    const r = new l.BufferGeometry(), n = new l.ShaderMaterial({
-      vertexShader: S,
-      fragmentShader: A,
+    i(this, "logWarning", (e) => T("GuideLineModeItem: ", e));
+    i(this, "logError", (e) => V("GuideLineModeItem: ", e));
+    var r, o;
+    this.five = e, this.mode = t.mode, this.plugin = t.plugin, this.parent = t.parent, this.startTagContainer = { tag: null, plugin: new y(this.five) }, this.endTagContainer = { tag: null, plugin: new y(this.five) };
+    const s = new l.BufferGeometry(), a = new l.ShaderMaterial({
+      vertexShader: B,
+      fragmentShader: I,
       transparent: !0,
       uniforms: {
         map: { value: null },
@@ -207,7 +216,7 @@ class B {
         vOffset: { value: 0 }
       }
     });
-    this.mesh = new l.Mesh(r, n), this.mesh.name = "GuideLineModeItem", this.mode === "panorama" && (this.parent.hooks.on("walkStart", this.onWalkAnimationStart), this.parent.hooks.on("walkEnded", this.onWalkAnimationEnd)), this.updateVisible(), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveModelShownFloorChange((a = (s = this.five.model) == null ? void 0 : s.shownFloor) != null ? a : null), this.flowAnime.onUpdate(this.onFlowAnimeUpdate), this.flickerAnime.onUpdate(this.onFlickerAnimeUpdate), this.parent.hooks.on("show", this.updateVisible), this.parent.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("show", this.updateVisible), this.plugin.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("enable", this.updateVisible), this.plugin.hooks.on("disable", this.updateVisible), this.plugin.hooks.on("dispose", this.dispose), this.five.on("modeChange", this.onFiveModeChange), this.five.on("modelShownFloorChange", this.onFiveModelShownFloorChange);
+    this.mesh = new l.Mesh(s, a), this.mesh.name = "GuideLineModeItem", this.mode === "panorama" && (this.parent.hooks.on("walkStart", this.onWalkAnimationStart), this.parent.hooks.on("walkEnded", this.onWalkAnimationEnd)), this.updateVisible(), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveModelShownFloorChange((o = (r = this.five.model) == null ? void 0 : r.shownFloor) != null ? o : null), this.flowAnime.onUpdate(this.onFlowAnimeUpdate), this.flickerAnime.onUpdate(this.onFlickerAnimeUpdate), this.parent.hooks.on("show", this.updateVisible), this.parent.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("show", this.updateVisible), this.plugin.hooks.on("hide", this.updateVisible), this.plugin.hooks.on("enable", this.updateVisible), this.plugin.hooks.on("disable", this.updateVisible), this.plugin.hooks.on("dispose", this.dispose), this.five.on("modeChange", this.onFiveModeChange), this.five.on("modelShownFloorChange", this.onFiveModelShownFloorChange);
   }
   get panoGroup() {
     return this._panoGroup;
@@ -216,6 +225,14 @@ class B {
   get visibleFloorIndexes() {
     return this._visibleFloorIndexes;
   }
+  /** THREE Curve 路径 */
+  get curvePath() {
+    return this._curvePath;
+  }
+  /** THREE Curve 路径上的点 */
+  get curvePoints() {
+    return this._curvePoints;
+  }
   /** 自定义展示 */
   setCustomVisible(e) {
     if (this.disposed)
@@ -229,10 +246,10 @@ class B {
     this.defaultVisible !== e && (this.defaultVisible = e, this.updateVisible());
   }
   /** 基础宽、长 */
-  setUnitSize(e, i) {
+  setUnitSize(e, t) {
     if (this.disposed)
       return this.logError("disposed");
-    this.width = e, this.unitLength = i, this.setGeometryByPath(this.path, { width: e, unit_length: i });
+    this.width = e, this.unitLength = t, this.setGeometryByPath(this.path, { width: e, unit_length: t });
   }
   /** 设置缩放 */
   setScale(e) {
@@ -241,40 +258,40 @@ class B {
     this.scale = e, this.setGeometryByPath(this.path, { scale: e });
   }
   /** 通过点位设置线条形状 */
-  setGeometryByPanoGroup(e, i) {
+  setGeometryByPanoGroup(e, t) {
     if (this.disposed)
       return this.logError("disposed");
     if (!this.five.work)
       return this.logError("setPathByPanoGroup: work is not ready");
-    const r = P(e);
-    if (this._panoGroup = r, (i == null ? void 0 : i.skipPanoGroup) !== void 0) {
-      const s = i.skipPanoGroup ? r.map((a) => this.five.work.observers[a]).map((a) => a.standingPosition.clone()) : null;
-      this.skippedPositions = s;
+    const s = S(e);
+    if (this._panoGroup = s, (t == null ? void 0 : t.skipPanoGroup) !== void 0) {
+      const r = t.skipPanoGroup ? s.map((o) => this.five.work.observers[o]).map((o) => o.standingPosition.clone()) : null;
+      this.skippedPositions = r;
     }
-    const n = this.getPathFromPanoGroup(r, this.five.work, i);
-    this.path = n, this.setGeometryByPath(n, i);
+    const a = this.getPathFromPanoGroup(s, this.five.work, t);
+    this.path = a, this.setGeometryByPath(a, t);
   }
   /** 通过路径设置线条形状 */
-  setGeometryByPath(e, i) {
-    var h, p, v;
+  setGeometryByPath(e, t) {
+    var f, g, c;
     if (this.disposed)
       return this.logError("disposed");
-    const r = (h = i == null ? void 0 : i.scale) != null ? h : this.scale, n = (p = i == null ? void 0 : i.width) != null ? p : this.width, s = (v = i == null ? void 0 : i.unit_length) != null ? v : this.unitLength;
-    this.path = e, this.scale = r, this.width = n, this.unitLength = s;
-    const { geometry: a, maxU: d } = U({
+    const s = (f = t == null ? void 0 : t.scale) != null ? f : this.scale, a = (g = t == null ? void 0 : t.width) != null ? g : this.width, r = (c = t == null ? void 0 : t.unit_length) != null ? c : this.unitLength;
+    this.path = e, this.scale = s, this.width = a, this.unitLength = r;
+    const { geometry: o, maxU: u, curvePath: d, curvePoints: h } = U({
       path: e,
-      width: n * r,
-      unitLength: s * r,
+      width: a * s,
+      unitLength: r * s,
       skipPositions: this.skippedPositions
     });
-    this.mesh.geometry = a, this.mesh.material.needsUpdate = !0, this.mesh.material.uniforms.maxU.value = d, this.five.needsRender = !0;
+    this._curvePath = d, this._curvePoints = h, this.mesh.geometry = o, this.mesh.material.needsUpdate = !0, this.mesh.material.uniforms.maxU.value = u, this.five.needsRender = !0;
   }
   /** 设置线条材质 */
   setMartial(e) {
-    var i;
+    var t;
     if (this.disposed)
       return this.logError("disposed");
-    (e == null ? void 0 : e.visible) !== void 0 && this.setDefaultVisible(e.visible), (e == null ? void 0 : e.color) !== void 0 && this.setColor(e.color), (e == null ? void 0 : e.opacity) !== void 0 && this.setOpacity(e.opacity), ((i = e == null ? void 0 : e.texture) == null ? void 0 : i.url) !== void 0 && this.setTextureUrl(e.texture.url), (e == null ? void 0 : e.background_color) !== void 0 && this.setBackgroundColor(e.background_color), (e == null ? void 0 : e.background_opacity) !== void 0 && this.setBackgroundOpacity(e.background_opacity), (e == null ? void 0 : e.border_color) !== void 0 && this.setBorderColor(e.border_color), (e == null ? void 0 : e.border_opacity) !== void 0 && this.setBorderOpacity(e.border_opacity);
+    (e == null ? void 0 : e.visible) !== void 0 && this.setDefaultVisible(e.visible), (e == null ? void 0 : e.color) !== void 0 && this.setColor(e.color), (e == null ? void 0 : e.opacity) !== void 0 && this.setOpacity(e.opacity), ((t = e == null ? void 0 : e.texture) == null ? void 0 : t.url) !== void 0 && this.setTextureUrl(e.texture.url), (e == null ? void 0 : e.background_color) !== void 0 && this.setBackgroundColor(e.background_color), (e == null ? void 0 : e.background_opacity) !== void 0 && this.setBackgroundOpacity(e.background_opacity), (e == null ? void 0 : e.border_color) !== void 0 && this.setBorderColor(e.border_color), (e == null ? void 0 : e.border_opacity) !== void 0 && this.setBorderOpacity(e.border_opacity);
   }
   /** 设置贴图颜色 */
   setColor(e) {
@@ -322,15 +339,15 @@ class B {
   setTextureUrl(e) {
     if (this.disposed)
       return this.logError("disposed");
-    this.textureUrl = e, L(e).then((i) => {
-      this.disposed || this.textureUrl === e && (i.wrapT = l.RepeatWrapping, this.textureHasLoaded = !0, this.mesh.material.uniforms.map.value = i, this.mesh.material.uniformsNeedUpdate = !0, this.mesh.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
+    this.textureUrl = e, E(e).then((t) => {
+      this.disposed || this.textureUrl === e && (t.wrapT = l.RepeatWrapping, this.textureHasLoaded = !0, this.mesh.material.uniforms.map.value = t, this.mesh.material.uniformsNeedUpdate = !0, this.mesh.material.needsUpdate = !0, this.five.needsRender = !0, this.updateVisible());
     });
   }
   setVisibleFloorIndexes(e) {
-    var i, r;
+    var t, s;
     if (this.disposed)
       return this.logError("disposed");
-    this._visibleFloorIndexes = e, this.onFiveModelShownFloorChange((r = (i = this.five.model) == null ? void 0 : i.shownFloor) != null ? r : null);
+    this._visibleFloorIndexes = e, this.onFiveModelShownFloorChange((s = (t = this.five.model) == null ? void 0 : t.shownFloor) != null ? s : null);
   }
   setStartTag(e) {
     this.setTag("start", e);
@@ -344,22 +361,42 @@ class B {
       return this.logError("disposed");
     this.flickerAnime.play();
   }
-  setTag(e, i) {
-    const r = e === "start" ? this.startTagContainer : this.endTagContainer;
-    i || r.plugin.clearTags();
-    const s = G({}, {
+  /** 求起点到 panoIndex 曲线长度
+   * @param index panoIndex 在 panoGroup 中的索引
+   *
+   * @description 为什么不使用 panoIndex 作为参数？
+   * - panoIndex 在一个曲线中可能出现多次，无法确定是哪一个。
+   */
+  getLengthByPanoGroupIndex(e) {
+    return this.disposed ? this.logError("disposed") : this.cacheLengths.length !== 0 ? this.cacheLengths[e] : (this.cacheLengths = this.getPanoGroupLengths(), this.cacheLengths[e]);
+  }
+  getPanoGroupLengths() {
+    const e = this.panoGroup.map((h) => this.five.work.observers[h]), t = this.curvePoints.length, s = this.curvePath.getLength(), a = t - 1, r = s / a, o = this.curvePath.getLengths(a), u = [];
+    let d = 0;
+    for (let h = 0; h < t; h++) {
+      const f = this.curvePoints[h], g = e[d];
+      if (!g)
+        break;
+      g.standingPosition.clone().setY(0).distanceTo(f.clone().setY(0)) < r && (u.push(o[h]), d += 1);
+    }
+    return u;
+  }
+  setTag(e, t) {
+    const s = e === "start" ? this.startTagContainer : this.endTagContainer;
+    t || s.plugin.clearTags();
+    const r = A({}, {
       contentType: "Custom",
       stickType: "2DPoint",
       config: { visibleConfig: { visibleFiveMode: ["Floorplan", "Mapview"], followModelVisibility: !1 } },
       style: { point: { enabled: !1 } },
       data: {}
-    }, i);
-    r.tag = s, f(s) && (r.tag.element = (a) => {
+    }, t);
+    s.tag = r, b(r) && (s.tag.element = (o) => {
       var h;
-      (h = r.app) == null || h.$destroy();
-      const d = new O({ target: a, intro: !0, props: s.data });
-      return r.app = d, () => d.$destroy();
-    }), r.plugin.load({ tagList: [r.tag] });
+      (h = s.app) == null || h.$destroy();
+      const u = e === "start" ? p(m({}, r.data), { name: this.name, distance: Math.round(this.curvePath.getLength()), i18n: this.plugin.config.i18n }) : r.data, d = new O({ target: o, intro: !0, props: u });
+      return s.app = d, () => d.$destroy();
+    }), s.plugin.load({ tagList: [s.tag] });
   }
   doShow() {
     this.mode === "model" && this.flowAnime.play(), this.five.scene.add(this.mesh), this.startTagContainer.plugin.show(), this.endTagContainer.plugin.show(), this.five.needsRender = !0;
@@ -368,21 +405,21 @@ class B {
     this.mode === "model" && this.flowAnime.stop(), this.five.scene.remove(this.mesh), this.startTagContainer.plugin.hide(), this.endTagContainer.plugin.hide(), this.five.needsRender = !0;
   }
   /** 通过 panoIndex 数组计算路径 */
-  getPathFromPanoGroup(e, i, r) {
+  getPathFromPanoGroup(e, t, s) {
     if (e.length < 2)
       return [];
-    const s = e.map((a) => i.observers[a]).map((a) => a.standingPosition.toArray());
-    return [u({ type: "CatmullRomCurve3", points: s }, r)];
+    const r = e.map((o) => t.observers[o]).map((o) => o.standingPosition.toArray());
+    return [m({ type: "CatmullRomCurve3", points: r }, s)];
   }
 }
-function f(o) {
-  return o.contentType === "Custom";
+function b(n) {
+  return n.contentType === "Custom";
 }
-const Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const te = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  GuideLineModeItem: B
+  GuideLineModeItem: R
 }, Symbol.toStringTag, { value: "Module" }));
 export {
-  B as GuideLineModeItem,
-  Z as GuideLineModeItem$1
+  R as GuideLineModeItem,
+  te as GuideLineModeItem$1
 };

package/libs/GuideLinePlugin/GuideLineModeItem.d.ts

@@ -18,12 +18,19 @@ declare class GuideLineModeItem {
     get panoGroup(): number[];
     /** 可展示的楼层 */
     get visibleFloorIndexes(): number[];
+    /** THREE Curve 路径 */
+    get curvePath(): THREE.CurvePath<THREE.Vector3>;
+    /** THREE Curve 路径上的点 */
+    get curvePoints(): THREE.Vector3[];
+    name: string;
     startTagContainer: GuideLineTagContainer;
     endTagContainer: GuideLineTagContainer;
     readonly mesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial>;
     private five;
     private mode;
     private path;
+    private _curvePath;
+    private _curvePoints;
     private _panoGroup;
     private skippedPositions;
     private textureUrl;
@@ -47,6 +54,8 @@ declare class GuideLineModeItem {
     private disposed;
     private flowAnime;
     private flickerAnime;
+    /** 缓存 panoGroup 中每个点距离起点的长度 */
+    private cacheLengths;
     constructor(five: Five, options: {
         mode: PluginType.GuideLineModeItemMode;
         plugin: GuideLinePlugin;
@@ -90,6 +99,14 @@ declare class GuideLineModeItem {
     setEndTag(tag: Tag | PluginType.ModelGuideLineTagData | null): void;
     /** 闪烁 */
     flicker(): void;
+    /** 求起点到 panoIndex 曲线长度
+     * @param index panoIndex 在 panoGroup 中的索引
+     *
+     * @description 为什么不使用 panoIndex 作为参数？
+     * - panoIndex 在一个曲线中可能出现多次，无法确定是哪一个。
+     */
+    getLengthByPanoGroupIndex(index: number): number | void;
+    private getPanoGroupLengths;
     private setTag;
     /** 开始走点动画 */
     private onWalkAnimationStart;

package/libs/GuideLinePlugin/GuideLineModeItem.js

@@ -53,7 +53,7 @@ import "../PanoTagPlugin/utils/planeNormal.js";
 import "../PanoTagPlugin/utils/normalPositionToPositions.js";
 import "../PanoTagPlugin/controller/TagCache.js";
 import "../base/BasePlugin.js";
-import "../shared-utils/isAbsoluteURL.js";
+import "../shared-utils/absoluteUrl.js";
 import "../vendor/svelte/store/index.js";
 import "../vendor/svelte/internal/index.js";
 import "../shared-utils/device.js";

package/libs/GuideLinePlugin/index.js

@@ -21,7 +21,7 @@ import "../shared-utils/three/centerPoint.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
 import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "../shared-utils/isAbsoluteURL.js";
+import "../shared-utils/absoluteUrl.js";
 import "../shared-utils/equal.js";
 import "../shared-utils/isTruelyObject.js";
 import "../CruisePlugin/Controller.js";

package/libs/GuideLinePlugin/utils/createLineGeometry.d.ts

@@ -19,5 +19,12 @@ interface LineGeometryOption {
 export declare function createLineGeometry(options: LineGeometryOption): {
     geometry: THREE.BufferGeometry;
     maxU: number;
+    curvePath?: undefined;
+    curvePoints?: undefined;
+} | {
+    geometry: THREE.BufferGeometry;
+    maxU: number;
+    curvePath: THREE.CurvePath<THREE.Vector3>;
+    curvePoints: THREE.Vector3[];
 };
 export {};

package/libs/GuideLinePlugin/utils/createLineGeometry.js

@@ -1,5 +1,5 @@
 import * as n from "three";
-import { Vector3 as P } from "three";
+import { Vector3 as x } from "three";
 import { polylineNormals as G } from "../../vendor/polyline-normals/index.js";
 import "../../vendor/polyline-miter-util/index.js";
 import "../../vendor/gl-vec2/add.js";
@@ -12,33 +12,35 @@ function Q(e) {
   const i = e.width, g = e.unitLength / i, c = i / 2, E = e.path;
   if (E.length === 0)
     return { geometry: new n.BufferGeometry(), maxU: 0 };
-  const h = new n.CurvePath();
+  const u = new n.CurvePath();
   E.forEach((t) => {
-    const a = I(t);
-    a && h.add(a);
+    const m = I(t);
+    m && u.add(m);
   });
-  const x = Math.ceil(h.getLength() * 100), o = h.getPoints(x), w = o.length, L = G(o.map((t) => [t.x, t.z])), B = (w - 1) * z * M, y = 2 * w, C = y * X, U = y * k, r = new Uint32Array(B), s = new Float32Array(C), u = new Float32Array(U);
-  let d = 0, N = 0;
+  const w = Math.ceil(u.getLength() * 100);
+  u.arcLengthDivisions = w;
+  const o = u.getPoints(w), y = o.length, L = G(o.map((t) => [t.x, t.z])), B = (y - 1) * z * M, d = 2 * y, C = d * X, U = d * k, r = new Uint32Array(B), s = new Float32Array(C), a = new Float32Array(U);
+  let N = 0, R = 0;
   for (let t = 0; t < o.length; t++) {
-    const [a, R] = L[t][0], T = o[t], { x: A, y: _, z: b } = T, l = new P(A + a * c, _ + 0.05, b + R * c);
-    s[t * 6 + 0] = l.x, s[t * 6 + 1] = l.y, s[t * 6 + 2] = l.z;
-    const f = new P(A - a * c, _ + 0.05, b - R * c);
-    s[t * 6 + 3] = f.x, s[t * 6 + 4] = f.y, s[t * 6 + 5] = f.z, d += t > 0 ? o[t - 1].clone().sub(o[t]).length() : 0;
-    const p = d / i / g;
-    if (N = p, u[t * 4 + 0] = 0, u[t * 4 + 1] = p, u[t * 4 + 2] = 1, u[t * 4 + 3] = p, e.skipPositions) {
-      const V = new n.Vector3().lerpVectors(l, f, 0.5);
+    const [m, A] = L[t][0], T = o[t], { x: _, y: b, z: P } = T, f = new x(_ + m * c, b + 0.05, P + A * c);
+    s[t * 6 + 0] = f.x, s[t * 6 + 1] = f.y, s[t * 6 + 2] = f.z;
+    const h = new x(_ - m * c, b + 0.05, P - A * c);
+    s[t * 6 + 3] = h.x, s[t * 6 + 4] = h.y, s[t * 6 + 5] = h.z, N += t > 0 ? o[t - 1].clone().sub(o[t]).length() : 0;
+    const v = N / i / g;
+    if (R = v, a[t * 4 + 0] = 0, a[t * 4 + 1] = v, a[t * 4 + 2] = 1, a[t * 4 + 3] = v, e.skipPositions) {
+      const V = new n.Vector3().lerpVectors(f, h, 0.5);
       if (e.skipPositions.some((F) => F.distanceTo(V) < 0.26))
         continue;
     }
     t !== o.length - 1 && (r[t * 6 + 0] = t * 2 + 0, r[t * 6 + 1] = t * 2 + 2, r[t * 6 + 2] = t * 2 + 1, r[t * 6 + 3] = t * 2 + 2, r[t * 6 + 4] = t * 2 + 3, r[t * 6 + 5] = t * 2 + 1);
   }
-  const m = new n.BufferGeometry();
-  return m.setAttribute("position", new n.BufferAttribute(s, 3)), m.setAttribute("uv", new n.BufferAttribute(u, 2)), m.setIndex(new n.BufferAttribute(r, 1)), { geometry: m, maxU: N };
+  const l = new n.BufferGeometry();
+  return l.setAttribute("position", new n.BufferAttribute(s, 3)), l.setAttribute("uv", new n.BufferAttribute(a, 2)), l.setIndex(new n.BufferAttribute(r, 1)), { geometry: l, maxU: R, curvePath: u, curvePoints: o };
 }
 function I(e) {
   if (O(e)) {
-    const i = [e.closed, e.curve_type, e.tension], v = e.points.map((c) => new n.Vector3().fromArray(c));
-    return new n.CatmullRomCurve3(v, ...i);
+    const i = [e.closed, e.curve_type, e.tension], p = e.points.map((c) => new n.Vector3().fromArray(c));
+    return new n.CatmullRomCurve3(p, ...i);
   }
 }
 function O(e) {