@realsee/dnalogel 2.0.0-alpha.9 → 2.0.0-beta.36

package/dist/floorplan/PanoFloorplanRadarPlugin/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var internal = require('svelte/internal');
 var svelte = require('svelte');
-var three = require('three');
+var five = require('@realsee/five');
 
 const CAMERA_IMAGE = 'data:image/png;base64,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';
 
@@ -30,7 +30,7 @@ function throttle(func, wait = 200) {
 /* src/floorplan/PanoFloorplanRadarPlugin/Components/Camera.svelte generated by Svelte v3.47.0 */
 
 function add_css$7(target) {
-	internal.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%}");
+	internal.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$8(ctx) {
@@ -43,12 +43,12 @@ function create_fragment$8(ctx) {
 			div2 = internal.element("div");
 			div1 = internal.element("div");
 			div0 = internal.element("div");
-			internal.attr(div0, "class", "plugin-radar__camera-rotate svelte-o7uo2v");
+			internal.attr(div0, "class", "plugin-radar__camera-rotate svelte-1ty3s4p");
 			internal.set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
 			internal.set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
-			internal.attr(div1, "class", "plugin-radar__camera-position svelte-o7uo2v");
+			internal.attr(div1, "class", "plugin-radar__camera-position svelte-1ty3s4p");
 			internal.set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
-			internal.attr(div2, "class", "plugin-radar__camera-wrapper svelte-o7uo2v");
+			internal.attr(div2, "class", "plugin-radar__camera-wrapper svelte-1ty3s4p");
 		},
 		m(target, anchor) {
 			internal.insert(target, div2, anchor);
@@ -76,58 +76,54 @@ function create_fragment$8(ctx) {
 	};
 }
 
+function getCameraRotateTransform(longitude) {
+	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+	return `rotate(${rotate}deg)`;
+}
+
 function instance$8($$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);
-
 	svelte.onMount(() => {
-		five.on('panoWillArrive', changePosition);
-		five.on('cameraDirectionUpdate', changeRotate);
-	});
+		five.on('panoWillArrive', onFivePanoWillArrive);
+		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 
-	svelte.onDestroy(() => {
-		five.off('panoWillArrive', changePosition);
-		five.off('cameraDirectionUpdate', changeRotate);
+		return function dispose() {
+			five.off('panoWillArrive', onFivePanoWillArrive);
+			five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+		};
 	});
 
 	$$self.$$set = $$props => {
@@ -137,7 +133,27 @@ function instance$8($$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 Camera extends internal.SvelteComponent {
@@ -164,7 +180,7 @@ class Camera extends internal.SvelteComponent {
 /* src/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/ExtraObjects.svelte generated by Svelte v3.47.0 */
 
 function add_css$6(target) {
-	internal.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%)}");
+	internal.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$1(ctx, list, i) {
@@ -190,11 +206,11 @@ function create_each_block$1(key_1, ctx) {
 			div1 = internal.element("div");
 			div0 = internal.element("div");
 			t = internal.space();
-			internal.attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-8n0d4v");
+			internal.attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-1i87fz7");
 			internal.set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
 			internal.set_style(div0, "width", style_width, false);
 			internal.set_style(div0, "height", style_height, false);
-			internal.attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-8n0d4v");
+			internal.attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-1i87fz7");
 			internal.set_style(div1, "top", style_top, false);
 			internal.set_style(div1, "left", style_left, false);
 			this.first = div1;
@@ -254,7 +270,7 @@ function create_fragment$7(ctx) {
 				each_blocks[i].c();
 			}
 
-			internal.attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-8n0d4v");
+			internal.attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-1i87fz7");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -301,7 +317,7 @@ class ExtraObjects extends internal.SvelteComponent {
 /* src/floorplan/Components/Normalmage.svelte generated by Svelte v3.47.0 */
 
 function add_css$5(target) {
-	internal.append_styles(target, "svelte-1cuuebb", "img.svelte-1cuuebb{width:100%;height:100%}");
+	internal.append_styles(target, "svelte-1gfoniz", "img.svelte-1gfoniz{width:100%;height:100%}");
 }
 
 function create_fragment$6(ctx) {
@@ -313,7 +329,7 @@ function create_fragment$6(ctx) {
 			img = internal.element("img");
 			if (!internal.src_url_equal(img.src, img_src_value = /*url*/ ctx[0])) internal.attr(img, "src", img_src_value);
 			internal.attr(img, "alt", "floorplan iamge");
-			internal.attr(img, "class", "svelte-1cuuebb");
+			internal.attr(img, "class", "svelte-1gfoniz");
 		},
 		m(target, anchor) {
 			internal.insert(target, img, anchor);
@@ -351,7 +367,7 @@ class Normalmage extends internal.SvelteComponent {
 /* src/floorplan/Components/SvgImage.svelte generated by Svelte v3.47.0 */
 
 function add_css$4(target) {
-	internal.append_styles(target, "svelte-1qqy56u", ".floorplan-plugin__base-image.svelte-1qqy56u{width:100%;height:100%}");
+	internal.append_styles(target, "svelte-ub47ya", ".floorplan-plugin__base-image.svelte-ub47ya{width:100%;height:100%}");
 }
 
 function create_fragment$5(ctx) {
@@ -368,7 +384,7 @@ function create_fragment$5(ctx) {
 			html_tag_1 = new internal.HtmlTag();
 			html_tag.a = t;
 			html_tag_1.a = null;
-			internal.attr(div, "class", "floorplan-plugin__base-image svelte-1qqy56u");
+			internal.attr(div, "class", "floorplan-plugin__base-image svelte-ub47ya");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -398,8 +414,7 @@ function instance$5($$self, $$props, $$invalidate) {
       }
       svg [type='lineItemGroup'] g g g g {
         stroke: #ffffff;
-      }
-    </style>
+      }</style>
   `;
 
 	$$self.$$set = $$props => {
@@ -419,11 +434,11 @@ class SvgImage extends internal.SvelteComponent {
 /* src/floorplan/Components/BaseImage.svelte generated by Svelte v3.47.0 */
 
 function add_css$3(target) {
-	internal.append_styles(target, "svelte-126ja8e", ".floorplan-plugin__base-image.svelte-126ja8e{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}");
+	internal.append_styles(target, "svelte-ozpg4a", ".floorplan-plugin__base-image.svelte-ozpg4a{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}");
 }
 
-// (12:22) 
-function create_if_block_1(ctx) {
+// (13:22) 
+function create_if_block_1$1(ctx) {
 	let normalimage;
 	let current;
 	normalimage = new Normalmage({ props: { url: /*imageData*/ ctx[1].url } });
@@ -456,7 +471,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (10:2) {#if svgContent}
+// (11:2) {#if svgContent}
 function create_if_block$2(ctx) {
 	let svgimage;
 	let current;
@@ -498,7 +513,7 @@ function create_fragment$4(ctx) {
 	let current_block_type_index;
 	let if_block;
 	let current;
-	const if_block_creators = [create_if_block$2, create_if_block_1];
+	const if_block_creators = [create_if_block$2, create_if_block_1$1];
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
@@ -515,7 +530,7 @@ function create_fragment$4(ctx) {
 		c() {
 			div = internal.element("div");
 			if (if_block) if_block.c();
-			internal.attr(div, "class", "floorplan-plugin__base-image svelte-126ja8e");
+			internal.attr(div, "class", "floorplan-plugin__base-image svelte-ozpg4a");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -584,6 +599,7 @@ function create_fragment$4(ctx) {
 function instance$4($$self, $$props, $$invalidate) {
 	let imageData;
 	let svgContent;
+	var _a, _b;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
 
@@ -597,12 +613,16 @@ function instance$4($$self, $$props, $$invalidate) {
 			$$invalidate(1, imageData = floorplanData.outlines[floorIndex]);
 		}
 
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
-			$$invalidate(0, svgContent = floorplanData.outlines?.[floorIndex]?.svgContent);
+		if ($$self.$$.dirty & /*floorplanData, _a, floorIndex, _b*/ 60) {
+			$$invalidate(0, svgContent = $$invalidate(5, _b = $$invalidate(4, _a = floorplanData.outlines) === null || _a === void 0
+			? void 0
+			: _a[floorIndex]) === null || _b === void 0
+			? void 0
+			: _b.svgContent);
 		}
 	};
 
-	return [svgContent, imageData, floorIndex, floorplanData];
+	return [svgContent, imageData, floorIndex, floorplanData, _a, _b];
 }
 
 class BaseImage extends internal.SvelteComponent {
@@ -623,7 +643,7 @@ function pathD(points, options = {}) {
             d += 'M' + point;
             return d;
         }
-        if (needA?.[index]) {
+        if (needA === null || needA === void 0 ? void 0 : needA[index]) {
             d += 'A' + needA[index] + ',' + point;
             return d;
         }
@@ -633,9 +653,9 @@ function pathD(points, options = {}) {
     return d + (needZ ? 'Z' : '');
 }
 /** 把户型图上点点位转换到 SVG 上的点位 */
-function formatFloorplanPoint({ x, y }, pxmm, bounding) {
+function formatFloorplanPoint({ x, y }, bounding) {
     const { max, min } = bounding;
-    return { x: (x - min.x) * pxmm, y: (max.y - y) * pxmm };
+    return { x: x - min.x, y: max.y - y };
 }
 /** 模型坐标转户型图坐标 */
 function modelPosition2FloorplanPosition(position, floorplanData) {
@@ -666,71 +686,106 @@ function getFloorIndexFromModelPosition(position, five) {
 /* src/floorplan/Components/RoomHighlight/Room.svelte generated by Svelte v3.47.0 */
 
 function add_css$2(target) {
-	internal.append_styles(target, "svelte-11takew", "path.svelte-11takew{opacity:0}path.svelte-11takew:hover{opacity:0.1}");
+	internal.append_styles(target, "svelte-19uvvss", "path.svelte-19uvvss{opacity:0}path.svelte-19uvvss:hover{opacity:0.1}");
 }
 
 function create_fragment$3(ctx) {
 	let path;
+	let mounted;
+	let dispose;
 
 	return {
 		c() {
 			path = internal.svg_element("path");
-			internal.attr(path, "d", /*_pathD*/ ctx[0]);
+			internal.attr(path, "d", /*_pathD*/ ctx[2]);
 			internal.attr(path, "fill", `#fff`);
-			internal.attr(path, "class", "svelte-11takew");
+			internal.attr(path, "class", "svelte-19uvvss");
 		},
 		m(target, anchor) {
 			internal.insert(target, path, anchor);
+
+			if (!mounted) {
+				dispose = [
+					internal.listen(path, "mouseenter", /*onMouseEnter*/ ctx[0]),
+					internal.listen(path, "mouseleave", /*onMouseLeave*/ ctx[1])
+				];
+
+				mounted = true;
+			}
 		},
 		p: internal.noop,
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
 			if (detaching) internal.detach(path);
+			mounted = false;
+			internal.run_all(dispose);
 		}
 	};
 }
 
 function instance$3($$self, $$props, $$invalidate) {
-	let { pxmm } = $$props;
 	let { room } = $$props;
 	let { floorplanData } = $$props;
+	let { hoveredRoom } = $$props;
+
+	function onMouseEnter() {
+		hoveredRoom.set(room);
+	}
+
+	function onMouseLeave() {
+		hoveredRoom.set(undefined);
+	}
+
 	const { bounding } = floorplanData;
 
 	const _pathD = pathD(room.path, {
 		needZ: true,
-		format: vector => formatFloorplanPoint(vector, pxmm, bounding)
+		format: vector => formatFloorplanPoint(vector, bounding)
 	});
 
 	$$self.$$set = $$props => {
-		if ('pxmm' in $$props) $$invalidate(1, pxmm = $$props.pxmm);
-		if ('room' in $$props) $$invalidate(2, room = $$props.room);
-		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+		if ('room' in $$props) $$invalidate(3, room = $$props.room);
+		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
+		if ('hoveredRoom' in $$props) $$invalidate(5, hoveredRoom = $$props.hoveredRoom);
 	};
 
-	return [_pathD, pxmm, room, floorplanData];
+	return [onMouseEnter, onMouseLeave, _pathD, room, floorplanData, hoveredRoom];
 }
 
 class Room extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$3, create_fragment$3, internal.safe_not_equal, { pxmm: 1, room: 2, floorplanData: 3 }, add_css$2);
+
+		internal.init(
+			this,
+			options,
+			instance$3,
+			create_fragment$3,
+			internal.safe_not_equal,
+			{
+				room: 3,
+				floorplanData: 4,
+				hoveredRoom: 5
+			},
+			add_css$2
+		);
 	}
 }
 
 /* src/floorplan/Components/RoomHighlight/RoomHighlight.svelte generated by Svelte v3.47.0 */
 
 function add_css$1(target) {
-	internal.append_styles(target, "svelte-1aais5l", ".floorplan-plugin__room-highlight.svelte-1aais5l{position:absolute;width:100%;height:100%;pointer-events:all}svg.svelte-1aais5l{width:100%;height:100%;overflow:visible}");
+	internal.append_styles(target, "svelte-1kqo6e4", ".floorplan-plugin__room-highlight.svelte-1kqo6e4{position:absolute;width:100%;height:100%}svg.svelte-1kqo6e4{width:100%;height:100%;overflow:visible}");
 }
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[12] = list[i];
+	child_ctx[5] = list[i];
 	return child_ctx;
 }
 
-// (41:4) {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
+// (11:4) {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let room;
@@ -738,9 +793,9 @@ function create_each_block(key_1, ctx) {
 
 	const room_spread_levels = [
 		{
-			room: /*room*/ ctx[12],
-			floorplanData: /*floorplanData*/ ctx[2],
-			pxmm: /*pxmm*/ ctx[0]
+			room: /*room*/ ctx[5],
+			floorplanData: /*floorplanData*/ ctx[1],
+			hoveredRoom: /*hoveredRoom*/ ctx[2]
 		}
 	];
 
@@ -768,12 +823,12 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const room_changes = (dirty & /*floorplanData, floorIndex, pxmm*/ 7)
+			const room_changes = (dirty & /*floorplanData, floorIndex, hoveredRoom*/ 7)
 			? internal.get_spread_update(room_spread_levels, [
 					{
-						room: /*room*/ ctx[12],
-						floorplanData: /*floorplanData*/ ctx[2],
-						pxmm: /*pxmm*/ ctx[0]
+						room: /*room*/ ctx[5],
+						floorplanData: /*floorplanData*/ ctx[1],
+						hoveredRoom: /*hoveredRoom*/ ctx[2]
 					}
 				])
 			: {};
@@ -801,12 +856,9 @@ function create_fragment$2(ctx) {
 	let svg;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
-	let div_resize_listener;
 	let current;
-	let mounted;
-	let dispose;
-	let each_value = /*floorplanData*/ ctx[2].floorDatas[/*floorIndex*/ ctx[1]].rooms;
-	const get_key = ctx => /*room*/ ctx[12].id;
+	let each_value = /*floorplanData*/ ctx[1].floorDatas[/*floorIndex*/ ctx[0]].rooms;
+	const get_key = ctx => /*room*/ ctx[5].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -823,9 +875,11 @@ function create_fragment$2(ctx) {
 				each_blocks[i].c();
 			}
 
-			internal.attr(svg, "class", "svelte-1aais5l");
-			internal.attr(div, "class", "floorplan-plugin__room-highlight svelte-1aais5l");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			internal.attr(svg, "width", "100%");
+			internal.attr(svg, "height", "100%");
+			internal.attr(svg, "viewBox", `0 0 ${/*boundingWidth*/ ctx[3]} ${/*boundingHeight*/ ctx[4]}`);
+			internal.attr(svg, "class", "svelte-1kqo6e4");
+			internal.attr(div, "class", "floorplan-plugin__room-highlight svelte-1kqo6e4");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -835,18 +889,11 @@ function create_fragment$2(ctx) {
 				each_blocks[i].m(svg, null);
 			}
 
-			/*div_binding*/ ctx[9](div);
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
 			current = true;
-
-			if (!mounted) {
-				dispose = internal.listen(div, "click", /*handleClick*/ ctx[6]);
-				mounted = true;
-			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*floorplanData, floorIndex, pxmm*/ 7) {
-				each_value = /*floorplanData*/ ctx[2].floorDatas[/*floorIndex*/ ctx[1]].rooms;
+			if (dirty & /*floorplanData, floorIndex, hoveredRoom*/ 7) {
+				each_value = /*floorplanData*/ ctx[1].floorDatas[/*floorIndex*/ ctx[0]].rooms;
 				internal.group_outros();
 				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, svg, internal.outro_and_destroy_block, create_each_block, null, get_each_context);
 				internal.check_outros();
@@ -874,83 +921,24 @@ function create_fragment$2(ctx) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].d();
 			}
-
-			/*div_binding*/ ctx[9](null);
-			div_resize_listener();
-			mounted = false;
-			dispose();
 		}
 	};
 }
 
 function instance$2($$self, $$props, $$invalidate) {
-	let { five } = $$props;
-	let { pxmm } = $$props;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
-	let { onRoomHeightClick } = $$props;
-	let clientWidth;
-	let clientHeight;
-	let highlightContainerDom;
-	const { observers: floorplan_observers } = floorplanData;
-
-	const handleClick = function (e) {
-		if (onRoomHeightClick?.(e) === false) return;
-
-		// 因为 mouse.offsetX 的兼容性问题，手动计算 mouse offsetX offsetY
-		const boundingClientRect = highlightContainerDom.getBoundingClientRect();
-
-		const mouseClientVector = new three.Vector2(e.clientX, e.clientY);
-		const domTopLeftVector = new three.Vector2(boundingClientRect.left, boundingClientRect.top);
-		const mouseOffsetVector = mouseClientVector.clone().sub(domTopLeftVector);
-
-		// px 转换为 百分比
-		const mouseOffsetRelativeVector = new three.Vector2(mouseOffsetVector.x / clientWidth, mouseOffsetVector.y / clientHeight);
-
-		const closestPoint = floorplan_observers.filter(observer => observer.floorIndex === floorIndex).sort((ob1, ob2) => {
-			const position1 = new three.Vector2(ob1.positionInImage.x, ob1.positionInImage.y);
-			const position2 = new three.Vector2(ob2.positionInImage.x, ob2.positionInImage.y);
-			return position1.distanceTo(mouseOffsetRelativeVector) - position2.distanceTo(mouseOffsetRelativeVector);
-		})[0];
-
-		five.moveToPano(closestPoint.index);
-	};
-
-	function div_binding($$value) {
-		internal.binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			highlightContainerDom = $$value;
-			$$invalidate(5, highlightContainerDom);
-		});
-	}
-
-	function div_elementresize_handler() {
-		clientWidth = this.clientWidth;
-		clientHeight = this.clientHeight;
-		$$invalidate(3, clientWidth);
-		$$invalidate(4, clientHeight);
-	}
+	let { hoveredRoom } = $$props;
+	const boundingWidth = floorplanData.bounding.max.x - floorplanData.bounding.min.x;
+	const boundingHeight = floorplanData.bounding.max.y - floorplanData.bounding.min.y;
 
 	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(7, five = $$props.five);
-		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
-		if ('floorIndex' in $$props) $$invalidate(1, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(2, floorplanData = $$props.floorplanData);
-		if ('onRoomHeightClick' in $$props) $$invalidate(8, onRoomHeightClick = $$props.onRoomHeightClick);
+		if ('floorIndex' in $$props) $$invalidate(0, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(1, floorplanData = $$props.floorplanData);
+		if ('hoveredRoom' in $$props) $$invalidate(2, hoveredRoom = $$props.hoveredRoom);
 	};
 
-	return [
-		pxmm,
-		floorIndex,
-		floorplanData,
-		clientWidth,
-		clientHeight,
-		highlightContainerDom,
-		handleClick,
-		five,
-		onRoomHeightClick,
-		div_binding,
-		div_elementresize_handler
-	];
+	return [floorIndex, floorplanData, hoveredRoom, boundingWidth, boundingHeight];
 }
 
 class RoomHighlight extends internal.SvelteComponent {
@@ -964,11 +952,9 @@ class RoomHighlight extends internal.SvelteComponent {
 			create_fragment$2,
 			internal.safe_not_equal,
 			{
-				five: 7,
-				pxmm: 0,
-				floorIndex: 1,
-				floorplanData: 2,
-				onRoomHeightClick: 8
+				floorIndex: 0,
+				floorplanData: 1,
+				hoveredRoom: 2
 			},
 			add_css$1
 		);
@@ -1169,7 +1155,9 @@ function instance$1($$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));
 		}
 	};
 
@@ -1203,27 +1191,88 @@ class CurrentFloor extends internal.SvelteComponent {
 /* src/floorplan/PanoFloorplanRadarPlugin/Components/Main.svelte generated by Svelte v3.47.0 */
 
 function add_css(target) {
-	internal.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}");
+	internal.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 = internal.element("div");
+			if (if_block) if_block.c();
+			internal.attr(div, "class", "plugin-floorplan-radar svelte-1mvqyqq");
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[12].call(div));
+		},
+		m(target, anchor) {
+			internal.insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+			div_resize_listener = internal.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) {
+						internal.transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_1(ctx);
+					if_block.c();
+					internal.transition_in(if_block, 1);
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				internal.group_outros();
+
+				internal.transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				internal.check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) internal.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]
 		}
 	];
 
@@ -1237,10 +1286,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]
 		}
 	];
 
@@ -1258,7 +1307,7 @@ function create_if_block(ctx) {
 			internal.create_component(currentfloor.$$.fragment);
 			t = internal.space();
 			internal.create_component(camera.$$.fragment);
-			internal.attr(div, "class", "plugin-floorplan-radar-container svelte-7d8ub2");
+			internal.attr(div, "class", "plugin-floorplan-radar-container svelte-1mvqyqq");
 			internal.set_style(div, "width", style_width, false);
 			internal.set_style(div, "height", style_height, false);
 		},
@@ -1270,39 +1319,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)
 			? internal.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)
 			? internal.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`)) {
 				internal.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`)) {
 				internal.set_style(div, "height", style_height, false);
 			}
 		},
@@ -1326,37 +1375,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 = internal.element("div");
 			if (if_block) if_block.c();
-			internal.attr(div, "class", "plugin-floorplan-radar svelte-7d8ub2");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[11].call(div));
+			if_block_anchor = internal.empty();
 		},
 		m(target, anchor) {
-			internal.insert(target, div, anchor);
-			if (if_block) if_block.m(div, null);
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[11].bind(div));
+			if (if_block) if_block.m(target, anchor);
+			internal.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) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
 					if_block = create_if_block(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
-					if_block.m(div, null);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
 				}
 			} else if (if_block) {
 				internal.group_outros();
@@ -1378,15 +1423,15 @@ function create_fragment(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) internal.detach(div);
-			if (if_block) if_block.d();
-			div_resize_listener();
+			if (if_block) if_block.d(detaching);
+			if (detaching) internal.detach(if_block_anchor);
 		}
 	};
 }
 
 function instance($$self, $$props, $$invalidate) {
 	let { five } = $$props;
+	let { visible } = $$props;
 	let { hoverEnable } = $$props;
 	let { floorplanData } = $$props;
 	let { cameraImageUrl } = $$props;
@@ -1399,7 +1444,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);
 	}
 
 	svelte.onMount(() => {
@@ -1413,20 +1458,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;
@@ -1438,15 +1484,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,
@@ -1473,16 +1520,155 @@ class Main extends internal.SvelteComponent {
 			internal.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
 		);
 	}
 }
 
+/**
+ * 检查一个值是否是狭义上的对象
+ * @param {any} value 要检查的值
+ *
+ * isTruelyObject({})
+ * // => true
+ *
+ * isObjectLike([1, 2, 3])
+ * // => false
+ *
+ * isObjectLike(Function)
+ * // => false
+ *
+ * isObjectLike(null)
+ * // => false
+ *
+ */
+function isTruelyObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+function baseIsEqual(value, other) {
+    if (value === other)
+        return true;
+    if (typeof value !== typeof other)
+        return false;
+    if (Number.isNaN(value) && Number.isNaN(other))
+        return true;
+    return false;
+}
+function objEqualShallow(value, other) {
+    const valueProps = Object.getOwnPropertyNames(value);
+    const otherProps = Object.getOwnPropertyNames(other);
+    if (valueProps.length !== otherProps.length)
+        return false;
+    for (let i = 0, len = valueProps.length; i < len; i++) {
+        const propName = valueProps[i];
+        if (!baseIsEqual(value[propName], other[propName]))
+            return false;
+    }
+    return true;
+}
+function arrayEqualShallow(value, other) {
+    if (value.length !== other.length)
+        return false;
+    for (let i = 0, len = value.length; i < len; i++) {
+        if (!baseIsEqual(value[i], other[i]))
+            return false;
+    }
+    return true;
+}
+function isShallowEqual(value, other) {
+    if (baseIsEqual(value, other))
+        return true;
+    if (isTruelyObject(value) && isTruelyObject(other))
+        return objEqualShallow(value, other);
+    if (Array.isArray(value) && Array.isArray(other))
+        return arrayEqualShallow(value, other);
+    return false;
+}
+function isDeepEqual(value, other) {
+    if (baseIsEqual(value, other))
+        return true;
+    if (isTruelyObject(value) && isTruelyObject(other))
+        return objEqualDeep(value, other);
+    if (Array.isArray(value) && Array.isArray(other))
+        return arrayEqualDeep(value, other);
+    return false;
+}
+function arrayEqualDeep(value, other) {
+    if (value.length !== other.length)
+        return false;
+    for (let i = 0, len = value.length; i < len; i++) {
+        if (!isDeepEqual(value[i], other[i]))
+            return false;
+    }
+    return true;
+}
+function objEqualDeep(value, other) {
+    const valueProps = Object.getOwnPropertyNames(value);
+    const otherProps = Object.getOwnPropertyNames(other);
+    if (valueProps.length !== otherProps.length)
+        return false;
+    for (let i = 0, len = valueProps.length; i < len; i++) {
+        const propName = valueProps[i];
+        if (!isDeepEqual(value[propName], other[propName]))
+            return false;
+    }
+    return true;
+}
+/**
+ * 对象比较
+ * @param {*} value 第一个比较的值
+ * @param {*} other 第二个比较的值
+ * @param {Object} options 可选参数，可选项包括：<br />
+ *    deep {Boolean} 是否深比较<br />
+ * @returns {boolean} 是否相等
+ */
+function equal(value, other, opt = { deep: false }) {
+    if (!opt.deep)
+        return isShallowEqual(value, other);
+    return isDeepEqual(value, other);
+}
+
+/**
+ * plugin 的基本控制器
+ */
+class Controller$2 {
+    constructor(five$1) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * 插件事件钩子
+         */
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new five.Subscribe()
+        });
+        this.five = five$1;
+    }
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState() {
+        return this.state;
+    }
+}
+
+class Controller$1 extends Controller$2 {
+}
+
 const FLOORPLAN_EXTRA_OBJECT_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAwCAYAAACFUvPfAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAALaADAAQAAAABAAAAMAAAAADe2FZjAAAEF0lEQVRoBe2WzWskRRiHf13V092TxI2oEzYeVDwITtyDuCiihwiCePGgxIM3vYgHL4J4UIhBRA8i/gPqyUvWg7AiIuIeloDiYUHJLOK6BPwIk9nNODM9Xf1RVe1b3elJRjCZmQ6euqGmuqer33rq4e23GqiOykBloDJQGagMVAYqA5WBykBlYFYD1qwP/tdzaZqOx9zYOLxeX0+L5yzLGp0X/03a25MOnGRcBtx+6Rlo9SL08G4EooFnxa8Yiivox5/h5Ys/4cl7NVorNDRnngX+0MIkVMeMSf23zyKML8J7/Dy8hwF2Buh9CnS+AEQIdLspBuGb+M7/qLW4qJrNpsLapjYhpwVnx3BMfCtNNx3Etc9xywvnMf80wG8HmQainw0RxSGrnmeBp+8k5/j9S0HbvXb5io0Lz880/0wPHV1NlhLd316He+4xOCv5ragF7L9PrH1qBJyB0626x/lC+qrSvH5r/W+n1WpxUM5nMY4GPeH8lHJaPgfeAFQHCL+ntkXT+vnUc3W6pvTIwC0wy3rA4dwLmK2avZ7Eo9uKBuYJfgJscbs8dLCxDMt+EOEPBEZNEWyBYHqTz6bPXrzUnNrSShxHIsYiOL69zrCGLLcLqJP68tB+9w5wj+YhWDafQ2s61wNqxjZhmrQ2pvMFCEvXuCUZ7wqH794ZWs28LJqlTXSUyuksF2M/yOwqgkx2c1ADa4wLAQRk2sAGQQakhN6yFC2hltfz5kSY44NKQeeh+vtI/SSzWhg2CzCgmWISmKUGmaYFBDfCSymnfxJ6/+ospVcWOLLp5DGP/y0P/Rp66O99DQNq7Po3Ds0a0wY+My2QSv2N2mO/OyxR2o6UQk+Lv7yJ06JYSnnolZVU9cUn2O9SmaMWGFBqYXRwbqAJWIi94TX5biotpcGl1DXZ6LnqIbNDTnmUgi52Mv5l5ysMxIcZcGjy2DTK4ZHlcBC14zeSge4qphICjj3bS0A7o9nSp2TOkm7aZ8bGZy/jxhO87V91G0+dfY/Z7BWIIK9KYUi5qy/Hf8YfBG3sqJTHiQWhmTVkbip+wX3x6volVSx+LPAxF+VLXhZ8VQ+iP2Rta/iWe5v42Fngj0BbdnRTXh12ZIcKhTaGbcYjybRwXBU1lu9KlndXp04NM52poKWO0RZsviNaP9a6grkO972+st05pXhE5c1hTEluJy7XUejGUQNLMbAmTdWY1rKBLW3aTJqBZ7nZkb36DhYCreeYHbMUXHvaYi5XDK70EcgulmRjm77wNtenzuXCbmnTRaAx493rbGf3Jr/njMzj920CnKdUaFCjlDioy7NYNvOdGrQJNgI32/L2tkXfFPlxgToqjWVhD6KdLnQRdARf/HHQz2r2X2Gqy8pAZaAyUBmoDFQGKgP/q4F/AJYg9/s0ZoABAAAAAElFTkSuQmCC';
 
 async function formatOutlines(outlines) {
@@ -1578,31 +1764,105 @@ function formatExtraObjects(data, five, floorplanData) {
     return extraObjects;
 }
 
-class PanoFloorplanRadarPluginController {
-    app;
-    five;
-    wrapperSelector = '';
-    data;
-    wrapper = null;
-    extraObjects;
-    originExtraObjects;
-    configs = {};
+class Controller extends Controller$1 {
     constructor(five, params) {
+        super(five);
+        // =============== public properties =================
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'panoFloorplanRadarPlugin'
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== protected properties =================
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== private properties =================
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapperSelector", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "disposed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "extraObjects", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                this.disposed = true;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.wrapper = null;
+                this.wrapperSelector = '';
+                this.hooks.emit('dispose');
+            }
+        });
+        Object.defineProperty(this, "_disable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (options) => {
+                var _a;
+                const { userAction } = options;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.app = undefined;
+                this.hooks.emit('disable', { userAction });
+            }
+        });
         this.five = five;
-        params?.configs && Object.assign(this.configs, params.configs);
-        if (typeof params?.wrapper === 'string')
+        // =============== init State ===============
+        const baseConfig = {
+            hoverEnable: false,
+            cameraImageUrl: CAMERA_IMAGE,
+        };
+        const paramsConfig = (params === null || params === void 0 ? void 0 : params.configs) ? params.configs : {};
+        const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
+        this.state = { enabled: true, visible: true, config };
+        // =============== init wrapper ===============
+        if (params === null || params === void 0 ? void 0 : params.wrapper)
+            console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+        if (typeof (params === null || params === void 0 ? void 0 : params.wrapper) === 'string')
             this.wrapperSelector = params.wrapper;
-        else if (params?.wrapper instanceof Element)
+        else if ((params === null || params === void 0 ? void 0 : params.wrapper) instanceof Element)
             this.wrapper = params.wrapper;
+        // =============== init Listener ===============
         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;
+    async load(serverData, state, userAction = true) {
         // const loadImage = async () => {
         //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
         //   // 当有 svgString 时，没有加载过程
@@ -1618,55 +1878,130 @@ class PanoFloorplanRadarPluginController {
         //   })
         // }
         // await loadImage()
+        function isPluginServerData(serverData) {
+            return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+        }
+        const copyData = JSON.parse(JSON.stringify(serverData));
+        const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+        const prevData = this.data;
+        this.data = await formatData(_serverData);
+        this.hooks.emit('dataLoaded', this.data);
+        this.hooks.emit('dataChange', this.data, prevData);
+        if (state)
+            this.updateState(state, userAction);
         this.render();
-    };
+    }
+    async show(options = {}) {
+        // 已经展示完成了，不做任何操作
+        if (this.state.visible)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: true }, userAction);
+        this._show({ userAction });
+    }
+    async hide(options = {}) {
+        if (!this.state.visible)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: false }, userAction);
+        this._hide({ userAction });
+    }
+    enable(options = {}) {
+        if (this.state.enabled)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: true }, options.userAction || userAction);
+        this._enable({ userAction });
+    }
+    disable(options = {}) {
+        if (!this.state.enabled)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: false }, options.userAction || userAction);
+        this._disable({ userAction });
+    }
+    /** 更改插件 State */
+    setState(state, options = {}) {
+        const prevState = this.state;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState(state, userAction);
+        if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
+            const options = { userAction };
+            state.enabled ? this._enable(options) : this._disable(options);
+        }
+        if (state.visible !== undefined && prevState.visible !== state.visible) {
+            const options = { userAction };
+            state.visible ? this._show(options) : this._hide(options);
+        }
+    }
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper) {
         this.wrapper = wrapper;
         this.render();
     }
-    changeConfigs(configs) {
-        Object.assign(this.configs, configs);
+    changeConfigs(config, userAction = true) {
+        this.setState({ config }, { userAction });
         this.render();
     }
     setExtraObjectsWith3DPositions(data) {
-        this.originExtraObjects = data;
         if (!this.data)
             return;
         this.extraObjects = formatExtraObjects(data, this.five, this.data);
         this.render();
     }
+    async formatData(serverData) {
+        return await formatData(serverData.data);
+    }
+    _enable(options) {
+        const { userAction } = options;
+        this.hooks.emit('enable', { userAction });
+        if (this.state.visible)
+            this._show({ userAction });
+    }
+    _show(options) {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('show', { userAction });
+        this.render();
+    }
+    _hide(options) {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('hide', { userAction });
+        this.render();
+    }
+    updateState(state, userAction) {
+        const prevState = this.state;
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (equal(this.state, prevState, { deep: true }))
+            return;
+        this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
+    }
     render() {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
         // 处理 wrapper
-        if (!this.wrapper) {
+        if (!this.wrapper && this.wrapperSelector) {
             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);
+        const props = Object.assign(Object.assign({}, this.state.config), { five: this.five, floorplanData: this.data, visible: this.state.visible, extraObjects: this.extraObjects });
+        this.app ? this.app.$set(props) : (this.app = new Main({ target: this.wrapper, props }));
     }
 }
 
 const PanoFloorplanRadarPlugin = (five, params) => {
-    return new PanoFloorplanRadarPluginController(five, params);
+    return new Controller(five, params);
 };
 
 exports.PanoFloorplanRadarPlugin = PanoFloorplanRadarPlugin;