@realsee/dnalogel 3.32.1 → 3.33.0

package/dist/index.js

@@ -48,7 +48,7 @@ import Um from "earcut";
 import { GLTFLoader as Ym } from "@realsee/five/gltf-loader";
 function Xm() {
   console.debug(
-    "%c %c@realsee/dnalogel %cv3.32.1",
+    "%c %c@realsee/dnalogel %cv3.33.0",
     [
       "background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABLFBMVEUAAAAapPoap/oaqvkbrfkbr/gZnfwZoPsaqfnD4v/E4/8Ylv0clPm93/+/4P/B4f8Yj/683/8Wif+33P8Uhv+x2f8ShP+s1v8Pgf+n0/8Nf/+h0f8Lff8Lff8Nf/9dl/+czv8KfP8KfP+Lxf+Uyv+Xy/+Hwv+Jw/+Mxf+Oxv+RyP8aovsapfoap/oZmfwZm/wZnvsYnPsYkf4YlP0NePsDYfgYcfi43f+63v8Xiv8Xjf4EWfwCV/sWZ/qz2v+02/8Vh/8WiP8EUf8CTf4WXv2u1/+v2P8Thf8Thv8ETf8CR/8VV/+o1f+q1f8Qgv8Rg/8DSv8BRf8UVP+j0v+k0v8OgP8Pgf8DR/8DQv9Nhf+dzv+fz/+Kv/+Vyv+Xy/+azf+Oxv+Qx/+SyP////8MUhLdAAAAK3RSTlMACEWQ2bd98uQECPXxqO7c+Pb49vj2+Pb49vj23Oul8fMHA+TwerXXjEIG2P+bHgAAAAFiS0dEY1y+LaoAAAB+SURBVAjXY2BgZGJmYWVgYGBgY9fW0eVg4ORi4NbTNzDk4eXjZxAwMjYxNTO3EGQQsrSytrG1sxdmEHFwdHJ2cXUTZRBz9/D08vbxFWeQ8PMPCAwKDpFkkAoNC4+IjIqWZpCRlZOPiY2LV2BQVGJQTkhMUlEFWaOmrqGpxQAAyg0S9Dq+VPYAAAAASUVORK5CYII=')",
       "background-repeat: no-repeat",
@@ -1210,19 +1210,25 @@ class mc extends Gm {
     d(this, "wrapper");
     d(this, "requestAnimationFrameId");
     d(this, "resizeDisoper");
-    this.domElement.classList.add("ICSS3DRenderer"), this.domElement.style.position = "absolute", this.domElement.style.top = "0", this.domElement.style.left = "0", this.domElement.style.userSelect = "none", this.domElement.style.pointerEvents = "none";
+    d(this, "domElementWrapper", document.createElement("div"));
+    this.domElementWrapper.classList.add("ICSS3DRendererWrapper"), this.domElementWrapper.style.position = "absolute", this.domElementWrapper.style.top = "0", this.domElementWrapper.style.left = "0", this.domElementWrapper.style.width = "100%", this.domElementWrapper.style.height = "100%", this.domElementWrapper.style.userSelect = "none", this.domElementWrapper.style.pointerEvents = "none", this.domElement.classList.add("ICSS3DRenderer"), this.domElement.style.position = "absolute", this.domElement.style.top = "0", this.domElement.style.left = "0", this.domElement.style.userSelect = "none", this.domElement.style.pointerEvents = "none", this.domElementWrapper.appendChild(this.domElement);
   }
   setWrapper(e) {
     if (!e)
       throw new Error("CSS3DRenderer: wrapper is required");
-    if (e.contains(this.domElement))
+    if ((() => {
+      for (let o = 0; o < e.children.length; o++)
+        if (e.children.item(o) === this.domElementWrapper)
+          return !0;
+      return !1;
+    })())
       return;
-    const i = this.wrapper;
-    return i && i.contains(this.domElement) && this.domElement.remove(), this.appendToElement(e), this.wrapper = e, this;
+    const s = this.wrapper;
+    return s && s.contains(this.domElementWrapper) && this.domElementWrapper.remove(), this.appendToElement(e), this.wrapper = e, this;
   }
   appendToElement(e) {
-    e.appendChild(this.domElement);
-    const i = (r, a) => this.setSize(r, a), { observe: s, unobserve: o } = up(e, i, !0);
+    e.appendChild(this.domElementWrapper);
+    const i = (r, a) => this.setSize(r, a), { observe: s, unobserve: o } = up(this.domElementWrapper, i, !0);
     s(), this.resizeDisoper = o, this.wrapper = e;
   }
   renderEveryFrame(e, i) {
@@ -1238,7 +1244,7 @@ class mc extends Gm {
   }
   dispose() {
     var e;
-    this.stopRender(), (e = this.resizeDisoper) == null || e.call(this), this.domElement.remove();
+    this.stopRender(), (e = this.resizeDisoper) == null || e.call(this), this.domElementWrapper.remove();
   }
 }
 function fp(n) {
@@ -2488,8 +2494,10 @@ let qp = class extends Ns {
     super();
     d(this, "five");
     d(this, "behindFiveContainer");
+    d(this, "frontFiveContainer");
     d(this, "VERSION", bf);
     d(this, "staticPrefix", "//vr-image-4.realsee-cdn.cn");
+    d(this, "created3DElementResults", []);
     /**
      * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
      * @param { Vector3Position[] } points 矩形四个点坐标
@@ -2553,7 +2561,7 @@ let qp = class extends Ns {
         const h = a.css3DObject.mode === "front" ? o.parentElement : this.getBehindFiveElement();
         if (!h)
           return console.error(`${ga}: wrapper is ${h}`);
-        a.appendToElement(h), a.render();
+        a.appendToElement(h), a.render(), this.created3DElementResults.push(a);
       }, c = () => {
         a.css3DObject.mode === "front" && l(), a.css3DObject.mode === "behind" && bl(this.five).then(() => l());
       };
@@ -2569,6 +2577,16 @@ let qp = class extends Ns {
     const i = super.setState(...e);
     return this.five.needsRender = !0, i;
   }
+  appendToFrontFiveContainer(e) {
+    this.frontFiveContainer = e, this.created3DElementResults.forEach((i) => {
+      i.css3DObject.mode === "front" && i.appendToElement(e);
+    });
+  }
+  appendToBehindFiveContainer(e) {
+    this.behindFiveContainer = e, this.created3DElementResults.forEach((i) => {
+      i.css3DObject.mode === "behind" && i.appendToElement(e);
+    });
+  }
   getBehindFiveElement() {
     return this.behindFiveContainer ? this.behindFiveContainer : (this.behindFiveContainer = cf(this.five), this.behindFiveContainer);
   }
@@ -7423,7 +7441,7 @@ let rn = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    d(this, "VERSION", "3.32.1");
+    d(this, "VERSION", "3.33.0");
     d(this, "five");
     /**
      * @description: 插件事件钩子
@@ -18048,8 +18066,6 @@ class Yw extends Qw {
     d(this, "mediaStore", Tl({
       currentMediaElement: null
     }));
-    /** css3DRenderPlugin */
-    d(this, "css3DRenderPlugin");
     d(this, "store", {
       disposers: [],
       disposed: !1,
@@ -18067,6 +18083,7 @@ class Yw extends Qw {
     //   | TagInstance<TagContentType, '3DPoint'>
     // )[]
     d(this, "_container", null);
+    d(this, "_css3DRenderPlugin");
     d(this, "loadVideoFirstFrame", () => {
       Fw && this.hooks.emit("loadVideoFirstFrame");
     });
@@ -18094,6 +18111,10 @@ class Yw extends Qw {
   get workCode() {
     return this.workUtil.workCode;
   }
+  /** css3DRenderPlugin */
+  get css3DRenderPlugin() {
+    return this._css3DRenderPlugin || (this._css3DRenderPlugin = yf(this.five)), this._css3DRenderPlugin;
+  }
   getTagById(e) {
     const i = this.tags.find((s) => s.id === e);
     if (!i) {
@@ -28604,9 +28625,9 @@ class eM extends Zw {
         }
         return;
       } else {
-        if ($t(i) && !((s = i.model) != null && s.object) || ((o = i.state) == null ? void 0 : o.visible) === !1 || !this.state.visible || !this.state.enabled)
+        if ($t(i) && !((s = i.model) != null && s.object) || ((o = i.state) == null ? void 0 : o.visible) === !1 || !this.state.visible || !this.state.enabled || !this.css3DRenderPlugin)
           return;
-        if (this.css3DRenderPlugin || (this.css3DRenderPlugin = yf(this.five)), i.stickType === "3DPoint" && !i.normal)
+        if (i.stickType === "3DPoint" && !i.normal)
           return console.error("updateRenderPlaneTag: 三维点标签缺少法向量！");
         const a = this.getPositions(i);
         if (!a)
@@ -28929,10 +28950,10 @@ class rl extends eM {
     }
   }
   appendTo(e) {
-    var s, o, r;
+    var s, o, r, a;
     this.container = e;
     const i = (o = (s = this.TagContainerSvelte) == null ? void 0 : s.$$) == null ? void 0 : o.root;
-    i && i !== this.container && ((r = this.TagContainerSvelte) == null || r.$destroy(), this.TagContainerSvelte = void 0, this.updateDomView());
+    i && i !== this.container && ((r = this.css3DRenderPlugin) == null || r.appendToFrontFiveContainer(this.container), (a = this.TagContainerSvelte) == null || a.$destroy(), this.TagContainerSvelte = void 0, this.updateDomView());
   }
   /**
    * @description 加载数据