@realsee/dnalogel 2.0.0-beta.36 → 2.0.0

package/libs/PanoCompassPlugin/Controller.js

@@ -0,0 +1,460 @@
+import * as THREE from 'three';
+import { Five } from '@realsee/five';
+import * as BasePlugin from '../base/BasePluginWithData';
+import { getRoomInfoInstance } from './getRoomInfoInstance';
+import { loadTexture } from '../shared-utils/three/loadTexture';
+import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
+import { tweenProgress } from '../shared-utils/animationFrame/BetterTween';
+const defaultBaseOptions = { userAction: true };
+export class PanoCompassController extends BasePlugin.Controller {
+    constructor(five, config) {
+        super(five);
+        /**
+         * 默认状态
+         */
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                visible: true,
+                enabled: true,
+                config: {
+                    /**
+                     * @todo 图片转base64
+                     */
+                    compassImageUrl: '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png',
+                    entryDoorImageUrl: '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png',
+                },
+            }
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "group", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new THREE.Group()
+        });
+        Object.defineProperty(this, "roomInfoInstance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "roomInfoWrapperInstance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "compassMeshTween", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "compassMesh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "entryDoorMesh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * 销毁插件
+         * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.compassMesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
+         */
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a, _b, _c, _d;
+                this.five.scene.remove(this.group);
+                this.group.remove(...this.group.children);
+                (_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
+                (_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
+                this.five.off('dispose', this.dispose);
+                this.five.off('panoArrived', this.onFivePanoArrived);
+                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+            }
+        });
+        /**
+         * 添加事件监听
+         */
+        Object.defineProperty(this, "_addEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.five.on('panoArrived', this.onFivePanoArrived);
+                this.five.on('panoWillArrive', this.onFivePanoWillArrive);
+                this.five.on('modeChange', this.onFiveModeChange);
+                this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+            }
+        });
+        /**
+         * 移除事件监听
+         */
+        Object.defineProperty(this, "_removeEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.five.off('panoArrived', this.onFivePanoArrived);
+                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+                this.five.off('modeChange', this.onFiveModeChange);
+                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+            }
+        });
+        /**
+         * 启用，响应事件，展示UI
+         */
+        Object.defineProperty(this, "_enable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.five.scene.add(this.group);
+                this.init();
+                this.onFivePanoArrived(this.five.panoIndex || 0);
+                this._addEventListener();
+            }
+        });
+        /**
+         * 禁用，不响应事件，不展示UI
+         */
+        Object.defineProperty(this, "_disable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this._clearCompassIfNeed();
+                this._clearEntryDoorIfNeed();
+                this.five.scene.remove(this.group);
+                this._removeEventListener();
+            }
+        });
+        /**
+         * 展示UI
+         */
+        Object.defineProperty(this, "_toggleVisible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.group.visible = this.state.visible;
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "_clearCompassIfNeed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                if (this.compassMesh) {
+                    this.group.remove(this.compassMesh);
+                    (_a = this.compassMesh.material.map) === null || _a === void 0 ? void 0 : _a.dispose();
+                    this.compassMesh = null;
+                }
+            }
+        });
+        Object.defineProperty(this, "_clearEntryDoorIfNeed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                if (this.entryDoorMesh) {
+                    this.group.remove(this.entryDoorMesh);
+                    (_a = this.entryDoorMesh.material.map) === null || _a === void 0 ? void 0 : _a.dispose();
+                    this.entryDoorMesh = null;
+                }
+                if (this.roomInfoInstance) {
+                    this.roomInfoInstance.dispose();
+                    this.roomInfoInstance = null;
+                }
+                if (this.roomInfoWrapperInstance) {
+                    this.roomInfoWrapperInstance.dispose();
+                    this.roomInfoWrapperInstance = null;
+                }
+            }
+        });
+        Object.defineProperty(this, "onFivePanoWillArrive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (panoIndex) => {
+                var _a, _b;
+                if (panoIndex === this.five.panoIndex)
+                    return;
+                (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
+                (_b = this.compassMesh) === null || _b === void 0 ? void 0 : _b.material.setValues({ opacity: 0 });
+            }
+        });
+        Object.defineProperty(this, "onFivePanoArrived", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (panoIndex) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                // ======== fix compass position ========
+                const standingPosition = (_c = (_b = (_a = this.five.work) === null || _a === void 0 ? void 0 : _a.observers) === null || _b === void 0 ? void 0 : _b[panoIndex]) === null || _c === void 0 ? void 0 : _c.standingPosition;
+                if (this.compassMesh) {
+                    // 指南针上移 0.01m，防止与地板重合
+                    this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+                    if (this.compassMesh.material.opacity === 0) {
+                        (_d = this.compassMeshTween) === null || _d === void 0 ? void 0 : _d.dispose();
+                        this.compassMeshTween = tweenProgress(1000)
+                            .onUpdate(({ progress }) => {
+                            var _a;
+                            (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
+                            this.five.needsRender = true;
+                        })
+                            .play();
+                    }
+                }
+                // ======== fix entry door label position and rotation ========
+                if (this.entryDoorMesh) {
+                    const entryDoorPosition = new THREE.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
+                    const panoToEntryDoorVector = entryDoorPosition
+                        .clone()
+                        .setY(standingPosition.y)
+                        .sub(standingPosition)
+                        .normalize();
+                    const compassEntryDoorPosition = standingPosition
+                        .clone()
+                        .add(panoToEntryDoorVector.clone().multiplyScalar(0.7))
+                        .setY(standingPosition.y + 0.01);
+                    this.entryDoorMesh.rotation.z = new THREE.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
+                    this.entryDoorMesh.position.copy(compassEntryDoorPosition);
+                    // 不是客厅时，隐藏入户门指引
+                    ((_e = this.data) === null || _e === void 0 ? void 0 : _e.room_observers[panoIndex].room.type) === 1
+                        ? (_f = this.entryDoorMesh) === null || _f === void 0 ? void 0 : _f.material.setValues({ opacity: 1 })
+                        : (_g = this.entryDoorMesh) === null || _g === void 0 ? void 0 : _g.material.setValues({ opacity: 0 });
+                }
+                // ======== fix room info ========
+                if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
+                    this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+                    this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
+                }
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "onFiveCameraDirectionUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ({ longitude, latitude, }) => {
+                var _a, _b;
+                if (!this.roomInfoWrapperInstance)
+                    return;
+                this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
+                latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
+                    ? (_a = this.roomInfoInstance) === null || _a === void 0 ? void 0 : _a.show()
+                    : (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
+            }
+        });
+        // eslint-disable-next-line max-params
+        Object.defineProperty(this, "onFiveModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode, prevMode, panoIndex, toPose, userAction) => {
+                if (mode === prevMode)
+                    return;
+                this.setState({
+                    visible: mode === Five.Mode.Panorama,
+                }, { userAction });
+            }
+        });
+        this.five.scene.add(this.group);
+        this.five.once('dispose', this.dispose);
+        this.setState({
+            visible: true,
+            enabled: true,
+            config: Object.assign(Object.assign({}, this.state.config), (config || {})),
+        });
+    }
+    /**
+     * 启用插件，响应用户操作并展示UI
+     * @param options
+     */
+    enable(options = defaultBaseOptions) {
+        this.setState({
+            enabled: true,
+        }, options);
+    }
+    /**
+     * 禁用插件，禁止响应用户操作并隐藏UI
+     * @param options
+     */
+    disable(options = defaultBaseOptions) {
+        this.setState({
+            enabled: false,
+        }, options);
+    }
+    /**
+     * 展示UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    show(options = defaultBaseOptions) {
+        if (!this.state.enabled)
+            return;
+        this.setState({
+            visible: true,
+        }, options);
+        return Promise.resolve();
+    }
+    /**
+     * 隐藏UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    hide(options = defaultBaseOptions) {
+        if (!this.state.enabled)
+            return;
+        this.setState({
+            visible: false,
+        }, options);
+        return Promise.resolve();
+    }
+    setState(state, options = { userAction: true }) {
+        var _a, _b;
+        const prevState = JSON.parse(JSON.stringify(this.state));
+        this.state = {
+            visible: (_a = state.visible) !== null && _a !== void 0 ? _a : prevState.visible,
+            enabled: (_b = state.enabled) !== null && _b !== void 0 ? _b : prevState.enabled,
+            config: Object.assign(Object.assign({}, prevState.config), (state.config || {})),
+        };
+        this.hooks.emit('stateChange', {
+            state: this.state,
+            prevState,
+            userAction: options.userAction,
+        });
+        if (state.enabled === true) {
+            this._enable();
+            this.hooks.emit('enable', options);
+        }
+        if (state.enabled === false) {
+            this._disable();
+            this.hooks.emit('disable', options);
+        }
+        if (state.visible === false) {
+            this._toggleVisible();
+            this.hooks.emit('hide', options);
+        }
+        if (state.visible === true) {
+            this._toggleVisible();
+            this.hooks.emit('show', options);
+        }
+        /**
+         * @todo config变化不应该重新初始化，需要做精准的替换
+         */
+        if (state.config) {
+            this.init();
+        }
+    }
+    async load(data, state, userAction = true) {
+        const nextData = await this.formatData(data);
+        if (JSON.stringify(this.data) !== JSON.stringify(nextData)) {
+            this.hooks.emit('dataChange', nextData, this.data);
+            this.data = Object.assign({}, nextData);
+            this.init();
+            if (state) {
+                this.setState(state, { userAction });
+            }
+            this.hooks.emit('dataLoaded', this.data);
+        }
+    }
+    formatData(serverData) {
+        if (serverData.version && serverData.data) {
+            return Promise.resolve(serverData.data);
+        }
+        else {
+            return Promise.resolve(serverData);
+        }
+    }
+    /**
+     * 初始化
+     * @todo 逻辑需要细分
+     */
+    async init() {
+        var _a, _b, _c, _d;
+        const northRad = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.north_rad) !== null && _b !== void 0 ? _b : null;
+        this._clearCompassIfNeed();
+        if (northRad !== null) {
+            this.compassMesh = await this.loadCompassMesh();
+            this.compassMesh.rotateX(-Math.PI / 2);
+            this.compassMesh.rotateZ(northRad - Math.PI / 2);
+            this.group.add(this.compassMesh);
+        }
+        const entrance = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.entrance) !== null && _d !== void 0 ? _d : null;
+        this._clearEntryDoorIfNeed();
+        if (entrance !== null) {
+            this.entryDoorMesh = await this.loadEntryDoorMesh();
+            this.roomInfoWrapperInstance = this.loadRoomInfo();
+            this.roomInfoInstance = getRoomInfoInstance();
+            this.entryDoorMesh.rotateX(-Math.PI / 2);
+            if (this.roomInfoWrapperInstance) {
+                this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
+            }
+            this.group.add(this.entryDoorMesh);
+        }
+        this.onFivePanoArrived(this.five.panoIndex || 0);
+        this.five.needsRender = true;
+    }
+    async loadCompassMesh() {
+        const compassImageUrl = this.state.config.compassImageUrl;
+        const compassTexture = await loadTexture(compassImageUrl);
+        const compassGeometry = new THREE.CircleGeometry(0.7, 32);
+        const compassMaterial = new THREE.MeshBasicMaterial({
+            map: compassTexture,
+            transparent: true,
+            opacity: 0,
+            depthTest: false,
+        });
+        const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
+        compassMesh.name = 'pano-compass-mesh';
+        return compassMesh;
+    }
+    async loadEntryDoorMesh() {
+        const entryDoorImageUrl = this.state.config.entryDoorImageUrl;
+        const entryDoorTexture = await loadTexture(entryDoorImageUrl);
+        const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
+        const entryDoorMaterial = new THREE.MeshBasicMaterial({
+            map: entryDoorTexture,
+            transparent: true,
+            opacity: 0.8,
+            depthTest: false,
+        });
+        const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
+        entryDoorMesh.name = 'pano-compass-entry-door';
+        return entryDoorMesh;
+    }
+    loadRoomInfo() {
+        const points = [
+            new THREE.Vector3(-0.7, 0, -0.7),
+            new THREE.Vector3(0.7, 0, -0.7),
+            new THREE.Vector3(0.7, 0, 0.7),
+            new THREE.Vector3(-0.7, 0, 0.7),
+        ];
+        const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
+        return roomInfo;
+    }
+}

package/libs/PanoCompassPlugin/index.d.ts

@@ -1,8 +1,7 @@
-import PanoCompassPlugin from './Plugin';
-export { PanoCompassPlugin };
+import type { FivePlugin } from '@realsee/five';
+import { PanoCompassController } from './Controller';
+import type { PanoCompassPluginParameterType } from './typings';
+export declare type PanoCompassPluginExportType = PanoCompassController;
+export declare const PanoCompassPlugin: FivePlugin<PanoCompassPluginParameterType, PanoCompassPluginExportType>;
 export default PanoCompassPlugin;
-export type { PanoCompassPluginParameterType, PanoCompassPluginData, PanoCompassPluginExportType } from './Plugin';
-export declare const panoCompassPluginServerParams: {
-    name: string;
-    version: number;
-};
+export type { PanoCompassPluginParameterType, PanoCompassPluginData } from './typings';

package/libs/PanoCompassPlugin/index.js

@@ -1,7 +1,3 @@
-import PanoCompassPlugin from './Plugin';
-export { PanoCompassPlugin };
+import { PanoCompassController } from './Controller';
+export const PanoCompassPlugin = (five, config) => new PanoCompassController(five, config);
 export default PanoCompassPlugin;
-export const panoCompassPluginServerParams = {
-    name: 'PanoCompassPlugin',
-    version: 0,
-};

package/libs/PanoCompassPlugin/typings.d.ts

@@ -0,0 +1,57 @@
+import type { FloorplanServerRoomItem } from '../floorplan/typings/floorplanServerData';
+import type * as BasePlugin from '../base/BasePluginWithData';
+export interface Config {
+    compassImageUrl: string;
+    entryDoorImageUrl: string;
+}
+export interface State extends BasePlugin.State {
+    visible: boolean;
+    config: Config;
+}
+export interface PluginData {
+    north_rad: null | number;
+    entrance: null | undefined | {
+        position: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    };
+    room_observers: undefined | {
+        index: number;
+        floor_index: number;
+        room: FloorplanServerRoomItem;
+    }[];
+}
+export interface EventMap extends BasePlugin.EventMap<State, PluginData> {
+    /** 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;
+}
+export interface PluginServerData extends BasePlugin.ServerData {
+    version: number;
+    data: PluginData;
+}
+export declare type PanoCompassPluginParameterType = Partial<Config> | undefined;
+export declare type PanoCompassPluginData = PluginData;

package/libs/PanoCompassPlugin/typings.js

@@ -0,0 +1 @@
+export {};

package/libs/PanoDoorLabelPlugin/BaseController.d.ts

@@ -0,0 +1,60 @@
+import { Five } from '@realsee/five';
+import { BaseOptions, Controller, EventMap, State } from 'src/base/BasePlugin';
+/**
+ * pano plugin controller 基类
+ * @author kyleju
+ */
+export declare abstract class BasePanoPluginController<T extends State, E extends EventMap<T>> extends Controller<T, E> {
+    state: T;
+    container: Element;
+    enabled: boolean;
+    constructor(five: Five);
+    /**
+     * 启用组件
+     * @param options
+     */
+    enable(options?: BaseOptions): void;
+    /**
+     * 禁用组件
+     * @param options
+     */
+    disable(options?: BaseOptions): void;
+    /**
+     * 显示 UI
+     * @param options
+     * @returns
+     */
+    show(options?: BaseOptions): Promise<void>;
+    /**
+     * 隐藏 UI
+     * @param options
+     * @returns
+     */
+    hide(options: BaseOptions): Promise<void>;
+    /**
+     * 销毁对象
+     */
+    dispose(): void;
+    /**
+     * 设置状态
+     * @param state @T 状态
+     * @param options @BaseOptions 可选配置
+     * @returns
+     */
+    setState(state: Partial<T>, options?: BaseOptions): void;
+    get visible(): boolean;
+    appendTo(container: Element): void;
+    private updateState;
+    /**
+     * 组件 渲染
+     */
+    abstract render(): any;
+    /**
+     * State 初始化
+     */
+    abstract initState(): T;
+    /**
+     * State 改变回调
+     */
+    abstract stateChangedCallback(prevState: T, options?: BaseOptions): any;
+}