@realsee/dnalogel 2.30.3 → 3.0.0-0

package/libs/PanoTagPlugin/controller/TagRender.js

@@ -1,34 +1,44 @@
-var k = Object.defineProperty;
-var E = (b, f, t) => f in b ? k(b, f, { enumerable: !0, configurable: !0, writable: !0, value: t }) : b[f] = t;
-var P = (b, f, t) => (E(b, typeof f != "symbol" ? f + "" : f, t), t);
-var M = (b, f, t) => new Promise((e, o) => {
+var A = Object.defineProperty;
+var j = Object.getOwnPropertySymbols;
+var V = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var y = (c, d, t) => d in c ? A(c, d, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[d] = t, w = (c, d) => {
+  for (var t in d || (d = {}))
+    V.call(d, t) && y(c, t, d[t]);
+  if (j)
+    for (var t of j(d))
+      x.call(d, t) && y(c, t, d[t]);
+  return c;
+};
+var b = (c, d, t) => (y(c, typeof d != "symbol" ? d + "" : d, t), t);
+var M = (c, d, t) => new Promise((e, o) => {
   var i = (r) => {
     try {
       a(t.next(r));
-    } catch (s) {
-      o(s);
+    } catch (n) {
+      o(n);
     }
-  }, n = (r) => {
+  }, s = (r) => {
     try {
       a(t.throw(r));
-    } catch (s) {
-      o(s);
+    } catch (n) {
+      o(n);
     }
-  }, a = (r) => r.done ? e(r.value) : Promise.resolve(r.value).then(i, n);
-  a((t = t.apply(b, f)).next());
+  }, a = (r) => r.done ? e(r.value) : Promise.resolve(r.value).then(i, s);
+  a((t = t.apply(c, d)).next());
 });
-import { TagComputer as w } from "./TagComputer.js";
-import { Group as y, Quaternion as O, Vector3 as D, Matrix4 as g } from "three";
-import A from "../Components/TagContainer.js";
-import V from "../Components/Tag/index.js";
+import { TagComputer as O } from "./TagComputer.js";
+import { Group as R, Quaternion as I, Vector3 as D, Matrix4 as g } from "three";
+import G from "../Components/TagContainer.js";
+import F from "../Components/Tag/index.js";
+import { CSS3DRenderPlugin as L } from "../../CSS3DRenderPlugin/index.js";
+import { loadGLTF as W } from "../../shared-utils/three/GLTFLoader.js";
+import { isMediaModelTag as S, isStickModelTag as $ } from "../utils/tag/tagCheck.js";
+import { VideoPlane as k, ImagePlane as E } from "../utils/model/mediaPlane.js";
+import { centerPoint as q } from "../../shared-utils/three/centerPoint.js";
 import { arrayPositionToVector3 as C } from "../../shared-utils/positionToVector3.js";
-import { centerPoint as x } from "../../shared-utils/three/centerPoint.js";
-import { isMediaModelTag as S, isStickModelTag as G } from "../utils/tag/tagCheck.js";
-import { CSS3DRenderPlugin as I } from "../../CSS3DRenderPlugin/index.js";
-import { loadGLTF as F } from "../../shared-utils/three/GLTFLoader.js";
-import { VideoPlane as R, ImagePlane as j } from "../utils/model/mediaPlane.js";
 import "../utils/tagPosition.js";
 import "../utils/checkRange.js";
+import "../../shared-utils/five/mode.js";
 import "hammerjs";
 import "@realsee/five";
 import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
@@ -59,6 +69,8 @@ import "../../vendor/svelte/internal/index.js";
 import "../../shared-utils/device.js";
 import "../../shared-utils/five/FiveDomEvents.js";
 import "../../shared-utils/three/getObjectVisible.js";
+import "../utils/tag/adaptConfig.js";
+import "../../shared-utils/typescript/entries.js";
 import "../../shared-utils/five/getFloorIndex.js";
 import "../../shared-utils/safeObj.js";
 import "../../shared-utils/util.js";
@@ -142,52 +154,53 @@ import "../Components/Tag/CustomTag.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "@realsee/five/gltf-loader";
-const L = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
-class ri extends w {
+const B = /* @__PURE__ */ new Map(), N = /* @__PURE__ */ new Map();
+class pi extends O {
   constructor(t) {
     super(t);
-    P(this, "group", new y());
-    P(this, "renderMap", /* @__PURE__ */ new Map());
-    P(this, "imagePlaneGroup", new y());
-    P(this, "gltfObjectGroup", new y());
+    b(this, "group", new R());
+    b(this, "renderMap", /* @__PURE__ */ new Map());
+    b(this, "imagePlaneGroup", new R());
+    b(this, "gltfObjectGroup", new R());
     /** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
-    P(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    b(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
     /** 临时状态 */
-    P(this, "temporaryState", { visible: !0 });
+    b(this, "temporaryState", { visible: !0 });
     /** 点标签 */
-    P(this, "TagContainerSvelte");
+    b(this, "TagContainerSvelte");
     /** 加载外部模型 */
-    P(this, "loadModel", (t) => M(this, null, function* () {
+    b(this, "loadModel", (t) => M(this, null, function* () {
       var a;
       const e = t.data.modelUrl;
       if (!e)
         return;
-      const o = F(e).then((r) => {
-        var l, m, h, p, u;
-        const s = Object.assign(r.scene, {
+      t.loading = !0;
+      const o = W(e).then((r) => {
+        var m, h, f, p, P;
+        const n = Object.assign(r.scene, {
           customID: t.id,
           isTagModel: !0,
           removeEventListener: t.config.clickable === !1 ? () => {
-          } : this.addObjectClickHandler(t, r.scene, (c) => {
-            this.hooks.emit("click", { target: "TagModel", tag: t, event: c });
+          } : this.addObjectClickHandler(t, r.scene, (u) => {
+            this.hooks.emit("click", { target: "TagModel", tag: t, event: u });
           })
         });
-        return s.visible = this.getCurrentVisibleState(t), new g().fromArray(t.matrix).decompose(s.position, s.quaternion, s.scale), s.updateWorldMatrix(!0, !0), s.visible = this.getVisibleByFiveMode(t), (h = (m = (l = this.config) == null ? void 0 : l.globalConfig) == null ? void 0 : m.modelConfig) != null && h.autoLookAtEnabled && ((u = (p = t.config) == null ? void 0 : p.modelConfig) != null && u.autoLookAtEnabled) && s.lookAt(this.five.camera.position.clone().setY(s.position.y)), s;
+        return n.visible = this.getCurrentVisibleState(t), new g().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisible(t), (f = (h = (m = this.config) == null ? void 0 : m.globalConfig) == null ? void 0 : h.modelConfig) != null && f.autoLookAtEnabled && ((P = (p = t.config) == null ? void 0 : p.modelConfig) != null && P.autoLookAtEnabled) && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
       });
       t.model = { promise: o };
       const i = yield o;
-      if (((a = t.model) == null ? void 0 : a.promise) !== o || !this.tags.includes(t))
+      if (t.loading = !1, ((a = t.model) == null ? void 0 : a.promise) !== o || !this.tags.includes(t))
         return;
       t.model.object = i;
-      const n = this.gltfObjectGroup.children.find((r) => r.customID === t.id);
-      if (n && (this.gltfObjectGroup.remove(n), n.removeEventListener()), this.updateRender3DDomTag(), S(t)) {
+      const s = this.gltfObjectGroup.children.find((r) => r.customID === t.id);
+      if (s && (this.gltfObjectGroup.remove(s), s.removeEventListener()), this.updateRender3DDomTag(), S(t)) {
         if (this.getRenderType(t) === "Mesh" && !t.mediaPlane) {
           const r = t.data.mediaPosition.map(C);
-          t.mediaPlane = new j(t.data.mediaData[0].url, t.data.mediaPosition.map(C), {
+          t.mediaPlane = new E(t.data.mediaData[0].url, t.data.mediaPosition.map(C), {
             objectFit: t.data.objectFit
           });
-          const s = new D().addVectors(r[0], r[2]).divideScalar(2);
-          t.mediaPlane.position.copy(s), i.add(t.mediaPlane);
+          const n = new D().addVectors(r[0], r[2]).divideScalar(2);
+          t.mediaPlane.position.copy(n), i.add(t.mediaPlane);
         }
         this.getRenderType(t) !== "Mesh" && (i.updateTagCss3DObjectMatrix = () => this.updateTagCss3DObjectMatrix(t, i), i.updateTagCss3DObjectMatrix());
       }
@@ -219,34 +232,34 @@ class ri extends w {
     this.enabledModelTagSet.clear(), this.tags.forEach((t) => t.stickType === "Model" && this.enabledModelTagSet.add(t.id)), this.updateRenderPointTag(), this.updateRender3DDomTag(), this.updateRenderModelTag(), this.updateRenderImagePlane(), this.updateRenderVideoPlane();
   }
   updateRenderVideoPlane() {
-    this.sort(this.filterImagePlane).filter((e) => {
+    this.filterImagePlane.filter((e) => {
       var o, i;
       return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Video";
     }).forEach((e) => {
-      var l, m, h, p, u;
+      var m, h, f, p, P;
       const o = e.data.mediaData[0];
       if (!o)
         return;
       const { url: i } = o;
       if (!i)
         return;
-      e.mediaPlane && !((m = (l = e.state) == null ? void 0 : l.visible) == null || m) && e.mediaPlane instanceof R && e.mediaPlane.pause();
-      const n = e.position.map(C), a = this.getCurrentVisibleState(e), r = (() => !!(e.mediaPlane && !a))(), s = (() => !!(!e.mediaPlane && a))(), d = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
-      if ((r || d) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (h = e.mediaPlane) == null || h.dispose(), (p = e.mediaPlane) == null || p.removeFromParent(), e.mediaPlane = void 0), s || d) {
-        const c = new R(i, n, {
+      e.mediaPlane && !((h = (m = e.state) == null ? void 0 : m.visible) == null || h) && e.mediaPlane instanceof k && e.mediaPlane.pause();
+      const s = e.position.map(C), a = this.getCurrentVisibleState(e), r = (() => !!(e.mediaPlane && !a))(), n = (() => !!(!e.mediaPlane && a))(), l = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
+      if ((r || l) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (f = e.mediaPlane) == null || f.dispose(), (p = e.mediaPlane) == null || p.removeFromParent(), e.mediaPlane = void 0), n || l) {
+        const u = new k(i, s, {
           videoCoverSrc: o.videoCoverUrl,
           playButton: e.data.playIcon,
-          paused: !((u = e.data.autoplayConfig) != null && u.autoplayVideo),
+          paused: !((P = e.data.autoplayConfig) != null && P.autoplayVideo),
           objectFit: e.data.objectFit,
-          videoTextureMap: L,
-          ImageTextureMap: B,
+          videoTextureMap: B,
+          ImageTextureMap: N,
           domEvents: this.domEvents
         });
-        c.onVideoReady = (T) => {
-          T.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: c.videoInstance }));
+        u.onVideoReady = (T) => {
+          T.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: u.videoInstance }));
         };
         const v = (T) => (this.five.on("renderFrame", T), () => this.five.off("renderFrame", T));
-        c.initialRenderHooks(v), e.mediaPlane = c, this.imagePlaneGroup.add(e.mediaPlane);
+        u.initialRenderHooks(v), e.mediaPlane = u, this.imagePlaneGroup.add(e.mediaPlane);
       }
     });
   }
@@ -254,17 +267,17 @@ class ri extends w {
    * @description: 渲染图片贴片
    */
   updateRenderImagePlane() {
-    this.sort(this.filterImagePlane).filter((e) => {
+    this.filterImagePlane.filter((e) => {
       var o, i;
       return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Image";
     }).forEach((e) => {
-      var d, l;
+      var l, m;
       const { url: o } = e.data.mediaData[0];
       if (!o)
         return;
-      const i = e.position.map(C), n = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !n))(), r = (() => !!(!e.mediaPlane && n))(), s = (() => !!(e.mediaPlane && e.mediaPlane.src !== o))();
-      (a || s) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (d = e.mediaPlane) == null || d.dispose(), (l = e.mediaPlane) == null || l.removeFromParent(), e.mediaPlane = void 0), (r || s) && (e.mediaPlane = new j(o, i, { objectFit: e.data.objectFit }), e.config.clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (m) => {
-        this.hooks.emit("click", { tag: e, target: "TagContent", event: m.origDomEvent });
+      const i = e.position.map(C), s = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !s))(), r = (() => !!(!e.mediaPlane && s))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== o))();
+      (a || n) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (l = e.mediaPlane) == null || l.dispose(), (m = e.mediaPlane) == null || m.removeFromParent(), e.mediaPlane = void 0), (r || n) && (e.mediaPlane = new E(o, i, { objectFit: e.data.objectFit }), e.config.clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (h) => {
+        this.hooks.emit("click", { tag: e, target: "TagContent", event: h.origDomEvent });
       }), this.imagePlaneGroup.add(e.mediaPlane));
     });
   }
@@ -272,45 +285,45 @@ class ri extends w {
    * @description: 渲染3D贴片
    */
   updateRender3DDomTag() {
-    this.sort([...this.filterCSS3DTag]).forEach((e) => {
-      var o, i, n, a;
+    this.filterCSS3DTag.forEach((e) => {
+      var o, i, s;
       if (e.tag3DContentSvelte) {
-        const { svelteApp: r, css3DInstance: s, initialNormal: d, currentNormal: l } = e.tag3DContentSvelte;
-        if (r.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !d.equals(l)) {
-          const m = new O().setFromUnitVectors(d, l);
-          s.css3DObject.setRotationFromQuaternion(m);
+        const { svelteApp: a, css3DInstance: r, initialNormal: n, currentNormal: l } = e.tag3DContentSvelte;
+        if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(l)) {
+          const m = new I().setFromUnitVectors(n, l);
+          r.css3DObject.setRotationFromQuaternion(m);
         }
         return;
       } else {
         if (S(e) && !((o = e.model) != null && o.object) || ((i = e.state) == null ? void 0 : i.visible) === !1 || !this.state.visible || !this.state.enabled)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = I(this.five)), e.stickType === "3DPoint" && !e.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = L(this.five)), e.stickType === "3DPoint" && !e.normal)
           return console.error("updateRenderPlaneTag: 三维点标签缺少法向量！");
-        const r = this.getPositions(e);
-        if (!r)
+        const a = this.getPositions(e);
+        if (!a)
           return;
-        const s = this.getTagNormal(e);
-        if (!s)
+        const r = this.getTagNormal(e);
+        if (!r)
           return;
-        const d = this.getTagConfig(e), l = (n = d.tag3DConfig) != null ? n : {};
-        if (this.getRenderType(e) === "BehindDom") {
+        const n = this.getTagConfig(e), l = w({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
+        if (this.getRenderType(e) === "BehindDom" || l.mode === "behind") {
           l.mode = "behind", l.container = document.createElement("div");
-          const p = "black";
-          l.container.style.backgroundColor = p, l.container.style.border = `3px solid ${p}`, this.css3DRenderPlugin.hooks.on("render", () => {
-            var u;
-            if (m.css3DObject.opacityMesh && d.clickable !== !1) {
-              const c = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (v) => {
-                this.hooks.emit("click", { event: v, target: "TagContent", tag: e });
+          const f = "black";
+          l.container.style.backgroundColor = f, l.container.style.border = `3px solid ${f}`, this.css3DRenderPlugin.hooks.on("render", () => {
+            var p;
+            if (m.css3DObject.opacityMesh && n.clickable !== !1) {
+              const P = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (u) => {
+                this.hooks.emit("click", { event: u, target: "TagContent", tag: e });
               });
-              (u = this.store.css3DRenderDisposer.get(e.id)) == null || u.push(c);
+              (p = this.store.css3DRenderDisposer.get(e.id)) == null || p.push(P);
             }
           });
         }
-        const m = this.css3DRenderPlugin.create3DDomContainer(r, l);
+        const m = this.css3DRenderPlugin.create3DDomContainer(a, l);
         if (!m)
           return;
         this.store.css3DRenderDisposer.set(e.id, [m.dispose]);
-        const h = new V({
+        const h = new F({
           target: m.container,
           props: {
             tag: e,
@@ -325,12 +338,12 @@ class ri extends w {
           svelteApp: h,
           domContainer: m,
           css3DInstance: m,
-          initialNormal: s,
-          currentNormal: s,
+          initialNormal: r,
+          currentNormal: r,
           dispose: () => {
             h.$destroy(), m.dispose();
           }
-        }, S(e) && ((a = e.model) != null && a.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
+        }, S(e) && ((s = e.model) != null && s.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
       }
     }), this.clearUnusedPanelTag();
   }
@@ -344,8 +357,8 @@ class ri extends w {
   updateRenderModelTag() {
     const t = (i) => !this.enabledModelTagSet.has(i.customID), e = this.gltfObjectGroup.children.filter(t);
     e.forEach((i) => i.removeEventListener()), this.gltfObjectGroup.remove(...e), this.tags.filter((i) => i.stickType === "Model").forEach((i) => {
-      var n;
-      (n = i.model) == null || n.promise.then((a) => {
+      var s;
+      (s = i.model) == null || s.promise.then((a) => {
         a.visible = this.getCurrentVisibleState(i);
       });
     }), this.five.needsRender = !0;
@@ -361,50 +374,35 @@ class ri extends w {
    * @param model 模型
    */
   updateTagCss3DObjectMatrix(t, e) {
-    var u, c, v;
-    const o = (c = (u = t.config.tag3DConfig) == null ? void 0 : u.ratio) != null ? c : 216e-5, i = (v = t.tag3DContentSvelte) == null ? void 0 : v.css3DInstance.css3DObject;
+    var P, u, v;
+    const o = (u = (P = t.config.tag3DConfig) == null ? void 0 : P.ratio) != null ? u : 216e-5, i = (v = t.tag3DContentSvelte) == null ? void 0 : v.css3DInstance.css3DObject;
     if (!i)
       return;
-    const n = S(t) ? t.data.mediaPosition : t.position;
-    if (!n || n.length !== 4 || !Array.isArray(n[0]) || !Array.isArray(n[2]))
+    const s = S(t) ? t.data.mediaPosition : t.position;
+    if (!s || s.length !== 4 || !Array.isArray(s[0]) || !Array.isArray(s[2]))
       return;
     e.updateWorldMatrix(!1, !1);
-    const a = e.matrixWorld, r = new D().fromArray(n[0]), s = new D().fromArray(n[2]), d = x(r, s).add(new D(0, 0, 5e-4)), l = new g().setPosition(d), m = new g().makeScale(o, o, o), h = new g().multiply(a).multiply(l).multiply(m);
-    h.decompose(i.position, i.quaternion, i.scale);
+    const a = e.matrixWorld, r = new D().fromArray(s[0]), n = new D().fromArray(s[2]), l = q(r, n).add(new D(0, 0, 5e-4)), m = new g().setPosition(l), h = new g().makeScale(o, o, o), f = new g().multiply(a).multiply(m).multiply(h);
+    f.decompose(i.position, i.quaternion, i.scale);
     const p = i.opacityMesh;
-    p && h.decompose(p.position, p.quaternion, p.scale);
+    p && f.decompose(p.position, p.quaternion, p.scale);
   }
   /** 添加模型标签 */
   addMediaModelTag(t) {
     return M(this, null, function* () {
-      const e = t.filter(G).map((o) => this.loadModel(o));
-      yield Promise.all(e), this.setModelMedialVisible(), this.updateRenderAllTags();
+      const e = t.filter($).map((o) => this.loadModel(o));
+      yield Promise.all(e), this.setVisible(), this.updateRenderAllTags();
     });
   }
   /**
    * @description: 渲染单个点的标签
    */
   updateRenderPointTag() {
-    var e;
     const t = this.filterPointTag;
-    if (this.setTagZIndex(t), this.setPointTagPosition(), this.TagContainerSvelte)
-      this.TagContainerSvelte.$set({ tags: t, state: this.state, temporaryState: this.temporaryState });
-    else {
-      const o = (e = this.five.getElement()) == null ? void 0 : e.parentElement;
-      if (!o)
-        return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new A({
-        target: o,
-        props: {
-          hooks: this.hooks,
-          tags: t,
-          state: this.state,
-          temporaryState: this.temporaryState,
-          mediaStore: this.mediaStore,
-          renderMap: this.renderMap
-        }
-      });
-    }
+    this.setTagZIndex(t), this.updateDomView();
+  }
+  updatePointTagPosition() {
+    this.setPointTagPosition(), this.updateDomView();
   }
   updateTagContainerVisible() {
     var t;
@@ -413,8 +411,8 @@ class ri extends w {
       temporaryState: this.temporaryState,
       withAnimation: this.store.visibleWithAnimation
     }), this.filterCSS3DTag.forEach((e) => {
-      var o, i, n, a, r;
-      (a = (i = (o = e.tag3DContentSvelte) == null ? void 0 : o.css3DInstance) == null ? void 0 : i.css3DObject) == null || a.setVisible((this.state.visible && ((n = e.state) == null ? void 0 : n.visible)) !== !1), (r = e.tag3DContentSvelte) == null || r.svelteApp.$set({
+      var o, i, s, a, r;
+      (a = (i = (o = e.tag3DContentSvelte) == null ? void 0 : o.css3DInstance) == null ? void 0 : i.css3DObject) == null || a.setVisible((this.state.visible && ((s = e.state) == null ? void 0 : s.visible)) !== !1), (r = e.tag3DContentSvelte) == null || r.svelteApp.$set({
         state: this.state,
         temporaryState: this.temporaryState,
         withAnimation: this.store.visibleWithAnimation
@@ -439,7 +437,30 @@ class ri extends w {
       (!o || o.stickType === "2DPoint") && (e == null || e.forEach((i) => i == null ? void 0 : i()), this.store.css3DRenderDisposer.delete(t));
     }
   }
+  updateDomView(t = {}) {
+    var o, i;
+    const e = this.filterPointTag;
+    if (this.TagContainerSvelte)
+      this.TagContainerSvelte.$set({ tags: e, state: this.state, temporaryState: this.temporaryState });
+    else {
+      const s = (o = this.five.getElement()) == null ? void 0 : o.parentElement;
+      if (!s)
+        return console.error("updateRenderPlaneTag: tag2DContainer not found");
+      this.TagContainerSvelte = new G({
+        target: s,
+        props: {
+          hooks: this.hooks,
+          tags: e,
+          state: this.state,
+          temporaryState: this.temporaryState,
+          mediaStore: this.mediaStore,
+          renderMap: this.renderMap,
+          withAnimation: (i = t == null ? void 0 : t.withAnimation) != null ? i : this.store.visibleWithAnimation
+        }
+      });
+    }
+  }
 }
 export {
-  ri as TagRender
+  pi as TagRender
 };

package/libs/PanoTagPlugin/controller/TagUtil.d.ts

@@ -3,7 +3,9 @@ import * as THREE from 'three';
 import type { Tag, Tags, PointTagInstance, Point3DTag } from '../typings';
 import { TagCache } from './TagCache';
 import type { CSS3DRenderPluginExportType } from '../../CSS3DRenderPlugin';
-import type { Five } from '@realsee/five';
+import { Five } from '@realsee/five';
+import type { State as FiveState } from '@realsee/five';
+import type { Mode } from '@realsee/five';
 import { FiveDomEvents } from '../../shared-utils/five/FiveDomEvents';
 export declare abstract class TagUtil extends TagCache {
     tags: TagInstance[];
@@ -21,7 +23,6 @@ export declare abstract class TagUtil extends TagCache {
         resizeObserverDisposerAdding: boolean;
         disposed: boolean;
     };
-    protected get isPanorama(): boolean;
     protected domEvents: FiveDomEvents;
     private mouseInfo?;
     protected constructor(five: Five);
@@ -29,16 +30,17 @@ export declare abstract class TagUtil extends TagCache {
     /** 暂停当前标签内进行的所有多媒体 */
     pauseCurrentMedia(): void;
     /**
-     * @description: 获取merge后的配置
+     * @description: 获取标签配置
      */
     getTagConfig(tag: Tag, params?: {
-        useCache: boolean;
+        useCache?: boolean;
+        fiveMode?: Mode;
     }): TagConfig<"Model" | "Custom" | "Audio" | "Text" | "ImageText" | "Image" | "Video" | "Link" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Unknown">;
     /**
      * @description 获取标签当前状态
      */
     getCurrentVisibleState(tag: TagInstance): boolean;
-    protected loadVideoFirstFrame(): void;
+    protected loadVideoFirstFrame: () => void;
     protected updateTagConfig(): void;
     protected can<T extends Tag>(action: 'show' | 'hide' | 'fold' | 'unfold', paramsTag: T): boolean;
     protected getRenderType(tag: TagInstance): 'Dom' | 'Mesh' | 'BehindDom';
@@ -49,7 +51,7 @@ export declare abstract class TagUtil extends TagCache {
     /**
      * @description: 获取距离
      */
-    protected getDistance(tag: TagInstance, panoIndex?: number): number;
+    protected getDistance(tag: TagInstance, fiveState?: Partial<FiveState>): number;
     protected getPositions(tag: TagInstance): [THREE.Vector3, THREE.Vector3, THREE.Vector3, THREE.Vector3] | [import("../typings").ArrayPosition, import("../typings").ArrayPosition, import("../typings").ArrayPosition, import("../typings").ArrayPosition];
     protected preventWhenMouseDown: () => false | void;
     protected addObjectClickHandler(tag: TagInstance, object: THREE.Object3D | undefined, handler: (event: Event) => any): () => void;
@@ -64,4 +66,8 @@ export declare abstract class TagUtil extends TagCache {
      * @returns isDisposed; 已经销毁返回 true，否则返回 false
      */
     protected checkDisposed(): boolean;
+    /**
+     * @description: 获取merge后的配置
+     */
+    private calculateTagConfig;
 }