@realsee/dnalogel 2.29.0-dev.3 → 2.30.0

package/dist/shared-utils/five/index.d.ts

@@ -1 +1,7 @@
+import type { Five } from '@realsee/five';
+/** Five 模型是否加载完成 */
+export declare function checkFiveModelLoaded(five: Five): {
+    result: boolean;
+    msg: string;
+};
 export * from './mode';

package/libs/CurrentPanoImagePlugin/Controller.d.ts

@@ -0,0 +1,93 @@
+import type { BaseOptions } from '../base/BasePlugin';
+import type { Five } from '@realsee/five';
+import * as BasePlugin from '../base/BasePlugin';
+import type * as PluginType from './typings';
+export declare class CurrentPanoImagePluginController extends BasePlugin.Controller<PluginType.State, PluginType.EventMap> {
+    /** 插件当前状态 */
+    state: PluginType.State;
+    /** 插件配置项 */
+    get config(): {
+        width: number;
+        yOffset: number;
+        yRotate: number;
+        imageURL: string;
+        staticPrefix?: string;
+        i18n?: (key: string) => string;
+    };
+    /** 是否已经被销毁 */
+    get disposed(): boolean;
+    /** 查询问题使用的调试对象 */
+    checkMsg: {
+        meshVisible: string;
+    };
+    private group;
+    private mesh;
+    private textureLoadingPromise?;
+    private opacityAnimeTween?;
+    /** 是否正在走点动画中 */
+    private isInPanoMoveAnime;
+    /** 上一次走点的全景图索引 */
+    private lastArrivedPanoIndex;
+    /** config 的原始值 */
+    private _config;
+    /** disposed 的原始值 */
+    private _disposed;
+    constructor(five: Five, params?: PluginType.Params);
+    /**
+     * 启用插件，响应用户操作并展示UI
+     * @param options
+     */
+    enable(options?: Required<BaseOptions>): void;
+    /** 禁用插件
+     * @param `options` `<Option> | <undefined>`
+     * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+     */
+    disable(options?: BasePlugin.BaseOptions): void;
+    /** 插件内容整体展示
+     * @param `options` `<Partial<BaseOptions>> | <undefined>`
+     * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+     */
+    show(options?: Partial<PluginType.ShowHideOptions>): Promise<void>;
+    /** 插件内容整体隐藏
+     * @param `options` `<Partial<BaseOptions>> | <undefined>`
+     * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+     */
+    hide(options?: Partial<PluginType.ShowHideOptions>): Promise<void>;
+    /** 更改插件 State
+     * @param `state` `<Partial<Plugin.State>>` 插件属性 `state` 的子集。
+     * @param `options` `<Option> | <undefined>`
+     * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+     */
+    setState(state: Partial<PluginType.State>, options?: BasePlugin.BaseOptions): void;
+    /** 更改插件 Config
+     * @param `config` `<Partial<Plugin.Config>>` 插件属性 `config` 的子集。
+     * @param `options` `<Option> | <undefined>`
+     */
+    updateConfig(config: Partial<PluginType.Config>, options?: BasePlugin.BaseOptions): void;
+    /**
+     * 销毁插件
+     * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.mesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
+     */
+    dispose: () => void;
+    private updateState;
+    private updateMeshVisible;
+    /** 根据点位更新 Mesh 坐标 */
+    private updateMeshPosition;
+    /** 重新加载贴图，调用时会先清除已有的贴图 */
+    private reloadTexture;
+    /** north_rad 变化时，需要更新模型的旋转角度 */
+    private updateMeshQuaternion;
+    private checkMeshVisible;
+    private _enable;
+    private _disable;
+    private _show;
+    private _hide;
+    /** 贴图加载完成的回调 */
+    private onTextureLoaded;
+    private onFiveWillLoad;
+    /** 走点前 */
+    private onFivePanoWillArrive;
+    /** 走点后 */
+    private onFivePanoArrived;
+    private onFiveModeChange;
+}

package/libs/CurrentPanoImagePlugin/Controller.js

@@ -0,0 +1,261 @@
+var v = Object.defineProperty;
+var c = Object.getOwnPropertySymbols;
+var g = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
+var p = (r, n, e) => n in r ? v(r, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[n] = e, l = (r, n) => {
+  for (var e in n || (n = {}))
+    g.call(n, e) && p(r, e, n[e]);
+  if (c)
+    for (var e of c(n))
+      b.call(n, e) && p(r, e, n[e]);
+  return r;
+};
+var o = (r, n, e) => (p(r, typeof n != "symbol" ? n + "" : n, e), e);
+var f = (r, n, e) => new Promise((i, t) => {
+  var s = (u) => {
+    try {
+      d(e.next(u));
+    } catch (m) {
+      t(m);
+    }
+  }, h = (u) => {
+    try {
+      d(e.throw(u));
+    } catch (m) {
+      t(m);
+    }
+  }, d = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(s, h);
+  d((e = e.apply(r, n)).next());
+});
+import * as a from "three";
+import { Controller as A } from "../base/BasePlugin.js";
+import { tweenProgress as w } from "../shared-utils/animationFrame/BetterTween.js";
+import "hammerjs";
+import "@realsee/five";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import { equal as P } from "../shared-utils/equal.js";
+import { loadTexture as M } from "../shared-utils/three/loadTexture.js";
+import "../shared-utils/Subscribe.js";
+import "../shared-utils/absoluteUrl.js";
+import "../shared-utils/animationFrame/index.js";
+import "../shared-utils/positionToVector3.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../CSS3DRenderPlugin/utils/even.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../shared-utils/three/centerPoint.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../shared-utils/isTruelyObject.js";
+const y = { userAction: !0 };
+class J extends A {
+  constructor(e, i) {
+    super(e);
+    // ==================== public properties ====================
+    /** 插件当前状态 */
+    o(this, "state");
+    /** 查询问题使用的调试对象 */
+    o(this, "checkMsg", {
+      meshVisible: ""
+    });
+    // ==================== private properties ====================
+    o(this, "group", new a.Group());
+    o(this, "mesh");
+    o(this, "textureLoadingPromise");
+    o(this, "opacityAnimeTween");
+    /** 是否正在走点动画中 */
+    o(this, "isInPanoMoveAnime", !1);
+    /** 上一次走点的全景图索引 */
+    o(this, "lastArrivedPanoIndex", -1);
+    /** config 的原始值 */
+    o(this, "_config");
+    /** disposed 的原始值 */
+    o(this, "_disposed", !1);
+    /**
+     * 销毁插件
+     * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.mesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
+     */
+    o(this, "dispose", () => {
+      this.five.scene.remove(this.group), this.group.remove(...this.group.children), this.five.off("dispose", this.dispose), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive);
+    });
+    o(this, "checkMeshVisible", () => this.state.visible ? this.config.imageURL === "" ? { result: !1, msg: "图片不存在" } : this.mesh.material.map ? this.five.work ? this.five.getCurrentState().mode !== "Panorama" ? { result: !1, msg: "非全景模式" } : this.isInPanoMoveAnime ? { result: !1, msg: "处于走点动画中" } : { result: !0, msg: "" } : { result: !1, msg: "Five 数据未加载" } : { result: !1, msg: "指南针贴图未加载" } : { result: !1, msg: "插件隐藏" });
+    /** 贴图加载完成的回调 */
+    o(this, "onTextureLoaded", (e) => {
+      this.mesh.material.map = e, this.mesh.material.needsUpdate = !0, this.updateMeshVisible();
+    });
+    o(this, "onFiveWillLoad", () => {
+      this.lastArrivedPanoIndex = -1, this.updateMeshVisible();
+    });
+    /** 走点前 */
+    o(this, "onFivePanoWillArrive", (e) => {
+      var i;
+      e !== this.five.getCurrentState().panoIndex && (this.isInPanoMoveAnime = !0, (i = this.opacityAnimeTween) == null || i.dispose(), this.updateMeshVisible());
+    });
+    /** 走点后 */
+    o(this, "onFivePanoArrived", (e) => {
+      var i;
+      e !== this.lastArrivedPanoIndex && (this.lastArrivedPanoIndex = e, this.isInPanoMoveAnime = !1, this.updateMeshPosition(e), this.mesh.material.map && ((i = this.opacityAnimeTween) == null || i.dispose(), this.mesh.material.setValues({ opacity: 0 }), this.opacityAnimeTween = w(1e3).onUpdate(({ progress: t }) => {
+        var s;
+        (s = this.mesh) == null || s.material.setValues({ opacity: t }), this.five.needsRender = !0;
+      }).play()), this.updateMeshVisible(), this.five.needsRender = !0);
+    });
+    o(this, "onFiveModeChange", () => {
+      this.updateMeshVisible();
+    });
+    this.five = e;
+    const t = {
+      enabled: !0,
+      visible: !0
+    };
+    this.state = Object.assign(t, i == null ? void 0 : i.initialState);
+    const s = l({
+      width: 1.4,
+      yOffset: 0.01,
+      yRotate: 0,
+      imageURL: this.absoluteUrl("/release/web/logo.7febb17f.png")
+    }, i == null ? void 0 : i.config);
+    this._config = s, this.group.name = "current-pano-image-plugin-group", this.mesh = new a.Mesh(
+      new a.PlaneBufferGeometry(this.config.width, this.config.width),
+      new a.MeshBasicMaterial({ transparent: !0, opacity: 0, depthTest: !1 })
+    ), this.group.add(this.mesh), this.updateMeshQuaternion(this.config.yRotate), this.updateMeshPosition(this.five.getCurrentState().panoIndex), this.updateMeshVisible(), this.state.enabled && this._enable({ userAction: !1 }), this.five.once("dispose", this.dispose);
+  }
+  /** 插件配置项 */
+  get config() {
+    return l({}, this._config);
+  }
+  /** 是否已经被销毁 */
+  get disposed() {
+    return this._disposed;
+  }
+  /**
+   * 启用插件，响应用户操作并展示UI
+   * @param options
+   */
+  enable(e = y) {
+    var t;
+    if (this.state.enabled)
+      return;
+    const i = (t = e.userAction) != null ? t : !0;
+    this.updateState({ enabled: !0 }, i), this._enable({ userAction: i });
+  }
+  /** 禁用插件
+   * @param `options` `<Option> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  disable(e = {}) {
+    var t;
+    if (this.state.enabled === !1)
+      return;
+    const i = (t = e.userAction) != null ? t : !0;
+    this.updateState({ enabled: !1 }, i), this._disable({ userAction: i });
+  }
+  /** 插件内容整体展示
+   * @param `options` `<Partial<BaseOptions>> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  show(e) {
+    return f(this, null, function* () {
+      if (this.state.visible)
+        return Promise.resolve();
+      if (this.disposed)
+        return Promise.reject(new Error("不能在已销毁的插件上调用 show"));
+      const i = l({ userAction: !0 }, e);
+      this.updateState({ visible: !0 }, i.userAction), yield this._show(i);
+    });
+  }
+  /** 插件内容整体隐藏
+   * @param `options` `<Partial<BaseOptions>> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  hide(e) {
+    return f(this, null, function* () {
+      if (this.state.visible === !1)
+        return;
+      const i = l({ userAction: !0 }, e);
+      this.updateState({ visible: !1 }, i.userAction), yield this._hide(i);
+    });
+  }
+  /** 更改插件 State
+   * @param `state` `<Partial<Plugin.State>>` 插件属性 `state` 的子集。
+   * @param `options` `<Option> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  setState(e, i = {}) {
+    const t = this.state;
+    if (P(e, t, { deep: !0 }))
+      return;
+    const s = i.userAction !== void 0 ? i.userAction : !0;
+    if (this.updateState(e, s), e.enabled !== void 0 && t.enabled !== e.enabled && (e.enabled ? this._enable({ userAction: s }) : this._disable({ userAction: s })), e.visible !== void 0 && t.visible !== e.visible) {
+      const h = { userAction: s, anime: { duration: 500 } };
+      e.visible ? this._show(h) : this._hide(h);
+    }
+  }
+  /** 更改插件 Config
+   * @param `config` `<Partial<Plugin.Config>>` 插件属性 `config` 的子集。
+   * @param `options` `<Option> | <undefined>`
+   */
+  updateConfig(e, i = {}) {
+    var h;
+    const t = this.config, s = l(l({}, t), e);
+    this._config = s, t.imageURL !== s.imageURL && this.reloadTexture(s.imageURL), t.yOffset !== s.yOffset && this.updateMeshPosition(this.five.getCurrentState().panoIndex), t.yRotate !== s.yRotate && this.updateMeshQuaternion(s.yRotate), t.width !== s.width && (this.mesh.geometry = new a.PlaneBufferGeometry(s.width, s.width)), this.hooks.emit("configChange", { prevConfig: t, config: s, userAction: (h = i.userAction) != null ? h : !0 });
+  }
+  updateState(e, i) {
+    const t = this.state;
+    this.state = l(l({}, this.state), e), this.hooks.emit("stateChange", { state: this.state, prevState: t, userAction: i });
+  }
+  updateMeshVisible() {
+    const { result: e, msg: i } = this.checkMeshVisible();
+    this.checkMsg.meshVisible = i, this.mesh.visible = e;
+  }
+  /** 根据点位更新 Mesh 坐标 */
+  updateMeshPosition(e) {
+    var s, h, d;
+    const i = (d = (h = (s = this.five.work) == null ? void 0 : s.observers) == null ? void 0 : h[e]) == null ? void 0 : d.standingPosition, t = i == null ? void 0 : i.clone().setY(i.y + this.config.yOffset);
+    t && this.mesh.position.copy(t);
+  }
+  /** 重新加载贴图，调用时会先清除已有的贴图 */
+  reloadTexture(e) {
+    return f(this, null, function* () {
+      if (this.mesh.material.map = null, e !== "") {
+        const i = M(e);
+        this.textureLoadingPromise = i;
+        const t = yield i;
+        this.textureLoadingPromise === i && (this.onTextureLoaded(t), this.textureLoadingPromise = null);
+      }
+      this.updateMeshVisible();
+    });
+  }
+  /** north_rad 变化时，需要更新模型的旋转角度 */
+  updateMeshQuaternion(e) {
+    const i = new a.Quaternion();
+    i.multiplyQuaternions(
+      // 沿着自身 X 轴旋转 -90 度
+      new a.Quaternion().setFromAxisAngle(new a.Vector3(1, 0, 0), -Math.PI / 2),
+      // 沿着自身 Z 轴旋转 rad 弧度
+      new a.Quaternion().setFromAxisAngle(new a.Vector3(0, 0, 1), e)
+    ), this.mesh.quaternion.copy(i);
+  }
+  _enable(e) {
+    this.hooks.emit("enable", { userAction: e.userAction }), this.config.imageURL && !this.mesh.material.map && !this.textureLoadingPromise && this.reloadTexture(this.config.imageURL), this.five.scene.add(this.group), this.five.needsRender = !0, this.five.work && this.onFiveWillLoad(), this.five.on("willLoad", this.onFiveWillLoad), this.five.on("panoArrived", this.onFivePanoArrived), this.five.on("panoWillArrive", this.onFivePanoWillArrive), this.five.on("modeChange", this.onFiveModeChange);
+  }
+  _disable(e) {
+    this.hooks.emit("disable", { userAction: e.userAction }), this.five.scene.remove(this.group), this.five.needsRender = !0, this.five.off("willLoad", this.onFiveWillLoad), this.five.off("panoArrived", this.onFivePanoArrived), this.five.off("panoWillArrive", this.onFivePanoWillArrive), this.five.off("modeChange", this.onFiveModeChange);
+  }
+  _show(e) {
+    return f(this, null, function* () {
+      this.hooks.emit("show", e), this.updateMeshVisible(), this.five.needsRender = !0;
+    });
+  }
+  _hide(e) {
+    return f(this, null, function* () {
+      this.hooks.emit("hide", e), this.updateMeshVisible(), this.five.needsRender = !0;
+    });
+  }
+}
+export {
+  J as CurrentPanoImagePluginController
+};

package/libs/CurrentPanoImagePlugin/index.d.ts

@@ -0,0 +1,7 @@
+import type { FivePlugin } from '@realsee/five';
+import type * as CurrentPanoImagePluginType from './typings';
+import { CurrentPanoImagePluginController } from './Controller';
+export declare const CurrentPanoImagePlugin: FivePlugin<CurrentPanoImagePluginType.Params, CurrentPanoImagePluginController>;
+export default CurrentPanoImagePlugin;
+export type CurrentPanoImagePluginExportType = CurrentPanoImagePluginController;
+export type { CurrentPanoImagePluginType };

package/libs/CurrentPanoImagePlugin/index.js

@@ -0,0 +1,31 @@
+import { CurrentPanoImagePluginController as t } from "./Controller.js";
+import "three";
+import "../base/BasePlugin.js";
+import "../shared-utils/Subscribe.js";
+import "hammerjs";
+import "@realsee/five";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../shared-utils/positionToVector3.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../CSS3DRenderPlugin/utils/even.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../shared-utils/three/centerPoint.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import "../shared-utils/absoluteUrl.js";
+import "../shared-utils/animationFrame/BetterTween.js";
+import "../shared-utils/animationFrame/index.js";
+import "../shared-utils/equal.js";
+import "../shared-utils/isTruelyObject.js";
+import "../shared-utils/three/loadTexture.js";
+const A = (r, o) => new t(r, o);
+export {
+  A as CurrentPanoImagePlugin,
+  A as default
+};

package/libs/CurrentPanoImagePlugin/typings.d.ts

@@ -0,0 +1,58 @@
+import type * as BasePlugin from '../base/BasePlugin';
+export interface Config extends BasePlugin.Config {
+    /** 贴图宽度，单位：米 */
+    width: number;
+    /** 高度偏移量，单位：米 */
+    yOffset: number;
+    /** 沿着 Y 轴正方向旋转角度，单位：弧度 */
+    yRotate: number;
+    /** 贴图 URL */
+    imageURL: string;
+}
+export interface State extends BasePlugin.State {
+    visible: boolean;
+}
+export interface ShowHideOptions extends BasePlugin.BaseOptions {
+    userAction: boolean;
+}
+export interface EventMap extends BasePlugin.EventMap<State> {
+    /** visible 从 false 到 true 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    show: (event: {
+        userAction: boolean;
+    }) => void;
+    /** visible 从 true 到 false 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    hide: (event: {
+        userAction: boolean;
+    }) => void;
+    /** enabled 从 false 到 true 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    enable: (event: {
+        userAction: boolean;
+    }) => void;
+    /** enabled 从 true 到 false 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    disable: (event: {
+        userAction: boolean;
+    }) => void;
+    /** config 变更的回调
+     * @param event.prevConfig 变更前的 config
+     * @param event.config 变更后的 config
+     * @param event.userAction 是否是用户操作
+     */
+    configChange: (event: {
+        prevConfig: Config;
+        config: Config;
+        userAction: boolean;
+    }) => void;
+}
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+}

package/libs/CurrentPanoImagePlugin/typings.js

@@ -0,0 +1 @@
+

package/libs/base/BasePlugin.js

@@ -14,7 +14,7 @@ let b = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    i(this, "VERSION", "2.29.0-dev.3");
+    i(this, "VERSION", "2.30.0");
     i(this, "five");
     /**
      * 插件事件钩子

package/libs/index.d.ts

@@ -23,4 +23,5 @@ export * from './Object3DHelperPlugin';
 export * from './PanoVideoPlugin';
 export * from './PipelinePlugin';
 export * from './AreaMakerPlugin';
+export * from './CurrentPanoImagePlugin';
 export * as Util from './shared-utils';