@realsee/dnalogel 2.2.5-alpha.0 → 2.2.6

package/libs/CSS3DRenderPlugin/CSS3DRender.js

@@ -1,76 +1,57 @@
-var N = Object.defineProperty;
-var E = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, $ = Object.prototype.propertyIsEnumerable;
-var M = (o, e, t) => e in o ? N(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, C = (o, e) => {
+var Z = Object.defineProperty;
+var x = Object.getOwnPropertySymbols;
+var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
+var F = (b, e, t) => e in b ? Z(b, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : b[e] = t, U = (b, e) => {
   for (var t in e || (e = {}))
-    x.call(e, t) && M(o, t, e[t]);
-  if (E)
-    for (var t of E(e))
-      $.call(e, t) && M(o, t, e[t]);
-  return o;
+    ee.call(e, t) && F(b, t, e[t]);
+  if (x)
+    for (var t of x(e))
+      te.call(e, t) && F(b, t, e[t]);
+  return b;
 };
-var i = (o, e, t) => (M(o, typeof e != "symbol" ? e + "" : e, t), t);
-var p = (o, e, t) => new Promise((r, s) => {
-  var d = (c) => {
+var l = (b, e, t) => (F(b, typeof e != "symbol" ? e + "" : e, t), t);
+var C = (b, e, t) => new Promise((s, n) => {
+  var d = (i) => {
     try {
-      f(t.next(c));
-    } catch (S) {
-      s(S);
+      a(t.next(i));
+    } catch (f) {
+      n(f);
     }
-  }, l = (c) => {
+  }, c = (i) => {
     try {
-      f(t.throw(c));
-    } catch (S) {
-      s(S);
+      a(t.throw(i));
+    } catch (f) {
+      n(f);
     }
-  }, f = (c) => c.done ? r(c.value) : Promise.resolve(c.value).then(d, l);
-  f((t = t.apply(o, e)).next());
+  }, a = (i) => i.done ? s(i.value) : Promise.resolve(i.value).then(d, c);
+  a((t = t.apply(b, e)).next());
 });
-import { ICSS3DRenderer as O } from "./utils/three/CSS3DRenderer.js";
-import { Subscribe as _ } from "../shared-utils/Subscribe.js";
-import "three";
-import { anyPositionToVector3 as k } from "./utils/positionToVector3.js";
-import { CSS3DObjectPlus as P } from "./utils/three/CSS3DObject.js";
-import { CSS3DFrontScene as V, CSS3DBehindScene as q } from "./utils/three/CSS3DScene.js";
-import { CSS3DFrontGroup as A, CSS3DBehindGroup as L } from "./utils/three/CSS3DGroup.js";
-import { CSS3DObject as R } from "three/examples/jsm/renderers/CSS3DRenderer";
-const W = 3, g = "CSS3DRenderer", b = `${g}@${W}`, u = () => {
-  console.error(`${b} is disposed`);
-}, n = {
-  css3DObjects: [],
-  frontModeStore: {
-    css3DRenderer: new O()
-  },
-  behindModeStore: {
-    css3DRenderer: new O()
-  }
-};
-function B(o) {
-  return n.css3DObjects.find((e) => e.id === o);
-}
-function H(o) {
-  n.frontModeStore.css3DRenderer.setWrapper(o);
-}
-function T(o) {
-  n.behindModeStore.css3DRenderer.setWrapper(o);
-}
-class w {
-  constructor(e) {
-    i(this, "hooks", new _());
-    i(this, "state", {
+import * as y from "three";
+import { CSS3DRenderer as H } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { Subscribe as se } from "../shared-utils/Subscribe.js";
+import { evenNumber as N } from "./utils/evenNumber.js";
+import { anyPositionToVector3 as oe } from "./utils/positionToVector3.js";
+import { CSS3DObjectPlus as ne } from "./utils/CSS3DObjectPlus.js";
+const re = "v2.0.1", _ = "CSS3DRenderer", m = `${_}@${re}`, V = (b) => `${m}--${b}`, o = {};
+class fe {
+  constructor() {
+    l(this, "hooks", new se());
+    l(this, "state", {
       enabled: !0,
       visible: !0,
       disposed: !1
     });
-    i(this, "_scene");
-    i(this, "store", {
-      frontModeGroup: new A()
+    l(this, "store", {
+      rendered: !1,
+      disposers: [],
+      frontModeCSS3DObjects: {},
+      behindModeCSS3DObjects: {}
     });
-    i(this, "create3DElement", (e, t, r) => {
+    l(this, "create3DElement", (e, t, s) => {
       if (this.state.disposed)
-        return u();
-      const s = (() => {
-        const h = {
+        return this.disposedErrorLog();
+      const n = (() => {
+        const r = {
           ratio: 216e-5,
           devicePixelRatio: 1,
           mode: "front",
@@ -78,186 +59,269 @@ class w {
           container: document.createElement("div"),
           pointerEvents: "none"
         };
-        return Object.assign(h, r);
-      })(), d = t.map(k);
+        return Object.assign(r, s);
+      })(), d = t.map(oe);
       if ((d == null ? void 0 : d.length) < 4)
-        return console.error(`${b}: requires 4 point but params may have fewer`);
-      const { ratio: l, devicePixelRatio: f, mode: c, autoRender: S, container: G, pointerEvents: F } = s, a = this.createObject(d, { ratio: l, dpr: f, container: G, mode: c, pointerEvents: F });
-      n.css3DObjects.push(a), s.scene && this.setScene(s.scene);
-      const I = () => {
-        const h = a.mode === "front" ? this.getFrontCSS3DObjectGroup() : this.getBehindCSS3DObjectGroup();
-        !h || h.add(a);
-      }, v = () => {
-        I(), this.render(e);
-      }, D = (h) => this.setVisibleById(a.id, h), m = (h) => this.setEnabledById(a.id, h), j = () => (a.removeFromParent(), !0), y = c === "front" ? n.frontModeStore.css3DRenderer : n.behindModeStore.css3DRenderer;
-      return S && v(), {
-        id: a.uuid,
-        container: G,
-        css3DObject: a,
-        render: S ? void 0 : v,
-        show: () => D(!0),
-        hide: () => D(!1),
-        setVisible: D,
-        enable: () => m(!0),
-        disable: () => m(!1),
-        setEnabled: m,
-        dispose: j,
-        appendToElement: (h) => y.setWrapper(h)
+        return console.error(`${m}: requires 4 point but params may have fewer`);
+      const { ratio: c, devicePixelRatio: a, mode: i, autoRender: f, container: u, pointerEvents: G } = n, z = [], { css3DObject: h, opacityMesh: O } = this.createObject(d, { ratio: c, dpr: a, container: u, mode: i, pointerEvents: G });
+      u.id = `container--${h.uuid}`;
+      const Q = i === "front" && !o.frontModeStore, W = i === "behind" && !o.behindModeStore;
+      i === "front" && this.initGlobalModeStore("front"), i === "behind" && this.initGlobalModeStore("behind", n.scene), h.hooks.on("changeMode", (r, D, M) => {
+        var B, L, P;
+        if (r === D)
+          return;
+        r === "front" && this.initGlobalModeStore("front"), r === "behind" && this.initGlobalModeStore("behind", M);
+        const S = D === "front" ? o.frontModeStore : o.behindModeStore, p = r === "front" ? o.frontModeStore : o.behindModeStore, I = D === "behind" ? this.store.behindModeCSS3DObjects : this.store.frontModeCSS3DObjects, w = r === "behind" ? this.store.behindModeCSS3DObjects : this.store.frontModeCSS3DObjects;
+        if (!I || !w)
+          return console.error(`${m}: changeMode error: prevObjects or nextObjects is undefined`);
+        const j = I[h.uuid];
+        if (!j)
+          return console.error(`${m}: changeMode error: prevObject is undefined`);
+        if (r === "behind") {
+          const T = (B = j.opacityMesh) != null ? B : this.createOpacityMesh(j.css3DObject);
+          S == null || S.css3DScene.remove(j.css3DObject), w[h.uuid] = { css3DObject: h, opacityMesh: T, visible: !0, enabled: !0, mode: r, scene: M }, p == null || p.css3DScene.add(h), M == null || M.add(T);
+        }
+        r === "front" && (S == null || S.css3DScene.remove(j.css3DObject), (P = (L = I[h.uuid]) == null ? void 0 : L.scene) == null || P.remove(j.opacityMesh), w[h.uuid] = { css3DObject: h, visible: !0, enabled: !0, mode: r }, p == null || p.css3DScene.add(h)), r === "behind" && this.appendToElement(o.behindModeContainer, "behind"), r === "front" && this.appendToElement(o.frontModeContainer, "front"), this.render(e), console.log("change success");
+      });
+      const g = i === "front" ? o.frontModeStore : o.behindModeStore, { css3DScene: E, css3DRenderer: v } = g, q = (() => {
+        const r = () => {
+          var M, S;
+          const D = h.mode;
+          if (D === "front")
+            this.store.frontModeCSS3DObjects[h.uuid] = {
+              visible: !0,
+              enabled: !0,
+              css3DObject: h,
+              mode: "front"
+            };
+          else {
+            if (!n.scene)
+              return;
+            this.store.behindModeCSS3DObjects[h.uuid] = {
+              visible: !0,
+              enabled: !0,
+              css3DObject: h,
+              opacityMesh: O,
+              mode: "behind",
+              scene: n.scene
+            };
+          }
+          E.getObjectById(h.id) || E.add(h), D === "behind" && O && ((M = n.scene) != null && M.getObjectById(O.id) || (S = n.scene) == null || S.add(O), z.push(() => {
+            var p;
+            return O && ((p = n.scene) == null ? void 0 : p.remove(O));
+          }));
+        };
+        return Q || W ? (v.domElement.style.position = "absolute", v.domElement.style.top = "0", v.domElement.style.userSelect = "none", v.domElement.style.pointerEvents = "none", v.domElement.classList.add(V(i)), () => {
+          r(), this.render(e);
+        }) : (this.store.rendered = !0, () => r());
+      })(), k = i === "front" ? o.frontModeContainer : o.behindModeContainer;
+      if (k) {
+        this.appendToElement(k, i);
+        const r = i === "front" ? o.frontModeStore : o.behindModeStore;
+        r && (r.appendedToPage = !0);
+      }
+      const R = (r) => this.setVisibleById(h.uuid, r), A = (r) => this.setEnabledById(h.uuid, r), J = () => R(!0), K = () => R(!1), X = () => A(!0), Y = () => A(!1), $ = () => (delete this.store.frontModeCSS3DObjects[h.uuid], delete this.store.behindModeCSS3DObjects[h.uuid], z.forEach((r) => r == null ? void 0 : r()), E.remove(h), E.children.length === 0 && (typeof g.requestAnimationFrameId == "number" && cancelAnimationFrame(g.requestAnimationFrameId), v.domElement.remove(), i === "front" && (o.frontModeStore = void 0), i === "behind" && (o.behindModeStore = void 0), o.frontModeResizeObserver = void 0, o.behindModeResizeObserver = void 0), !0);
+      return this.store.disposers.push($), f && q(), {
+        id: h.uuid,
+        container: u,
+        dispose: $,
+        css3DObject: h,
+        render: f ? void 0 : q,
+        show: J,
+        hide: K,
+        setVisible: R,
+        disable: Y,
+        enable: X,
+        setEnabled: A,
+        appendToElement: (r) => this.appendToElement(r, i)
       };
     });
-    i(this, "setVisibleById", (e, t) => {
-      var r;
-      (r = B(e)) == null || r.setVisible(t);
+    l(this, "setVisibleById", (e, t) => {
+      var n;
+      const s = (n = this.store.frontModeCSS3DObjects[e]) != null ? n : this.store.behindModeCSS3DObjects[e];
+      if (!s)
+        return console.error("id not found", e);
+      s.visible = t, this.state.visible && (s.css3DObject.visible = t, s.mode === "behind" && (s.opacityMesh.visible = t));
     });
-    i(this, "setEnabledById", (e, t) => {
-      const r = B(e);
-      if (!r)
+    l(this, "setEnabledById", (e, t) => {
+      var d, c, a;
+      const s = (d = this.store.frontModeCSS3DObjects[e]) != null ? d : this.store.behindModeCSS3DObjects[e];
+      if (!s)
         return;
-      const s = r.mode === "front" ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }) : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 });
-      !s || (t ? s.add(r) : s.remove(r));
+      const n = s.mode === "front" ? (c = o.frontModeStore) == null ? void 0 : c.css3DScene : (a = o.behindModeStore) == null ? void 0 : a.css3DScene;
+      !n || (t ? (n.add(s.css3DObject), s.mode === "behind" && s.scene.add(s.opacityMesh)) : (n.remove(s.css3DObject), s.mode === "behind" && s.scene.remove(s.opacityMesh)), s.enabled = t);
     });
-    i(this, "createObject", (e, t) => {
-      const r = new P(C({ cornerPoints: e }, t));
-      return r.element.classList.add(`${g}__container`), r.element.id = `${g}__container--${r.uuid}`, r;
+    l(this, "createObject", (e, t) => {
+      const { ratio: s, dpr: n, container: d, mode: c, pointerEvents: a } = t, i = new ne(d, e, s, n, c);
+      d.style.pointerEvents = a, d.classList.add(`${_}__container`);
+      const f = c === "behind" ? this.createOpacityMesh(i) : void 0;
+      return { css3DObject: i, opacityMesh: f };
+    });
+    l(this, "createOpacityMesh", (e) => {
+      const { domWidthPx: t, domHeightPx: s } = e, n = new y.MeshBasicMaterial({
+        opacity: 0,
+        color: 0,
+        transparent: !1,
+        side: y.DoubleSide
+      }), d = new y.PlaneGeometry(t, s), c = new y.Mesh(d, n);
+      return c.name = V("mesh"), c.position.copy(e.position), c.rotation.copy(e.rotation), c.scale.copy(e.scale), e.hooks.on("applyMatrix4", (a) => c.applyMatrix4(a)), e.hooks.on("applyQuaternion", (a) => c.applyQuaternion(a)), e.hooks.on("applyScaleMatrix4", (a) => c.scale.applyMatrix4(a)), c;
+    });
+    l(this, "createResizeObserver", (e, t, s = !0) => {
+      if (!e)
+        return console.error("createResizeObserver: element is undefined"), { observe: () => {
+        }, unobserve: () => {
+        } };
+      const n = () => {
+        const c = N(e.clientWidth, { smaller: !0 }), a = N(e.clientHeight, { smaller: !0 });
+        t(c, a);
+      };
+      if (typeof ResizeObserver == "undefined" || !ResizeObserver)
+        return console.warn("createResizeObserver: ResizeObserver is undefined"), { observe: () => n(), unobserve: () => {
+        } };
+      const d = new ResizeObserver(n);
+      return s && n(), {
+        observe: () => d.observe(e),
+        unobserve: () => d.unobserve(e)
+      };
+    });
+    l(this, "disposedErrorLog", () => {
+      console.error(`${m} is disposed`);
     });
-    e && this.setScene(e);
-  }
-  get scene() {
-    return this._scene || console.error("scene doesn't exist!, please call setScene(scene) first"), this._scene;
-  }
-  static get frontModeCSS3DRenderer() {
-    return n.frontModeStore.css3DRenderer;
-  }
-  static get behindModeCSS3DRenderer() {
-    return n.behindModeStore.css3DRenderer;
-  }
-  get frontModeCSS3DRenderer() {
-    return n.frontModeStore.css3DRenderer;
-  }
-  get behindModeCSS3DRenderer() {
-    return n.behindModeStore.css3DRenderer;
-  }
-  setScene(e) {
-    this._scene = e;
   }
   getCurrentState() {
     return this.state;
   }
   setState(e, t = { userAction: !0 }) {
     if (this.state.disposed)
-      return u();
-    const r = C({}, this.state);
-    this.state = Object.assign(this.state, e), r.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), r.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), r.disposed !== this.state.disposed && this.handleDispose(), this.hooks.emit("stateChange", { state: this.state, prevState: r, userAction: t.userAction });
+      return this.disposedErrorLog();
+    const s = U({}, this.state);
+    this.state = Object.assign(this.state, e), s.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), s.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: s, userAction: t.userAction });
   }
   dispose() {
-    this.setState({ disposed: !0 }), this.hooks.emit("dispose");
+    this.store.disposers.forEach((e) => e == null ? void 0 : e()), this.store.disposers = [], this.hooks.emit("dispose"), this.state.disposed = !0;
   }
   show() {
-    return p(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
+    return C(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
       if (this.state.disposed)
-        return u();
+        return this.disposedErrorLog();
       this.setState({ visible: !0 }, { userAction: e }), this.hooks.emit("show", { userAction: e });
     });
   }
   hide() {
-    return p(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
+    return C(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
       if (this.state.disposed)
-        return u();
+        return this.disposedErrorLog();
       this.setState({ visible: !1 }, { userAction: e }), this.hooks.emit("hide", { userAction: e });
     });
   }
   enable({ userAction: e } = { userAction: !0 }) {
     if (this.state.disposed)
-      return u();
+      return this.disposedErrorLog();
     this.setState({ enabled: !0 }, { userAction: e }), this.hooks.emit("enable", { userAction: e });
   }
   disable({ userAction: e } = { userAction: !0 }) {
     if (this.state.disposed)
-      return u();
+      return this.disposedErrorLog();
     this.setState({ enabled: !1 }, { userAction: e }), this.hooks.emit("disable", { userAction: e });
   }
-  getFrontCSS3DScene({ createSceneIfNotExists: e = !1 } = {}) {
-    var r;
-    const t = (r = n.frontModeStore) == null ? void 0 : r.css3DScene;
-    if (t)
-      return t;
-    if (e) {
-      const s = new V();
-      n.frontModeStore.css3DScene = s;
-    }
-    return n.frontModeStore.css3DScene;
+  setContainer(e, t) {
+    t === "front" ? o.frontModeContainer = e : o.behindModeContainer = e;
   }
-  getBehindCSS3DScene({ createSceneIfNotExists: e = !1 } = {}) {
-    var r, s;
-    const t = (r = n.behindModeStore) == null ? void 0 : r.css3DScene;
-    if (t)
-      return t;
-    if (e) {
-      const d = (s = n.behindModeStore.scene) != null ? s : this.scene;
-      if (!d) {
-        console.error(`${b}: scene is required when mode is behind`);
-        return;
+  appendToElement(e, t) {
+    const s = t === "front" ? o.frontModeStore : o.behindModeStore;
+    if (!s) {
+      if (t === "front" && !o.frontModeContainer) {
+        if (!e)
+          throw new Error(`${m} Cannot append to container: front mode but container is ${e}`);
+        o.frontModeContainer = e;
       }
-      const l = new q(d);
-      n.behindModeStore.css3DScene = l, n.behindModeStore.scene = d;
+      if (t === "behind" && !o.behindModeContainer) {
+        if (!e)
+          throw new Error(`${m} Cannot append to container: behind mode but container is ${e}`);
+        o.behindModeContainer = e;
+      }
+      return;
     }
-    return n.behindModeStore.css3DScene;
-  }
-  getFrontCSS3DObjectGroup({ addGroupIfNotExists: e = !0 } = {}) {
-    const t = this.getFrontCSS3DScene({ createSceneIfNotExists: e });
-    return e && t && (t.getObjectById(this.store.frontModeGroup.id) || t.add(this.store.frontModeGroup)), this.store.frontModeGroup;
-  }
-  getBehindCSS3DObjectGroup({ addGroupIfNotExists: e = !0 } = {}) {
-    var r;
-    const t = this.getBehindCSS3DScene({ createSceneIfNotExists: e });
-    if (e && t && this.scene) {
-      const s = (r = this.store.behindModeGroup) != null ? r : new L(this.scene);
-      this.store.behindModeGroup = s, t.getObjectById(s.id) || t.add(s);
+    if (s.appendedToPage)
+      return;
+    const n = t === "behind" ? o.behindModeContainer : o.frontModeContainer;
+    if (!n)
+      return console.error("wrapper is undefined");
+    if (n.appendChild(s.css3DRenderer.domElement), t === "behind" && !o.behindModeResizeObserver) {
+      const d = (i, f) => {
+        var u;
+        (u = o.behindModeStore) == null || u.css3DRenderer.setSize(i, f);
+      }, { observe: c, unobserve: a } = this.createResizeObserver(n, d, !0);
+      o.behindModeResizeObserver = { observe: c, unobserve: a }, c(), this.store.disposers.push(a);
+    }
+    if (t === "front" && !o.frontModeResizeObserver) {
+      const d = (i, f) => {
+        var u;
+        (u = o.frontModeStore) == null || u.css3DRenderer.setSize(i, f);
+      }, { observe: c, unobserve: a } = this.createResizeObserver(n, d, !0);
+      o.frontModeResizeObserver = { observe: c, unobserve: a }, c(), this.store.disposers.push(a);
     }
-    return this.store.behindModeGroup;
+    s.appendedToPage = !0;
   }
   render(e) {
-    var t, r;
-    if (this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }).children.length > 0) {
-      const s = this.getFrontCSS3DScene({ createSceneIfNotExists: !0 });
-      if (!s)
-        return console.error(`${b}: css3DScene is required when mode is front`);
-      n.frontModeStore.css3DRenderer.renderEveryFrame(s, e);
+    const t = o.behindModeStore, s = o.frontModeStore;
+    if (t && Object.keys(this.store.behindModeCSS3DObjects).length > 0 && !t.requestAnimationFrameId) {
+      const n = () => {
+        const d = requestAnimationFrame(n);
+        t.requestAnimationFrameId = d, t.css3DRenderer.render(t.css3DScene, e);
+      };
+      n();
     }
-    if (((r = (t = this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 })) == null ? void 0 : t.children.length) != null ? r : 0) > 0) {
-      const s = this.getBehindCSS3DScene({ createSceneIfNotExists: !0 });
-      if (!s)
-        return console.error(`${b}: css3DScene is required when mode is behind`);
-      n.behindModeStore.css3DRenderer.renderEveryFrame(s, e);
+    if (s && Object.keys(this.store.frontModeCSS3DObjects).length > 0 && !s.requestAnimationFrameId) {
+      const n = () => {
+        const d = requestAnimationFrame(n);
+        s.requestAnimationFrameId = d, s.css3DRenderer.render(s.css3DScene, e);
+      };
+      n();
     }
+    Object.keys(this.store.frontModeCSS3DObjects).length === 0 && (s == null ? void 0 : s.requestAnimationFrameId) !== void 0 && (cancelAnimationFrame(s.requestAnimationFrameId), s.requestAnimationFrameId = void 0), Object.keys(this.store.behindModeCSS3DObjects).length === 0 && (t == null ? void 0 : t.requestAnimationFrameId) !== void 0 && (cancelAnimationFrame(t.requestAnimationFrameId), t.requestAnimationFrameId = void 0);
+  }
+  initGlobalModeStore(e, t) {
+    const s = e === "front" && !o.frontModeStore;
+    e === "behind" && !o.behindModeStore && (o.behindModeStore = { scene: t, css3DScene: new y.Scene(), css3DRenderer: new H() }), s && (o.frontModeStore = { css3DScene: new y.Scene(), css3DRenderer: new H() });
   }
   handleShow() {
-    return p(this, null, function* () {
-      this.store.frontModeGroup.visible = !0, this.store.behindModeGroup && (this.store.behindModeGroup.visible = !0);
+    return C(this, null, function* () {
+      Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
+        e.css3DObject.visible = e.visible;
+      }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
+        e.css3DObject.visible = e.visible, e.opacityMesh.visible = e.visible;
+      });
     });
   }
   handleHide() {
-    return p(this, null, function* () {
-      this.store.frontModeGroup.visible = !1, this.store.behindModeGroup && (this.store.behindModeGroup.visible = !1);
+    return C(this, null, function* () {
+      Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
+        e.css3DObject.visible = !1;
+      }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
+        e.css3DObject.visible = !1, e.opacityMesh.visible = !1;
+      });
     });
   }
   handleEnable() {
-    var e, t;
-    (e = this.getFrontCSS3DScene()) == null || e.add(this.store.frontModeGroup), this.store.behindModeGroup && ((t = this.getBehindCSS3DScene()) == null || t.add(this.store.behindModeGroup));
+    Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
+      var t;
+      !e.enabled || (t = o.frontModeStore) == null || t.css3DScene.add(e.css3DObject);
+    }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
+      var t, s;
+      !e.enabled || ((t = o.behindModeStore) == null || t.css3DScene.add(e.css3DObject), (s = o.behindModeStore) == null || s.scene.add(e.opacityMesh));
+    });
   }
   handleDisable() {
-    var e, t, r;
-    this.store.frontModeGroup.children.forEach((s) => {
-      s instanceof R && s.element instanceof Element && s.element.parentNode !== null && s.element.parentNode.removeChild(s.element);
-    }), (e = this.store.behindModeGroup) == null || e.children.forEach((s) => {
-      s instanceof R && s.element instanceof Element && s.element.parentNode !== null && s.element.parentNode.removeChild(s.element);
-    }), (t = this.getFrontCSS3DScene()) == null || t.remove(this.store.frontModeGroup), this.store.behindModeGroup && ((r = this.getBehindCSS3DScene()) == null || r.remove(this.store.behindModeGroup));
-  }
-  handleDispose() {
-    this.handleDisable();
+    Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
+      var t;
+      (t = o.frontModeStore) == null || t.css3DScene.remove(e.css3DObject);
+    }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
+      var t, s;
+      (t = o.behindModeStore) == null || t.css3DScene.remove(e.css3DObject), (s = o.behindModeStore) == null || s.scene.remove(e.opacityMesh);
+    });
   }
 }
-i(w, "setFrontModeContainer", H), i(w, "setBehindModeContainer", T);
 export {
-  w as CSS3DRender
+  fe as CSS3DRender
 };

package/libs/CSS3DRenderPlugin/Controller.d.ts

@@ -67,15 +67,15 @@ export default class Controller extends CSS3DRender implements BasePlugin.Contro
         render: () => void;
         id: string;
         container: HTMLElement;
-        css3DObject: import("./utils/three/CSS3DObject").CSS3DObjectPlus<HTMLElement>;
+        dispose: () => boolean;
+        css3DObject: import("./utils/CSS3DObjectPlus").CSS3DObjectPlus<HTMLElement>;
         show: () => void;
         hide: () => void;
         setVisible: (visible: boolean) => void;
-        enable: () => void;
         disable: () => void;
+        enable: () => void;
         setEnabled: (enabled: boolean) => void;
-        dispose: () => boolean;
-        appendToElement: (element: HTMLElement) => import("./utils/three/CSS3DRenderer").default;
+        appendToElement: (container: Element) => void;
     };
-    getBehindFiveElement(): HTMLElement;
+    private getBehindFiveElement;
 }