@realsee/dnalogel 2.15.0 → 2.15.1-alpha.0

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

@@ -1,4 +1,4 @@
-import { SvelteComponent as ae, init as le, safe_not_equal as oe, append_styles as re, empty as U, insert as q, transition_in as c, transition_out as p, check_outros as D, detach as w, getContext as F, onMount as me, onDestroy as ue, element as G, attr as H, toggle_class as I, append as se, group_outros as M, add_render_callback as fe, create_in_transition as de, identity as J, create_out_transition as ce, binding_callbacks as E, assign as W, bind as X, create_component as S, mount_component as N, get_spread_update as Y, get_spread_object as Z, add_flush_callback as x, destroy_component as j, destroy_each as _e } from "../../../vendor/svelte/internal/index.js";
+import { SvelteComponent as ae, init as le, safe_not_equal as oe, append_styles as re, empty as U, insert as D, transition_in as c, transition_out as p, check_outros as q, detach as w, getContext as F, onMount as me, onDestroy as se, element as G, attr as H, toggle_class as y, append as ue, group_outros as M, add_render_callback as fe, create_in_transition as de, identity as J, create_out_transition as ce, binding_callbacks as E, assign as W, bind as X, create_component as S, mount_component as N, get_spread_update as Y, get_spread_object as Z, add_flush_callback as x, destroy_component as j, destroy_each as _e } from "../../../vendor/svelte/internal/index.js";
 import { Carousel as ge } from "../../../vendor/svelte-carousel/src/components/Carousel/Carousel.js";
 import { fly as K } from "../../../vendor/svelte/transition/index.js";
 import $ from "./MediaItem.js";
@@ -40,37 +40,37 @@ function P(t, i, l) {
   return n[25] = i[l], n[26] = i, n[27] = l, n;
 }
 function Q(t) {
-  let i, l, n, e, u, r, a;
-  const o = [he, be], s = [];
-  function y(f, _) {
+  let i, l, n, e, s, r, a;
+  const o = [he, be], u = [];
+  function I(f, _) {
     return f[13] && f[10].length > 1 ? 0 : 1;
   }
-  return n = y(t), e = s[n] = o[n](t), {
+  return n = I(t), e = u[n] = o[n](t), {
     c() {
-      i = G("div"), l = G("div"), e.c(), H(l, "class", "media-list svelte-1mrbqlg"), I(l, "carouselEnabled", t[13]), H(i, "class", "media-list-wrapper svelte-1mrbqlg"), I(i, "unfolded", t[5]);
+      i = G("div"), l = G("div"), e.c(), H(l, "class", "media-list svelte-1mrbqlg"), y(l, "carouselEnabled", t[13]), H(i, "class", "media-list-wrapper svelte-1mrbqlg"), y(i, "unfolded", t[5]);
     },
     m(f, _) {
-      q(f, i, _), se(i, l), s[n].m(l, null), a = !0;
+      D(f, i, _), ue(i, l), u[n].m(l, null), a = !0;
     },
     p(f, _) {
       t = f;
       let b = n;
-      n = y(t), n === b ? s[n].p(t, _) : (M(), p(s[b], 1, 1, () => {
-        s[b] = null;
-      }), D(), e = s[n], e ? e.p(t, _) : (e = s[n] = o[n](t), e.c()), c(e, 1), e.m(l, null)), (!a || _ & 8192) && I(l, "carouselEnabled", t[13]), (!a || _ & 32) && I(i, "unfolded", t[5]);
+      n = I(t), n === b ? u[n].p(t, _) : (M(), p(u[b], 1, 1, () => {
+        u[b] = null;
+      }), q(), e = u[n], e ? e.p(t, _) : (e = u[n] = o[n](t), e.c()), c(e, 1), e.m(l, null)), (!a || _ & 8192) && y(l, "carouselEnabled", t[13]), (!a || _ & 32) && y(i, "unfolded", t[5]);
     },
     i(f) {
       a || (c(e), f && fe(() => {
-        r && r.end(1), u = de(i, K, t[6] ? {
+        r && r.end(1), s = de(i, K, t[6] ? {
           y: 4,
           duration: t[4],
           delay: t[2],
           easing: J
-        } : void 0), u.start();
+        } : void 0), s.start();
       }), a = !0);
     },
     o(f) {
-      p(e), u && u.invalidate(), f && (r = ce(i, K, t[6] ? {
+      p(e), s && s.invalidate(), f && (r = ce(i, K, t[6] ? {
         y: 4,
         duration: t[4],
         delay: t[3],
@@ -78,7 +78,7 @@ function Q(t) {
       } : void 0)), a = !1;
     },
     d(f) {
-      f && w(i), s[n].d(), f && r && r.end();
+      f && w(i), u[n].d(), f && r && r.end();
     }
   };
 }
@@ -89,13 +89,13 @@ function be(t) {
     t[7],
     { tag: t[0] }
   ];
-  function u(a) {
+  function s(a) {
     t[20](a);
   }
   let r = {};
   for (let a = 0; a < e.length; a += 1)
     r = W(r, e[a]);
-  return t[8][0] !== void 0 && (r.mediaInstance = t[8][0]), i = new $({ props: r }), E.push(() => X(i, "mediaInstance", u)), {
+  return t[8][0] !== void 0 && (r.mediaInstance = t[8][0]), i = new $({ props: r }), E.push(() => X(i, "mediaInstance", s)), {
     c() {
       S(i.$$.fragment);
     },
@@ -103,12 +103,12 @@ function be(t) {
       N(i, a, o), n = !0;
     },
     p(a, o) {
-      const s = o & 131 ? Y(e, [
+      const u = o & 131 ? Y(e, [
         o & 2 && { media: a[1][0] },
         o & 128 && Z(a[7]),
         o & 1 && { tag: a[0] }
       ]) : {};
-      !l && o & 256 && (l = !0, s.mediaInstance = a[8][0], x(() => l = !1)), i.$set(s);
+      !l && o & 256 && (l = !0, u.mediaInstance = a[8][0], x(() => l = !1)), i.$set(u);
     },
     i(a) {
       n || (c(i.$$.fragment, a), n = !0);
@@ -125,19 +125,19 @@ function he(t) {
   let i, l, n = {
     dots: !1,
     arrows: !1,
-    $$slots: { default: [ye] },
+    $$slots: { default: [Ie] },
     $$scope: { ctx: t }
   };
   return i = new ge({ props: n }), t[18](i), i.$on("pageChange", t[19]), {
     c() {
       S(i.$$.fragment);
     },
-    m(e, u) {
-      N(i, e, u), l = !0;
+    m(e, s) {
+      N(i, e, s), l = !0;
     },
-    p(e, u) {
+    p(e, s) {
       const r = {};
-      u & 268436865 && (r.$$scope = { dirty: u, ctx: e }), i.$set(r);
+      s & 268436865 && (r.$$scope = { dirty: s, ctx: e }), i.$set(r);
     },
     i(e) {
       l || (c(i.$$.fragment, e), l = !0);
@@ -157,13 +157,13 @@ function R(t) {
     { media: t[25] },
     { tag: t[0] }
   ];
-  function u(a) {
+  function s(a) {
     t[17](a, t[27]);
   }
   let r = {};
   for (let a = 0; a < e.length; a += 1)
     r = W(r, e[a]);
-  return t[8][t[27]] !== void 0 && (r.mediaInstance = t[8][t[27]]), i = new $({ props: r }), E.push(() => X(i, "mediaInstance", u)), {
+  return t[8][t[27]] !== void 0 && (r.mediaInstance = t[8][t[27]]), i = new $({ props: r }), E.push(() => X(i, "mediaInstance", s)), {
     c() {
       S(i.$$.fragment);
     },
@@ -172,12 +172,12 @@ function R(t) {
     },
     p(a, o) {
       t = a;
-      const s = o & 1153 ? Y(e, [
+      const u = o & 1153 ? Y(e, [
         o & 128 && Z(t[7]),
         o & 1024 && { media: t[25] },
         o & 1 && { tag: t[0] }
       ]) : {};
-      !l && o & 256 && (l = !0, s.mediaInstance = t[8][t[27]], x(() => l = !1)), i.$set(s);
+      !l && o & 256 && (l = !0, u.mediaInstance = t[8][t[27]], x(() => l = !1)), i.$set(u);
     },
     i(a) {
       n || (c(i.$$.fragment, a), n = !0);
@@ -190,11 +190,11 @@ function R(t) {
     }
   };
 }
-function ye(t) {
+function Ie(t) {
   let i, l, n = t[10], e = [];
   for (let r = 0; r < n.length; r += 1)
     e[r] = R(P(t, n, r));
-  const u = (r) => p(e[r], 1, 1, () => {
+  const s = (r) => p(e[r], 1, 1, () => {
     e[r] = null;
   });
   return {
@@ -206,19 +206,19 @@ function ye(t) {
     m(r, a) {
       for (let o = 0; o < e.length; o += 1)
         e[o].m(r, a);
-      q(r, i, a), l = !0;
+      D(r, i, a), l = !0;
     },
     p(r, a) {
       if (a & 1409) {
         n = r[10];
         let o;
         for (o = 0; o < n.length; o += 1) {
-          const s = P(r, n, o);
-          e[o] ? (e[o].p(s, a), c(e[o], 1)) : (e[o] = R(s), e[o].c(), c(e[o], 1), e[o].m(i.parentNode, i));
+          const u = P(r, n, o);
+          e[o] ? (e[o].p(u, a), c(e[o], 1)) : (e[o] = R(u), e[o].c(), c(e[o], 1), e[o].m(i.parentNode, i));
         }
         for (M(), o = n.length; o < e.length; o += 1)
-          u(o);
-        D();
+          s(o);
+        q();
       }
     },
     i(r) {
@@ -239,19 +239,19 @@ function ye(t) {
     }
   };
 }
-function Ie(t) {
+function ye(t) {
   let i, l, n = t[5] && Q(t);
   return {
     c() {
       n && n.c(), i = U();
     },
-    m(e, u) {
-      n && n.m(e, u), q(e, i, u), l = !0;
+    m(e, s) {
+      n && n.m(e, s), D(e, i, s), l = !0;
     },
-    p(e, [u]) {
-      e[5] ? n ? (n.p(e, u), u & 32 && c(n, 1)) : (n = Q(e), n.c(), c(n, 1), n.m(i.parentNode, i)) : n && (M(), p(n, 1, 1, () => {
+    p(e, [s]) {
+      e[5] ? n ? (n.p(e, s), s & 32 && c(n, 1)) : (n = Q(e), n.c(), c(n, 1), n.m(i.parentNode, i)) : n && (M(), p(n, 1, 1, () => {
         n = null;
-      }), D());
+      }), q());
     },
     i(e) {
       l || (c(n), l = !0);
@@ -265,7 +265,7 @@ function Ie(t) {
   };
 }
 function ke(t, i, l) {
-  let n, e, u, r, { tag: a } = i, { mediaData: o } = i, { inDelay: s = 0 } = i, { outDelay: y = 0 } = i, { duration: f = 0 } = i, { unfolded: _ = !0 } = i, { animation: b = !0 } = i, { mediaItemConfig: L } = i, { enableCarousel: k = !0 } = i, { autoplayConfig: C = { autoplay: !0, autoplayVideo: !1 } } = i, g = [], v = 0, h, B = null;
+  let n, e, s, r, { tag: a } = i, { mediaData: o } = i, { inDelay: u = 0 } = i, { outDelay: I = 0 } = i, { duration: f = 0 } = i, { unfolded: _ = !0 } = i, { animation: b = !0 } = i, { mediaItemConfig: L } = i, { enableCarousel: k = !0 } = i, { autoplayConfig: C = { autoplay: !0, autoplayVideo: !1 } } = i, g = [], v = 0, h, B = null;
   const O = F("hooks"), T = F("mediaStore");
   function V() {
     const m = g[v], d = m == null ? void 0 : m.videoInstance;
@@ -274,14 +274,14 @@ function ke(t, i, l) {
   me(() => {
     O.on("click", (m) => {
       var d, z, A;
-      !((A = (z = (d = a.tag3DContentSvelte) == null ? void 0 : d.domContainer) == null ? void 0 : z.css3DObject) != null && A.opacityMesh) || m.tag.id === a.id && V();
+      !((A = (z = (d = a.tag3DContentSvelte) == null ? void 0 : d.css3DInstance) == null ? void 0 : z.css3DObject) != null && A.opacityMesh) || m.tag.id === a.id && V();
     }), B = setInterval(
       () => {
         r && (h == null || h.goToNext());
       },
       3e3
     );
-  }), ue(() => {
+  }), se(() => {
     clearInterval(B), O.off("click", V);
   });
   function ee(m, d) {
@@ -299,21 +299,21 @@ function ke(t, i, l) {
     t.$$.not_equal(g[0], m) && (g[0] = m, l(8, g));
   }
   return t.$$set = (m) => {
-    "tag" in m && l(0, a = m.tag), "mediaData" in m && l(1, o = m.mediaData), "inDelay" in m && l(2, s = m.inDelay), "outDelay" in m && l(3, y = m.outDelay), "duration" in m && l(4, f = m.duration), "unfolded" in m && l(5, _ = m.unfolded), "animation" in m && l(6, b = m.animation), "mediaItemConfig" in m && l(7, L = m.mediaItemConfig), "enableCarousel" in m && l(15, k = m.enableCarousel), "autoplayConfig" in m && l(16, C = m.autoplayConfig);
+    "tag" in m && l(0, a = m.tag), "mediaData" in m && l(1, o = m.mediaData), "inDelay" in m && l(2, u = m.inDelay), "outDelay" in m && l(3, I = m.outDelay), "duration" in m && l(4, f = m.duration), "unfolded" in m && l(5, _ = m.unfolded), "animation" in m && l(6, b = m.animation), "mediaItemConfig" in m && l(7, L = m.mediaItemConfig), "enableCarousel" in m && l(15, k = m.enableCarousel), "autoplayConfig" in m && l(16, C = m.autoplayConfig);
   }, t.$$.update = () => {
-    t.$$.dirty & 256 && l(9, n = g.every((m) => m.paused)), t.$$.dirty & 32770 && l(13, e = k && (o == null ? void 0 : o.length) > 1), t.$$.dirty & 2 && l(10, u = o), t.$$.dirty & 67072 && (r = u.length > 1 && C.autoplay && n);
+    t.$$.dirty & 256 && l(9, n = g.every((m) => m.paused)), t.$$.dirty & 32770 && l(13, e = k && (o == null ? void 0 : o.length) > 1), t.$$.dirty & 2 && l(10, s = o), t.$$.dirty & 67072 && (r = s.length > 1 && C.autoplay && n);
   }, [
     a,
     o,
-    s,
-    y,
+    u,
+    I,
     f,
     _,
     b,
     L,
     g,
     n,
-    u,
+    s,
     v,
     h,
     e,
@@ -332,7 +332,7 @@ class it extends ae {
       this,
       i,
       ke,
-      Ie,
+      ye,
       oe,
       {
         tag: 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

@@ -2,9 +2,9 @@ var i = Object.defineProperty;
 var a = (e, r, t) => r in e ? i(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t;
 var s = (e, r, t) => (a(e, typeof r != "symbol" ? r + "" : r, t), t);
 import { Subscribe as c } from "../shared-utils/Subscribe.js";
-class x {
+class o {
   constructor(r, t) {
-    s(this, "VERSION", "2.15.0");
+    s(this, "VERSION", "2.15.1-alpha.0");
     s(this, "five");
     s(this, "hooks", new c());
     s(this, "staticPrefix", "//vrlab-static.ljcdn.com");
@@ -15,5 +15,5 @@ class x {
   }
 }
 export {
-  x as Controller
+  o as Controller
 };