@realsee/dnalogel 2.0.4 → 2.0.5--alpha.1

package/libs/CSS3DRenderPlugin/CSS3DRender.d.ts

@@ -0,0 +1,156 @@
+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 } from './utils/CSS3DObjectPlus';
+export declare const __ELEMENT__ = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__";
+export declare const PLUGIN: string;
+export declare const MinRatio = 0.00216;
+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: {
+    resizeObserver?: {
+        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;
+    };
+    appendToElement(container: Element | undefined, mode: 'front' | 'behind'): void;
+    setVisibleById: (id: string, visible: boolean) => void;
+    setEnabledById: (id: string, enabled: boolean) => void;
+    private createObject;
+    private handleShow;
+    private handleHide;
+    private handleEnable;
+    private handleDisable;
+    private createResizeObserver;
+    private disposedErrorLog;
+}

package/libs/CSS3DRenderPlugin/CSS3DRender.js

@@ -0,0 +1,246 @@
+var B = Object.defineProperty;
+var q = (f, e, s) => e in f ? B(f, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : f[e] = s;
+var l = (f, e, s) => (q(f, typeof e != "symbol" ? e + "" : e, s), s);
+import * as m from "three";
+import { CSS3DRenderer as A } from "three/examples/jsm/renderers/CSS3DRenderer";
+import H from "../shared-utils/Subscribe.js";
+import { evenNumber as _ } from "./utils/evenNumber.js";
+import { anyPositionToVector3 as x } from "./utils/positionToVector3.js";
+import { CSS3DObjectPlus as V } from "./utils/CSS3DObjectPlus.js";
+import "./utils/centerPoint.js";
+const U = "v2.0.1", T = "CSS3DRenderer", Z = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__", D = `${T}@${U}`, L = (f) => `${D}--${f}`, ee = 216e-5, o = {};
+class te {
+  constructor() {
+    l(this, "hooks", new H());
+    l(this, "state", {
+      enabled: !0,
+      visible: !0,
+      disposed: !1
+    });
+    l(this, "store", {
+      disposers: [],
+      frontModeCSS3DObjects: {},
+      behindModeCSS3DObjects: {}
+    });
+    l(this, "create3DElement", (e, s, t) => {
+      if (this.state.disposed)
+        return this.disposedErrorLog();
+      const i = (() => {
+        const d = {
+          ratio: 216e-5,
+          devicePixelRatio: 1,
+          mode: "front",
+          autoRender: !0,
+          container: document.createElement("div"),
+          pointerEvents: "none"
+        };
+        return Object.assign(d, t);
+      })(), n = s.map(x);
+      if ((n == null ? void 0 : n.length) < 4)
+        return console.error(`${D}: requires 4 point but params may have fewer`);
+      const { ratio: a, devicePixelRatio: h, mode: r, autoRender: u, container: S, pointerEvents: E } = i, v = [], { css3DObject: c, opacityMesh: b } = this.createObject(n, {
+        ratio: a,
+        dpr: h,
+        container: S,
+        mode: r,
+        pointerEvents: E
+      });
+      S.id = `container--${c.uuid}`;
+      const y = r === "front" && !o.frontModeStore, R = r === "behind" && !o.behindModeStore;
+      R && (o.behindModeStore = {
+        scene: i.scene,
+        css3DScene: new m.Scene(),
+        css3DRenderer: new A()
+      }), y && (o.frontModeStore = { css3DScene: new m.Scene(), css3DRenderer: new A() });
+      const M = r === "front" ? o.frontModeStore : o.behindModeStore, { css3DScene: O, css3DRenderer: p } = M, g = (() => {
+        const d = () => {
+          r === "front" ? this.store.frontModeCSS3DObjects[c.uuid] = {
+            visible: !0,
+            enabled: !0,
+            css3DObject: c,
+            mode: "front"
+          } : this.store.behindModeCSS3DObjects[c.uuid] = {
+            visible: !0,
+            enabled: !0,
+            css3DObject: c,
+            opacityMesh: b,
+            mode: "behind",
+            scene: i.scene
+          }, O.add(c), r === "behind" && b && (i.scene.add(b), v.push(() => b && i.scene.remove(b)));
+        };
+        if (y || R) {
+          p.domElement.style.position = "absolute", p.domElement.style.top = "0", p.domElement.style.userSelect = "none", p.domElement.style.pointerEvents = "none", p.domElement.classList.add(L(r));
+          const I = () => {
+            const k = requestAnimationFrame(I);
+            M.requestAnimationFrameId = k, p.render(O, e);
+          };
+          return () => {
+            d(), I();
+          };
+        }
+        return () => d();
+      })(), w = r === "front" ? o.frontModeContainer : o.behindModeContainer;
+      if (w) {
+        this.appendToElement(w, r);
+        const d = r === "front" ? o.frontModeStore : o.behindModeStore;
+        d && (d.appendedToPage = !0);
+      }
+      const j = (d) => this.setVisibleById(c.uuid, d), C = (d) => this.setEnabledById(c.uuid, d), P = () => j(!0), $ = () => j(!1), F = () => C(!0), N = () => C(!1), z = () => (delete this.store.frontModeCSS3DObjects[c.uuid], delete this.store.behindModeCSS3DObjects[c.uuid], v.forEach((d) => d == null ? void 0 : d()), O.remove(c), O.children.length === 0 && (typeof M.requestAnimationFrameId == "number" && cancelAnimationFrame(M.requestAnimationFrameId), p.domElement.remove(), r === "front" && (o.frontModeStore = void 0), r === "behind" && (o.behindModeStore = void 0), o.resizeObserver = void 0), !0);
+      return this.store.disposers.push(z), u && g(), {
+        id: c.uuid,
+        container: S,
+        dispose: z,
+        css3DObject: c,
+        render: u ? void 0 : g,
+        show: P,
+        hide: $,
+        setVisible: j,
+        disable: N,
+        enable: F,
+        setEnabled: C,
+        appendToElement: (d) => this.appendToElement(d, r)
+      };
+    });
+    l(this, "setVisibleById", (e, s) => {
+      var i;
+      const t = (i = this.store.frontModeCSS3DObjects[e]) != null ? i : this.store.behindModeCSS3DObjects[e];
+      if (!t)
+        return console.error("id not found", e);
+      t.visible = s, this.state.visible && (t.css3DObject.visible = s, t.mode === "behind" && (t.opacityMesh.visible = s));
+    });
+    l(this, "setEnabledById", (e, s) => {
+      var n, a, h;
+      const t = (n = this.store.frontModeCSS3DObjects[e]) != null ? n : this.store.behindModeCSS3DObjects[e];
+      if (!t)
+        return;
+      const i = t.mode === "front" ? (a = o.frontModeStore) == null ? void 0 : a.css3DScene : (h = o.behindModeStore) == null ? void 0 : h.css3DScene;
+      !i || (s ? (i.add(t.css3DObject), t.mode === "behind" && t.scene.add(t.opacityMesh)) : (i.remove(t.css3DObject), t.mode === "behind" && t.scene.remove(t.opacityMesh)), t.enabled = s);
+    });
+    l(this, "createObject", (e, s) => {
+      const { ratio: t, dpr: i, container: n, mode: a, pointerEvents: h } = s, r = new V(n, e, t, i);
+      n.style.pointerEvents = h, n.classList.add(`${T}__container`);
+      const { domWidthPx: u, domHeightPx: S } = r, E = (() => {
+        if (a === "behind") {
+          const v = new m.MeshBasicMaterial({
+            opacity: 0,
+            transparent: !1,
+            side: m.DoubleSide
+          }), c = new m.PlaneGeometry(u, S), b = new m.Mesh(c, v);
+          return b.name = L("mesh"), b.position.copy(r.position), b.rotation.copy(r.rotation), b.scale.copy(r.scale), b;
+        }
+      })();
+      return { css3DObject: r, opacityMesh: E };
+    });
+    l(this, "createResizeObserver", (e, s, t = !0) => {
+      if (!e)
+        return console.error("createResizeObserver: element is undefined"), { observe: () => {
+        }, unobserve: () => {
+        } };
+      const i = () => {
+        const a = _(e.clientWidth, { smaller: !0 }), h = _(e.clientHeight, { smaller: !0 });
+        s(a, h);
+      };
+      if (typeof ResizeObserver > "u" || !ResizeObserver)
+        return console.warn("createResizeObserver: ResizeObserver is undefined"), { observe: () => i(), unobserve: () => {
+        } };
+      const n = new ResizeObserver(i);
+      return t && i(), {
+        observe: () => n.observe(e),
+        unobserve: () => n.unobserve(e)
+      };
+    });
+    l(this, "disposedErrorLog", () => {
+      console.error(`${D} is disposed`);
+    });
+  }
+  getCurrentState() {
+    return this.state;
+  }
+  setState(e, s = { userAction: !0 }) {
+    if (this.state.disposed)
+      return this.disposedErrorLog();
+    const t = { ...this.state };
+    this.state = Object.assign(this.state, e), t.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), t.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: t, userAction: s.userAction });
+  }
+  dispose() {
+    this.store.disposers.forEach((e) => e == null ? void 0 : e()), this.store.disposers = [], this.hooks.emit("dispose"), this.state.disposed = !0;
+  }
+  async show({ userAction: e } = { userAction: !0 }) {
+    if (this.state.disposed)
+      return this.disposedErrorLog();
+    this.setState({ visible: !0 }, { userAction: e }), this.hooks.emit("show", { userAction: e });
+  }
+  async hide({ 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 });
+  }
+  appendToElement(e, s) {
+    if (!e)
+      throw new Error(`${D} Cannot append to container: container is ${e}`);
+    const t = s === "front" ? o.frontModeStore : o.behindModeStore;
+    if (!t) {
+      s === "front" && (o.frontModeContainer = e), s === "behind" && (o.behindModeContainer = e);
+      return;
+    }
+    if (!t.appendedToPage) {
+      if (e.appendChild(t.css3DRenderer.domElement), !o.resizeObserver) {
+        const i = (h, r) => {
+          var u, S;
+          (u = o.frontModeStore) == null || u.css3DRenderer.setSize(h, r), (S = o.behindModeStore) == null || S.css3DRenderer.setSize(h, r);
+        }, { observe: n, unobserve: a } = this.createResizeObserver(e, i, !0);
+        o.resizeObserver = { observe: n, unobserve: a }, n(), this.store.disposers.push(a);
+      }
+      t.appendedToPage = !0;
+    }
+  }
+  async handleShow() {
+    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;
+    });
+  }
+  async handleHide() {
+    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 s;
+      !e.enabled || (s = o.frontModeStore) == null || s.css3DScene.add(e.css3DObject);
+    }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
+      var s, t;
+      !e.enabled || ((s = o.behindModeStore) == null || s.css3DScene.add(e.css3DObject), (t = o.behindModeStore) == null || t.scene.add(e.opacityMesh));
+    });
+  }
+  handleDisable() {
+    Object.values(this.store.frontModeCSS3DObjects).forEach((e) => {
+      var s;
+      (s = o.frontModeStore) == null || s.css3DScene.remove(e.css3DObject);
+    }), Object.values(this.store.behindModeCSS3DObjects).forEach((e) => {
+      var s, t;
+      (s = o.behindModeStore) == null || s.css3DScene.remove(e.css3DObject), (t = o.behindModeStore) == null || t.scene.remove(e.opacityMesh);
+    });
+  }
+}
+export {
+  te as CSS3DRender,
+  ee as MinRatio,
+  D as PLUGIN,
+  Z as __ELEMENT__,
+  o as globalStore
+};

package/libs/CSS3DRenderPlugin/Controller.d.ts

@@ -0,0 +1,78 @@
+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;
+    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;
+    };
+}

package/libs/CSS3DRenderPlugin/Controller.js

@@ -0,0 +1,59 @@
+var h = Object.defineProperty;
+var R = (o, r, t) => r in o ? h(o, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[r] = t;
+var m = (o, r, t) => (R(o, typeof r != "symbol" ? r + "" : r, t), t);
+import { CSS3DRender as E } from "./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 S = "v2.0.1", c = `CSS3DRenderPlugin@${S}`;
+class I extends E {
+  constructor(t) {
+    super();
+    m(this, "five");
+    m(this, "create3DDomContainer", (t, e) => {
+      if (this.state.disposed)
+        return;
+      const n = (() => {
+        var v;
+        (e == null ? void 0 : e.dpr) !== void 0 && console.warn(`${c}: please use "config.devicePixelRatio" replace "config.dpr"`);
+        const i = {
+          ratio: 216e-5,
+          devicePixelRatio: (v = e == null ? void 0 : e.dpr) != null ? v : 1,
+          mode: "front",
+          autoRender: !0
+        };
+        return Object.assign(i, e, (e == null ? void 0 : e.mode) === "behind" ? { scene: this.five.scene } : void 0);
+      })(), d = this.five.getElement();
+      if (!d) {
+        console.error(`${c}: five.getElement() is ${d}`);
+        return;
+      }
+      const { autoRender: p, mode: s } = n, f = s === "front" ? d.parentElement : n.behindFiveContainer;
+      this.appendToElement(f || document.body, s);
+      const a = this.create3DElement(this.five.camera, t, { ...n, autoRender: !1 });
+      if (!a)
+        return;
+      const l = a.render, u = () => {
+        var i;
+        s === "front" && l(), s === "behind" && ((i = this.five.model) != null && i.loaded ? l() : this.five.once("modelLoaded", () => l()));
+      };
+      return p && u(), { ...a, render: p ? void 0 : u };
+    });
+    this.five = t;
+  }
+  disposeAll() {
+    return this.dispose();
+  }
+  setState(...t) {
+    const e = super.setState(...t);
+    return this.five.needsRender = !0, e;
+  }
+}
+export {
+  c as PLUGIN_NAME,
+  I as default
+};

package/libs/CSS3DRenderPlugin/index.d.ts

@@ -1,4 +1,5 @@
-import CSS3DRenderPlugin from './Plugin';
-export { CSS3DRenderPlugin };
+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;
-export type { CSS3DRenderPluginExportType } from './Plugin';

package/libs/CSS3DRenderPlugin/index.js

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

package/libs/CSS3DRenderPlugin/typing.d.ts

@@ -0,0 +1,26 @@
+import type CSS3DRenderPlugin from '.';
+import type * as BasePlugin from '../base/BasePlugin';
+import type { CSS3DRender } from './CSS3DRender';
+export declare type CSS3DRenderPluginParameterType = undefined;
+export declare type CSS3DRenderPluginExportType = ReturnType<typeof CSS3DRenderPlugin>;
+export declare type CSS3DRenderExportType = InstanceType<typeof CSS3DRender>;
+export declare type Create3DDomContainerReturnType = ReturnType<CSS3DRenderPluginExportType['create3DDomContainer']>;
+export declare type Create3DElementReturnType = ReturnType<InstanceType<typeof CSS3DRender>['create3DElement']>;
+export interface CSS3DRenderPluginState extends BasePlugin.State {
+    enabled: boolean;
+    visible: boolean;
+}
+export interface CSS3DRenderPluginEventMap extends BasePlugin.EventMap<CSS3DRenderPluginState> {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+}

package/libs/CSS3DRenderPlugin/typing.js

@@ -0,0 +1 @@
+

package/libs/CSS3DRenderPlugin/utils/CSS3DObjectPlus.d.ts

@@ -0,0 +1,16 @@
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Vector3 } from 'three';
+export declare const MinRatio = 0.00216;
+export declare const DefaultRatio = 0.003;
+export declare class CSS3DObjectPlus<T extends HTMLElement> extends CSS3DObject {
+    version: string;
+    width: number;
+    height: number;
+    domWidthPx: number;
+    domHeightPx: number;
+    cornerPoints: [Vector3, Vector3, Vector3, Vector3];
+    ratio: number;
+    container: T;
+    centerPosition: Vector3;
+    constructor(container: T, cornerPoints: [Vector3, Vector3, Vector3, Vector3], ratio?: number, dpr?: number);
+}

package/libs/CSS3DRenderPlugin/utils/CSS3DObjectPlus.js

@@ -0,0 +1,48 @@
+var P = Object.defineProperty;
+var W = (c, i, t) => i in c ? P(c, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[i] = t;
+var o = (c, i, t) => (W(c, typeof i != "symbol" ? i + "" : i, t), t);
+import { CSS3DObject as D } from "three/examples/jsm/renderers/CSS3DRenderer";
+import { Vector3 as m } from "three";
+import { evenNumber as V } from "./evenNumber.js";
+import { centerPoint as E } from "./centerPoint.js";
+const f = "1.0.1", H = `CSS3DObjectPlus@${f}`, j = 216e-5, v = 3e-3;
+class T extends D {
+  constructor(t, e, h = v, u = 1) {
+    const l = Math.max(j, h), p = e[0].distanceTo(e[1]), a = e[1].distanceTo(e[2]), n = V(p / h * u), d = V(a / h * u), x = E(...e);
+    let g;
+    if (l === h)
+      t.style.width = `${n}px`, t.style.height = `${d}px`, g = t;
+    else {
+      const s = document.createElement("div");
+      s.style.width = `${n}px`, s.style.height = `${d}px`, s.style.pointerEvents = "none";
+      const b = h / l;
+      t.style.position = "absolute", t.style.left = "0", t.style.top = "0", t.style.width = `${b * n}px`, t.style.height = `${b * d}px`, s.appendChild(t), g = s;
+    }
+    super(g);
+    o(this, "version", f);
+    o(this, "width");
+    o(this, "height");
+    o(this, "domWidthPx");
+    o(this, "domHeightPx");
+    o(this, "cornerPoints");
+    o(this, "ratio");
+    o(this, "container");
+    o(this, "centerPosition");
+    if (this.scale.set(l, l, l), this.cornerPoints = e, this.ratio = h, this.container = t, l === h)
+      this.width = p, this.height = a, this.domWidthPx = n, this.domHeightPx = d, this.centerPosition = x;
+    else {
+      const s = h / l;
+      this.width = s * p, this.height = s * a, this.domWidthPx = s * n, this.domHeightPx = s * d, this.centerPosition = new m().subVectors(x.clone(), e[0].clone()).multiplyScalar(s).add(e[0]);
+    }
+    t.classList.add(`${H}__container`);
+    const S = new m().subVectors(e[1], e[0]), r = new m().subVectors(e[3], e[0]), $ = new m().crossVectors(S, r).normalize();
+    this.lookAt($);
+    const y = this.up.clone().applyQuaternion(this.quaternion), w = r.clone(), O = new m().crossVectors(y, w).normalize();
+    this.rotateOnWorldAxis(O, y.angleTo(w)), this.position.copy(x);
+  }
+}
+export {
+  T as CSS3DObjectPlus,
+  v as DefaultRatio,
+  j as MinRatio
+};