@realsee/dnalogel 2.3.8 → 2.3.9-alpha.1

package/libs/PanoTagPlugin/controller/index.js

@@ -1,129 +1,202 @@
-var A = Object.defineProperty, P = Object.defineProperties;
-var R = Object.getOwnPropertyDescriptors;
+var S = Object.defineProperty, y = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
 var T = Object.getOwnPropertySymbols;
 var w = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
-var v = (l, a, e) => a in l ? A(l, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[a] = e, f = (l, a) => {
+var u = (h, a, e) => a in h ? S(h, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[a] = e, p = (h, a) => {
   for (var e in a || (a = {}))
-    w.call(a, e) && v(l, e, a[e]);
+    w.call(a, e) && u(h, e, a[e]);
   if (T)
     for (var e of T(a))
-      E.call(a, e) && v(l, e, a[e]);
-  return l;
-}, c = (l, a) => P(l, R(a));
-var h = (l, a, e) => (v(l, typeof a != "symbol" ? a + "" : a, e), e);
-var p = (l, a, e) => new Promise((t, s) => {
-  var i = (n) => {
+      E.call(a, e) && u(h, e, a[e]);
+  return h;
+}, m = (h, a) => y(h, P(a));
+var d = (h, a, e) => (u(h, typeof a != "symbol" ? a + "" : a, e), e);
+var f = (h, a, e) => new Promise((t, i) => {
+  var s = (r) => {
     try {
-      r(e.next(n));
-    } catch (d) {
-      s(d);
+      n(e.next(r));
+    } catch (l) {
+      i(l);
     }
-  }, o = (n) => {
+  }, o = (r) => {
     try {
-      r(e.throw(n));
-    } catch (d) {
-      s(d);
+      n(e.throw(r));
+    } catch (l) {
+      i(l);
     }
-  }, r = (n) => n.done ? t(n.value) : Promise.resolve(n.value).then(i, o);
-  r((e = e.apply(l, a)).next());
+  }, n = (r) => r.done ? t(r.value) : Promise.resolve(r.value).then(s, o);
+  n((e = e.apply(h, a)).next());
 });
-import { Subscribe as U } from "@realsee/five";
-import { Quaternion as k } from "three";
-import m from "object-assign-deep";
-import { writable as F } from "../../vendor/svelte/store/index.js";
-import { TagContainer as L } from "../Components/TagContainer.js";
-import { Tag as B } from "../Components/Tag/index.js";
+import { Subscribe as R } from "@realsee/five";
+import { Quaternion as F } from "three";
+import c from "object-assign-deep";
+import { writable as k } from "../../vendor/svelte/store/index.js";
+import U from "../Components/TagContainer.js";
+import L from "../Components/Tag/index.js";
 import { arrayPositionToVector3 as g } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
 import { addDebugPoints as O } from "../utils/addDebugPoints.js";
 import { planeNormal as I } from "../utils/planeNormal.js";
-import { actionAfterFiveModelLoad as z } from "../utils/actionAfterFiveModelLoad.js";
+import { waitFiveModelLoaded as B } from "../utils/actionAfterFiveModelLoad.js";
 import { normalPositionToPositions as M } from "../utils/normalPositionToPositions.js";
 import { debounce as C } from "../utils/debounce.js";
-import { throttle as N } from "../utils/throttle.js";
+import { throttle as V } from "../utils/throttle.js";
 import { resizeObserver as D } from "../utils/resizeObserver.js";
-import { TagComputer as $ } from "./TagComputer.js";
-import { CSS3DRenderPlugin as j } from "../../CSS3DRenderPlugin/index.js";
-import { PointType as u, DimensionType as y } from "../typings/tag.js";
-const S = "1.2.6", b = `DnalogelPlugin-PanoTagPlugin@${S}`, V = !1, re = (l) => `${b}--${l}`;
-class ae extends $ {
+import { TagComputer as N } from "./TagComputer.js";
+import { CSS3DRenderPlugin as z } from "../../CSS3DRenderPlugin/index.js";
+import W from "../utils/tag/format.js";
+import "../../vendor/svelte/internal/index.js";
+import "../Components/TagItem.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 "../../shared-utils/uuid.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 "../utils/doUtil.js";
+import "../Components/Tag/TextTag/TextPlaneTag.js";
+import "../Components/Common/Text/MText.js";
+import "../Components/Tag/ImageTextTag.js";
+import "../Components/Common/Line/Polyline.js";
+import "../Components/Common/Media.js";
+import "../../vendor/swiper/svelte/swiper.js";
+import "swiper";
+import "../../vendor/swiper/components-shared/get-params.js";
+import "../../vendor/swiper/components-shared/utils.js";
+import "../../vendor/swiper/components-shared/params-list.js";
+import "../../vendor/swiper/components-shared/mount-swiper.js";
+import "../../vendor/swiper/components-shared/get-changed-params.js";
+import "../../vendor/swiper/components-shared/update-swiper.js";
+import "../../vendor/swiper/svelte/swiper-slide.js";
+import "swiper/css";
+import "swiper/css/autoplay";
+import "../Components/Common/MediaItem.js";
+import "../Components/Tag/MarketingTag.js";
+import "../Components/Tag/AudioTag/index.js";
+import "../Components/Tag/AudioTag/AudioTag.js";
+import "../Components/Common/Audio.js";
+import "../Components/Common/Icon/audioIcon.js";
+import "../Components/Tag/AudioTag/AudioPlaneTag.js";
+import "../utils/timeToString.js";
+import "../utils/color.js";
+import "../Components/Tag/MediaPlane.js";
+import "../Components/Tag/LinkTag.js";
+import "../Components/Tag/CustomTag.js";
+import "../tag.config.js";
+import "../utils/tag/tagCheck.js";
+import "../utils/tagPosition.js";
+import "../../CSS3DRenderPlugin/utils/centerPoint.js";
+import "../utils/checkRange.js";
+import "./TagCacheController.js";
+import "../../base/BasePlugin.js";
+import "../../shared-utils/Subscribe.js";
+import "../../CSS3DRenderPlugin/Controller.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 "../../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/waitFiveModelLoaded.js";
+import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+const A = "2.0.0", v = `DnalogelPlugin-PanoTagPlugin@${A}`, _ = !1, Pt = (h) => `${v}--${h}`;
+class wt extends N {
   constructor(e, t) {
     super(e);
-    h(this, "version", S);
-    h(this, "state", { enabled: !0, visible: !0 });
-    h(this, "params");
-    h(this, "debug");
-    h(this, "css3DRenderPlugin");
-    h(this, "TagContainerSvelte");
-    h(this, "temporaryState", { visible: !0 });
-    h(this, "mediaStore", F({
-      currentMediaUrl: ""
+    d(this, "version", A);
+    d(this, "state", { enabled: !0, visible: !0 });
+    d(this, "params");
+    d(this, "debug");
+    d(this, "css3DRenderPlugin");
+    d(this, "TagContainerSvelte");
+    d(this, "temporaryState", { visible: !0 });
+    d(this, "mediaStore", k({
+      currentMediaElement: null
     }));
-    h(this, "store", {
+    d(this, "isIOSWX", navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1 && navigator.userAgent.toLowerCase().indexOf("iphone") !== -1);
+    d(this, "store", {
       disposers: [],
       disposed: !1,
       resizeObserverDisposerAdding: !1,
       css3DRenderDisposer: /* @__PURE__ */ new Map()
     });
-    h(this, "staticUrl");
-    h(this, "disposedErrorLog", () => {
-      console.error(`${b} is disposed`);
+    d(this, "disposedErrorLog", () => {
+      console.error(`${v} is disposed`);
     });
-    this.params = f({
-      debug: !1,
-      mergePluginDefaultConfigToLoadDataConfig: !1,
-      config: this.config,
-      staticConfig: {
-        host: "vrlab-static.ljcdn.com"
-      }
-    }, t), this.debug = this.params.debug, this.config = this.params.config, this.staticUrl = (() => {
-      var i;
-      const s = this.params.staticConfig;
-      if (typeof s == "string")
-        return s;
-      {
-        const o = s.protocol ? s.protocol + ":" : "", r = (i = s.host) != null ? i : "vrlab-static.ljcdn.com", n = s.port ? ":" + s.port : "";
-        return `${o}//${r}${n}`;
-      }
-    })(), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this });
+    this.params = p({ debug: !1, config: this.config }, t), this.debug = this.params.debug, this.config = this.params.config, Object.assign(window, { [`__PANOTAGPLUGIN_DEBUG_${Date.now()}__`]: this }), Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this });
   }
   load(e, t) {
-    var s, i;
-    this.clearTags(), console.log(b, "load:", { data: e }), this.params.mergePluginDefaultConfigToLoadDataConfig ? this.config = m({}, this.config, {
-      globalConfig: (s = e.globalConfig) != null ? s : {},
-      contentTypeConfig: (i = e.contentTypeConfig) != null ? i : {}
-    }) : (e.globalConfig && (this.config.globalConfig = e.globalConfig), e.contentTypeConfig && (this.config.contentTypeConfig = e.contentTypeConfig)), this.addTag(e.tagList, t), this.debug && O(this.five, this.tags);
+    return f(this, null, function* () {
+      var i, s;
+      if (this.clearTags(), console.log(v, " load:", { data: e }), this.config = c({}, this.config, {
+        globalConfig: (i = e.globalConfig) != null ? i : {},
+        contentTypeConfig: (s = e.contentTypeConfig) != null ? s : {}
+      }), this.debug)
+        try {
+          O(this.five, this.tags);
+        } catch (o) {
+          console.error(o);
+        }
+      return this.addTag(e.tagList, t);
+    });
   }
   addTag(e, t) {
-    const i = (Array.isArray(e) ? e : [e]).map((o) => {
-      const r = this.getTagConfig(o);
-      return c(f({}, o), {
-        state: f({ visible: void 0, unfolded: V }, r.initialState),
-        hooks: new U(),
-        clickable: r.clickable
+    return f(this, null, function* () {
+      const s = (Array.isArray(e) ? e : [e]).map((o) => {
+        const n = this.getTagConfig(o);
+        return m(p({}, o), {
+          state: p({ visible: void 0, unfolded: _ }, n.initialState),
+          hooks: new R(),
+          clickable: n.clickable,
+          mergedConfig: n
+        });
+      }).filter((o) => o.position);
+      return s.forEach(W), this.tags.push(...s), B(this.five).then(() => {
+        var o, n, r;
+        return this.store.eventListenerDisposer && ((n = (o = this.store).eventListenerDisposer) == null || n.call(o)), this.state.enabled && (this.store.eventListenerDisposer = this.addEventListener()), this.addResizeListener(), this.checkPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (r = t == null ? void 0 : t.withAnimation) != null ? r : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags(), !0;
       });
-    }).filter((o) => o.position);
-    this.tags.push(...i), z(this.five, () => {
-      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.checkPanelTag(), this.setVisibleAndUnfolded({ withAnimation: (n = t == null ? void 0 : t.withAnimation) != null ? n : !0 }).then(() => this.updateRenderAllTags()), this.updateRenderAllTags();
     });
   }
+  changeConfig(e, t = !0) {
+    t ? this.config = c({}, 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();
+  }
   clearTags() {
     this.tags = [], this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
   }
   show(e) {
-    return p(this, null, function* () {
-      const { userAction: t = !0, withAnimation: s = !1 } = e != null ? e : {};
+    return f(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: s }), this.hooks.emit("show", { userAction: t, withAnimation: s });
+      this.setState({ visible: !0 }, { userAction: t, visibleWithAnimation: i }), this.hooks.emit("show", { userAction: t, withAnimation: i });
     });
   }
   hide(e) {
-    return p(this, null, function* () {
-      const { userAction: t = !0, withAnimation: s = !1 } = e != null ? e : {};
+    return f(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: s }), this.hooks.emit("hide", { userAction: t, withAnimation: s });
+      this.setState({ visible: !1 }, { userAction: t, visibleWithAnimation: i }), this.hooks.emit("hide", { userAction: t, withAnimation: i });
     });
   }
   enable(e) {
@@ -139,70 +212,86 @@ class ae extends $ {
     this.setState({ enabled: !1 }, { userAction: t }), this.hooks.emit("disable", { userAction: t });
   }
   dispose() {
-    var e, t, s, i, o, r;
-    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, (i = (s = this.store).eventListenerDisposer) == null || i.call(s), this.store.eventListenerDisposer = void 0, (r = (o = this.store).resizeObserverDisposer) == null || r.call(o), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.clearCache(), this.hooks.emit("dispose");
+    var e, t, i, s, o, n;
+    this.pauseCurrentMedia(), this.disposeAllCSS3DContainer(), (e = this.TagContainerSvelte) == null || e.$destroy(), this.filter3DTag().forEach((r) => {
+      var l;
+      return (l = r.tag3DContentSvelte) == null ? void 0 : l.svelteApp.$destroy();
+    }), this.tags = [], (t = this.store.disposers) == null || t.forEach((r) => r == null ? void 0 : r()), this.store.disposers = [], this.store.disposed = !0, (s = (i = this.store).eventListenerDisposer) == null || s.call(i), this.store.eventListenerDisposer = void 0, (n = (o = this.store).resizeObserverDisposer) == null || n.call(o), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.clearCache(), this.hooks.emit("dispose");
   }
   setState(e, t) {
     if (this.store.disposed)
       return this.disposedErrorLog();
-    const { userAction: s = !0, visibleWithAnimation: i = !1 } = t, o = f({}, this.state);
-    this.state = Object.assign(this.state, e), this.store.visibleWithAnimation = i, 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: s });
+    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 o;
+    const i = this.getTagById(e);
+    if (!i)
+      return;
+    i.state.unfolded = t;
+    const s = this.filterPointTag();
+    (o = this.TagContainerSvelte) == null || o.$set({ tags: s });
   }
   changeTagNormalById(e, t) {
+    const i = this.getTagById(e);
+    !i || !i.tag3DContentSvelte || (i.tag3DContentSvelte.currentNormal = g(t), this.updateRenderPlaneTag());
+  }
+  changeDataById(e, t, i = !0) {
     const s = this.getTagById(e);
-    !s || !s.tag3DContentSvelte || (s.tag3DContentSvelte.currentNormal = g(t), this.updateRenderPlaneTag());
+    !s || (i ? s.data = c({}, s.data, t) : s.data = p(p({}, s.data), t), this.checkPanelTag(), this.updateRenderAllTags());
   }
-  changeDataById(e, t, s = !0) {
-    const i = this.getTagById(e);
-    !i || (s ? i.data = m({}, i.data, t) : Object.assign(i.data, t), this.checkPanelTag(), this.updateRenderAllTags());
+  changeStickTypeById(e, t, i = !0) {
+    this.changeTagById(e, t, i);
   }
-  changeTagById(e, t, s = !0) {
-    const i = this.getTagById(e);
-    !t || (s ? m(i, t) : Object.assign(i, t), (i == null ? void 0 : i.tag3DContentSvelte) && (t == null ? void 0 : t.normal) && (i.tag3DContentSvelte.currentNormal = g(t.normal)), this.updateRenderAllTags(), this.checkPanelTag());
+  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 = g(t.normal)), this.updateRenderAllTags(), this.checkPanelTag());
   }
   destroyTagById(e) {
-    (Array.isArray(e) ? e : [e]).forEach((s) => {
-      const i = this.tags.findIndex((o) => o.id === s);
-      i !== -1 && this.tags.splice(i, 1);
+    (Array.isArray(e) ? e : [e]).forEach((i) => {
+      const s = this.tags.findIndex((o) => o.id === i);
+      s !== -1 && this.tags.splice(s, 1);
     }), this.updateRenderAllTags();
   }
   pauseCurrentMedia() {
-    this.mediaStore.set({ currentMediaUrl: "" });
+    this.mediaStore.set({ currentMediaElement: null });
   }
   setVisibleAndUnfolded() {
-    return p(this, arguments, function* ({ withAnimation: e } = { withAnimation: !1 }) {
-      return this.setVisibleByPanoIndex(), e ? new Promise((t, s) => {
-        setTimeout(() => {
-          this.setUnfoldedByPanoIndex(), t();
-        }, 10);
-      }) : (this.setUnfoldedByPanoIndex(), Promise.resolve());
+    return f(this, arguments, function* ({ withAnimation: e } = { withAnimation: !1 }) {
+      if (!!this.isPanorama)
+        return this.setVisibleByPanoIndex(), e ? new Promise((t, i) => {
+          setTimeout(() => {
+            this.setUnfoldedByPanoIndex(), t();
+          }, 10);
+        }) : (this.setUnfoldedByPanoIndex(), Promise.resolve());
     });
   }
   handleShow() {
     this.state.visible = !0, this.updateTagContainerVisible();
   }
   handleHide() {
-    this.state.visible = !1, this.updateTagContainerVisible();
+    this.pauseCurrentMedia(), this.state.visible = !1, this.updateTagContainerVisible();
   }
   handleEnable() {
     this.state.enabled = !0, this.store.eventListenerDisposer = this.addEventListener(), this.updateRenderAllTags();
   }
   handleDisable() {
-    var e, t, s;
-    this.state.enabled = !1, (t = (e = this.store).eventListenerDisposer) == null || t.call(e), (s = this.TagContainerSvelte) == null || s.$set({ tags: [] }), this.filter3DTag().forEach((i) => {
+    var e, t, i;
+    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 = i.tag3DContentSvelte) == null || o.svelteApp.$destroy(), i.tag3DContentSvelte = void 0;
+      (o = s.tag3DContentSvelte) == null || o.svelteApp.$destroy(), s.tag3DContentSvelte = void 0;
     });
   }
   addEventListener() {
-    const { five: e, hooks: t } = this, s = this.handleFiveWantsMoveToPano.bind(this), i = this.handleFiveModeChange.bind(this), o = this.handleFiveCameraUpdate.bind(this), r = this.handleFiveCameraUpdateDebounce(), n = this.handleFivePanoArrived.bind(this), d = this.clickhandler.bind(this);
-    return e.on("wantsMoveToPano", s), e.on("modeChange", i), e.on("cameraUpdate", o), e.on("cameraUpdate", r), e.on("panoArrived", n), t.on("click", d), () => {
-      e.off("wantsMoveToPano", s), e.off("modeChange", i), e.off("cameraUpdate", o), e.off("cameraUpdate", r), e.off("panoArrived", n), t.off("click", d), 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), n = this.handleFiveCameraUpdateDebounce(), r = this.handleFivePanoArrived.bind(this), l = this.loadVideoFirstFrame.bind(this), b = this.clickhandler.bind(this);
+    return this.five.currentMode && (this.isPanorama ? (this.handleFivePanoArrived(), this.temporaryShow({ withAnimation: !0 })) : this.temporaryHide()), e.on("wantsMoveToPano", i), e.on("modeChange", s), e.on("cameraUpdate", o), e.on("cameraUpdate", n), e.on("panoArrived", r), e.on("panoArrived", l), t.on("click", b), () => {
+      e.off("wantsMoveToPano", i), e.off("modeChange", s), e.off("cameraUpdate", o), e.off("cameraUpdate", n), e.off("panoArrived", r), e.off("panoArrived", l), t.off("click", b), this.store.eventListenerDisposer = void 0;
     };
   }
+  loadVideoFirstFrame() {
+    this.isIOSWX && this.hooks.emit("loadVideoFirstFrame");
+  }
   addResizeListener() {
     if (!this.store.resizeObserverDisposer && !this.store.resizeObserverDisposerAdding) {
       const e = this.addResizeObserver();
@@ -216,44 +305,44 @@ class ae extends $ {
       return;
     const e = this.five.getElement(), t = () => {
       !this.state.enabled || (this.show(), this.updateRenderAllTags());
-    }, s = () => {
+    }, i = () => {
       !this.state.enabled || this.hide();
-    }, { observe: i, unobserve: o } = D(
-      N(() => {
-        !this.store.resizeObserverDisposer || s();
+    }, { observe: s, unobserve: o } = D(
+      V(() => {
+        !this.store.resizeObserverDisposer || i();
       }, 500),
       e
-    ), { observe: r, unobserve: n } = D(
+    ), { observe: n, unobserve: r } = D(
       C(() => t(), 400),
       e
     );
-    return i(), r(), () => {
-      o(), n();
+    return s(), n(), () => {
+      o(), r();
     };
   }
   handleFiveModeChange(e) {
-    e === "Panorama" ? this.five.once("panoArrived", () => this.temporaryShow()) : this.temporaryHide();
+    e === "Panorama" ? this.five.once("panoArrived", () => this.temporaryShow({ withAnimation: !0 })) : this.temporaryHide();
   }
   handleFiveWantsMoveToPano() {
     this.tags.forEach((e) => {
       const t = this.getTagConfig(e);
-      typeof t.visibleConfig == "object" && t.visibleConfig.keep ? e.temporaryState = c(f({}, e.temporaryState), { visible: t.visibleConfig.keep === "visible" }) : typeof t.visibleConfig == "object" && t.visibleConfig.alwaysShowWhenMovePano ? e.temporaryState = c(f({}, e.temporaryState), { visible: !0 }) : e.temporaryState = c(f({}, e.temporaryState), { visible: !1 });
-    }), this.updateRenderAllTags();
+      typeof t.visibleConfig == "object" && (t.visibleConfig.keep ? e.temporaryState = m(p({}, e.temporaryState), { visible: t.visibleConfig.keep === "visible" }) : e.temporaryState = m(p({}, e.temporaryState), { visible: Boolean(t.visibleConfig.alwaysShowWhenMovePano) }));
+    }), this.updateTagContainerVisible();
   }
-  temporaryShow() {
-    this.temporaryState.visible = !0;
+  temporaryShow({ withAnimation: e } = { withAnimation: !1 }) {
+    this.store.visibleWithAnimation = e, this.temporaryState.visible = !0, this.updateTagContainerVisible();
   }
-  temporaryHide() {
-    this.temporaryState.visible = !1;
+  temporaryHide({ withAnimation: e } = { withAnimation: !1 }) {
+    this.store.visibleWithAnimation = e, this.temporaryState.visible = !1, this.updateTagContainerVisible();
   }
   clickhandler(e) {
     if (e.target !== "TagPoint")
       return;
     if (!e.tag.state)
       return console.warn("Clickhandler: params.tag.state is undefined");
-    const t = this.canBe("fold", e.tag), s = this.canBe("unfold", e.tag);
-    t && s && (e.tag.state.unfolded = !e.tag.state.unfolded, e.tag.state.unfolded && this.tags.forEach((i) => {
-      i.id !== e.tag.id && i.state && this.canBe("fold", i) && (i.state.unfolded = !1);
+    const t = this.can("fold", e.tag), i = this.can("unfold", e.tag);
+    t && i && (e.tag.state.unfolded = !e.tag.state.unfolded, e.tag.state.unfolded && this.tags.forEach((s) => {
+      s.id !== e.tag.id && s.state && this.can("fold", s) && (s.state.unfolded = !1);
     }), this.updateRenderAllTags());
   }
   updateRenderAllTags() {
@@ -266,8 +355,8 @@ class ae extends $ {
       temporaryState: this.temporaryState,
       withAnimation: this.store.visibleWithAnimation
     }), this.filter3DTag().forEach((t) => {
-      var s;
-      (s = t.tag3DContentSvelte) == null || s.svelteApp.$set({
+      var i;
+      (i = t.tag3DContentSvelte) == null || i.svelteApp.$set({
         state: this.state,
         temporaryState: this.temporaryState,
         withAnimation: this.store.visibleWithAnimation
@@ -283,62 +372,62 @@ class ae extends $ {
     this.updateRenderPointTag();
   }
   handleFivePanoArrived() {
-    return p(this, null, function* () {
+    return f(this, null, function* () {
       yield this.setVisibleAndUnfolded(), this.tags.forEach((e) => {
-        e.temporaryState = c(f({}, e.temporaryState), { visible: !0 });
-      }), this.updateRenderAllTags();
+        e.temporaryState = m(p({}, e.temporaryState), { visible: !0 });
+      }), this.store.visibleWithAnimation = !0, this.updateTagContainerVisible();
     });
   }
   setUnfoldedByCamera() {
     let e = !1;
     this.tags.forEach((t) => {
-      const s = this.getUnfoldedByCamera(t);
-      !t.state || s !== void 0 && (s === !0 && (e = !0), t.state.unfolded = s);
+      const i = this.getUnfoldedByCamera(t);
+      !t.state || i !== void 0 && (i === !0 && (e = !0), t.state.unfolded = i);
     }), e && this.tags.forEach((t) => {
-      const s = this.getTagConfig(t).unfoldedConfig;
-      typeof s == "object" && (s.autoUnfold || s.disableFold || s.keep) || t.state && (t.state.unfolded = !1);
+      const i = this.getTagConfig(t).unfoldedConfig;
+      typeof i == "object" && (i.autoUnfold || i.keep) || t.state && (t.state.unfolded = !1);
     });
   }
   updateRenderPointTag() {
     var t;
-    const e = this.filterPointTag();
+    const e = this.sort(this.filterPointTag());
     if (this.setPointTagPosition(), this.TagContainerSvelte)
       this.TagContainerSvelte.$set({ tags: e, state: this.state, temporaryState: this.temporaryState });
     else {
-      const s = (t = this.five.getElement()) == null ? void 0 : t.parentElement;
-      if (!s)
+      const i = (t = this.five.getElement()) == null ? void 0 : t.parentElement;
+      if (!i)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new L({
-        target: s,
+      this.TagContainerSvelte = new U({
+        target: i,
         props: { hooks: this.hooks, tags: e, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore }
       });
     }
   }
   updateRenderPlaneTag() {
-    [...this.filterPlaneTag(), ...this.filter3DPointTag()].forEach((t) => {
-      var s;
+    this.sort([...this.filterPlaneTag(), ...this.filter3DPointTag()]).forEach((t) => {
+      var i;
       if (t.tag3DContentSvelte) {
-        const { svelteApp: i, domContainer: o, initialNormal: r, currentNormal: n } = t.tag3DContentSvelte;
-        if (i.$set({
+        const { svelteApp: s, domContainer: o, initialNormal: n, currentNormal: r } = t.tag3DContentSvelte;
+        if (s.$set({
           tag: t,
           hooks: this.hooks,
           state: this.state,
           temporaryState: this.temporaryState
-        }), !r.equals(n)) {
-          const d = new k().setFromUnitVectors(r, n);
-          o.css3DObject.setRotationFromQuaternion(d);
+        }), !n.equals(r)) {
+          const l = new F().setFromUnitVectors(n, r);
+          o.css3DObject.setRotationFromQuaternion(l);
         }
       } else {
-        if (((s = t.state) == null ? void 0 : s.visible) === !1)
+        if (((i = t.state) == null ? void 0 : i.visible) === !1)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = j(this.five)), t.pointType === u.PointTag && !t.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = z(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.pointType === u.PlaneTag ? t.position : M(this.five.camera.position, g(t.position), g(t.normal)), o = t.pointType === u.PlaneTag ? I(t.position) : g(t.normal), r = this.getTagConfig(t).tag3DConfig, n = this.css3DRenderPlugin.create3DDomContainer(i, r);
-        if (!n)
+        const s = t.stickType === "Plane" ? t.position : M(this.five.camera.position, g(t.position), g(t.normal)), o = t.stickType === "Plane" ? I(t.position) : g(t.normal), n = this.getTagConfig(t).tag3DConfig, r = this.css3DRenderPlugin.create3DDomContainer(s, n);
+        if (!r)
           return;
-        this.store.css3DRenderDisposer.set(t.id, n.dispose), t.tag3DContentSvelte = {
-          svelteApp: new B({
-            target: n.container,
+        this.store.css3DRenderDisposer.set(t.id, r.dispose), t.tag3DContentSvelte = {
+          svelteApp: new L({
+            target: r.container,
             props: {
               tag: t,
               hooks: this.hooks,
@@ -347,7 +436,7 @@ class ae extends $ {
               temporaryState: this.temporaryState
             }
           }),
-          domContainer: n,
+          domContainer: r,
           initialNormal: o,
           currentNormal: o
         };
@@ -360,17 +449,18 @@ class ae extends $ {
     this.store.css3DRenderDisposer = /* @__PURE__ */ new Map();
   }
   checkPanelTag() {
-    this.tags.forEach((e) => {
+    this.filter2DPointTag().forEach((e) => {
       var t;
-      e.dimensionType === y.Two && e.pointType === u.PointTag && ((t = e.tag3DContentSvelte) == null || t.domContainer.dispose(), e.tag3DContentSvelte = void 0);
+      (t = e.tag3DContentSvelte) == null || t.domContainer.dispose(), e.tag3DContentSvelte = void 0;
     });
     for (const [e, t] of this.store.css3DRenderDisposer) {
-      const s = this.getTagById(e);
-      (!s || s.dimensionType !== y.Three) && (t == null || t(), this.store.css3DRenderDisposer.delete(e));
+      const i = this.getTagById(e);
+      (!i || i.stickType === "2DPoint") && (t == null || t(), this.store.css3DRenderDisposer.delete(e));
     }
   }
 }
 export {
-  ae as PanoTagPluginController,
-  re as pluginFlag
+  wt as PanoTagPluginController,
+  wt as default,
+  Pt as pluginFlag
 };

package/libs/PanoTagPlugin/index.d.ts

@@ -1,7 +1,7 @@
 import type { FivePlugin } from '@realsee/five';
 import PanoTagPluginController from './controller';
 export * from './controller';
-export * from './typings/tag';
+export * from './typings';
 export declare type PanoTagPluginExportInterface = InstanceType<typeof PanoTagPluginController>;
 export declare type PanoTagPluginParamsInterface = ConstructorParameters<typeof PanoTagPluginController>[1];
 export declare const PanoTagPlugin: FivePlugin<PanoTagPluginParamsInterface, PanoTagPluginExportInterface>;