@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/Main.js

@@ -0,0 +1,312 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	append,
+	append_styles,
+	assign,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	get_spread_update,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	set_style,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { onMount } from 'svelte';
+import Camera from './Camera';
+import CurrentFloor from './CurrentFloor/CurrentFloor';
+
+function add_css(target) {
+	append_styles(target, "svelte-7d8ub2", ".plugin-floorplan-radar.svelte-7d8ub2{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-7d8ub2{position:relative}");
+}
+
+// (41:2) {#if clientWidth !== 0}
+function create_if_block(ctx) {
+	let div;
+	let currentfloor;
+	let t;
+	let camera;
+	let style_width = `${/*contentWidth*/ ctx[7]}px`;
+	let style_height = `${/*contentHeight*/ ctx[10]}px`;
+	let current;
+
+	const currentfloor_spread_levels = [
+		{
+			five: /*five*/ ctx[0],
+			pxmm: /*pxmm*/ ctx[8],
+			floorIndex: /*floorIndex*/ ctx[9],
+			floorplanData: /*floorplanData*/ ctx[2],
+			hoverEnable: /*hoverEnable*/ ctx[1],
+			extraObjects: /*extraObjects*/ ctx[4]
+		}
+	];
+
+	let currentfloor_props = {};
+
+	for (let i = 0; i < currentfloor_spread_levels.length; i += 1) {
+		currentfloor_props = assign(currentfloor_props, currentfloor_spread_levels[i]);
+	}
+
+	currentfloor = new CurrentFloor({ props: currentfloor_props });
+
+	const camera_spread_levels = [
+		{
+			pxmm: /*pxmm*/ ctx[8],
+			five: /*five*/ ctx[0],
+			floorplanData: /*floorplanData*/ ctx[2],
+			cameraImageUrl: /*cameraImageUrl*/ ctx[3]
+		}
+	];
+
+	let camera_props = {};
+
+	for (let i = 0; i < camera_spread_levels.length; i += 1) {
+		camera_props = assign(camera_props, camera_spread_levels[i]);
+	}
+
+	camera = new Camera({ props: camera_props });
+
+	return {
+		c() {
+			div = element("div");
+			create_component(currentfloor.$$.fragment);
+			t = space();
+			create_component(camera.$$.fragment);
+			attr(div, "class", "plugin-floorplan-radar-container svelte-7d8ub2");
+			set_style(div, "width", style_width, false);
+			set_style(div, "height", style_height, false);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(currentfloor, div, null);
+			append(div, t);
+			mount_component(camera, div, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects*/ 791)
+			? get_spread_update(currentfloor_spread_levels, [
+					{
+						five: /*five*/ ctx[0],
+						pxmm: /*pxmm*/ ctx[8],
+						floorIndex: /*floorIndex*/ ctx[9],
+						floorplanData: /*floorplanData*/ ctx[2],
+						hoverEnable: /*hoverEnable*/ ctx[1],
+						extraObjects: /*extraObjects*/ ctx[4]
+					}
+				])
+			: {};
+
+			currentfloor.$set(currentfloor_changes);
+
+			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 269)
+			? get_spread_update(camera_spread_levels, [
+					{
+						pxmm: /*pxmm*/ ctx[8],
+						five: /*five*/ ctx[0],
+						floorplanData: /*floorplanData*/ ctx[2],
+						cameraImageUrl: /*cameraImageUrl*/ ctx[3]
+					}
+				])
+			: {};
+
+			camera.$set(camera_changes);
+
+			if (dirty & /*contentWidth*/ 128 && style_width !== (style_width = `${/*contentWidth*/ ctx[7]}px`)) {
+				set_style(div, "width", style_width, false);
+			}
+
+			if (dirty & /*contentHeight*/ 1024 && style_height !== (style_height = `${/*contentHeight*/ ctx[10]}px`)) {
+				set_style(div, "height", style_height, false);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(currentfloor.$$.fragment, local);
+			transition_in(camera.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(currentfloor.$$.fragment, local);
+			transition_out(camera.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(currentfloor);
+			destroy_component(camera);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let div_resize_listener;
+	let current;
+	let if_block = /*clientWidth*/ ctx[5] !== 0 && create_if_block(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "plugin-floorplan-radar svelte-7d8ub2");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[11].call(div));
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[11].bind(div));
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (/*clientWidth*/ ctx[5] !== 0) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*clientWidth*/ 32) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
+			div_resize_listener();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { hoverEnable } = $$props;
+	let { floorplanData } = $$props;
+	let { cameraImageUrl } = $$props;
+	let { extraObjects = [] } = $$props;
+	let pxmm = 0;
+	let floorIndex = 0;
+	let clientWidth = 0;
+	let clientHeight = 0;
+	let contentWidth = 0;
+	let contentHeight = 0;
+
+	function handlePanoArrived(panoIndex) {
+		$$invalidate(9, floorIndex = five.work.observers[panoIndex].floorIndex);
+	}
+
+	onMount(() => {
+		five.on('panoArrived', handlePanoArrived);
+
+		return () => {
+			five.off('panoArrived', handlePanoArrived);
+		};
+	});
+
+	function div_elementresize_handler() {
+		clientWidth = this.clientWidth;
+		clientHeight = this.clientHeight;
+		$$invalidate(5, clientWidth);
+		$$invalidate(6, clientHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(0, five = $$props.five);
+		if ('hoverEnable' in $$props) $$invalidate(1, hoverEnable = $$props.hoverEnable);
+		if ('floorplanData' in $$props) $$invalidate(2, floorplanData = $$props.floorplanData);
+		if ('cameraImageUrl' in $$props) $$invalidate(3, cameraImageUrl = $$props.cameraImageUrl);
+		if ('extraObjects' in $$props) $$invalidate(4, extraObjects = $$props.extraObjects);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 228) {
+			$: {
+				const size = Math.min(clientWidth, clientHeight);
+				const { max, min } = floorplanData.bounding;
+				const boundingWidth = max.x - min.x;
+				const boundingHeight = max.y - min.y;
+
+				const contentSize = (function getSize() {
+					if (boundingWidth > boundingHeight) return [size, size / boundingWidth * boundingHeight];
+					return [size / boundingHeight * boundingWidth, size];
+				})();
+
+				$$invalidate(7, contentWidth = contentSize[0]);
+				$$invalidate(10, contentHeight = contentSize[1]);
+				$$invalidate(8, pxmm = contentWidth / boundingWidth);
+			}
+		}
+	};
+
+	return [
+		five,
+		hoverEnable,
+		floorplanData,
+		cameraImageUrl,
+		extraObjects,
+		clientWidth,
+		clientHeight,
+		contentWidth,
+		pxmm,
+		floorIndex,
+		contentHeight,
+		div_elementresize_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				five: 0,
+				hoverEnable: 1,
+				floorplanData: 2,
+				cameraImageUrl: 3,
+				extraObjects: 4
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

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

@@ -0,0 +1,28 @@
+import type { Five } from '@realsee/five';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanExtraObject3D } from '../typings/floorplanData';
+export interface PanoFloorplanRadarPluginControllerParameter {
+    wrapper?: string | Element;
+    configs?: {
+        hoverEnable?: boolean;
+        cameraImageUrl?: string;
+    };
+}
+export default class PanoFloorplanRadarPluginController {
+    private app?;
+    private five;
+    private wrapperSelector;
+    private data?;
+    private wrapper;
+    private extraObjects?;
+    private originExtraObjects?;
+    private configs;
+    constructor(five: Five, params?: PanoFloorplanRadarPluginControllerParameter);
+    dispose: () => void;
+    load: (data: FloorplanServerData) => Promise<void>;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): void;
+    changeConfigs(configs: PanoFloorplanRadarPluginController['configs']): void;
+    setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]): void;
+    private render;
+}

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -0,0 +1,88 @@
+import Main from './Components/Main';
+import formatData, { formatExtraObjects } from '../utils/formatData';
+export default class PanoFloorplanRadarPluginController {
+    app;
+    five;
+    wrapperSelector = '';
+    data;
+    wrapper = null;
+    extraObjects;
+    originExtraObjects;
+    configs = {};
+    constructor(five, params) {
+        this.five = five;
+        params?.configs && Object.assign(this.configs, params.configs);
+        if (typeof params?.wrapper === 'string')
+            this.wrapperSelector = params.wrapper;
+        else if (params?.wrapper instanceof Element)
+            this.wrapper = params.wrapper;
+        five.once('dispose', this.dispose);
+    }
+    dispose = () => {
+        this.app?.$destroy();
+    };
+    load = async (data) => {
+        const copyData = JSON.parse(JSON.stringify(data));
+        const floorplanData = await formatData(copyData);
+        this.data = floorplanData;
+        // 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()
+        this.render();
+    };
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        this.render();
+    }
+    changeConfigs(configs) {
+        Object.assign(this.configs, configs);
+        this.render();
+    }
+    setExtraObjectsWith3DPositions(data) {
+        this.originExtraObjects = data;
+        if (!this.data)
+            return;
+        this.extraObjects = formatExtraObjects(data, this.five, this.data);
+        this.render();
+    }
+    render() {
+        // 处理 wrapper
+        if (!this.wrapper) {
+            const _wrapper = document.querySelector(this.wrapperSelector);
+            this.wrapper = _wrapper;
+        }
+        if (!this.data || !this.wrapper)
+            return;
+        if (!this.extraObjects && this.originExtraObjects) {
+            this.extraObjects = formatExtraObjects(this.originExtraObjects, this.five, this.data);
+        }
+        const props = {
+            five: this.five,
+            floorplanData: this.data,
+            extraObjects: this.extraObjects,
+            cameraImageUrl: this.configs.cameraImageUrl,
+            hoverEnable: this.configs.hoverEnable ?? false,
+        };
+        if (!this.app) {
+            this.app = new Main({
+                target: this.wrapper,
+                props,
+            });
+            return;
+        }
+        this.app.$set(props);
+    }
+}

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

@@ -0,0 +1,8 @@
+import type { FivePlugin } from '@realsee/five';
+import PanoFloorplanRadarPluginController from './Controller';
+export declare const PanoFloorplanRadarPlugin: FivePlugin<PanoFloorplanRadarPluginParameterType, PanoFloorplanRadarPluginReturnType>;
+export default PanoFloorplanRadarPlugin;
+export type { PanoFloorplanRadarPluginController };
+export type { PanoFloorplanRadarPluginControllerParameter } from './Controller';
+export declare type PanoFloorplanRadarPluginReturnType = PanoFloorplanRadarPluginController;
+export declare type PanoFloorplanRadarPluginParameterType = ConstructorParameters<typeof PanoFloorplanRadarPluginController>[1];

package/libs/floorplan/PanoFloorplanRadarPlugin/index.js

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

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

@@ -0,0 +1,62 @@
+import type { Five } from '@realsee/five';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanRoomItem } from '../typings/floorplanData';
+import { FLOOR_PLAN_ATTACHED_TO } from '../constant';
+export interface TopviewFloorplanPluginParameterType {
+    northDesc?: string;
+    selector?: string | Element;
+    scale?: number;
+    modelOpacity?: number;
+    cameraImageUrl?: string;
+    hoverEnable?: boolean;
+    compassEnable?: boolean;
+    autoShowEnable?: boolean;
+    ruleLabelsEnable?: boolean;
+    roomLabelsEnable?: boolean;
+    preventRoomClick?: boolean;
+    attachedTo?: FLOOR_PLAN_ATTACHED_TO;
+    getLabelElement?: (room: FloorplanRoomItem) => Element | null;
+}
+export declare type TopviewFloorplanPluginReturnType = TopviewFloorplanPluginController;
+export declare class TopviewFloorplanPluginController {
+    size: {
+        width: number;
+        height: number;
+    };
+    visible: boolean;
+    private pxmm;
+    private app?;
+    private five;
+    private panoIndex;
+    private floorIndex;
+    private configs;
+    private lastPanoramaLongitude;
+    private selector?;
+    private floorplanData?;
+    private wrapper?;
+    private container;
+    constructor(five: Five, params: TopviewFloorplanPluginParameterType);
+    /** 加载户型图数据 */
+    load(data: FloorplanServerData): Promise<void>;
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper: Element): this;
+    dispose: () => void;
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    private onModelShownFloorChange;
+    /** panoIndex 改变时，更新 floorIndex */
+    private handlePanoArrived;
+    /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
+    private handleWantsMoveToPano;
+    /** 在户型图展示时阻止 Five 滑动行为 */
+    private handleWantsPanGesture;
+    private handleModelLoaded;
+    /** 非 Topview 态隐藏户型图 */
+    private handleModeChange;
+    /** 动画结束后是 Topview 态就展示户型图 */
+    private handleInitAnimationEnded;
+    private show;
+    private hide;
+    /** 更新户型图大小 */
+    private updateSize;
+    private render;
+}

package/libs/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -0,0 +1,191 @@
+import { pluginStyle } from './style';
+import formatData from '../utils/formatData';
+import { omit } from '../../shared-utils/filter';
+import getPxmm from '../../shared-utils/getPxmm';
+import Main from "../ModelFloorplanPlugin/Components/Main";
+import changeModelCanvasOpacity from '../../shared-utils/changeModelCanvasOpacity';
+export class TopviewFloorplanPluginController {
+    size = { width: 0, height: 0 };
+    visible = false;
+    pxmm = 0;
+    app;
+    five;
+    panoIndex = 0;
+    floorIndex = 0;
+    configs = {};
+    lastPanoramaLongitude = 0;
+    selector;
+    floorplanData;
+    wrapper;
+    container = document.createElement('div');
+    constructor(five, params) {
+        this.five = five;
+        this.selector = params.selector;
+        this.configs = omit(params, ['selector']);
+        // 设置 container 样式
+        this.container.classList.add('floorplan-plugin');
+        Object.assign(this.container.style, pluginStyle);
+        // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+        this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
+        this.five.once('dispose', this.dispose);
+        this.five.on('modeChange', this.handleModeChange);
+        this.five.on('panoArrived', this.handlePanoArrived);
+        this.five.on('initAnimationEnded', this.handleInitAnimationEnded);
+        this.five.on('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;
+    }
+    dispose = () => {
+        this.hide();
+        this.container?.remove();
+        this.app?.$destroy();
+        this.five.off('modeChange', this.handleModeChange);
+        this.five.off('panoArrived', this.handlePanoArrived);
+        this.five.off('modelLoaded', this.handleModelLoaded);
+        this.five.off('wantsMoveToPano', this.handleWantsMoveToPano);
+        this.five.off('wantsPanGesture', this.handleWantsPanGesture);
+        this.five.off('initAnimationEnded', this.handleInitAnimationEnded);
+        this.five.off('modelShownFloorChange', this.onModelShownFloorChange);
+    };
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    onModelShownFloorChange = (shownFloor) => {
+        if (shownFloor === null)
+            return;
+        this.floorIndex = shownFloor;
+        this.updateSize();
+        this.render();
+    };
+    /** panoIndex 改变时，更新 floorIndex */
+    handlePanoArrived = (index) => {
+        if (!this.five?.work)
+            return;
+        this.panoIndex = index;
+        this.floorIndex = this.five.work.observers[index].floorIndex;
+    };
+    /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
+    handleWantsMoveToPano = () => {
+        if (!this.visible)
+            return;
+        if (this.configs.preventRoomClick)
+            return false;
+        return;
+    };
+    /** 在户型图展示时阻止 Five 滑动行为 */
+    handleWantsPanGesture = () => {
+        if (!this.visible)
+            return;
+        return false;
+    };
+    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);
+    };
+    /** 非 Topview 态隐藏户型图 */
+    handleModeChange = (mode) => {
+        if (mode !== 'Topview')
+            return this.hide();
+    };
+    /** 动画结束后是 Topview 态就展示户型图 */
+    handleInitAnimationEnded = () => {
+        const { mode } = this.five.getCurrentState();
+        if (mode === 'Topview')
+            this.show();
+    };
+    show() {
+        this.visible = true;
+        this.five.model.show(this.floorIndex);
+        this.updateSize();
+        const renderDuration = 500;
+        const modelOpacity = this.configs.modelOpacity;
+        if (typeof modelOpacity === 'number') {
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+        }
+        this.render(renderDuration);
+        this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
+        this.five.on('wantsPanGesture', this.handleWantsPanGesture);
+    }
+    hide() {
+        const modelOpacity = 1;
+        const renderDuration = 0;
+        this.visible = false;
+        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+        this.render();
+        this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
+        this.five.on('wantsPanGesture', this.handleWantsPanGesture);
+    }
+    /** 更新户型图大小 */
+    updateSize = () => {
+        if (!this.floorplanData)
+            return;
+        if (!this.container || !this.wrapper)
+            return;
+        if (this.five.getCurrentState().mode !== 'Topview')
+            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);
+        this.pxmm = pxmm;
+        this.size = { width: _width, height: _height };
+        this.container.style.width = _width + 'px';
+        this.container.style.height = _height + 'px';
+    };
+    render(duration) {
+        if (!this.container || !this.floorplanData)
+            return;
+        if (this.size.width === 0)
+            return;
+        const { northDesc, getLabelElement, cameraImageUrl, preventRoomClick, hoverEnable, compassEnable, roomLabelsEnable, ruleLabelsEnable, } = this.configs;
+        const handleClick = preventRoomClick ? () => false : undefined;
+        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: handleClick,
+        };
+        if (!this.app) {
+            this.app = new Main({
+                target: this.container,
+                intro: true,
+                props,
+            });
+        }
+        else {
+            this.app.$set(props);
+        }
+    }
+}