@realsee/dnalogel 2.0.1 → 2.0.2

package/dist/index.es.js

@@ -1654,7 +1654,7 @@ function add_css$j(target) {
 	append_styles(target, "svelte-12pzct5", ".floorplan-plugin__room-label-item.svelte-12pzct5{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-12pzct5{opacity:0.45}");
 }
 
-// (95:30) 
+// (96:30) 
 function create_if_block_1$5(ctx) {
 	let html_tag;
 	let raw_value = /*userConfigElement*/ ctx[4].outerHTML + "";
@@ -1680,13 +1680,14 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (89:2) {#if getLabelElement === undefined}
+// (90:2) {#if getLabelElement === undefined}
 function create_if_block$9(ctx) {
 	let span0;
 	let t0_value = /*room*/ ctx[0].name + "";
 	let t0;
 	let t1;
 	let span1;
+	let t2;
 
 	return {
 		c() {
@@ -1694,7 +1695,7 @@ function create_if_block$9(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			span1 = element("span");
-			span1.textContent = `${/*roomSizeDes*/ ctx[5]}`;
+			t2 = text(/*roomSizeDes*/ ctx[5]);
 			attr(span0, "class", "floorplan-plugin__room-name");
 			attr(span1, "class", "floorplan-plugin__room-size svelte-12pzct5");
 		},
@@ -1703,9 +1704,11 @@ function create_if_block$9(ctx) {
 			append(span0, t0);
 			insert(target, t1, anchor);
 			insert(target, span1, anchor);
+			append(span1, t2);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*room*/ 1 && t0_value !== (t0_value = /*room*/ ctx[0].name + "")) set_data(t0, t0_value);
+			if (dirty & /*roomSizeDes*/ 32) set_data(t2, /*roomSizeDes*/ ctx[5]);
 		},
 		d(detaching) {
 			if (detaching) detach(span0);
@@ -1739,7 +1742,7 @@ function create_fragment$o(ctx) {
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if (if_block) if_block.m(div, null);
-			/*div_binding*/ ctx[15](div);
+			/*div_binding*/ ctx[16](div);
 		},
 		p(ctx, [dirty]) {
 			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
@@ -1767,7 +1770,7 @@ function create_fragment$o(ctx) {
 				if_block.d();
 			}
 
-			/*div_binding*/ ctx[15](null);
+			/*div_binding*/ ctx[16](null);
 		}
 	};
 }
@@ -1790,12 +1793,14 @@ function isPointInPolygon(point, polygon) {
 }
 
 function instance$o($$self, $$props, $$invalidate) {
+	let roomSizeDes;
 	let isLabelInRoom;
 	let userConfigElement;
 	let labelVisible;
 	let { pxmm } = $$props;
 	let { room } = $$props;
 	let { hoveredRoom } = $$props;
+	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
@@ -1835,7 +1840,6 @@ function instance$o($$self, $$props, $$invalidate) {
 	const bodyWidth = document.body.clientWidth;
 
 	const bodyHeight = document.body.clientHeight;
-	const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
 
 	// ====================================
 	const roomLabel = room.roomLabel;
@@ -1851,7 +1855,7 @@ function instance$o($$self, $$props, $$invalidate) {
 	let labelElementSize;
 
 	hoveredRoom.subscribe(function onHoverdRoomUpdate(_room) {
-		$$invalidate(12, isHoverd = !!_room && _room.id === room.id);
+		$$invalidate(13, isHoverd = !!_room && _room.id === room.id);
 	});
 
 	onMount(() => {
@@ -1861,7 +1865,7 @@ function instance$o($$self, $$props, $$invalidate) {
 		? void 0
 		: labelElement.getClientRects()[0];
 
-		$$invalidate(13, labelElementSize = {
+		$$invalidate(14, labelElementSize = {
 			width: labelDomRect.width,
 			height: labelDomRect.height
 		});
@@ -1878,13 +1882,18 @@ function instance$o($$self, $$props, $$invalidate) {
 		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 ('getRoomAreaText' in $$props) $$invalidate(11, getRoomAreaText = $$props.getRoomAreaText);
 		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
-		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(11, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(12, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*labelElementSize, room*/ 8193) {
-			$$invalidate(14, isLabelInRoom = labelElementSize
+		if ($$self.$$.dirty & /*room, getRoomAreaText*/ 2049) {
+			$$invalidate(5, roomSizeDes = room.size ? getRoomAreaText(room.size) : '');
+		}
+
+		if ($$self.$$.dirty & /*labelElementSize, room*/ 16385) {
+			$$invalidate(15, isLabelInRoom = labelElementSize
 			? isLabelInRoomCurry(room, labelElementSize)
 			: undefined);
 		}
@@ -1895,7 +1904,7 @@ function instance$o($$self, $$props, $$invalidate) {
 			: getLabelElement(room));
 		}
 
-		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 23040) {
+		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 45568) {
 			$$invalidate(3, labelVisible = adaptiveRoomLabelVisibleEnable
 			? isHoverd
 				? true
@@ -1918,6 +1927,7 @@ function instance$o($$self, $$props, $$invalidate) {
 		fontSize,
 		pxmm,
 		hoveredRoom,
+		getRoomAreaText,
 		adaptiveRoomLabelVisibleEnable,
 		isHoverd,
 		labelElementSize,
@@ -1940,8 +1950,9 @@ class RoomLabel extends SvelteComponent {
 				pxmm: 9,
 				room: 0,
 				hoveredRoom: 10,
+				getRoomAreaText: 11,
 				getLabelElement: 1,
-				adaptiveRoomLabelVisibleEnable: 11
+				adaptiveRoomLabelVisibleEnable: 12
 			},
 			add_css$j
 		);
@@ -1956,19 +1967,19 @@ function add_css$i(target) {
 
 function get_each_context$b(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[10] = list[i];
 	return child_ctx;
 }
 
-// (17:0) {#if rooms}
+// (18:0) {#if rooms}
 function create_if_block$8(ctx) {
 	let div;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let div_resize_listener;
 	let current;
-	let each_value = /*rooms*/ ctx[5];
-	const get_key = ctx => /*room*/ ctx[9].id;
+	let each_value = /*rooms*/ ctx[6];
+	const get_key = ctx => /*room*/ ctx[10].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$b(ctx, each_value, i);
@@ -1985,7 +1996,7 @@ function create_if_block$8(ctx) {
 			}
 
 			attr(div, "class", "floorplan-plugin__room-labels svelte-13xux0b");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[8].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -1994,12 +2005,12 @@ function create_if_block$8(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[8].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55) {
-				each_value = /*rooms*/ ctx[5];
+			if (dirty & /*pxmm, rooms, getLabelElement, getRoomAreaText, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 111) {
+				each_value = /*rooms*/ ctx[6];
 				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$b, null, get_each_context$b);
 				check_outros();
@@ -2033,7 +2044,7 @@ function create_if_block$8(ctx) {
 	};
 }
 
-// (19:4) {#each rooms as room (room.id)}
+// (20:4) {#each rooms as room (room.id)}
 function create_each_block$b(key_1, ctx) {
 	let first;
 	let roomlabel;
@@ -2041,11 +2052,12 @@ function create_each_block$b(key_1, ctx) {
 
 	const roomlabel_spread_levels = [
 		{
-			pxmm: /*pxmm*/ ctx[4],
-			room: /*room*/ ctx[9],
-			getLabelElement: /*getLabelElement*/ ctx[1],
+			pxmm: /*pxmm*/ ctx[5],
+			room: /*room*/ ctx[10],
+			getLabelElement: /*getLabelElement*/ ctx[2],
+			getRoomAreaText: /*getRoomAreaText*/ ctx[1],
 			hoveredRoom: /*hoveredRoom*/ ctx[0],
-			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[3]
 		}
 	];
 
@@ -2073,14 +2085,15 @@ function create_each_block$b(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const roomlabel_changes = (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55)
+			const roomlabel_changes = (dirty & /*pxmm, rooms, getLabelElement, getRoomAreaText, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 111)
 			? get_spread_update(roomlabel_spread_levels, [
 					{
-						pxmm: /*pxmm*/ ctx[4],
-						room: /*room*/ ctx[9],
-						getLabelElement: /*getLabelElement*/ ctx[1],
+						pxmm: /*pxmm*/ ctx[5],
+						room: /*room*/ ctx[10],
+						getLabelElement: /*getLabelElement*/ ctx[2],
+						getRoomAreaText: /*getRoomAreaText*/ ctx[1],
 						hoveredRoom: /*hoveredRoom*/ ctx[0],
-						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[3]
 					}
 				])
 			: {};
@@ -2106,7 +2119,7 @@ function create_each_block$b(key_1, ctx) {
 function create_fragment$n(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*rooms*/ ctx[5] && create_if_block$8(ctx);
+	let if_block = /*rooms*/ ctx[6] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -2119,11 +2132,11 @@ function create_fragment$n(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*rooms*/ ctx[5]) {
+			if (/*rooms*/ ctx[6]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*rooms*/ 32) {
+					if (dirty & /*rooms*/ 64) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -2163,6 +2176,7 @@ function instance$n($$self, $$props, $$invalidate) {
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
 	let { hoveredRoom } = $$props;
+	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 	let clientWidth = 0;
@@ -2170,33 +2184,35 @@ function instance$n($$self, $$props, $$invalidate) {
 
 	function div_elementresize_handler() {
 		clientWidth = this.clientWidth;
-		$$invalidate(3, clientWidth);
+		$$invalidate(4, clientWidth);
 	}
 
 	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(6, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(7, floorplanData = $$props.floorplanData);
+		if ('floorIndex' in $$props) $$invalidate(7, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(8, 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);
+		if ('getRoomAreaText' in $$props) $$invalidate(1, getRoomAreaText = $$props.getRoomAreaText);
+		if ('getLabelElement' in $$props) $$invalidate(2, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(3, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 192) {
-			$$invalidate(5, rooms = floorplanData.floorDatas[floorIndex].rooms);
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 384) {
+			$$invalidate(6, rooms = floorplanData.floorDatas[floorIndex].rooms);
 		}
 
-		if ($$self.$$.dirty & /*floorplanData, clientWidth*/ 136) {
+		if ($$self.$$.dirty & /*floorplanData, clientWidth*/ 272) {
 			{
 				const { max, min } = floorplanData.bounding;
 				const boundingWidth = max.x - min.x;
-				$$invalidate(4, pxmm = clientWidth / boundingWidth);
+				$$invalidate(5, pxmm = clientWidth / boundingWidth);
 			}
 		}
 	};
 
 	return [
 		hoveredRoom,
+		getRoomAreaText,
 		getLabelElement,
 		adaptiveRoomLabelVisibleEnable,
 		clientWidth,
@@ -2219,11 +2235,12 @@ class RoomLabels extends SvelteComponent {
 			create_fragment$n,
 			safe_not_equal,
 			{
-				floorIndex: 6,
-				floorplanData: 7,
+				floorIndex: 7,
+				floorplanData: 8,
 				hoveredRoom: 0,
-				getLabelElement: 1,
-				adaptiveRoomLabelVisibleEnable: 2
+				getRoomAreaText: 1,
+				getLabelElement: 2,
+				adaptiveRoomLabelVisibleEnable: 3
 			},
 			add_css$i
 		);
@@ -2238,18 +2255,18 @@ function add_css$h(target) {
 
 function get_each_context$a(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
-	child_ctx[12] = i;
+	child_ctx[11] = list[i];
+	child_ctx[13] = i;
 	return child_ctx;
 }
 
 function get_each_context_1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i];
+	child_ctx[14] = list[i];
 	return child_ctx;
 }
 
-// (47:4) {#each rulerLabels as rulerLabel}
+// (48:4) {#each rulerLabels as rulerLabel}
 function create_each_block_1(ctx) {
 	let div;
 
@@ -2257,8 +2274,8 @@ function create_each_block_1(ctx) {
 		c() {
 			div = element("div");
 			attr(div, "class", "floorplan-plugin__rule-scale svelte-xt7p1v");
-			set_style(div, "left", /*rulerLabel*/ ctx[13].left * 100 + '%', false);
-			set_style(div, "bottom", /*rulerLabel*/ ctx[13].bottom * 100 + '%', false);
+			set_style(div, "left", /*rulerLabel*/ ctx[14].left * 100 + '%', false);
+			set_style(div, "bottom", /*rulerLabel*/ ctx[14].bottom * 100 + '%', false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2270,11 +2287,11 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (56:4) {#each rulerTexts as textItem, textItemIndex (textItemIndex)}
+// (57:4) {#each rulerTexts as textItem, textItemIndex (textItemIndex)}
 function create_each_block$a(key_1, ctx) {
 	let div1;
 	let div0;
-	let t0_value = /*textItem*/ ctx[10].distance + "";
+	let t0_value = /*getRuleDistanceText*/ ctx[1](/*textItem*/ ctx[11].distance) + "";
 	let t0;
 	let t1;
 
@@ -2287,10 +2304,10 @@ function create_each_block$a(key_1, ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			attr(div0, "class", "floorplan-plugin__rule-text svelte-xt7p1v");
-			toggle_class(div0, "is-row", /*isRow*/ ctx[1]);
+			toggle_class(div0, "is-row", /*isRow*/ ctx[2]);
 			attr(div1, "class", "floorplan-plugin__rule-text-item svelte-xt7p1v");
-			set_style(div1, "left", /*textItem*/ ctx[10].left * 100 + '%', false);
-			set_style(div1, "bottom", /*textItem*/ ctx[10].bottom * 100 + '%', false);
+			set_style(div1, "left", /*textItem*/ ctx[11].left * 100 + '%', false);
+			set_style(div1, "bottom", /*textItem*/ ctx[11].bottom * 100 + '%', false);
 			this.first = div1;
 		},
 		m(target, anchor) {
@@ -2301,6 +2318,7 @@ function create_each_block$a(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
+			if (dirty & /*getRuleDistanceText*/ 2 && t0_value !== (t0_value = /*getRuleDistanceText*/ ctx[1](/*textItem*/ ctx[11].distance) + "")) set_data(t0, t0_value);
 		},
 		d(detaching) {
 			if (detaching) detach(div1);
@@ -2318,15 +2336,15 @@ function create_fragment$m(ctx) {
 	let each_blocks = [];
 	let each1_lookup = new Map();
 	let div3_class_value;
-	let each_value_1 = /*rulerLabels*/ ctx[2];
+	let each_value_1 = /*rulerLabels*/ ctx[3];
 	let each_blocks_1 = [];
 
 	for (let i = 0; i < each_value_1.length; i += 1) {
 		each_blocks_1[i] = create_each_block_1(get_each_context_1(ctx, each_value_1, i));
 	}
 
-	let each_value = /*rulerTexts*/ ctx[3];
-	const get_key = ctx => /*textItemIndex*/ ctx[12];
+	let each_value = /*rulerTexts*/ ctx[4];
+	const get_key = ctx => /*textItemIndex*/ ctx[13];
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$a(ctx, each_value, i);
@@ -2354,12 +2372,12 @@ function create_fragment$m(ctx) {
 
 			attr(div0, "class", "floorplan-plugin__rule-line svelte-xt7p1v");
 			attr(div1, "class", "floorplan-plugin__rule-scale-wrapper svelte-xt7p1v");
-			toggle_class(div1, "is-row", /*isRow*/ ctx[1]);
+			toggle_class(div1, "is-row", /*isRow*/ ctx[2]);
 			attr(div2, "class", "floorplan-plugin__rule-text-wrapper svelte-xt7p1v");
 			attr(div3, "class", div3_class_value = "floorplan-plugin__rule-labels floorplan-plugin__rule-labels--" + /*type*/ ctx[0] + " svelte-xt7p1v");
-			toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
-			set_style(div3, "width", /*isRow*/ ctx[1] ? '100%' : 1 / 16 + 'rem', false);
-			set_style(div3, "height", !/*isRow*/ ctx[1] ? '100%' : 1 / 16 + 'rem', false);
+			toggle_class(div3, "is-row", /*isRow*/ ctx[2]);
+			set_style(div3, "width", /*isRow*/ ctx[2] ? '100%' : 1 / 16 + 'rem', false);
+			set_style(div3, "height", !/*isRow*/ ctx[2] ? '100%' : 1 / 16 + 'rem', false);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -2379,8 +2397,8 @@ function create_fragment$m(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*rulerLabels*/ 4) {
-				each_value_1 = /*rulerLabels*/ ctx[2];
+			if (dirty & /*rulerLabels*/ 8) {
+				each_value_1 = /*rulerLabels*/ ctx[3];
 				let i;
 
 				for (i = 0; i < each_value_1.length; i += 1) {
@@ -2402,8 +2420,8 @@ function create_fragment$m(ctx) {
 				each_blocks_1.length = each_value_1.length;
 			}
 
-			if (dirty & /*rulerTexts, isRow*/ 10) {
-				each_value = /*rulerTexts*/ ctx[3];
+			if (dirty & /*rulerTexts, isRow, getRuleDistanceText*/ 22) {
+				each_value = /*rulerTexts*/ ctx[4];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each1_lookup, div2, destroy_block, create_each_block$a, null, get_each_context$a);
 			}
 
@@ -2411,8 +2429,8 @@ function create_fragment$m(ctx) {
 				attr(div3, "class", div3_class_value);
 			}
 
-			if (dirty & /*type, isRow*/ 3) {
-				toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
+			if (dirty & /*type, isRow*/ 5) {
+				toggle_class(div3, "is-row", /*isRow*/ ctx[2]);
 			}
 		},
 		i: noop$1,
@@ -2435,6 +2453,7 @@ function instance$m($$self, $$props, $$invalidate) {
 	let { type } = $$props;
 	let { data } = $$props;
 	let { bounding } = $$props;
+	let { getRuleDistanceText } = $$props;
 	const isRow = type === 'top' || type === 'bottom';
 	const contentWidth = bounding.max.x - bounding.min.x - (padding$1 - exteriorWallOffset$1) * 2;
 	const contentHeight = bounding.max.y - bounding.min.y - (padding$1 - exteriorWallOffset$1) * 2;
@@ -2480,17 +2499,32 @@ function instance$m($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('data' in $$props) $$invalidate(4, data = $$props.data);
-		if ('bounding' in $$props) $$invalidate(5, bounding = $$props.bounding);
+		if ('data' in $$props) $$invalidate(5, data = $$props.data);
+		if ('bounding' in $$props) $$invalidate(6, bounding = $$props.bounding);
+		if ('getRuleDistanceText' in $$props) $$invalidate(1, getRuleDistanceText = $$props.getRuleDistanceText);
 	};
 
-	return [type, isRow, rulerLabels, rulerTexts, data, bounding];
+	return [type, getRuleDistanceText, isRow, rulerLabels, rulerTexts, data, bounding];
 }
 
 class RuleItem extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$m, create_fragment$m, safe_not_equal, { type: 0, data: 4, bounding: 5 }, add_css$h);
+
+		init(
+			this,
+			options,
+			instance$m,
+			create_fragment$m,
+			safe_not_equal,
+			{
+				type: 0,
+				data: 5,
+				bounding: 6,
+				getRuleDistanceText: 1
+			},
+			add_css$h
+		);
 	}
 }
 
@@ -2502,12 +2536,12 @@ function add_css$g(target) {
 
 function get_each_context$9(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[12] = list[i][0];
-	child_ctx[13] = list[i][1];
+	child_ctx[13] = list[i][0];
+	child_ctx[14] = list[i][1];
 	return child_ctx;
 }
 
-// (19:2) {#each ruleLabelArray as [type, data] (type)}
+// (20:2) {#each ruleLabelArray as [type, data] (type)}
 function create_each_block$9(key_1, ctx) {
 	let first;
 	let ruleitem;
@@ -2515,9 +2549,10 @@ function create_each_block$9(key_1, ctx) {
 
 	const ruleitem_spread_levels = [
 		{
-			type: /*type*/ ctx[12],
-			data: /*data*/ ctx[13],
-			bounding: /*bounding*/ ctx[0]
+			type: /*type*/ ctx[13],
+			data: /*data*/ ctx[14],
+			bounding: /*bounding*/ ctx[1],
+			getRuleDistanceText: /*getRuleDistanceText*/ ctx[0]
 		}
 	];
 
@@ -2545,12 +2580,13 @@ function create_each_block$9(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding*/ 9)
+			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding, getRuleDistanceText*/ 19)
 			? get_spread_update(ruleitem_spread_levels, [
 					{
-						type: /*type*/ ctx[12],
-						data: /*data*/ ctx[13],
-						bounding: /*bounding*/ ctx[0]
+						type: /*type*/ ctx[13],
+						data: /*data*/ ctx[14],
+						bounding: /*bounding*/ ctx[1],
+						getRuleDistanceText: /*getRuleDistanceText*/ ctx[0]
 					}
 				])
 			: {};
@@ -2578,8 +2614,8 @@ function create_fragment$l(ctx) {
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let current;
-	let each_value = /*ruleLabelArray*/ ctx[3];
-	const get_key = ctx => /*type*/ ctx[12];
+	let each_value = /*ruleLabelArray*/ ctx[4];
+	const get_key = ctx => /*type*/ ctx[13];
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$9(ctx, each_value, i);
@@ -2596,8 +2632,8 @@ function create_fragment$l(ctx) {
 			}
 
 			attr(div, "class", "floorplan-plugin__rule-labels-wrapper svelte-1mzj9p3");
-			set_style(div, "width", /*width*/ ctx[2], false);
-			set_style(div, "height", /*height*/ ctx[1], false);
+			set_style(div, "width", /*width*/ ctx[3], false);
+			set_style(div, "height", /*height*/ ctx[2], false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2609,19 +2645,19 @@ function create_fragment$l(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*ruleLabelArray, bounding*/ 9) {
-				each_value = /*ruleLabelArray*/ ctx[3];
+			if (dirty & /*ruleLabelArray, bounding, getRuleDistanceText*/ 19) {
+				each_value = /*ruleLabelArray*/ ctx[4];
 				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$9, null, get_each_context$9);
 				check_outros();
 			}
 
-			if (dirty & /*width*/ 4) {
-				set_style(div, "width", /*width*/ ctx[2], false);
+			if (dirty & /*width*/ 8) {
+				set_style(div, "width", /*width*/ ctx[3], false);
 			}
 
-			if (dirty & /*height*/ 2) {
-				set_style(div, "height", /*height*/ ctx[1], false);
+			if (dirty & /*height*/ 4) {
+				set_style(div, "height", /*height*/ ctx[2], false);
 			}
 		},
 		i(local) {
@@ -2666,55 +2702,58 @@ function instance$l($$self, $$props, $$invalidate) {
 	let height;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
+	let { getRuleDistanceText } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(4, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
+		if ('floorIndex' in $$props) $$invalidate(5, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(6, floorplanData = $$props.floorplanData);
+		if ('getRuleDistanceText' in $$props) $$invalidate(0, getRuleDistanceText = $$props.getRuleDistanceText);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData*/ 32) {
-			$$invalidate(0, bounding = floorplanData.bounding);
+		if ($$self.$$.dirty & /*floorplanData*/ 64) {
+			$$invalidate(1, bounding = floorplanData.bounding);
 		}
 
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 48) {
-			$$invalidate(10, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 96) {
+			$$invalidate(11, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
 		}
 
-		if ($$self.$$.dirty & /*ruleLabelData*/ 1024) {
-			$$invalidate(11, ruleLabelDataKeys = Object.keys(ruleLabelData));
+		if ($$self.$$.dirty & /*ruleLabelData*/ 2048) {
+			$$invalidate(12, ruleLabelDataKeys = Object.keys(ruleLabelData));
 		}
 
-		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 3072) {
-			$$invalidate(3, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
+		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 6144) {
+			$$invalidate(4, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 1) {
-			$$invalidate(8, boundingWidth = bounding.max.x - bounding.min.x);
+		if ($$self.$$.dirty & /*bounding*/ 2) {
+			$$invalidate(9, boundingWidth = bounding.max.x - bounding.min.x);
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 1) {
-			$$invalidate(6, boundingHeight = bounding.max.y - bounding.min.y);
+		if ($$self.$$.dirty & /*bounding*/ 2) {
+			$$invalidate(7, boundingHeight = bounding.max.y - bounding.min.y);
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 1) {
-			$$invalidate(9, contentWidth = bounding.max.x - bounding.min.x - (padding - exteriorWallOffset) * 2);
+		if ($$self.$$.dirty & /*bounding*/ 2) {
+			$$invalidate(10, contentWidth = bounding.max.x - bounding.min.x - (padding - exteriorWallOffset) * 2);
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 1) {
-			$$invalidate(7, contentHeight = bounding.max.y - bounding.min.y - (padding - exteriorWallOffset) * 2);
+		if ($$self.$$.dirty & /*bounding*/ 2) {
+			$$invalidate(8, contentHeight = bounding.max.y - bounding.min.y - (padding - exteriorWallOffset) * 2);
 		}
 
-		if ($$self.$$.dirty & /*contentWidth, boundingWidth*/ 768) {
-			$$invalidate(2, width = contentWidth / boundingWidth * 100 + '%');
+		if ($$self.$$.dirty & /*contentWidth, boundingWidth*/ 1536) {
+			$$invalidate(3, width = contentWidth / boundingWidth * 100 + '%');
 		}
 
-		if ($$self.$$.dirty & /*contentHeight, boundingHeight*/ 192) {
-			$$invalidate(1, height = contentHeight / boundingHeight * 100 + '%');
+		if ($$self.$$.dirty & /*contentHeight, boundingHeight*/ 384) {
+			$$invalidate(2, height = contentHeight / boundingHeight * 100 + '%');
 		}
 	};
 
 	return [
+		getRuleDistanceText,
 		bounding,
 		height,
 		width,
@@ -2733,7 +2772,20 @@ function instance$l($$self, $$props, $$invalidate) {
 class RuleLabels extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$l, create_fragment$l, safe_not_equal, { floorIndex: 4, floorplanData: 5 }, add_css$g);
+
+		init(
+			this,
+			options,
+			instance$l,
+			create_fragment$l,
+			safe_not_equal,
+			{
+				floorIndex: 5,
+				floorplanData: 6,
+				getRuleDistanceText: 0
+			},
+			add_css$g
+		);
 	}
 }
 
@@ -3644,7 +3696,7 @@ function add_css$c(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;
@@ -3653,7 +3705,7 @@ function create_if_block_2(ctx) {
 		{
 			floorIndex: /*floorIndex*/ ctx[1],
 			floorplanData: /*floorplanData*/ ctx[5],
-			hoveredRoom: /*hoveredRoom*/ ctx[8]
+			hoveredRoom: /*hoveredRoom*/ ctx[10]
 		}
 	];
 
@@ -3674,12 +3726,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]
 					}
 				])
 			: {};
@@ -3701,7 +3753,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (24:2) {#if roomLabelsEnable}
+// (26:2) {#if roomLabelsEnable}
 function create_if_block_1$3(ctx) {
 	let roomlabels;
 	let current;
@@ -3710,9 +3762,10 @@ function create_if_block_1$3(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]
 		}
 	];
 
@@ -3733,14 +3786,15 @@ function create_if_block_1$3(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]
 					}
 				])
 			: {};
@@ -3762,7 +3816,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (27:2) {#if ruleLabelsEnable}
+// (38:2) {#if ruleLabelsEnable}
 function create_if_block$6(ctx) {
 	let rulelabels;
 	let current;
@@ -3770,7 +3824,8 @@ function create_if_block$6(ctx) {
 	const rulelabels_spread_levels = [
 		{
 			floorplanData: /*floorplanData*/ ctx[5],
-			floorIndex: /*floorIndex*/ ctx[1]
+			floorIndex: /*floorIndex*/ ctx[1],
+			getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
 		}
 	];
 
@@ -3791,11 +3846,12 @@ function create_if_block$6(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]
 					}
 				])
 			: {};
@@ -4024,7 +4080,9 @@ function instance$e($$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);
 
@@ -4035,8 +4093,10 @@ function instance$e($$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 [
@@ -4046,7 +4106,9 @@ function instance$e($$self, $$props, $$invalidate) {
 		roomLabelsEnable,
 		ruleLabelsEnable,
 		floorplanData,
+		getRoomAreaText,
 		getLabelElement,
+		getRuleDistanceText,
 		adaptiveRoomLabelVisibleEnable,
 		hoveredRoom
 	];
@@ -4069,8 +4131,10 @@ class CurrentFloor$1 extends SvelteComponent {
 				roomLabelsEnable: 3,
 				ruleLabelsEnable: 4,
 				floorplanData: 5,
-				getLabelElement: 6,
-				adaptiveRoomLabelVisibleEnable: 7
+				getRoomAreaText: 6,
+				getLabelElement: 7,
+				getRuleDistanceText: 8,
+				adaptiveRoomLabelVisibleEnable: 9
 			},
 			add_css$c
 		);
@@ -4085,11 +4149,11 @@ function add_css$b(target) {
 
 function get_each_context$6(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$5(ctx) {
 	let div;
 	let t0;
@@ -4156,7 +4220,7 @@ function create_if_block$5(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;
 
@@ -4262,7 +4326,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (24:4) {#each floorplanData.floorDatas as floorData}
+// (26:4) {#each floorplanData.floorDatas as floorData}
 function create_each_block$6(ctx) {
 	let currentfloor;
 	let current;
@@ -4271,16 +4335,18 @@ function create_each_block$6(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]
 		}
 	];
 
@@ -4301,21 +4367,23 @@ function create_each_block$6(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]
 					}
 				])
 			: {};
@@ -4337,7 +4405,7 @@ function create_each_block$6(ctx) {
 	};
 }
 
-// (39:4) {#if compassEnable}
+// (43:4) {#if compassEnable}
 function create_if_block_1$2(ctx) {
 	let compass;
 	let current;
@@ -4446,7 +4514,9 @@ function instance$d($$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 => {
@@ -4462,8 +4532,10 @@ function instance$d($$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 [
@@ -4479,7 +4551,9 @@ function instance$d($$self, $$props, $$invalidate) {
 		floorplanData,
 		lastPanoramaLongitude,
 		cameraImageUrl,
+		getRoomAreaText,
 		getLabelElement,
+		getRuleDistanceText,
 		adaptiveRoomLabelVisibleEnable
 	];
 }
@@ -4507,8 +4581,10 @@ class Main$1 extends SvelteComponent {
 				floorplanData: 9,
 				lastPanoramaLongitude: 10,
 				cameraImageUrl: 11,
-				getLabelElement: 12,
-				adaptiveRoomLabelVisibleEnable: 13
+				getRoomAreaText: 12,
+				getLabelElement: 13,
+				getRuleDistanceText: 14,
+				adaptiveRoomLabelVisibleEnable: 15
 			},
 			add_css$b
 		);
@@ -5372,10 +5448,12 @@ class Controller$5 extends Controller$6 {
             autoShowEnable: true,
             ruleLabelsEnable: true,
             roomLabelsEnable: true,
+            adaptiveRoomLabelVisibleEnable: true,
             cameraImageUrl: CAMERA_IMAGE,
             attachedTo: FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
             getLabelElement: undefined,
-            adaptiveRoomLabelVisibleEnable: true,
+            getRoomAreaText: (size) => (size / 1000000).toFixed(1) + '㎡',
+            getRuleDistanceText: (distance) => distance.toString()
         };
         const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
         const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
@@ -5448,12 +5526,10 @@ class Controller$5 extends Controller$6 {
             const options = { userAction };
             state.visible ? this._show(options) : this._hide(options);
         }
+        this.render();
     }
-    changeConfigs(_config, userAction = true) {
-        const config = Object.assign(Object.assign({}, this.state.config), _config);
+    changeConfigs(config, userAction = true) {
         this.updateState({ config }, userAction);
-        if (!this.container)
-            return;
         this.render();
     }
     async formatData(serverData) {
@@ -5461,7 +5537,8 @@ class Controller$5 extends Controller$6 {
     }
     updateState(state, userAction) {
         const prevState = this.state;
-        this.state = Object.assign(Object.assign({}, this.state), state);
+        const config = state.config ? Object.assign(Object.assign({}, prevState.config), state.config) : prevState.config;
+        this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), { config });
         if (equal(this.state, prevState, { deep: true }))
             return;
         this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
@@ -6048,6 +6125,8 @@ class Controller$4 extends Controller$6 {
             attachedTo: FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
             getLabelElement: undefined,
             adaptiveRoomLabelVisibleEnable: true,
+            getRoomAreaText: (size) => (size / 1000000).toFixed(1) + '㎡',
+            getRuleDistanceText: (distance) => distance.toString()
         };
         const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
         const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
@@ -6121,6 +6200,10 @@ class Controller$4 extends Controller$6 {
             state.visible ? this._show(options) : this._hide(options);
         }
     }
+    changeConfigs(config, userAction = true) {
+        this.updateState({ config }, userAction);
+        this.render();
+    }
     /** 更新户型图位置 */
     updatePosition() {
         var _a;
@@ -6139,7 +6222,8 @@ class Controller$4 extends Controller$6 {
     }
     updateState(state, userAction) {
         const prevState = this.state;
-        this.state = Object.assign(Object.assign({}, this.state), state);
+        const config = state.config ? Object.assign(Object.assign({}, prevState.config), state.config) : prevState.config;
+        this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), { config });
         if (equal(this.state, prevState, { deep: true }))
             return;
         this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
@@ -6476,6 +6560,8 @@ class Controller$3 extends Controller$6 {
             attachedTo: FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
             getLabelElement: undefined,
             adaptiveRoomLabelVisibleEnable: true,
+            getRoomAreaText: (size) => (size / 1000000).toFixed(1) + '㎡',
+            getRuleDistanceText: (distance) => distance.toString()
         };
         const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
         const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
@@ -6577,6 +6663,10 @@ class Controller$3 extends Controller$6 {
             state.visible ? this._show(options) : this._hide(options);
         }
     }
+    changeConfigs(config, userAction = true) {
+        this.updateState({ config }, userAction);
+        this.render();
+    }
     async formatData(serverData) {
         return await formatData(serverData.data);
     }
@@ -6585,7 +6675,7 @@ class Controller$3 extends Controller$6 {
             return;
         this.isHiddenByHideFunc = false;
         const { userAction } = options;
-        this.hooks.emit('show', { userAction });
+        this.hooks.emit('show', { userAction, auto: false });
         if (this.five.getCurrentState().mode !== 'Topview') {
             await changeMode(this.five, ['Topview', undefined, undefined, userAction]);
         }
@@ -6595,14 +6685,14 @@ class Controller$3 extends Controller$6 {
         const renderDuration = 500;
         const modelOpacity = this.state.config.modelOpacity;
         changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-        this.hooks.emit('showAnimationEnded', { userAction });
+        this.hooks.emit('showAnimationEnded', { userAction, auto: false });
         this.render();
     }
     async _hide(options) {
         if (!this.state.enabled)
             return;
         const { userAction } = options;
-        this.hooks.emit('hide', { userAction });
+        this.hooks.emit('hide', { userAction, auto: false });
         const modelOpacity = 1;
         const renderDuration = 0;
         changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
@@ -6619,7 +6709,8 @@ class Controller$3 extends Controller$6 {
     }
     updateState(state, userAction) {
         const prevState = this.state;
-        this.state = Object.assign(Object.assign({}, this.state), state);
+        const config = state.config ? Object.assign(Object.assign({}, prevState.config), state.config) : prevState.config;
+        this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), { config });
         if (equal(this.state, prevState, { deep: true }))
             return;
         this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
@@ -9013,11 +9104,28 @@ const PanoRulerPlugin = (five, params) => {
         state.enable = false;
         return true;
     };
+    function changeConfigs(config) {
+        if (config.distanceText && config.distanceText !== state.options.distanceText) {
+            const distanceText = config.distanceText;
+            state.options.distanceText = distanceText;
+            Object.values(__rule).forEach((item) => {
+                item.rules.forEach((rule) => {
+                    const [origin, vertical] = rule.rule;
+                    const distance = origin.distanceTo(vertical);
+                    const textEle = rule.$element.querySelector('.PanoRulerPlugin-rule-label-name');
+                    if (!textEle)
+                        return;
+                    textEle.innerText = distanceText(distance);
+                });
+            });
+        }
+    }
     return {
         enable,
         disable,
         load,
         state,
+        changeConfigs,
     };
 };
 
@@ -10914,7 +11022,8 @@ function createDistanceItem(props) {
         if (userDistanceItem) {
             userDistanceItem.update({ line: line.toCompletelyJson(), polyline: line.getPolyline().toCompletelyJson() });
         }
-        const distanceString = startPoint.position.clone().distanceTo(endPoint.position).toFixed(2) + 'm';
+        const distance = startPoint.position.clone().distanceTo(endPoint.position);
+        const distanceString = props.line.model.params.getDistanceText(distance);
         contentDom.innerText !== distanceString && (contentDom.innerText = distanceString);
     }
     function appendTo(container) {
@@ -11253,6 +11362,12 @@ const preventDefault = (e) => e.preventDefault();
 class BaseController {
     constructor(params) {
         var _a, _b;
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "five", {
             enumerable: true,
             configurable: true,
@@ -11265,7 +11380,13 @@ class BaseController {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "model", {
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dashed", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -11324,6 +11445,7 @@ class BaseController {
             configurable: true,
             writable: true,
             value: () => {
+                this.dashed.distanceItem.update(this.five);
                 this.model.lines.forEach((line) => line.distanceItem.update(this.five));
             }
         });
@@ -11331,6 +11453,7 @@ class BaseController {
         this.five = params.five;
         this.hook = params.hook;
         this.model = params.model;
+        this.config = params.config;
         this.magnifier = params.magnifier;
         this.container = params.container;
         this.fiveHelper = params.fiveHelper;
@@ -11339,6 +11462,10 @@ class BaseController {
         // ==================== Groups ====================
         this.group = params.group;
         this.mouseGroup = params.mouseGroup;
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        this.dashed.mesh.name = 'dashLine';
         const fiveElement = this.five.getElement();
         if (fiveElement) {
             fiveElement.addEventListener('touchstart', preventDefault);
@@ -11414,12 +11541,6 @@ class EditController extends BaseController {
             writable: true,
             value: 'edit'
         });
-        Object.defineProperty(this, "model", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
-        });
         Object.defineProperty(this, "pressPoint", {
             enumerable: true,
             configurable: true,
@@ -11451,13 +11572,6 @@ class EditController extends BaseController {
             writable: true,
             value: null
         });
-        /** 鼠标点到上一个端点连接的虚线 */
-        Object.defineProperty(this, "dashed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "hammer", {
             enumerable: true,
             configurable: true,
@@ -11670,9 +11784,7 @@ class EditController extends BaseController {
                 this.dashed.distanceItem.update(this.five);
             }
         });
-        // ==================== 虚线 ====================
-        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
-        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        this.model = new Model(this.config);
         // ==================== 事件监听 ====================
         // five
         this.five.on('cameraUpdate', this.onCameraUpdate);
@@ -12506,7 +12618,7 @@ class MixedController extends BaseController {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
+            value: new Model(this.config)
         });
         Object.defineProperty(this, "hasAppendDashed", {
             enumerable: true,
@@ -12544,13 +12656,6 @@ class MixedController extends BaseController {
             writable: true,
             value: void 0
         });
-        /** 圆环点到上一个端点连接的虚线 */
-        Object.defineProperty(this, "dashed", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         /** 编辑线条发生改变时通知外部 */
         Object.defineProperty(this, "onLineChanged", {
             enumerable: true,
@@ -12753,10 +12858,6 @@ class MixedController extends BaseController {
             onClick: this.deleteDomClickCallback,
             cancelDelete: this.cancelDeleteClickCallback,
         }).appendTo(this.container);
-        // ==================== 虚线 ====================
-        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
-        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
-        this.dashed.mesh.name = 'dashLine';
         // ==================== 事件监听 ====================
         // five
         this.five.on('cameraUpdate', this.onCameraUpdate);
@@ -14130,6 +14231,12 @@ class MeasureController {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "fiveHelper", {
             enumerable: true,
             configurable: true,
@@ -14228,7 +14335,14 @@ class MeasureController {
         });
         this.five = five;
         this.params = params;
-        this.model = new Model({ userDistanceItemCreator: this.params.userDistanceItemCreator });
+        const defaultConfig = {
+            userDistanceItemCreator: undefined,
+            getDistanceText(distance) {
+                return distance.toFixed(2) + 'm';
+            },
+        };
+        this.config = Object.assign(Object.assign({}, defaultConfig), omit(params, ['openParams', 'magnifierParams']));
+        this.model = new Model(this.config);
         this.fiveHelper = new FiveHelper(five);
         // magnifier
         this.magnifier = new Magnifier(five, (_a = params.magnifierParams) !== null && _a !== void 0 ? _a : { width: 190, height: 190, scale: 2 });
@@ -14250,6 +14364,7 @@ class MeasureController {
             hook: this.hook,
             group: this.group,
             model: this.model,
+            config: this.config,
             magnifier: this.magnifier,
             container: this.container,
             fiveHelper: this.fiveHelper,
@@ -14384,6 +14499,14 @@ class MeasureController {
             (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.dispose();
         this.useUIController = new UIController(this, this.controllerParams);
     }
+    changeConfigs(config) {
+        var _a;
+        if (config.getDistanceText && config.getDistanceText !== this.config.getDistanceText) {
+            const getDistanceText = config.getDistanceText;
+            this.config.getDistanceText = getDistanceText;
+            (_a = this.controller) === null || _a === void 0 ? void 0 : _a.updateDistanceUI();
+        }
+    }
 }
 
 const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {