@realsee/dnalogel 2.16.0-2 → 2.16.0-alpha.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 P = (l, p, t) => new Promise((e, i) => {
   var o = (s) => {
     try {
       a(t.next(s));
@@ -18,19 +18,20 @@ 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 b, 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 { centerPoint as A } from "../../shared-utils/three/centerPoint.js";
+import { arrayPositionToVector3 as S } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { centerPoint as E } 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 { CSS3DRenderPlugin as E } from "../../CSS3DRenderPlugin/index.js";
+import { ImagePlane as R, VideoPlane as I } from "../utils/model/mediaPlane.js";
+import { isMediaModelTag as C } from "../utils/tag/tagCheck.js";
+import { CSS3DRenderPlugin as A } from "../../CSS3DRenderPlugin/index.js";
 import { loadGLTF as V } from "../../shared-utils/three/GLTFLoader.js";
 import "@realsee/five";
 import "../utils/tagPosition.js";
 import "../../shared-utils/three/loadTexture.js";
+import "../../shared-utils/threex/domevents/index.js";
 import "../utils/checkRange.js";
 import "hammerjs";
 import "@tweenjs/tween.js";
@@ -56,11 +57,9 @@ import "../utils/planeNormal.js";
 import "../utils/normalPositionToPositions.js";
 import "./TagCache.js";
 import "../../base/BasePlugin.js";
-import "../../shared-utils/isAbsoluteURL.js";
 import "../../vendor/svelte/store/index.js";
 import "../../vendor/svelte/internal/index.js";
 import "../utils/device.js";
-import "../../shared-utils/threex/domevents/index.js";
 import "../Components/TagItem.js";
 import "../utils/noTypecheck.js";
 import "../Components/Common/TagPoint.js";
@@ -131,18 +130,23 @@ import "../Components/Tag/AudioTag/AudioPlaneTag.js";
 import "../Components/Tag/MediaPlane.js";
 import "../Components/Tag/LinkTag.js";
 import "../Components/Tag/CustomTag.js";
+import "../../shared-utils/three/Quadrangle.js";
+import "../../shared-utils/math/pointIsRectangle.js";
+import "../../shared-utils/three/loadVideoTexture.js";
+import "../../shared-utils/three/getPositionsByObjectFit.js";
+import "../../shared-utils/five/FiveDomEvents.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
-class Qe extends O {
+class Xe 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 b());
+    c(this, "imagePlaneGroup", new b());
+    c(this, "gltfObjectGroup", new b());
+    c(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    c(this, "temporaryState", { visible: !0 });
+    c(this, "TagContainerSvelte");
+    c(this, "loadModel", (t) => P(this, null, function* () {
       var s;
       const e = t.data.modelUrl;
       if (!e)
@@ -155,14 +159,14 @@ class Qe extends O {
       o.visible = this.getCurrentVisibleState(t), new T().fromArray(t.matrix).decompose(o.position, o.quaternion, o.scale), o.updateWorldMatrix(!0, !0), o.visible = this.getVisibleByFloorIndex(t);
       const a = this.gltfObjectGroup.children.find((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);
-          t.imagePlane.position.copy(m), o.add(t.imagePlane);
+        if (!t.mediaPlane) {
+          const r = t.data.mediaPosition.map(S);
+          t.mediaPlane = new R(t.data.mediaData[0].url, t.data.mediaPosition.map(S));
+          const m = new D().addVectors(r[0], r[2]).divideScalar(2);
+          t.mediaPlane.position.copy(m), o.add(t.mediaPlane);
         }
       } 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);
@@ -170,7 +174,7 @@ class Qe extends O {
   clearTags() {
     this.tags.forEach((t) => {
       var e, i;
-      (i = (e = t.imagePlane) == null ? void 0 : e.parent) == null || i.remove(t.imagePlane);
+      (i = (e = t.mediaPlane) == null ? void 0 : e.parent) == null || i.remove(t.mediaPlane);
     }), this.tags = [], this.enabledModelTagSet.clear(), this.clearCache(), this.disposeAllCSS3DContainer(), this.updateRenderAllTags();
   }
   updateRenderAllTags() {
@@ -178,19 +182,28 @@ class Qe extends O {
   }
   updateRenderImagePlane() {
     this.sort(this.filterImagePlane).forEach((e) => {
-      var n, a, s, r;
-      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))
+      var s, r, m;
+      const i = e.data.mediaData[0];
+      if (!i)
         return;
-      const o = e.position.map(b);
-      e.imagePlane = new R(i, o), e.imagePlane.setMatrixByCornerPoints(o), this.imagePlaneGroup.add(e.imagePlane);
+      const o = i.url, n = i.type;
+      if (!o || (e.mediaPlane && (e.mediaPlane.visible = (r = (s = e.state) == null ? void 0 : s.visible) != null ? r : !0), ((m = e.mediaPlane) == null ? void 0 : m.src) === o))
+        return;
+      const a = e.position.map(S);
+      if (e.mediaPlane && e.mediaPlane.removeFromParent(), n === "Image")
+        e.mediaPlane = new R(o, a);
+      else if (n === "Video") {
+        const d = new I(o, a, { videoCoverSrc: i.videoCoverUrl, playButton: e.data.playIcon });
+        d.initialDomEvents(this.five), d.initialRenderHooks(this.five), e.mediaPlane = d;
+      }
+      this.imagePlaneGroup.add(e.mediaPlane);
     });
   }
   updateRender3DDomTag() {
     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);
@@ -199,7 +212,7 @@ class Qe extends O {
       } else {
         if (((i = e.state) == null ? void 0 : i.visible) === !1)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = E(this.five)), e.stickType === "3DPoint" && !e.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = A(this.five)), e.stickType === "3DPoint" && !e.normal)
           return console.error("updateRenderPlaneTag: \u4E09\u7EF4\u70B9\u6807\u7B7E\u7F3A\u5C11\u6CD5\u5411\u91CF\uFF01");
         const n = this.getPositions(e);
         if (!n)
@@ -210,41 +223,47 @@ class Qe 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", () => {
+          const f = "black";
+          r.container.style.backgroundColor = f, r.container.style.border = `3px solid ${f}`, this.css3DRenderPlugin.hooks.on("render", () => {
             var u;
             if (m.css3DObject.opacityMesh) {
-              const g = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (c) => {
-                this.hooks.emit("click", { event: c, target: "TagContent", tag: e });
+              const h = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (g) => {
+                this.hooks.emit("click", { event: g, target: "TagContent", tag: e });
               });
-              (u = this.store.css3DRenderDisposer.get(e.id)) == null || u.push(g);
+              (u = this.store.css3DRenderDisposer.get(e.id)) == null || u.push(h);
             }
           });
         }
         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 d = new k({
+          target: m.container,
+          props: {
+            tag: e,
+            hooks: this.hooks,
+            state: this.state,
+            mediaStore: this.mediaStore,
+            temporaryState: this.temporaryState
+          }
+        });
+        e.tag3DContentSvelte = {
+          svelteApp: d,
           domContainer: m,
+          css3DInstance: m,
           initialNormal: a,
-          currentNormal: a
+          currentNormal: a,
+          dispose: () => {
+            d.$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);
@@ -254,24 +273,24 @@ class Qe extends O {
   updateTagModelVisible() {
     this.tags.forEach((t) => {
       var e;
-      t.imagePlane && (t.imagePlane.visible = this.getCurrentVisibleState(t)), (e = t.model) != null && e.object && (t.model.object.visible = this.getCurrentVisibleState(t));
+      t.mediaPlane && (t.mediaPlane.visible = this.getCurrentVisibleState(t)), (e = t.model) != null && e.object && (t.model.object.visible = this.getCurrentVisibleState(t));
     });
   }
   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 g, v, y, M;
+    const i = (y = (v = (g = t.mergedConfig) == null ? void 0 : g.tag3DConfig) == null ? void 0 : v.ratio) != null ? y : 216e-5, o = (M = t.tag3DContentSvelte) == null ? void 0 : M.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 = E(s, r).add(new D(0, 0, 5e-4)), d = new T().setPosition(m), f = new T().makeScale(i, i, i), u = new T().multiply(a).multiply(d).multiply(f);
+    u.decompose(o.position, o.quaternion, o.scale);
+    const h = o.opacityMesh;
+    h && u.decompose(h.position, h.quaternion, h.scale);
   }
   addMediaModelTag(t) {
-    return D(this, null, function* () {
-      const e = t.filter(S).map((i) => this.loadModel(i));
+    return P(this, null, function* () {
+      const e = t.filter(C).map((i) => this.loadModel(i));
       yield Promise.all(e), this.setModelMedialVisible(), this.updateRenderAllTags();
     });
   }
@@ -298,7 +317,7 @@ class Qe 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
@@ -313,7 +332,7 @@ class Qe 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);
@@ -322,5 +341,5 @@ class Qe extends O {
   }
 }
 export {
-  Qe as TagRender
+  Xe as TagRender
 };

package/libs/PanoTagPlugin/controller/TagUtil.js

@@ -6,17 +6,14 @@ import * as C from "three";
 import { DefaultConfig as w } from "../tag.config.js";
 import { anyPositionToVector3 as E, arrayPositionToVector3 as p } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
 import { planeNormal as g } from "../utils/planeNormal.js";
-import { tagPosition as P, getTagPosition as k } from "../utils/tagPosition.js";
-import { normalPositionToPositions as M } from "../utils/normalPositionToPositions.js";
+import { tagPosition as P, getTagPosition as M } from "../utils/tagPosition.js";
+import { normalPositionToPositions as k } from "../utils/normalPositionToPositions.js";
 import { TagCache as b } from "./TagCache.js";
 import { writable as I } from "../../vendor/svelte/store/index.js";
 import { isIOSWX as A } from "../utils/device.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
 import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
 import "@realsee/five";
-import "hammerjs";
-import "@tweenjs/tween.js";
-import "../../shared-utils/animationFrame/BetterTween.js";
 import { isMediaPlaneTag as x, isMediaModelTag as v, isPlaneTag as V } from "../utils/tag/tagCheck.js";
 import { DomEvents as L } from "../../shared-utils/threex/domevents/index.js";
 import "@realsee/five/gltf-loader";
@@ -24,7 +21,7 @@ import "../../shared-utils/three/loadTexture.js";
 import "../../shared-utils/three/centerPoint.js";
 import "../../base/BasePlugin.js";
 import "../../shared-utils/Subscribe.js";
-import "../../shared-utils/isAbsoluteURL.js";
+import "../../vendor/svelte/internal/index.js";
 import "../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
@@ -34,9 +31,7 @@ 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 "../../shared-utils/animationFrame/index.js";
-import "../../vendor/svelte/internal/index.js";
-class he extends b {
+class le extends b {
   constructor(e) {
     super(e);
     a(this, "tags", []);
@@ -96,10 +91,10 @@ class he extends b {
         (e.stickType === s || s === "Any") && (e.contentType === n || n === "Any") && (i[r] = this.config.contentTypeConfig[r]);
       }
       if (f.length === 3) {
-        const [s = "Any", n, h] = f;
+        const [s = "Any", n, m] = f;
         if (n === "Audio" && e.contentType === "Audio") {
-          const m = e;
-          (m.stickType === s || s === "Any") && m.data.appearance === h && (i[r] = this.config.contentTypeConfig[r]);
+          const h = e;
+          (h.stickType === s || s === "Any") && h.data.appearance === m && (i[r] = this.config.contentTypeConfig[r]);
         }
       }
     });
@@ -143,10 +138,8 @@ class he extends b {
     if (i.renderType === "Mesh") {
       if (x(e))
         if (o.length === 1) {
-          if (o[0].type === "Image")
+          if (o[0].type === "Image" || o[0].type === "Video")
             return "Mesh";
-          if (o[0].type === "Video")
-            return "Dom";
         } else
           return "Dom";
       else if (v(e))
@@ -172,8 +165,8 @@ class he extends b {
       const n = P(e.position);
       if (!n)
         return;
-      const h = new C.Vector3().copy(f).sub(n), m = s.angleTo(h) * 180 / Math.PI;
-      return t.angle = m, t.angle;
+      const m = new C.Vector3().copy(f).sub(n), h = s.angleTo(m) * 180 / Math.PI;
+      return t.angle = h, t.angle;
     }
   }
   getDistance(e, i) {
@@ -188,7 +181,7 @@ class he extends b {
       const f = (r = (l = this.five.work) == null ? void 0 : l.observers[o]) == null ? void 0 : r.position;
       if (f === void 0)
         throw new Error(`getDistance(): observerPosition is ${f}`);
-      const s = k(e);
+      const s = M(e);
       if (!s)
         return -1;
       const n = f.distanceTo(s);
@@ -201,7 +194,7 @@ class he extends b {
     if (v(e))
       return e.data.mediaPosition;
     const i = e;
-    return M(
+    return k(
       this.five.camera.position,
       p(i.position),
       p(i.normal)
@@ -293,5 +286,5 @@ class he extends b {
   }
 }
 export {
-  he as TagUtil
+  le as TagUtil
 };

package/libs/PanoTagPlugin/controller/index.js

@@ -27,13 +27,14 @@ 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";
+import "../../shared-utils/threex/domevents/index.js";
 import { isMediaModelTag as v } from "../utils/tag/tagCheck.js";
 import { waitFiveModelLoaded as I } from "../utils/actionAfterFiveModelLoad.js";
 import { debounce as A } from "../utils/debounce.js";
@@ -69,11 +70,9 @@ import "../utils/planeNormal.js";
 import "../utils/normalPositionToPositions.js";
 import "./TagCache.js";
 import "../../base/BasePlugin.js";
-import "../../shared-utils/isAbsoluteURL.js";
 import "../../vendor/svelte/store/index.js";
 import "../../vendor/svelte/internal/index.js";
 import "../utils/device.js";
-import "../../shared-utils/threex/domevents/index.js";
 import "../Components/TagContainer.js";
 import "../Components/TagItem.js";
 import "../Components/Tag/index.js";
@@ -145,13 +144,18 @@ import "../utils/getImageInfo.js";
 import "../Components/Tag/CustomTag.js";
 import "classnames";
 import "../Components/Common/TagPoint.js";
-import "../utils/model/imagePlane.js";
+import "../utils/model/mediaPlane.js";
+import "../../shared-utils/three/Quadrangle.js";
+import "../../shared-utils/math/pointIsRectangle.js";
+import "../../shared-utils/three/loadVideoTexture.js";
+import "../../shared-utils/three/getPositionsByObjectFit.js";
+import "../../shared-utils/five/FiveDomEvents.js";
 import "../../CSS3DRenderPlugin/index.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "../../shared-utils/three/GLTFLoader.js";
-const D = "Dnalogel-PanoTagPlugin", Zt = (d) => `${D}--${d}`;
-class ei extends k {
+const D = "Dnalogel-PanoTagPlugin", si = (d) => `${D}--${d}`;
+class oi extends k {
   constructor(e, t) {
     super(e);
     p(this, "state", { enabled: !0, visible: !0 });
@@ -188,7 +192,7 @@ class ei 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);
         }
@@ -204,7 +208,7 @@ class ei 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),
@@ -324,13 +328,16 @@ class ei 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() {
@@ -415,11 +422,11 @@ class ei 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 {
-  ei as PanoTagPluginController,
-  ei as default,
-  Zt as pluginFlag
+  oi as PanoTagPluginController,
+  oi as default,
+  si as pluginFlag
 };

package/libs/PanoTagPlugin/index.js

@@ -1,7 +1,7 @@
 import t from "./controller/index.js";
-import { default as Fr, pluginFlag as br } from "./controller/index.js";
-import { ContentType as jr } from "./typings/tag/TagData.js";
-import { DimensionType as qr } from "./typings/tag/Utils.js";
+import { default as kr, pluginFlag as qr } from "./controller/index.js";
+import { ContentType as zr } from "./typings/tag/TagData.js";
+import { DimensionType as Br } from "./typings/tag/Utils.js";
 import "@realsee/five";
 import "object-assign-deep";
 import "../CSS3DRenderPlugin/utils/positionToVector3.js";
@@ -9,6 +9,7 @@ import "three";
 import "./utils/addDebugPoints.js";
 import "@realsee/five/gltf-loader";
 import "../shared-utils/three/loadTexture.js";
+import "../shared-utils/threex/domevents/index.js";
 import "./utils/tag/tagCheck.js";
 import "./utils/actionAfterFiveModelLoad.js";
 import "./utils/debounce.js";
@@ -44,11 +45,9 @@ import "./utils/planeNormal.js";
 import "./utils/normalPositionToPositions.js";
 import "./controller/TagCache.js";
 import "../base/BasePlugin.js";
-import "../shared-utils/isAbsoluteURL.js";
 import "../vendor/svelte/store/index.js";
 import "../vendor/svelte/internal/index.js";
 import "./utils/device.js";
-import "../shared-utils/threex/domevents/index.js";
 import "./Components/TagContainer.js";
 import "./Components/TagItem.js";
 import "./Components/Tag/index.js";
@@ -120,17 +119,22 @@ import "./utils/getImageInfo.js";
 import "./Components/Tag/CustomTag.js";
 import "classnames";
 import "./Components/Common/TagPoint.js";
-import "./utils/model/imagePlane.js";
+import "./utils/model/mediaPlane.js";
+import "../shared-utils/three/Quadrangle.js";
+import "../shared-utils/math/pointIsRectangle.js";
+import "../shared-utils/three/loadVideoTexture.js";
+import "../shared-utils/three/getPositionsByObjectFit.js";
+import "../shared-utils/five/FiveDomEvents.js";
 import "../CSS3DRenderPlugin/index.js";
 import "../CSS3DRenderPlugin/Controller.js";
 import "../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "../shared-utils/three/GLTFLoader.js";
-const cr = (o, r) => new t(o, r);
+const br = (o, r) => new t(o, r);
 export {
-  jr as ContentType,
-  qr as DimensionType,
-  cr as PanoTagPlugin,
-  Fr as PanoTagPluginController,
-  cr as default,
-  br as pluginFlag
+  zr as ContentType,
+  Br as DimensionType,
+  br as PanoTagPlugin,
+  kr as PanoTagPluginController,
+  br as default,
+  qr as pluginFlag
 };

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

@@ -8,7 +8,7 @@ import type { Subscribe } from '@realsee/five';
 import type { TagId, StickType, TagGLTFObject } from './tag/Utils';
 import type { TagContentType } from './tag/TagData';
 import type { Tag } from './tag/Tag';
-import type ImagePlane from '../utils/model/imagePlane';
+import type { ImagePlane, VideoPlane } from '../utils/model/mediaPlane';
 declare type NonNullable<T> = T extends null | undefined | void ? never : T;
 export declare type TagHooks = InstanceType<typeof PanoTagPluginController>['hooks'];
 export interface State extends BasePlugin.State {
@@ -89,11 +89,14 @@ 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;
+    mediaPlane: ImagePlane | VideoPlane;
     model: {
         promise: Promise<TagGLTFObject>;
         object?: TagGLTFObject;

package/libs/PanoTagPlugin/typings/index.js

@@ -1,9 +1,11 @@
-import { ContentType as m } from "./tag/TagData.js";
-import { DimensionType as n } from "./tag/Utils.js";
+import { ContentType as n } from "./tag/TagData.js";
+import { DimensionType as x } from "./tag/Utils.js";
 import "@realsee/five/gltf-loader";
 import "three";
 import "../../shared-utils/three/loadTexture.js";
+import "@realsee/five";
+import "../../shared-utils/threex/domevents/index.js";
 export {
-  m as ContentType,
-  n as DimensionType
+  n as ContentType,
+  x as DimensionType
 };

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

@@ -1,11 +1,9 @@
 import type { State as FiveState } from '@realsee/five';
 import type { TagConfig } from './TagConfig';
 import { ContentTypeMap, ContentType, TagContentType } from './TagData';
-import type { ContentTypeConfigKey, Position, TagId, StickType, TagStyle } from './Utils';
+import type { ContentTypeConfigKey, Position, TagId, StickType, TagStyle, ElementRenderer } from './Utils';
 export type { ContentTypeMap, TagContentType };
 export { ContentType };
-/** 返回一个销毁函数 */
-declare type ElementRenderer = (container: HTMLElement) => () => void;
 export interface Tags {
     version?: string;
     /** tag配置 > 按type配置 > 全局配置 */

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

@@ -2,7 +2,7 @@ import { GLTFObject } from '@realsee/five/gltf-loader';
 import { Group } from 'three';
 import type { Tag } from './Tag';
 import type { TagContentType } from './TagData';
-import ImagePlane from '../../utils/model/imagePlane';
+import { ImagePlane } from '../../utils/model/mediaPlane';
 export declare type TagId = string | number;
 export declare type ArrayPosition = number[];
 export declare type Position = ArrayPosition;
@@ -42,7 +42,10 @@ export interface TagStyle {
 export declare type TagGLTFObject = GLTFObject & {
     customID: number | string;
     isTagModel: boolean;
+    updateTagCss3DObjectMatrix?: () => void;
 };
+/** 返回一个销毁函数 */
+export declare type ElementRenderer = (container: HTMLElement) => () => void;
 export interface TagObjectGroup extends Group {
     children: Array<TagGLTFObjectGroup>;
 }

package/libs/PanoTagPlugin/typings/tag/Utils.js

@@ -1,6 +1,8 @@
 import "@realsee/five/gltf-loader";
 import "three";
 import "../../../shared-utils/three/loadTexture.js";
+import "@realsee/five";
+import "../../../shared-utils/threex/domevents/index.js";
 var t = /* @__PURE__ */ ((r) => (r.Two = "2D", r.Three = "3D", r))(t || {});
 export {
   t as DimensionType