@realsee/dnalogel 0.1.7 → 2.0.0-alpha.1

package/libs/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleItem.svelte

@@ -0,0 +1,148 @@
+<script>import { notNil } from '../../../../shared-utils/isNil';
+export let pxmm;
+export let type;
+export let data;
+export let bounding;
+const padding = 1000;
+const isTop = type === 'top';
+const isBottom = type === 'bottom';
+const isLeft = type === 'left';
+const isRight = type === 'right';
+const isRow = isTop || isBottom;
+// 计算每一段墙的长度，以及墙两侧点距离标尺初始点的像素值
+const positionArray = data
+    .map(([start, end]) => (isRow ? [start.x, end.x] : [start.y, end.y]))
+    .flat()
+    .sort()
+    .filter((x, index, arr) => {
+    if (index === 0)
+        return true;
+    return x !== arr[index - 1];
+});
+const minPosition = positionArray[0];
+const maxPosition = positionArray.slice(-1)[0];
+const length = maxPosition - minPosition;
+const minBounding = isRow ? bounding.min.x : bounding.min.y;
+const lengthPx = length * pxmm;
+const positionPxArray = positionArray.map((x) => ((x - minPosition) / length) * lengthPx);
+// 在主要方向上的偏移量，上下的标尺是距离图片左侧的长度，左右的标尺是距离图片底部的距离
+const translateMain = (minPosition - minBounding) * pxmm;
+// 在次要方向的偏移量，希望达到的效果是标尺轴距离户型图边界 27px，但是图片自身是带有 1000mm 的边界，所以在计算时需要减去这个边界
+const translateSecond = 27 - padding * pxmm;
+const translate = (() => {
+    if (isTop)
+        return `translate(${translateMain}px, ${-translateSecond}px)`;
+    if (isBottom)
+        return `translate(${translateMain}px, ${translateSecond}px)`;
+    if (isLeft)
+        return `translate(${-translateSecond}px, ${-translateMain}px)`;
+    if (isRight)
+        return `translate(${translateSecond}px, ${-translateMain - lengthPx}px)`;
+})();
+const rotate = isRow ? 'rotate(0)' : 'rotate(-90deg)';
+const transform = `${translate} ${rotate}`;
+const transformOrigin = `${isRight ? 'right' : 'left'} ${isTop ? 'top' : 'bottom'}`;
+const width = lengthPx + 'px';
+// 把点位的户型图坐标转成距离起始位置的像素值
+const textArray = positionArray
+    .map((position, index, array) => {
+    if (index === 0)
+        return null;
+    const distance = position - array[index - 1];
+    const positionPx = ((array[index - 1] + distance / 2 - minPosition) / length) * lengthPx;
+    return { distance, positionPx };
+})
+    .filter(notNil)
+    .filter((item) => item.distance / length > 0.12);
+</script>
+
+<div
+  class="floorplan-plugin__rule-labels floorplan-plugin__rule-labels-{type}"
+  style:width
+  style:transform
+  style:transform-origin="{transformOrigin}"
+>
+  <div class="floorplan-plugin__rule-line"></div>
+  {#each positionPxArray as position, positionIndex (positionIndex)}
+    <div class="floorplan-plugin__rule-scale" style:left="{position}px"></div>
+  {/each}
+  {#each textArray as textItem, textItemIndex (textItemIndex)}
+    <div
+      class="floorplan-plugin__text-wrapper"
+      class:floorplan-plugin__text-wrapper--is-left-or-top="{isLeft || isTop}"
+      class:floorplan-plugin__text-wrapper-is-right-or-bottom="{isRight || isBottom}"
+      style:left="{textItem.positionPx}px"
+    >
+      <span class="floorplan-plugin__rule-text" class:is-row="{isRow}">
+        {textItem.distance}
+      </span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .floorplan-plugin__rule-labels {
+    position: absolute;
+    height: 5px;
+    display: flex;
+    align-items: center;
+  }
+  .floorplan-plugin__rule-labels-top {
+    left: 0;
+    top: 0;
+  }
+  .floorplan-plugin__rule-labels-bottom {
+    left: 0;
+    bottom: 0;
+  }
+  .floorplan-plugin__rule-labels-left {
+    bottom: 0;
+    left: 0;
+  }
+  .floorplan-plugin__rule-labels-right {
+    bottom: 0;
+    right: 0;
+  }
+
+  .floorplan-plugin__rule-line {
+    background: #fff;
+    opacity: 0.05;
+    width: 100%;
+    height: 1px;
+  }
+
+  .floorplan-plugin__rule-scale {
+    position: absolute;
+    background: #fff;
+    opacity: 0.05;
+    transform-origin: center;
+    width: 1px;
+    height: 5px;
+  }
+
+  .floorplan-plugin__text-wrapper {
+    width: 0;
+    height: 0;
+    position: absolute;
+  }
+  .floorplan-plugin__text-wrapper.floorplan-plugin__text-wrapper--is-left-or-top {
+    top: 10px;
+  }
+  .floorplan-plugin__text-wrapper.floorplan-plugin__text-wrapper-is-right-or-bottom {
+    bottom: 10px;
+  }
+
+  .floorplan-plugin__rule-text {
+    position: absolute;
+    width: max-content;
+    display: block;
+    transform: translate(-50%, -50%) rotate(180deg);
+    font-size: 10px;
+    color: #fff;
+    opacity: 0.2;
+  }
+
+  .floorplan-plugin__rule-text.is-row {
+    transform: translate(-50%, -50%);
+  }
+</style>

package/libs/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleItem.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":[],"sources":["RuleItem.svelte"]}

package/libs/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleLabels.svelte

@@ -0,0 +1,15 @@
+<script>import RuleItem from './RuleItem.svelte';
+export let pxmm;
+export let floorIndex;
+export let floorplanData;
+$: bounding = floorplanData.bounding;
+$: ruleLabelData = floorplanData.floorDatas[floorIndex].rules;
+$: ruleLabelDataKeys = Object.keys(ruleLabelData);
+$: ruleLabelArray = ruleLabelDataKeys.map((key) => [key, ruleLabelData[key]]);
+</script>
+
+<div class="floorplan-plugin__rulelabels">
+  {#each ruleLabelArray as [type, data] (type)}
+    <RuleItem {...{ type, data, pxmm, bounding }} />
+  {/each}
+</div>

package/libs/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleLabels.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;;;;;;;;AAYjB,CAAC,CAAC,MAAM;;AAER,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,kBAAkB,CAAC;AACzC,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AAC9C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACnD,EAAE,CAAC,CAAC,IAAI;AACR,CAAC,CAAC,GAAG;","names":[],"sources":["RuleLabels.svelte"]}

package/{plugins → libs}/floorplan/ModelFloorplanPlugin/Controller.d.ts

@@ -1,16 +1,17 @@
-import * as React from 'react';
 import { Five, Subscribe } from '@realsee/five';
-import { FloorplanEventHandlers } from './typings/events.type';
-import { FloorplanServerData } from '../typings/floorplanServerData';
-import { FloorplanRoomItem } from '../typings/floorplanData';
+import type { FloorplanEventHandlers } from './typings/events.type';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanRoomItem } from '../typings/floorplanData';
 export interface ModelFloorplanParameterType {
     selector?: string | Element;
     scale?: number;
+    modelOpacity?: number;
     autoShowEnable?: boolean;
     hoverEnable?: boolean;
-    cameraImage?: {
-        style: React.CSSProperties;
-    };
+    compassEnable?: boolean;
+    ruleLabelsEnable?: boolean;
+    roomLabelsEnable?: boolean;
+    cameraImageUrl?: string;
     getLabelElement?: (room: FloorplanRoomItem) => Element | null;
 }
 export declare type ModelFloorplanPluginsConfigs = Omit<ModelFloorplanParameterType, 'selector' | 'scale'>;
@@ -18,7 +19,7 @@ export interface ModelFloorplanPluginsShowOpts {
     floorIndex?: number;
     isAutoShow?: boolean;
     modelOpacity?: number;
-    immediatily?: boolean;
+    immediately?: boolean;
     userAction?: boolean;
 }
 export declare const MODEL_FLOORPLAN_PLUGIN_NAME = "modelFloorplanPlugin";
@@ -33,6 +34,7 @@ export default class ModelFloorplanPluginController {
         width: number;
         height: number;
     };
+    private app?;
     private pxmm;
     private five;
     private panoIndex;
@@ -64,15 +66,15 @@ export default class ModelFloorplanPluginController {
      * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
      * @param opts.floorIndex 楼层
      * @param opts.modelOpacity 模型透明度
-     * @param opts.immediatily 是否立即展示
+     * @param opts.immediately 是否立即展示
      * @param opts.isAutoShow 是否是自动展示
      */
-    show: (opts?: ModelFloorplanPluginsShowOpts | undefined) => Promise<boolean>;
+    show: (opts?: ModelFloorplanPluginsShowOpts) => Promise<boolean>;
     /** 隐藏户型图 */
     hide: (options?: {
-        isAutoHide?: boolean | undefined;
-        userAction?: boolean | undefined;
-    } | undefined) => boolean;
+        isAutoHide?: boolean;
+        userAction?: boolean;
+    }) => boolean;
     /** 更改户型图楼层 */
     changeFloor(floorIndex: number): void;
     changeConfigs(params: ModelFloorplanPluginsConfigs): void;
@@ -81,7 +83,7 @@ export default class ModelFloorplanPluginController {
     private handleModelLoaded;
     private handleClick;
     private handleWantsTapGesture;
-    /** 从 Panorama 切换到其他模式时，记录当前的相机水平视角 */
+    /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
     private handleWantsChangeMode;
     /** 监听模型态变化，只有在模型态才进行手势动作监听 */
     private handleModeChange;

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -0,0 +1,357 @@
+import Main from './Components/Main.svelte';
+import to from '../../shared-utils/to';
+import formatData from '../utils/formatData';
+import equal from '../../shared-utils/equal';
+import getPxmm from '../../shared-utils/getPxmm';
+import correctFiveState, { checkShowState } from './utils/correctFiveState';
+import changeModelCanvasOpacity from '../../shared-utils/changeModelCanvasOpacity';
+import { omit } from '../../shared-utils/filter';
+import { Subscribe } from '@realsee/five';
+import { FloorplanErrorType, FIVE_CAMERA_DEFAULT_FOV, SHOW_ANIME_DURATION } from './utils/constant';
+export const MODEL_FLOORPLAN_PLUGIN_NAME = 'modelFloorplanPlugin';
+export default class ModelFloorplanPluginController {
+    name = MODEL_FLOORPLAN_PLUGIN_NAME;
+    /** 用于绑定事件钩子 */
+    hooks;
+    /** 展示状态 */
+    visible = false;
+    /** 户型图大小 */
+    size = { width: 0, height: 0 };
+    app = undefined;
+    pxmm = 0;
+    five;
+    panoIndex = 0;
+    floorIndex = 0;
+    configs = {};
+    lastPanoramaLongitude = 0;
+    selector;
+    floorplanData;
+    wrapper;
+    container = document.createElement('div');
+    showState;
+    /** 记录上次 show 的参数，如果不一致，需要 reject 掉正在进行的 showPromise */
+    ModelFloorplanPluginsShowOpts;
+    showPromise;
+    showRejection;
+    constructor(five, params) {
+        this.five = five;
+        this.hooks = new Subscribe();
+        this.selector = params.selector;
+        this.configs = omit(params, ['selector']);
+        this.showState = { longitude: 0, latitude: Math.PI / 2, fov: FIVE_CAMERA_DEFAULT_FOV / (params?.scale ?? 1) };
+        // 设置 container 样式
+        this.container.classList.add('floorplan-plugin');
+        Object.assign(this.container.style, {
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+            pointerEvents: 'none',
+            zIndex: 10,
+        });
+        // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+        this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
+        five.once('dispose', this.dispose);
+        five.on('modeChange', this.handleModeChange);
+        five.on('panGesture', this.handlePanGesture);
+        five.on('panoArrived', this.handlePanoArrived);
+        five.on('wantsChangeMode', this.handleWantsChangeMode);
+        five.on('wantsInteriaPan', this.handleWantsInteriaPan);
+        five.on('modelShownFloorChange', this.onModelShownFloorChange);
+    }
+    dispose = () => {
+        const five = this.five;
+        this.hide();
+        this.app?.$destroy();
+        this.container?.remove();
+        five.off('modelLoaded', this.handleModelLoaded);
+        five.off('modeChange', this.handleModeChange);
+        five.off('panGesture', this.handlePanGesture);
+        five.off('panoArrived', this.handlePanoArrived);
+        five.off('wantsChangeMode', this.handleWantsChangeMode);
+        five.off('wantsInteriaPan', this.handleWantsInteriaPan);
+        five.off('wantsTapGesture', this.handleWantsTapGesture);
+        five.off('modelShownFloorChange', this.onModelShownFloorChange);
+    };
+    /** 加载户型图数据 */
+    async load(data) {
+        const copyData = JSON.parse(JSON.stringify(data));
+        this.floorplanData = await formatData(copyData);
+        this.render();
+    }
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        wrapper.appendChild(this.container);
+        return this;
+    }
+    /** 更新户型图大小 */
+    updateSize = () => {
+        if (!this.floorplanData)
+            return;
+        if (!checkShowState(this.five, this.showState))
+            return;
+        if (!this.container || !this.wrapper)
+            return;
+        // 计算户型图展示大小
+        const { min, max } = this.floorplanData.bounding;
+        const width = max.x - min.x;
+        const height = max.y - min.y;
+        // 每毫米对应的 px 值
+        const pxmm = getPxmm(this.five, this.wrapper);
+        const _width = Math.ceil(width * pxmm);
+        const _height = Math.ceil(height * pxmm);
+        if (this.size.width === _width && this.size.height === _height)
+            return;
+        this.pxmm = pxmm;
+        this.size = { width: _width, height: _height };
+        this.container.style.width = _width + 'px';
+        this.container.style.height = _height + 'px';
+    };
+    /** 展示户型图
+     * 1. show 函数大部分情况下需要耗时
+     * 2. 如果当前已经在展示中，将不会触发任何事件
+     * 3. 如果展示过程被中断，将抛出错误
+     * 4. 多次调用 show 方法，只会触发一次 showAnimationEnded 事件，但是展示结果会取决于最后一次调用参数
+     * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
+     * @param opts.floorIndex 楼层
+     * @param opts.modelOpacity 模型透明度
+     * @param opts.immediately 是否立即展示
+     * @param opts.isAutoShow 是否是自动展示
+     */
+    show = async (opts) => {
+        // 已经在展示中了
+        if (!this.showPromise && this.visible)
+            return true;
+        if (!this.five.model?.loaded)
+            throw new Error(FloorplanErrorType.ModelNotLoaded);
+        if (!this.floorplanData)
+            throw new Error(FloorplanErrorType.DataNotLoaded);
+        this.visible = true;
+        if (this.showPromise) {
+            const sameWithLastOpts = equal(opts, this.ModelFloorplanPluginsShowOpts, { deep: false });
+            if (!!this.showPromise && sameWithLastOpts)
+                return this.showPromise;
+            if (!!this.showPromise && !sameWithLastOpts)
+                this.showRejection?.(FloorplanErrorType.DifferentShowParams);
+        }
+        this.ModelFloorplanPluginsShowOpts = opts;
+        const getShowPromise = async () => {
+            let hasRejected = false;
+            let externalErrorMsg;
+            this.showRejection = (errorMsg) => {
+                hasRejected = true;
+                externalErrorMsg = errorMsg;
+            };
+            const [correctError] = await to(correctFiveState(this.five, this.showState, opts?.userAction));
+            if (correctError)
+                throw correctError;
+            // 异步结束要判断当前是不是被中断了，是不是调用了隐藏
+            if (hasRejected)
+                throw externalErrorMsg ? new Error(externalErrorMsg) : new Error(FloorplanErrorType.UnknownError);
+            if (!this.visible)
+                throw new Error(FloorplanErrorType.UnknownError);
+            // 更新户型图状态
+            this.visible = true;
+            // 更新户型图大小
+            this.updateSize();
+            // 高亮当前楼层，有两个目的
+            // 1. 点击模型时，可以跳转到当前楼层的点位上
+            // 2. 当前楼层比较小时，户型图也比较小，如果展示全部楼层，会展示户型图外有一圈模型
+            if (opts?.floorIndex)
+                this.floorIndex = opts.floorIndex;
+            this.five.model.show(this.floorIndex);
+            // 模型消失, 渲染户型图
+            const modelOpacity = opts?.modelOpacity ?? this.configs.modelOpacity ?? 1;
+            const renderDuration = opts?.immediately ? 0 : SHOW_ANIME_DURATION;
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+            this.render(renderDuration);
+            // 展示之后的事件监听
+            this.five.on('wantsGesture', this.handleWantsGesture);
+            this.five.on('wantsTapGesture', this.handleWantsTapGesture);
+            return true;
+        };
+        const showPromise = getShowPromise()
+            .then(() => {
+            this.hooks.emit('showAnimationEnded', { auto: !!opts?.isAutoShow, userAction: opts?.userAction ?? true });
+            return true;
+        })
+            .catch((error) => {
+            // 自动展示的报错内部处理
+            if (opts?.isAutoShow)
+                return false;
+            if (!(error instanceof Error))
+                return false;
+            // 非自动展示的报错继续向外抛出
+            throw error;
+        })
+            .finally(() => {
+            this.showPromise = undefined;
+            this.showRejection = undefined;
+        });
+        this.showPromise = showPromise;
+        return showPromise;
+    };
+    /** 隐藏户型图 */
+    hide = (options) => {
+        if (this.size.width === 0)
+            return true;
+        if (this.visible === false)
+            return true;
+        const isAutoHide = !!options?.isAutoHide;
+        this.five.off('wantsGesture', this.handleWantsGesture);
+        this.five.off('wantsTapGesture', this.handleWantsTapGesture);
+        this.visible = false;
+        this.showRejection?.(FloorplanErrorType.BreakOffByHide);
+        changeModelCanvasOpacity(this.five, 1, 0);
+        this.render();
+        this.hooks.emit('hide', { auto: isAutoHide, userAction: options?.userAction ?? true });
+        return true;
+    };
+    /** 更改户型图楼层 */
+    changeFloor(floorIndex) {
+        this.five.model.show(floorIndex);
+        this.floorIndex = floorIndex;
+        this.render();
+    }
+    changeConfigs(params) {
+        Object.assign(this.configs, params);
+        if (!this.container)
+            return;
+        this.render();
+    }
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    onModelShownFloorChange = (shownFloor) => {
+        if (shownFloor === null)
+            return;
+        this.floorIndex = shownFloor;
+        this.render();
+    };
+    handleModelLoaded = () => {
+        if (this.wrapper)
+            return;
+        if (!this.selector)
+            return;
+        const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
+        if (!wrapper)
+            throw new Error('不正确的父容器选择器');
+        this.wrapper = wrapper;
+        wrapper.append(this.container);
+    };
+    handleClick = () => {
+        if (!this.visible)
+            return;
+        const prevented = this.hooks.emit('click');
+        if (prevented)
+            return false;
+    };
+    handleWantsTapGesture = () => this.handleClick();
+    /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
+    handleWantsChangeMode = (mode) => {
+        if (mode !== 'Panorama') {
+            this.lastPanoramaLongitude = this.five.getCurrentState().longitude;
+        }
+        if (mode !== 'Floorplan')
+            this.hide();
+    };
+    /** 监听模型态变化，只有在模型态才进行手势动作监听 */
+    handleModeChange = (mode) => {
+        if (mode === 'Floorplan') {
+            this.five.on('panGesture', this.handlePanGesture);
+        }
+        else {
+            this.hide();
+            this.five.off('panGesture', this.handlePanGesture);
+        }
+    };
+    /** panoIndex 改变时，更新 floorIndex */
+    handlePanoArrived = (index) => {
+        if (!this.five?.work)
+            return;
+        this.panoIndex = index;
+        this.floorIndex = this.five.work.observers[index].floorIndex;
+    };
+    /** 当户型图正在展示中的时候禁用惯性 */
+    handleWantsInteriaPan = () => {
+        if (this.visible)
+            return false;
+    };
+    /** 在户型图展示时阻止多指操作, 阻止鼠标放大 */
+    handleWantsGesture = (type, pointers) => {
+        if (!this.visible)
+            return;
+        if (pointers.length > 1)
+            return false;
+        if (type === 'mouseWheel')
+            return false;
+    };
+    /** 监听三维模型滑动
+     * 1. 在三维模型转动结束时，如果达到设置的阈值，会自动切换到户型图
+     * 2. 如何户型图已经展示，滑动时关闭户型图
+     */
+    handlePanGesture = async ({ latitude, longitude }, isFinal) => {
+        if (this.configs.autoShowEnable === false)
+            return;
+        // 如果操作结束后，户型图还在展示中，初始化模型状态
+        if (isFinal && this.visible)
+            return this.five.setState(this.showState, true);
+        // 满足消失的条件：
+        // 水平旋转角大于正负 5 度 || 俯仰角度大于 5 度
+        const latitudeHide = Math.abs(latitude - Math.PI / 2) > (5 * Math.PI) / 180;
+        const longitudeHide = longitude > 5 * (Math.PI / 180) && longitude < 355 * (Math.PI / 180);
+        const canHide = latitudeHide || longitudeHide;
+        if (this.visible && canHide)
+            return this.hide({ isAutoHide: true });
+        if (this.five.camera.fov / FIVE_CAMERA_DEFAULT_FOV < 0.8)
+            return;
+        // 户型图展示条件：
+        // 水平旋转角正负 30 度 && 俯仰角度小于 10 度
+        const latitudeVisible = Math.abs(latitude - Math.PI / 2) < (10 * Math.PI) / 180;
+        const longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
+        if (isFinal && !this.visible && latitudeVisible && longitudeVisible) {
+            // 当手指离开时需要等惯性结束之后在进行判断
+            const handleInteriaPan = async (any, isFinal) => {
+                if (!isFinal)
+                    return;
+                this.five.off('interiaPan', handleInteriaPan);
+                await this.show({ isAutoShow: true });
+            };
+            this.five.on('interiaPan', handleInteriaPan);
+            return;
+        }
+    };
+    render(duration) {
+        if (!this.container || !this.floorplanData)
+            return;
+        if (this.size.width === 0)
+            return;
+        const { hoverEnable, cameraImageUrl, getLabelElement, roomLabelsEnable, compassEnable, ruleLabelsEnable } = this.configs;
+        const props = {
+            five: this.five,
+            pxmm: this.pxmm,
+            cameraImageUrl,
+            visible: this.visible,
+            duration: duration ?? 0,
+            panoIndex: this.panoIndex,
+            floorIndex: this.floorIndex,
+            floorplanData: this.floorplanData,
+            hoverEnable: hoverEnable ?? false,
+            compassEnable: compassEnable ?? true,
+            ruleLabelsEnable: ruleLabelsEnable ?? true,
+            roomLabelsEnable: roomLabelsEnable ?? true,
+            lastPanoramaLongitude: this.lastPanoramaLongitude,
+            getLabelElement,
+            onRoomHeightClick: this.handleClick,
+        };
+        if (!this.app) {
+            this.app = new Main({
+                target: this.container,
+                intro: true,
+                props,
+            });
+        }
+        else {
+            this.app.$set(props);
+        }
+    }
+}

package/{plugins → libs}/floorplan/ModelFloorplanPlugin/index.d.ts

@@ -1,4 +1,4 @@
-import { FivePlugin } from '@realsee/five';
+import type { FivePlugin } from '@realsee/five';
 import FloorplanPluginController, { ModelFloorplanParameterType } from './Controller';
 export declare const ModelFloorplanPlugin: FivePlugin<ModelFloorplanParameterType, ModelFloorplanPluginReturnType>;
 export default ModelFloorplanPlugin;

package/libs/floorplan/ModelFloorplanPlugin/index.js

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

package/libs/floorplan/ModelFloorplanPlugin/typings/events.type.js

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

package/{plugins → libs}/floorplan/ModelFloorplanPlugin/utils/constant.d.ts

@@ -1,5 +1,5 @@
 export declare const enum FloorplanErrorType {
-    UnknowError = "UnknowError",
+    UnknownError = "UnknowError",
     DataNotLoaded = "DataNotLoaded",
     BreakOffByHide = "BreakOffByHide",
     ModelNotLoaded = "ModelNotLoaded",

package/libs/floorplan/ModelFloorplanPlugin/utils/constant.js

@@ -0,0 +1,16 @@
+export var FloorplanErrorType;
+(function (FloorplanErrorType) {
+    FloorplanErrorType["UnknownError"] = "UnknowError";
+    FloorplanErrorType["DataNotLoaded"] = "DataNotLoaded";
+    FloorplanErrorType["BreakOffByHide"] = "BreakOffByHide";
+    FloorplanErrorType["ModelNotLoaded"] = "ModelNotLoaded";
+    FloorplanErrorType["ChangeModeError"] = "ChangeModeError";
+    FloorplanErrorType["UpdateCameraError"] = "UpdateCameraError";
+    FloorplanErrorType["DifferentShowParams"] = "DifferentShowParams";
+})(FloorplanErrorType || (FloorplanErrorType = {}));
+/** 户型图展示 & 模型消失的默认时间 */
+export const SHOW_ANIME_DURATION = 500;
+/** Five camera 默认 fov */
+export const FIVE_CAMERA_DEFAULT_FOV = 80;
+/** 展示户型图时，默认模型的透明度 */
+export const DEFAULT_SHOW_MODEL_OPACITY = 0.01;