@realsee/dnalogel 2.0.1 → 2.0.2-alpha

package/dist/index.umd.js

@@ -1670,7 +1670,7 @@
     	internal.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 + "";
@@ -1696,13 +1696,14 @@
     	};
     }
 
-    // (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() {
@@ -1710,7 +1711,7 @@
     			t0 = internal.text(t0_value);
     			t1 = internal.space();
     			span1 = internal.element("span");
-    			span1.textContent = `${/*roomSizeDes*/ ctx[5]}`;
+    			t2 = internal.text(/*roomSizeDes*/ ctx[5]);
     			internal.attr(span0, "class", "floorplan-plugin__room-name");
     			internal.attr(span1, "class", "floorplan-plugin__room-size svelte-12pzct5");
     		},
@@ -1719,9 +1720,11 @@
     			internal.append(span0, t0);
     			internal.insert(target, t1, anchor);
     			internal.insert(target, span1, anchor);
+    			internal.append(span1, t2);
     		},
     		p(ctx, dirty) {
     			if (dirty & /*room*/ 1 && t0_value !== (t0_value = /*room*/ ctx[0].name + "")) internal.set_data(t0, t0_value);
+    			if (dirty & /*roomSizeDes*/ 32) internal.set_data(t2, /*roomSizeDes*/ ctx[5]);
     		},
     		d(detaching) {
     			if (detaching) internal.detach(span0);
@@ -1755,7 +1758,7 @@
     		m(target, anchor) {
     			internal.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) {
@@ -1783,7 +1786,7 @@
     				if_block.d();
     			}
 
-    			/*div_binding*/ ctx[15](null);
+    			/*div_binding*/ ctx[16](null);
     		}
     	};
     }
@@ -1806,12 +1809,14 @@
     }
 
     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;
 
@@ -1851,7 +1856,6 @@
     	const bodyWidth = document.body.clientWidth;
 
     	const bodyHeight = document.body.clientHeight;
-    	const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
 
     	// ====================================
     	const roomLabel = room.roomLabel;
@@ -1867,7 +1871,7 @@
     	let labelElementSize;
 
     	hoveredRoom.subscribe(function onHoverdRoomUpdate(_room) {
-    		$$invalidate(12, isHoverd = !!_room && _room.id === room.id);
+    		$$invalidate(13, isHoverd = !!_room && _room.id === room.id);
     	});
 
     	svelte.onMount(() => {
@@ -1877,7 +1881,7 @@
     		? void 0
     		: labelElement.getClientRects()[0];
 
-    		$$invalidate(13, labelElementSize = {
+    		$$invalidate(14, labelElementSize = {
     			width: labelDomRect.width,
     			height: labelDomRect.height
     		});
@@ -1894,13 +1898,18 @@
     		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);
     		}
@@ -1911,7 +1920,7 @@
     			: getLabelElement(room));
     		}
 
-    		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 23040) {
+    		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 45568) {
     			$$invalidate(3, labelVisible = adaptiveRoomLabelVisibleEnable
     			? isHoverd
     				? true
@@ -1934,6 +1943,7 @@
     		fontSize,
     		pxmm,
     		hoveredRoom,
+    		getRoomAreaText,
     		adaptiveRoomLabelVisibleEnable,
     		isHoverd,
     		labelElementSize,
@@ -1956,8 +1966,9 @@
     				pxmm: 9,
     				room: 0,
     				hoveredRoom: 10,
+    				getRoomAreaText: 11,
     				getLabelElement: 1,
-    				adaptiveRoomLabelVisibleEnable: 11
+    				adaptiveRoomLabelVisibleEnable: 12
     			},
     			add_css$j
     		);
@@ -1972,19 +1983,19 @@
 
     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);
@@ -2001,7 +2012,7 @@
     			}
 
     			internal.attr(div, "class", "floorplan-plugin__room-labels svelte-13xux0b");
-    			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[8].call(div));
+    			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -2010,12 +2021,12 @@
     				each_blocks[i].m(div, null);
     			}
 
-    			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[8].bind(div));
+    			div_resize_listener = internal.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];
     				internal.group_outros();
     				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.outro_and_destroy_block, create_each_block$b, null, get_each_context$b);
     				internal.check_outros();
@@ -2049,7 +2060,7 @@
     	};
     }
 
-    // (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;
@@ -2057,11 +2068,12 @@
 
     	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]
     		}
     	];
 
@@ -2089,14 +2101,15 @@
     		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)
     			? internal.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]
     					}
     				])
     			: {};
@@ -2122,7 +2135,7 @@
     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() {
@@ -2135,11 +2148,11 @@
     			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) {
     						internal.transition_in(if_block, 1);
     					}
     				} else {
@@ -2179,6 +2192,7 @@
     	let { floorIndex } = $$props;
     	let { floorplanData } = $$props;
     	let { hoveredRoom } = $$props;
+    	let { getRoomAreaText } = $$props;
     	let { getLabelElement } = $$props;
     	let { adaptiveRoomLabelVisibleEnable } = $$props;
     	let clientWidth = 0;
@@ -2186,33 +2200,35 @@
 
     	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,
@@ -2235,11 +2251,12 @@
     			create_fragment$n,
     			internal.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
     		);
@@ -2254,18 +2271,18 @@
 
     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;
 
@@ -2273,8 +2290,8 @@
     		c() {
     			div = internal.element("div");
     			internal.attr(div, "class", "floorplan-plugin__rule-scale svelte-xt7p1v");
-    			internal.set_style(div, "left", /*rulerLabel*/ ctx[13].left * 100 + '%', false);
-    			internal.set_style(div, "bottom", /*rulerLabel*/ ctx[13].bottom * 100 + '%', false);
+    			internal.set_style(div, "left", /*rulerLabel*/ ctx[14].left * 100 + '%', false);
+    			internal.set_style(div, "bottom", /*rulerLabel*/ ctx[14].bottom * 100 + '%', false);
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -2286,11 +2303,11 @@
     	};
     }
 
-    // (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;
 
@@ -2303,10 +2320,10 @@
     			t0 = internal.text(t0_value);
     			t1 = internal.space();
     			internal.attr(div0, "class", "floorplan-plugin__rule-text svelte-xt7p1v");
-    			internal.toggle_class(div0, "is-row", /*isRow*/ ctx[1]);
+    			internal.toggle_class(div0, "is-row", /*isRow*/ ctx[2]);
     			internal.attr(div1, "class", "floorplan-plugin__rule-text-item svelte-xt7p1v");
-    			internal.set_style(div1, "left", /*textItem*/ ctx[10].left * 100 + '%', false);
-    			internal.set_style(div1, "bottom", /*textItem*/ ctx[10].bottom * 100 + '%', false);
+    			internal.set_style(div1, "left", /*textItem*/ ctx[11].left * 100 + '%', false);
+    			internal.set_style(div1, "bottom", /*textItem*/ ctx[11].bottom * 100 + '%', false);
     			this.first = div1;
     		},
     		m(target, anchor) {
@@ -2317,6 +2334,7 @@
     		},
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
+    			if (dirty & /*getRuleDistanceText*/ 2 && t0_value !== (t0_value = /*getRuleDistanceText*/ ctx[1](/*textItem*/ ctx[11].distance) + "")) internal.set_data(t0, t0_value);
     		},
     		d(detaching) {
     			if (detaching) internal.detach(div1);
@@ -2334,15 +2352,15 @@
     	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);
@@ -2370,12 +2388,12 @@
 
     			internal.attr(div0, "class", "floorplan-plugin__rule-line svelte-xt7p1v");
     			internal.attr(div1, "class", "floorplan-plugin__rule-scale-wrapper svelte-xt7p1v");
-    			internal.toggle_class(div1, "is-row", /*isRow*/ ctx[1]);
+    			internal.toggle_class(div1, "is-row", /*isRow*/ ctx[2]);
     			internal.attr(div2, "class", "floorplan-plugin__rule-text-wrapper svelte-xt7p1v");
     			internal.attr(div3, "class", div3_class_value = "floorplan-plugin__rule-labels floorplan-plugin__rule-labels--" + /*type*/ ctx[0] + " svelte-xt7p1v");
-    			internal.toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
-    			internal.set_style(div3, "width", /*isRow*/ ctx[1] ? '100%' : 1 / 16 + 'rem', false);
-    			internal.set_style(div3, "height", !/*isRow*/ ctx[1] ? '100%' : 1 / 16 + 'rem', false);
+    			internal.toggle_class(div3, "is-row", /*isRow*/ ctx[2]);
+    			internal.set_style(div3, "width", /*isRow*/ ctx[2] ? '100%' : 1 / 16 + 'rem', false);
+    			internal.set_style(div3, "height", !/*isRow*/ ctx[2] ? '100%' : 1 / 16 + 'rem', false);
     		},
     		m(target, anchor) {
     			internal.insert(target, div3, anchor);
@@ -2395,8 +2413,8 @@
     			}
     		},
     		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) {
@@ -2418,8 +2436,8 @@
     				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 = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each1_lookup, div2, internal.destroy_block, create_each_block$a, null, get_each_context$a);
     			}
 
@@ -2427,8 +2445,8 @@
     				internal.attr(div3, "class", div3_class_value);
     			}
 
-    			if (dirty & /*type, isRow*/ 3) {
-    				internal.toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
+    			if (dirty & /*type, isRow*/ 5) {
+    				internal.toggle_class(div3, "is-row", /*isRow*/ ctx[2]);
     			}
     		},
     		i: internal.noop,
@@ -2451,6 +2469,7 @@
     	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;
@@ -2496,17 +2515,32 @@
 
     	$$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 internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$m, create_fragment$m, internal.safe_not_equal, { type: 0, data: 4, bounding: 5 }, add_css$h);
+
+    		internal.init(
+    			this,
+    			options,
+    			instance$m,
+    			create_fragment$m,
+    			internal.safe_not_equal,
+    			{
+    				type: 0,
+    				data: 5,
+    				bounding: 6,
+    				getRuleDistanceText: 1
+    			},
+    			add_css$h
+    		);
     	}
     }
 
@@ -2518,12 +2552,12 @@
 
     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;
@@ -2531,9 +2565,10 @@
 
     	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]
     		}
     	];
 
@@ -2561,12 +2596,13 @@
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
 
-    			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding*/ 9)
+    			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding, getRuleDistanceText*/ 19)
     			? internal.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]
     					}
     				])
     			: {};
@@ -2594,8 +2630,8 @@
     	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);
@@ -2612,8 +2648,8 @@
     			}
 
     			internal.attr(div, "class", "floorplan-plugin__rule-labels-wrapper svelte-1mzj9p3");
-    			internal.set_style(div, "width", /*width*/ ctx[2], false);
-    			internal.set_style(div, "height", /*height*/ ctx[1], false);
+    			internal.set_style(div, "width", /*width*/ ctx[3], false);
+    			internal.set_style(div, "height", /*height*/ ctx[2], false);
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -2625,19 +2661,19 @@
     			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];
     				internal.group_outros();
     				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.outro_and_destroy_block, create_each_block$9, null, get_each_context$9);
     				internal.check_outros();
     			}
 
-    			if (dirty & /*width*/ 4) {
-    				internal.set_style(div, "width", /*width*/ ctx[2], false);
+    			if (dirty & /*width*/ 8) {
+    				internal.set_style(div, "width", /*width*/ ctx[3], false);
     			}
 
-    			if (dirty & /*height*/ 2) {
-    				internal.set_style(div, "height", /*height*/ ctx[1], false);
+    			if (dirty & /*height*/ 4) {
+    				internal.set_style(div, "height", /*height*/ ctx[2], false);
     			}
     		},
     		i(local) {
@@ -2682,55 +2718,58 @@
     	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,
@@ -2749,7 +2788,20 @@
     class RuleLabels extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$l, create_fragment$l, internal.safe_not_equal, { floorIndex: 4, floorplanData: 5 }, add_css$g);
+
+    		internal.init(
+    			this,
+    			options,
+    			instance$l,
+    			create_fragment$l,
+    			internal.safe_not_equal,
+    			{
+    				floorIndex: 5,
+    				floorplanData: 6,
+    				getRuleDistanceText: 0
+    			},
+    			add_css$g
+    		);
     	}
     }
 
@@ -3660,7 +3712,7 @@
     	internal.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;
@@ -3669,7 +3721,7 @@
     		{
     			floorIndex: /*floorIndex*/ ctx[1],
     			floorplanData: /*floorplanData*/ ctx[5],
-    			hoveredRoom: /*hoveredRoom*/ ctx[8]
+    			hoveredRoom: /*hoveredRoom*/ ctx[10]
     		}
     	];
 
@@ -3690,12 +3742,12 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 290)
+    			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 1058)
     			? internal.get_spread_update(roomhighlight_spread_levels, [
     					{
     						floorIndex: /*floorIndex*/ ctx[1],
     						floorplanData: /*floorplanData*/ ctx[5],
-    						hoveredRoom: /*hoveredRoom*/ ctx[8]
+    						hoveredRoom: /*hoveredRoom*/ ctx[10]
     					}
     				])
     			: {};
@@ -3717,7 +3769,7 @@
     	};
     }
 
-    // (24:2) {#if roomLabelsEnable}
+    // (26:2) {#if roomLabelsEnable}
     function create_if_block_1$3(ctx) {
     	let roomlabels;
     	let current;
@@ -3726,9 +3778,10 @@
     		{
     			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]
     		}
     	];
 
@@ -3749,14 +3802,15 @@
     			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)
     			? internal.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]
     					}
     				])
     			: {};
@@ -3778,7 +3832,7 @@
     	};
     }
 
-    // (27:2) {#if ruleLabelsEnable}
+    // (38:2) {#if ruleLabelsEnable}
     function create_if_block$6(ctx) {
     	let rulelabels;
     	let current;
@@ -3786,7 +3840,8 @@
     	const rulelabels_spread_levels = [
     		{
     			floorplanData: /*floorplanData*/ ctx[5],
-    			floorIndex: /*floorIndex*/ ctx[1]
+    			floorIndex: /*floorIndex*/ ctx[1],
+    			getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
     		}
     	];
 
@@ -3807,11 +3862,12 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			const rulelabels_changes = (dirty & /*floorplanData, floorIndex*/ 34)
+    			const rulelabels_changes = (dirty & /*floorplanData, floorIndex, getRuleDistanceText*/ 290)
     			? internal.get_spread_update(rulelabels_spread_levels, [
     					{
     						floorplanData: /*floorplanData*/ ctx[5],
-    						floorIndex: /*floorIndex*/ ctx[1]
+    						floorIndex: /*floorIndex*/ ctx[1],
+    						getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
     					}
     				])
     			: {};
@@ -4040,7 +4096,9 @@
     	let { roomLabelsEnable } = $$props;
     	let { ruleLabelsEnable } = $$props;
     	let { floorplanData } = $$props;
+    	let { getRoomAreaText } = $$props;
     	let { getLabelElement } = $$props;
+    	let { getRuleDistanceText } = $$props;
     	let { adaptiveRoomLabelVisibleEnable } = $$props;
     	const hoveredRoom = store.writable(undefined);
 
@@ -4051,8 +4109,10 @@
     		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 [
@@ -4062,7 +4122,9 @@
     		roomLabelsEnable,
     		ruleLabelsEnable,
     		floorplanData,
+    		getRoomAreaText,
     		getLabelElement,
+    		getRuleDistanceText,
     		adaptiveRoomLabelVisibleEnable,
     		hoveredRoom
     	];
@@ -4085,8 +4147,10 @@
     				roomLabelsEnable: 3,
     				ruleLabelsEnable: 4,
     				floorplanData: 5,
-    				getLabelElement: 6,
-    				adaptiveRoomLabelVisibleEnable: 7
+    				getRoomAreaText: 6,
+    				getLabelElement: 7,
+    				getRuleDistanceText: 8,
+    				adaptiveRoomLabelVisibleEnable: 9
     			},
     			add_css$c
     		);
@@ -4101,11 +4165,11 @@
 
     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;
@@ -4172,7 +4236,7 @@
     		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;
 
@@ -4278,7 +4342,7 @@
     	};
     }
 
-    // (24:4) {#each floorplanData.floorDatas as floorData}
+    // (26:4) {#each floorplanData.floorDatas as floorData}
     function create_each_block$6(ctx) {
     	let currentfloor;
     	let current;
@@ -4287,16 +4351,18 @@
     		{
     			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]
     		}
     	];
 
@@ -4317,21 +4383,23 @@
     			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)
     			? internal.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]
     					}
     				])
     			: {};
@@ -4353,7 +4421,7 @@
     	};
     }
 
-    // (39:4) {#if compassEnable}
+    // (43:4) {#if compassEnable}
     function create_if_block_1$2(ctx) {
     	let compass;
     	let current;
@@ -4462,7 +4530,9 @@
     	let { floorplanData } = $$props;
     	let { lastPanoramaLongitude } = $$props;
     	let { cameraImageUrl } = $$props;
+    	let { getRoomAreaText } = $$props;
     	let { getLabelElement } = $$props;
+    	let { getRuleDistanceText } = $$props;
     	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
     	$$self.$$set = $$props => {
@@ -4478,8 +4548,10 @@
     		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 [
@@ -4495,7 +4567,9 @@
     		floorplanData,
     		lastPanoramaLongitude,
     		cameraImageUrl,
+    		getRoomAreaText,
     		getLabelElement,
+    		getRuleDistanceText,
     		adaptiveRoomLabelVisibleEnable
     	];
     }
@@ -4523,8 +4597,10 @@
     				floorplanData: 9,
     				lastPanoramaLongitude: 10,
     				cameraImageUrl: 11,
-    				getLabelElement: 12,
-    				adaptiveRoomLabelVisibleEnable: 13
+    				getRoomAreaText: 12,
+    				getLabelElement: 13,
+    				getRuleDistanceText: 14,
+    				adaptiveRoomLabelVisibleEnable: 15
     			},
     			add_css$b
     		);
@@ -5388,10 +5464,12 @@
                 autoShowEnable: true,
                 ruleLabelsEnable: true,
                 roomLabelsEnable: true,
+                adaptiveRoomLabelVisibleEnable: true,
                 cameraImageUrl: CAMERA_IMAGE,
                 attachedTo: exports.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);
@@ -5464,12 +5542,10 @@
                 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) {
@@ -5477,7 +5553,8 @@
         }
         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 });
@@ -9029,11 +9106,28 @@
             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,
         };
     };
 
@@ -10930,7 +11024,8 @@
             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) {
@@ -11269,6 +11364,12 @@
     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,
@@ -11281,7 +11382,13 @@
                 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,
@@ -11340,6 +11447,7 @@
                 configurable: true,
                 writable: true,
                 value: () => {
+                    this.dashed.distanceItem.update(this.five);
                     this.model.lines.forEach((line) => line.distanceItem.update(this.five));
                 }
             });
@@ -11347,6 +11455,7 @@
             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;
@@ -11355,6 +11464,10 @@
             // ==================== 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);
@@ -11430,12 +11543,6 @@
                 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,
@@ -11467,13 +11574,6 @@
                 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,
@@ -11686,9 +11786,7 @@
                     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);
@@ -12522,7 +12620,7 @@
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
+                value: new Model(this.config)
             });
             Object.defineProperty(this, "hasAppendDashed", {
                 enumerable: true,
@@ -12560,13 +12658,6 @@
                 writable: true,
                 value: void 0
             });
-            /** 圆环点到上一个端点连接的虚线 */
-            Object.defineProperty(this, "dashed", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: void 0
-            });
             /** 编辑线条发生改变时通知外部 */
             Object.defineProperty(this, "onLineChanged", {
                 enumerable: true,
@@ -12769,10 +12860,6 @@
                 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);
@@ -14146,6 +14233,12 @@ void main() {
                 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,
@@ -14244,7 +14337,14 @@ void main() {
             });
             this.five = five$1;
             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$1);
             // magnifier
             this.magnifier = new Magnifier(five$1, (_a = params.magnifierParams) !== null && _a !== void 0 ? _a : { width: 190, height: 190, scale: 2 });
@@ -14266,6 +14366,7 @@ void main() {
                 hook: this.hook,
                 group: this.group,
                 model: this.model,
+                config: this.config,
                 magnifier: this.magnifier,
                 container: this.container,
                 fiveHelper: this.fiveHelper,
@@ -14400,6 +14501,14 @@ void main() {
                 (_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) {