@realsee/dnalogel 2.13.2 → 2.14.0-dev.0

package/libs/PanoTagPlugin/controller/TagRender.js

@@ -1,40 +1,40 @@
-var R = Object.defineProperty;
-var O = (p, m, e) => m in p ? R(p, m, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[m] = e;
-var l = (p, m, e) => (O(p, typeof m != "symbol" ? m + "" : m, e), e);
-var C = (p, m, e) => new Promise((t, i) => {
-  var o = (a) => {
+var j = Object.defineProperty;
+var w = (l, m, t) => m in l ? j(l, m, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[m] = t;
+var d = (l, m, t) => (w(l, typeof m != "symbol" ? m + "" : m, t), t);
+var T = (l, m, t) => new Promise((e, i) => {
+  var o = (r) => {
     try {
-      r(e.next(a));
-    } catch (n) {
-      i(n);
+      a(t.next(r));
+    } catch (s) {
+      i(s);
     }
-  }, s = (a) => {
+  }, n = (r) => {
     try {
-      r(e.throw(a));
-    } catch (n) {
-      i(n);
+      a(t.throw(r));
+    } catch (s) {
+      i(s);
     }
-  }, r = (a) => a.done ? t(a.value) : Promise.resolve(a.value).then(o, s);
-  r((e = e.apply(p, m)).next());
+  }, a = (r) => r.done ? e(r.value) : Promise.resolve(r.value).then(o, n);
+  a((t = t.apply(l, m)).next());
 });
-import { TagComputer as w } from "./TagComputer.js";
-import { Group as S, Quaternion as G, Vector3 as T, Matrix4 as b } from "three";
-import x from "../Components/TagContainer.js";
-import A from "../Components/Tag/index.js";
-import { arrayPositionToVector3 as D } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
-import { planeNormal as j } from "../utils/planeNormal.js";
-import { isMediaModelTag as f } from "../utils/tag/tagCheck.js";
-import { normalPositionToPositions as E } from "../utils/normalPositionToPositions.js";
-import { CSS3DRenderPlugin as V } from "../../CSS3DRenderPlugin/index.js";
-import { loadGLTF as k } from "../../shared-utils/three/GLTFLoader.js";
-import I from "../utils/model/imageModel.js";
+import { TagComputer as O } from "./TagComputer.js";
+import { Group as D, Quaternion as x, Vector3 as h, Matrix4 as u } from "three";
+import G from "../Components/TagContainer.js";
+import k from "../Components/Tag/index.js";
+import { arrayPositionToVector3 as P } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { centerPoint as A } from "../../shared-utils/three/centerPoint.js";
+import "@realsee/five/gltf-loader";
+import R from "../utils/model/imagePlane.js";
+import { isMediaModelTag as b } from "../utils/tag/tagCheck.js";
+import { CSS3DRenderPlugin as E } from "../../CSS3DRenderPlugin/index.js";
+import { loadGLTF as V } from "../../shared-utils/three/GLTFLoader.js";
+import "@realsee/five";
 import "../utils/tagPosition.js";
-import "../../shared-utils/three/centerPoint.js";
+import "../../shared-utils/three/loadTexture.js";
 import "../utils/checkRange.js";
 import "hammerjs";
-import "@realsee/five";
 import "@tweenjs/tween.js";
-import "../../CSS3DRenderPlugin/CSS3DRender.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
@@ -52,11 +52,14 @@ import "../../shared-utils/animationFrame/index.js";
 import "./TagUtil.js";
 import "object-assign-deep";
 import "../tag.config.js";
+import "../utils/planeNormal.js";
+import "../utils/normalPositionToPositions.js";
 import "./TagCache.js";
 import "../../base/BasePlugin.js";
 import "../../vendor/svelte/store/index.js";
 import "../../vendor/svelte/internal/index.js";
 import "../utils/device.js";
+import "../../shared-utils/threex/domevents/index.js";
 import "../Components/TagItem.js";
 import "../utils/noTypecheck.js";
 import "../Components/Common/TagPoint.js";
@@ -128,163 +131,172 @@ import "../Components/Tag/LinkTag.js";
 import "../Components/Tag/CustomTag.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
-import "@realsee/five/gltf-loader";
-import "../../shared-utils/three/loadTexture.js";
-class $e extends w {
-  constructor(e) {
-    super(e);
-    l(this, "group", new S());
-    l(this, "imagePlaneGroup", new S());
-    l(this, "gltfObjectGroup", new S());
-    l(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
-    l(this, "temporaryState", { visible: !0 });
-    l(this, "TagContainerSvelte");
-    l(this, "loadModel", (e) => C(this, null, function* () {
-      var a;
-      const t = e.data.modelUrl;
-      if (!t)
+class Ue extends O {
+  constructor(t) {
+    super(t);
+    d(this, "group", new D());
+    d(this, "imagePlaneGroup", new D());
+    d(this, "gltfObjectGroup", new D());
+    d(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    d(this, "temporaryState", { visible: !0 });
+    d(this, "TagContainerSvelte");
+    d(this, "loadModel", (t) => T(this, null, function* () {
+      var r;
+      const e = t.data.modelUrl;
+      if (!e)
         return;
-      const i = k(t).then((n) => Object.assign(n.scene, { customID: e.id, isTagModel: !0 }));
-      e.model = { promise: i };
+      const i = V(e).then((s) => Object.assign(s.scene, { customID: t.id, isTagModel: !0 }));
+      t.model = { promise: i };
       const o = yield i;
-      if (((a = e.model) == null ? void 0 : a.promise) !== i || (e.model.object = o, !this.tags.includes(e)))
+      if (((r = t.model) == null ? void 0 : r.promise) !== i || (t.model.object = o, !this.tags.includes(t)))
         return;
-      o.visible = e.state.visible, new b().fromArray(e.matrix).decompose(o.position, o.quaternion, o.scale), o.updateWorldMatrix(!0, !0), this.getVisibleByFloorIndex(e) || (o.visible = !1);
-      const r = this.gltfObjectGroup.children.find((n) => n.customID === e.id);
-      return r && this.gltfObjectGroup.remove(r), this.gltfObjectGroup.add(o), this.updateTagCss3DObjectMatrix(e, o), o;
+      o.visible = this.getCurrentVisibleState(t), new u().fromArray(t.matrix).decompose(o.position, o.quaternion, o.scale), o.updateWorldMatrix(!0, !0), o.visible = this.getVisibleByFloorIndex(t);
+      const a = this.gltfObjectGroup.children.find((s) => s.customID === t.id);
+      if (a && this.gltfObjectGroup.remove(a), this.can("renderByMesh", t)) {
+        if (!t.imagePlane) {
+          const s = t.data.mediaPosition.map(P);
+          t.imagePlane = new R(t.data.mediaData[0].url, t.data.mediaPosition.map(P));
+          const p = new h().addVectors(s[0], s[2]).divideScalar(2);
+          t.imagePlane.position.copy(p), o.add(t.imagePlane);
+        }
+      } else
+        this.updateTagCss3DObjectMatrix(t, o);
+      return this.gltfObjectGroup.add(o), o;
     }));
     this.group.name = "PanoTagPluginModelGroup", this.gltfObjectGroup.name = "PanoTagPluginGLTFObjectGroup", this.imagePlaneGroup.name = "ImagePlaneGroup", this.group.add(this.gltfObjectGroup), this.group.add(this.imagePlaneGroup);
   }
   clearTags() {
-    this.tags.forEach((e) => {
-      var t, i;
-      (i = (t = e.imageModel) == null ? void 0 : t.parent) == null || i.remove(e.imageModel);
+    this.tags.forEach((t) => {
+      var e, i;
+      (i = (e = t.imagePlane) == null ? void 0 : e.parent) == null || i.remove(t.imagePlane);
     }), this.tags = [], this.enabledModelTagSet.clear(), this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
   }
   updateRenderAllTags() {
-    this.enabledModelTagSet.clear(), this.tags.forEach((e) => e.stickType === "Model" && this.enabledModelTagSet.add(e.id)), this.updateRenderPointTag(), this.updateRenderPlaneTag(), this.updateRenderModelTag(), this.updateRenderImageModel();
+    this.enabledModelTagSet.clear(), this.tags.forEach((t) => t.stickType === "Model" && this.enabledModelTagSet.add(t.id)), this.updateRenderPointTag(), this.updateRender3DDomTag(), this.updateRenderModelTag(), this.updateRenderImagePlane();
   }
-  updateRenderImageModel() {
-    this.sort([...this.filterImageModel]).forEach((t) => {
-      var o, s, r, a;
-      const i = (o = t.data.mediaData[0]) == null ? void 0 : o.url;
-      !i || (t.imageModel && (t.imageModel.visible = (r = (s = t.state) == null ? void 0 : s.visible) != null ? r : !0), ((a = t.imageModel) == null ? void 0 : a.imageSrc) !== i && (t.imageModel = new I(i, t.position.map(D)), t.imageModel.name = "PanoTagPluginImageModel", this.imagePlaneGroup.add(t.imageModel)));
+  updateRenderImagePlane() {
+    this.sort(this.filterImagePlane).forEach((e) => {
+      var n, a, r, s;
+      const i = (n = e.data.mediaData[0]) == null ? void 0 : n.url;
+      if (!i || (e.imagePlane && (e.imagePlane.visible = (r = (a = e.state) == null ? void 0 : a.visible) != null ? r : !0), ((s = e.imagePlane) == null ? void 0 : s.imageSrc) === i))
+        return;
+      const o = e.position.map(P);
+      e.imagePlane = new R(i, o), e.imagePlane.setMatrixByCornerPoints(o), this.imagePlaneGroup.add(e.imagePlane);
     });
   }
-  updateRenderPlaneTag() {
-    this.sort([...this.filter3DTag]).forEach((t) => {
-      var a, n, u;
-      if (f(t) && ((a = t.model) == null ? void 0 : a.object) && this.updateTagCss3DObjectMatrix(t, (n = t.model) == null ? void 0 : n.object), t.tag3DContentSvelte) {
-        const { svelteApp: d, domContainer: M, initialNormal: h, currentNormal: c } = t.tag3DContentSvelte;
-        if (this.updateTagCss3DObjectVisible(t), d.$set({ tag: t, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !h.equals(c)) {
-          const g = new G().setFromUnitVectors(h, c);
-          M.css3DObject.setRotationFromQuaternion(g);
+  updateRender3DDomTag() {
+    this.sort([...this.filter3DTag]).forEach((e) => {
+      var i;
+      if (e.tag3DContentSvelte) {
+        const { svelteApp: o, domContainer: n, initialNormal: a, currentNormal: r } = e.tag3DContentSvelte;
+        if (o.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !a.equals(r)) {
+          const s = new x().setFromUnitVectors(a, r);
+          n.css3DObject.setRotationFromQuaternion(s);
         }
         return;
-      }
-      if (((u = t.state) == null ? void 0 : u.visible) === !1)
-        return;
-      if (this.css3DRenderPlugin || (this.css3DRenderPlugin = V(this.five)), t.stickType === "3DPoint" && !t.normal)
-        return console.error("updateRenderPlaneTag: \u4E09\u7EF4\u70B9\u6807\u7B7E\u7F3A\u5C11\u6CD5\u5411\u91CF\uFF01");
-      const i = (() => {
-        if (t.stickType === "Plane")
-          return t.position;
-        if (f(t))
-          return t.data.mediaPosition;
-        const d = t;
-        return E(
-          this.five.camera.position,
-          D(d.position),
-          D(d.normal)
-        );
-      })();
-      if (!i)
-        return;
-      const o = function() {
-        if (t.normal)
-          return D(t.normal);
-        if (t.stickType === "Plane")
-          return j(t.position);
-        if (t.contentType === "MediaModel")
-          return j(i);
-      }();
-      if (!o)
-        return;
-      const s = this.getTagConfig(t).tag3DConfig, r = this.css3DRenderPlugin.create3DDomContainer(i, s);
-      !r || (this.updateTagCss3DObjectVisible(t), this.store.css3DRenderDisposer.set(t.id, r.dispose), t.tag3DContentSvelte = {
-        svelteApp: new A({
-          target: r.container,
-          props: {
-            tag: t,
-            hooks: this.hooks,
-            state: this.state,
-            mediaStore: this.mediaStore,
-            temporaryState: this.temporaryState
+      } else {
+        if (((i = e.state) == null ? void 0 : i.visible) === !1)
+          return;
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = E(this.five)), e.stickType === "3DPoint" && !e.normal)
+          return console.error("updateRenderPlaneTag: \u4E09\u7EF4\u70B9\u6807\u7B7E\u7F3A\u5C11\u6CD5\u5411\u91CF\uFF01");
+        const o = this.getPositions(e);
+        if (!o)
+          return;
+        const n = this.getTagNormal(e);
+        if (!n)
+          return;
+        const a = this.getTagConfig(e), r = a.tag3DConfig;
+        if (a.renderType === "Mesh" && r) {
+          r.mode = "behind", r.container = document.createElement("div");
+          const p = "black";
+          r.container.style.backgroundColor = p, r.container.style.border = `3px solid ${p}`;
+        }
+        const s = this.css3DRenderPlugin.create3DDomContainer(o, r);
+        if (!s)
+          return;
+        this.store.css3DRenderDisposer.set(e.id, [s.dispose]), this.css3DRenderPlugin.hooks.on("render", () => {
+          var p;
+          if (s.css3DObject.opacityMesh) {
+            const g = this.addObjectClickHandler(e, s.css3DObject.opacityMesh, (f) => {
+              this.hooks.emit("click", { event: f, target: "TagContent", tag: e });
+            });
+            (p = this.store.css3DRenderDisposer.get(e.id)) == null || p.push(g);
           }
-        }),
-        domContainer: r,
-        initialNormal: o,
-        currentNormal: o
-      });
+        }), e.tag3DContentSvelte = {
+          svelteApp: new k({
+            target: s.container,
+            props: {
+              tag: e,
+              hooks: this.hooks,
+              state: this.state,
+              mediaStore: this.mediaStore,
+              temporaryState: this.temporaryState
+            }
+          }),
+          domContainer: s,
+          initialNormal: n,
+          currentNormal: n
+        };
+      }
     }), this.clearUnusedPanelTag();
   }
   updateRenderModelTag() {
-    const e = (i) => !this.enabledModelTagSet.has(i.customID);
-    this.gltfObjectGroup.remove(...this.gltfObjectGroup.children.filter(e)), this.tags.filter(f).forEach((i) => {
+    const t = (i) => !this.enabledModelTagSet.has(i.customID);
+    this.gltfObjectGroup.remove(...this.gltfObjectGroup.children.filter(t)), this.tags.filter(b).forEach((i) => {
       var o;
-      (o = i.model) == null || o.promise.then((s) => {
-        s.visible = i.state.visible;
+      (o = i.model) == null || o.promise.then((n) => {
+        n.visible = this.getCurrentVisibleState(i);
       });
     });
   }
   updateTagModelVisible() {
-    this.tags.forEach((e) => {
-      var t, i, o;
-      e.imageModel && (e.imageModel.visible = (o = ((t = e.state) == null ? void 0 : t.visible) && ((i = this.state) == null ? void 0 : i.visible)) != null ? o : !0);
+    this.tags.forEach((t) => {
+      var e;
+      t.imagePlane && (t.imagePlane.visible = this.getCurrentVisibleState(t)), (e = t.model) != null && e.object && (t.model.object.visible = this.getCurrentVisibleState(t));
     });
   }
-  updateTagCss3DObjectMatrix(e, t) {
-    var g, v, P, y;
-    const i = (P = (v = (g = e.mergedConfig) == null ? void 0 : g.tag3DConfig) == null ? void 0 : v.ratio) != null ? P : 216e-5, o = (y = e.tag3DContentSvelte) == null ? void 0 : y.domContainer.css3DObject;
+  updateTagCss3DObjectMatrix(t, e) {
+    var S, v, M, y;
+    const i = (M = (v = (S = t.mergedConfig) == null ? void 0 : S.tag3DConfig) == null ? void 0 : v.ratio) != null ? M : 216e-5, o = (y = t.tag3DContentSvelte) == null ? void 0 : y.domContainer.css3DObject;
     if (!o)
       return;
-    const s = f(e) ? e.data.mediaPosition : e.position;
-    t.updateWorldMatrix(!1, !1);
-    const r = t.matrixWorld, a = new T().fromArray(s[0]), n = new T().fromArray(s[2]), u = new T().lerpVectors(a, n, 0.5).add(new T(0, 0, 5e-4)), d = new b().setPosition(u), M = new b().makeScale(i, i, i), h = new b().multiply(r).multiply(d).multiply(M);
-    h.decompose(o.position, o.quaternion, o.scale);
+    const n = b(t) ? t.data.mediaPosition : t.position;
+    e.updateWorldMatrix(!1, !1);
+    const a = e.matrixWorld, r = new h().fromArray(n[0]), s = new h().fromArray(n[2]), p = A(r, s).add(new h(0, 0, 5e-4)), g = new u().setPosition(p), f = new u().makeScale(i, i, i), C = new u().multiply(a).multiply(g).multiply(f);
+    C.decompose(o.position, o.quaternion, o.scale);
     const c = o.opacityMesh;
-    !c || h.decompose(c.position, c.quaternion, c.scale);
+    c && C.decompose(c.position, c.quaternion, c.scale);
   }
-  addMediaModelTag(e) {
-    return C(this, null, function* () {
-      const t = e.filter(f).map(this.loadModel);
-      yield Promise.all(t), this.setModelMedialVisible(), this.updateRenderAllTags();
+  addMediaModelTag(t) {
+    return T(this, null, function* () {
+      const e = t.filter(b).map((i) => this.loadModel(i));
+      yield Promise.all(e), this.setModelMedialVisible(), this.updateRenderAllTags();
     });
   }
   updateRenderPointTag() {
-    var t;
-    const e = this.sort(this.filterPointTag);
+    var e;
+    const t = this.sort(this.filterPointTag);
     if (this.setPointTagPosition(), this.TagContainerSvelte)
-      this.TagContainerSvelte.$set({ tags: e, state: this.state, temporaryState: this.temporaryState });
+      this.TagContainerSvelte.$set({ tags: t, state: this.state, temporaryState: this.temporaryState });
     else {
-      const i = (t = this.five.getElement()) == null ? void 0 : t.parentElement;
+      const i = (e = this.five.getElement()) == null ? void 0 : e.parentElement;
       if (!i)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new x({
+      this.TagContainerSvelte = new G({
         target: i,
-        props: { hooks: this.hooks, tags: e, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore }
+        props: { hooks: this.hooks, tags: t, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore }
       });
     }
   }
   updateTagContainerVisible() {
-    var e;
-    (e = this.TagContainerSvelte) == null || e.$set({
+    var t;
+    (t = this.TagContainerSvelte) == null || t.$set({
       state: this.state,
       temporaryState: this.temporaryState,
       withAnimation: this.store.visibleWithAnimation
-    }), this.filter3DTag.forEach((t) => {
-      var i, o, s, r;
-      (s = (o = (i = t.tag3DContentSvelte) == null ? void 0 : i.domContainer) == null ? void 0 : o.css3DObject) == null || s.setVisible(this.state.visible), (r = t.tag3DContentSvelte) == null || r.svelteApp.$set({
+    }), this.filter3DTag.forEach((e) => {
+      var i, o, n, a, r;
+      (a = (o = (i = e.tag3DContentSvelte) == null ? void 0 : i.domContainer) == null ? void 0 : o.css3DObject) == null || a.setVisible((this.state.visible && ((n = e.state) == null ? void 0 : n.visible)) !== !1), (r = e.tag3DContentSvelte) == null || r.svelteApp.$set({
         state: this.state,
         temporaryState: this.temporaryState,
         withAnimation: this.store.visibleWithAnimation
@@ -292,25 +304,21 @@ class $e extends w {
     });
   }
   disposeAllCSS3DContainer() {
-    for (const [e, t] of this.store.css3DRenderDisposer)
-      t == null || t();
+    for (const [t, e] of this.store.css3DRenderDisposer)
+      e == null || e.forEach((i) => i == null ? void 0 : i());
     this.store.css3DRenderDisposer = /* @__PURE__ */ new Map();
   }
   clearUnusedPanelTag() {
-    this.filter2DPointTag.forEach((e) => {
-      var t;
-      (t = e.tag3DContentSvelte) == null || t.domContainer.dispose(), e.tag3DContentSvelte = void 0;
+    this.filter2DPointTag.forEach((t) => {
+      var e;
+      (e = t.tag3DContentSvelte) == null || e.domContainer.dispose(), t.tag3DContentSvelte = void 0;
     });
-    for (const [e, t] of this.store.css3DRenderDisposer) {
-      const i = this.getTagById(e);
-      (!i || i.stickType === "2DPoint") && (t == null || t(), this.store.css3DRenderDisposer.delete(e));
+    for (const [t, e] of this.store.css3DRenderDisposer) {
+      const i = this.getTagById(t);
+      (!i || i.stickType === "2DPoint") && (e == null || e.forEach((o) => o == null ? void 0 : o()), this.store.css3DRenderDisposer.delete(t));
     }
   }
-  updateTagCss3DObjectVisible(e) {
-    var t, i, o, s, r;
-    (r = (i = (t = e.tag3DContentSvelte) == null ? void 0 : t.domContainer) == null ? void 0 : i.css3DObject) == null || r.setVisible((s = this.state.visible && ((o = e.state) == null ? void 0 : o.visible)) != null ? s : !0), this.five.needsRender = !0;
-  }
 }
 export {
-  $e as TagRender
+  Ue as TagRender
 };

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

@@ -1,11 +1,12 @@
 import type { TagElement, TagContentType, StickType, TagId, TagConfig, PlaneTag, MediaStore } from '../typings';
+import * as THREE from 'three';
 import type { Tag, Tags, Point2DElement, Point3DElement, PlaneTagElement, PointTagElement, Point3DTag, ModelElement } from '../typings';
 import { TagCache } from './TagCache';
 import { CSS3DRenderPluginExportType } from '../../CSS3DRenderPlugin';
 import { Five } from '@realsee/five';
 export declare abstract class TagUtil extends TagCache {
-    config: Pick<Tags, 'globalConfig' | 'contentTypeConfig'>;
     tags: TagElement[];
+    config: Pick<Tags, 'globalConfig' | 'contentTypeConfig'>;
     protected mediaStore: MediaStore;
     /** css3DRenderPlugin */
     protected css3DRenderPlugin?: CSS3DRenderPluginExportType;
@@ -13,13 +14,15 @@ export declare abstract class TagUtil extends TagCache {
         /** 清理函数数组 */
         disposers: (() => any)[];
         visibleWithAnimation?: boolean;
-        css3DRenderDisposer: Map<TagId, () => void>;
+        css3DRenderDisposer: Map<TagId, (() => any)[]>;
         eventListenerDisposer?: () => void;
         resizeObserverDisposer?: () => void;
         resizeObserverDisposerAdding: boolean;
         disposed: boolean;
     };
     protected get isPanorama(): boolean;
+    private domEvents?;
+    private mouseInfo?;
     protected constructor(five: Five);
     getTagById<C extends TagContentType = any, S extends StickType = any>(id: TagId): TagElement<C, S> | undefined;
     /** 暂停当前标签内进行的所有多媒体 */
@@ -33,7 +36,7 @@ export declare abstract class TagUtil extends TagCache {
     protected updateTagConfig(params?: {
         force?: boolean;
     }): void;
-    protected can<T extends TagElement<any, any>>(action: 'show' | 'hide' | 'fold' | 'unfold' | 'renderByMesh', paramsTag: T): boolean;
+    protected can<T extends TagElement<any, any>>(action: 'show' | 'hide' | 'fold' | 'unfold' | 'renderByMesh' | 'renderByMeshDom', paramsTag: T): boolean;
     /**
      * @description: 获取角度
      */
@@ -42,10 +45,15 @@ export declare abstract class TagUtil extends TagCache {
      * @description: 获取距离
      */
     protected getDistance(tag: Tag<any, any>, panoIndex?: number): number;
+    protected getPositions(tag: TagElement<any, any>): any;
+    protected fiveWantMovePanoHandler: (panoIndex: number) => false | void;
+    protected addObjectClickHandler(tag: TagElement, object: THREE.Object3D | undefined, handler: (event: Event) => any): () => void;
+    protected getTagNormal(tag: TagElement<any, 'Plane'> | TagElement<any, 'Model'> | TagElement<any, '3DPoint'>): THREE.Vector3;
     protected get filterPointTag(): PointTagElement<"Image" | "Link" | "Audio" | "Text" | "ImageText" | "Video" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Custom" | "Unknown">[];
     protected get filter2DPointTag(): Point2DElement<"Image" | "Link" | "Audio" | "Text" | "ImageText" | "Video" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Custom" | "Unknown">[];
     protected get filter3DPointTag(): Point3DElement<"Image" | "Link" | "Audio" | "Text" | "ImageText" | "Video" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Custom" | "Unknown">[];
-    protected get filterImageModel(): PlaneTagElement<"MediaPlane">[];
+    protected get filterImagePlane(): PlaneTagElement<"MediaPlane">[];
+    protected get filterMediaModel(): ModelElement<"MediaModel">[];
     protected get filterModelTag(): ModelElement<"Image" | "Link" | "Audio" | "Text" | "ImageText" | "Video" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Custom" | "Unknown">[];
     protected get filter3DTag(): (TagElement<any, "Plane"> | TagElement<any, "Model"> | TagElement<any, "3DPoint">)[];
     /**