@realsee/dnalogel 2.16.0-10 → 2.16.0-12

package/libs/CSS3DRenderPlugin/Controller.js

@@ -2,24 +2,23 @@ var E = Object.defineProperty, C = Object.defineProperties;
 var F = Object.getOwnPropertyDescriptors;
 var b = Object.getOwnPropertySymbols;
 var D = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
-var a = (i, t, e) => t in i ? E(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, p = (i, t) => {
+var m = (i, t, e) => t in i ? E(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, p = (i, t) => {
   for (var e in t || (t = {}))
-    D.call(t, e) && a(i, e, t[e]);
+    D.call(t, e) && m(i, e, t[e]);
   if (b)
     for (var e of b(t))
-      S.call(t, e) && a(i, e, t[e]);
+      S.call(t, e) && m(i, e, t[e]);
   return i;
 }, l = (i, t) => C(i, F(t));
-var o = (i, t, e) => (a(i, typeof t != "symbol" ? t + "" : t, e), e);
+var o = (i, t, e) => (m(i, typeof t != "symbol" ? t + "" : t, e), e);
 import { CSS3DRender as $ } from "./utils/three/CSS3DRender.js";
 import x from "./utils/waitFiveModelLoaded.js";
 import O from "./utils/generateBehindFiveElement.js";
-import "@realsee/five";
 import "hammerjs";
 import "three";
-import "@tweenjs/tween.js";
+import "@realsee/five";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import { isAbsoluteURL as P } from "../shared-utils/isAbsoluteURL.js";
-import "../shared-utils/animationFrame/BetterTween.js";
 import "./utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "./utils/getAllCSS3DObject.js";
@@ -32,15 +31,49 @@ import "./utils/three/OpacityMesh.js";
 import "../shared-utils/three/centerPoint.js";
 import "./utils/three/CSS3DScene.js";
 import "./utils/three/CSS3DGroup.js";
-import "../shared-utils/animationFrame/index.js";
 const R = "v2.0.1", h = `CSS3DRenderPlugin@${R}`;
-class Y extends $ {
+class W extends $ {
   constructor(e) {
     super();
     o(this, "five");
     o(this, "behindFiveContainer");
     o(this, "VERSION", R);
     o(this, "staticPrefix", "//vrlab-static.ljcdn.com");
+    /**
+     * @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
+     * ```
+     */
     o(this, "create3DDomContainer", (e, r) => {
       if (this.state.disposed)
         return;
@@ -54,9 +87,9 @@ class Y extends $ {
           autoRender: !0
         };
         return Object.assign(d, r, (r == null ? void 0 : r.mode) === "behind" ? { scene: this.five.scene } : void 0);
-      })(), m = this.five.getElement();
-      if (!m) {
-        console.error(`${h}: five.getElement() is ${m}`);
+      })(), a = this.five.getElement();
+      if (!a) {
+        console.error(`${h}: five.getElement() is ${a}`);
         return;
       }
       const { autoRender: v } = s;
@@ -65,7 +98,7 @@ class Y extends $ {
       if (!n)
         return;
       const c = () => {
-        const d = n.css3DObject.mode === "front" ? m.parentElement : this.getBehindFiveElement();
+        const d = n.css3DObject.mode === "front" ? a.parentElement : this.getBehindFiveElement();
         if (!d)
           return console.error(`${h}: wrapper is ${d}`);
         n.appendToElement(d), n.render();
@@ -76,6 +109,7 @@ class Y extends $ {
     });
     this.five = e;
   }
+  /** @deprecated disposeAll() renamed as dispose() */
   disposeAll() {
     return this.dispose();
   }
@@ -92,5 +126,5 @@ class Y extends $ {
 }
 export {
   h as PLUGIN_NAME,
-  Y as default
+  W as default
 };

package/libs/CSS3DRenderPlugin/index.js

@@ -1,14 +1,12 @@
 import o from "./Controller.js";
-import { CSS3DRender as q } from "./utils/three/CSS3DRender.js";
+import { CSS3DRender as j } from "./utils/three/CSS3DRender.js";
 import "./utils/waitFiveModelLoaded.js";
 import "./utils/generateBehindFiveElement.js";
-import "@realsee/five";
 import "hammerjs";
 import "three";
-import "@tweenjs/tween.js";
+import "@realsee/five";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../shared-utils/isAbsoluteURL.js";
-import "../shared-utils/animationFrame/BetterTween.js";
-import "../shared-utils/animationFrame/index.js";
 import "./utils/three/CSS3DRenderer.js";
 import "three/examples/jsm/renderers/CSS3DRenderer";
 import "./utils/getAllCSS3DObject.js";
@@ -21,9 +19,9 @@ import "./utils/three/OpacityMesh.js";
 import "../shared-utils/three/centerPoint.js";
 import "./utils/three/CSS3DScene.js";
 import "./utils/three/CSS3DGroup.js";
-const h = (r) => new o(r);
+const P = (r) => new o(r);
 export {
-  q as CSS3DRender,
-  h as CSS3DRenderPlugin,
-  h as default
+  j as CSS3DRender,
+  P as CSS3DRenderPlugin,
+  P as default
 };

package/libs/CSS3DRenderPlugin/utils/even.js

@@ -1,6 +1,6 @@
 function t(e, r) {
   const u = Math.round(e);
-  return u % 2 === 0 ? u : u + Number(r != null && r.floor ? -1 : 1);
+  return u % 2 === 0 ? u : u + (r != null && r.floor ? -1 : 1);
 }
 export {
   t as even

package/libs/CSS3DRenderPlugin/utils/three/CSS3DObject.js

@@ -37,6 +37,9 @@ class U extends F {
     i(this, "opacityMesh");
     i(this, "selfVisible", !0);
     i(this, "parentVisibleListenerDisposer");
+    /**
+     * @description: 生成透明Mesh
+     */
     i(this, "createOpacityMesh", (t) => {
       const { domWidthPx: e, domHeightPx: s } = t, n = new H(e, s);
       return n.position.copy(t.position), n.rotation.copy(t.rotation), n.scale.copy(t.scale), n;

package/libs/CSS3DRenderPlugin/utils/three/CSS3DRender.js

@@ -61,6 +61,7 @@ function U(o) {
   n.behindModeStore.css3DRenderer.setWrapper(o);
 }
 class w {
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor(e) {
     i(this, "hooks", new _());
     i(this, "state", {
@@ -72,6 +73,40 @@ class w {
     i(this, "store", {
       frontModeGroup: new A()
     });
+    /**
+     * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     * @param { Vector3Position[] } points 矩形四个点坐标
+     * @param params 均为可选值
+     * @config_document `params` 均为可选值
+     *  | 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
+     * ```
+     */
     i(this, "create3DElement", (e, t, s) => {
       if (this.state.disposed)
         return u();
@@ -96,7 +131,7 @@ class w {
         if (D)
           return;
         const h = a.mode === "front" ? this.getFrontCSS3DObjectGroup() : this.getBehindCSS3DObjectGroup();
-        !h || h.add(a);
+        h && h.add(a);
       }, E = () => {
         D || (I(), this.render(e), this.hooks.emit("render"));
       }, m = (h) => this.setVisibleById(a.id, h), M = (h) => this.setEnabledById(a.id, h), y = () => (D = !0, a.removeFromParent(), !0), N = c === "front" ? n.frontModeStore.css3DRenderer : n.behindModeStore.css3DRenderer;
@@ -124,7 +159,7 @@ class w {
       if (!s)
         return;
       const r = s.mode === "front" ? this.getFrontCSS3DObjectGroup({ addGroupIfNotExists: !1 }) : this.getBehindCSS3DObjectGroup({ addGroupIfNotExists: !1 });
-      !r || (t ? r.add(s) : r.remove(s));
+      r && (t ? r.add(s) : r.remove(s));
     });
     i(this, "createObject", (e, t) => {
       const s = new P(g({ cornerPoints: e }, t));

package/libs/CSS3DRenderPlugin/utils/three/CSS3DRenderer.js

@@ -30,7 +30,7 @@ class A extends p {
     if (this.wrapper || console.warn("wrapper is not find, creating a html element and call setWrapper(wrapper)", this, e), this.requestAnimationFrameId)
       return;
     const s = () => {
-      this.requestAnimationFrameId = requestAnimationFrame(s), !!e.visible && h(e).length !== 0 && this.render(e, i);
+      this.requestAnimationFrameId = requestAnimationFrame(s), e.visible && h(e).length !== 0 && this.render(e, i);
     };
     s();
   }

package/libs/CameraMovementPlugin/CameraMovementPlugin.js

@@ -15,27 +15,29 @@ var b = (e, o, n) => new Promise((m, p) => {
   a((n = n.apply(e, o)).next());
 });
 import { Five as y } from "@realsee/five";
-import * as h from "@tweenjs/tween.js";
-import { tweenProgress as T } from "../shared-utils/animationFrame/tween.js";
-import { Rotation as u } from "./typing.js";
+import { Easing as h } from "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import { tweenProgress as F } from "../shared-utils/animationFrame/tween.js";
+import { Rotation as r } from "./typing.js";
 import { formatLatitude as P, formatLongitude as v } from "../shared-utils/animationFrame/formatRad.js";
 import { progressNumber as I } from "../shared-utils/animationFrame/calculateProgress.js";
 import "../shared-utils/animationFrame/index.js";
-import "../shared-utils/animationFrame/BetterTween.js";
 const w = (e, o, n) => {
   const m = Math.PI, p = m * 2;
-  return e = v(e), o = v(o), n === u.Anticlockwise && e < o && (e += p), n === u.Clockwise && o < e && (o += p), n === u.Loop && o - e > m ? w(e, o, u.Anticlockwise) : n === u.Loop && e - o > m ? w(e, o, u.Clockwise) : { from: e, to: o };
-}, _ = (e) => {
+  return e = v(e), o = v(o), n === r.Anticlockwise && e < o && (e += p), n === r.Clockwise && o < e && (o += p), n === r.Loop && o - e > m ? w(e, o, r.Anticlockwise) : n === r.Loop && e - o > m ? w(e, o, r.Clockwise) : { from: e, to: o };
+}, j = (e) => {
   const o = {}, n = (d, f, ...L) => b(void 0, [d, f, ...L], function* (t, i, a = { preload: !0 }) {
-    return o.interruptCallback && o.interruptCallback(!1), a.asyncStartCallback && (yield a.asyncStartCallback()), t.mode && t.mode !== e.currentMode && (yield e.changeMode(t.mode)), a.preload && t.panoIndex !== void 0 && t.panoIndex !== e.panoIndex && (yield e.preloadPano(t.panoIndex)), a.asyncEndCallback && (yield a.asyncEndCallback()), t.panoIndex === void 0 && t.fov === void 0 && t.latitude === void 0 && t.longitude === void 0 ? !0 : yield new Promise((r, l) => {
+    return o.interruptCallback && o.interruptCallback(!1), a.asyncStartCallback && (yield a.asyncStartCallback()), t.mode && t.mode !== e.currentMode && (yield e.changeMode(t.mode)), a.preload && t.panoIndex !== void 0 && t.panoIndex !== e.panoIndex && (yield e.preloadPano(t.panoIndex)), a.asyncEndCallback && (yield a.asyncEndCallback()), t.panoIndex === void 0 && t.fov === void 0 && t.latitude === void 0 && t.longitude === void 0 ? !0 : yield new Promise((u, l) => {
       const c = t.panoIndex !== void 0 ? t.panoIndex : e.panoIndex;
       c !== void 0 ? e.moveToPano(
         c,
         Object.assign(
           {
             duration: i,
-            moveEndCallback: () => r(!0),
+            // 移动耗时
+            moveEndCallback: () => u(!0),
+            // 移动结束
             moveCancelCallback: () => l(!1)
+            // 移动开始
           },
           t
         )
@@ -45,10 +47,10 @@ const w = (e, o, n) => {
     const i = e.state, a = P(i.latitude), d = P(t.latitude), { from: f, to: L } = w(
       i.longitude,
       t.longitude,
-      t.rotation || u.Loop
-    ), r = i.fov, l = t.fov;
+      t.rotation || r.Loop
+    ), u = i.fov, l = t.fov;
     return {
-      from: { latitude: a, longitude: f, fov: r },
+      from: { latitude: a, longitude: f, fov: u },
       to: { latitude: d, longitude: L, fov: l }
     };
   };
@@ -62,20 +64,22 @@ const w = (e, o, n) => {
         }
         e.moveToPano(t.panoIndex, {
           moveEndCallback: () => c(!0),
+          // 移动结束
           moveCancelCallback: () => k(!1)
+          // 移动开始
         });
       })), a.asyncEndCallback && (yield a.asyncEndCallback());
-      const { from: r, to: l } = m(t);
+      const { from: u, to: l } = m(t);
       return yield new Promise((c) => {
         const k = ({ progress: s }) => {
           const C = {};
-          C.longitude = I(r.longitude, l.longitude, s), C.latitude = I(r.latitude, l.latitude, s), C.fov = I(r.fov, l.fov, s), e.setState(C, !0);
+          C.longitude = I(u.longitude, l.longitude, s), C.latitude = I(u.latitude, l.latitude, s), C.fov = I(u.fov, l.fov, s), e.setState(C, !0);
         }, M = () => {
           c(!0);
-        }, E = () => {
+        }, S = () => {
           c(!1);
-        }, S = t.rotateSpeed ? Math.ceil(Math.abs(l.longitude - r.longitude) / t.rotateSpeed * 1e3) : i, x = T(S, h.Easing.Linear.None).onUpdate(k).onComplete(M).onDestroy(E);
-        t.rotation === u.Loop && x.repeat(1 / 0).yoyo(!0), o.interruptCallback = (s = !0) => {
+        }, E = t.rotateSpeed ? Math.ceil(Math.abs(l.longitude - u.longitude) / t.rotateSpeed * 1e3) : i, x = F(E, h.Linear.None).onUpdate(k).onComplete(M).onDestroy(S);
+        t.rotation === r.Loop && x.repeat(1 / 0).yoyo(!0), o.interruptCallback = (s = !0) => {
           x.destroy(), o.interruptCallback = void 0, o.timeoutId && (clearTimeout(o.timeoutId), o.timeoutId = void 0), c(s);
         }, o.timeoutId = setTimeout(() => {
           o.interruptCallback && o.interruptCallback(!0);
@@ -85,6 +89,6 @@ const w = (e, o, n) => {
   };
 };
 export {
-  _ as CameraMovementPlugin,
-  _ as default
+  j as CameraMovementPlugin,
+  j as default
 };

package/libs/CameraMovementPlugin/index.js

@@ -1,16 +1,14 @@
-import "./CameraMovementPlugin.js";
-import { CameraMovementPlugin as u, CameraMovementPlugin as v } from "./CameraMovementPlugin.js";
-import { CameraMovementEffect as M, Rotation as g } from "./typing.js";
+import { CameraMovementPlugin as t } from "./CameraMovementPlugin.js";
+import { CameraMovementEffect as l, Rotation as u } from "./typing.js";
 import "@realsee/five";
-import "@tweenjs/tween.js";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
 import "../shared-utils/animationFrame/tween.js";
 import "../shared-utils/animationFrame/index.js";
-import "../shared-utils/animationFrame/BetterTween.js";
 import "../shared-utils/animationFrame/formatRad.js";
 import "../shared-utils/animationFrame/calculateProgress.js";
 export {
-  M as CameraMovementEffect,
-  u as CameraMovementPlugin,
-  g as Rotation,
-  v as default
+  l as CameraMovementEffect,
+  t as CameraMovementPlugin,
+  u as Rotation,
+  t as default
 };