@realsee/dnalogel 2.0.0-alpha.35 → 2.0.0-alpha.36

package/dist/floorplan/PanoFloorplanRadarPlugin/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var internal = require('svelte/internal');
 var svelte = require('svelte');
+var five = require('@realsee/five');
 
 const CAMERA_IMAGE = 'data:image/png;base64,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';
 
@@ -118,11 +119,11 @@ function instance$8($$self, $$props, $$invalidate) {
 	svelte.onMount(() => {
 		five.on('panoWillArrive', onFivePanoWillArrive);
 		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
-	});
 
-	svelte.onDestroy(() => {
-		five.off('panoWillArrive', onFivePanoWillArrive);
-		five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+		return function dispose() {
+			five.off('panoWillArrive', onFivePanoWillArrive);
+			five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+		};
 	});
 
 	$$self.$$set = $$props => {
@@ -437,7 +438,7 @@ function add_css$3(target) {
 }
 
 // (13:22) 
-function create_if_block_1(ctx) {
+function create_if_block_1$1(ctx) {
 	let normalimage;
 	let current;
 	normalimage = new Normalmage({ props: { url: /*imageData*/ ctx[1].url } });
@@ -512,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) {
@@ -690,22 +691,35 @@ function add_css$2(target) {
 
 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-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);
 		}
 	};
 }
@@ -713,6 +727,16 @@ function create_fragment$3(ctx) {
 function instance$3($$self, $$props, $$invalidate) {
 	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, {
@@ -721,17 +745,31 @@ function instance$3($$self, $$props, $$invalidate) {
 	});
 
 	$$self.$$set = $$props => {
-		if ('room' in $$props) $$invalidate(1, room = $$props.room);
-		if ('floorplanData' in $$props) $$invalidate(2, 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, 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, { room: 1, floorplanData: 2 }, 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
+		);
 	}
 }
 
@@ -743,11 +781,11 @@ function add_css$1(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[4] = list[i];
+	child_ctx[5] = list[i];
 	return child_ctx;
 }
 
-// (10: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;
@@ -755,8 +793,9 @@ function create_each_block(key_1, ctx) {
 
 	const room_spread_levels = [
 		{
-			room: /*room*/ ctx[4],
-			floorplanData: /*floorplanData*/ ctx[1]
+			room: /*room*/ ctx[5],
+			floorplanData: /*floorplanData*/ ctx[1],
+			hoveredRoom: /*hoveredRoom*/ ctx[2]
 		}
 	];
 
@@ -784,11 +823,12 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const room_changes = (dirty & /*floorplanData, floorIndex*/ 3)
+			const room_changes = (dirty & /*floorplanData, floorIndex, hoveredRoom*/ 7)
 			? internal.get_spread_update(room_spread_levels, [
 					{
-						room: /*room*/ ctx[4],
-						floorplanData: /*floorplanData*/ ctx[1]
+						room: /*room*/ ctx[5],
+						floorplanData: /*floorplanData*/ ctx[1],
+						hoveredRoom: /*hoveredRoom*/ ctx[2]
 					}
 				])
 			: {};
@@ -818,7 +858,7 @@ function create_fragment$2(ctx) {
 	let each_1_lookup = new Map();
 	let current;
 	let each_value = /*floorplanData*/ ctx[1].floorDatas[/*floorIndex*/ ctx[0]].rooms;
-	const get_key = ctx => /*room*/ ctx[4].id;
+	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);
@@ -837,7 +877,7 @@ function create_fragment$2(ctx) {
 
 			internal.attr(svg, "width", "100%");
 			internal.attr(svg, "height", "100%");
-			internal.attr(svg, "viewBox", `0 0 ${/*boundingWidth*/ ctx[2]} ${/*boundingHeight*/ ctx[3]}`);
+			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");
 		},
@@ -852,7 +892,7 @@ function create_fragment$2(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*floorplanData, floorIndex*/ 3) {
+			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);
@@ -888,21 +928,36 @@ function create_fragment$2(ctx) {
 function instance$2($$self, $$props, $$invalidate) {
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
+	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 ('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 [floorIndex, floorplanData, boundingWidth, boundingHeight];
+	return [floorIndex, floorplanData, hoveredRoom, boundingWidth, boundingHeight];
 }
 
 class RoomHighlight extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$2, create_fragment$2, internal.safe_not_equal, { floorIndex: 0, floorplanData: 1 }, add_css$1);
+
+		internal.init(
+			this,
+			options,
+			instance$2,
+			create_fragment$2,
+			internal.safe_not_equal,
+			{
+				floorIndex: 0,
+				floorplanData: 1,
+				hoveredRoom: 2
+			},
+			add_css$1
+		);
 	}
 }
 
@@ -1139,24 +1194,85 @@ function add_css(target) {
 	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]
 		}
 	];
 
@@ -1170,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]
 		}
 	];
 
@@ -1203,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);
 			}
 		},
@@ -1259,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-1mvqyqq");
-			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();
@@ -1311,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;
@@ -1332,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(() => {
@@ -1346,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;
@@ -1371,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,
@@ -1406,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) {
@@ -1511,49 +1764,59 @@ function formatExtraObjects(data, five, floorplanData) {
     return extraObjects;
 }
 
-class PanoFloorplanRadarPluginController {
+class Controller extends Controller$1 {
     constructor(five, params) {
-        Object.defineProperty(this, "app", {
+        super(five);
+        // =============== public properties =================
+        Object.defineProperty(this, "name", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: 'panoFloorplanRadarPlugin'
         });
-        Object.defineProperty(this, "five", {
+        Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "wrapperSelector", {
+        // =============== protected properties =================
+        Object.defineProperty(this, "data", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: ''
+            value: void 0
         });
-        Object.defineProperty(this, "data", {
+        // =============== 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, "extraObjects", {
+        Object.defineProperty(this, "disposed", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: []
+            value: false
         });
-        Object.defineProperty(this, "configs", {
+        Object.defineProperty(this, "extraObjects", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: {}
+            value: []
         });
         Object.defineProperty(this, "dispose", {
             enumerable: true,
@@ -1561,50 +1824,123 @@ class PanoFloorplanRadarPluginController {
             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, "load", {
+        Object.defineProperty(this, "_disable", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 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();
+            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 === null || params === void 0 ? void 0 : params.configs) && Object.assign(this.configs, params.configs);
+        // =============== 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 === null || params === void 0 ? void 0 : params.wrapper) instanceof Element)
             this.wrapper = params.wrapper;
+        // =============== init Listener ===============
         five.once('dispose', this.dispose);
     }
+    async load(serverData, state, userAction = true) {
+        // 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()
+        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) {
@@ -1613,35 +1949,59 @@ class PanoFloorplanRadarPluginController {
         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() {
-        var _a;
+        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;
-        const props = {
-            five: this.five,
-            floorplanData: this.data,
-            extraObjects: this.extraObjects,
-            cameraImageUrl: this.configs.cameraImageUrl,
-            hoverEnable: (_a = this.configs.hoverEnable) !== null && _a !== void 0 ? _a : 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;