@realsee/dnalogel 2.1.2-alpha.2 → 2.1.2-alpha.3

package/esm/CSS3DRenderPlugin/CSS3DRender.d.ts

@@ -0,0 +1,167 @@
+import * as THREE from 'three';
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Subscribe } from '../shared-utils/Subscribe';
+import { AnyPosition } from './utils';
+import { CSS3DObjectPlus, Mode } from './utils/CSS3DObjectPlus';
+export { MinRatio } from './utils/CSS3DObjectPlus';
+export declare const __ELEMENT__ = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__";
+export declare const PLUGIN: string;
+export interface CSS3DRenderState {
+    enabled: boolean;
+    visible: boolean;
+    disposed: boolean;
+}
+export declare type CSS3DRenderEventMap = {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    dispose: () => void;
+    /**
+     * 插件状态变化
+     * @param params.state      最新的State
+     * @param params.prevState  上一个State
+     * @param params.userAction 是否是用户触发
+     */
+    stateChange: (params: {
+        state: CSS3DRenderState;
+        prevState?: CSS3DRenderState;
+        userAction: boolean;
+    }) => void;
+};
+export interface Create3DDElementParamsType {
+    points: AnyPosition[];
+    config?: {
+        ratio?: number;
+        devicePixelRatio?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        pointerEvents?: 'none' | 'auto';
+        scene?: THREE.Scene;
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        scene: THREE.Scene;
+    });
+}
+export declare const globalStore: {
+    frontModeResizeObserver?: {
+        observe: () => void;
+        unobserve: () => void;
+    };
+    behindModeResizeObserver?: {
+        observe: () => void;
+        unobserve: () => void;
+    };
+    frontModeContainer?: Element;
+    behindModeContainer?: Element;
+    frontModeStore?: {
+        css3DScene: THREE.Scene;
+        css3DRenderer: CSS3DRenderer;
+        requestAnimationFrameId?: number;
+        appendedToPage?: boolean;
+    };
+    behindModeStore?: {
+        scene: THREE.Scene;
+        css3DScene: THREE.Scene;
+        css3DRenderer: CSS3DRenderer;
+        requestAnimationFrameId?: number;
+        appendedToPage?: boolean;
+    };
+};
+export declare class CSS3DRender {
+    hooks: Subscribe<CSS3DRenderEventMap>;
+    state: CSS3DRenderState;
+    private store;
+    getCurrentState(): CSS3DRenderState;
+    setState(state: Partial<CSS3DRenderState>, options?: {
+        userAction: boolean;
+    }): void;
+    dispose(): void;
+    show({ userAction }?: {
+        userAction: boolean;
+    }): Promise<void>;
+    hide({ userAction }?: {
+        userAction: boolean;
+    }): Promise<void>;
+    enable({ userAction }?: {
+        userAction: boolean;
+    }): void;
+    disable({ userAction }?: {
+        userAction: boolean;
+    }): void;
+    /**
+     * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     * @param { Vector3Position[] } points 矩形四个点坐标
+     * @param config 均为可选值
+     * @config_document `config` 均为可选值
+     *  | key                   | type                       | defaultValue        | comment |
+     *  | -                     | -                          | -                   | -       |
+     *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+     *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+     *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+     *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+     *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+     *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+     *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+     *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+     *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
+     *
+     * @return
+     * ```typescript
+     *    {
+     *      id: string,                             // id
+     *      container: HTMLDIVElement               // dom容器
+     *      dispose: () => void                     // 销毁
+     *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+     *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+     *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+     *      show: () => void                        // 同 setVisible(true)
+     *      hide: () => void                        // 同 setVisible(false)
+     *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
+     *      enable: () => void                      // 同 setEnabled(true)
+     *      disable: () => void                     // 同 setEnabled(false)
+     *    } | void
+     * ```
+     */
+    create3DElement: (camera: THREE.Camera, points: Create3DDElementParamsType['points'], config?: Create3DDElementParamsType['config']) => void | {
+        id: string;
+        container: HTMLElement;
+        dispose: () => boolean;
+        css3DObject: CSS3DObjectPlus<HTMLElement>;
+        render: () => void;
+        show: () => void;
+        hide: () => void;
+        setVisible: (visible: boolean) => void;
+        disable: () => void;
+        enable: () => void;
+        setEnabled: (enabled: boolean) => void;
+        appendToElement: (container: Element) => void;
+    };
+    setContainer(container: Element, mode: Mode): void;
+    appendToElement(container: Element | undefined, mode: Mode): void;
+    setVisibleById: (id: string, visible: boolean) => void;
+    setEnabledById: (id: string, enabled: boolean) => void;
+    private render;
+    private createObject;
+    private initGlobalModeStore;
+    /**
+     * @description: 生成透明Mesh
+     */
+    private createOpacityMesh;
+    private handleShow;
+    private handleHide;
+    private handleEnable;
+    private handleDisable;
+    private createResizeObserver;
+    private disposedErrorLog;
+}

package/esm/CSS3DRenderPlugin/CSS3DRender.js

@@ -0,0 +1,327 @@
+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 = {}))
+    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 l = (b, e, t) => (F(b, typeof e != "symbol" ? e + "" : e, t), t);
+var y = (b, e, t) => new Promise((s, n) => {
+  var d = (i) => {
+    try {
+      a(t.next(i));
+    } catch (f) {
+      n(f);
+    }
+  }, c = (i) => {
+    try {
+      a(t.throw(i));
+    } catch (f) {
+      n(f);
+    }
+  }, a = (i) => i.done ? s(i.value) : Promise.resolve(i.value).then(d, c);
+  a((t = t.apply(b, e)).next());
+});
+import * as C from "three";
+import { CSS3DRenderer as H } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { S as se } from "../shared-utils/Subscribe.js";
+import { e as N } from "./utils/evenNumber.js";
+import { a as oe } from "./utils/positionToVector3.js";
+import { C 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
+    });
+    l(this, "store", {
+      rendered: !1,
+      disposers: [],
+      frontModeCSS3DObjects: {},
+      behindModeCSS3DObjects: {}
+    });
+    l(this, "create3DElement", (e, t, s) => {
+      if (this.state.disposed)
+        return this.disposedErrorLog();
+      const n = (() => {
+        const r = {
+          ratio: 216e-5,
+          devicePixelRatio: 1,
+          mode: "front",
+          autoRender: !0,
+          container: document.createElement("div"),
+          pointerEvents: "none"
+        };
+        return Object.assign(r, s);
+      })(), d = t.map(oe);
+      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)
+      };
+    });
+    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));
+    });
+    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 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);
+    });
+    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 C.MeshBasicMaterial({
+        opacity: 0,
+        color: 0,
+        transparent: !1,
+        side: C.DoubleSide
+      }), d = new C.PlaneGeometry(t, s), c = new C.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`);
+    });
+  }
+  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 });
+  }
+  dispose() {
+    this.store.disposers.forEach((e) => e == null ? void 0 : e()), this.store.disposers = [], this.hooks.emit("dispose"), this.state.disposed = !0;
+  }
+  show() {
+    return y(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
+      if (this.state.disposed)
+        return this.disposedErrorLog();
+      this.setState({ visible: !0 }, { userAction: e }), this.hooks.emit("show", { userAction: e });
+    });
+  }
+  hide() {
+    return y(this, arguments, function* ({ userAction: e } = { userAction: !0 }) {
+      if (this.state.disposed)
+        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 this.disposedErrorLog();
+    this.setState({ enabled: !0 }, { userAction: e }), this.hooks.emit("enable", { userAction: e });
+  }
+  disable({ userAction: e } = { userAction: !0 }) {
+    if (this.state.disposed)
+      return this.disposedErrorLog();
+    this.setState({ enabled: !1 }, { userAction: e }), this.hooks.emit("disable", { userAction: e });
+  }
+  setContainer(e, t) {
+    t === "front" ? o.frontModeContainer = e : o.behindModeContainer = e;
+  }
+  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;
+      }
+      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);
+    }
+    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);
+    }
+    s.appendedToPage = !0;
+  }
+  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();
+    }
+    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 C.Scene(), css3DRenderer: new H() }), s && (o.frontModeStore = { css3DScene: new C.Scene(), css3DRenderer: new H() });
+  }
+  handleShow() {
+    return y(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 y(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() {
+    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() {
+    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);
+    });
+  }
+}
+export {
+  fe as C
+};

package/esm/CSS3DRenderPlugin/Controller.d.ts

@@ -0,0 +1,81 @@
+import type * as BasePlugin from '../base/BasePlugin';
+import type { Five } from '@realsee/five';
+import { CSS3DRender, CSS3DRenderEventMap, CSS3DRenderState } from './CSS3DRender';
+import type { AnyPosition } from './utils';
+export declare const PLUGIN_NAME: string;
+export interface Create3DDomContainerParamsType {
+    points: AnyPosition[];
+    config?: {
+        ratio?: number;
+        /** @deprecated dpr renamed as devicePixelRatio */
+        dpr?: number;
+        devicePixelRatio?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        pointerEvents?: 'none' | 'auto';
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        behindFiveContainer: HTMLElement;
+    });
+}
+export default class Controller extends CSS3DRender implements BasePlugin.Controller<CSS3DRenderState, CSS3DRenderEventMap> {
+    five: Five;
+    behindFiveContainer?: HTMLElement;
+    readonly staticPrefix: string;
+    constructor(five: Five);
+    /** @deprecated disposeAll() renamed as dispose() */
+    disposeAll(): void;
+    setState(...params: Parameters<InstanceType<typeof CSS3DRender>['setState']>): void;
+    /**
+     * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     * @param { Vector3Position[] } points 矩形四个点坐标
+     * @param config 均为可选值
+     * @config_document `config` 均为可选值
+     *  | key                   | type                       | defaultValue        | comment |
+     *  | -                     | -                          | -                   | -       |
+     *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+     *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
+     *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+     *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+     *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+     *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+     *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+     *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+     *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+     *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
+     *
+     * @return
+     * ```typescript
+     *    {
+     *      id: string,                             // id
+     *      container: HTMLDIVElement               // dom容器
+     *      dispose: () => void                     // 销毁
+     *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+     *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+     *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+     *      show: () => void                        // 同 setVisible(true)
+     *      hide: () => void                        // 同 setVisible(false)
+     *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)
+     *      enable: () => void                      // 同 setEnabled(true)
+     *      disable: () => void                     // 同 setEnabled(false)
+     *    } | void
+     * ```
+     */
+    create3DDomContainer: (points: Create3DDomContainerParamsType['points'], config?: Create3DDomContainerParamsType['config']) => {
+        render: () => void;
+        id: string;
+        container: HTMLElement;
+        dispose: () => boolean;
+        css3DObject: import("./utils/CSS3DObjectPlus").CSS3DObjectPlus<HTMLElement>;
+        show: () => void;
+        hide: () => void;
+        setVisible: (visible: boolean) => void;
+        disable: () => void;
+        enable: () => void;
+        setEnabled: (enabled: boolean) => void;
+        appendToElement: (container: Element) => void;
+    };
+    private getBehindFiveElement;
+}

package/esm/CSS3DRenderPlugin/Controller.js

@@ -0,0 +1,83 @@
+var y = Object.defineProperty, F = Object.defineProperties;
+var P = Object.getOwnPropertyDescriptors;
+var C = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, D = Object.prototype.propertyIsEnumerable;
+var h = (s, n, e) => n in s ? y(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e, v = (s, n) => {
+  for (var e in n || (n = {}))
+    S.call(n, e) && h(s, e, n[e]);
+  if (C)
+    for (var e of C(n))
+      D.call(n, e) && h(s, e, n[e]);
+  return s;
+}, m = (s, n) => F(s, P(n));
+var l = (s, n, e) => (h(s, typeof n != "symbol" ? n + "" : n, e), e);
+import { C as w } from "./CSS3DRender.js";
+const x = "v2.0.1", R = `CSS3DRenderPlugin@${x}`;
+class N extends w {
+  constructor(e) {
+    super();
+    l(this, "five");
+    l(this, "behindFiveContainer");
+    l(this, "staticPrefix", "//vrlab-static.ljcdn.com");
+    l(this, "create3DDomContainer", (e, t) => {
+      if (this.state.disposed)
+        return;
+      const i = (() => {
+        var E;
+        (t == null ? void 0 : t.dpr) !== void 0 && console.warn(`${R}: please use "config.devicePixelRatio" replace "config.dpr"`);
+        const a = {
+          ratio: 216e-5,
+          devicePixelRatio: (E = t == null ? void 0 : t.dpr) != null ? E : 1,
+          mode: "front",
+          autoRender: !0
+        };
+        return Object.assign(a, t, (t == null ? void 0 : t.mode) === "behind" ? { scene: this.five.scene } : void 0);
+      })(), o = this.five.getElement();
+      if (!o) {
+        console.error(`${R}: five.getElement() is ${o}`);
+        return;
+      }
+      const { autoRender: d, mode: r } = i, p = r === "front" ? o.parentElement : i.behindFiveContainer;
+      this.setContainer(p || document.body, "front");
+      const f = this.getBehindFiveElement();
+      f && this.setContainer(f, "behind"), this.appendToElement(p || document.body, r);
+      const c = this.create3DElement(this.five.camera, e, m(v({}, i), { autoRender: !1 }));
+      if (!c)
+        return;
+      const u = c.render, b = () => {
+        var a;
+        r === "front" && u(), r === "behind" && ((a = this.five.model) != null && a.loaded ? u() : this.five.once("modelLoaded", () => u()));
+      };
+      return d && b(), m(v({}, c), { render: d ? void 0 : b });
+    });
+    this.five = e;
+  }
+  disposeAll() {
+    return this.dispose();
+  }
+  setState(...e) {
+    const t = super.setState(...e);
+    return this.five.needsRender = !0, t;
+  }
+  getBehindFiveElement() {
+    var r;
+    const { behindFiveContainer: e } = this;
+    if (e)
+      return e;
+    const t = document.createElement("div");
+    t.style.position = "absolute", t.style.pointerEvents = "none", t.style.top = "0", t.style.left = "0", t.style.width = "100%", t.style.height = "100%", this.behindFiveContainer = t;
+    const i = this.five.getElement();
+    if (!i)
+      return;
+    const o = (r = i == null ? void 0 : i.style.position) != null ? r : getComputedStyle(i);
+    (!o || o === "static") && console.warn(
+      "if you want to use css3DRenderPlugin behind mode, five element position is static, please set position to relative or absolute"
+    );
+    const d = i == null ? void 0 : i.parentElement;
+    if (d)
+      return d.insertBefore(t, i), t;
+  }
+}
+export {
+  N as C
+};

package/esm/CSS3DRenderPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import type { FivePlugin } from '@realsee/five';
+import Controller from './Controller';
+export * from './typing';
+export declare const CSS3DRenderPlugin: FivePlugin<void, InstanceType<typeof Controller>>;
+export default CSS3DRenderPlugin;

package/esm/CSS3DRenderPlugin/index.js

@@ -0,0 +1,14 @@
+import { C as r } from "./Controller.js";
+import "./CSS3DRender.js";
+import "three";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../shared-utils/Subscribe.js";
+import "./utils/evenNumber.js";
+import "./utils/positionToVector3.js";
+import "./utils/CSS3DObjectPlus.js";
+import "./utils/centerPoint.js";
+const C = (o) => new r(o);
+export {
+  C as CSS3DRenderPlugin,
+  C as default
+};