@realsee/dnalogel 2.12.0-alpha.2 → 2.12.0

package/libs/PanoTagPlugin/controller/index.js

@@ -1,95 +1,77 @@
-var S = Object.defineProperty, P = Object.defineProperties;
-var w = Object.getOwnPropertyDescriptors;
-var T = Object.getOwnPropertySymbols;
-var U = Object.prototype.hasOwnProperty, F = Object.prototype.propertyIsEnumerable;
-var m = (d, a, e) => a in d ? S(d, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[a] = e, h = (d, a) => {
+var I = Object.defineProperty, L = Object.defineProperties;
+var V = Object.getOwnPropertyDescriptors;
+var F = Object.getOwnPropertySymbols;
+var B = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var P = (h, a, e) => a in h ? I(h, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[a] = e, p = (h, a) => {
   for (var e in a || (a = {}))
-    U.call(a, e) && m(d, e, a[e]);
-  if (T)
-    for (var e of T(a))
-      F.call(a, e) && m(d, e, a[e]);
-  return d;
-}, g = (d, a) => P(d, w(a));
-var p = (d, a, e) => (m(d, typeof a != "symbol" ? a + "" : a, e), e);
-var f = (d, a, e) => new Promise((t, i) => {
+    B.call(a, e) && P(h, e, a[e]);
+  if (F)
+    for (var e of F(a))
+      x.call(a, e) && P(h, e, a[e]);
+  return h;
+}, T = (h, a) => L(h, V(a));
+var l = (h, a, e) => (P(h, typeof a != "symbol" ? a + "" : a, e), e);
+var c = (h, a, e) => new Promise((t, i) => {
   var s = (n) => {
     try {
       r(e.next(n));
-    } catch (l) {
-      i(l);
+    } catch (d) {
+      i(d);
     }
   }, o = (n) => {
     try {
       r(e.throw(n));
-    } catch (l) {
-      i(l);
+    } catch (d) {
+      i(d);
     }
   }, r = (n) => n.done ? t(n.value) : Promise.resolve(n.value).then(s, o);
-  r((e = e.apply(d, a)).next());
+  r((e = e.apply(h, a)).next());
 });
-import { Subscribe as E } from "@realsee/five";
-import c from "object-assign-deep";
-import { arrayPositionToVector3 as A } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
-import { addDebugPoints as M } from "../utils/addDebugPoints.js";
-import "three";
-import { isMediaModelTag as u } from "../utils/tag/tagCheck.js";
-import { waitFiveModelLoaded as I } from "../utils/actionAfterFiveModelLoad.js";
-import { debounce as C } from "../utils/debounce.js";
-import { throttle as R } from "../utils/throttle.js";
-import { resizeObserver as y } from "../utils/resizeObserver.js";
-import B from "../utils/tag/format.js";
-import { generateBlankAudio as O, AudioNamespace as _ } from "../../shared-utils/audio.js";
-import { TagRender as L } from "./TagRender.js";
-import "./TagComputer.js";
-import "../utils/tagPosition.js";
-import "../../shared-utils/three/centerPoint.js";
-import "../utils/checkRange.js";
-import "hammerjs";
-import "@tweenjs/tween.js";
-import "../../CSS3DRenderPlugin/CSS3DRender.js";
-import "../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
-import "three/examples/jsm/renderers/CSS3DRenderer";
-import "../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../../CSS3DRenderPlugin/utils/createResizeObserver.js";
-import "../../CSS3DRenderPlugin/utils/even.js";
-import "../../shared-utils/Subscribe.js";
-import "../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
-import "../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
-import "../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "../../shared-utils/isNil.js";
-import "../../shared-utils/animationFrame/BetterTween.js";
-import "../../shared-utils/animationFrame/index.js";
-import "./TagUtil.js";
-import "../tag.config.js";
-import "../utils/planeNormal.js";
-import "./TagCache.js";
-import "../../base/BasePlugin.js";
-import "../../vendor/svelte/store/index.js";
+import { Subscribe as G } from "@realsee/five";
+import { Group as E, Vector3 as A, Matrix4 as S, Quaternion as N } from "three";
+import v from "object-assign-deep";
+import { writable as W } from "../../vendor/svelte/store/index.js";
+import z from "../Components/TagContainer.js";
+import _ from "../Components/Tag/index.js";
+import { arrayPositionToVector3 as C } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { addDebugPoints as $ } from "../utils/addDebugPoints.js";
+import { planeNormal as k } from "../utils/planeNormal.js";
+import { isMediaModelTag as m } from "../utils/tag/tagCheck.js";
+import { waitFiveModelLoaded as q } from "../utils/actionAfterFiveModelLoad.js";
+import { normalPositionToPositions as H } from "../utils/normalPositionToPositions.js";
+import { debounce as j } from "../utils/debounce.js";
+import { throttle as J } from "../utils/throttle.js";
+import { resizeObserver as U } from "../utils/resizeObserver.js";
+import { TagComputer as Q } from "./TagComputer.js";
+import { CSS3DRenderPlugin as X } from "../../CSS3DRenderPlugin/index.js";
+import K from "../utils/tag/format.js";
+import { generateBlankAudio as Y, AudioNamespace as Z } from "../../shared-utils/audio.js";
+import { loadGLTF as ee } from "../../shared-utils/three/GLTFLoader.js";
 import "../../vendor/svelte/internal/index.js";
-import "../utils/device.js";
-import "../Components/TagContainer.js";
 import "../Components/TagItem.js";
-import "../Components/Tag/index.js";
+import "../utils/noTypecheck.js";
+import "../Components/Common/TagPoint.js";
+import "../Components/Common/Shadow.js";
+import "../../vendor/svelte/transition/index.js";
+import "../../vendor/svelte/easing/index.js";
+import "../Components/Common/Icon/Icon.js";
+import "../utils/getImageInfo.js";
+import "../utils/px2rem.js";
+import "../Assets/Icon.js";
 import "../Components/Tag/TextTag/index.js";
 import "../Components/Tag/TextTag/TextTag.js";
 import "../Components/Common/Line/Straight.js";
-import "../../vendor/svelte/transition/index.js";
-import "../../vendor/svelte/easing/index.js";
 import "../../shared-utils/uuid.js";
-import "../Components/Common/Shadow.js";
 import "../Components/Common/Text/FlyMText.js";
 import "../Components/Common/Text/FlyText.js";
 import "animejs";
+import "../../shared-utils/isNil.js";
 import "../utils/search.js";
 import "../utils/constants.js";
 import "../Components/Common/Arrow.js";
-import "../Assets/Icon.js";
 import "../utils/doUtil.js";
 import "../Components/Tag/TextTag/TextPlaneTag.js";
 import "../Components/Common/Text/MText.js";
-import "../utils/px2rem.js";
 import "../Components/Tag/ImageTextTag.js";
 import "../Components/Common/Line/Polyline.js";
 import "../Components/Common/Media.js";
@@ -124,7 +106,23 @@ import "../../vendor/svelte-carousel/src/utils/ProgressManager.js";
 import "../../vendor/svelte-carousel/src/utils/interval.js";
 import "../Components/Common/MediaItem.js";
 import "../Components/Tag/MarketingTag.js";
-import "../utils/noTypecheck.js";
+import "hammerjs";
+import "@tweenjs/tween.js";
+import "../../CSS3DRenderPlugin/CSS3DRender.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../../CSS3DRenderPlugin/utils/even.js";
+import "../../shared-utils/Subscribe.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../../CSS3DRenderPlugin/utils/centerPoint.js";
+import "../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import "../../shared-utils/animationFrame/BetterTween.js";
+import "../../shared-utils/animationFrame/index.js";
 import "../Components/Tag/AudioTag/index.js";
 import "../Components/Tag/AudioTag/AudioTag.js";
 import "../Components/Common/Audio.js";
@@ -133,56 +131,82 @@ import "../Components/Common/Icon/audioIcon.js";
 import "../Components/Tag/AudioTag/AudioPlaneTag.js";
 import "../Components/Tag/MediaPlane.js";
 import "../Components/Tag/LinkTag.js";
-import "../Components/Common/Icon/Icon.js";
-import "../utils/getImageInfo.js";
 import "../Components/Tag/CustomTag.js";
-import "../Components/Common/TagPoint.js";
-import "../utils/normalPositionToPositions.js";
-import "../../CSS3DRenderPlugin/index.js";
+import "../tag.config.js";
+import "../utils/tagPosition.js";
+import "../utils/checkRange.js";
+import "./TagCacheController.js";
+import "../../base/BasePlugin.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
-import "../../shared-utils/three/GLTFLoader.js";
 import "@realsee/five/gltf-loader";
-import "../utils/model/imageModel.js";
-import "../../shared-utils/three/loadTexture.js";
-const D = "Dnalogel-PanoTagPlugin", qt = (d) => `${D}--${d}`;
-class Kt extends L {
+const M = "DnalogelPlugin-PanoTagPlugin", te = !1, di = (h) => `${M}--${h}`;
+class li extends Q {
   constructor(e, t) {
     super(e);
-    p(this, "state", { enabled: !0, visible: !0 });
-    p(this, "params");
-    p(this, "debug");
-    p(this, "changeTagModel", (e, t) => f(this, null, function* () {
-      e.data = c({}, e.data, t), yield this.loadModel(e), this.updateRenderAllTags();
+    l(this, "state", { enabled: !0, visible: !0 });
+    l(this, "params");
+    l(this, "debug");
+    l(this, "css3DRenderPlugin");
+    l(this, "TagContainerSvelte");
+    l(this, "temporaryState", { visible: !0 });
+    l(this, "mediaStore", W({
+      currentMediaElement: null
     }));
-    p(this, "handleFiveInitAnimationEnded", () => {
+    l(this, "group", new E());
+    l(this, "gltfObjectGroup", new E());
+    l(this, "isIOSWX", navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 && navigator.userAgent.toLowerCase().indexOf("iphone") !== -1);
+    l(this, "store", {
+      disposers: [],
+      disposed: !1,
+      resizeObserverDisposerAdding: !1,
+      css3DRenderDisposer: /* @__PURE__ */ new Map()
+    });
+    l(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    l(this, "changeTagModel", (e, t) => c(this, null, function* () {
+      e.data = v({}, e.data, t), yield this.loadModel(e), this.updateRenderAllTags();
+    }));
+    l(this, "disposedErrorLog", () => {
+      console.error(`${M} is disposed`);
+    });
+    l(this, "handleFiveInitAnimationEnded", () => {
       const e = this.five.getCurrentState().mode;
       this.tags.forEach((t) => {
-        u(t) && e === "Panorama" && this.changeTagMode(t, "front"), t.state.visible = this.getVisible(t);
+        m(t) && e === "Panorama" && this.changeTagMode(t, "front"), t.state.visible = this.getVisible(t);
       }), this.updateRenderAllTags(), this.updateRenderAllTags();
     });
-    p(this, "handleFiveModelShownFloorChange", () => {
+    l(this, "handleFiveModelShownFloorChange", () => {
       this.tags.forEach((e) => {
-        !u(e) || (e.state.visible = this.getVisible(e));
+        !m(e) || (e.state.visible = this.getVisible(e));
       }), this.updateRenderAllTags();
     });
-    this.params = h({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, O(1, { namespace: _.PlayAudio });
-    try {
-      Array.isArray(window.__PANOTAGPLUGIN_DEBUG_LIST__) || (window.__PANOTAGPLUGIN_DEBUG_LIST__ = []), window.__PANOTAGPLUGIN_DEBUG_LIST__.push(this), window.__PANOTAGPLUGIN_DEBUG__ = this;
-    } catch (i) {
-    }
+    l(this, "loadModel", (e) => c(this, null, function* () {
+      var n;
+      const t = e.data.modelUrl;
+      if (!t)
+        return;
+      const i = ee(t).then((d) => Object.assign(d.scene, { customID: e.id, isTagModel: !0 }));
+      e.model = { promise: i };
+      const s = yield i;
+      if (((n = e.model) == null ? void 0 : n.promise) !== i || (e.model.object = s, !this.tags.includes(e)))
+        return;
+      s.visible = e.state.visible, new S().fromArray(e.matrix).decompose(s.position, s.quaternion, s.scale), s.updateWorldMatrix(!0, !0), this.getVisibleByFloorIndex(e) || (s.visible = !1);
+      const r = this.gltfObjectGroup.children.find((d) => d.customID === e.id);
+      return r && this.gltfObjectGroup.remove(r), this.gltfObjectGroup.add(s), this.updateTagCss3DObjectMatrix(e, s), s;
+    }));
+    this.group.name = "PanoTagPluginModelGroup", this.gltfObjectGroup.name = "PanoTagPluginGLTFObjectGroup", this.group.add(this.gltfObjectGroup), this.params = p({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, Y(1, { namespace: Z.PlayAudio }), Object.assign(window, { [`__PANOTAGPLUGIN_DEBUG_${Date.now()}__`]: this }), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this }), this.state.enabled && this.five.scene.add(this.group);
   }
   load(e, t) {
-    return f(this, null, function* () {
+    return c(this, null, function* () {
       var s, o;
-      this.clearTags(), console.info(D, " load:", { data: JSON.parse(JSON.stringify(e)) }), this.config = c({}, this.config, {
+      this.clearTags(), console.info(M, " load:", { data: JSON.parse(JSON.stringify(e)) }), this.config = v({}, this.config, {
         globalConfig: (s = e.globalConfig) != null ? s : {},
         contentTypeConfig: (o = e.contentTypeConfig) != null ? o : {}
       });
       const i = yield this.addTag(e.tagList, t);
       if (this.debug)
         try {
-          M(this.five, this.tags);
+          $(this.five, this.tags);
         } catch (r) {
           console.error(r);
         }
@@ -190,107 +214,97 @@ class Kt extends L {
     });
   }
   addTag(e, t) {
-    return f(this, null, function* () {
+    return c(this, null, function* () {
       const s = (Array.isArray(e) ? e : [e]).map((o) => {
         const r = this.getTagConfig(o);
-        return g(h({}, o), {
-          state: h({ visible: void 0, unfolded: this.can("fold", o) ? !1 : void 0 }, r.initialState),
-          hooks: new E(),
-          mergedConfig: r,
-          unfold: () => this.changeUnfoldedById(o.id, !0),
-          fold: () => this.changeUnfoldedById(o.id, !1),
-          enable: () => this.changeEnabledById(o.id, !0),
-          disable: () => this.changeEnabledById(o.id, !1),
-          destroy: () => this.destroyTagById(o.id)
+        return T(p({}, o), {
+          state: p({ visible: void 0, unfolded: te }, r.initialState),
+          hooks: new G(),
+          clickable: r.clickable,
+          mergedConfig: r
         });
       }).filter((o) => o.position);
-      return s.forEach(B), this.tags.push(...s), I(this.five).then(() => f(this, null, function* () {
+      return s.forEach(K), this.tags.push(...s), q(this.five).then(() => {
         var o, r, n;
-        this.store.eventListenerDisposer && ((r = (o = this.store).eventListenerDisposer) == null || r.call(o)), this.state.enabled && (this.store.eventListenerDisposer = this.addEventListener()), this.addResizeListener(), this.clearUnusedPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (n = t == null ? void 0 : t.withAnimation) != null ? n : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags(), yield this.addMediaModelTag(s);
-      }));
+        return this.store.eventListenerDisposer && ((r = (o = this.store).eventListenerDisposer) == null || r.call(o)), this.state.enabled && (this.store.eventListenerDisposer = this.addEventListener()), this.addResizeListener(), this.checkPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (n = t == null ? void 0 : t.withAnimation) != null ? n : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags(), this.addMediaModelTag(s);
+      });
     });
   }
   changeConfig(e, t = !0) {
-    t ? this.config = c({}, this.config, e) : this.config = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
+    t ? this.config = v({}, this.config, e) : this.config = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
   }
   changeGlobalConfig(e, t = !0) {
-    t ? this.config.globalConfig = c({}, this.config.globalConfig, e) : this.config.globalConfig = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
+    t ? this.config.globalConfig = v({}, this.config.globalConfig, e) : this.config.globalConfig = e, this.updateTagConfig({ force: !0 }), this.updateRenderAllTags();
   }
-  changeContentTypeConfig(e, t, i = !0) {
-    this.config.contentTypeConfig || (this.config.contentTypeConfig = {}), i ? this.config.contentTypeConfig[e] = c({}, this.config.contentTypeConfig[e], t) : this.config.contentTypeConfig[e] = t, this.clearCache(), this.updateRenderAllTags();
+  clearTags() {
+    this.tags = [], this.enabledModelTagSet.clear(), this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
   }
   show(e) {
-    return f(this, null, function* () {
-      if (this.checkDisposed())
-        return;
+    return c(this, null, function* () {
       const { userAction: t = !0, withAnimation: i = !1 } = e != null ? e : {};
+      if (this.store.disposed)
+        return this.disposedErrorLog();
       this.setState({ visible: !0 }, { userAction: t, visibleWithAnimation: i }), this.hooks.emit("show", { userAction: t, withAnimation: i });
     });
   }
   hide(e) {
-    return f(this, null, function* () {
-      if (this.checkDisposed())
-        return;
+    return c(this, null, function* () {
       const { userAction: t = !0, withAnimation: i = !1 } = e != null ? e : {};
+      if (this.store.disposed)
+        return this.disposedErrorLog();
       this.setState({ visible: !1 }, { userAction: t, visibleWithAnimation: i }), this.hooks.emit("hide", { userAction: t, withAnimation: i });
     });
   }
   enable(e) {
-    if (this.checkDisposed())
-      return;
     const { userAction: t = !0 } = e != null ? e : {};
-    this.setState({ enabled: !0 }, { userAction: t }), this.hooks.emit("enable", { userAction: t });
+    if (this.store.disposed)
+      return this.disposedErrorLog();
+    this.five.scene.children.includes(this.group) || this.five.scene.add(this.group), this.setState({ enabled: !0 }, { userAction: t }), this.hooks.emit("enable", { userAction: t }), this.five.needsRender = !0;
   }
   disable(e) {
-    if (this.checkDisposed())
-      return;
     const { userAction: t = !0 } = e != null ? e : {};
-    this.setState({ enabled: !1 }, { userAction: t }), this.hooks.emit("disable", { userAction: t });
-  }
-  setState(e, t) {
-    if (this.checkDisposed())
-      return;
-    const { userAction: i = !0, visibleWithAnimation: s = !1 } = t, o = h({}, this.state);
-    this.state = Object.assign(this.state, e), this.store.visibleWithAnimation = s, o.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), o.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: o, userAction: i });
+    if (this.store.disposed)
+      return this.disposedErrorLog();
+    this.setState({ enabled: !1 }, { userAction: t }), this.five.scene.remove(this.group), this.hooks.emit("disable", { userAction: t }), this.five.needsRender = !0;
   }
   dispose() {
     var e, t, i, s, o, r;
-    this.pauseCurrentMedia(), this.disposeAllCSS3DContainer(), (e = this.TagContainerSvelte) == null || e.$destroy(), this.filter3DTag.forEach((n) => {
-      var l;
-      return (l = n.tag3DContentSvelte) == null ? void 0 : l.svelteApp.$destroy();
-    }), this.tags = [], (t = this.store.disposers) == null || t.forEach((n) => n == null ? void 0 : n()), this.store.disposers = [], (s = (i = this.store).eventListenerDisposer) == null || s.call(i), this.store.eventListenerDisposer = void 0, (r = (o = this.store).resizeObserverDisposer) == null || r.call(o), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.five.scene.remove(this.group), this.group.remove(...this.group.children), this.gltfObjectGroup.remove(...this.gltfObjectGroup.children), this.clearCache(), this.five.needsRender = !0, this.store.disposed = !0, this.hooks.emit("dispose");
+    this.pauseCurrentMedia(), this.disposeAllCSS3DContainer(), (e = this.TagContainerSvelte) == null || e.$destroy(), this.filter3DTag().forEach((n) => {
+      var d;
+      return (d = n.tag3DContentSvelte) == null ? void 0 : d.svelteApp.$destroy();
+    }), this.tags = [], (t = this.store.disposers) == null || t.forEach((n) => n == null ? void 0 : n()), this.store.disposers = [], this.store.disposed = !0, (s = (i = this.store).eventListenerDisposer) == null || s.call(i), this.store.eventListenerDisposer = void 0, (r = (o = this.store).resizeObserverDisposer) == null || r.call(o), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.five.scene.remove(this.group), this.group.remove(...this.group.children), this.gltfObjectGroup.remove(...this.gltfObjectGroup.children), this.clearCache(), this.five.needsRender = !0, this.hooks.emit("dispose");
+  }
+  setState(e, t) {
+    if (this.store.disposed)
+      return this.disposedErrorLog();
+    const { userAction: i = !0, visibleWithAnimation: s = !1 } = t, o = p({}, this.state);
+    this.state = Object.assign(this.state, e), this.store.visibleWithAnimation = s, o.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), o.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: o, userAction: i });
   }
   changeUnfoldedById(e, t) {
-    var r;
+    var o;
     const i = this.getTagById(e);
     if (!i)
       return;
-    const s = this.can("fold", i), o = this.can("unfold", i);
-    if (s && o) {
-      i.state.unfolded = t;
-      const n = this.filterPointTag;
-      (r = this.TagContainerSvelte) == null || r.$set({ tags: n });
-    } else
-      console.warn(`tag ${e} cannot be ${t ? "unfolded" : "folded"}}`);
-  }
-  changeEnabledById(e, t) {
-    const i = this.getTagById(e);
-    !i || (i.enabled = t, this.updateRenderAllTags());
+    let s = !1;
+    if (t && this.can("unfold", i) && (i.state.unfolded = !0, s = !0), t && (this.can("unfold", i) ? (i.state.unfolded = !0, s = !0) : console.warn(`tag ${e} cannot be unfolded`)), t || (this.can("fold", i) ? (i.state.unfolded = !1, s = !0) : console.warn(`tag ${e} cannot be folded`)), s) {
+      const r = this.filterPointTag();
+      (o = this.TagContainerSvelte) == null || o.$set({ tags: r });
+    }
   }
   changeTagNormalById(e, t) {
     const i = this.getTagById(e);
-    !i || !i.tag3DContentSvelte || (i.tag3DContentSvelte.currentNormal = A(t), this.updateRenderPlaneTag());
+    !i || !i.tag3DContentSvelte || (i.tag3DContentSvelte.currentNormal = C(t), this.updateRenderPlaneTag());
   }
   changeDataById(e, t, i = !0) {
     const s = this.getTagById(e);
-    !s || (i ? s.data = c({}, s.data, t) : s.data = h(h({}, s.data), t), this.clearUnusedPanelTag(), this.updateRenderAllTags());
+    !s || (i ? s.data = v({}, s.data, t) : s.data = p(p({}, s.data), t), this.checkPanelTag(), this.updateRenderAllTags());
   }
   changeStickTypeById(e, t, i = !0) {
     this.changeTagById(e, t, i);
   }
   changeTagById(e, t, i = !0) {
     const s = this.getTagById(e);
-    !t || (i ? c(s, t) : Object.assign(s, t), (s == null ? void 0 : s.tag3DContentSvelte) && (t == null ? void 0 : t.normal) && (s.tag3DContentSvelte.currentNormal = A(t.normal)), this.updateRenderAllTags(), this.clearUnusedPanelTag());
+    !t || (i ? v(s, t) : Object.assign(s, t), (s == null ? void 0 : s.tag3DContentSvelte) && (t == null ? void 0 : t.normal) && (s.tag3DContentSvelte.currentNormal = C(t.normal)), this.updateRenderAllTags(), this.checkPanelTag());
   }
   destroyTagById(e) {
     (Array.isArray(e) ? e : [e]).forEach((i) => {
@@ -298,10 +312,29 @@ class Kt extends L {
       s !== -1 && this.tags.splice(s, 1);
     }), this.updateRenderAllTags();
   }
+  pauseCurrentMedia() {
+    this.mediaStore.set({ currentMediaElement: null });
+  }
+  updateTagCss3DObjectMatrix(e, t) {
+    var D, w, R, O;
+    const i = (R = (w = (D = e.mergedConfig) == null ? void 0 : D.tag3DConfig) == null ? void 0 : w.ratio) != null ? R : 216e-5, s = (O = e.tag3DContentSvelte) == null ? void 0 : O.domContainer.css3DObject;
+    if (!s)
+      return;
+    const o = m(e) ? e.data.mediaPosition : e.position;
+    t.updateWorldMatrix(!1, !1);
+    const r = t.matrixWorld, n = new A().fromArray(o[0]), d = new A().fromArray(o[2]), f = new A().lerpVectors(n, d, 0.5).add(new A(0, 0, 5e-4)), g = new S().setPosition(f), y = new S().makeScale(i, i, i), b = new S().multiply(r).multiply(g).multiply(y);
+    b.decompose(s.position, s.quaternion, s.scale);
+    const u = s.opacityMesh;
+    !u || b.decompose(u.position, u.quaternion, u.scale);
+  }
+  updateTagCss3DObjectVisible(e) {
+    var t, i, s, o, r;
+    (r = (i = (t = e.tag3DContentSvelte) == null ? void 0 : t.domContainer) == null ? void 0 : i.css3DObject) == null || r.setVisible(this.state.visible && ((o = (s = e.state) == null ? void 0 : s.visible) != null ? o : !0)), this.five.needsRender = !0;
+  }
   setVisibleAndUnfolded() {
-    return f(this, arguments, function* ({ withAnimation: e } = { withAnimation: !1 }) {
+    return c(this, arguments, function* ({ withAnimation: e } = { withAnimation: !1 }) {
       if (!!this.isPanorama)
-        return this.setVisibleByPanoIndex(), e ? new Promise((t) => {
+        return this.setVisibleByPanoIndex(), e ? new Promise((t, i) => {
           setTimeout(() => {
             this.setUnfoldedByPanoIndex(), t();
           }, 10);
@@ -309,27 +342,30 @@ class Kt extends L {
     });
   }
   handleShow() {
-    this.state.visible = !0, this.group.visible = !0, this.updateTagContainerVisible(), this.updateTagModelVisible(), this.five.needsRender = !0;
+    this.state.visible = !0, this.group.visible = !0, this.updateTagContainerVisible(), this.five.needsRender = !0;
   }
   handleHide() {
-    this.pauseCurrentMedia(), this.state.visible = !1, this.group.visible = !1, this.updateTagContainerVisible(), this.updateTagModelVisible(), this.five.needsRender = !0;
+    this.pauseCurrentMedia(), this.state.visible = !1, this.group.visible = !1, this.updateTagContainerVisible(), this.five.needsRender = !0;
   }
   handleEnable() {
-    this.state.enabled = !0, this.store.eventListenerDisposer = this.addEventListener(), this.five.scene.children.includes(this.group) || this.five.scene.add(this.group), this.updateRenderAllTags(), this.five.needsRender = !0;
+    this.state.enabled = !0, this.store.eventListenerDisposer = this.addEventListener(), this.updateRenderAllTags();
   }
   handleDisable() {
     var e, t, i;
-    this.pauseCurrentMedia(), this.state.enabled = !1, (t = (e = this.store).eventListenerDisposer) == null || t.call(e), this.five.scene.remove(this.group), (i = this.TagContainerSvelte) == null || i.$set({ tags: [] }), this.filter3DTag.forEach((s) => {
+    this.pauseCurrentMedia(), this.state.enabled = !1, (t = (e = this.store).eventListenerDisposer) == null || t.call(e), (i = this.TagContainerSvelte) == null || i.$set({ tags: [] }), this.filter3DTag().forEach((s) => {
       var o;
       (o = s.tag3DContentSvelte) == null || o.svelteApp.$destroy(), s.tag3DContentSvelte = void 0;
-    }), this.five.needsRender = !0;
+    });
   }
   addEventListener() {
-    const { five: e, hooks: t } = this, i = this.handleFiveWantsMoveToPano.bind(this), s = this.handleFiveModeChange.bind(this), o = this.handleFiveCameraUpdate.bind(this), r = this.handleFiveCameraUpdateDebounce(), n = this.handleFivePanoArrived.bind(this), l = this.loadVideoFirstFrame.bind(this), v = this.clickhandler.bind(this), b = this.five.currentMode;
-    return b && this.handleFiveModeChange(b), this.handleFivePanoArrived(), e.on("wantsMoveToPano", i), e.on("modeChange", s), e.on("initAnimationEnded", this.handleFiveInitAnimationEnded), e.on("modelShownFloorChange", this.handleFiveModelShownFloorChange), e.on("cameraUpdate", o), e.on("cameraUpdate", r), e.on("panoArrived", n), e.on("panoArrived", l), t.on("click", v), () => {
-      e.off("wantsMoveToPano", i), e.off("modeChange", s), e.off("initAnimationEnded", this.handleFiveInitAnimationEnded), e.off("modelShownFloorChange", this.handleFiveModelShownFloorChange), e.off("cameraUpdate", o), e.off("cameraUpdate", r), e.off("panoArrived", n), e.off("panoArrived", l), t.off("click", v), this.store.eventListenerDisposer = void 0;
+    const { five: e, hooks: t } = this, i = this.handleFiveWantsMoveToPano.bind(this), s = this.handleFiveModeChange.bind(this), o = this.handleFiveCameraUpdate.bind(this), r = this.handleFiveCameraUpdateDebounce(), n = this.handleFivePanoArrived.bind(this), d = this.loadVideoFirstFrame.bind(this), f = this.clickhandler.bind(this), g = this.five.currentMode;
+    return this.handleFiveModeChange(g), this.handleFivePanoArrived(), e.on("wantsMoveToPano", i), e.on("modeChange", s), e.on("initAnimationEnded", this.handleFiveInitAnimationEnded), e.on("modelShownFloorChange", this.handleFiveModelShownFloorChange), e.on("cameraUpdate", o), e.on("cameraUpdate", r), e.on("panoArrived", n), e.on("panoArrived", d), t.on("click", f), () => {
+      e.off("wantsMoveToPano", i), e.off("modeChange", s), e.off("initAnimationEnded", this.handleFiveInitAnimationEnded), e.off("modelShownFloorChange", this.handleFiveModelShownFloorChange), e.off("cameraUpdate", o), e.off("cameraUpdate", r), e.off("panoArrived", n), e.off("panoArrived", d), t.off("click", f), this.store.eventListenerDisposer = void 0;
     };
   }
+  loadVideoFirstFrame() {
+    this.isIOSWX && this.hooks.emit("loadVideoFirstFrame");
+  }
   addResizeListener() {
     if (!this.store.resizeObserverDisposer && !this.store.resizeObserverDisposerAdding) {
       const e = this.addResizeObserver();
@@ -345,13 +381,13 @@ class Kt extends L {
       !this.state.enabled || (this.show(), this.updateRenderAllTags());
     }, i = () => {
       !this.state.enabled || this.hide();
-    }, { observe: s, unobserve: o } = y(
-      R(() => {
+    }, { observe: s, unobserve: o } = U(
+      J(() => {
         !this.store.resizeObserverDisposer || i();
       }, 500),
       e
-    ), { observe: r, unobserve: n } = y(
-      C(() => t(), 400),
+    ), { observe: r, unobserve: n } = U(
+      j(() => t(), 400),
       e
     );
     return s(), r(), () => {
@@ -360,15 +396,21 @@ class Kt extends L {
   }
   handleFiveModeChange(e) {
     this.setModelMedialVisible(), this.tags.forEach((t) => {
-      u(t) && e !== "Panorama" && this.changeTagMode(t, "behind"), t.state.visible = this.getVisible(t);
+      m(t) && e !== "Panorama" && this.changeTagMode(t, "behind"), t.state.visible = this.getVisible(t);
     }), this.updateRenderAllTags(), this.updateRenderAllTags();
   }
   handleFiveWantsMoveToPano() {
     this.tags.forEach((e) => {
       const t = this.getTagConfig(e);
-      typeof t.visibleConfig == "object" && (t.visibleConfig.keep ? e.temporaryState = g(h({}, e.temporaryState), { visible: t.visibleConfig.keep === "visible" }) : e.temporaryState = g(h({}, e.temporaryState), { visible: Boolean(t.visibleConfig.alwaysShowWhenMovePano) }));
+      typeof t.visibleConfig == "object" && (t.visibleConfig.keep ? e.temporaryState = T(p({}, e.temporaryState), { visible: t.visibleConfig.keep === "visible" }) : e.temporaryState = T(p({}, e.temporaryState), { visible: Boolean(t.visibleConfig.alwaysShowWhenMovePano) }));
     }), this.updateTagContainerVisible();
   }
+  temporaryShow({ withAnimation: e } = { withAnimation: !1 }) {
+    this.store.visibleWithAnimation = e, this.temporaryState.visible = !0, this.updateTagContainerVisible();
+  }
+  temporaryHide({ withAnimation: e } = { withAnimation: !1 }) {
+    this.store.visibleWithAnimation = e, this.temporaryState.visible = !1, this.updateTagContainerVisible();
+  }
   clickhandler(e) {
     if (e.target !== "TagPoint")
       return;
@@ -379,8 +421,26 @@ class Kt extends L {
       s.id !== e.tag.id && s.state && this.can("fold", s) && (s.state.unfolded = !1);
     }), this.updateRenderAllTags());
   }
+  updateRenderAllTags() {
+    this.enabledModelTagSet.clear(), this.tags.forEach((e) => e.stickType === "Model" && this.enabledModelTagSet.add(e.id)), this.updateRenderPointTag(), this.updateRenderPlaneTag(), this.updateRenderModelTag();
+  }
+  updateTagContainerVisible() {
+    var e;
+    (e = this.TagContainerSvelte) == null || e.$set({
+      state: this.state,
+      temporaryState: this.temporaryState,
+      withAnimation: this.store.visibleWithAnimation
+    }), this.filter3DTag().forEach((t) => {
+      var i, s, o, r;
+      (o = (s = (i = t.tag3DContentSvelte) == null ? void 0 : i.domContainer) == null ? void 0 : s.css3DObject) == null || o.setVisible(this.state.visible), (r = t.tag3DContentSvelte) == null || r.svelteApp.$set({
+        state: this.state,
+        temporaryState: this.temporaryState,
+        withAnimation: this.store.visibleWithAnimation
+      });
+    });
+  }
   handleFiveCameraUpdateDebounce() {
-    return C(() => {
+    return j(() => {
       this.setUnfoldedByCamera(), this.updateRenderAllTags();
     }, 100);
   }
@@ -388,9 +448,9 @@ class Kt extends L {
     this.updateRenderPointTag();
   }
   handleFivePanoArrived() {
-    return f(this, null, function* () {
+    return c(this, null, function* () {
       this.setModelMedialVisible(), yield this.setVisibleAndUnfolded(), this.tags.forEach((e) => {
-        e.temporaryState = g(h({}, e.temporaryState), { visible: !0 });
+        e.temporaryState = T(p({}, e.temporaryState), { visible: !0 });
       }), this.store.visibleWithAnimation = !0, this.updateTagContainerVisible(), this.updateRenderAllTags();
     });
   }
@@ -404,13 +464,113 @@ class Kt extends L {
       typeof i == "object" && (i.autoUnfold || i.keep) || t.state && (t.state.unfolded = !1);
     });
   }
+  updateRenderPointTag() {
+    var t;
+    const e = this.sort(this.filterPointTag());
+    if (this.setPointTagPosition(), this.TagContainerSvelte)
+      this.TagContainerSvelte.$set({ tags: e, state: this.state, temporaryState: this.temporaryState });
+    else {
+      const i = (t = this.five.getElement()) == null ? void 0 : t.parentElement;
+      if (!i)
+        return console.error("updateRenderPlaneTag: tag2DContainer not found");
+      this.TagContainerSvelte = new z({
+        target: i,
+        props: { hooks: this.hooks, tags: e, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore }
+      });
+    }
+  }
+  updateRenderPlaneTag() {
+    this.sort([...this.filterPlaneTag(), ...this.filter3DPointTag(), ...this.filterModelTag()]).forEach((t) => {
+      var n, d, f;
+      if (m(t) && ((n = t.model) == null ? void 0 : n.object) && this.updateTagCss3DObjectMatrix(t, (d = t.model) == null ? void 0 : d.object), t.tag3DContentSvelte) {
+        const { svelteApp: g, domContainer: y, initialNormal: b, currentNormal: u } = t.tag3DContentSvelte;
+        if (this.updateTagCss3DObjectVisible(t), g.$set({
+          tag: t,
+          hooks: this.hooks,
+          state: this.state,
+          temporaryState: this.temporaryState
+        }), !b.equals(u)) {
+          const D = new N().setFromUnitVectors(b, u);
+          y.css3DObject.setRotationFromQuaternion(D);
+        }
+        return;
+      }
+      if (((f = t.state) == null ? void 0 : f.visible) === !1)
+        return;
+      if (this.css3DRenderPlugin || (this.css3DRenderPlugin = X(this.five)), t.stickType === "3DPoint" && !t.normal)
+        return console.error("updateRenderPlaneTag: \u4E09\u7EF4\u70B9\u6807\u7B7E\u7F3A\u5C11\u6CD5\u5411\u91CF\uFF01");
+      const i = (() => t.stickType === "Plane" ? t.position : m(t) ? t.data.mediaPosition : H(
+        this.five.camera.position,
+        C(t.position),
+        C(t.normal)
+      ))();
+      if (!i)
+        return;
+      const s = function() {
+        if (t.normal)
+          return C(t.normal);
+        if (t.stickType === "Plane")
+          return k(t.position);
+        if (t.contentType === "MediaModel")
+          return k(i);
+      }();
+      if (!s)
+        return;
+      const o = this.getTagConfig(t).tag3DConfig, r = this.css3DRenderPlugin.create3DDomContainer(i, o);
+      !r || (this.updateTagCss3DObjectVisible(t), this.store.css3DRenderDisposer.set(t.id, r.dispose), t.tag3DContentSvelte = {
+        svelteApp: new _({
+          target: r.container,
+          props: {
+            tag: t,
+            hooks: this.hooks,
+            state: this.state,
+            mediaStore: this.mediaStore,
+            temporaryState: this.temporaryState
+          }
+        }),
+        domContainer: r,
+        initialNormal: s,
+        currentNormal: s
+      });
+    }), this.checkPanelTag();
+  }
+  updateRenderModelTag() {
+    const e = (i) => !this.enabledModelTagSet.has(i.customID);
+    this.gltfObjectGroup.remove(...this.gltfObjectGroup.children.filter(e)), this.tags.filter(m).forEach((i) => {
+      var s;
+      (s = i.model) == null || s.promise.then((o) => {
+        o.visible = i.state.visible;
+      });
+    });
+  }
+  disposeAllCSS3DContainer() {
+    for (const [e, t] of this.store.css3DRenderDisposer)
+      t == null || t();
+    this.store.css3DRenderDisposer = /* @__PURE__ */ new Map();
+  }
+  checkPanelTag() {
+    this.filter2DPointTag().forEach((e) => {
+      var t;
+      (t = e.tag3DContentSvelte) == null || t.domContainer.dispose(), e.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));
+    }
+  }
+  addMediaModelTag(e) {
+    return c(this, null, function* () {
+      const t = e.filter(m).map(this.loadModel);
+      yield Promise.all(t), this.setModelMedialVisible(), this.updateRenderAllTags();
+    });
+  }
   changeTagMode(e, t) {
     var i, s, o, r, n;
     ((o = (s = (i = e.tag3DContentSvelte) == null ? void 0 : i.domContainer) == null ? void 0 : s.css3DObject) == null ? void 0 : o.mode) !== t && ((r = e.config) != null && r.tag3DConfig ? e.config.tag3DConfig.mode = t : e.config ? e.config.tag3DConfig = { mode: t } : e.config = { tag3DConfig: { mode: t } }, (n = this.store.css3DRenderDisposer.get(e.id)) == null || n(), e.tag3DContentSvelte = void 0);
   }
 }
 export {
-  Kt as PanoTagPluginController,
-  Kt as default,
-  qt as pluginFlag
+  li as PanoTagPluginController,
+  li as default,
+  di as pluginFlag
 };