@realsee/dnalogel 2.23.1 → 2.24.0-dev.0

package/libs/PanoTagPlugin/controller/TagRender.js

@@ -1,32 +1,32 @@
-var R = Object.defineProperty;
-var k = (b, h, t) => h in b ? R(b, h, { enumerable: !0, configurable: !0, writable: !0, value: t }) : b[h] = t;
-var f = (b, h, t) => (k(b, typeof h != "symbol" ? h + "" : h, t), t);
-var C = (b, h, t) => new Promise((e, o) => {
+var k = Object.defineProperty;
+var E = (b, u, t) => u in b ? k(b, u, { enumerable: !0, configurable: !0, writable: !0, value: t }) : b[u] = t;
+var P = (b, u, t) => (E(b, typeof u != "symbol" ? u + "" : u, t), t);
+var M = (b, u, t) => new Promise((e, o) => {
   var i = (r) => {
     try {
       a(t.next(r));
-    } catch (s) {
-      o(s);
+    } catch (n) {
+      o(n);
     }
-  }, n = (r) => {
+  }, s = (r) => {
     try {
       a(t.throw(r));
-    } catch (s) {
-      o(s);
+    } catch (n) {
+      o(n);
     }
-  }, a = (r) => r.done ? e(r.value) : Promise.resolve(r.value).then(i, n);
-  a((t = t.apply(b, h)).next());
+  }, a = (r) => r.done ? e(r.value) : Promise.resolve(r.value).then(i, s);
+  a((t = t.apply(b, u)).next());
 });
 import { TagComputer as w } from "./TagComputer.js";
-import { Group as S, Quaternion as E, Vector3 as v, Matrix4 as D } from "three";
-import O from "../Components/TagContainer.js";
-import A from "../Components/Tag/index.js";
-import { arrayPositionToVector3 as y } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
-import { centerPoint as x } from "../../shared-utils/three/centerPoint.js";
-import { isMediaModelTag as P, isStickModelTag as I } from "../utils/tag/tagCheck.js";
-import { CSS3DRenderPlugin as G } from "../../CSS3DRenderPlugin/index.js";
-import { loadGLTF as V } from "../../shared-utils/three/GLTFLoader.js";
-import { VideoPlane as M, ImagePlane as j } from "../utils/model/mediaPlane.js";
+import { Group as y, Quaternion as O, Vector3 as g, Matrix4 as D } from "three";
+import A from "../Components/TagContainer.js";
+import x from "../Components/Tag/index.js";
+import { arrayPositionToVector3 as C } from "../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import { centerPoint as V } from "../../shared-utils/three/centerPoint.js";
+import { isMediaModelTag as S, isStickModelTag as G } from "../utils/tag/tagCheck.js";
+import { CSS3DRenderPlugin as I } from "../../CSS3DRenderPlugin/index.js";
+import { loadGLTF as F } from "../../shared-utils/three/GLTFLoader.js";
+import { VideoPlane as R, ImagePlane as j } from "../utils/model/mediaPlane.js";
 import "../utils/tagPosition.js";
 import "../utils/checkRange.js";
 import "hammerjs";
@@ -152,51 +152,51 @@ import "../Components/Tag/CustomTag.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "@realsee/five/gltf-loader";
-const F = /* @__PURE__ */ new Map(), L = /* @__PURE__ */ new Map();
-class hi extends w {
+const L = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
+class ui extends w {
   constructor(t) {
     super(t);
-    f(this, "group", new S());
-    f(this, "renderMap", /* @__PURE__ */ new Map());
-    f(this, "imagePlaneGroup", new S());
-    f(this, "gltfObjectGroup", new S());
+    P(this, "group", new y());
+    P(this, "renderMap", /* @__PURE__ */ new Map());
+    P(this, "imagePlaneGroup", new y());
+    P(this, "gltfObjectGroup", new y());
     /** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
-    f(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    P(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
     /** 临时状态 */
-    f(this, "temporaryState", { visible: !0 });
+    P(this, "temporaryState", { visible: !0 });
     /** 点标签 */
-    f(this, "TagContainerSvelte");
+    P(this, "TagContainerSvelte");
     /** 加载外部模型 */
-    f(this, "loadModel", (t) => C(this, null, function* () {
+    P(this, "loadModel", (t) => M(this, null, function* () {
       var a;
       const e = t.data.modelUrl;
       if (!e)
         return;
-      const o = V(e).then((r) => {
-        var p, m, l, c, d;
-        const s = Object.assign(r.scene, {
+      const o = F(e).then((r) => {
+        var p, m, c, l, h;
+        const n = Object.assign(r.scene, {
           customID: t.id,
           isTagModel: !0,
-          removeEventListener: this.addObjectClickHandler(t, r.scene, (g) => {
-            this.hooks.emit("click", { target: "TagModel", tag: t, event: g });
+          removeEventListener: this.addObjectClickHandler(t, r.scene, (d) => {
+            this.hooks.emit("click", { target: "TagModel", tag: t, event: d });
           })
         });
-        return s.visible = this.getCurrentVisibleState(t), new D().fromArray(t.matrix).decompose(s.position, s.quaternion, s.scale), s.updateWorldMatrix(!0, !0), s.visible = this.getVisibleByFiveMode(t), (l = (m = (p = this.config) == null ? void 0 : p.globalConfig) == null ? void 0 : m.modelConfig) != null && l.autoLookAtEnabled && ((d = (c = t.config) == null ? void 0 : c.modelConfig) != null && d.autoLookAtEnabled) && s.lookAt(this.five.camera.position.clone().setY(s.position.y)), s;
+        return n.visible = this.getCurrentVisibleState(t), new D().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisibleByFiveMode(t), (c = (m = (p = this.config) == null ? void 0 : p.globalConfig) == null ? void 0 : m.modelConfig) != null && c.autoLookAtEnabled && ((h = (l = t.config) == null ? void 0 : l.modelConfig) != null && h.autoLookAtEnabled) && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
       });
       t.model = { promise: o };
       const i = yield o;
       if (((a = t.model) == null ? void 0 : a.promise) !== o || !this.tags.includes(t))
         return;
       t.model.object = i;
-      const n = this.gltfObjectGroup.children.find((r) => r.customID === t.id);
-      if (n && (this.gltfObjectGroup.remove(n), n.removeEventListener()), this.updateRender3DDomTag(), P(t)) {
+      const s = this.gltfObjectGroup.children.find((r) => r.customID === t.id);
+      if (s && (this.gltfObjectGroup.remove(s), s.removeEventListener()), this.updateRender3DDomTag(), S(t)) {
         if (this.getRenderType(t) === "Mesh" && !t.mediaPlane) {
-          const r = t.data.mediaPosition.map(y);
-          t.mediaPlane = new j(t.data.mediaData[0].url, t.data.mediaPosition.map(y), {
+          const r = t.data.mediaPosition.map(C);
+          t.mediaPlane = new j(t.data.mediaData[0].url, t.data.mediaPosition.map(C), {
             objectFit: t.data.objectFit
           });
-          const s = new v().addVectors(r[0], r[2]).divideScalar(2);
-          t.mediaPlane.position.copy(s), i.add(t.mediaPlane);
+          const n = new g().addVectors(r[0], r[2]).divideScalar(2);
+          t.mediaPlane.position.copy(n), i.add(t.mediaPlane);
         }
         this.getRenderType(t) !== "Mesh" && (i.updateTagCss3DObjectMatrix = () => this.updateTagCss3DObjectMatrix(t, i), i.updateTagCss3DObjectMatrix());
       }
@@ -225,41 +225,56 @@ class hi extends w {
    * @description: 更新所有标签
    */
   updateRenderAllTags() {
-    this.enabledModelTagSet.clear(), this.tags.forEach((t) => t.stickType === "Model" && this.enabledModelTagSet.add(t.id)), this.updateRenderPointTag(), this.updateRender3DDomTag(), this.updateRenderModelTag(), this.updateRenderImagePlane();
+    this.enabledModelTagSet.clear(), this.tags.forEach((t) => t.stickType === "Model" && this.enabledModelTagSet.add(t.id)), this.updateRenderPointTag(), this.updateRender3DDomTag(), this.updateRenderModelTag(), this.updateRenderImagePlane(), this.updateRenderVideoPlane();
   }
-  /**
-   * @description: 渲染图片贴片
-   */
-  updateRenderImagePlane() {
-    this.sort(this.filterImagePlane).forEach((e) => {
-      var r, s, u, p, m;
+  updateRenderVideoPlane() {
+    this.sort(this.filterImagePlane).filter((e) => {
+      var o, i;
+      return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Video";
+    }).forEach((e) => {
+      var p, m, c, l, h;
       const o = e.data.mediaData[0];
       if (!o)
         return;
-      const { url: i, type: n } = o;
-      if (!i || (e.mediaPlane && (e.mediaPlane.visible = (s = (r = e.state) == null ? void 0 : r.visible) != null ? s : !0, e.mediaPlane.visible || e.mediaPlane instanceof M && ((u = e.data.autoplayConfig) != null && u.autoplayVideo || e.mediaPlane.pause())), ((p = e.mediaPlane) == null ? void 0 : p.src) === i))
+      const { url: i } = o;
+      if (!i)
         return;
-      const a = e.position.map(y);
-      if (e.mediaPlane && e.mediaPlane.removeFromParent(), n === "Image")
-        e.mediaPlane = new j(i, a, { objectFit: e.data.objectFit }), e.config.clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (l) => {
-          this.hooks.emit("click", { tag: e, target: "TagContent", event: l.origDomEvent });
-        });
-      else if (n === "Video") {
-        const l = new M(i, a, {
+      e.mediaPlane && !((m = (p = e.state) == null ? void 0 : p.visible) == null || m) && e.mediaPlane instanceof R && e.mediaPlane.pause();
+      const s = e.position.map(C), a = e.state.visible, r = (() => !!(e.mediaPlane && !a))(), n = (() => !!(!e.mediaPlane && a))(), f = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
+      if ((r || f) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (c = e.mediaPlane) == null || c.dispose(), (l = e.mediaPlane) == null || l.removeFromParent(), e.mediaPlane = void 0), n || f) {
+        const d = new R(i, s, {
           videoCoverSrc: o.videoCoverUrl,
           playButton: e.data.playIcon,
-          paused: !((m = e.data.autoplayConfig) != null && m.autoplayVideo),
+          paused: !((h = e.data.autoplayConfig) != null && h.autoplayVideo),
           objectFit: e.data.objectFit,
-          videoTextureMap: F,
-          ImageTextureMap: L
+          videoTextureMap: L,
+          ImageTextureMap: B,
+          domEvents: this.domEvents
         });
-        l.onVideoReady = (d) => {
-          d.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: l.videoInstance }));
-        }, l.initialDomEvents(this.domEvents);
-        const c = (d) => (this.five.on("renderFrame", d), () => this.five.off("renderFrame", d));
-        l.initialRenderHooks(c), e.mediaPlane = l;
+        d.onVideoReady = (T) => {
+          T.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: d.videoInstance }));
+        };
+        const v = (T) => (this.five.on("renderFrame", T), () => this.five.off("renderFrame", T));
+        d.initialRenderHooks(v), e.mediaPlane = d, this.imagePlaneGroup.add(e.mediaPlane);
       }
-      this.imagePlaneGroup.add(e.mediaPlane);
+    });
+  }
+  /**
+   * @description: 渲染图片贴片
+   */
+  updateRenderImagePlane() {
+    this.sort(this.filterImagePlane).filter((e) => {
+      var o, i;
+      return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Image";
+    }).forEach((e) => {
+      var s;
+      const { url: o } = e.data.mediaData[0];
+      if (!o)
+        return;
+      const i = e.position.map(C);
+      ((s = e.mediaPlane) == null ? void 0 : s.src) !== o && (e.mediaPlane && e.mediaPlane.removeFromParent(), e.mediaPlane = new j(o, i, { objectFit: e.data.objectFit }), e.config.clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (a) => {
+        this.hooks.emit("click", { tag: e, target: "TagContent", event: a.origDomEvent });
+      }), this.imagePlaneGroup.add(e.mediaPlane));
     });
   }
   /**
@@ -267,36 +282,36 @@ class hi extends w {
    */
   updateRender3DDomTag() {
     this.sort([...this.filterCSS3DTag]).forEach((e) => {
-      var o, i, n, a;
+      var o, i, s, a;
       if (e.tag3DContentSvelte) {
-        const { svelteApp: r, css3DInstance: s, initialNormal: u, currentNormal: p } = e.tag3DContentSvelte;
-        if (r.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !u.equals(p)) {
-          const m = new E().setFromUnitVectors(u, p);
-          s.css3DObject.setRotationFromQuaternion(m);
+        const { svelteApp: r, css3DInstance: n, initialNormal: f, currentNormal: p } = e.tag3DContentSvelte;
+        if (r.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !f.equals(p)) {
+          const m = new O().setFromUnitVectors(f, p);
+          n.css3DObject.setRotationFromQuaternion(m);
         }
         return;
       } else {
-        if (P(e) && !((o = e.model) != null && o.object) || ((i = e.state) == null ? void 0 : i.visible) === !1 || !this.state.visible || !this.state.enabled)
+        if (S(e) && !((o = e.model) != null && o.object) || ((i = e.state) == null ? void 0 : i.visible) === !1 || !this.state.visible || !this.state.enabled)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = G(this.five)), e.stickType === "3DPoint" && !e.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = I(this.five)), e.stickType === "3DPoint" && !e.normal)
           return console.error("updateRenderPlaneTag: 三维点标签缺少法向量！");
         const r = this.getPositions(e);
         if (!r)
           return;
-        const s = this.getTagNormal(e);
-        if (!s)
+        const n = this.getTagNormal(e);
+        if (!n)
           return;
-        const p = (n = this.getTagConfig(e).tag3DConfig) != null ? n : {};
+        const p = (s = this.getTagConfig(e).tag3DConfig) != null ? s : {};
         if (this.getRenderType(e) === "BehindDom") {
           p.mode = "behind", p.container = document.createElement("div");
-          const c = "black";
-          p.container.style.backgroundColor = c, p.container.style.border = `3px solid ${c}`, this.css3DRenderPlugin.hooks.on("render", () => {
-            var d;
+          const l = "black";
+          p.container.style.backgroundColor = l, p.container.style.border = `3px solid ${l}`, this.css3DRenderPlugin.hooks.on("render", () => {
+            var h;
             if (m.css3DObject.opacityMesh) {
-              const g = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (T) => {
-                this.hooks.emit("click", { event: T, target: "TagContent", tag: e });
+              const d = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (v) => {
+                this.hooks.emit("click", { event: v, target: "TagContent", tag: e });
               });
-              (d = this.store.css3DRenderDisposer.get(e.id)) == null || d.push(g);
+              (h = this.store.css3DRenderDisposer.get(e.id)) == null || h.push(d);
             }
           });
         }
@@ -304,7 +319,7 @@ class hi extends w {
         if (!m)
           return;
         this.store.css3DRenderDisposer.set(e.id, [m.dispose]);
-        const l = new A({
+        const c = new x({
           target: m.container,
           props: {
             tag: e,
@@ -316,15 +331,15 @@ class hi extends w {
           }
         });
         e.tag3DContentSvelte = {
-          svelteApp: l,
+          svelteApp: c,
           domContainer: m,
           css3DInstance: m,
-          initialNormal: s,
-          currentNormal: s,
+          initialNormal: n,
+          currentNormal: n,
           dispose: () => {
-            l.$destroy(), m.dispose();
+            c.$destroy(), m.dispose();
           }
-        }, P(e) && ((a = e.model) != null && a.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
+        }, S(e) && ((a = e.model) != null && a.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
       }
     }), this.clearUnusedPanelTag();
   }
@@ -338,8 +353,8 @@ class hi extends w {
   updateRenderModelTag() {
     const t = (i) => !this.enabledModelTagSet.has(i.customID), e = this.gltfObjectGroup.children.filter(t);
     e.forEach((i) => i.removeEventListener()), this.gltfObjectGroup.remove(...e), this.tags.filter((i) => i.stickType === "Model").forEach((i) => {
-      var n;
-      (n = i.model) == null || n.promise.then((a) => {
+      var s;
+      (s = i.model) == null || s.promise.then((a) => {
         a.visible = this.getCurrentVisibleState(i);
       });
     }), this.five.needsRender = !0;
@@ -355,23 +370,23 @@ class hi extends w {
    * @param model 模型
    */
   updateTagCss3DObjectMatrix(t, e) {
-    var d, g, T;
-    const o = (g = (d = t.config.tag3DConfig) == null ? void 0 : d.ratio) != null ? g : 216e-5, i = (T = t.tag3DContentSvelte) == null ? void 0 : T.css3DInstance.css3DObject;
+    var h, d, v;
+    const o = (d = (h = t.config.tag3DConfig) == null ? void 0 : h.ratio) != null ? d : 216e-5, i = (v = t.tag3DContentSvelte) == null ? void 0 : v.css3DInstance.css3DObject;
     if (!i)
       return;
-    const n = P(t) ? t.data.mediaPosition : t.position;
-    if (!n || n.length !== 4 || !Array.isArray(n[0]) || !Array.isArray(n[2]))
+    const s = S(t) ? t.data.mediaPosition : t.position;
+    if (!s || s.length !== 4 || !Array.isArray(s[0]) || !Array.isArray(s[2]))
       return;
     e.updateWorldMatrix(!1, !1);
-    const a = e.matrixWorld, r = new v().fromArray(n[0]), s = new v().fromArray(n[2]), u = x(r, s).add(new v(0, 0, 5e-4)), p = new D().setPosition(u), m = new D().makeScale(o, o, o), l = new D().multiply(a).multiply(p).multiply(m);
-    l.decompose(i.position, i.quaternion, i.scale);
-    const c = i.opacityMesh;
-    c && l.decompose(c.position, c.quaternion, c.scale);
+    const a = e.matrixWorld, r = new g().fromArray(s[0]), n = new g().fromArray(s[2]), f = V(r, n).add(new g(0, 0, 5e-4)), p = new D().setPosition(f), m = new D().makeScale(o, o, o), c = new D().multiply(a).multiply(p).multiply(m);
+    c.decompose(i.position, i.quaternion, i.scale);
+    const l = i.opacityMesh;
+    l && c.decompose(l.position, l.quaternion, l.scale);
   }
   /** 添加模型标签 */
   addMediaModelTag(t) {
-    return C(this, null, function* () {
-      const e = t.filter(I).map((o) => this.loadModel(o));
+    return M(this, null, function* () {
+      const e = t.filter(G).map((o) => this.loadModel(o));
       yield Promise.all(e), this.setModelMedialVisible(), this.updateRenderAllTags();
     });
   }
@@ -387,7 +402,7 @@ class hi extends w {
       const o = (e = this.five.getElement()) == null ? void 0 : e.parentElement;
       if (!o)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new O({
+      this.TagContainerSvelte = new A({
         target: o,
         props: {
           hooks: this.hooks,
@@ -407,8 +422,8 @@ class hi extends w {
       temporaryState: this.temporaryState,
       withAnimation: this.store.visibleWithAnimation
     }), this.filterCSS3DTag.forEach((e) => {
-      var o, i, n, a, r;
-      (a = (i = (o = e.tag3DContentSvelte) == null ? void 0 : o.css3DInstance) == null ? void 0 : i.css3DObject) == null || a.setVisible((this.state.visible && ((n = e.state) == null ? void 0 : n.visible)) !== !1), (r = e.tag3DContentSvelte) == null || r.svelteApp.$set({
+      var o, i, s, a, r;
+      (a = (i = (o = e.tag3DContentSvelte) == null ? void 0 : o.css3DInstance) == null ? void 0 : i.css3DObject) == null || a.setVisible((this.state.visible && ((s = e.state) == null ? void 0 : s.visible)) !== !1), (r = e.tag3DContentSvelte) == null || r.svelteApp.$set({
         state: this.state,
         temporaryState: this.temporaryState,
         withAnimation: this.store.visibleWithAnimation
@@ -435,5 +450,5 @@ class hi extends w {
   }
 }
 export {
-  hi as TagRender
+  ui as TagRender
 };

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

@@ -124,6 +124,10 @@ export interface TagConfig<C extends TagContentType = TagContentType> {
     };
     /** 当图片为一张时可以通过Mesh渲染 */
     renderType?: 'Mesh' | 'Dom';
-    clickable?: false;
+    /**
+     * @description: 是否可以点击
+     * @default true
+     */
+    clickable?: boolean;
 }
 export {};

package/libs/PanoTagPlugin/utils/model/mediaPlane.d.ts

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Vector3 } from 'three';
+import type { FiveDomEvents } from '../../../shared-utils/five/FiveDomEvents';
 import type { ObjectFit } from '../../typings';
-import type DomEvents from '../../../shared-utils/threex/domevents';
 import type { Overwrite } from '../../../typings/utils.type';
 type Src = string;
 type VideoTexture = Overwrite<THREE.VideoTexture, {
@@ -15,6 +15,7 @@ declare abstract class MediaPlane extends THREE.Mesh<THREE.BufferGeometry | THRE
     name: string;
     src?: string;
     removeFromParent(): this;
+    dispose(): void;
 }
 declare class ImagePlane extends MediaPlane {
     name: string;
@@ -32,7 +33,6 @@ declare class VideoPlane extends MediaPlane {
     private videoCoverSrc?;
     private domEvents?;
     private disposers;
-    private domEventsListenerTemporaryList;
     private cornerPoints;
     private videoMesh?;
     private coverMesh?;
@@ -46,17 +46,14 @@ declare class VideoPlane extends MediaPlane {
         objectFit?: ObjectFit;
         videoTextureMap?: Map<Src, VideoTexture>;
         ImageTextureMap?: Map<Src, ImageTexture>;
+        domEvents?: FiveDomEvents;
     });
     play(muted?: boolean): Promise<void>;
     pause(): void;
-    initialDomEvents(domEvents: DomEvents): void;
     initialRenderHooks(func: (render: () => void) => () => void): void;
     private showPlayUI;
     private showPauseUI;
     private render;
-    private addAutoBindEventListener;
-    private addDomEventListener;
-    private removeDomEventListener;
     private addCoverMesh;
     private addVideoMesh;
     private addButtonMesh;