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

package/libs/base/BasePlugin.d.ts

@@ -0,0 +1,100 @@
+import { Five, Subscribe } from '@realsee/five';
+/**
+ * 基本属性字段
+ */
+interface State {
+    /**
+     * 插件是否启用
+     */
+    enabled: boolean;
+    /**
+     * 插件UI是否展示
+     */
+    visible?: boolean;
+    /**
+     * 插件的配置项
+     */
+    config?: unknown;
+}
+interface BaseOptions {
+    /** 是否是用户行为 */
+    userAction?: boolean;
+}
+/**
+ * 插件基本事件
+ */
+declare type EventMap<PluginState> = {
+    /**
+     * 插件被销毁
+     */
+    dispose: () => void;
+    /**
+     * 插件状态变化
+     * @param params.state      最新的State
+     * @param params.prevState  上一个State
+     * @param params.userAction 是否是用户触发
+     */
+    stateChange: (params: {
+        state: PluginState;
+        prevState?: PluginState;
+        userAction: boolean;
+    }) => void;
+};
+/**
+ * plugin 的基本控制器
+ */
+declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState>> {
+    five: Five;
+    /**
+     * 插件事件钩子
+     */
+    hooks: Subscribe<PluginEventMap>;
+    /**
+     * 当前状态
+     * @description
+     * ```text
+     * 可以通过 plugin.state 和 plugin.setState 来获取和设置。
+     * 通过 state 设置后，plugin 会通过合适的动画运动来达到设置的效果。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     */
+    abstract state: PluginState;
+    constructor(five: Five);
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState(): PluginState;
+    /**
+     * 插件自身DOM添加到父容器
+     * @param wrapper
+     */
+    appendTo?(wrapper: Element): void;
+    /**
+     * 展示UI
+     */
+    show?(options?: BaseOptions): Promise<void>;
+    /**
+     * 隐藏UI
+     */
+    hide?(options?: BaseOptions): Promise<void>;
+    /**
+     * 启用插件，让插件能够响应交互
+     */
+    abstract enable(options?: BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    abstract disable(options?: BaseOptions): void;
+    /**
+     * 插件进行销毁
+     */
+    abstract dispose(): void;
+    /**
+     * 设置state
+     * @param state 插件的目标状态
+     * @param options 配置项
+     */
+    abstract setState(state: Partial<PluginState>, options?: BaseOptions): void;
+}
+export type { State, EventMap, BaseOptions };
+export { Controller };

package/libs/base/BasePlugin.js

@@ -0,0 +1,31 @@
+import { Subscribe } from '@realsee/five';
+/**
+ * plugin 的基本控制器
+ */
+class Controller {
+    constructor(five) {
+        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 Subscribe()
+        });
+        this.five = five;
+    }
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState() {
+        return this.state;
+    }
+}
+export { Controller };

package/libs/base/BasePluginWithData.d.ts

@@ -0,0 +1,34 @@
+import * as BasePlugin from './BasePlugin';
+declare type State = BasePlugin.State;
+interface EventMap<PluginState, PluginData> extends BasePlugin.EventMap<PluginState> {
+    /** 数据变更 */
+    dataChange: (data: PluginData, prevData?: PluginData) => void;
+    /** 数据加载完成 */
+    dataLoaded: (data: PluginData) => void;
+}
+/**
+ * 插件的基础数据
+ */
+interface ServerData {
+    /**
+     * 数据版本
+     */
+    version: number;
+    /**
+     * 数据
+     */
+    data?: unknown;
+}
+declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState, PluginData>, PluginServerData extends ServerData, PluginData> extends BasePlugin.Controller<PluginState, PluginEventMap> {
+    protected abstract data?: PluginData;
+    /**
+     * 加载插件依赖数据
+     * @param serverData 插件数据
+     * @param state 插件 State
+     */
+    abstract load(serverData: PluginServerData, state?: PluginState, userAction?: boolean): Promise<void>;
+    /** 把原始数据转化为插件数据 */
+    protected abstract formatData?(serverData: PluginServerData): Promise<PluginData>;
+}
+export type { State, EventMap, ServerData };
+export { Controller };

package/libs/base/BasePluginWithData.js

@@ -0,0 +1,4 @@
+import * as BasePlugin from './BasePlugin';
+class Controller extends BasePlugin.Controller {
+}
+export { Controller };

package/libs/floorplan/Components/Compass.js

@@ -20,10 +20,10 @@ import {
 import { COMPASS_IMAGE } from '../Assets/compass';
 
 function add_css(target) {
-	append_styles(target, "svelte-5l80pv", ".floorplan-plugin__compass.svelte-5l80pv{position:absolute;left:50%;top:-46px;width:231px;height:41px;will-change:opacity;transform-origin:center 184px}.floorplan-plugin__compass-image.svelte-5l80pv{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-5l80pv{position:absolute;left:50%;top:15px;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:10px;color:#fff}");
+	append_styles(target, "svelte-p7yk9v", ".floorplan-plugin__compass.svelte-p7yk9v{position:absolute;left:50%;top:-46px;width:231px;height:41px;will-change:opacity;transform-origin:center 184px}.floorplan-plugin__compass-image.svelte-p7yk9v{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-p7yk9v{position:absolute;left:50%;top:15px;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:10px;color:#fff}");
 }
 
-// (14:0) {#if canShowCompass}
+// (14:0) {#if canCompassShow}
 function create_if_block(ctx) {
 	let div1;
 	let div0;
@@ -38,11 +38,11 @@ function create_if_block(ctx) {
 			t0 = space();
 			span = element("span");
 			t1 = text(/*northDesc*/ ctx[0]);
-			attr(div0, "class", "floorplan-plugin__compass-image svelte-5l80pv");
+			attr(div0, "class", "floorplan-plugin__compass-image svelte-p7yk9v");
 			set_style(div0, "background-image", `url(${COMPASS_IMAGE})`);
-			attr(span, "class", "floorplan-plugin__compass-text svelte-5l80pv");
-			attr(div1, "class", "floorplan-plugin__compass svelte-5l80pv");
-			set_style(div1, "transform", /*compassTransformStyle*/ ctx[1], false);
+			attr(span, "class", "floorplan-plugin__compass-text svelte-p7yk9v");
+			attr(div1, "class", "floorplan-plugin__compass svelte-p7yk9v");
+			set_style(div1, "transform", /*compassTransformStyle*/ ctx[2], false);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -62,7 +62,7 @@ function create_if_block(ctx) {
 
 function create_fragment(ctx) {
 	let if_block_anchor;
-	let if_block = /*canShowCompass*/ ctx[2] && create_if_block(ctx);
+	let if_block = /*canCompassShow*/ ctx[1] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -74,7 +74,7 @@ function create_fragment(ctx) {
 			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*canShowCompass*/ ctx[2]) if_block.p(ctx, dirty);
+			if (/*canCompassShow*/ ctx[1]) if_block.p(ctx, dirty);
 		},
 		i: noop,
 		o: noop,
@@ -98,16 +98,16 @@ function instance($$self, $$props, $$invalidate) {
 	? void 0
 	: _a.northRad;
 
-	const rotate = typeof northRad !== 'number' ? 0 : rad2Deg(northRad);
+	const canCompassShow = typeof northRad === 'number';
+	const rotate = !northRad ? 0 : rad2Deg(northRad);
 	const compassTransformStyle = `translateX(-50%) translateZ(10px) rotate(${-rotate + 90}deg)`;
-	const canShowCompass = typeof northRad === 'number';
 
 	$$self.$$set = $$props => {
 		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
 		if ('northDesc' in $$props) $$invalidate(0, northDesc = $$props.northDesc);
 	};
 
-	return [northDesc, compassTransformStyle, canShowCompass, floorplanData];
+	return [northDesc, canCompassShow, compassTransformStyle, floorplanData];
 }
 
 class Component extends SvelteComponent {

package/libs/floorplan/Components/CurrentFloor.js

@@ -22,6 +22,7 @@ import {
 	transition_out
 } from "svelte/internal";
 
+import { writable } from 'svelte/store';
 import BaseImage from './BaseImage';
 import RoomLabels from './RoomLabels/RoomLabels';
 import RuleLabels from './RuleLabels/RuleLabels';
@@ -32,7 +33,7 @@ function add_css(target) {
 	append_styles(target, "svelte-1oamigj", ".floorplan-plugin__floor.svelte-1oamigj{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}.floorplan-plugin__floor--is-current.svelte-1oamigj{opacity:1;pointer-events:auto}");
 }
 
-// (17:2) {#if hoverEnable}
+// (20:2) {#if hoverEnable}
 function create_if_block_2(ctx) {
 	let roomhighlight;
 	let current;
@@ -40,7 +41,8 @@ function create_if_block_2(ctx) {
 	const roomhighlight_spread_levels = [
 		{
 			floorIndex: /*floorIndex*/ ctx[1],
-			floorplanData: /*floorplanData*/ ctx[5]
+			floorplanData: /*floorplanData*/ ctx[5],
+			hoveredRoom: /*hoveredRoom*/ ctx[8]
 		}
 	];
 
@@ -61,11 +63,12 @@ function create_if_block_2(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData*/ 34)
+			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 290)
 			? get_spread_update(roomhighlight_spread_levels, [
 					{
 						floorIndex: /*floorIndex*/ ctx[1],
-						floorplanData: /*floorplanData*/ ctx[5]
+						floorplanData: /*floorplanData*/ ctx[5],
+						hoveredRoom: /*hoveredRoom*/ ctx[8]
 					}
 				])
 			: {};
@@ -87,7 +90,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (21:2) {#if roomLabelsEnable}
+// (24:2) {#if roomLabelsEnable}
 function create_if_block_1(ctx) {
 	let roomlabels;
 	let current;
@@ -96,7 +99,9 @@ function create_if_block_1(ctx) {
 		{
 			floorplanData: /*floorplanData*/ ctx[5],
 			floorIndex: /*floorIndex*/ ctx[1],
-			getLabelElement: /*getLabelElement*/ ctx[6]
+			getLabelElement: /*getLabelElement*/ ctx[6],
+			hoveredRoom: /*hoveredRoom*/ ctx[8],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
 		}
 	];
 
@@ -117,12 +122,14 @@ function create_if_block_1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement*/ 98)
+			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 482)
 			? get_spread_update(roomlabels_spread_levels, [
 					{
 						floorplanData: /*floorplanData*/ ctx[5],
 						floorIndex: /*floorIndex*/ ctx[1],
-						getLabelElement: /*getLabelElement*/ ctx[6]
+						getLabelElement: /*getLabelElement*/ ctx[6],
+						hoveredRoom: /*hoveredRoom*/ ctx[8],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
 					}
 				])
 			: {};
@@ -144,7 +151,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (24:2) {#if ruleLabelsEnable}
+// (27:2) {#if ruleLabelsEnable}
 function create_if_block(ctx) {
 	let rulelabels;
 	let current;
@@ -407,6 +414,8 @@ function instance($$self, $$props, $$invalidate) {
 	let { ruleLabelsEnable } = $$props;
 	let { floorplanData } = $$props;
 	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
+	const hoveredRoom = writable(undefined);
 
 	$$self.$$set = $$props => {
 		if ('isCurrent' in $$props) $$invalidate(0, isCurrent = $$props.isCurrent);
@@ -416,6 +425,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ('ruleLabelsEnable' in $$props) $$invalidate(4, ruleLabelsEnable = $$props.ruleLabelsEnable);
 		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
 		if ('getLabelElement' in $$props) $$invalidate(6, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(7, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	return [
@@ -425,7 +435,9 @@ function instance($$self, $$props, $$invalidate) {
 		roomLabelsEnable,
 		ruleLabelsEnable,
 		floorplanData,
-		getLabelElement
+		getLabelElement,
+		adaptiveRoomLabelVisibleEnable,
+		hoveredRoom
 	];
 }
 
@@ -446,7 +458,8 @@ class Component extends SvelteComponent {
 				roomLabelsEnable: 3,
 				ruleLabelsEnable: 4,
 				floorplanData: 5,
-				getLabelElement: 6
+				getLabelElement: 6,
+				adaptiveRoomLabelVisibleEnable: 7
 			},
 			add_css
 		);

package/libs/floorplan/Components/Main.js

@@ -37,11 +37,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
+	child_ctx[14] = list[i];
 	return child_ctx;
 }
 
-// (21:0) {#if visible}
+// (22:0) {#if visible}
 function create_if_block(ctx) {
 	let div;
 	let t0;
@@ -108,7 +108,7 @@ function create_if_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, floorIndex*/ 5040) {
+			if (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232) {
 				each_value = /*floorplanData*/ ctx[9].floorDatas;
 				let i;
 
@@ -214,7 +214,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (23:4) {#each floorplanData.floorDatas as floorData}
+// (24:4) {#each floorplanData.floorDatas as floorData}
 function create_each_block(ctx) {
 	let currentfloor;
 	let current;
@@ -225,13 +225,14 @@ function create_each_block(ctx) {
 			floorplanData: /*floorplanData*/ ctx[9],
 			getLabelElement: /*getLabelElement*/ ctx[12],
 			roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
-			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8]
+			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
 		},
 		{
-			floorIndex: /*floorData*/ ctx[13].floorIndex
+			floorIndex: /*floorData*/ ctx[14].floorIndex
 		},
 		{
-			isCurrent: /*floorData*/ ctx[13].floorIndex === /*floorIndex*/ ctx[4]
+			isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
 		}
 	];
 
@@ -252,20 +253,21 @@ function create_each_block(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, floorIndex*/ 5040)
+			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232)
 			? get_spread_update(currentfloor_spread_levels, [
-					dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable*/ 5024 && {
+					dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable*/ 13216 && {
 						hoverEnable: /*hoverEnable*/ ctx[5],
 						floorplanData: /*floorplanData*/ ctx[9],
 						getLabelElement: /*getLabelElement*/ ctx[12],
 						roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
-						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8]
+						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
 					},
 					dirty & /*floorplanData*/ 512 && {
-						floorIndex: /*floorData*/ ctx[13].floorIndex
+						floorIndex: /*floorData*/ ctx[14].floorIndex
 					},
 					dirty & /*floorplanData, floorIndex*/ 528 && {
-						isCurrent: /*floorData*/ ctx[13].floorIndex === /*floorIndex*/ ctx[4]
+						isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
 					}
 				])
 			: {};
@@ -287,7 +289,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (37:4) {#if compassEnable}
+// (39:4) {#if compassEnable}
 function create_if_block_1(ctx) {
 	let compass;
 	let current;
@@ -397,6 +399,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { lastPanoramaLongitude } = $$props;
 	let { cameraImageUrl } = $$props;
 	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('duration' in $$props) $$invalidate(0, duration = $$props.duration);
@@ -412,6 +415,7 @@ function instance($$self, $$props, $$invalidate) {
 		if ('lastPanoramaLongitude' in $$props) $$invalidate(10, lastPanoramaLongitude = $$props.lastPanoramaLongitude);
 		if ('cameraImageUrl' in $$props) $$invalidate(11, cameraImageUrl = $$props.cameraImageUrl);
 		if ('getLabelElement' in $$props) $$invalidate(12, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(13, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	return [
@@ -427,7 +431,8 @@ function instance($$self, $$props, $$invalidate) {
 		floorplanData,
 		lastPanoramaLongitude,
 		cameraImageUrl,
-		getLabelElement
+		getLabelElement,
+		adaptiveRoomLabelVisibleEnable
 	];
 }
 
@@ -454,7 +459,8 @@ class Component extends SvelteComponent {
 				floorplanData: 9,
 				lastPanoramaLongitude: 10,
 				cameraImageUrl: 11,
-				getLabelElement: 12
+				getLabelElement: 12,
+				adaptiveRoomLabelVisibleEnable: 13
 			},
 			add_css
 		);

package/libs/floorplan/Components/RoomHighlight/Room.js

@@ -6,7 +6,9 @@ import {
 	detach,
 	init,
 	insert,
+	listen,
 	noop,
+	run_all,
 	safe_not_equal,
 	svg_element
 } from "svelte/internal";
@@ -20,22 +22,35 @@ function add_css(target) {
 function create_fragment(ctx) {
 	let path;
 	let path_fill_value;
+	let mounted;
+	let dispose;
 
 	return {
 		c() {
 			path = svg_element("path");
-			attr(path, "d", /*_pathD*/ ctx[0]);
+			attr(path, "d", /*_pathD*/ ctx[2]);
 			attr(path, "fill", path_fill_value = `#fff`);
 			attr(path, "class", "svelte-11takew");
 		},
 		m(target, anchor) {
 			insert(target, path, anchor);
+
+			if (!mounted) {
+				dispose = [
+					listen(path, "mouseenter", /*onMouseEnter*/ ctx[0]),
+					listen(path, "mouseleave", /*onMouseLeave*/ ctx[1])
+				];
+
+				mounted = true;
+			}
 		},
 		p: noop,
 		i: noop,
 		o: noop,
 		d(detaching) {
 			if (detaching) detach(path);
+			mounted = false;
+			run_all(dispose);
 		}
 	};
 }
@@ -43,6 +58,16 @@ function create_fragment(ctx) {
 function instance($$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, {
@@ -51,17 +76,31 @@ function instance($$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 Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { room: 1, floorplanData: 2 }, add_css);
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				room: 3,
+				floorplanData: 4,
+				hoveredRoom: 5
+			},
+			add_css
+		);
 	}
 }
 

package/libs/floorplan/Components/RoomHighlight/RoomHighlight.js

@@ -32,11 +32,11 @@ function add_css(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;
@@ -44,8 +44,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]
 		}
 	];
 
@@ -73,11 +74,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)
 			? 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]
 					}
 				])
 			: {};
@@ -108,7 +110,7 @@ function create_fragment(ctx) {
 	let svg_viewBox_value;
 	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);
@@ -127,7 +129,7 @@ function create_fragment(ctx) {
 
 			attr(svg, "width", "100%");
 			attr(svg, "height", "100%");
-			attr(svg, "viewBox", svg_viewBox_value = `0 0 ${/*boundingWidth*/ ctx[2]} ${/*boundingHeight*/ ctx[3]}`);
+			attr(svg, "viewBox", svg_viewBox_value = `0 0 ${/*boundingWidth*/ ctx[3]} ${/*boundingHeight*/ ctx[4]}`);
 			attr(svg, "class", "svelte-1tk06jk");
 			attr(div, "class", "floorplan-plugin__room-highlight svelte-1tk06jk");
 		},
@@ -142,7 +144,7 @@ function create_fragment(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;
 				group_outros();
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, svg, outro_and_destroy_block, create_each_block, null, get_each_context);
@@ -178,21 +180,36 @@ function create_fragment(ctx) {
 function instance($$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 Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { floorIndex: 0, floorplanData: 1 }, add_css);
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				floorIndex: 0,
+				floorplanData: 1,
+				hoveredRoom: 2
+			},
+			add_css
+		);
 	}
 }