@realsee/dnalogel 2.0.0-alpha.9 → 2.0.0

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

@@ -1,9 +1,7 @@
+import type { Parameters } from './typing';
 import type { FivePlugin } from '@realsee/five';
-import FloorplanPluginController, { ModelFloorplanParameterType } from './Controller';
-export declare const ModelFloorplanPlugin: FivePlugin<ModelFloorplanParameterType, ModelFloorplanPluginReturnType>;
+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;
-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

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

package/libs/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/floorplan/ModelFloorplanPlugin/typing.js

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

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	append,
@@ -13,12 +13,12 @@ import {
 	set_style
 } from "svelte/internal";
 
-import { onMount, onDestroy } from 'svelte';
+import { onMount } from 'svelte';
 import { CAMERA_IMAGE } from '../../Assets/camera';
 import throttle from '../../../shared-utils/throttle';
 
 function add_css(target) {
-	append_styles(target, "svelte-o7uo2v", ".plugin-radar__camera-wrapper.svelte-o7uo2v{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-o7uo2v{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-o7uo2v{position:absolute;left:-15px;top:-15px;width:17px;height:17px;transform-origin:15px 15px;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
+	append_styles(target, "svelte-1ty3s4p", ".plugin-radar__camera-wrapper.svelte-1ty3s4p{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-1ty3s4p{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-1ty3s4p{position:absolute;left:-0.78125rem;top:-0.78125rem;width:0.88542rem;height:0.88542rem;transform-origin:0.78125rem 0.78125rem;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
 }
 
 function create_fragment(ctx) {
@@ -31,12 +31,12 @@ function create_fragment(ctx) {
 			div2 = element("div");
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "plugin-radar__camera-rotate svelte-o7uo2v");
+			attr(div0, "class", "plugin-radar__camera-rotate svelte-1ty3s4p");
 			set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
 			set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
-			attr(div1, "class", "plugin-radar__camera-position svelte-o7uo2v");
+			attr(div1, "class", "plugin-radar__camera-position svelte-1ty3s4p");
 			set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
-			attr(div2, "class", "plugin-radar__camera-wrapper svelte-o7uo2v");
+			attr(div2, "class", "plugin-radar__camera-wrapper svelte-1ty3s4p");
 		},
 		m(target, anchor) {
 			insert(target, div2, anchor);
@@ -64,58 +64,54 @@ function create_fragment(ctx) {
 	};
 }
 
+function getCameraRotateTransform(longitude) {
+	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+	return `rotate(${rotate}deg)`;
+}
+
 function instance($$self, $$props, $$invalidate) {
+	let positionTransform;
+	let rotateTransform;
 	let { five } = $$props;
 	let { pxmm } = $$props;
 	let { floorplanData } = $$props;
 	let { cameraImageUrl } = $$props;
+	let panoIndex = five.getCurrentState().panoIndex;
+	let longitude = five.getCurrentState().longitude;
 
 	/** 获取相机在当前 Five 状态下的位移 */
-	function getCameraPositionTransform(panoIndex) {
-		const observer = floorplanData.observers[panoIndex];
+	function getCameraPositionTransform(floorplanData, panoIndex) {
 		const bounding = floorplanData.bounding;
+		const floorplanObserver = floorplanData.observers[panoIndex];
+		if (!floorplanObserver) return '';
 		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
 		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
-		if (!observer) return '';
-		const left = Math.floor(observer.positionInImage.x * clientWidth);
-		const top = Math.floor(observer.positionInImage.y * clientHeight);
+		const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
+		const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
 		return `translate(${left}px, ${top}px)`;
 	}
 
-	/** 获取相机在当前 Five 状态下的旋转 */
-	function getCameraRotationTransform() {
-		const { longitude } = five.getCurrentState();
-
-		// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
-		const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
-
-		return `rotate(${rotate}deg)`;
+	function onFivePanoWillArrive(_panoIndex) {
+		$$invalidate(6, panoIndex = _panoIndex);
 	}
 
-	const changePosition = panoIndex => {
-		$$invalidate(2, positionTransform = getCameraPositionTransform(panoIndex));
-	};
-
-	const changeRotate = throttle(
-		() => {
-			$$invalidate(1, rotateTransform = getCameraRotationTransform());
+	const onFiveCameraDirectionUpdate = throttle(
+		pose => {
+			$$invalidate(7, longitude = pose.longitude);
 		},
 		1000 / 60
 	);
 
-	// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
-	let rotateTransform = getCameraRotationTransform();
-
-	let positionTransform = getCameraPositionTransform(five.getCurrentState().panoIndex);
-
 	onMount(() => {
-		five.on('panoWillArrive', changePosition);
-		five.on('cameraDirectionUpdate', changeRotate);
-	});
+		five.on('panoWillArrive', onFivePanoWillArrive);
+		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 
-	onDestroy(() => {
-		five.off('panoWillArrive', changePosition);
-		five.off('cameraDirectionUpdate', changeRotate);
+		return function dispose() {
+			five.off('panoWillArrive', onFivePanoWillArrive);
+			five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+		};
 	});
 
 	$$self.$$set = $$props => {
@@ -125,7 +121,27 @@ function instance($$self, $$props, $$invalidate) {
 		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
 	};
 
-	return [cameraImageUrl, rotateTransform, positionTransform, five, pxmm, floorplanData];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData, panoIndex*/ 96) {
+			// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+			$: $$invalidate(2, positionTransform = getCameraPositionTransform(floorplanData, panoIndex));
+		}
+
+		if ($$self.$$.dirty & /*longitude*/ 128) {
+			$: $$invalidate(1, rotateTransform = getCameraRotateTransform(longitude));
+		}
+	};
+
+	return [
+		cameraImageUrl,
+		rotateTransform,
+		positionTransform,
+		five,
+		pxmm,
+		floorplanData,
+		panoIndex,
+		longitude
+	];
 }
 
 class Component extends SvelteComponent {

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	assign,
@@ -214,7 +214,9 @@ function instance($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*extraObjects, floorIndex*/ 132) {
-			$: $$invalidate(5, currentFloorExtraObjects = extraObjects?.filter(object => object.floorIndex === floorIndex));
+			$: $$invalidate(5, currentFloorExtraObjects = extraObjects === null || extraObjects === void 0
+			? void 0
+			: extraObjects.filter(object => object.floorIndex === floorIndex));
 		}
 	};
 

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/ExtraObjects.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	append,
@@ -17,7 +17,7 @@ import {
 } from "svelte/internal";
 
 function add_css(target) {
-	append_styles(target, "svelte-8n0d4v", ".plugin-pano-floorplan__extra-objects.svelte-8n0d4v{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-8n0d4v{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-8n0d4v{transform:translate(-50%, -50%)}");
+	append_styles(target, "svelte-1i87fz7", ".plugin-pano-floorplan__extra-objects.svelte-1i87fz7{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-1i87fz7{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-1i87fz7{transform:translate(-50%, -50%)}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -43,11 +43,11 @@ function create_each_block(key_1, ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			t = space();
-			attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-8n0d4v");
+			attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-1i87fz7");
 			set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
 			set_style(div0, "width", style_width, false);
 			set_style(div0, "height", style_height, false);
-			attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-8n0d4v");
+			attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-1i87fz7");
 			set_style(div1, "top", style_top, false);
 			set_style(div1, "left", style_left, false);
 			this.first = div1;
@@ -107,7 +107,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-8n0d4v");
+			attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-1i87fz7");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -12,6 +12,7 @@ import {
 	destroy_component,
 	detach,
 	element,
+	empty,
 	get_spread_update,
 	group_outros,
 	init,
@@ -29,27 +30,88 @@ 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}");
+	append_styles(target, "svelte-1mvqyqq", ".plugin-floorplan-radar.svelte-1mvqyqq{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-1mvqyqq{position:relative}");
 }
 
-// (41:2) {#if clientWidth !== 0}
+// (41:0) {#if visible}
 function create_if_block(ctx) {
+	let div;
+	let div_resize_listener;
+	let current;
+	let if_block = /*clientWidth*/ ctx[6] !== 0 && create_if_block_1(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "plugin-floorplan-radar svelte-1mvqyqq");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[12].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[12].bind(div));
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*clientWidth*/ ctx[6] !== 0) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*clientWidth*/ 64) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_1(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();
+		}
+	};
+}
+
+// (43:4) {#if clientWidth !== 0}
+function create_if_block_1(ctx) {
 	let div;
 	let currentfloor;
 	let t;
 	let camera;
-	let style_width = `${/*contentWidth*/ ctx[7]}px`;
-	let style_height = `${/*contentHeight*/ ctx[10]}px`;
+	let style_width = `${/*contentWidth*/ ctx[8]}px`;
+	let style_height = `${/*contentHeight*/ ctx[11]}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]
+			pxmm: /*pxmm*/ ctx[9],
+			floorIndex: /*floorIndex*/ ctx[10],
+			floorplanData: /*floorplanData*/ ctx[3],
+			hoverEnable: /*hoverEnable*/ ctx[2],
+			extraObjects: /*extraObjects*/ ctx[5]
 		}
 	];
 
@@ -63,10 +125,10 @@ function create_if_block(ctx) {
 
 	const camera_spread_levels = [
 		{
-			pxmm: /*pxmm*/ ctx[8],
+			pxmm: /*pxmm*/ ctx[9],
 			five: /*five*/ ctx[0],
-			floorplanData: /*floorplanData*/ ctx[2],
-			cameraImageUrl: /*cameraImageUrl*/ ctx[3]
+			floorplanData: /*floorplanData*/ ctx[3],
+			cameraImageUrl: /*cameraImageUrl*/ ctx[4]
 		}
 	];
 
@@ -84,7 +146,7 @@ function create_if_block(ctx) {
 			create_component(currentfloor.$$.fragment);
 			t = space();
 			create_component(camera.$$.fragment);
-			attr(div, "class", "plugin-floorplan-radar-container svelte-7d8ub2");
+			attr(div, "class", "plugin-floorplan-radar-container svelte-1mvqyqq");
 			set_style(div, "width", style_width, false);
 			set_style(div, "height", style_height, false);
 		},
@@ -96,39 +158,39 @@ function create_if_block(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects*/ 791)
+			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects*/ 1581)
 			? 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]
+						pxmm: /*pxmm*/ ctx[9],
+						floorIndex: /*floorIndex*/ ctx[10],
+						floorplanData: /*floorplanData*/ ctx[3],
+						hoverEnable: /*hoverEnable*/ ctx[2],
+						extraObjects: /*extraObjects*/ ctx[5]
 					}
 				])
 			: {};
 
 			currentfloor.$set(currentfloor_changes);
 
-			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 269)
+			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 537)
 			? get_spread_update(camera_spread_levels, [
 					{
-						pxmm: /*pxmm*/ ctx[8],
+						pxmm: /*pxmm*/ ctx[9],
 						five: /*five*/ ctx[0],
-						floorplanData: /*floorplanData*/ ctx[2],
-						cameraImageUrl: /*cameraImageUrl*/ ctx[3]
+						floorplanData: /*floorplanData*/ ctx[3],
+						cameraImageUrl: /*cameraImageUrl*/ ctx[4]
 					}
 				])
 			: {};
 
 			camera.$set(camera_changes);
 
-			if (dirty & /*contentWidth*/ 128 && style_width !== (style_width = `${/*contentWidth*/ ctx[7]}px`)) {
+			if (dirty & /*contentWidth*/ 256 && style_width !== (style_width = `${/*contentWidth*/ ctx[8]}px`)) {
 				set_style(div, "width", style_width, false);
 			}
 
-			if (dirty & /*contentHeight*/ 1024 && style_height !== (style_height = `${/*contentHeight*/ ctx[10]}px`)) {
+			if (dirty & /*contentHeight*/ 2048 && style_height !== (style_height = `${/*contentHeight*/ ctx[11]}px`)) {
 				set_style(div, "height", style_height, false);
 			}
 		},
@@ -152,37 +214,33 @@ function create_if_block(ctx) {
 }
 
 function create_fragment(ctx) {
-	let div;
-	let div_resize_listener;
+	let if_block_anchor;
 	let current;
-	let if_block = /*clientWidth*/ ctx[5] !== 0 && create_if_block(ctx);
+	let if_block = /*visible*/ ctx[1] && 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));
+			if_block_anchor = empty();
 		},
 		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));
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*clientWidth*/ ctx[5] !== 0) {
+			if (/*visible*/ ctx[1]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*clientWidth*/ 32) {
+					if (dirty & /*visible*/ 2) {
 						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);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
 			} else if (if_block) {
 				group_outros();
@@ -204,15 +262,15 @@ function create_fragment(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) detach(div);
-			if (if_block) if_block.d();
-			div_resize_listener();
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
 		}
 	};
 }
 
 function instance($$self, $$props, $$invalidate) {
 	let { five } = $$props;
+	let { visible } = $$props;
 	let { hoverEnable } = $$props;
 	let { floorplanData } = $$props;
 	let { cameraImageUrl } = $$props;
@@ -225,7 +283,7 @@ function instance($$self, $$props, $$invalidate) {
 	let contentHeight = 0;
 
 	function handlePanoArrived(panoIndex) {
-		$$invalidate(9, floorIndex = five.work.observers[panoIndex].floorIndex);
+		$$invalidate(10, floorIndex = five.work.observers[panoIndex].floorIndex);
 	}
 
 	onMount(() => {
@@ -239,20 +297,21 @@ function instance($$self, $$props, $$invalidate) {
 	function div_elementresize_handler() {
 		clientWidth = this.clientWidth;
 		clientHeight = this.clientHeight;
-		$$invalidate(5, clientWidth);
-		$$invalidate(6, clientHeight);
+		$$invalidate(6, clientWidth);
+		$$invalidate(7, 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);
+		if ('visible' in $$props) $$invalidate(1, visible = $$props.visible);
+		if ('hoverEnable' in $$props) $$invalidate(2, hoverEnable = $$props.hoverEnable);
+		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+		if ('cameraImageUrl' in $$props) $$invalidate(4, cameraImageUrl = $$props.cameraImageUrl);
+		if ('extraObjects' in $$props) $$invalidate(5, extraObjects = $$props.extraObjects);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 228) {
+		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 456) {
 			$: {
 				const size = Math.min(clientWidth, clientHeight);
 				const { max, min } = floorplanData.bounding;
@@ -264,15 +323,16 @@ function instance($$self, $$props, $$invalidate) {
 					return [size / boundingHeight * boundingWidth, size];
 				})();
 
-				$$invalidate(7, contentWidth = contentSize[0]);
-				$$invalidate(10, contentHeight = contentSize[1]);
-				$$invalidate(8, pxmm = contentWidth / boundingWidth);
+				$$invalidate(8, contentWidth = contentSize[0]);
+				$$invalidate(11, contentHeight = contentSize[1]);
+				$$invalidate(9, pxmm = contentWidth / boundingWidth);
 			}
 		}
 	};
 
 	return [
 		five,
+		visible,
 		hoverEnable,
 		floorplanData,
 		cameraImageUrl,
@@ -299,10 +359,11 @@ class Component extends SvelteComponent {
 			safe_not_equal,
 			{
 				five: 0,
-				hoverEnable: 1,
-				floorplanData: 2,
-				cameraImageUrl: 3,
-				extraObjects: 4
+				visible: 1,
+				hoverEnable: 2,
+				floorplanData: 3,
+				cameraImageUrl: 4,
+				extraObjects: 5
 			},
 			add_css
 		);