@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

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

@@ -0,0 +1,219 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	assign,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	empty,
+	get_spread_update,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	outro_and_destroy_block,
+	safe_not_equal,
+	transition_in,
+	transition_out,
+	update_keyed_each
+} from "svelte/internal";
+
+import RuleItem from './RuleItem';
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[7] = list[i][0];
+	child_ctx[8] = list[i][1];
+	return child_ctx;
+}
+
+// (12:2) {#each ruleLabelArray as [type, data] (type)}
+function create_each_block(key_1, ctx) {
+	let first;
+	let ruleitem;
+	let current;
+
+	const ruleitem_spread_levels = [
+		{
+			type: /*type*/ ctx[7],
+			data: /*data*/ ctx[8],
+			pxmm: /*pxmm*/ ctx[0],
+			bounding: /*bounding*/ ctx[2]
+		}
+	];
+
+	let ruleitem_props = {};
+
+	for (let i = 0; i < ruleitem_spread_levels.length; i += 1) {
+		ruleitem_props = assign(ruleitem_props, ruleitem_spread_levels[i]);
+	}
+
+	ruleitem = new RuleItem({ props: ruleitem_props });
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = empty();
+			create_component(ruleitem.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			insert(target, first, anchor);
+			mount_component(ruleitem, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			const ruleitem_changes = (dirty & /*ruleLabelArray, pxmm, bounding*/ 7)
+			? get_spread_update(ruleitem_spread_levels, [
+					{
+						type: /*type*/ ctx[7],
+						data: /*data*/ ctx[8],
+						pxmm: /*pxmm*/ ctx[0],
+						bounding: /*bounding*/ ctx[2]
+					}
+				])
+			: {};
+
+			ruleitem.$set(ruleitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(ruleitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(ruleitem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(first);
+			destroy_component(ruleitem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let current;
+	let each_value = /*ruleLabelArray*/ ctx[1];
+	const get_key = ctx => /*type*/ ctx[7];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "floorplan-plugin__rulelabels");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*ruleLabelArray, pxmm, bounding*/ 7) {
+				each_value = /*ruleLabelArray*/ ctx[1];
+				group_outros();
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let bounding;
+	let ruleLabelData;
+	let ruleLabelDataKeys;
+	let ruleLabelArray;
+	let { pxmm } = $$props;
+	let { floorIndex } = $$props;
+	let { floorplanData } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
+		if ('floorIndex' in $$props) $$invalidate(3, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData*/ 16) {
+			$: $$invalidate(2, bounding = floorplanData.bounding);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 24) {
+			$: $$invalidate(5, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+		}
+
+		if ($$self.$$.dirty & /*ruleLabelData*/ 32) {
+			$: $$invalidate(6, ruleLabelDataKeys = Object.keys(ruleLabelData));
+		}
+
+		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 96) {
+			$: $$invalidate(1, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
+		}
+	};
+
+	return [
+		pxmm,
+		ruleLabelArray,
+		bounding,
+		floorIndex,
+		floorplanData,
+		ruleLabelData,
+		ruleLabelDataKeys
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { pxmm: 0, floorIndex: 3, floorplanData: 4 });
+	}
+}
+
+export default Component;

package/libs/floorplan/ModelFloorplanPlugin/Controller.d.ts

@@ -0,0 +1,105 @@
+import { Five, Subscribe } from '@realsee/five';
+import type { FloorplanEventHandlers } from './typings/events.type';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanRoomItem } from '../typings/floorplanData';
+import { FLOOR_PLAN_ATTACHED_TO } from '../constant';
+export interface ModelFloorplanParameterType {
+    northDesc?: string;
+    selector?: string | Element;
+    scale?: number;
+    modelOpacity?: number;
+    autoShowEnable?: boolean;
+    hoverEnable?: boolean;
+    compassEnable?: boolean;
+    ruleLabelsEnable?: boolean;
+    roomLabelsEnable?: boolean;
+    cameraImageUrl?: string;
+    attachedTo?: FLOOR_PLAN_ATTACHED_TO;
+    getLabelElement?: (room: FloorplanRoomItem) => Element | null;
+}
+export declare type ModelFloorplanPluginsConfigs = Omit<ModelFloorplanParameterType, 'selector' | 'scale'>;
+export interface ModelFloorplanPluginsShowOpts {
+    floorIndex?: number;
+    isAutoShow?: boolean;
+    modelOpacity?: number;
+    immediately?: boolean;
+    userAction?: boolean;
+}
+export declare const MODEL_FLOORPLAN_PLUGIN_NAME = "modelFloorplanPlugin";
+export default class ModelFloorplanPluginController {
+    name: string;
+    /** 用于绑定事件钩子 */
+    hooks: Subscribe<FloorplanEventHandlers>;
+    /** 展示状态 */
+    visible: boolean;
+    /** 户型图大小 */
+    size: {
+        width: number;
+        height: number;
+    };
+    private app?;
+    private pxmm;
+    private five;
+    private panoIndex;
+    private floorIndex;
+    private configs;
+    private lastPanoramaLongitude;
+    private selector?;
+    private floorplanData?;
+    private wrapper?;
+    private container;
+    private showState;
+    /** 记录上次 show 的参数，如果不一致，需要 reject 掉正在进行的 showPromise */
+    private ModelFloorplanPluginsShowOpts?;
+    private showPromise?;
+    private showRejection?;
+    constructor(five: Five, params: ModelFloorplanParameterType);
+    dispose: () => void;
+    /** 加载户型图数据 */
+    load(data: FloorplanServerData): Promise<void>;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): this;
+    /** 更新户型图大小 */
+    updateSize: () => void;
+    /** 展示户型图
+     * 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: (opts?: ModelFloorplanPluginsShowOpts) => Promise<boolean>;
+    /** 隐藏户型图 */
+    hide: (options?: {
+        isAutoHide?: boolean;
+        userAction?: boolean;
+    }) => boolean;
+    /** 更改户型图楼层 */
+    changeFloor(floorIndex: number): void;
+    changeConfigs(params: ModelFloorplanPluginsConfigs): void;
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    private onModelShownFloorChange;
+    private handleModelLoaded;
+    private handleClick;
+    private handleWantsTapGesture;
+    /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
+    private handleWantsChangeMode;
+    /** 监听模型态变化，只有在模型态才进行手势动作监听 */
+    private handleModeChange;
+    /** panoIndex 改变时，更新 floorIndex */
+    private handlePanoArrived;
+    /** 当户型图正在展示中的时候禁用惯性 */
+    private handleWantsInteriaPan;
+    /** 在户型图展示时阻止多指操作, 阻止鼠标放大 */
+    private handleWantsGesture;
+    /** 监听三维模型滑动
+     * 1. 在三维模型转动结束时，如果达到设置的阈值，会自动切换到户型图
+     * 2. 如何户型图已经展示，滑动时关闭户型图
+     */
+    private handlePanGesture;
+    private render;
+}

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -0,0 +1,359 @@
+import Main from './Components/Main';
+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('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 options = this.configs.attachedTo ? { attachedTo: this.configs.attachedTo } : undefined;
+        const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
+        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.updateSize();
+        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 { northDesc, hoverEnable, cameraImageUrl, getLabelElement, roomLabelsEnable, compassEnable, ruleLabelsEnable } = this.configs;
+        const props = {
+            northDesc: northDesc ?? '北',
+            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/libs/floorplan/ModelFloorplanPlugin/index.d.ts

@@ -0,0 +1,9 @@
+import type { FivePlugin } from '@realsee/five';
+import FloorplanPluginController, { ModelFloorplanParameterType } from './Controller';
+export declare const ModelFloorplanPlugin: FivePlugin<ModelFloorplanParameterType, ModelFloorplanPluginReturnType>;
+export default ModelFloorplanPlugin;
+export declare type ModelFloorplanPluginReturnType = FloorplanPluginController;
+export type { ModelFloorplanViewEvent } from './typings/events.type';
+export type { FloorplanErrorType as ModelFloorplanErrorType } from './utils/constant';
+export type { ModelFloorplanPluginsConfigs, ModelFloorplanParameterType } from './Controller';
+export type { FloorplanEventHandlers as ModelFloorplanEventHandlers } from './typings/events.type';

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;