@realsee/dnalogel 2.15.0-alpha.2 → 2.15.1-alpha.0

package/libs/PanoTagPlugin/Components/Common/MediaItem.js

@@ -1,112 +1,112 @@
-import { SvelteComponent as q, init as A, safe_not_equal as J, append_styles as R, empty as X, insert as k, noop as B, detach as y, getContext as S, onMount as D, element as g, attr as a, binding_callbacks as G, space as K, set_style as j, toggle_class as v, append as U, listen as b, src_url_equal as I, run_all as Q } from "../../../vendor/svelte/internal/index.js";
+import { SvelteComponent as q, init as A, safe_not_equal as J, append_styles as R, empty as X, insert as k, noop as B, detach as y, getContext as S, onMount as D, element as g, attr as a, binding_callbacks as G, space as K, set_style as j, toggle_class as v, append as U, listen as I, src_url_equal as P, run_all as Q } from "../../../vendor/svelte/internal/index.js";
 import { Image_Play_Icon_With_Text as Y, Image_Play_Icon as Z } from "../../Assets/Icon.js";
-function x(o) {
-  R(o, "svelte-159ski6", ".media-item.svelte-159ski6.svelte-159ski6{position:relative;height:100%}.media-content.svelte-159ski6.svelte-159ski6{position:relative;pointer-events:auto;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:inherit;object-fit:inherit}.media-content.showPlayButton.svelte-159ski6.svelte-159ski6{pointer-events:none}.video-icon.svelte-159ski6.svelte-159ski6{width:12.5rem;height:6.25rem;max-width:60%;max-height:60%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.video-play-button-container.svelte-159ski6.svelte-159ski6{display:none;position:absolute;width:100%;height:100%;top:0;left:0;transform:translate3d(0, 0, 0)}.video-play-button-container.showPlayButton.svelte-159ski6.svelte-159ski6{pointer-events:none;display:block}.video-icon.svelte-159ski6.svelte-159ski6{pointer-events:auto}.video-icon.large.svelte-159ski6.svelte-159ski6{width:12.5rem;height:6.25rem}.video-icon.small.svelte-159ski6.svelte-159ski6{width:1.75rem;height:1.75rem}.video-icon.svelte-159ski6 .video-icon-img.svelte-159ski6{width:100%;height:100%;background-position:center center;background-size:contain;background-repeat:no-repeat}.video-icon.svelte-159ski6 .video-icon-img.canPlay.svelte-159ski6{cursor:pointer}");
+function x(l) {
+  R(l, "svelte-159ski6", ".media-item.svelte-159ski6.svelte-159ski6{position:relative;height:100%}.media-content.svelte-159ski6.svelte-159ski6{position:relative;pointer-events:auto;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:inherit;object-fit:inherit}.media-content.showPlayButton.svelte-159ski6.svelte-159ski6{pointer-events:none}.video-icon.svelte-159ski6.svelte-159ski6{width:12.5rem;height:6.25rem;max-width:60%;max-height:60%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.video-play-button-container.svelte-159ski6.svelte-159ski6{display:none;position:absolute;width:100%;height:100%;top:0;left:0;transform:translate3d(0, 0, 0)}.video-play-button-container.showPlayButton.svelte-159ski6.svelte-159ski6{pointer-events:none;display:block}.video-icon.svelte-159ski6.svelte-159ski6{pointer-events:auto}.video-icon.large.svelte-159ski6.svelte-159ski6{width:12.5rem;height:6.25rem}.video-icon.small.svelte-159ski6.svelte-159ski6{width:1.75rem;height:1.75rem}.video-icon.svelte-159ski6 .video-icon-img.svelte-159ski6{width:100%;height:100%;background-position:center center;background-size:contain;background-repeat:no-repeat}.video-icon.svelte-159ski6 .video-icon-img.canPlay.svelte-159ski6{cursor:pointer}");
 }
-function L(o) {
+function L(l) {
   let e;
-  function i(l, r) {
-    if (l[2].type === "Image")
+  function i(o, r) {
+    if (o[2].type === "Image")
       return ee;
-    if (l[2].type === "Video")
+    if (o[2].type === "Video")
       return $;
   }
-  let t = i(o), n = t && t(o);
+  let t = i(l), n = t && t(l);
   return {
     c() {
       e = g("div"), n && n.c(), a(e, "class", "media-item svelte-159ski6"), a(e, "draggable", "false");
     },
-    m(l, r) {
-      k(l, e, r), n && n.m(e, null);
+    m(o, r) {
+      k(o, e, r), n && n.m(e, null);
     },
-    p(l, r) {
-      t === (t = i(l)) && n ? n.p(l, r) : (n && n.d(1), n = t && t(l), n && (n.c(), n.m(e, null)));
+    p(o, r) {
+      t === (t = i(o)) && n ? n.p(o, r) : (n && n.d(1), n = t && t(o), n && (n.c(), n.m(e, null)));
     },
-    d(l) {
-      l && y(e), n && n.d();
+    d(o) {
+      o && y(e), n && n.d();
     }
   };
 }
-function $(o) {
-  let e, i, t, n, l, r;
+function $(l) {
+  let e, i, t, n, o, r;
   function c(d, m) {
     return d[7] && d[2].videoCoverUrl ? ie : te;
   }
-  let u = c(o), f = u(o);
+  let u = c(l), f = u(l);
   return {
     c() {
-      f.c(), e = K(), i = g("div"), t = g("div"), n = g("div"), a(n, "class", "video-icon-img svelte-159ski6"), j(n, "background-image", "url(" + o[20]() + ")"), v(n, "canPlay", o[5]), a(t, "class", "video-icon svelte-159ski6"), v(t, "large", o[4] === "large"), v(t, "small", o[4] === "small"), a(i, "class", "video-play-button-container svelte-159ski6"), v(i, "showPlayButton", o[9]);
+      f.c(), e = K(), i = g("div"), t = g("div"), n = g("div"), a(n, "class", "video-icon-img svelte-159ski6"), j(n, "background-image", "url(" + l[20]() + ")"), v(n, "canPlay", l[5]), a(t, "class", "video-icon svelte-159ski6"), v(t, "large", l[4] === "large"), v(t, "small", l[4] === "small"), a(i, "class", "video-play-button-container svelte-159ski6"), v(i, "showPlayButton", l[10]);
     },
     m(d, m) {
-      f.m(d, m), k(d, e, m), k(d, i, m), U(i, t), U(t, n), l || (r = b(n, "click", o[21]), l = !0);
+      f.m(d, m), k(d, e, m), k(d, i, m), U(i, t), U(t, n), o || (r = I(n, "click", l[21]), o = !0);
     },
     p(d, m) {
-      u === (u = c(d)) && f ? f.p(d, m) : (f.d(1), f = u(d), f && (f.c(), f.m(e.parentNode, e))), m & 8 && j(n, "background-image", "url(" + d[20]() + ")"), m & 32 && v(n, "canPlay", d[5]), m & 16 && v(t, "large", d[4] === "large"), m & 16 && v(t, "small", d[4] === "small"), m & 512 && v(i, "showPlayButton", d[9]);
+      u === (u = c(d)) && f ? f.p(d, m) : (f.d(1), f = u(d), f && (f.c(), f.m(e.parentNode, e))), m & 8 && j(n, "background-image", "url(" + d[20]() + ")"), m & 32 && v(n, "canPlay", d[5]), m & 16 && v(t, "large", d[4] === "large"), m & 16 && v(t, "small", d[4] === "small"), m & 1024 && v(i, "showPlayButton", d[10]);
     },
     d(d) {
-      f.d(d), d && y(e), d && y(i), l = !1, r();
+      f.d(d), d && y(e), d && y(i), o = !1, r();
     }
   };
 }
-function ee(o) {
+function ee(l) {
   let e, i, t, n;
   return {
     c() {
-      e = g("img"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${o[6]};`), I(e.src, t = o[2].url) || a(e, "src", t), a(e, "alt", n = o[2].name), a(e, "draggable", !1);
+      e = g("img"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${l[6]};`), P(e.src, t = l[2].url) || a(e, "src", t), a(e, "alt", n = l[2].name), a(e, "draggable", !1);
     },
-    m(l, r) {
-      k(l, e, r);
+    m(o, r) {
+      k(o, e, r);
     },
-    p(l, r) {
-      r & 64 && i !== (i = `object-fit: ${l[6]};`) && a(e, "style", i), r & 4 && !I(e.src, t = l[2].url) && a(e, "src", t), r & 4 && n !== (n = l[2].name) && a(e, "alt", n);
+    p(o, r) {
+      r & 64 && i !== (i = `object-fit: ${o[6]};`) && a(e, "style", i), r & 4 && !P(e.src, t = o[2].url) && a(e, "src", t), r & 4 && n !== (n = o[2].name) && a(e, "alt", n);
     },
-    d(l) {
-      l && y(e);
+    d(o) {
+      o && y(e);
     }
   };
 }
-function te(o) {
-  let e, i, t, n, l, r, c;
+function te(l) {
+  let e, i, t, n, o, r, c;
   return {
     c() {
-      e = g("video"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${o[6]};`), I(e.src, t = o[2].videoCoverUrl ? o[2].url : o[2].url + "#t=0.1") || a(e, "src", t), a(e, "poster", n = o[2].videoCoverUrl), a(e, "preload", l = o[2].videoCoverUrl ? "none" : "auto"), a(e, "disablepictureinpicture", ""), e.playsInline = !0, a(e, "paused", ""), e.muted = !0, a(e, "draggable", !1), e.loop = !1, a(e, "crossorigin", ""), e.controls = !1, v(e, "showPlayButton", o[9]);
+      e = g("video"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${l[6]};`), P(e.src, t = l[2].videoCoverUrl ? l[2].url : l[2].url + "#t=0.1") || a(e, "src", t), a(e, "poster", n = l[2].videoCoverUrl), a(e, "preload", o = l[2].videoCoverUrl ? "none" : "auto"), a(e, "disablepictureinpicture", ""), e.playsInline = !0, a(e, "paused", ""), e.muted = !0, a(e, "draggable", !1), e.loop = !1, a(e, "crossorigin", ""), e.controls = !1, v(e, "showPlayButton", l[10]);
     },
     m(u, f) {
-      k(u, e, f), o[19](e), r || (c = [
-        b(e, "play", o[14]),
-        b(e, "pause", o[15]),
-        b(e, "error", o[16]),
-        b(e, "ended", o[17]),
-        b(e, "click", o[18])
+      k(u, e, f), l[19](e), r || (c = [
+        I(e, "play", l[14]),
+        I(e, "pause", l[15]),
+        I(e, "error", l[16]),
+        I(e, "ended", l[17]),
+        I(e, "click", l[18])
       ], r = !0);
     },
     p(u, f) {
-      f & 64 && i !== (i = `object-fit: ${u[6]};`) && a(e, "style", i), f & 4 && !I(e.src, t = u[2].videoCoverUrl ? u[2].url : u[2].url + "#t=0.1") && a(e, "src", t), f & 4 && n !== (n = u[2].videoCoverUrl) && a(e, "poster", n), f & 4 && l !== (l = u[2].videoCoverUrl ? "none" : "auto") && a(e, "preload", l), f & 512 && v(e, "showPlayButton", u[9]);
+      f & 64 && i !== (i = `object-fit: ${u[6]};`) && a(e, "style", i), f & 4 && !P(e.src, t = u[2].videoCoverUrl ? u[2].url : u[2].url + "#t=0.1") && a(e, "src", t), f & 4 && n !== (n = u[2].videoCoverUrl) && a(e, "poster", n), f & 4 && o !== (o = u[2].videoCoverUrl ? "none" : "auto") && a(e, "preload", o), f & 1024 && v(e, "showPlayButton", u[10]);
     },
     d(u) {
-      u && y(e), o[19](null), r = !1, Q(c);
+      u && y(e), l[19](null), r = !1, Q(c);
     }
   };
 }
-function ie(o) {
+function ie(l) {
   let e, i, t, n;
   return {
     c() {
-      e = g("img"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${o[6]};`), I(e.src, t = o[2].videoCoverUrl) || a(e, "src", t), a(e, "alt", n = o[2].name), a(e, "draggable", !1);
+      e = g("img"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${l[6]};`), P(e.src, t = l[2].videoCoverUrl) || a(e, "src", t), a(e, "alt", n = l[2].name), a(e, "draggable", !1);
     },
-    m(l, r) {
-      k(l, e, r);
+    m(o, r) {
+      k(o, e, r);
     },
-    p(l, r) {
-      r & 64 && i !== (i = `object-fit: ${l[6]};`) && a(e, "style", i), r & 4 && !I(e.src, t = l[2].videoCoverUrl) && a(e, "src", t), r & 4 && n !== (n = l[2].name) && a(e, "alt", n);
+    p(o, r) {
+      r & 64 && i !== (i = `object-fit: ${o[6]};`) && a(e, "style", i), r & 4 && !P(e.src, t = o[2].videoCoverUrl) && a(e, "src", t), r & 4 && n !== (n = o[2].name) && a(e, "alt", n);
     },
-    d(l) {
-      l && y(e);
+    d(o) {
+      o && y(e);
     }
   };
 }
-function le(o) {
-  let e, i = o[2] && L(o);
+function oe(l) {
+  let e, i = l[2] && L(l);
   return {
     c() {
       i && i.c(), e = X();
@@ -124,13 +124,13 @@ function le(o) {
     }
   };
 }
-function oe(o, e, i) {
-  let t, n, { mediaInstance: l = { videoInstance: void 0, paused: !0 } } = e, { tag: r } = e, { media: c } = e, { playButtonIfNeed: u = "withoutText" } = e, { playButtonSizeIfNeed: f = "small" } = e, { canPlay: d = !0 } = e, { objectFit: m = "fill" } = e, { disableVideoIfHavePoster: C = !1 } = e, p = !0, P = !1;
+function le(l, e, i) {
+  let t, n, { mediaInstance: o = { videoInstance: void 0, paused: !0 } } = e, { tag: r } = e, { media: c } = e, { playButtonIfNeed: u = "withoutText" } = e, { playButtonSizeIfNeed: f = "small" } = e, { canPlay: d = !0 } = e, { objectFit: m = "fill" } = e, { disableVideoIfHavePoster: C = !1 } = e, p = !0, b = !1;
   function N() {
-    i(12, P = (c == null ? void 0 : c.type) === "Video" && Boolean(c.videoCoverUrl));
+    i(8, b = (c == null ? void 0 : c.type) === "Video" && Boolean(c.videoCoverUrl));
   }
   const w = S("mediaStore"), h = S("hooks"), _ = () => {
-    P || !t || (i(8, t.muted = !0, t), t.play(), t.pause(), i(8, t.muted = !1, t), i(12, P = !0));
+    console.debug("loadPoster"), !b && (!t || (i(9, t.muted = !0, t), t.play(), t.pause(), i(9, t.muted = !1, t), i(8, b = !0), console.debug("loadPoster end")));
   };
   h.on("loadVideoFirstFrame", _), D(() => {
     w.subscribe(({ currentMediaElement: s }) => {
@@ -138,28 +138,28 @@ function oe(o, e, i) {
     });
   });
   const V = (s) => {
-    i(9, p = !1), i(0, l.paused = !1, l), t && w.set({ currentMediaElement: t }), h.emit("playStateChange", {
+    i(10, p = !1), i(0, o.paused = !1, o), i(8, b = !0), t && w.set({ currentMediaElement: t }), h.emit("playStateChange", {
       event: s,
       state: "playing",
       tag: r,
       mediaInstance: t
     });
   }, E = (s) => {
-    i(9, p = !0), i(0, l.paused = !0, l), h.emit("playStateChange", {
+    i(10, p = !0), i(0, o.paused = !0, o), h.emit("playStateChange", {
       event: s,
       state: "paused",
       tag: r,
       mediaInstance: t
     });
   }, z = (s) => {
-    i(9, p = !0), i(0, l.paused = !0, l), h.emit("playStateChange", {
+    i(10, p = !0), i(0, o.paused = !0, o), h.emit("playStateChange", {
       event: s,
       state: "paused",
       tag: r,
       mediaInstance: t
     });
   }, F = (s) => {
-    i(9, p = !0), i(0, l.paused = !0, l), h.emit("playStateChange", {
+    i(10, p = !0), i(0, o.paused = !0, o), h.emit("playStateChange", {
       event: s,
       state: "paused",
       tag: r,
@@ -170,21 +170,21 @@ function oe(o, e, i) {
   };
   function W(s) {
     G[s ? "unshift" : "push"](() => {
-      l.videoInstance = s, i(0, l);
+      o.videoInstance = s, i(0, o);
     });
   }
   const H = () => u === "withText" ? Y : u === "withoutText" ? Z : u, T = (s) => {
-    !d || t && (i(8, t.muted = !1, t), t.play());
+    !d || t && (i(9, t.muted = !1, t), t.play());
   };
-  return o.$$set = (s) => {
-    "mediaInstance" in s && i(0, l = s.mediaInstance), "tag" in s && i(1, r = s.tag), "media" in s && i(2, c = s.media), "playButtonIfNeed" in s && i(3, u = s.playButtonIfNeed), "playButtonSizeIfNeed" in s && i(4, f = s.playButtonSizeIfNeed), "canPlay" in s && i(5, d = s.canPlay), "objectFit" in s && i(6, m = s.objectFit), "disableVideoIfHavePoster" in s && i(7, C = s.disableVideoIfHavePoster);
-  }, o.$$.update = () => {
-    if (o.$$.dirty & 1 && i(8, t = l.videoInstance), o.$$.dirty & 4 && i(13, n = c == null ? void 0 : c.url), o.$$.dirty & 8192 && Boolean(n) && N(), o.$$.dirty & 256 && t && i(9, p = t.paused), o.$$.dirty & 4356 && (c == null ? void 0 : c.type) === "Video" && !P) {
+  return l.$$set = (s) => {
+    "mediaInstance" in s && i(0, o = s.mediaInstance), "tag" in s && i(1, r = s.tag), "media" in s && i(2, c = s.media), "playButtonIfNeed" in s && i(3, u = s.playButtonIfNeed), "playButtonSizeIfNeed" in s && i(4, f = s.playButtonSizeIfNeed), "canPlay" in s && i(5, d = s.canPlay), "objectFit" in s && i(6, m = s.objectFit), "disableVideoIfHavePoster" in s && i(7, C = s.disableVideoIfHavePoster);
+  }, l.$$.update = () => {
+    if (l.$$.dirty & 1 && i(9, t = o.videoInstance), l.$$.dirty & 4 && i(13, n = c == null ? void 0 : c.url), l.$$.dirty & 8192 && Boolean(n) && N(), l.$$.dirty & 512 && t && i(10, p = t.paused), l.$$.dirty & 772 && (c == null ? void 0 : c.type) === "Video" && !b) {
       const s = navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1, M = navigator.userAgent.toLowerCase().indexOf("iphone") !== -1 && s;
       t && M && t.paused && (document.removeEventListener("WeixinJSBridgeReady", _), document.removeEventListener("touchstart", _), document.removeEventListener("click", _), document.addEventListener("WeixinJSBridgeReady", _), document.addEventListener("touchstart", _), document.addEventListener("click", _));
     }
   }, [
-    l,
+    o,
     r,
     c,
     u,
@@ -192,11 +192,11 @@ function oe(o, e, i) {
     d,
     m,
     C,
+    b,
     t,
     p,
     w,
     h,
-    P,
     n,
     V,
     E,
@@ -213,8 +213,8 @@ class re extends q {
     super(), A(
       this,
       e,
-      oe,
       le,
+      oe,
       J,
       {
         mediaInstance: 0,

package/libs/PanoTagPlugin/controller/TagRender.js

@@ -1,7 +1,7 @@
 var j = Object.defineProperty;
 var w = (l, p, t) => p in l ? j(l, p, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[p] = t;
-var d = (l, p, t) => (w(l, typeof p != "symbol" ? p + "" : p, t), t);
-var D = (l, p, t) => new Promise((e, i) => {
+var c = (l, p, t) => (w(l, typeof p != "symbol" ? p + "" : p, t), t);
+var b = (l, p, t) => new Promise((e, i) => {
   var o = (s) => {
     try {
       a(t.next(s));
@@ -18,16 +18,16 @@ var D = (l, p, t) => new Promise((e, i) => {
   a((t = t.apply(l, p)).next());
 });
 import { TagComputer as O } from "./TagComputer.js";
-import { Group as P, Quaternion as x, Vector3 as f, Matrix4 as T } from "three";
+import { Group as P, Quaternion as x, Vector3 as D, Matrix4 as T } from "three";
 import G from "../Components/TagContainer.js";
 import k from "../Components/Tag/index.js";
-import { arrayPositionToVector3 as b } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { arrayPositionToVector3 as S } 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 S } from "../utils/tag/tagCheck.js";
+import { isMediaModelTag as C } from "../utils/tag/tagCheck.js";
 import { CSS3DRenderPlugin as E } from "../../CSS3DRenderPlugin/index.js";
-import { loadGLTF as V } from "../../shared-utils/three/GLTFLoader.js";
+import { loadGLTF as I } from "../../shared-utils/three/GLTFLoader.js";
 import "@realsee/five";
 import "../utils/tagPosition.js";
 import "../../shared-utils/three/loadTexture.js";
@@ -135,18 +135,18 @@ import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 class Le extends O {
   constructor(t) {
     super(t);
-    d(this, "group", new P());
-    d(this, "imagePlaneGroup", new P());
-    d(this, "gltfObjectGroup", new P());
-    d(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
-    d(this, "temporaryState", { visible: !0 });
-    d(this, "TagContainerSvelte");
-    d(this, "loadModel", (t) => D(this, null, function* () {
+    c(this, "group", new P());
+    c(this, "imagePlaneGroup", new P());
+    c(this, "gltfObjectGroup", new P());
+    c(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    c(this, "temporaryState", { visible: !0 });
+    c(this, "TagContainerSvelte");
+    c(this, "loadModel", (t) => b(this, null, function* () {
       var s;
       const e = t.data.modelUrl;
       if (!e)
         return;
-      const i = V(e).then((r) => Object.assign(r.scene, { customID: t.id, isTagModel: !0 }));
+      const i = I(e).then((r) => Object.assign(r.scene, { customID: t.id, isTagModel: !0 }));
       t.model = { promise: i };
       const o = yield i;
       if (((s = t.model) == null ? void 0 : s.promise) !== i || (t.model.object = o, !this.tags.includes(t)))
@@ -155,13 +155,13 @@ class Le extends O {
       const a = this.gltfObjectGroup.children.find((r) => r.customID === t.id);
       if (a && this.gltfObjectGroup.remove(a), this.getRenderType(t) === "Mesh") {
         if (!t.imagePlane) {
-          const r = t.data.mediaPosition.map(b);
-          t.imagePlane = new R(t.data.mediaData[0].url, t.data.mediaPosition.map(b));
-          const m = new f().addVectors(r[0], r[2]).divideScalar(2);
+          const r = t.data.mediaPosition.map(S);
+          t.imagePlane = new R(t.data.mediaData[0].url, t.data.mediaPosition.map(S));
+          const m = new D().addVectors(r[0], r[2]).divideScalar(2);
           t.imagePlane.position.copy(m), o.add(t.imagePlane);
         }
       } else
-        this.updateTagCss3DObjectMatrix(t, o);
+        o.updateTagCss3DObjectMatrix = () => this.updateTagCss3DObjectMatrix(t, o), o.updateTagCss3DObjectMatrix();
       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);
@@ -181,7 +181,7 @@ class Le extends O {
       const i = (n = e.data.mediaData[0]) == null ? void 0 : n.url;
       if (!i || (e.imagePlane && (e.imagePlane.visible = (s = (a = e.state) == null ? void 0 : a.visible) != null ? s : !0), ((r = e.imagePlane) == null ? void 0 : r.imageSrc) === i))
         return;
-      const o = e.position.map(b);
+      const o = e.position.map(S);
       e.imagePlane = new R(i, o), e.imagePlane.setMatrixByCornerPoints(o), this.imagePlaneGroup.add(e.imagePlane);
     });
   }
@@ -189,7 +189,7 @@ class Le extends O {
     this.sort([...this.filterCSS3DTag]).forEach((e) => {
       var i, o;
       if (e.tag3DContentSvelte) {
-        const { svelteApp: n, domContainer: a, initialNormal: s, currentNormal: r } = e.tag3DContentSvelte;
+        const { svelteApp: n, css3DInstance: a, initialNormal: s, currentNormal: r } = e.tag3DContentSvelte;
         if (n.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !s.equals(r)) {
           const m = new x().setFromUnitVectors(s, r);
           a.css3DObject.setRotationFromQuaternion(m);
@@ -209,41 +209,47 @@ class Le extends O {
         const r = (o = this.getTagConfig(e).tag3DConfig) != null ? o : {};
         if (this.getRenderType(e) === "BehindDom") {
           r.mode = "behind", r.container = document.createElement("div");
-          const h = "black";
-          r.container.style.backgroundColor = h, r.container.style.border = `3px solid ${h}`, this.css3DRenderPlugin.hooks.on("render", () => {
-            var u;
+          const g = "black";
+          r.container.style.backgroundColor = g, r.container.style.border = `3px solid ${g}`, this.css3DRenderPlugin.hooks.on("render", () => {
+            var h;
             if (m.css3DObject.opacityMesh) {
-              const g = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (c) => {
-                this.hooks.emit("click", { event: c, target: "TagContent", tag: e });
+              const d = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (f) => {
+                this.hooks.emit("click", { event: f, target: "TagContent", tag: e });
               });
-              (u = this.store.css3DRenderDisposer.get(e.id)) == null || u.push(g);
+              (h = this.store.css3DRenderDisposer.get(e.id)) == null || h.push(d);
             }
           });
         }
         const m = this.css3DRenderPlugin.create3DDomContainer(n, r);
         if (!m)
           return;
-        this.store.css3DRenderDisposer.set(e.id, [m.dispose]), e.tag3DContentSvelte = {
-          svelteApp: new k({
-            target: m.container,
-            props: {
-              tag: e,
-              hooks: this.hooks,
-              state: this.state,
-              mediaStore: this.mediaStore,
-              temporaryState: this.temporaryState
-            }
-          }),
+        this.store.css3DRenderDisposer.set(e.id, [m.dispose]);
+        const u = new k({
+          target: m.container,
+          props: {
+            tag: e,
+            hooks: this.hooks,
+            state: this.state,
+            mediaStore: this.mediaStore,
+            temporaryState: this.temporaryState
+          }
+        });
+        e.tag3DContentSvelte = {
+          svelteApp: u,
           domContainer: m,
+          css3DInstance: m,
           initialNormal: a,
-          currentNormal: a
+          currentNormal: a,
+          dispose: () => {
+            u.$destroy(), m.dispose();
+          }
         };
       }
     }), this.clearUnusedPanelTag();
   }
   updateRenderModelTag() {
     const t = (i) => !this.enabledModelTagSet.has(i.customID);
-    this.gltfObjectGroup.remove(...this.gltfObjectGroup.children.filter(t)), this.tags.filter(S).forEach((i) => {
+    this.gltfObjectGroup.remove(...this.gltfObjectGroup.children.filter(t)), this.tags.filter(C).forEach((i) => {
       var o;
       (o = i.model) == null || o.promise.then((n) => {
         n.visible = this.getCurrentVisibleState(i);
@@ -257,20 +263,20 @@ class Le extends O {
     });
   }
   updateTagCss3DObjectMatrix(t, e) {
-    var C, v, M, y;
-    const i = (M = (v = (C = t.mergedConfig) == null ? void 0 : C.tag3DConfig) == null ? void 0 : v.ratio) != null ? M : 216e-5, o = (y = t.tag3DContentSvelte) == null ? void 0 : y.domContainer.css3DObject;
+    var f, v, M, y;
+    const i = (M = (v = (f = t.mergedConfig) == null ? void 0 : f.tag3DConfig) == null ? void 0 : v.ratio) != null ? M : 216e-5, o = (y = t.tag3DContentSvelte) == null ? void 0 : y.css3DInstance.css3DObject;
     if (!o)
       return;
-    const n = S(t) ? t.data.mediaPosition : t.position;
+    const n = C(t) ? t.data.mediaPosition : t.position;
     e.updateWorldMatrix(!1, !1);
-    const a = e.matrixWorld, s = new f().fromArray(n[0]), r = new f().fromArray(n[2]), m = A(s, r).add(new f(0, 0, 5e-4)), h = new T().setPosition(m), u = new T().makeScale(i, i, i), g = new T().multiply(a).multiply(h).multiply(u);
-    g.decompose(o.position, o.quaternion, o.scale);
-    const c = o.opacityMesh;
-    c && g.decompose(c.position, c.quaternion, c.scale);
+    const a = e.matrixWorld, s = new D().fromArray(n[0]), r = new D().fromArray(n[2]), m = A(s, r).add(new D(0, 0, 5e-4)), u = new T().setPosition(m), g = new T().makeScale(i, i, i), h = new T().multiply(a).multiply(u).multiply(g);
+    h.decompose(o.position, o.quaternion, o.scale);
+    const d = o.opacityMesh;
+    d && h.decompose(d.position, d.quaternion, d.scale);
   }
   addMediaModelTag(t) {
-    return D(this, null, function* () {
-      const e = t.filter(S).map((i) => this.loadModel(i));
+    return b(this, null, function* () {
+      const e = t.filter(C).map((i) => this.loadModel(i));
       yield Promise.all(e), this.setModelMedialVisible(), this.updateRenderAllTags();
     });
   }
@@ -297,7 +303,7 @@ class Le extends O {
       withAnimation: this.store.visibleWithAnimation
     }), this.filterCSS3DTag.forEach((e) => {
       var i, o, n, a, s;
-      (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), (s = e.tag3DContentSvelte) == null || s.svelteApp.$set({
+      (a = (o = (i = e.tag3DContentSvelte) == null ? void 0 : i.css3DInstance) == null ? void 0 : o.css3DObject) == null || a.setVisible((this.state.visible && ((n = e.state) == null ? void 0 : n.visible)) !== !1), (s = e.tag3DContentSvelte) == null || s.svelteApp.$set({
         state: this.state,
         temporaryState: this.temporaryState,
         withAnimation: this.store.visibleWithAnimation
@@ -312,7 +318,7 @@ class Le extends O {
   clearUnusedPanelTag() {
     this.filter2DPointTag.forEach((t) => {
       var e;
-      (e = t.tag3DContentSvelte) == null || e.domContainer.dispose(), t.tag3DContentSvelte = void 0;
+      (e = t.tag3DContentSvelte) == null || e.css3DInstance.dispose(), t.tag3DContentSvelte = void 0;
     });
     for (const [t, e] of this.store.css3DRenderDisposer) {
       const i = this.getTagById(t);

package/libs/PanoTagPlugin/controller/index.js

@@ -27,10 +27,10 @@ var f = (d, a, e) => new Promise((t, i) => {
   }, r = (n) => n.done ? t(n.value) : Promise.resolve(n.value).then(s, o);
   r((e = e.apply(d, a)).next());
 });
-import { Subscribe as w } from "@realsee/five";
+import { Subscribe as M } from "@realsee/five";
 import c from "object-assign-deep";
 import { arrayPositionToVector3 as C } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
-import { addDebugPoints as M } from "../utils/addDebugPoints.js";
+import { addDebugPoints as w } from "../utils/addDebugPoints.js";
 import "three";
 import "@realsee/five/gltf-loader";
 import "../../shared-utils/three/loadTexture.js";
@@ -187,7 +187,7 @@ class Zt extends k {
       const i = yield this.addTag(e.tagList, t);
       if (this.debug)
         try {
-          M(this.five, this.tags);
+          w(this.five, this.tags);
         } catch (r) {
           console.error(r);
         }
@@ -203,7 +203,7 @@ class Zt extends k {
             visible: void 0,
             unfolded: !this.can("fold", o)
           }, r.initialState),
-          hooks: new w(),
+          hooks: new M(),
           mergedConfig: r,
           unfold: () => this.changeUnfoldedById(o.id, !0),
           fold: () => this.changeUnfoldedById(o.id, !1),
@@ -323,13 +323,16 @@ class Zt extends k {
     this.pauseCurrentMedia(), this.state.visible = !1, this.group.visible = !1, this.updateTagContainerVisible(), this.updateTagModelVisible(), 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.five.scene.children.includes(this.group) || this.five.scene.add(this.group), this.group.traverse((e) => {
+      var t;
+      (t = e == null ? void 0 : e.updateTagCss3DObjectMatrix) == null || t.call(e);
+    }), this.updateRenderAllTags(), this.five.needsRender = !0;
   }
   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.filterCSS3DTag.forEach((s) => {
       var o;
-      (o = s.tag3DContentSvelte) == null || o.svelteApp.$destroy(), s.tag3DContentSvelte = void 0;
+      (o = s.tag3DContentSvelte) == null || o.dispose(), s.tag3DContentSvelte = void 0;
     }), this.five.needsRender = !0;
   }
   addEventListener() {
@@ -414,7 +417,7 @@ class Zt extends k {
   }
   changeTagMode(e, t) {
     var i, s, o, r, n, h;
-    ((i = this.getTagConfig(e)) == null ? void 0 : i.renderType) !== "Mesh" && ((r = (o = (s = e.tag3DContentSvelte) == null ? void 0 : s.domContainer) == null ? void 0 : o.css3DObject) == null ? void 0 : r.mode) !== t && ((n = e.config) != null && n.tag3DConfig ? e.config.tag3DConfig.mode = t : e.config ? e.config.tag3DConfig = { mode: t } : e.config = { tag3DConfig: { mode: t } }, (h = this.store.css3DRenderDisposer.get(e.id)) == null || h.forEach((g) => g == null ? void 0 : g()), e.tag3DContentSvelte = void 0);
+    ((i = this.getTagConfig(e)) == null ? void 0 : i.renderType) !== "Mesh" && ((r = (o = (s = e.tag3DContentSvelte) == null ? void 0 : s.css3DInstance) == null ? void 0 : o.css3DObject) == null ? void 0 : r.mode) !== t && ((n = e.config) != null && n.tag3DConfig ? e.config.tag3DConfig.mode = t : e.config ? e.config.tag3DConfig = { mode: t } : e.config = { tag3DConfig: { mode: t } }, (h = this.store.css3DRenderDisposer.get(e.id)) == null || h.forEach((g) => g == null ? void 0 : g()), e.tag3DContentSvelte = void 0);
   }
 }
 export {

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

@@ -89,9 +89,12 @@ export declare type TagElement<C extends TagContentType = TagContentType, S exte
     };
     tag3DContentSvelte: {
         svelteApp: TagContentSvelte;
+        /** @deprecated rename to css3DInstance */
         domContainer: NonNullable<Create3DDomContainerReturnType>;
+        css3DInstance: NonNullable<Create3DDomContainerReturnType>;
         initialNormal: Vector3;
         currentNormal: Vector3;
+        dispose: () => void;
     };
     imagePlane: ImagePlane;
     model: {

package/libs/PanoTagPlugin/typings/tag/Utils.d.ts

@@ -42,6 +42,7 @@ export interface TagStyle {
 export declare type TagGLTFObject = GLTFObject & {
     customID: number | string;
     isTagModel: boolean;
+    updateTagCss3DObjectMatrix?: () => void;
 };
 export interface TagObjectGroup extends Group {
     children: Array<TagGLTFObjectGroup>;

package/libs/base/BasePlugin.js

@@ -4,7 +4,7 @@ var s = (e, r, t) => (a(e, typeof r != "symbol" ? r + "" : r, t), t);
 import { Subscribe as c } from "../shared-utils/Subscribe.js";
 class o {
   constructor(r, t) {
-    s(this, "VERSION", "2.15.0-alpha.2");
+    s(this, "VERSION", "2.15.1-alpha.0");
     s(this, "five");
     s(this, "hooks", new c());
     s(this, "staticPrefix", "//vrlab-static.ljcdn.com");