@realsee/dnalogel 2.1.0-alpha.13 → 2.1.0-alpha.15

package/libs/src/floorplan/ModelFloorplanPlugin/index.d.ts

@@ -0,0 +1,7 @@
+import type { Parameters } from './typing';
+import type { FivePlugin } from '@realsee/five';
+import { Controller } from './Controller';
+export declare const ModelFloorplanPlugin: FivePlugin<undefined | Parameters, Controller>;
+export declare type ModelFloorplanPluginParameterType = Parameters | undefined;
+export declare type ModelFloorplanPluginReturnType = InstanceType<typeof Controller>;
+export default ModelFloorplanPlugin;

package/libs/src/floorplan/ModelFloorplanPlugin/index.js

@@ -0,0 +1,5 @@
+import { Controller } from './Controller';
+export const ModelFloorplanPlugin = (five, params) => {
+    return new Controller(five, params);
+};
+export default ModelFloorplanPlugin;

package/libs/src/floorplan/ModelFloorplanPlugin/typing.d.ts

@@ -0,0 +1,107 @@
+import type { FLOOR_PLAN_ATTACHED_TO } from '../constant';
+import type * as BasePlugin from '../../base/BasePluginWithData';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanData, FloorplanRoomItem } from '../typings/floorplanData';
+export interface State extends BasePlugin.State {
+    visible: boolean;
+    config: Config;
+}
+export interface Config {
+    /** 指北针的显示文案，默认为 '北' */
+    northDesc: string;
+    /** 户型图展示时，模型的透明度，默认为 1 */
+    modelOpacity: number;
+    /** 鼠标放置在分间上时，是否要自动高亮分间，默认为 true */
+    hoverEnable: boolean;
+    /** 是否要启用指北针功能，默认为 true */
+    compassEnable: boolean;
+    /** Five 切换到 Topview Mode 时，是否自动展示户型图，默认为 true */
+    autoShowEnable: boolean;
+    /** 是否要启用户型图分间标尺功能，默认为 true */
+    ruleLabelsEnable: boolean;
+    /** 是否要启用户型图分间标签功能，默认为 true */
+    roomLabelsEnable: boolean;
+    /** 自定义「雷达」图标 */
+    cameraImageUrl: string;
+    /** 计算户型图大小时，以模型的哪个高度为依据，默认为 BOUNDING_CENTER
+     * - FLOOR_PLAN_ATTACHED_TO.FLOOR: 户型图大小与模型的地板进行贴合
+     * - FLOOR_PLAN_ATTACHED_TO.CEILING: 户型图大小与模型的天花板进行贴合
+     * - FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER: 户型图大小与模型的中心进行贴合
+     */
+    attachedTo: FLOOR_PLAN_ATTACHED_TO;
+    /** 分间标签的自定义函数，通过返回自定义 DOM 替换对应分间的标签 */
+    getLabelElement: undefined | ((room: FloorplanRoomItem) => Element | null);
+    /** 是否支持房屋标签自适应展示，默认为 true
+     * @description
+     * * 标签边框超过房间边框时，自动隐藏；不超过时自动展示。
+     * * 鼠标 hover 时，自动展示。
+     * */
+    adaptiveRoomLabelVisibleEnable: boolean;
+}
+export interface Parameters extends Partial<Config> {
+    selector?: string | Element;
+    scale?: number;
+}
+export interface ViewEvent {
+    /** 是否是用户滑动模型导致的户型图自动展示/消失 */
+    auto: boolean;
+    /** 是否是用户操作 */
+    userAction: boolean;
+}
+export interface EventMap extends BasePlugin.EventMap<State, FloorplanData> {
+    /**
+     * 展示结束的回调
+     * @param event.auto 是否是自动操作
+     * @param event.userAction 是否是用户操作
+     */
+    showAnimationEnded: (event: ViewEvent) => void;
+    /** visible 从 false 到 true 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    show: (event: ViewEvent) => void;
+    /** visible 从 true 到 false 的回调
+     * @param event.auto 是否是自动操作
+     * @param event.userAction 是否是用户操作
+     */
+    hide: (event: ViewEvent) => void;
+    /** enabled 从 false 到 true 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    enable: (event: {
+        userAction: boolean;
+    }) => void;
+    /** enabled 从 true 到 false 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    disable: (event: {
+        userAction: boolean;
+    }) => void;
+    /**
+     * 点击户型图的回调
+     * @return 当返回 false 时，会阻止默认行为
+     */
+    click: () => boolean | void;
+}
+export interface PluginServerData extends BasePlugin.ServerData {
+    version: number;
+    data: FloorplanServerData;
+}
+export interface ShowOptions {
+    /** 展示户型图时，希望到达的楼层数 */
+    floorIndex: number;
+    /** 是否自动展示 */
+    isAutoShow: boolean;
+    /** 展示户型图时，模型透明度 */
+    modelOpacity: number;
+    /** 是否需要 opacity 动画 */
+    immediately: boolean;
+    /** 是否是用户操作 */
+    userAction: boolean;
+}
+export interface HideOptions {
+    /** 是否自动隐藏 */
+    isAutoHide: boolean;
+    /** 是否是用户操作 */
+    userAction: boolean;
+}
+export { FloorplanData as PluginData };

package/libs/src/floorplan/ModelFloorplanPlugin/typing.js

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

package/libs/src/floorplan/PanoFloorplanRadarPlugin/Controller.d.ts

@@ -0,0 +1,36 @@
+import type { Five } from '@realsee/five';
+import type { BaseOptions } from '../../base/BasePlugin';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanExtraObject3D } from '../typings/floorplanData';
+import type { State, Config, EventMap, Parameters, PluginData, PluginServerData } from './typing';
+import * as BasePlugin from '../../base/BasePluginWithData';
+export declare class Controller extends BasePlugin.Controller<State, EventMap, PluginServerData, PluginData> {
+    name: string;
+    state: State;
+    protected data?: PluginData;
+    private app?;
+    private wrapperSelector;
+    private wrapper;
+    private disposed;
+    private extraObjects;
+    constructor(five: Five, params?: Parameters);
+    dispose: () => void;
+    load(serverData: PluginServerData | FloorplanServerData, state?: Partial<State>, userAction?: boolean): Promise<void>;
+    show(options?: BaseOptions): Promise<void>;
+    hide(options?: BaseOptions): Promise<void>;
+    enable(options?: BaseOptions): void;
+    disable(options?: BaseOptions): void;
+    /** 更改插件 State */
+    setState(state: Partial<State>, options?: BaseOptions): void;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): void;
+    changeConfigs(config: Config, userAction?: boolean): void;
+    setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]): void;
+    protected formatData(serverData: PluginServerData): Promise<PluginData>;
+    private _enable;
+    private _disable;
+    private _show;
+    private _hide;
+    private updateState;
+    private render;
+}

package/libs/src/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -0,0 +1,240 @@
+import Main from './Components/Main';
+import equal from '../../shared-utils/equal';
+import { CAMERA_IMAGE } from '../Assets/camera';
+import * as BasePlugin from '../../base/BasePluginWithData';
+import formatData, { formatExtraObjects } from '../utils/formatData';
+export class Controller extends BasePlugin.Controller {
+    constructor(five, params) {
+        super(five);
+        // =============== public properties =================
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'panoFloorplanRadarPlugin'
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== protected properties =================
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== private properties =================
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapperSelector", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "disposed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "extraObjects", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                this.disposed = true;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.wrapper = null;
+                this.wrapperSelector = '';
+                this.hooks.emit('dispose');
+            }
+        });
+        Object.defineProperty(this, "_disable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (options) => {
+                var _a;
+                const { userAction } = options;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.app = undefined;
+                this.hooks.emit('disable', { userAction });
+            }
+        });
+        this.five = five;
+        // =============== init State ===============
+        const baseConfig = {
+            hoverEnable: false,
+            cameraImageUrl: CAMERA_IMAGE,
+        };
+        const paramsConfig = (params === null || params === void 0 ? void 0 : params.configs) ? params.configs : {};
+        const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
+        this.state = { enabled: true, visible: true, config };
+        // =============== init wrapper ===============
+        if (params === null || params === void 0 ? void 0 : params.wrapper)
+            console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+        if (typeof (params === null || params === void 0 ? void 0 : params.wrapper) === 'string')
+            this.wrapperSelector = params.wrapper;
+        else if ((params === null || params === void 0 ? void 0 : params.wrapper) instanceof Element)
+            this.wrapper = params.wrapper;
+        // =============== init Listener ===============
+        five.once('dispose', this.dispose);
+    }
+    async load(serverData, state, userAction = true) {
+        // const loadImage = async () => {
+        //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
+        //   // 当有 svgString 时，没有加载过程
+        //   if (floorplanData.outlines[floorIndex]?.svgContent) return
+        //   // 如果当前楼层图片不存在，不存在加载过程
+        //   const nowFloorImageSrc = floorplanData.outlines[floorIndex]?.url
+        //   if (!nowFloorImageSrc) return
+        //   // 图片加载完成时再 render
+        //   await new Promise<void>((resolve) => {
+        //     const nowFloorImage = new Image()
+        //     nowFloorImage.src = nowFloorImageSrc
+        //     nowFloorImage.onload = () => resolve()
+        //   })
+        // }
+        // await loadImage()
+        function isPluginServerData(serverData) {
+            return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+        }
+        const copyData = JSON.parse(JSON.stringify(serverData));
+        const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+        const prevData = this.data;
+        this.data = await formatData(_serverData);
+        this.hooks.emit('dataLoaded', this.data);
+        this.hooks.emit('dataChange', this.data, prevData);
+        if (state)
+            this.updateState(state, userAction);
+        this.render();
+    }
+    async show(options = {}) {
+        // 已经展示完成了，不做任何操作
+        if (this.state.visible)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: true }, userAction);
+        this._show({ userAction });
+    }
+    async hide(options = {}) {
+        if (!this.state.visible)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: false }, userAction);
+        this._hide({ userAction });
+    }
+    enable(options = {}) {
+        if (this.state.enabled)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: true }, options.userAction || userAction);
+        this._enable({ userAction });
+    }
+    disable(options = {}) {
+        if (!this.state.enabled)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: false }, options.userAction || userAction);
+        this._disable({ userAction });
+    }
+    /** 更改插件 State */
+    setState(state, options = {}) {
+        const prevState = this.state;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState(state, userAction);
+        if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
+            const options = { userAction };
+            state.enabled ? this._enable(options) : this._disable(options);
+        }
+        if (state.visible !== undefined && prevState.visible !== state.visible) {
+            const options = { userAction };
+            state.visible ? this._show(options) : this._hide(options);
+        }
+    }
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        this.render();
+    }
+    changeConfigs(config, userAction = true) {
+        this.setState({ config }, { userAction });
+        this.render();
+    }
+    setExtraObjectsWith3DPositions(data) {
+        if (!this.data)
+            return;
+        this.extraObjects = formatExtraObjects(data, this.five, this.data);
+        this.render();
+    }
+    async formatData(serverData) {
+        return await formatData(serverData.data);
+    }
+    _enable(options) {
+        const { userAction } = options;
+        this.hooks.emit('enable', { userAction });
+        if (this.state.visible)
+            this._show({ userAction });
+    }
+    _show(options) {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('show', { userAction });
+        this.render();
+    }
+    _hide(options) {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('hide', { userAction });
+        this.render();
+    }
+    updateState(state, userAction) {
+        const prevState = this.state;
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (equal(this.state, prevState, { deep: true }))
+            return;
+        this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
+    }
+    render() {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        // 处理 wrapper
+        if (!this.wrapper && this.wrapperSelector) {
+            const _wrapper = document.querySelector(this.wrapperSelector);
+            this.wrapper = _wrapper;
+        }
+        if (!this.data || !this.wrapper)
+            return;
+        const props = Object.assign(Object.assign({}, this.state.config), { five: this.five, floorplanData: this.data, visible: this.state.visible, extraObjects: this.extraObjects });
+        this.app ? this.app.$set(props) : (this.app = new Main({ target: this.wrapper, props }));
+    }
+}

package/libs/src/floorplan/PanoFloorplanRadarPlugin/index.d.ts

@@ -0,0 +1,7 @@
+import type { Parameters } from './typing';
+import type { FivePlugin } from '@realsee/five';
+import { Controller } from './Controller';
+export declare const PanoFloorplanRadarPlugin: FivePlugin<Parameters | undefined, Controller>;
+export declare type PanoFloorplanRadarPluginParameterType = Parameters | undefined;
+export declare type PanoFloorplanRadarPluginReturnType = InstanceType<typeof Controller>;
+export default PanoFloorplanRadarPlugin;

package/libs/src/floorplan/PanoFloorplanRadarPlugin/index.js

@@ -0,0 +1,5 @@
+import { Controller } from './Controller';
+export const PanoFloorplanRadarPlugin = (five, params) => {
+    return new Controller(five, params);
+};
+export default PanoFloorplanRadarPlugin;

package/libs/src/floorplan/PanoFloorplanRadarPlugin/typing.d.ts

@@ -0,0 +1,52 @@
+import type * as BasePlugin from '../../base/BasePluginWithData';
+import type { FloorplanData } from '../typings/floorplanData';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+export interface Config {
+    /** 鼠标放置在分间上时，是否要自动高亮分间 */
+    hoverEnable: boolean;
+    /** 自定义「雷达」图标 */
+    cameraImageUrl: string;
+}
+export interface State extends BasePlugin.State {
+    visible: boolean;
+    config: Config;
+}
+export interface EventMap extends BasePlugin.EventMap<State, FloorplanData> {
+    /** 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 Parameters extends Partial<Config> {
+    wrapper?: string | Element;
+    configs?: {
+        hoverEnable?: boolean;
+        cameraImageUrl?: string;
+    };
+}
+export interface PluginServerData extends BasePlugin.ServerData {
+    version: number;
+    data: FloorplanServerData;
+}
+export { FloorplanData as PluginData };

package/libs/src/floorplan/PanoFloorplanRadarPlugin/typing.js

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

package/libs/src/floorplan/TopviewFloorplanPlugin/Controller.d.ts

@@ -0,0 +1,67 @@
+import type { BaseOptions } from '../../base/BasePlugin';
+import type { Five } from '@realsee/five';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { State, EventMap, Parameters, PluginData, PluginServerData } from './typing';
+import * as BasePlugin from '../../base/BasePluginWithData';
+export declare class Controller extends BasePlugin.Controller<State, EventMap, PluginServerData, PluginData> {
+    name: string;
+    state: State;
+    protected data?: PluginData;
+    private app?;
+    private selector?;
+    private panoIndex;
+    private floorIndex;
+    /** 户型图父容器 */
+    private wrapper?;
+    /** 户型图主容器 */
+    private container;
+    /** 展示户型图图前，Five 的 Panorama Longitude */
+    private lastPanoramaLongitude;
+    /** 户型图大小 */
+    private size;
+    /** 是否已经执行过事件监听 */
+    private hasAddedEventListener;
+    /** 上一次隐藏是否是用户调用了 hide 导致的 */
+    private isHiddenByHideFunc;
+    constructor(five: Five, params?: Parameters);
+    load(serverData: PluginServerData | FloorplanServerData, state?: Partial<State>, userAction?: boolean): Promise<void>;
+    /** 更新户型图大小 */
+    updateSize: () => void;
+    /** 更新户型图位置 */
+    updatePosition(): void;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): this;
+    show(options?: BaseOptions): Promise<void>;
+    hide(options?: BaseOptions): Promise<void>;
+    enable(options?: BaseOptions): void;
+    disable(options?: BaseOptions): void;
+    /** 销毁插件 */
+    dispose: () => void;
+    /** 更改插件 State */
+    setState(state: Partial<State>, options?: BaseOptions): void;
+    protected formatData(serverData: PluginServerData): Promise<PluginData>;
+    private _show;
+    private _hide;
+    private _enable;
+    private _disable;
+    private updateState;
+    private addEventListener;
+    private removeEventListener;
+    /** modelLoaded 之后自动执行 append container 操作  */
+    private onFiveModelLoaded;
+    /** 非 Topview 态隐藏户型图 */
+    private onFiveModeChange;
+    private onFivePanoArrived;
+    private onFiveCameraUpdate;
+    private onFiveWantsGesture;
+    private onFiveWantsMoveToPano;
+    /** 动画结束后是 Topview 态就展示户型图 */
+    private onFiveInitAnimationEnded;
+    private onModelShownFloorChange;
+    /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
+     *
+     * - TODO: 等 selector 功能下掉之后删除这个逻辑
+     */
+    private initContainer;
+    private render;
+}