@realsee/dnalogel 2.2.3 → 2.2.5-alpha.0

package/libs/CSS3DRenderPlugin/CSS3DRender.js

@@ -1,57 +1,76 @@
-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) => {
+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) => {
   for (var t in e || (e = {}))
-    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;
+    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;
 };
-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) => {
+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) => {
     try {
-      a(t.next(i));
-    } catch (f) {
-      n(f);
+      f(t.next(c));
+    } catch (S) {
+      s(S);
     }
-  }, c = (i) => {
+  }, l = (c) => {
     try {
-      a(t.throw(i));
-    } catch (f) {
-      n(f);
+      f(t.throw(c));
+    } catch (S) {
+      s(S);
     }
-  }, a = (i) => i.done ? s(i.value) : Promise.resolve(i.value).then(d, c);
-  a((t = t.apply(b, e)).next());
+  }, f = (c) => c.done ? r(c.value) : Promise.resolve(c.value).then(d, l);
+  f((t = t.apply(o, e)).next());
 });
-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", {
+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", {
       enabled: !0,
       visible: !0,
       disposed: !1
     });
-    l(this, "store", {
-      rendered: !1,
-      disposers: [],
-      frontModeCSS3DObjects: {},
-      behindModeCSS3DObjects: {}
+    i(this, "_scene");
+    i(this, "store", {
+      frontModeGroup: new A()
     });
-    l(this, "create3DElement", (e, t, s) => {
+    i(this, "create3DElement", (e, t, r) => {
       if (this.state.disposed)
-        return this.disposedErrorLog();
-      const n = (() => {
-        const r = {
+        return u();
+      const s = (() => {
+        const h = {
           ratio: 216e-5,
           devicePixelRatio: 1,
           mode: "front",
@@ -59,269 +78,186 @@ class fe {
           container: document.createElement("div"),
           pointerEvents: "none"
         };
-        return Object.assign(r, s);
-      })(), d = t.map(oe);
+        return Object.assign(h, r);
+      })(), d = t.map(k);
       if ((d == null ? void 0 : d.length) < 4)
-        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)
+        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)
       };
     });
-    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, "setVisibleById", (e, t) => {
+      var r;
+      (r = B(e)) == null || r.setVisible(t);
     });
-    l(this, "setEnabledById", (e, t) => {
-      var d, c, a;
-      const s = (d = this.store.frontModeCSS3DObjects[e]) != null ? d : this.store.behindModeCSS3DObjects[e];
-      if (!s)
+    i(this, "setEnabledById", (e, t) => {
+      const r = B(e);
+      if (!r)
         return;
-      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);
+      const s = r.mode === "front" ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }) : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 });
+      !s || (t ? s.add(r) : s.remove(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`);
+    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;
     });
+    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 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 });
+      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 });
   }
   dispose() {
-    this.store.disposers.forEach((e) => e == null ? void 0 : e()), this.store.disposers = [], this.hooks.emit("dispose"), this.state.disposed = !0;
+    this.setState({ disposed: !0 }), this.hooks.emit("dispose");
   }
   show() {
-    return C(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
+    return p(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
       if (this.state.disposed)
-        return this.disposedErrorLog();
+        return u();
       this.setState({ visible: !0 }, { userAction: e }), this.hooks.emit("show", { userAction: e });
     });
   }
   hide() {
-    return C(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
+    return p(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
       if (this.state.disposed)
-        return this.disposedErrorLog();
+        return u();
       this.setState({ visible: !1 }, { userAction: e }), this.hooks.emit("hide", { userAction: e });
     });
   }
   enable({ userAction: e } = { userAction: !0 }) {
     if (this.state.disposed)
-      return this.disposedErrorLog();
+      return u();
     this.setState({ enabled: !0 }, { userAction: e }), this.hooks.emit("enable", { userAction: e });
   }
   disable({ userAction: e } = { userAction: !0 }) {
     if (this.state.disposed)
-      return this.disposedErrorLog();
+      return u();
     this.setState({ enabled: !1 }, { userAction: e }), this.hooks.emit("disable", { userAction: e });
   }
-  setContainer(e, t) {
-    t === "front" ? o.frontModeContainer = e : o.behindModeContainer = 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;
   }
-  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;
-      }
-      if (t === "behind" && !o.behindModeContainer) {
-        if (!e)
-          throw new Error(`${m} Cannot append to container: behind mode but container is ${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;
       }
-      return;
-    }
-    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);
+      const l = new q(d);
+      n.behindModeStore.css3DScene = l, n.behindModeStore.scene = d;
     }
-    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 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);
     }
-    s.appendedToPage = !0;
+    return this.store.behindModeGroup;
   }
   render(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();
+    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);
     }
-    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();
+    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);
     }
-    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 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;
-      });
+    return p(this, null, function* () {
+      this.store.frontModeGroup.visible = !0, this.store.behindModeGroup && (this.store.behindModeGroup.visible = !0);
     });
   }
   handleHide() {
-    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;
-      });
+    return p(this, null, function* () {
+      this.store.frontModeGroup.visible = !1, this.store.behindModeGroup && (this.store.behindModeGroup.visible = !1);
     });
   }
   handleEnable() {
-    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));
-    });
+    var e, t;
+    (e = this.getFrontCSS3DScene()) == null || e.add(this.store.frontModeGroup), this.store.behindModeGroup && ((t = this.getBehindCSS3DScene()) == null || t.add(this.store.behindModeGroup));
   }
   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);
-    });
+    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();
   }
 }
+i(w, "setFrontModeContainer", H), i(w, "setBehindModeContainer", T);
 export {
-  fe as CSS3DRender
+  w 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;
-        dispose: () => boolean;
-        css3DObject: import("./utils/CSS3DObjectPlus").CSS3DObjectPlus<HTMLElement>;
+        css3DObject: import("./utils/three/CSS3DObject").CSS3DObjectPlus<HTMLElement>;
         show: () => void;
         hide: () => void;
         setVisible: (visible: boolean) => void;
-        disable: () => void;
         enable: () => void;
+        disable: () => void;
         setEnabled: (enabled: boolean) => void;
-        appendToElement: (container: Element) => void;
+        dispose: () => boolean;
+        appendToElement: (element: HTMLElement) => import("./utils/three/CSS3DRenderer").default;
     };
-    private getBehindFiveElement;
+    getBehindFiveElement(): HTMLElement;
 }