@realsee/dnalogel 3.2.0 → 3.3.0-dev.0

package/libs/PanoTagPlugin/controller/TagRender.js

@@ -1,16 +1,16 @@
-var V = Object.defineProperty;
-var j = Object.getOwnPropertySymbols;
-var A = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
-var y = (d, p, t) => p in d ? V(d, p, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[p] = t, w = (d, p) => {
-  for (var t in p || (p = {}))
-    A.call(p, t) && y(d, t, p[t]);
-  if (j)
-    for (var t of j(p))
-      x.call(p, t) && y(d, t, p[t]);
-  return d;
+var E = Object.defineProperty;
+var R = Object.getOwnPropertySymbols;
+var V = Object.prototype.hasOwnProperty, A = Object.prototype.propertyIsEnumerable;
+var C = (c, l, t) => l in c ? E(c, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[l] = t, j = (c, l) => {
+  for (var t in l || (l = {}))
+    V.call(l, t) && C(c, t, l[t]);
+  if (R)
+    for (var t of R(l))
+      A.call(l, t) && C(c, t, l[t]);
+  return c;
 };
-var P = (d, p, t) => (y(d, typeof p != "symbol" ? p + "" : p, t), t);
-var M = (d, p, t) => new Promise((e, o) => {
+var f = (c, l, t) => (C(c, typeof l != "symbol" ? l + "" : l, t), t);
+var S = (c, l, t) => new Promise((e, o) => {
   var i = (r) => {
     try {
       a(t.next(r));
@@ -24,18 +24,18 @@ var M = (d, p, t) => new Promise((e, o) => {
       o(n);
     }
   }, a = (r) => r.done ? e(r.value) : Promise.resolve(r.value).then(i, s);
-  a((t = t.apply(d, p)).next());
+  a((t = t.apply(c, l)).next());
 });
-import { TagComputer as O } from "./TagComputer.js";
-import { Group as R, Quaternion as I, Vector3 as D, Matrix4 as g } from "three";
-import G from "../Components/TagContainer.js";
-import F from "../Components/Tag/index.js";
-import { CSS3DRenderPlugin as L } from "../../CSS3DRenderPlugin/index.js";
-import { loadGLTF as W } from "../../shared-utils/three/GLTFLoader.js";
-import { isMediaModelTag as S, isStickModelTag as $ } from "../utils/tag/tagCheck.js";
-import { VideoPlane as k, ImagePlane as E } from "../utils/model/mediaPlane.js";
-import { centerPoint as q } from "../../shared-utils/three/centerPoint.js";
-import { arrayPositionToVector3 as C } from "../../shared-utils/positionToVector3.js";
+import { TagComputer as x } from "./TagComputer.js";
+import { Group as y, Quaternion as O, Vector3 as b, Matrix4 as v } from "three";
+import I from "../Components/TagContainer.js";
+import G from "../Components/Tag/index.js";
+import { CSS3DRenderPlugin as F } from "../../CSS3DRenderPlugin/index.js";
+import { loadGLTF as L } from "../../shared-utils/three/GLTFLoader.js";
+import { isMediaModelTag as g, isStickModelTag as W } from "../utils/tag/tagCheck.js";
+import { VideoPlane as w, ImagePlane as k } from "../utils/model/mediaPlane.js";
+import { centerPoint as $ } from "../../shared-utils/three/centerPoint.js";
+import { arrayPositionToVector3 as D } from "../../shared-utils/positionToVector3.js";
 import "../utils/tagPosition.js";
 import "../utils/checkRange.js";
 import "../../shared-utils/five/mode.js";
@@ -74,6 +74,7 @@ import "../../shared-utils/five/calculateThreeMouse.js";
 import "../utils/tag/adaptConfig.js";
 import "../../shared-utils/typescript/entries.js";
 import "../../shared-utils/url/getUrl.js";
+import "../../shared-utils/five/transformPosition.js";
 import "../../shared-utils/five/getFloorIndex.js";
 import "../../shared-utils/safeObj.js";
 import "../../shared-utils/three/loadTexture.js";
@@ -157,38 +158,38 @@ import "../Components/Tag/CustomTag.js";
 import "../../CSS3DRenderPlugin/Controller.js";
 import "../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
 import "@realsee/five/gltf-loader";
-const B = /* @__PURE__ */ new Map(), N = /* @__PURE__ */ new Map();
-class ui extends O {
+const q = /* @__PURE__ */ new Map(), B = /* @__PURE__ */ new Map();
+class ui extends x {
   constructor(t) {
     super(t);
-    P(this, "group", new R());
-    P(this, "renderMap", /* @__PURE__ */ new Map());
-    P(this, "imagePlaneGroup", new R());
-    P(this, "gltfObjectGroup", new R());
+    f(this, "group", new y());
+    f(this, "renderMap", /* @__PURE__ */ new Map());
+    f(this, "imagePlaneGroup", new y());
+    f(this, "gltfObjectGroup", new y());
     /** 维护一个可用模型表，用于快速删除不应该在场景中的模型 */
-    P(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
+    f(this, "enabledModelTagSet", /* @__PURE__ */ new Set());
     /** 临时状态 */
-    P(this, "temporaryState", { visible: !0 });
+    f(this, "temporaryState", { visible: !0 });
     /** 点标签 */
-    P(this, "TagContainerSvelte");
+    f(this, "TagContainerSvelte");
     /** 加载外部模型 */
-    P(this, "loadModel", (t) => M(this, null, function* () {
+    f(this, "loadModel", (t) => S(this, null, function* () {
       var a;
       const e = t.data.modelUrl;
       if (!e)
         return;
       t.loading = !0;
-      const o = W(e).then((r) => {
-        var m, c;
+      const o = L(e).then((r) => {
+        var m;
         const n = Object.assign(r.scene, {
           customID: t.id,
           isTagModel: !0,
-          removeEventListener: t.config.clickable === !1 ? () => {
+          removeEventListener: this.getTagConfig(t).clickable === !1 ? () => {
           } : this.addObjectClickHandler(t, r.scene, (h) => {
             this.hooks.emit("click", { target: "TagModel", tag: t, event: h });
           })
         });
-        return n.visible = this.getCurrentVisibleState(t), new g().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisible(t), (c = (m = t.config) == null ? void 0 : m.modelConfig) != null && c.autoLookAtEnabled && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
+        return n.visible = this.getCurrentVisibleState(t), new v().fromArray(t.matrix).decompose(n.position, n.quaternion, n.scale), n.updateWorldMatrix(!0, !0), n.visible = this.getVisible(t), (m = this.getTagConfig(t).modelConfig) != null && m.autoLookAtEnabled && n.lookAt(this.five.camera.position.clone().setY(n.position.y)), n;
       });
       t.model = { promise: o };
       const i = yield o;
@@ -196,13 +197,13 @@ class ui extends O {
         return;
       t.model.object = i;
       const s = this.gltfObjectGroup.children.find((r) => r.customID === t.id);
-      if (s && (this.gltfObjectGroup.remove(s), s.removeEventListener()), this.updateRender3DDomTag(), S(t)) {
+      if (s && (this.gltfObjectGroup.remove(s), s.removeEventListener()), this.updateRender3DDomTag(), g(t)) {
         if (this.getRenderType(t) === "Mesh" && !t.mediaPlane) {
-          const r = t.data.mediaPosition.map(C);
-          t.mediaPlane = new E(t.data.mediaData[0].url, t.data.mediaPosition.map(C), {
+          const r = t.data.mediaPosition.map(D);
+          t.mediaPlane = new k(t.data.mediaData[0].url, t.data.mediaPosition.map(D), {
             objectFit: t.data.objectFit
           });
-          const n = new D().addVectors(r[0], r[2]).divideScalar(2);
+          const n = new b().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());
@@ -239,30 +240,30 @@ class ui extends O {
       var o, i;
       return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Video";
     }).forEach((e) => {
-      var m, c, h, u, b;
+      var m, h, P;
       const o = e.data.mediaData[0];
       if (!o)
         return;
       const { url: i } = o;
       if (!i)
         return;
-      e.mediaPlane && !((c = (m = e.state) == null ? void 0 : m.visible) == null || c) && e.mediaPlane instanceof k && e.mediaPlane.pause();
-      const s = e.position.map(C), a = this.getCurrentVisibleState(e), r = (() => !!(e.mediaPlane && !a))(), n = (() => !!(!e.mediaPlane && a))(), l = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
-      if ((r || l) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (h = e.mediaPlane) == null || h.dispose(), (u = e.mediaPlane) == null || u.removeFromParent(), e.mediaPlane = void 0), n || l) {
-        const f = new k(i, s, {
+      e.mediaPlane && !((h = (m = e.state) == null ? void 0 : m.visible) == null || h) && e.mediaPlane instanceof w && e.mediaPlane.pause();
+      const s = e.position.map(D), a = this.getCurrentVisibleState(e), r = (() => !!(e.mediaPlane && !a))(), n = (() => !!(!e.mediaPlane && a))(), p = (() => !!(e.mediaPlane && e.mediaPlane.src !== i))();
+      if ((r || p) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), n || p) {
+        const d = new w(i, s, {
           videoCoverSrc: o.videoCoverUrl,
           playButton: e.data.playIcon,
-          paused: !((b = e.data.autoplayConfig) != null && b.autoplayVideo),
+          paused: !((P = e.data.autoplayConfig) != null && P.autoplayVideo),
           objectFit: e.data.objectFit,
-          videoTextureMap: B,
-          ImageTextureMap: N,
+          videoTextureMap: q,
+          ImageTextureMap: B,
           domEvents: this.domEvents
         });
-        f.onVideoReady = (T) => {
-          T.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: f.videoInstance }));
+        d.onVideoReady = (u) => {
+          u.addEventListener("play", () => this.mediaStore.set({ currentMediaElement: d.videoInstance }));
         };
-        const v = (T) => (this.five.on("renderFrame", T), () => this.five.off("renderFrame", T));
-        f.initialRenderHooks(v), e.mediaPlane = f, this.imagePlaneGroup.add(e.mediaPlane);
+        const T = (u) => (this.five.on("renderFrame", u), () => this.five.off("renderFrame", u));
+        d.initialRenderHooks(T), e.mediaPlane = d, this.imagePlaneGroup.add(e.mediaPlane);
       }
     });
   }
@@ -274,13 +275,12 @@ class ui extends O {
       var o, i;
       return ((i = (o = e.data.mediaData) == null ? void 0 : o[0]) == null ? void 0 : i.type) === "Image";
     }).forEach((e) => {
-      var l, m;
       const { url: o } = e.data.mediaData[0];
       if (!o)
         return;
-      const i = e.position.map(C), s = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !s))(), r = (() => !!(!e.mediaPlane && s))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== o))();
-      (a || n) && (e.mediaPlane && this.imagePlaneGroup.remove(e.mediaPlane), (l = e.mediaPlane) == null || l.dispose(), (m = e.mediaPlane) == null || m.removeFromParent(), e.mediaPlane = void 0), (r || n) && (e.mediaPlane = new E(o, i, { objectFit: e.data.objectFit }), e.config.clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (c) => {
-        this.hooks.emit("click", { tag: e, target: "TagContent", event: c.origDomEvent });
+      const i = e.position.map(D), s = this.getCurrentVisibleState(e), a = (() => !!(e.mediaPlane && !s))(), r = (() => !!(!e.mediaPlane && s))(), n = (() => !!(e.mediaPlane && e.mediaPlane.src !== o))();
+      (a || n) && e.mediaPlane && (this.imagePlaneGroup.remove(e.mediaPlane), e.mediaPlane.dispose(), e.mediaPlane.removeFromParent(), e.mediaPlane = void 0), (r || n) && (e.mediaPlane = new k(o, i, { objectFit: e.data.objectFit }), this.getTagConfig(e).clickable !== !1 && this.domEvents.addAutoBindEventListener(e.mediaPlane, "click", (p) => {
+        this.hooks.emit("click", { tag: e, target: "TagContent", event: p.origDomEvent });
       }), this.imagePlaneGroup.add(e.mediaPlane));
     });
   }
@@ -291,16 +291,16 @@ class ui extends O {
     this.filterCSS3DTag.forEach((e) => {
       var o, i, s;
       if (e.tag3DContentSvelte) {
-        const { svelteApp: a, css3DInstance: r, initialNormal: n, currentNormal: l } = e.tag3DContentSvelte;
-        if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(l)) {
-          const m = new I().setFromUnitVectors(n, l);
+        const { svelteApp: a, css3DInstance: r, initialNormal: n, currentNormal: p } = e.tag3DContentSvelte;
+        if (a.$set({ tag: e, hooks: this.hooks, state: this.state, temporaryState: this.temporaryState }), !n.equals(p)) {
+          const m = new O().setFromUnitVectors(n, p);
           r.css3DObject.setRotationFromQuaternion(m);
         }
         return;
       } else {
-        if (S(e) && !((o = e.model) != null && o.object) || ((i = e.state) == null ? void 0 : i.visible) === !1 || !this.state.visible || !this.state.enabled)
+        if (g(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 = L(this.five)), e.stickType === "3DPoint" && !e.normal)
+        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = F(this.five)), e.stickType === "3DPoint" && !e.normal)
           return console.error("updateRenderPlaneTag: 三维点标签缺少法向量！");
         const a = this.getPositions(e);
         if (!a)
@@ -308,25 +308,25 @@ class ui extends O {
         const r = this.getTagNormal(e);
         if (!r)
           return;
-        const n = this.getTagConfig(e), l = w({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
-        if (this.getRenderType(e) === "BehindDom" || l.mode === "behind") {
-          l.mode = "behind", l.container = document.createElement("div");
-          const h = "black";
-          l.container.style.backgroundColor = h, l.container.style.border = `3px solid ${h}`, this.css3DRenderPlugin.hooks.on("render", () => {
-            var u;
+        const n = this.getTagConfig(e), p = j({ wrapperStyle: { zIndex: this.calculateTagZIndex(e).toString() } }, n.tag3DConfig);
+        if (this.getRenderType(e) === "BehindDom" || p.mode === "behind") {
+          p.mode = "behind", p.container = document.createElement("div");
+          const P = "black";
+          p.container.style.backgroundColor = P, p.container.style.border = `3px solid ${P}`, this.css3DRenderPlugin.hooks.on("render", () => {
+            var d;
             if (m.css3DObject.opacityMesh && n.clickable !== !1) {
-              const b = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (f) => {
-                this.hooks.emit("click", { event: f, target: "TagContent", tag: e });
+              const T = this.addObjectClickHandler(e, m.css3DObject.opacityMesh, (u) => {
+                this.hooks.emit("click", { event: u, target: "TagContent", tag: e });
               });
-              (u = this.store.css3DRenderDisposer.get(e.id)) == null || u.push(b);
+              (d = this.store.css3DRenderDisposer.get(e.id)) == null || d.push(T);
             }
           });
         }
-        const m = this.css3DRenderPlugin.create3DDomContainer(a, l);
+        const m = this.css3DRenderPlugin.create3DDomContainer(a, p);
         if (!m)
           return;
         this.store.css3DRenderDisposer.set(e.id, [m.dispose]);
-        const c = new F({
+        const h = new G({
           target: m.container,
           props: {
             tag: e,
@@ -338,15 +338,15 @@ class ui extends O {
           }
         });
         e.tag3DContentSvelte = {
-          svelteApp: c,
+          svelteApp: h,
           domContainer: m,
           css3DInstance: m,
           initialNormal: r,
           currentNormal: r,
           dispose: () => {
-            c.$destroy(), m.dispose();
+            h.$destroy(), m.dispose();
           }
-        }, S(e) && ((s = e.model) != null && s.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
+        }, g(e) && ((s = e.model) != null && s.object) && this.updateTagCss3DObjectMatrix(e, e.model.object);
       }
     }), this.clearUnusedPanelTag();
   }
@@ -377,23 +377,23 @@ class ui extends O {
    * @param model 模型
    */
   updateTagCss3DObjectMatrix(t, e) {
-    var b, f, v;
-    const o = (f = (b = t.config.tag3DConfig) == null ? void 0 : b.ratio) != null ? f : 216e-5, i = (v = t.tag3DContentSvelte) == null ? void 0 : v.css3DInstance.css3DObject;
+    var T, u, M;
+    const o = (u = (T = this.getTagConfig(t).tag3DConfig) == null ? void 0 : T.ratio) != null ? u : 216e-5, i = (M = t.tag3DContentSvelte) == null ? void 0 : M.css3DInstance.css3DObject;
     if (!i)
       return;
-    const s = S(t) ? t.data.mediaPosition : t.position;
+    const s = g(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 D().fromArray(s[0]), n = new D().fromArray(s[2]), l = q(r, n).add(new D(0, 0, 5e-4)), m = new g().setPosition(l), c = new g().makeScale(o, o, o), h = new g().multiply(a).multiply(m).multiply(c);
-    h.decompose(i.position, i.quaternion, i.scale);
-    const u = i.opacityMesh;
-    u && h.decompose(u.position, u.quaternion, u.scale);
+    const a = e.matrixWorld, r = new b().fromArray(s[0]), n = new b().fromArray(s[2]), p = $(r, n).add(new b(0, 0, 5e-4)), m = new v().setPosition(p), h = new v().makeScale(o, o, o), P = new v().multiply(a).multiply(m).multiply(h);
+    P.decompose(i.position, i.quaternion, i.scale);
+    const d = i.opacityMesh;
+    d && P.decompose(d.position, d.quaternion, d.scale);
   }
   /** 添加模型标签 */
   addMediaModelTag(t) {
-    return M(this, null, function* () {
-      const e = t.filter($).map((o) => this.loadModel(o));
+    return S(this, null, function* () {
+      const e = t.filter(W).map((o) => this.loadModel(o));
       yield Promise.all(e), this.setVisible(), this.updateRenderAllTags();
     });
   }
@@ -449,7 +449,7 @@ class ui extends O {
       const s = (o = this.five.getElement()) == null ? void 0 : o.parentElement;
       if (!s)
         return console.error("updateRenderPlaneTag: tag2DContainer not found");
-      this.TagContainerSvelte = new G({
+      this.TagContainerSvelte = new I({
         target: s,
         props: {
           hooks: this.hooks,

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

@@ -1,4 +1,4 @@
-import type { TagInstance, TagContentType, StickType, TagId, TagConfig, PlaneTag, MediaStore } from '../typings';
+import type { TagInstance, TagContentType, StickType, TagId, TagConfig, PlaneTag, MediaStore, Position } from '../typings';
 import * as THREE from 'three';
 import type { Tag, Tags, PointTagInstance, Point3DTag } from '../typings';
 import { TagCache } from './TagCache';
@@ -10,6 +10,9 @@ import { FiveDomEvents } from '../../shared-utils/five/FiveDomEvents';
 export declare abstract class TagUtil extends TagCache {
     tags: TagInstance[];
     config: Pick<Tags, 'globalConfig' | 'contentTypeConfig'>;
+    set workCode(workCode: string);
+    get workCode(): string;
+    protected get work(): import("@realsee/five").Work;
     protected mediaStore: MediaStore;
     /** css3DRenderPlugin */
     protected css3DRenderPlugin?: CSS3DRenderPluginExportType;
@@ -24,7 +27,7 @@ export declare abstract class TagUtil extends TagCache {
         disposed: boolean;
     };
     protected domEvents: FiveDomEvents;
-    private mouseInfo?;
+    private _workCode;
     protected constructor(five: Five);
     getTagById<C extends TagContentType = TagContentType, S extends StickType = StickType>(id: TagId): TagInstance<C, S> | undefined;
     /** 暂停当前标签内进行的所有多媒体 */
@@ -40,6 +43,7 @@ export declare abstract class TagUtil extends TagCache {
      * @description 获取标签当前状态
      */
     getCurrentVisibleState(tag: TagInstance): boolean;
+    protected getObserverPosition: (index: number) => THREE.Vector3;
     protected loadVideoFirstFrame: () => void;
     protected updateTagConfig(): void;
     protected can<T extends Tag>(action: 'show' | 'hide' | 'fold' | 'unfold', paramsTag: T): boolean;
@@ -52,8 +56,7 @@ export declare abstract class TagUtil extends TagCache {
      * @description: 获取距离
      */
     protected getDistance(tag: TagInstance, fiveState?: Partial<FiveState>): number;
-    protected getPositions(tag: TagInstance): [THREE.Vector3, THREE.Vector3, THREE.Vector3, THREE.Vector3] | [import("../typings").ArrayPosition, import("../typings").ArrayPosition, import("../typings").ArrayPosition, import("../typings").ArrayPosition];
-    protected preventWhenMouseDown: () => false | void;
+    protected getPositions(tag: TagInstance): [Position, Position, Position, Position];
     protected addObjectClickHandler(tag: TagInstance, object: THREE.Object3D | undefined, handler: (event: Event) => any): () => void;
     protected getTagNormal(tag: TagInstance): THREE.Vector3 | undefined;
     protected get filterPointTag(): PointTagInstance[];
@@ -61,6 +64,7 @@ export declare abstract class TagUtil extends TagCache {
     protected get filterImagePlane(): TagInstance<"MediaPlane", "Plane">[];
     protected get filterMediaModel(): TagInstance<"MediaModel", "Model">[];
     protected get filterCSS3DTag(): (TagInstance<"Model" | "Custom" | "Audio" | "Text" | "ImageText" | "Image" | "Video" | "Link" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Unknown", "Plane"> | TagInstance<"Model" | "Custom" | "Audio" | "Text" | "ImageText" | "Image" | "Video" | "Link" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Unknown", "Model"> | TagInstance<"Model" | "Custom" | "Audio" | "Text" | "ImageText" | "Image" | "Video" | "Link" | "Sticker" | "VRLink" | "PanoLink" | "Marketing" | "MediaPlane" | "MediaModel" | "Unknown", "3DPoint">)[];
+    protected getTransformedPostion(position: Tag['position']): THREE.Vector3 | [THREE.Vector3, THREE.Vector3, THREE.Vector3, THREE.Vector3];
     /**
      * @description 检查是否已经销毁
      * @returns isDisposed; 已经销毁返回 true，否则返回 false