@realsee/dnalogel 2.1.0-alpha.13 → 2.1.0-alpha.16

package/libs/floorplan/Components/Compass.svelte

@@ -0,0 +1,51 @@
+<script>var _a;
+import { COMPASS_IMAGE } from '../Assets/compass';
+function rad2Deg(rad) {
+    return (rad / Math.PI) * 180;
+}
+export let floorplanData;
+export let northDesc;
+const northRad = (_a = floorplanData.entrance) === null || _a === void 0 ? void 0 : _a.northRad;
+const canCompassShow = typeof northRad === 'number';
+const rotate = !northRad ? 0 : rad2Deg(northRad);
+const compassTransformStyle = `translateX(-50%) translateZ(10px) rotate(${-rotate + 90}deg)`;
+</script>
+
+{#if canCompassShow}
+  <div class="floorplan-plugin__compass" style:transform={compassTransformStyle}>
+    <div class="floorplan-plugin__compass-image" style="background-image: {`url(${COMPASS_IMAGE})`}" />
+    <span class="floorplan-plugin__compass-text"> {northDesc} </span>
+  </div>
+{/if}
+
+<style>
+  .floorplan-plugin__compass {
+    position: absolute;
+    left: 50%;
+    top: -46px;
+    width: 231px;
+    height: 41px;
+    will-change: opacity;
+    transform-origin: center 184px;
+  }
+  .floorplan-plugin__compass-image {
+    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 {
+    position: absolute;
+    left: 50%;
+    top: 15px;
+    transform: translateX(-50%);
+    opacity: 0.2;
+    font-weight: bold;
+    font-size: 10px;
+    color: #fff;
+  }
+</style>

package/libs/floorplan/Components/CurrentFloor.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -33,7 +33,7 @@ function add_css(target) {
 	append_styles(target, "svelte-bl8zrz", ".floorplan-plugin__floor.svelte-bl8zrz{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}.floorplan-plugin__floor--is-current.svelte-bl8zrz{opacity:1;pointer-events:auto}");
 }
 
-// (20:2) {#if hoverEnable}
+// (22:2) {#if hoverEnable}
 function create_if_block_2(ctx) {
 	let roomhighlight;
 	let current;
@@ -42,7 +42,7 @@ function create_if_block_2(ctx) {
 		{
 			floorIndex: /*floorIndex*/ ctx[1],
 			floorplanData: /*floorplanData*/ ctx[5],
-			hoveredRoom: /*hoveredRoom*/ ctx[8]
+			hoveredRoom: /*hoveredRoom*/ ctx[10]
 		}
 	];
 
@@ -63,12 +63,12 @@ function create_if_block_2(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 290)
+			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 1058)
 			? get_spread_update(roomhighlight_spread_levels, [
 					{
 						floorIndex: /*floorIndex*/ ctx[1],
 						floorplanData: /*floorplanData*/ ctx[5],
-						hoveredRoom: /*hoveredRoom*/ ctx[8]
+						hoveredRoom: /*hoveredRoom*/ ctx[10]
 					}
 				])
 			: {};
@@ -90,7 +90,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (24:2) {#if roomLabelsEnable}
+// (26:2) {#if roomLabelsEnable}
 function create_if_block_1(ctx) {
 	let roomlabels;
 	let current;
@@ -99,9 +99,10 @@ function create_if_block_1(ctx) {
 		{
 			floorplanData: /*floorplanData*/ ctx[5],
 			floorIndex: /*floorIndex*/ ctx[1],
-			getLabelElement: /*getLabelElement*/ ctx[6],
-			hoveredRoom: /*hoveredRoom*/ ctx[8],
-			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
+			getRoomAreaText: /*getRoomAreaText*/ ctx[6],
+			getLabelElement: /*getLabelElement*/ ctx[7],
+			hoveredRoom: /*hoveredRoom*/ ctx[10],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[9]
 		}
 	];
 
@@ -122,14 +123,15 @@ function create_if_block_1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 482)
+			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getRoomAreaText, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 1762)
 			? get_spread_update(roomlabels_spread_levels, [
 					{
 						floorplanData: /*floorplanData*/ ctx[5],
 						floorIndex: /*floorIndex*/ ctx[1],
-						getLabelElement: /*getLabelElement*/ ctx[6],
-						hoveredRoom: /*hoveredRoom*/ ctx[8],
-						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
+						getRoomAreaText: /*getRoomAreaText*/ ctx[6],
+						getLabelElement: /*getLabelElement*/ ctx[7],
+						hoveredRoom: /*hoveredRoom*/ ctx[10],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[9]
 					}
 				])
 			: {};
@@ -151,7 +153,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (27:2) {#if ruleLabelsEnable}
+// (38:2) {#if ruleLabelsEnable}
 function create_if_block(ctx) {
 	let rulelabels;
 	let current;
@@ -159,7 +161,8 @@ function create_if_block(ctx) {
 	const rulelabels_spread_levels = [
 		{
 			floorplanData: /*floorplanData*/ ctx[5],
-			floorIndex: /*floorIndex*/ ctx[1]
+			floorIndex: /*floorIndex*/ ctx[1],
+			getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
 		}
 	];
 
@@ -180,11 +183,12 @@ function create_if_block(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const rulelabels_changes = (dirty & /*floorplanData, floorIndex*/ 34)
+			const rulelabels_changes = (dirty & /*floorplanData, floorIndex, getRuleDistanceText*/ 290)
 			? get_spread_update(rulelabels_spread_levels, [
 					{
 						floorplanData: /*floorplanData*/ ctx[5],
-						floorIndex: /*floorIndex*/ ctx[1]
+						floorIndex: /*floorIndex*/ ctx[1],
+						getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
 					}
 				])
 			: {};
@@ -413,7 +417,9 @@ function instance($$self, $$props, $$invalidate) {
 	let { roomLabelsEnable } = $$props;
 	let { ruleLabelsEnable } = $$props;
 	let { floorplanData } = $$props;
+	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
+	let { getRuleDistanceText } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 	const hoveredRoom = writable(undefined);
 
@@ -424,8 +430,10 @@ function instance($$self, $$props, $$invalidate) {
 		if ('roomLabelsEnable' in $$props) $$invalidate(3, roomLabelsEnable = $$props.roomLabelsEnable);
 		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);
+		if ('getRoomAreaText' in $$props) $$invalidate(6, getRoomAreaText = $$props.getRoomAreaText);
+		if ('getLabelElement' in $$props) $$invalidate(7, getLabelElement = $$props.getLabelElement);
+		if ('getRuleDistanceText' in $$props) $$invalidate(8, getRuleDistanceText = $$props.getRuleDistanceText);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(9, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	return [
@@ -435,7 +443,9 @@ function instance($$self, $$props, $$invalidate) {
 		roomLabelsEnable,
 		ruleLabelsEnable,
 		floorplanData,
+		getRoomAreaText,
 		getLabelElement,
+		getRuleDistanceText,
 		adaptiveRoomLabelVisibleEnable,
 		hoveredRoom
 	];
@@ -458,8 +468,10 @@ class Component extends SvelteComponent {
 				roomLabelsEnable: 3,
 				ruleLabelsEnable: 4,
 				floorplanData: 5,
-				getLabelElement: 6,
-				adaptiveRoomLabelVisibleEnable: 7
+				getRoomAreaText: 6,
+				getLabelElement: 7,
+				getRuleDistanceText: 8,
+				adaptiveRoomLabelVisibleEnable: 9
 			},
 			add_css
 		);

package/libs/floorplan/Components/CurrentFloor.svelte

@@ -0,0 +1,57 @@
+<script>import { writable } from 'svelte/store';
+import BaseImage from './BaseImage.svelte';
+import RoomLabels from './RoomLabels/RoomLabels.svelte';
+import RuleLabels from './RuleLabels/RuleLabels.svelte';
+import RoomMaterial from './RoomMaterials/RoomMaterial.svelte';
+import RoomHighlight from './RoomHighlight/RoomHighlight.svelte';
+export let isCurrent;
+export let floorIndex;
+export let hoverEnable;
+export let roomLabelsEnable;
+export let ruleLabelsEnable;
+export let floorplanData;
+export let getRoomAreaText;
+export let getLabelElement;
+export let getRuleDistanceText;
+export let adaptiveRoomLabelVisibleEnable;
+const hoveredRoom = writable(undefined);
+</script>
+
+<div class="{`floorplan-plugin__floor${isCurrent ? ' floorplan-plugin__floor--is-current' : ''}`}">
+  <RoomMaterial {...{ floorIndex, floorplanData }} />
+  {#if hoverEnable}
+    <RoomHighlight {...{ floorIndex, floorplanData, hoveredRoom }} />
+  {/if}
+  <BaseImage {...{ floorplanData, floorIndex }} />
+  {#if roomLabelsEnable}
+    <RoomLabels
+      {...{
+        floorplanData,
+        floorIndex,
+        getRoomAreaText,
+        getLabelElement,
+        hoveredRoom,
+        adaptiveRoomLabelVisibleEnable,
+      }}
+    />
+  {/if}
+  {#if ruleLabelsEnable}
+    <RuleLabels {...{ floorplanData, floorIndex, getRuleDistanceText }} />
+  {/if}
+</div>
+
+<style>
+  .floorplan-plugin__floor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .floorplan-plugin__floor--is-current {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>

package/libs/floorplan/Components/Main.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -37,11 +37,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[14] = list[i];
+	child_ctx[16] = list[i];
 	return child_ctx;
 }
 
-// (22:0) {#if visible}
+// (24: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, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232) {
+			if (dirty & /*hoverEnable, floorplanData, getRoomAreaText, getLabelElement, getRuleDistanceText, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 62384) {
 				each_value = /*floorplanData*/ ctx[9].floorDatas;
 				let i;
 
@@ -214,7 +214,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (24:4) {#each floorplanData.floorDatas as floorData}
+// (26:4) {#each floorplanData.floorDatas as floorData}
 function create_each_block(ctx) {
 	let currentfloor;
 	let current;
@@ -223,16 +223,18 @@ function create_each_block(ctx) {
 		{
 			hoverEnable: /*hoverEnable*/ ctx[5],
 			floorplanData: /*floorplanData*/ ctx[9],
-			getLabelElement: /*getLabelElement*/ ctx[12],
+			getRoomAreaText: /*getRoomAreaText*/ ctx[12],
+			getLabelElement: /*getLabelElement*/ ctx[13],
+			getRuleDistanceText: /*getRuleDistanceText*/ ctx[14],
 			roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
 			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
-			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[15]
 		},
 		{
-			floorIndex: /*floorData*/ ctx[14].floorIndex
+			floorIndex: /*floorData*/ ctx[16].floorIndex
 		},
 		{
-			isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
+			isCurrent: /*floorData*/ ctx[16].floorIndex === /*floorIndex*/ ctx[4]
 		}
 	];
 
@@ -253,21 +255,23 @@ function create_each_block(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232)
+			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getRoomAreaText, getLabelElement, getRuleDistanceText, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 62384)
 			? get_spread_update(currentfloor_spread_levels, [
-					dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable*/ 13216 && {
+					dirty & /*hoverEnable, floorplanData, getRoomAreaText, getLabelElement, getRuleDistanceText, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable*/ 62368 && {
 						hoverEnable: /*hoverEnable*/ ctx[5],
 						floorplanData: /*floorplanData*/ ctx[9],
-						getLabelElement: /*getLabelElement*/ ctx[12],
+						getRoomAreaText: /*getRoomAreaText*/ ctx[12],
+						getLabelElement: /*getLabelElement*/ ctx[13],
+						getRuleDistanceText: /*getRuleDistanceText*/ ctx[14],
 						roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
 						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
-						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[15]
 					},
 					dirty & /*floorplanData*/ 512 && {
-						floorIndex: /*floorData*/ ctx[14].floorIndex
+						floorIndex: /*floorData*/ ctx[16].floorIndex
 					},
 					dirty & /*floorplanData, floorIndex*/ 528 && {
-						isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
+						isCurrent: /*floorData*/ ctx[16].floorIndex === /*floorIndex*/ ctx[4]
 					}
 				])
 			: {};
@@ -289,7 +293,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (39:4) {#if compassEnable}
+// (43:4) {#if compassEnable}
 function create_if_block_1(ctx) {
 	let compass;
 	let current;
@@ -398,7 +402,9 @@ function instance($$self, $$props, $$invalidate) {
 	let { floorplanData } = $$props;
 	let { lastPanoramaLongitude } = $$props;
 	let { cameraImageUrl } = $$props;
+	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
+	let { getRuleDistanceText } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
 	$$self.$$set = $$props => {
@@ -414,8 +420,10 @@ function instance($$self, $$props, $$invalidate) {
 		if ('floorplanData' in $$props) $$invalidate(9, floorplanData = $$props.floorplanData);
 		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);
+		if ('getRoomAreaText' in $$props) $$invalidate(12, getRoomAreaText = $$props.getRoomAreaText);
+		if ('getLabelElement' in $$props) $$invalidate(13, getLabelElement = $$props.getLabelElement);
+		if ('getRuleDistanceText' in $$props) $$invalidate(14, getRuleDistanceText = $$props.getRuleDistanceText);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(15, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	return [
@@ -431,7 +439,9 @@ function instance($$self, $$props, $$invalidate) {
 		floorplanData,
 		lastPanoramaLongitude,
 		cameraImageUrl,
+		getRoomAreaText,
 		getLabelElement,
+		getRuleDistanceText,
 		adaptiveRoomLabelVisibleEnable
 	];
 }
@@ -459,8 +469,10 @@ class Component extends SvelteComponent {
 				floorplanData: 9,
 				lastPanoramaLongitude: 10,
 				cameraImageUrl: 11,
-				getLabelElement: 12,
-				adaptiveRoomLabelVisibleEnable: 13
+				getRoomAreaText: 12,
+				getLabelElement: 13,
+				getRuleDistanceText: 14,
+				adaptiveRoomLabelVisibleEnable: 15
 			},
 			add_css
 		);

package/libs/floorplan/Components/Main.svelte

@@ -0,0 +1,55 @@
+<script>import { linear } from 'svelte/easing';
+import { fade } from 'svelte/transition';
+import Camera from './Camera.svelte';
+import Compass from './Compass.svelte';
+import CurrentFloor from './CurrentFloor.svelte';
+export let duration = 0;
+export let visible;
+export let northDesc;
+export let panoIndex;
+export let floorIndex;
+export let hoverEnable;
+export let compassEnable;
+export let roomLabelsEnable;
+export let ruleLabelsEnable;
+export let floorplanData;
+export let lastPanoramaLongitude;
+export let cameraImageUrl;
+export let getRoomAreaText;
+export let getLabelElement;
+export let getRuleDistanceText;
+export let adaptiveRoomLabelVisibleEnable;
+</script>
+
+{#if visible}
+  <div class="floorplan-main" in:fade={{ duration, easing: linear }}>
+    {#each floorplanData.floorDatas as floorData}
+      <CurrentFloor
+        {...{
+          hoverEnable,
+          floorplanData,
+          getRoomAreaText,
+          getLabelElement,
+          getRuleDistanceText,
+          roomLabelsEnable,
+          ruleLabelsEnable,
+          adaptiveRoomLabelVisibleEnable,
+        }}
+        floorIndex={floorData.floorIndex}
+        isCurrent={floorData.floorIndex === floorIndex}
+      />
+    {/each}
+    <Camera {...{ panoIndex, floorplanData, lastPanoramaLongitude, cameraImageUrl }} />
+    {#if compassEnable}
+      <Compass {floorplanData} {northDesc} />
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .floorplan-main {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>

package/libs/floorplan/Components/Normalmage.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,

package/libs/floorplan/Components/Normalmage.svelte

@@ -0,0 +1,11 @@
+<script>export let url;
+</script>
+
+<img src={url} alt="floorplan iamge" />
+
+<style>
+  img {
+    width: 100%;
+    height: 100%;
+  }
+</style>

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,

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

@@ -0,0 +1,27 @@
+<script>import formatFloorplanPoint, { pathD } from '../../utils/formatPosition';
+export let room;
+export let floorplanData;
+export let hoveredRoom;
+function onMouseEnter() {
+    hoveredRoom.set(room);
+}
+function onMouseLeave() {
+    hoveredRoom.set(undefined);
+}
+const { bounding } = floorplanData;
+const _pathD = pathD(room.path, {
+    needZ: true,
+    format: (vector) => formatFloorplanPoint(vector, bounding),
+});
+</script>
+
+<path d={_pathD} fill={`#fff`} on:mouseenter={onMouseEnter} on:mouseleave={onMouseLeave} />
+
+<style>
+  path {
+    opacity: 0;
+  }
+  path:hover {
+    opacity: 0.1;
+  }
+</style>

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,

package/libs/floorplan/Components/RoomHighlight/RoomHighlight.svelte

@@ -0,0 +1,29 @@
+<script>import Room from './Room.svelte';
+export let floorIndex;
+export let floorplanData;
+export let hoveredRoom;
+const boundingWidth = floorplanData.bounding.max.x - floorplanData.bounding.min.x;
+const boundingHeight = floorplanData.bounding.max.y - floorplanData.bounding.min.y;
+</script>
+
+<div class="floorplan-plugin__room-highlight">
+  <svg width="100%" height="100%" viewBox={`0 0 ${boundingWidth} ${boundingHeight}`}>
+    {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
+      <Room {...{ room, floorplanData, hoveredRoom }} />
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .floorplan-plugin__room-highlight {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>