@realsee/dnalogel 2.0.0-alpha.35-beta2 → 2.0.0-alpha.37

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
+		);
 	}
 }
 

package/libs/floorplan/Components/RoomLabels/RoomLabel.js

@@ -5,6 +5,7 @@ import {
 	append,
 	append_styles,
 	attr,
+	binding_callbacks,
 	detach,
 	element,
 	empty,
@@ -18,14 +19,16 @@ import {
 	text
 } from "svelte/internal";
 
+import { onMount } from 'svelte';
+
 function add_css(target) {
-	append_styles(target, "svelte-1ashbdx", ".floorplan-plugin__room-label-item.svelte-1ashbdx{position:absolute;display:flex;flex-flow:column;align-items:center;line-height:15px;color:#fff;transform:translate(-50%, -50%);white-space:nowrap}.floorplan-plugin__room-size.svelte-1ashbdx{opacity:0.45}");
+	append_styles(target, "svelte-1b5j2lp", ".floorplan-plugin__room-label-item.svelte-1b5j2lp{position:absolute;display:flex;flex-flow:column;align-items:center;line-height:1;color:#fff;transform:translate(-50%, -50%);white-space:nowrap;will-change:opacity;transition:opacity 300ms}.floorplan-plugin__room-size.svelte-1b5j2lp{opacity:0.45}");
 }
 
-// (22:30) 
+// (95:30) 
 function create_if_block_1(ctx) {
 	let html_tag;
-	let raw_value = /*userConfigElement*/ ctx[2].outerHTML + "";
+	let raw_value = /*userConfigElement*/ ctx[4].outerHTML + "";
 	let html_anchor;
 
 	return {
@@ -39,7 +42,7 @@ function create_if_block_1(ctx) {
 			insert(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*userConfigElement*/ 4 && raw_value !== (raw_value = /*userConfigElement*/ ctx[2].outerHTML + "")) html_tag.p(raw_value);
+			if (dirty & /*userConfigElement*/ 16 && raw_value !== (raw_value = /*userConfigElement*/ ctx[4].outerHTML + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -48,7 +51,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (16:2) {#if getLabelElement === undefined}
+// (89:2) {#if getLabelElement === undefined}
 function create_if_block(ctx) {
 	let span0;
 	let t0_value = /*room*/ ctx[0].name + "";
@@ -62,9 +65,9 @@ function create_if_block(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			span1 = element("span");
-			span1.textContent = `${/*roomSizeDes*/ ctx[3]}`;
+			span1.textContent = `${/*roomSizeDes*/ ctx[5]}`;
 			attr(span0, "class", "floorplan-plugin__room-name");
-			attr(span1, "class", "floorplan-plugin__room-size svelte-1ashbdx");
+			attr(span1, "class", "floorplan-plugin__room-size svelte-1b5j2lp");
 		},
 		m(target, anchor) {
 			insert(target, span0, anchor);
@@ -88,7 +91,7 @@ function create_fragment(ctx) {
 
 	function select_block_type(ctx, dirty) {
 		if (/*getLabelElement*/ ctx[1] === undefined) return create_if_block;
-		if (/*userConfigElement*/ ctx[2]) return create_if_block_1;
+		if (/*userConfigElement*/ ctx[4]) return create_if_block_1;
 	}
 
 	let current_block_type = select_block_type(ctx, -1);
@@ -98,14 +101,16 @@ function create_fragment(ctx) {
 		c() {
 			div = element("div");
 			if (if_block) if_block.c();
-			attr(div, "class", "floorplan-plugin__room-label-item svelte-1ashbdx");
-			set_style(div, "left", /*left*/ ctx[4], false);
-			set_style(div, "top", /*top*/ ctx[5], false);
-			set_style(div, "font-size", /*fontSize*/ ctx[6], false);
+			attr(div, "class", "floorplan-plugin__room-label-item svelte-1b5j2lp");
+			set_style(div, "left", /*left*/ ctx[6], false);
+			set_style(div, "top", /*top*/ ctx[7], false);
+			set_style(div, "font-size", /*fontSize*/ ctx[8], false);
+			set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0', false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if (if_block) if_block.m(div, null);
+			/*div_binding*/ ctx[15](div);
 		},
 		p(ctx, [dirty]) {
 			if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
@@ -119,6 +124,10 @@ function create_fragment(ctx) {
 					if_block.m(div, null);
 				}
 			}
+
+			if (dirty & /*labelVisible*/ 8) {
+				set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0', false);
+			}
 		},
 		i: noop,
 		o: noop,
@@ -128,45 +137,185 @@ function create_fragment(ctx) {
 			if (if_block) {
 				if_block.d();
 			}
+
+			/*div_binding*/ ctx[15](null);
 		}
 	};
 }
 
+function isPointInPolygon(point, polygon) {
+	const x = point[0];
+	const y = point[1];
+	let inside = false;
+
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i][0];
+		const yi = polygon[i][1];
+		const xj = polygon[j][0];
+		const yj = polygon[j][1];
+		const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+		if (intersect) inside = !inside;
+	}
+
+	return inside;
+}
+
 function instance($$self, $$props, $$invalidate) {
+	let isLabelInRoom;
 	let userConfigElement;
+	let labelVisible;
+	let { pxmm } = $$props;
 	let { room } = $$props;
+	let { hoveredRoom } = $$props;
 	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
+
+	function isLabelInRoomCurry(room, labelElementSize) {
+		if (labelElementSize.width === 0 || labelElementSize.height === 0) return () => false;
+		const polygon = room.path.map(({ x, y }) => [x, y]);
+		const labelPosition = room.roomLabel.position;
+		const { x, y } = labelPosition;
+		const { width, height } = labelElementSize;
+		const halfWidth = width / 2;
+		const halfHeight = height / 2;
+
+		return function isLabelInRoom(pxmm) {
+			const clientX = x * pxmm;
+			const clientY = y * pxmm;
+			const clientPolygon = polygon.map(([x, y]) => [x * pxmm, y * pxmm]);
+
+			// const
+			/** 围成 labelRect 的四个点
+ * 1----0
+ * |    |
+ * 2----3
+ */
+			const labelRectClientPoints = [
+				[clientX + halfWidth, clientY - halfHeight],
+				[clientX - halfWidth, clientY - halfHeight],
+				[clientX - halfWidth, clientY + halfHeight],
+				[clientX + halfWidth, clientY + halfHeight]
+			];
+
+			return labelRectClientPoints.every(point => isPointInPolygon(point, clientPolygon));
+		};
+	}
 
+	// ========== 获取设备宽高像素 ==========
 	// TODO: 统一这里的判断条件，目前写了多处
 	const bodyWidth = document.body.clientWidth;
 
 	const bodyHeight = document.body.clientHeight;
 	const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
+
+	// ====================================
 	const roomLabel = room.roomLabel;
+
 	const left = roomLabel.positionInImage.x * 100 + '%';
 	const top = roomLabel.positionInImage.y * 100 + '%';
+
+	// 屏幕宽或高小于 500px 时，用 10px 字体，否则用 14px
 	const fontSize = (bodyWidth < 500 || bodyHeight < 500 ? 10 : 14) / 16 + 'rem';
 
+	let isHoverd = false;
+	let labelElement;
+	let labelElementSize;
+
+	hoveredRoom.subscribe(function onHoverdRoomUpdate(_room) {
+		$$invalidate(12, isHoverd = !!_room && _room.id === room.id);
+	});
+
+	onMount(() => {
+		// Label 能不能展示只跟房间大小有关
+		// 计算 LabelElement 宽高
+		const labelDomRect = labelElement === null || labelElement === void 0
+		? void 0
+		: labelElement.getClientRects()[0];
+
+		$$invalidate(13, labelElementSize = {
+			width: labelDomRect.width,
+			height: labelDomRect.height
+		});
+	});
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			labelElement = $$value;
+			$$invalidate(2, labelElement);
+		});
+	}
+
 	$$self.$$set = $$props => {
+		if ('pxmm' in $$props) $$invalidate(9, pxmm = $$props.pxmm);
 		if ('room' in $$props) $$invalidate(0, room = $$props.room);
+		if ('hoveredRoom' in $$props) $$invalidate(10, hoveredRoom = $$props.hoveredRoom);
 		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(11, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*labelElementSize, room*/ 8193) {
+			$: $$invalidate(14, isLabelInRoom = labelElementSize
+			? isLabelInRoomCurry(room, labelElementSize)
+			: undefined);
+		}
+
 		if ($$self.$$.dirty & /*getLabelElement, room*/ 3) {
-			$: $$invalidate(2, userConfigElement = getLabelElement === null || getLabelElement === void 0
+			$: $$invalidate(4, userConfigElement = getLabelElement === null || getLabelElement === void 0
 			? void 0
 			: getLabelElement(room));
 		}
+
+		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 23040) {
+			$: $$invalidate(3, labelVisible = adaptiveRoomLabelVisibleEnable
+			? isHoverd
+				? true
+				: !!(isLabelInRoom === null || isLabelInRoom === void 0
+					? void 0
+					: isLabelInRoom(pxmm))
+			: true);
+		}
 	};
 
-	return [room, getLabelElement, userConfigElement, roomSizeDes, left, top, fontSize];
+	return [
+		room,
+		getLabelElement,
+		labelElement,
+		labelVisible,
+		userConfigElement,
+		roomSizeDes,
+		left,
+		top,
+		fontSize,
+		pxmm,
+		hoveredRoom,
+		adaptiveRoomLabelVisibleEnable,
+		isHoverd,
+		labelElementSize,
+		isLabelInRoom,
+		div_binding
+	];
 }
 
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { room: 0, getLabelElement: 1 }, add_css);
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				pxmm: 9,
+				room: 0,
+				hoveredRoom: 10,
+				getLabelElement: 1,
+				adaptiveRoomLabelVisibleEnable: 11
+			},
+			add_css
+		);
 	}
 }
 

package/libs/floorplan/Components/RoomLabels/RoomLabels.js

@@ -1,6 +1,8 @@
 /* generated by Svelte v3.47.0 */
 import {
 	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
 	append_styles,
 	assign,
 	attr,
@@ -30,18 +32,19 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[4] = list[i];
+	child_ctx[9] = list[i];
 	return child_ctx;
 }
 
-// (8:0) {#if rooms}
+// (17:0) {#if rooms}
 function create_if_block(ctx) {
 	let div;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
+	let div_resize_listener;
 	let current;
-	let each_value = /*rooms*/ ctx[1];
-	const get_key = ctx => /*room*/ ctx[4].id;
+	let each_value = /*rooms*/ ctx[5];
+	const get_key = ctx => /*room*/ ctx[9].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -58,6 +61,7 @@ function create_if_block(ctx) {
 			}
 
 			attr(div, "class", "floorplan-plugin__room-labels svelte-447cof");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[8].call(div));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -66,11 +70,12 @@ function create_if_block(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[8].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*rooms, getLabelElement*/ 3) {
-				each_value = /*rooms*/ ctx[1];
+			if (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55) {
+				each_value = /*rooms*/ ctx[5];
 				group_outros();
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
 				check_outros();
@@ -98,11 +103,13 @@ function create_if_block(ctx) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].d();
 			}
+
+			div_resize_listener();
 		}
 	};
 }
 
-// (10:4) {#each rooms as room (room.id)}
+// (19:4) {#each rooms as room (room.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let roomlabel;
@@ -110,8 +117,11 @@ function create_each_block(key_1, ctx) {
 
 	const roomlabel_spread_levels = [
 		{
-			room: /*room*/ ctx[4],
-			getLabelElement: /*getLabelElement*/ ctx[0]
+			pxmm: /*pxmm*/ ctx[4],
+			room: /*room*/ ctx[9],
+			getLabelElement: /*getLabelElement*/ ctx[1],
+			hoveredRoom: /*hoveredRoom*/ ctx[0],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
 		}
 	];
 
@@ -139,11 +149,14 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const roomlabel_changes = (dirty & /*rooms, getLabelElement*/ 3)
+			const roomlabel_changes = (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55)
 			? get_spread_update(roomlabel_spread_levels, [
 					{
-						room: /*room*/ ctx[4],
-						getLabelElement: /*getLabelElement*/ ctx[0]
+						pxmm: /*pxmm*/ ctx[4],
+						room: /*room*/ ctx[9],
+						getLabelElement: /*getLabelElement*/ ctx[1],
+						hoveredRoom: /*hoveredRoom*/ ctx[0],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
 					}
 				])
 			: {};
@@ -169,7 +182,7 @@ function create_each_block(key_1, ctx) {
 function create_fragment(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*rooms*/ ctx[1] && create_if_block(ctx);
+	let if_block = /*rooms*/ ctx[5] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -182,11 +195,11 @@ function create_fragment(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*rooms*/ ctx[1]) {
+			if (/*rooms*/ ctx[5]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*rooms*/ 2) {
+					if (dirty & /*rooms*/ 32) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -225,21 +238,50 @@ function instance($$self, $$props, $$invalidate) {
 	let rooms;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
+	let { hoveredRoom } = $$props;
 	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
+	let clientWidth = 0;
+	let pxmm = 0;
+
+	function div_elementresize_handler() {
+		clientWidth = this.clientWidth;
+		$$invalidate(3, clientWidth);
+	}
 
 	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
-		if ('getLabelElement' in $$props) $$invalidate(0, getLabelElement = $$props.getLabelElement);
+		if ('floorIndex' in $$props) $$invalidate(6, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(7, floorplanData = $$props.floorplanData);
+		if ('hoveredRoom' in $$props) $$invalidate(0, hoveredRoom = $$props.hoveredRoom);
+		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(2, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
-			$: $$invalidate(1, rooms = floorplanData.floorDatas[floorIndex].rooms);
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 192) {
+			$: $$invalidate(5, rooms = floorplanData.floorDatas[floorIndex].rooms);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, clientWidth*/ 136) {
+			$: {
+				const { max, min } = floorplanData.bounding;
+				const boundingWidth = max.x - min.x;
+				$$invalidate(4, pxmm = clientWidth / boundingWidth);
+			}
 		}
 	};
 
-	return [getLabelElement, rooms, floorIndex, floorplanData];
+	return [
+		hoveredRoom,
+		getLabelElement,
+		adaptiveRoomLabelVisibleEnable,
+		clientWidth,
+		pxmm,
+		rooms,
+		floorIndex,
+		floorplanData,
+		div_elementresize_handler
+	];
 }
 
 class Component extends SvelteComponent {
@@ -253,9 +295,11 @@ class Component extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				floorIndex: 2,
-				floorplanData: 3,
-				getLabelElement: 0
+				floorIndex: 6,
+				floorplanData: 7,
+				hoveredRoom: 0,
+				getLabelElement: 1,
+				adaptiveRoomLabelVisibleEnable: 2
 			},
 			add_css
 		);

package/libs/floorplan/Components/RoomMaterials/RoomMaterial_1.js

@@ -46,6 +46,7 @@ function create_fragment(ctx) {
 			attr(pattern, "width", /*width*/ ctx[1]);
 			attr(pattern, "height", /*width*/ ctx[1]);
 			attr(pattern, "patternUnits", "userSpaceOnUse");
+			attr(pattern, "patternTransform", "scale(50 50)");
 			attr(path1, "d", /*d*/ ctx[0]);
 			attr(path1, "fill", "url(#fpm-room-pattern-0)");
 		},