@realsee/dnalogel 2.0.0-alpha.9 → 2.0.0

package/dist/floorplan/TopviewFloorplanPlugin/index.js

@@ -6,6 +6,9 @@ var THREE = require('three');
 var internal = require('svelte/internal');
 var easing = require('svelte/easing');
 var transition = require('svelte/transition');
+var store = require('svelte/store');
+var svelte = require('svelte');
+var five = require('@realsee/five');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -27,184 +30,109 @@ function _interopNamespace(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 
-const pluginStyle = {
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    transform: 'translate(-50%, -50%)',
-    pointerEvents: 'none',
-    zIndex: '10',
-};
-
-function pathD(points, options = {}) {
-    let d = '';
-    const { needZ, needA } = options;
-    const _points = needZ ? points.slice().concat(points[0]) : points.slice();
-    _points.forEach((_point, index) => {
-        const { x, y } = options.format ? options.format(_point) : _point;
-        const point = x + ',' + y;
-        if (index === 0) {
-            d += 'M' + point;
-            return d;
-        }
-        if (needA?.[index]) {
-            d += 'A' + needA[index] + ',' + point;
-            return d;
-        }
-        d += 'L' + point;
-        return d;
-    });
-    return d + (needZ ? 'Z' : '');
-}
-/** 把户型图上点点位转换到 SVG 上的点位 */
-function formatFloorplanPoint({ x, y }, pxmm, bounding) {
-    const { max, min } = bounding;
-    return { x: (x - min.x) * pxmm, y: (max.y - y) * pxmm };
+/**
+ * 检查一个值是否是狭义上的对象
+ * @param {any} value 要检查的值
+ *
+ * isTruelyObject({})
+ * // => true
+ *
+ * isObjectLike([1, 2, 3])
+ * // => false
+ *
+ * isObjectLike(Function)
+ * // => false
+ *
+ * isObjectLike(null)
+ * // => false
+ *
+ */
+function isTruelyObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
 }
 
-async function formatOutlines(outlines) {
-    const headers = new Headers({ 'Content-Type': 'text/plain' });
-    const getOutlineItem = async function (item) {
-        const outlineItem = {
-            index: item.index,
-            url: item.url,
-            svgUrl: item.svg_url,
-        };
-        if (item.svg_url) {
-            const svgContent = await fetch(item.svg_url, { headers }).then((res) => res.text());
-            outlineItem.svgContent = svgContent;
-        }
-        return outlineItem;
-    };
-    const svgOutlineItems = await Promise.all(outlines.map(getOutlineItem));
-    return svgOutlineItems;
-}
-function formatRoom(data) {
-    const floorplanRoomItem = {
-        id: data.id,
-        size: data.size,
-        name: data.name,
-        path: data.path,
-        roomType: data.room_type,
-        floorType: data.floor_type,
-        roomLabel: {
-            position: data.room_label.position,
-            positionInImage: data.room_label.position_in_image,
-        },
-        observerIndexs: data.observer_indexs,
-    };
-    return floorplanRoomItem;
+/* eslint-disable @typescript-eslint/no-use-before-define */
+function baseIsEqual(value, other) {
+    if (value === other)
+        return true;
+    if (typeof value !== typeof other)
+        return false;
+    if (Number.isNaN(value) && Number.isNaN(other))
+        return true;
+    return false;
 }
-function formatFloorData(_data) {
-    return {
-        floorName: _data.floor_name,
-        floorIndex: _data.floor_index,
-        rooms: _data.rooms.map(formatRoom),
-        rules: _data.rules,
-    };
+function objEqualShallow(value, other) {
+    const valueProps = Object.getOwnPropertyNames(value);
+    const otherProps = Object.getOwnPropertyNames(other);
+    if (valueProps.length !== otherProps.length)
+        return false;
+    for (let i = 0, len = valueProps.length; i < len; i++) {
+        const propName = valueProps[i];
+        if (!baseIsEqual(value[propName], other[propName]))
+            return false;
+    }
+    return true;
 }
-function formateFloorplanObserver(data) {
-    const floorplanObserver = {
-        index: data.index,
-        floorIndex: data.floor_index,
-        position: data.position,
-        positionInImage: data.position_in_image,
-    };
-    return floorplanObserver;
+function arrayEqualShallow(value, other) {
+    if (value.length !== other.length)
+        return false;
+    for (let i = 0, len = value.length; i < len; i++) {
+        if (!baseIsEqual(value[i], other[i]))
+            return false;
+    }
+    return true;
 }
-function formatFloorplanEntrance(data) {
-    const floorplanEntrance = {
-        rad: data.rad,
-        position: data.position,
-        positionInImage: data.position_in_image,
-        northRad: data.north_rad,
-        roomId: data.room_id,
-        floorIndex: data.floor_index,
-    };
-    return floorplanEntrance;
+function isShallowEqual(value, other) {
+    if (baseIsEqual(value, other))
+        return true;
+    if (isTruelyObject(value) && isTruelyObject(other))
+        return objEqualShallow(value, other);
+    if (Array.isArray(value) && Array.isArray(other))
+        return arrayEqualShallow(value, other);
+    return false;
 }
-async function formatData(data) {
-    const outlines = await formatOutlines(data.outlines);
-    const bounding = data.computed_data.bounding;
-    const floorDatas = data.computed_data.floor_datas.map(formatFloorData);
-    const entrance = data.computed_data.entrance ? formatFloorplanEntrance(data.computed_data.entrance) : null;
-    const floorplanData = {
-        outlines,
-        entrance,
-        bounding,
-        floorDatas,
-        observers: data.computed_data.observers.map(formateFloorplanObserver),
-    };
-    return floorplanData;
+function isDeepEqual(value, other) {
+    if (baseIsEqual(value, other))
+        return true;
+    if (isTruelyObject(value) && isTruelyObject(other))
+        return objEqualDeep(value, other);
+    if (Array.isArray(value) && Array.isArray(other))
+        return arrayEqualDeep(value, other);
+    return false;
 }
-
-/**
- * 把第一个参数传入第二个参数（函数）中并执行
- * 一般用于执行函数后返回变量。
- * @param {any} something
- * @param {function} callback
- * @return {any}
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function tap(something, callback) {
-    callback(something);
-    return something;
+function arrayEqualDeep(value, other) {
+    if (value.length !== other.length)
+        return false;
+    for (let i = 0, len = value.length; i < len; i++) {
+        if (!isDeepEqual(value[i], other[i]))
+            return false;
+    }
+    return true;
 }
-
-/**
- * 过滤掉不需要的对象字段函数：实现从一个对象中排除某些指定属性后生成的新对象。
- * @param object
- * @param props 排除的属性
- * @return
- */
-function omit(object, props) {
-    return tap({}, (result) => {
-        for (const name in object) {
-            if (props.indexOf(name) !== -1)
-                continue;
-            result[name] = object[name];
-        }
-    });
+function objEqualDeep(value, other) {
+    const valueProps = Object.getOwnPropertyNames(value);
+    const otherProps = Object.getOwnPropertyNames(other);
+    if (valueProps.length !== otherProps.length)
+        return false;
+    for (let i = 0, len = valueProps.length; i < len; i++) {
+        const propName = valueProps[i];
+        if (!isDeepEqual(value[propName], other[propName]))
+            return false;
+    }
+    return true;
 }
-
-var FLOOR_PLAN_ATTACHED_TO;
-(function (FLOOR_PLAN_ATTACHED_TO) {
-    FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["FLOOR"] = 1] = "FLOOR";
-    FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["CEILING"] = 2] = "CEILING";
-    FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["BOUNDING_CENTER"] = 3] = "BOUNDING_CENTER";
-})(FLOOR_PLAN_ATTACHED_TO || (FLOOR_PLAN_ATTACHED_TO = {}));
-
 /**
- * 获取「在俯视图」状态下，模型 mm 与屏幕像素 px 的对应关系，即每 mm 对应多少 px
- * @param five five
+ * 对象比较
+ * @param {*} value 第一个比较的值
+ * @param {*} other 第二个比较的值
+ * @param {Object} options 可选参数，可选项包括：<br />
+ *    deep {Boolean} 是否深比较<br />
+ * @returns {boolean} 是否相等
  */
-function getPxmm(five, container, floorIndex, options) {
-    const maxFloorIndex = Math.max(...five.work.observers.map((ob) => ob.floorIndex));
-    function getFloorY(floorIndex) {
-        return floorIndex > maxFloorIndex
-            ? five.model.bounding.max.y
-            : Math.max(...five.work.observers
-                .filter((ob) => ob.floorIndex === floorIndex)
-                .map((ob) => ob.standingPosition.y));
-    }
-    function getY() {
-        const currentFloorY = getFloorY(floorIndex);
-        const nextFloorY = getFloorY(floorIndex + 1);
-        const attachedTo = options?.attachedTo || FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER;
-        if (attachedTo === FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER)
-            return (five.model.bounding.max.y + five.model.bounding.min.y) / 2;
-        else if (attachedTo === FLOOR_PLAN_ATTACHED_TO.CEILING)
-            return nextFloorY;
-        else
-            return currentFloorY;
-    }
-    const y = getY();
-    const originPosition = new THREE__namespace.Vector3(0, y, 0);
-    const originPositionXUnit = new THREE__namespace.Vector3(1, y, 0);
-    const mouse = originPosition.clone().project(five.camera);
-    const xUnitMouse = originPositionXUnit.clone().project(five.camera);
-    const pxmm = Math.abs((xUnitMouse.x - mouse.x) / 1000) * (container.getBoundingClientRect().width / 2);
-    return pxmm;
+function equal(value, other, opt = { deep: false }) {
+    if (!opt.deep)
+        return isShallowEqual(value, other);
+    return isDeepEqual(value, other);
 }
 
 const CAMERA_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAMAAAANf8AYAAAC2VBMVEUAAACCnP+Dn/+Enf+HqP+Gp/+Fof+Gpf+IrP+Lsf+Dof+Cmv+Lsv+Mtf+Eo/+Bmf+JrP+Hqf+Env+Krv+Fo/+Pu/+Ms/+Qvv+Hqf+RwP+KsP+Fpf+Mtv+Gov+Bnf+Qv/+Nt/+Krv+Ho/+Rwf+Ouv+Emv+Amv+SxP+Sw/+NuP+Mtf/G0f6huP+Ot/+JrP+Jqv+Dnv+crf6Uqv////+QvP+PvP+Ms//J0/3p9/+Ux/+Ouf+Krf+Iqf+Fpv+/zf6WsP+MpP+RqP+Uyf+Jy//V3P6Yuf+Qqf+Rqv/5/f+Sxf+Jy/////+Lx/+Ouf+Nw/+Owv+PwP+Jr/+Jq/+VvP+Vuv/c4v+Fnf+btP+InP+Blf/3+P6Txf+Jzf+Jyf+NxP+Qwf/t8/6Svv+Tvf/O1f7Czv3T2f6cu/+qvP7a4fvo7v77/v/o9//p9//0+v////+Vy//w9//k8/+B1f/v9/+D0/+UyP/u9v+D0v/i8f+F0v/g7/+G0P+KzP+Hz/////+Lx//s8/+Puf/h7P+Mxv/w9f7q8v/q8f2RwP/r8f6JrP/t8v6RvP/l6f7////j6P6VvP/f5/7q8P7a4P/U2f6au/+ZuP+ewf+auP+iu//n6f2Fn//j6P/h4fn9/v/4/P/3/P/o9v/l9P+F1P+B1f/i8v+UyP+J0f+E0f/h7//r8v6Izf/g7v/q8v6Pv//f7P7f7f/g7f+Lxf+MyP+Mw//k7v6Ow/+Ov//v8/2Pu//t8f+Tvv/p8P6Uu//q7v/i6P2Xvf+WuP/L1vypu//Azv7K0/zy8v/l8v/A4P/o9f/x+f+I0f/j8v+J0P/s9v/h8P+I0P/t9v/r9P6Lyv+Lyf/s9P/g7P+Myv/s8/7j7v+Jrv/q8P2Uwf+Epf+TuP/a3vzh5f3w8P/a4P20v//Nzfzx8f/Pz/Cg0P/f7//u9f/q8v7o8v7s8/7s8v3w9f+Sv/+TuP+Gp//s8fr///8/HFXHAAAA8nRSTlMANUQ/Z2JJXXaKTjCPmVMre3E6gFiylLxsxoVYnk5JwaOFU8utOjrV0KieQS2icWwzMC4Dt7aTQvjfrHprXD0zMyvpvUxGNjH+2sK9raeYkoiAcF5TUi0rKCYY2cy3pIJ/eGpEQDcxLx0S/Pv19PPu7Ovr5+Tk4eDe3NXU09DIsq2opKCViYN9e3V1cmZlXllVTk1GQDs2NTMwJw0K/vn28u/u5+Pj3tjNycjGw8DAua2pqJ6SjYyMf3BvaWNgWk5NSTc3MxT79PHw6efl2trY19PHurWysqWZe2xkXVlUPjo6OSskCO7Qzs6+vKCedmhdN1av0hoAAAV1SURBVEjHjZT3P9RxHMe1nCjcObo4cjpX5w53l7pUbnBGkr2TPZJKmiqVEQlJhGjvvfcm2nvvvXf5C3q/P98bkuR1D7+9n16v1/vzvtPrnAade/ty6anHJfFHOjkfXbe07PGxkuL4oqIjCzoDjHtxurzsRHmFStokjBDG/59JrwurOF2hkkUoIyKEQmFqatG3/xDnXlSGPZcKI5VKiVgsli+vrakpfNAx8UoVlpRWH6mUeMsVcm8vhah6WfXB3A6IlSlVKoE4KjxcgtNGRl1Ayzw9H+Z20DypMVkZZWKiUIi6oHj2PAbPs6Eh/+6/kBUpVUliIEQKGGcwGPbdiBpCQ/O//AMZJ218XW9igoHsGTwY7kopdMmSvTvbz/VGmiyhCARwWJ/Ss5CQ9pl3zVJZJCEwEszb6BtaGxrCn3XIyZP3trW3rybBWTCB1jy0sNGHeWM7+BgzrX4kJu752E57mWA5mIjsMRVxgGkrJpPpRvtJSywt3X2rPUSMuUgqIIzx37vRaLQeqNKEhN03/womg/bYhDJBBzdqvjsqYeHCHdfa1k9BF0QoEyuwoOadWc4sFutoXNzWGW2W3Axd8E3AxAZ6WNGeEoDl7EwPho/T0cDAtswb2Bi6kFx2VkwaDYgRI5zo9EUGRIGHD82e+ufrJ8uo+l31oQogYMJiOdFh2BQ03NTscEDAn8wKgQCeUsRTI8QEMhkYDDc1NTMLMuNwLAP8/a9Pbl0mJQlXhvVtrO2YNLce3Uew6IvAAsYtLS17gvwLCrKR0d3la0DsgdG3NiZVMBZacMh8L9CB2NjsS61eRiCtB4YH/Q21CMQKAgLnh1hYWAyJ3b9/40Qd09woppJhFytAnIPpBmBCCBjvjdrn59eKSU+SRWkZphu40IMBgRpAAMBmO7DZbL/786+s0TIpKqXOhgqGCKcnhOrd28HBlmj+2LFZWia9KjkqnHoa3BmsjG7wKIgDuSzQw9F29Gh+3jDunTseWas1zKtKYbiIsrEjZdAF2iPiYOvIz+Nyuebm5h6+HuvGa2xU0qhwBbkzayzjDO8y3IwgbAdHPp87zNx8sIvLYN/tvhc1TF1lWqSEwaMWgG3ABpIB4sC2HY2Ei0sf0O2YmLWr1CdQGRYp8SK3ic/ZnRWMLqQ+2xGRwUD069dvV8zcuRom+rlA6Y2MbgGmhAGEz4VYSPQF5cyZM6GFYl6eTlN6ixi6aE6PqDLQZRi4EKI/KOfGFjUzqCKsXu6l2RpuAKJxiI1tHhcQJAYOHDhgwOZZs4ZSTHR5lQQYPDW1DS4aELQxdyEIAANGjtk8c6aaqTslk8gVwIAN0w3rAEL2bMtHm12AIOHqenXaNDWztEwo9hKJGHjR6OO0yDSI1IGdoQ0iY0a6Tt+06fKUDRQzqKw8Qlxr1AXrwNqwDvGBA+BrGUDc3d3Xr5+SQZj0E2ERqXIjPAJYNUbD18FoWEeDbHLPzLyQ4ePjQ5i3x1RCubfmpqkjMMNo6KOJ5uqe+f58C9GoaD29XyVSYS1h4DftKeWDDN4AbACZMZAsExEKghWUNKXWhlPfA2P1qjmUT556a9jmQotWi/VOFael1lR7ep4JfRZy8nhpwtG4wMMB/gdi9/nNH+vhezsmJ+fG5quX12fomHl6J+KFy88uA2RJyJPE4wkL4wIPBfgXxO5HxGN7zNw5W2bNnLZhio+OmaR3LD6tplrLfKeYAwX7/O6Dje/2dpniwuKiwoMHH+bn7723Z8/uHTu2fpg9+3p29sYrWVnr1l1cO2HCUFCGT+tshUcWLPj6IDf37ued27Z9unXz2owZU6dOnnxp4sQ1q1ePH79KN6vbQWc1SrfrTit6lO5NO6/F8yZNmofBfgNTwRQLsPLsHQAAAABJRU5ErkJggg==';
@@ -213,10 +141,10 @@ function rad2Deg$1(rad) {
     return (rad * 180) / Math.PI;
 }
 
-/* src/floorplan/ModelFloorplanPlugin/Components/Camera.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/Camera.svelte generated by Svelte v3.49.0 */
 
-function add_css$c(target) {
-	internal.append_styles(target, "svelte-e8a2kn", ".floorplan__camera-position.svelte-e8a2kn{position:absolute;width:0;height:0}.floorplan__camera-rotate.svelte-e8a2kn{position:absolute;background-repeat:no-repeat;background-size:100%}");
+function add_css$d(target) {
+	internal.append_styles(target, "svelte-17cl35n", ".floorplan__camera-position.svelte-17cl35n{position:absolute;width:0;height:0}.floorplan__camera-rotate.svelte-17cl35n{position:absolute;background-repeat:no-repeat;background-size:100%}");
 }
 
 function create_fragment$g(ctx) {
@@ -227,7 +155,7 @@ function create_fragment$g(ctx) {
 		c() {
 			div1 = internal.element("div");
 			div0 = internal.element("div");
-			internal.attr(div0, "class", "floorplan__camera-rotate svelte-e8a2kn");
+			internal.attr(div0, "class", "floorplan__camera-rotate svelte-17cl35n");
 			internal.set_style(div0, "background-image", `url(${/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE})`);
 			internal.set_style(div0, "width", /*domSizeStyle*/ ctx[4], false);
 			internal.set_style(div0, "height", /*domSizeStyle*/ ctx[4], false);
@@ -235,7 +163,7 @@ function create_fragment$g(ctx) {
 			internal.set_style(div0, "top", '-' + /*domSizeStyle*/ ctx[4], false);
 			internal.set_style(div0, "transform", `rotate(${/*rotate*/ ctx[3]}deg)`, false);
 			internal.set_style(div0, "transform-origin", `${/*domSizeStyle*/ ctx[4]} ${/*domSizeStyle*/ ctx[4]}`, false);
-			internal.attr(div1, "class", "floorplan__camera-position svelte-e8a2kn");
+			internal.attr(div1, "class", "floorplan__camera-position svelte-17cl35n");
 			internal.set_style(div1, "left", /*positionLeft*/ ctx[1], false);
 			internal.set_style(div1, "top", /*positionTop*/ ctx[2], false);
 		},
@@ -311,25 +239,26 @@ class Camera extends internal.SvelteComponent {
 				lastPanoramaLongitude: 7,
 				cameraImageUrl: 0
 			},
-			add_css$c
+			add_css$d
 		);
 	}
 }
 
 const COMPASS_IMAGE = 'data:image/png;base64,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';
 
-/* src/floorplan/ModelFloorplanPlugin/Components/Compass.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/Compass.svelte generated by Svelte v3.49.0 */
 
-function add_css$b(target) {
-	internal.append_styles(target, "svelte-5l80pv", ".floorplan-plugin__compass.svelte-5l80pv{position:absolute;left:50%;top:-46px;width:231px;height:41px;will-change:opacity;transform-origin:center 184px}.floorplan-plugin__compass-image.svelte-5l80pv{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-5l80pv{position:absolute;left:50%;top:15px;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:10px;color:#fff}");
+function add_css$c(target) {
+	internal.append_styles(target, "svelte-z9kwkx", ".floorplan-plugin__compass.svelte-z9kwkx{position:absolute;left:50%;top:-2.39583rem;width:12.03125rem;height:2.13542rem;will-change:opacity;transform-origin:center 9.58333rem}.floorplan-plugin__compass-image.svelte-z9kwkx{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-z9kwkx{position:absolute;left:50%;top:0.78125rem;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:0.52083rem;color:#fff}");
 }
 
-// (11:0) {#if northRad}
+// (14:0) {#if canCompassShow}
 function create_if_block$6(ctx) {
 	let div1;
 	let div0;
 	let t0;
 	let span;
+	let t1;
 
 	return {
 		c() {
@@ -337,20 +266,23 @@ function create_if_block$6(ctx) {
 			div0 = internal.element("div");
 			t0 = internal.space();
 			span = internal.element("span");
-			span.textContent = "北";
-			internal.attr(div0, "class", "floorplan-plugin__compass-image svelte-5l80pv");
+			t1 = internal.text(/*northDesc*/ ctx[0]);
+			internal.attr(div0, "class", "floorplan-plugin__compass-image svelte-z9kwkx");
 			internal.set_style(div0, "background-image", `url(${COMPASS_IMAGE})`);
-			internal.attr(span, "class", "floorplan-plugin__compass-text svelte-5l80pv");
-			internal.attr(div1, "class", "floorplan-plugin__compass svelte-5l80pv");
-			internal.set_style(div1, "transform", /*compassTransformStyle*/ ctx[1], false);
+			internal.attr(span, "class", "floorplan-plugin__compass-text svelte-z9kwkx");
+			internal.attr(div1, "class", "floorplan-plugin__compass svelte-z9kwkx");
+			internal.set_style(div1, "transform", /*compassTransformStyle*/ ctx[2], false);
 		},
 		m(target, anchor) {
 			internal.insert(target, div1, anchor);
 			internal.append(div1, div0);
 			internal.append(div1, t0);
 			internal.append(div1, span);
+			internal.append(span, t1);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*northDesc*/ 1) internal.set_data(t1, /*northDesc*/ ctx[0]);
 		},
-		p: internal.noop,
 		d(detaching) {
 			if (detaching) internal.detach(div1);
 		}
@@ -359,7 +291,7 @@ function create_if_block$6(ctx) {
 
 function create_fragment$f(ctx) {
 	let if_block_anchor;
-	let if_block = /*northRad*/ ctx[0] && create_if_block$6(ctx);
+	let if_block = /*canCompassShow*/ ctx[1] && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -371,7 +303,7 @@ function create_fragment$f(ctx) {
 			internal.insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*northRad*/ ctx[0]) if_block.p(ctx, dirty);
+			if (/*canCompassShow*/ ctx[1]) if_block.p(ctx, dirty);
 		},
 		i: internal.noop,
 		o: internal.noop,
@@ -387,358 +319,294 @@ function rad2Deg(rad) {
 }
 
 function instance$f($$self, $$props, $$invalidate) {
+	var _a;
 	let { floorplanData } = $$props;
-	const northRad = floorplanData.entrance?.northRad;
+	let { northDesc } = $$props;
+
+	const northRad = (_a = floorplanData.entrance) === null || _a === void 0
+	? void 0
+	: _a.northRad;
+
+	const canCompassShow = typeof northRad === 'number';
 	const rotate = !northRad ? 0 : rad2Deg(northRad);
 	const compassTransformStyle = `translateX(-50%) translateZ(10px) rotate(${-rotate + 90}deg)`;
 
 	$$self.$$set = $$props => {
-		if ('floorplanData' in $$props) $$invalidate(2, floorplanData = $$props.floorplanData);
+		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+		if ('northDesc' in $$props) $$invalidate(0, northDesc = $$props.northDesc);
 	};
 
-	return [northRad, compassTransformStyle, floorplanData];
+	return [northDesc, canCompassShow, compassTransformStyle, floorplanData];
 }
 
 class Compass extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$f, create_fragment$f, internal.safe_not_equal, { floorplanData: 2 }, add_css$b);
+		internal.init(this, options, instance$f, create_fragment$f, internal.safe_not_equal, { floorplanData: 3, northDesc: 0 }, add_css$c);
 	}
 }
 
-/* src/floorplan/ModelFloorplanPlugin/Components/RoomLabels/RoomLabel.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/Normalmage.svelte generated by Svelte v3.49.0 */
 
-function add_css$a(target) {
-	internal.append_styles(target, "svelte-1ashbdx", ".floorplan-plugin__room-label-item.svelte-1ashbdx{position:absolute;display:flex;flex-flow:column;align-items:center;line-height:15px;color:#fff;transform:translate(-50%, -50%);white-space:nowrap}.floorplan-plugin__room-size.svelte-1ashbdx{opacity:0.45}");
+function add_css$b(target) {
+	internal.append_styles(target, "svelte-1gfoniz", "img.svelte-1gfoniz{width:100%;height:100%}");
 }
 
-// (22:30) 
-function create_if_block_1$4(ctx) {
-	let html_tag;
-	let raw_value = /*userConfigElement*/ ctx[2].outerHTML + "";
-	let html_anchor;
+function create_fragment$e(ctx) {
+	let img;
+	let img_src_value;
 
 	return {
 		c() {
-			html_tag = new internal.HtmlTag();
-			html_anchor = internal.empty();
-			html_tag.a = html_anchor;
+			img = internal.element("img");
+			if (!internal.src_url_equal(img.src, img_src_value = /*url*/ ctx[0])) internal.attr(img, "src", img_src_value);
+			internal.attr(img, "alt", "floorplan iamge");
+			internal.attr(img, "class", "svelte-1gfoniz");
 		},
 		m(target, anchor) {
-			html_tag.m(raw_value, target, anchor);
-			internal.insert(target, html_anchor, anchor);
+			internal.insert(target, img, anchor);
 		},
-		p(ctx, dirty) {
-			if (dirty & /*userConfigElement*/ 4 && raw_value !== (raw_value = /*userConfigElement*/ ctx[2].outerHTML + "")) html_tag.p(raw_value);
+		p(ctx, [dirty]) {
+			if (dirty & /*url*/ 1 && !internal.src_url_equal(img.src, img_src_value = /*url*/ ctx[0])) {
+				internal.attr(img, "src", img_src_value);
+			}
 		},
+		i: internal.noop,
+		o: internal.noop,
 		d(detaching) {
-			if (detaching) internal.detach(html_anchor);
-			if (detaching) html_tag.d();
+			if (detaching) internal.detach(img);
 		}
 	};
 }
 
-// (16:2) {#if getLabelElement === undefined}
-function create_if_block$5(ctx) {
-	let span0;
-	let t0_value = /*room*/ ctx[0].name + "";
-	let t0;
-	let t1;
-	let span1;
+function instance$e($$self, $$props, $$invalidate) {
+	let { url } = $$props;
 
-	return {
-		c() {
-			span0 = internal.element("span");
-			t0 = internal.text(t0_value);
-			t1 = internal.space();
-			span1 = internal.element("span");
-			span1.textContent = `${/*roomSizeDes*/ ctx[3]}`;
-			internal.attr(span0, "class", "floorplan-plugin__room-name");
-			internal.attr(span1, "class", "floorplan-plugin__room-size svelte-1ashbdx");
-		},
-		m(target, anchor) {
-			internal.insert(target, span0, anchor);
-			internal.append(span0, t0);
-			internal.insert(target, t1, anchor);
-			internal.insert(target, span1, anchor);
-		},
-		p(ctx, dirty) {
-			if (dirty & /*room*/ 1 && t0_value !== (t0_value = /*room*/ ctx[0].name + "")) internal.set_data(t0, t0_value);
-		},
-		d(detaching) {
-			if (detaching) internal.detach(span0);
-			if (detaching) internal.detach(t1);
-			if (detaching) internal.detach(span1);
-		}
+	$$self.$$set = $$props => {
+		if ('url' in $$props) $$invalidate(0, url = $$props.url);
 	};
-}
 
-function create_fragment$e(ctx) {
-	let div;
+	return [url];
+}
 
-	function select_block_type(ctx, dirty) {
-		if (/*getLabelElement*/ ctx[1] === undefined) return create_if_block$5;
-		if (/*userConfigElement*/ ctx[2]) return create_if_block_1$4;
+class Normalmage extends internal.SvelteComponent {
+	constructor(options) {
+		super();
+		internal.init(this, options, instance$e, create_fragment$e, internal.safe_not_equal, { url: 0 }, add_css$b);
 	}
+}
 
-	let current_block_type = select_block_type(ctx);
-	let if_block = current_block_type && current_block_type(ctx);
+/* src/floorplan/Components/SvgImage.svelte generated by Svelte v3.49.0 */
+
+function add_css$a(target) {
+	internal.append_styles(target, "svelte-ub47ya", ".floorplan-plugin__base-image.svelte-ub47ya{width:100%;height:100%}");
+}
+
+function create_fragment$d(ctx) {
+	let div;
+	let html_tag;
+	let t;
+	let html_tag_1;
 
 	return {
 		c() {
 			div = internal.element("div");
-			if (if_block) if_block.c();
-			internal.attr(div, "class", "floorplan-plugin__room-label-item svelte-1ashbdx");
-			internal.set_style(div, "left", /*left*/ ctx[4], false);
-			internal.set_style(div, "top", /*top*/ ctx[5], false);
-			internal.set_style(div, "font-size", /*fontSize*/ ctx[6], false);
+			html_tag = new internal.HtmlTag(false);
+			t = internal.space();
+			html_tag_1 = new internal.HtmlTag(false);
+			html_tag.a = t;
+			html_tag_1.a = null;
+			internal.attr(div, "class", "floorplan-plugin__base-image svelte-ub47ya");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
-			if (if_block) if_block.m(div, null);
+			html_tag.m(/*svgStyle*/ ctx[1], div);
+			internal.append(div, t);
+			html_tag_1.m(/*content*/ ctx[0], div);
 		},
 		p(ctx, [dirty]) {
-			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
-				if_block.p(ctx, dirty);
-			} else {
-				if (if_block) if_block.d(1);
-				if_block = current_block_type && current_block_type(ctx);
-
-				if (if_block) {
-					if_block.c();
-					if_block.m(div, null);
-				}
-			}
+			if (dirty & /*content*/ 1) html_tag_1.p(/*content*/ ctx[0]);
 		},
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
 			if (detaching) internal.detach(div);
-
-			if (if_block) {
-				if_block.d();
-			}
 		}
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
-	let userConfigElement;
-	let { room } = $$props;
-	let { getLabelElement } = $$props;
-
-	// TODO: 统一这里的判断条件，目前写了多处
-	const bodyWidth = document.body.clientWidth;
+function instance$d($$self, $$props, $$invalidate) {
+	let { content } = $$props;
 
-	const bodyHeight = document.body.clientHeight;
-	const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
-	const roomLabel = room.roomLabel;
-	const left = roomLabel.positionInImage.x * 100 + '%';
-	const top = roomLabel.positionInImage.y * 100 + '%';
-	const fontSize = (bodyWidth < 500 || bodyHeight < 500 ? 10 : 14) / 16 + 'rem';
+	const svgStyle = `
+    <style>
+      svg [type='lineGroup'] path {
+        fill: #ffffff;
+        stroke: #ffffff;
+      }
+      svg [type='lineItemGroup'] g g g g {
+        stroke: #ffffff;
+      }</style>
+  `;
 
 	$$self.$$set = $$props => {
-		if ('room' in $$props) $$invalidate(0, room = $$props.room);
-		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*getLabelElement, room*/ 3) {
-			$$invalidate(2, userConfigElement = getLabelElement?.(room));
-		}
+		if ('content' in $$props) $$invalidate(0, content = $$props.content);
 	};
 
-	return [room, getLabelElement, userConfigElement, roomSizeDes, left, top, fontSize];
+	return [content, svgStyle];
 }
 
-class RoomLabel extends internal.SvelteComponent {
+class SvgImage extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$e, create_fragment$e, internal.safe_not_equal, { room: 0, getLabelElement: 1 }, add_css$a);
+		internal.init(this, options, instance$d, create_fragment$d, internal.safe_not_equal, { content: 0 }, add_css$a);
 	}
 }
 
-/* src/floorplan/ModelFloorplanPlugin/Components/RoomLabels/RoomLabels.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/BaseImage.svelte generated by Svelte v3.49.0 */
 
 function add_css$9(target) {
-	internal.append_styles(target, "svelte-sw25w3", ".floorplan-plugin__room-labels.svelte-sw25w3{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20}");
-}
-
-function get_each_context$4(ctx, list, i) {
-	const child_ctx = ctx.slice();
-	child_ctx[4] = list[i];
-	return child_ctx;
+	internal.append_styles(target, "svelte-ozpg4a", ".floorplan-plugin__base-image.svelte-ozpg4a{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}");
 }
 
-// (8:0) {#if rooms}
-function create_if_block$4(ctx) {
-	let div;
-	let each_blocks = [];
-	let each_1_lookup = new Map();
+// (13:22) 
+function create_if_block_1$4(ctx) {
+	let normalimage;
 	let current;
-	let each_value = /*rooms*/ ctx[1];
-	const get_key = ctx => /*room*/ ctx[4].id;
-
-	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$4(ctx, each_value, i);
-		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
-	}
+	normalimage = new Normalmage({ props: { url: /*imageData*/ ctx[1].url } });
 
 	return {
 		c() {
-			div = internal.element("div");
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			internal.attr(div, "class", "floorplan-plugin__room-labels svelte-sw25w3");
+			internal.create_component(normalimage.$$.fragment);
 		},
 		m(target, anchor) {
-			internal.insert(target, div, anchor);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(div, null);
-			}
-
+			internal.mount_component(normalimage, target, anchor);
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*rooms, getLabelElement*/ 3) {
-				each_value = /*rooms*/ ctx[1];
-				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$4, null, get_each_context$4);
-				internal.check_outros();
-			}
+			const normalimage_changes = {};
+			if (dirty & /*imageData*/ 2) normalimage_changes.url = /*imageData*/ ctx[1].url;
+			normalimage.$set(normalimage_changes);
 		},
 		i(local) {
 			if (current) return;
-
-			for (let i = 0; i < each_value.length; i += 1) {
-				internal.transition_in(each_blocks[i]);
-			}
-
+			internal.transition_in(normalimage.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				internal.transition_out(each_blocks[i]);
-			}
-
+			internal.transition_out(normalimage.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) internal.detach(div);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d();
-			}
+			internal.destroy_component(normalimage, detaching);
 		}
 	};
 }
 
-// (10:4) {#each rooms as room (room.id)}
-function create_each_block$4(key_1, ctx) {
-	let first;
-	let roomlabel;
+// (11:2) {#if svgContent}
+function create_if_block$5(ctx) {
+	let svgimage;
 	let current;
 
-	const roomlabel_spread_levels = [
-		{
-			room: /*room*/ ctx[4],
-			getLabelElement: /*getLabelElement*/ ctx[0]
-		}
-	];
-
-	let roomlabel_props = {};
-
-	for (let i = 0; i < roomlabel_spread_levels.length; i += 1) {
-		roomlabel_props = internal.assign(roomlabel_props, roomlabel_spread_levels[i]);
-	}
-
-	roomlabel = new RoomLabel({ props: roomlabel_props });
+	svgimage = new SvgImage({
+			props: { content: /*svgContent*/ ctx[0] }
+		});
 
 	return {
-		key: key_1,
-		first: null,
 		c() {
-			first = internal.empty();
-			internal.create_component(roomlabel.$$.fragment);
-			this.first = first;
+			internal.create_component(svgimage.$$.fragment);
 		},
 		m(target, anchor) {
-			internal.insert(target, first, anchor);
-			internal.mount_component(roomlabel, target, anchor);
+			internal.mount_component(svgimage, target, anchor);
 			current = true;
 		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
-
-			const roomlabel_changes = (dirty & /*rooms, getLabelElement*/ 3)
-			? internal.get_spread_update(roomlabel_spread_levels, [
-					{
-						room: /*room*/ ctx[4],
-						getLabelElement: /*getLabelElement*/ ctx[0]
-					}
-				])
-			: {};
-
-			roomlabel.$set(roomlabel_changes);
+		p(ctx, dirty) {
+			const svgimage_changes = {};
+			if (dirty & /*svgContent*/ 1) svgimage_changes.content = /*svgContent*/ ctx[0];
+			svgimage.$set(svgimage_changes);
 		},
 		i(local) {
 			if (current) return;
-			internal.transition_in(roomlabel.$$.fragment, local);
+			internal.transition_in(svgimage.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			internal.transition_out(roomlabel.$$.fragment, local);
+			internal.transition_out(svgimage.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) internal.detach(first);
-			internal.destroy_component(roomlabel, detaching);
+			internal.destroy_component(svgimage, detaching);
 		}
 	};
 }
 
-function create_fragment$d(ctx) {
-	let if_block_anchor;
+function create_fragment$c(ctx) {
+	let div;
+	let current_block_type_index;
+	let if_block;
 	let current;
-	let if_block = /*rooms*/ ctx[1] && create_if_block$4(ctx);
+	const if_block_creators = [create_if_block$5, create_if_block_1$4];
+	const if_blocks = [];
+
+	function select_block_type(ctx, dirty) {
+		if (/*svgContent*/ ctx[0]) return 0;
+		if (/*imageData*/ ctx[1]) return 1;
+		return -1;
+	}
+
+	if (~(current_block_type_index = select_block_type(ctx))) {
+		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+	}
 
 	return {
 		c() {
+			div = internal.element("div");
 			if (if_block) if_block.c();
-			if_block_anchor = internal.empty();
+			internal.attr(div, "class", "floorplan-plugin__base-image svelte-ozpg4a");
 		},
 		m(target, anchor) {
-			if (if_block) if_block.m(target, anchor);
-			internal.insert(target, if_block_anchor, anchor);
+			internal.insert(target, div, anchor);
+
+			if (~current_block_type_index) {
+				if_blocks[current_block_type_index].m(div, null);
+			}
+
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*rooms*/ ctx[1]) {
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx);
+
+			if (current_block_type_index === previous_block_index) {
+				if (~current_block_type_index) {
+					if_blocks[current_block_type_index].p(ctx, dirty);
+				}
+			} else {
 				if (if_block) {
-					if_block.p(ctx, dirty);
+					internal.group_outros();
 
-					if (dirty & /*rooms*/ 2) {
-						internal.transition_in(if_block, 1);
-					}
-				} else {
-					if_block = create_if_block$4(ctx);
-					if_block.c();
-					internal.transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+					internal.transition_out(if_blocks[previous_block_index], 1, 1, () => {
+						if_blocks[previous_block_index] = null;
+					});
+
+					internal.check_outros();
 				}
-			} else if (if_block) {
-				internal.group_outros();
 
-				internal.transition_out(if_block, 1, 1, () => {
-					if_block = null;
-				});
+				if (~current_block_type_index) {
+					if_block = if_blocks[current_block_type_index];
 
-				internal.check_outros();
+					if (!if_block) {
+						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+						if_block.c();
+					} else {
+						if_block.p(ctx, dirty);
+					}
+
+					internal.transition_in(if_block, 1);
+					if_block.m(div, null);
+				} else {
+					if_block = null;
+				}
 			}
 		},
 		i(local) {
@@ -751,434 +619,377 @@ function create_fragment$d(ctx) {
 			current = false;
 		},
 		d(detaching) {
-			if (if_block) if_block.d(detaching);
-			if (detaching) internal.detach(if_block_anchor);
+			if (detaching) internal.detach(div);
+
+			if (~current_block_type_index) {
+				if_blocks[current_block_type_index].d();
+			}
 		}
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
-	let rooms;
+function instance$c($$self, $$props, $$invalidate) {
+	let imageData;
+	let svgContent;
+	var _a, _b;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
-	let { getLabelElement } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
 		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
-		if ('getLabelElement' in $$props) $$invalidate(0, getLabelElement = $$props.getLabelElement);
 	};
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
-			$$invalidate(1, rooms = floorplanData.floorDatas[floorIndex].rooms);
+			$$invalidate(1, imageData = floorplanData.outlines[floorIndex]);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, _a, floorIndex, _b*/ 60) {
+			$$invalidate(0, svgContent = $$invalidate(5, _b = $$invalidate(4, _a = floorplanData.outlines) === null || _a === void 0
+			? void 0
+			: _a[floorIndex]) === null || _b === void 0
+			? void 0
+			: _b.svgContent);
 		}
 	};
 
-	return [getLabelElement, rooms, floorIndex, floorplanData];
+	return [svgContent, imageData, floorIndex, floorplanData, _a, _b];
 }
 
-class RoomLabels extends internal.SvelteComponent {
+class BaseImage extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-
-		internal.init(
-			this,
-			options,
-			instance$d,
-			create_fragment$d,
-			internal.safe_not_equal,
-			{
-				floorIndex: 2,
-				floorplanData: 3,
-				getLabelElement: 0
-			},
-			add_css$9
-		);
+		internal.init(this, options, instance$c, create_fragment$c, internal.safe_not_equal, { floorIndex: 2, floorplanData: 3 }, add_css$9);
 	}
 }
 
-/**
- * 判断对象是否为`null`或`undefined`。
- * @param
- * @return
- */
-/**
- * 判断对象不为`null`或`undefined`。
- */
-function notNil(value) {
-    return value !== null && value !== undefined;
-}
-
-/* src/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleItem.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomLabels/RoomLabel.svelte generated by Svelte v3.49.0 */
 
 function add_css$8(target) {
-	internal.append_styles(target, "svelte-1rr09in", ".floorplan-plugin__rule-labels.svelte-1rr09in{position:absolute;height:5px;display:flex;align-items:center}.floorplan-plugin__rule-labels-top.svelte-1rr09in{left:0;top:0}.floorplan-plugin__rule-labels-bottom.svelte-1rr09in{left:0;bottom:0}.floorplan-plugin__rule-labels-left.svelte-1rr09in{bottom:0;left:0}.floorplan-plugin__rule-labels-right.svelte-1rr09in{bottom:0;right:0}.floorplan-plugin__rule-line.svelte-1rr09in{background:#fff;opacity:0.05;width:100%;height:1px}.floorplan-plugin__rule-scale.svelte-1rr09in{position:absolute;background:#fff;opacity:0.05;transform-origin:center;width:1px;height:5px}.floorplan-plugin__text-wrapper.svelte-1rr09in{width:0;height:0;position:absolute}.floorplan-plugin__text-wrapper.floorplan-plugin__text-wrapper--is-left-or-top.svelte-1rr09in{top:10px}.floorplan-plugin__text-wrapper.floorplan-plugin__text-wrapper-is-right-or-bottom.svelte-1rr09in{bottom:10px}.floorplan-plugin__rule-text.svelte-1rr09in{position:absolute;width:max-content;display:block;transform:translate(-50%, -50%) rotate(180deg);font-size:10px;color:#fff;opacity:0.2}.floorplan-plugin__rule-text.is-row.svelte-1rr09in{transform:translate(-50%, -50%)}");
+	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}");
 }
 
-function get_each_context$3(ctx, list, i) {
-	const child_ctx = ctx.slice();
-	child_ctx[24] = list[i];
-	child_ctx[26] = i;
-	return child_ctx;
-}
-
-function get_each_context_1(ctx, list, i) {
-	const child_ctx = ctx.slice();
-	child_ctx[27] = list[i];
-	child_ctx[29] = i;
-	return child_ctx;
-}
-
-// (66:2) {#each positionPxArray as position, positionIndex (positionIndex)}
-function create_each_block_1(key_1, ctx) {
-	let div;
-	let style_left = `${/*position*/ ctx[27]}px`;
+// (95:30) 
+function create_if_block_1$3(ctx) {
+	let html_tag;
+	let raw_value = /*userConfigElement*/ ctx[4].outerHTML + "";
+	let html_anchor;
 
 	return {
-		key: key_1,
-		first: null,
 		c() {
-			div = internal.element("div");
-			internal.attr(div, "class", "floorplan-plugin__rule-scale svelte-1rr09in");
-			internal.set_style(div, "left", style_left, false);
-			this.first = div;
+			html_tag = new internal.HtmlTag(false);
+			html_anchor = internal.empty();
+			html_tag.a = html_anchor;
 		},
 		m(target, anchor) {
-			internal.insert(target, div, anchor);
+			html_tag.m(raw_value, target, anchor);
+			internal.insert(target, html_anchor, anchor);
 		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
+		p(ctx, dirty) {
+			if (dirty & /*userConfigElement*/ 16 && raw_value !== (raw_value = /*userConfigElement*/ ctx[4].outerHTML + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
-			if (detaching) internal.detach(div);
+			if (detaching) internal.detach(html_anchor);
+			if (detaching) html_tag.d();
 		}
 	};
 }
 
-// (69:2) {#each textArray as textItem, textItemIndex (textItemIndex)}
-function create_each_block$3(key_1, ctx) {
-	let div;
-	let span;
-	let t0_value = /*textItem*/ ctx[24].distance + "";
+// (89:2) {#if getLabelElement === undefined}
+function create_if_block$4(ctx) {
+	let span0;
+	let t0_value = /*room*/ ctx[0].name + "";
 	let t0;
 	let t1;
-	let style_left = `${/*textItem*/ ctx[24].positionPx}px`;
+	let span1;
 
 	return {
-		key: key_1,
-		first: null,
 		c() {
-			div = internal.element("div");
-			span = internal.element("span");
+			span0 = internal.element("span");
 			t0 = internal.text(t0_value);
 			t1 = internal.space();
-			internal.attr(span, "class", "floorplan-plugin__rule-text svelte-1rr09in");
-			internal.toggle_class(span, "is-row", /*isRow*/ ctx[5]);
-			internal.attr(div, "class", "floorplan-plugin__text-wrapper svelte-1rr09in");
-			internal.toggle_class(div, "floorplan-plugin__text-wrapper--is-left-or-top", /*isLeft*/ ctx[3] || /*isTop*/ ctx[1]);
-			internal.toggle_class(div, "floorplan-plugin__text-wrapper-is-right-or-bottom", /*isRight*/ ctx[4] || /*isBottom*/ ctx[2]);
-			internal.set_style(div, "left", style_left, false);
-			this.first = div;
+			span1 = internal.element("span");
+			span1.textContent = `${/*roomSizeDes*/ ctx[5]}`;
+			internal.attr(span0, "class", "floorplan-plugin__room-name");
+			internal.attr(span1, "class", "floorplan-plugin__room-size svelte-12pzct5");
 		},
 		m(target, anchor) {
-			internal.insert(target, div, anchor);
-			internal.append(div, span);
-			internal.append(span, t0);
-			internal.append(div, t1);
+			internal.insert(target, span0, anchor);
+			internal.append(span0, t0);
+			internal.insert(target, t1, anchor);
+			internal.insert(target, span1, anchor);
 		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
+		p(ctx, dirty) {
+			if (dirty & /*room*/ 1 && t0_value !== (t0_value = /*room*/ ctx[0].name + "")) internal.set_data(t0, t0_value);
 		},
 		d(detaching) {
-			if (detaching) internal.detach(div);
+			if (detaching) internal.detach(span0);
+			if (detaching) internal.detach(t1);
+			if (detaching) internal.detach(span1);
 		}
 	};
 }
 
-function create_fragment$c(ctx) {
-	let div1;
-	let div0;
-	let t0;
-	let each_blocks_1 = [];
-	let each0_lookup = new Map();
-	let t1;
-	let each_blocks = [];
-	let each1_lookup = new Map();
-	let div1_class_value;
-	let each_value_1 = /*positionPxArray*/ ctx[6];
-	const get_key = ctx => /*positionIndex*/ ctx[29];
+function create_fragment$b(ctx) {
+	let div;
 
-	for (let i = 0; i < each_value_1.length; i += 1) {
-		let child_ctx = get_each_context_1(ctx, each_value_1, i);
-		let key = get_key(child_ctx);
-		each0_lookup.set(key, each_blocks_1[i] = create_each_block_1(key, child_ctx));
+	function select_block_type(ctx, dirty) {
+		if (/*getLabelElement*/ ctx[1] === undefined) return create_if_block$4;
+		if (/*userConfigElement*/ ctx[4]) return create_if_block_1$3;
 	}
 
-	let each_value = /*textArray*/ ctx[10];
-	const get_key_1 = ctx => /*textItemIndex*/ ctx[26];
-
-	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$3(ctx, each_value, i);
-		let key = get_key_1(child_ctx);
-		each1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
-	}
+	let current_block_type = select_block_type(ctx);
+	let if_block = current_block_type && current_block_type(ctx);
 
 	return {
 		c() {
-			div1 = internal.element("div");
-			div0 = internal.element("div");
-			t0 = internal.space();
-
-			for (let i = 0; i < each_blocks_1.length; i += 1) {
-				each_blocks_1[i].c();
-			}
-
-			t1 = internal.space();
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			internal.attr(div0, "class", "floorplan-plugin__rule-line svelte-1rr09in");
-			internal.attr(div1, "class", div1_class_value = "floorplan-plugin__rule-labels floorplan-plugin__rule-labels-" + /*type*/ ctx[0] + " svelte-1rr09in");
-			internal.set_style(div1, "width", /*width*/ ctx[9], false);
-			internal.set_style(div1, "transform", /*transform*/ ctx[7], false);
-			internal.set_style(div1, "transform-origin", /*transformOrigin*/ ctx[8], false);
+			div = internal.element("div");
+			if (if_block) if_block.c();
+			internal.attr(div, "class", "floorplan-plugin__room-label-item svelte-12pzct5");
+			internal.set_style(div, "left", /*left*/ ctx[6], false);
+			internal.set_style(div, "top", /*top*/ ctx[7], false);
+			internal.set_style(div, "font-size", /*fontSize*/ ctx[8], false);
+			internal.set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0', false);
 		},
 		m(target, anchor) {
-			internal.insert(target, div1, anchor);
-			internal.append(div1, div0);
-			internal.append(div1, t0);
-
-			for (let i = 0; i < each_blocks_1.length; i += 1) {
-				each_blocks_1[i].m(div1, null);
-			}
-
-			internal.append(div1, t1);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(div1, null);
-			}
+			internal.insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+			/*div_binding*/ ctx[15](div);
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*positionPxArray*/ 64) {
-				each_value_1 = /*positionPxArray*/ ctx[6];
-				each_blocks_1 = internal.update_keyed_each(each_blocks_1, dirty, get_key, 1, ctx, each_value_1, each0_lookup, div1, internal.destroy_block, create_each_block_1, t1, get_each_context_1);
-			}
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
 
-			if (dirty & /*isLeft, isTop, isRight, isBottom, textArray, isRow*/ 1086) {
-				each_value = /*textArray*/ ctx[10];
-				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key_1, 1, ctx, each_value, each1_lookup, div1, internal.destroy_block, create_each_block$3, null, get_each_context$3);
+				if (if_block) {
+					if_block.c();
+					if_block.m(div, null);
+				}
 			}
 
-			if (dirty & /*type*/ 1 && div1_class_value !== (div1_class_value = "floorplan-plugin__rule-labels floorplan-plugin__rule-labels-" + /*type*/ ctx[0] + " svelte-1rr09in")) {
-				internal.attr(div1, "class", div1_class_value);
+			if (dirty & /*labelVisible*/ 8) {
+				internal.set_style(div, "opacity", /*labelVisible*/ ctx[3] ? '1' : '0', false);
 			}
 		},
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
-			if (detaching) internal.detach(div1);
+			if (detaching) internal.detach(div);
 
-			for (let i = 0; i < each_blocks_1.length; i += 1) {
-				each_blocks_1[i].d();
+			if (if_block) {
+				if_block.d();
 			}
 
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d();
-			}
+			/*div_binding*/ ctx[15](null);
 		}
 	};
 }
 
-const padding = 1000;
+function isPointInPolygon(point, polygon) {
+	const x = point[0];
+	const y = point[1];
+	let inside = false;
+
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const xi = polygon[i][0];
+		const yi = polygon[i][1];
+		const xj = polygon[j][0];
+		const yj = polygon[j][1];
+		const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+		if (intersect) inside = !inside;
+	}
 
-function instance$c($$self, $$props, $$invalidate) {
+	return inside;
+}
+
+function instance$b($$self, $$props, $$invalidate) {
+	let isLabelInRoom;
+	let userConfigElement;
+	let labelVisible;
 	let { pxmm } = $$props;
-	let { type } = $$props;
-	let { data } = $$props;
-	let { bounding } = $$props;
-	const isTop = type === 'top';
-	const isBottom = type === 'bottom';
-	const isLeft = type === 'left';
-	const isRight = type === 'right';
-	const isRow = isTop || isBottom;
+	let { room } = $$props;
+	let { hoveredRoom } = $$props;
+	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
+
+	function isLabelInRoomCurry(room, labelElementSize) {
+		if (labelElementSize.width === 0 || labelElementSize.height === 0) return () => false;
+		const polygon = room.path.map(({ x, y }) => [x, y]);
+		const labelPosition = room.roomLabel.position;
+		const { x, y } = labelPosition;
+		const { width, height } = labelElementSize;
+		const halfWidth = width / 2;
+		const halfHeight = height / 2;
+
+		return function isLabelInRoom(pxmm) {
+			const clientX = x * pxmm;
+			const clientY = y * pxmm;
+			const clientPolygon = polygon.map(([x, y]) => [x * pxmm, y * pxmm]);
+
+			// const
+			/** 围成 labelRect 的四个点
+ * 1----0
+ * |    |
+ * 2----3
+ */
+			const labelRectClientPoints = [
+				[clientX + halfWidth, clientY - halfHeight],
+				[clientX - halfWidth, clientY - halfHeight],
+				[clientX - halfWidth, clientY + halfHeight],
+				[clientX + halfWidth, clientY + halfHeight]
+			];
+
+			return labelRectClientPoints.every(point => isPointInPolygon(point, clientPolygon));
+		};
+	}
 
-	// 计算每一段墙的长度，以及墙两侧点距离标尺初始点的像素值
-	const positionArray = data.map(([start, end]) => isRow ? [start.x, end.x] : [start.y, end.y]).flat().sort().filter((x, index, arr) => {
-		if (index === 0) return true;
-		return x !== arr[index - 1];
+	// ========== 获取设备宽高像素 ==========
+	// TODO: 统一这里的判断条件，目前写了多处
+	const bodyWidth = document.body.clientWidth;
+
+	const bodyHeight = document.body.clientHeight;
+	const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
+
+	// ====================================
+	const roomLabel = room.roomLabel;
+
+	const left = roomLabel.positionInImage.x * 100 + '%';
+	const top = roomLabel.positionInImage.y * 100 + '%';
+
+	// 屏幕宽或高小于 500px 时，用 10px 字体，否则用 14px
+	const fontSize = (bodyWidth < 500 || bodyHeight < 500 ? 10 : 14) / 16 + 'rem';
+
+	let isHoverd = false;
+	let labelElement;
+	let labelElementSize;
+
+	hoveredRoom.subscribe(function onHoverdRoomUpdate(_room) {
+		$$invalidate(12, isHoverd = !!_room && _room.id === room.id);
+	});
+
+	svelte.onMount(() => {
+		// Label 能不能展示只跟房间大小有关
+		// 计算 LabelElement 宽高
+		const labelDomRect = labelElement === null || labelElement === void 0
+		? void 0
+		: labelElement.getClientRects()[0];
+
+		$$invalidate(13, labelElementSize = {
+			width: labelDomRect.width,
+			height: labelDomRect.height
+		});
 	});
 
-	const minPosition = positionArray[0];
-	const maxPosition = positionArray.slice(-1)[0];
-	const length = maxPosition - minPosition;
-	const minBounding = isRow ? bounding.min.x : bounding.min.y;
-	const lengthPx = length * pxmm;
-	const positionPxArray = positionArray.map(x => (x - minPosition) / length * lengthPx);
-
-	// 在主要方向上的偏移量，上下的标尺是距离图片左侧的长度，左右的标尺是距离图片底部的距离
-	const translateMain = (minPosition - minBounding) * pxmm;
-
-	// 在次要方向的偏移量，希望达到的效果是标尺轴距离户型图边界 27px，但是图片自身是带有 1000mm 的边界，所以在计算时需要减去这个边界
-	const translateSecond = 27 - padding * pxmm;
-
-	const translate = (() => {
-		if (isTop) return `translate(${translateMain}px, ${-translateSecond}px)`;
-		if (isBottom) return `translate(${translateMain}px, ${translateSecond}px)`;
-		if (isLeft) return `translate(${-translateSecond}px, ${-translateMain}px)`;
-		if (isRight) return `translate(${translateSecond}px, ${-translateMain - lengthPx}px)`;
-	})();
-
-	const rotate = isRow ? 'rotate(0)' : 'rotate(-90deg)';
-	const transform = `${translate} ${rotate}`;
-	const transformOrigin = `${isRight ? 'right' : 'left'} ${isTop ? 'top' : 'bottom'}`;
-	const width = lengthPx + 'px';
-
-	// 把点位的户型图坐标转成距离起始位置的像素值
-	const textArray = positionArray.map((position, index, array) => {
-		if (index === 0) return null;
-		const distance = position - array[index - 1];
-		const positionPx = (array[index - 1] + distance / 2 - minPosition) / length * lengthPx;
-		return { distance, positionPx };
-	}).filter(notNil).filter(item => item.distance / length > 0.12);
+	function div_binding($$value) {
+		internal.binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			labelElement = $$value;
+			$$invalidate(2, labelElement);
+		});
+	}
 
 	$$self.$$set = $$props => {
-		if ('pxmm' in $$props) $$invalidate(11, pxmm = $$props.pxmm);
-		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('data' in $$props) $$invalidate(12, data = $$props.data);
-		if ('bounding' in $$props) $$invalidate(13, bounding = $$props.bounding);
+		if ('pxmm' in $$props) $$invalidate(9, pxmm = $$props.pxmm);
+		if ('room' in $$props) $$invalidate(0, room = $$props.room);
+		if ('hoveredRoom' in $$props) $$invalidate(10, hoveredRoom = $$props.hoveredRoom);
+		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(11, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*labelElementSize, room*/ 8193) {
+			$$invalidate(14, isLabelInRoom = labelElementSize
+			? isLabelInRoomCurry(room, labelElementSize)
+			: undefined);
+		}
+
+		if ($$self.$$.dirty & /*getLabelElement, room*/ 3) {
+			$$invalidate(4, userConfigElement = getLabelElement === null || getLabelElement === void 0
+			? void 0
+			: getLabelElement(room));
+		}
+
+		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 23040) {
+			$$invalidate(3, labelVisible = adaptiveRoomLabelVisibleEnable
+			? isHoverd
+				? true
+				: !!(isLabelInRoom === null || isLabelInRoom === void 0
+					? void 0
+					: isLabelInRoom(pxmm))
+			: true);
+		}
 	};
 
 	return [
-		type,
-		isTop,
-		isBottom,
-		isLeft,
-		isRight,
-		isRow,
-		positionPxArray,
-		transform,
-		transformOrigin,
-		width,
-		textArray,
+		room,
+		getLabelElement,
+		labelElement,
+		labelVisible,
+		userConfigElement,
+		roomSizeDes,
+		left,
+		top,
+		fontSize,
 		pxmm,
-		data,
-		bounding
+		hoveredRoom,
+		adaptiveRoomLabelVisibleEnable,
+		isHoverd,
+		labelElementSize,
+		isLabelInRoom,
+		div_binding
 	];
 }
 
-class RuleItem extends internal.SvelteComponent {
+class RoomLabel extends internal.SvelteComponent {
 	constructor(options) {
 		super();
 
 		internal.init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$b,
+			create_fragment$b,
 			internal.safe_not_equal,
 			{
-				pxmm: 11,
-				type: 0,
-				data: 12,
-				bounding: 13
+				pxmm: 9,
+				room: 0,
+				hoveredRoom: 10,
+				getLabelElement: 1,
+				adaptiveRoomLabelVisibleEnable: 11
 			},
 			add_css$8
 		);
 	}
 }
 
-/* src/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleLabels.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomLabels/RoomLabels.svelte generated by Svelte v3.49.0 */
 
-function get_each_context$2(ctx, list, i) {
-	const child_ctx = ctx.slice();
-	child_ctx[7] = list[i][0];
-	child_ctx[8] = list[i][1];
-	return child_ctx;
+function add_css$7(target) {
+	internal.append_styles(target, "svelte-13xux0b", ".floorplan-plugin__room-labels.svelte-13xux0b{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20;pointer-events:none}");
 }
 
-// (12:2) {#each ruleLabelArray as [type, data] (type)}
-function create_each_block$2(key_1, ctx) {
-	let first;
-	let ruleitem;
-	let current;
-
-	const ruleitem_spread_levels = [
-		{
-			type: /*type*/ ctx[7],
-			data: /*data*/ ctx[8],
-			pxmm: /*pxmm*/ ctx[0],
-			bounding: /*bounding*/ ctx[2]
-		}
-	];
-
-	let ruleitem_props = {};
-
-	for (let i = 0; i < ruleitem_spread_levels.length; i += 1) {
-		ruleitem_props = internal.assign(ruleitem_props, ruleitem_spread_levels[i]);
-	}
-
-	ruleitem = new RuleItem({ props: ruleitem_props });
-
-	return {
-		key: key_1,
-		first: null,
-		c() {
-			first = internal.empty();
-			internal.create_component(ruleitem.$$.fragment);
-			this.first = first;
-		},
-		m(target, anchor) {
-			internal.insert(target, first, anchor);
-			internal.mount_component(ruleitem, target, anchor);
-			current = true;
-		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
-
-			const ruleitem_changes = (dirty & /*ruleLabelArray, pxmm, bounding*/ 7)
-			? internal.get_spread_update(ruleitem_spread_levels, [
-					{
-						type: /*type*/ ctx[7],
-						data: /*data*/ ctx[8],
-						pxmm: /*pxmm*/ ctx[0],
-						bounding: /*bounding*/ ctx[2]
-					}
-				])
-			: {};
-
-			ruleitem.$set(ruleitem_changes);
-		},
-		i(local) {
-			if (current) return;
-			internal.transition_in(ruleitem.$$.fragment, local);
-			current = true;
-		},
-		o(local) {
-			internal.transition_out(ruleitem.$$.fragment, local);
-			current = false;
-		},
-		d(detaching) {
-			if (detaching) internal.detach(first);
-			internal.destroy_component(ruleitem, detaching);
-		}
-	};
+function get_each_context$5(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[9] = list[i];
+	return child_ctx;
 }
 
-function create_fragment$b(ctx) {
+// (17:0) {#if rooms}
+function create_if_block$3(ctx) {
 	let div;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
+	let div_resize_listener;
 	let current;
-	let each_value = /*ruleLabelArray*/ ctx[1];
-	const get_key = ctx => /*type*/ ctx[7];
+	let each_value = /*rooms*/ ctx[5];
+	const get_key = ctx => /*room*/ ctx[9].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$2(ctx, each_value, i);
+		let child_ctx = get_each_context$5(ctx, each_value, i);
 		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block$2(key, child_ctx));
+		each_1_lookup.set(key, each_blocks[i] = create_each_block$5(key, child_ctx));
 	}
 
 	return {
@@ -1189,7 +1000,8 @@ function create_fragment$b(ctx) {
 				each_blocks[i].c();
 			}
 
-			internal.attr(div, "class", "floorplan-plugin__rulelabels");
+			internal.attr(div, "class", "floorplan-plugin__room-labels svelte-13xux0b");
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[8].call(div));
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -1198,13 +1010,14 @@ function create_fragment$b(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[8].bind(div));
 			current = true;
 		},
-		p(ctx, [dirty]) {
-			if (dirty & /*ruleLabelArray, pxmm, bounding*/ 7) {
-				each_value = /*ruleLabelArray*/ ctx[1];
+		p(ctx, dirty) {
+			if (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55) {
+				each_value = /*rooms*/ ctx[5];
 				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$2, null, get_each_context$2);
+				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$5, null, get_each_context$5);
 				internal.check_outros();
 			}
 		},
@@ -1230,376 +1043,743 @@ function create_fragment$b(ctx) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].d();
 			}
+
+			div_resize_listener();
 		}
 	};
 }
 
-function instance$b($$self, $$props, $$invalidate) {
-	let bounding;
-	let ruleLabelData;
-	let ruleLabelDataKeys;
-	let ruleLabelArray;
-	let { pxmm } = $$props;
-	let { floorIndex } = $$props;
-	let { floorplanData } = $$props;
+// (19:4) {#each rooms as room (room.id)}
+function create_each_block$5(key_1, ctx) {
+	let first;
+	let roomlabel;
+	let current;
 
-	$$self.$$set = $$props => {
-		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
-		if ('floorIndex' in $$props) $$invalidate(3, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
-	};
-
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData*/ 16) {
-			$$invalidate(2, bounding = floorplanData.bounding);
-		}
-
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 24) {
-			$$invalidate(5, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+	const roomlabel_spread_levels = [
+		{
+			pxmm: /*pxmm*/ ctx[4],
+			room: /*room*/ ctx[9],
+			getLabelElement: /*getLabelElement*/ ctx[1],
+			hoveredRoom: /*hoveredRoom*/ ctx[0],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
 		}
+	];
 
-		if ($$self.$$.dirty & /*ruleLabelData*/ 32) {
-			$$invalidate(6, ruleLabelDataKeys = Object.keys(ruleLabelData));
-		}
+	let roomlabel_props = {};
 
-		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 96) {
-			$$invalidate(1, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
-		}
-	};
+	for (let i = 0; i < roomlabel_spread_levels.length; i += 1) {
+		roomlabel_props = internal.assign(roomlabel_props, roomlabel_spread_levels[i]);
+	}
 
-	return [
-		pxmm,
-		ruleLabelArray,
-		bounding,
-		floorIndex,
-		floorplanData,
-		ruleLabelData,
-		ruleLabelDataKeys
-	];
-}
+	roomlabel = new RoomLabel({ props: roomlabel_props });
 
-class RuleLabels extends internal.SvelteComponent {
-	constructor(options) {
-		super();
-		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { pxmm: 0, floorIndex: 3, floorplanData: 4 });
-	}
-}
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = internal.empty();
+			internal.create_component(roomlabel.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			internal.insert(target, first, anchor);
+			internal.mount_component(roomlabel, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
 
-/* src/floorplan/Components/Normalmage.svelte generated by Svelte v3.47.0 */
+			const roomlabel_changes = (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55)
+			? internal.get_spread_update(roomlabel_spread_levels, [
+					{
+						pxmm: /*pxmm*/ ctx[4],
+						room: /*room*/ ctx[9],
+						getLabelElement: /*getLabelElement*/ ctx[1],
+						hoveredRoom: /*hoveredRoom*/ ctx[0],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
+					}
+				])
+			: {};
 
-function add_css$7(target) {
-	internal.append_styles(target, "svelte-1cuuebb", "img.svelte-1cuuebb{width:100%;height:100%}");
+			roomlabel.$set(roomlabel_changes);
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(roomlabel.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(roomlabel.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) internal.detach(first);
+			internal.destroy_component(roomlabel, detaching);
+		}
+	};
 }
 
 function create_fragment$a(ctx) {
-	let img;
-	let img_src_value;
+	let if_block_anchor;
+	let current;
+	let if_block = /*rooms*/ ctx[5] && create_if_block$3(ctx);
 
 	return {
 		c() {
-			img = internal.element("img");
-			if (!internal.src_url_equal(img.src, img_src_value = /*url*/ ctx[0])) internal.attr(img, "src", img_src_value);
-			internal.attr(img, "alt", "floorplan iamge");
-			internal.attr(img, "class", "svelte-1cuuebb");
+			if (if_block) if_block.c();
+			if_block_anchor = internal.empty();
 		},
 		m(target, anchor) {
-			internal.insert(target, img, anchor);
+			if (if_block) if_block.m(target, anchor);
+			internal.insert(target, if_block_anchor, anchor);
+			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*url*/ 1 && !internal.src_url_equal(img.src, img_src_value = /*url*/ ctx[0])) {
-				internal.attr(img, "src", img_src_value);
+			if (/*rooms*/ ctx[5]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*rooms*/ 32) {
+						internal.transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block$3(ctx);
+					if_block.c();
+					internal.transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				internal.group_outros();
+
+				internal.transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				internal.check_outros();
 			}
 		},
-		i: internal.noop,
-		o: internal.noop,
+		i(local) {
+			if (current) return;
+			internal.transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(if_block);
+			current = false;
+		},
 		d(detaching) {
-			if (detaching) internal.detach(img);
+			if (if_block) if_block.d(detaching);
+			if (detaching) internal.detach(if_block_anchor);
 		}
 	};
 }
 
 function instance$a($$self, $$props, $$invalidate) {
-	let { url } = $$props;
+	let rooms;
+	let { floorIndex } = $$props;
+	let { floorplanData } = $$props;
+	let { hoveredRoom } = $$props;
+	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
+	let clientWidth = 0;
+	let pxmm = 0;
+
+	function div_elementresize_handler() {
+		clientWidth = this.clientWidth;
+		$$invalidate(3, clientWidth);
+	}
 
 	$$self.$$set = $$props => {
-		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+		if ('floorIndex' in $$props) $$invalidate(6, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(7, floorplanData = $$props.floorplanData);
+		if ('hoveredRoom' in $$props) $$invalidate(0, hoveredRoom = $$props.hoveredRoom);
+		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(2, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
-	return [url];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 192) {
+			$$invalidate(5, rooms = floorplanData.floorDatas[floorIndex].rooms);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, clientWidth*/ 136) {
+			{
+				const { max, min } = floorplanData.bounding;
+				const boundingWidth = max.x - min.x;
+				$$invalidate(4, pxmm = clientWidth / boundingWidth);
+			}
+		}
+	};
+
+	return [
+		hoveredRoom,
+		getLabelElement,
+		adaptiveRoomLabelVisibleEnable,
+		clientWidth,
+		pxmm,
+		rooms,
+		floorIndex,
+		floorplanData,
+		div_elementresize_handler
+	];
 }
 
-class Normalmage extends internal.SvelteComponent {
+class RoomLabels extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$a, create_fragment$a, internal.safe_not_equal, { url: 0 }, add_css$7);
+
+		internal.init(
+			this,
+			options,
+			instance$a,
+			create_fragment$a,
+			internal.safe_not_equal,
+			{
+				floorIndex: 6,
+				floorplanData: 7,
+				hoveredRoom: 0,
+				getLabelElement: 1,
+				adaptiveRoomLabelVisibleEnable: 2
+			},
+			add_css$7
+		);
 	}
 }
 
-/* src/floorplan/Components/SvgImage.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RuleLabels/RuleItem.svelte generated by Svelte v3.49.0 */
 
 function add_css$6(target) {
-	internal.append_styles(target, "svelte-1qqy56u", ".floorplan-plugin__base-image.svelte-1qqy56u{width:100%;height:100%}");
+	internal.append_styles(target, "svelte-xt7p1v", ".floorplan-plugin__rule-labels.svelte-xt7p1v.svelte-xt7p1v{position:absolute;display:flex}.floorplan-plugin__rule-labels--top.svelte-xt7p1v.svelte-xt7p1v{left:0;top:-1.25rem}.floorplan-plugin__rule-labels--bottom.svelte-xt7p1v.svelte-xt7p1v{left:0;bottom:-1.25rem}.floorplan-plugin__rule-labels--left.svelte-xt7p1v.svelte-xt7p1v{top:0;left:-1.25rem}.floorplan-plugin__rule-labels--right.svelte-xt7p1v.svelte-xt7p1v{top:0;right:-1.25rem}.floorplan-plugin__rule-line.svelte-xt7p1v.svelte-xt7p1v{background:#fff;opacity:0.05;width:100%;height:100%}.floorplan-plugin__rule-scale-wrapper.svelte-xt7p1v.svelte-xt7p1v{position:absolute;width:0.3125rem;height:100%;left:50%;top:0;transform:translateX(-50%)}.floorplan-plugin__rule-labels.is-row.svelte-xt7p1v .floorplan-plugin__rule-scale-wrapper.svelte-xt7p1v{width:100%;height:0.3125rem;top:50%;left:0;transform:translateY(-50%)}.floorplan-plugin__rule-scale.svelte-xt7p1v.svelte-xt7p1v{position:absolute;background:#fff;opacity:0.05;width:100%;height:0.0625rem}.floorplan-plugin__rule-labels.is-row.svelte-xt7p1v .floorplan-plugin__rule-scale.svelte-xt7p1v{width:0.0625rem;height:100%}.floorplan-plugin__rule-text-wrapper.svelte-xt7p1v.svelte-xt7p1v{position:absolute}.floorplan-plugin__rule-labels--top.svelte-xt7p1v .floorplan-plugin__rule-text-wrapper.svelte-xt7p1v{width:100%;height:0;top:0.625rem}.floorplan-plugin__rule-labels--bottom.svelte-xt7p1v .floorplan-plugin__rule-text-wrapper.svelte-xt7p1v{width:100%;height:0;bottom:0.625rem}.floorplan-plugin__rule-labels--left.svelte-xt7p1v .floorplan-plugin__rule-text-wrapper.svelte-xt7p1v{width:0;height:100%;left:0.625rem}.floorplan-plugin__rule-labels--right.svelte-xt7p1v .floorplan-plugin__rule-text-wrapper.svelte-xt7p1v{width:0;height:100%;right:0.625rem}.floorplan-plugin__rule-text-item.svelte-xt7p1v.svelte-xt7p1v{width:0;height:0;position:absolute;transform:rotate(90deg)}.floorplan-plugin__rule-labels.is-row.svelte-xt7p1v .floorplan-plugin__rule-text-item.svelte-xt7p1v{transform:rotate(0)}.floorplan-plugin__rule-text.svelte-xt7p1v.svelte-xt7p1v{width:-webkit-max-content;width:-moz-max-content;width:max-content;transform:translate(-50%, -50%);font-size:0.625rem;color:#fff;opacity:0.2}");
 }
 
-function create_fragment$9(ctx) {
+function get_each_context$4(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[10] = list[i];
+	child_ctx[12] = i;
+	return child_ctx;
+}
+
+function get_each_context_1(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[13] = list[i];
+	return child_ctx;
+}
+
+// (47:4) {#each rulerLabels as rulerLabel}
+function create_each_block_1(ctx) {
 	let div;
-	let html_tag;
-	let t;
-	let html_tag_1;
 
 	return {
 		c() {
 			div = internal.element("div");
-			html_tag = new internal.HtmlTag();
-			t = internal.space();
-			html_tag_1 = new internal.HtmlTag();
-			html_tag.a = t;
-			html_tag_1.a = null;
-			internal.attr(div, "class", "floorplan-plugin__base-image svelte-1qqy56u");
+			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);
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
-			html_tag.m(/*svgStyle*/ ctx[1], div);
-			internal.append(div, t);
-			html_tag_1.m(/*content*/ ctx[0], div);
+		},
+		p: internal.noop,
+		d(detaching) {
+			if (detaching) internal.detach(div);
+		}
+	};
+}
+
+// (56:4) {#each rulerTexts as textItem, textItemIndex (textItemIndex)}
+function create_each_block$4(key_1, ctx) {
+	let div1;
+	let div0;
+	let t0_value = /*textItem*/ ctx[10].distance + "";
+	let t0;
+	let t1;
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			div1 = internal.element("div");
+			div0 = internal.element("div");
+			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.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);
+			this.first = div1;
+		},
+		m(target, anchor) {
+			internal.insert(target, div1, anchor);
+			internal.append(div1, div0);
+			internal.append(div0, t0);
+			internal.append(div1, t1);
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+		},
+		d(detaching) {
+			if (detaching) internal.detach(div1);
+		}
+	};
+}
+
+function create_fragment$9(ctx) {
+	let div3;
+	let div0;
+	let t0;
+	let div1;
+	let t1;
+	let div2;
+	let each_blocks = [];
+	let each1_lookup = new Map();
+	let div3_class_value;
+	let each_value_1 = /*rulerLabels*/ ctx[2];
+	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];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context$4(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div3 = internal.element("div");
+			div0 = internal.element("div");
+			t0 = internal.space();
+			div1 = internal.element("div");
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				each_blocks_1[i].c();
+			}
+
+			t1 = internal.space();
+			div2 = internal.element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			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.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);
+		},
+		m(target, anchor) {
+			internal.insert(target, div3, anchor);
+			internal.append(div3, div0);
+			internal.append(div3, t0);
+			internal.append(div3, div1);
+
+			for (let i = 0; i < each_blocks_1.length; i += 1) {
+				each_blocks_1[i].m(div1, null);
+			}
+
+			internal.append(div3, t1);
+			internal.append(div3, div2);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div2, null);
+			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*content*/ 1) html_tag_1.p(/*content*/ ctx[0]);
+			if (dirty & /*rulerLabels*/ 4) {
+				each_value_1 = /*rulerLabels*/ ctx[2];
+				let i;
+
+				for (i = 0; i < each_value_1.length; i += 1) {
+					const child_ctx = get_each_context_1(ctx, each_value_1, i);
+
+					if (each_blocks_1[i]) {
+						each_blocks_1[i].p(child_ctx, dirty);
+					} else {
+						each_blocks_1[i] = create_each_block_1(child_ctx);
+						each_blocks_1[i].c();
+						each_blocks_1[i].m(div1, null);
+					}
+				}
+
+				for (; i < each_blocks_1.length; i += 1) {
+					each_blocks_1[i].d(1);
+				}
+
+				each_blocks_1.length = each_value_1.length;
+			}
+
+			if (dirty & /*rulerTexts, isRow*/ 10) {
+				each_value = /*rulerTexts*/ ctx[3];
+				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each1_lookup, div2, internal.destroy_block, create_each_block$4, null, get_each_context$4);
+			}
+
+			if (dirty & /*type*/ 1 && div3_class_value !== (div3_class_value = "floorplan-plugin__rule-labels floorplan-plugin__rule-labels--" + /*type*/ ctx[0] + " svelte-xt7p1v")) {
+				internal.attr(div3, "class", div3_class_value);
+			}
+
+			if (dirty & /*type, isRow*/ 3) {
+				internal.toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
+			}
 		},
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
-			if (detaching) internal.detach(div);
+			if (detaching) internal.detach(div3);
+			internal.destroy_each(each_blocks_1, detaching);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
 		}
 	};
 }
 
+const padding$1 = 1000;
+const exteriorWallOffset$1 = 180;
+
 function instance$9($$self, $$props, $$invalidate) {
-	let { content } = $$props;
+	let { type } = $$props;
+	let { data } = $$props;
+	let { bounding } = $$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;
 
-	const svgStyle = `
-    <style>
-      svg [type='lineGroup'] path {
-        fill: #ffffff;
-        stroke: #ffffff;
-      }
-      svg [type='lineItemGroup'] g g g g {
-        stroke: #ffffff;
-      }
-    </style>
-  `;
+	// 计算每一段墙的长度，以及墙两侧点距离标尺初始点的像素值
+	const rulerPoints = data.map(([start, end]) => isRow ? [start.x, end.x] : [start.y, end.y]).flat().sort().filter((x, index, arr) => {
+		// 筛除重复数据
+		if (index === 0) return true;
+
+		return x !== arr[index - 1];
+	});
+
+	const rulerLabels = rulerPoints.map(num => {
+		const left = isRow
+		? (num - bounding.min.x - padding$1 + exteriorWallOffset$1) / contentWidth
+		: 0;
+
+		const bottom = !isRow
+		? (num - bounding.min.y - padding$1 + exteriorWallOffset$1) / contentHeight
+		: 0;
+
+		return { left, bottom };
+	});
+
+	rulerLabels.unshift({ left: 0, bottom: 0 });
+	rulerLabels.push(isRow ? { left: 1, bottom: 0 } : { left: 0, bottom: 1 });
+	const length = rulerPoints[rulerPoints.length - 1] - rulerPoints[0];
+
+	const rulerTexts = rulerPoints.map((num, index, arr) => {
+		const distance = index === 0 ? 0 : num - arr[index - 1];
+		const positionNum = index === 0 ? 0 : (num + arr[index - 1]) / 2;
+
+		const left = isRow
+		? (positionNum - bounding.min.x - padding$1 + exteriorWallOffset$1) / contentWidth
+		: 0;
+
+		const bottom = !isRow
+		? (positionNum - bounding.min.y - padding$1 + exteriorWallOffset$1) / contentHeight
+		: 0;
+
+		return { left, bottom, distance };
+	}).filter(({ distance }) => distance / length > 0.1);
 
 	$$self.$$set = $$props => {
-		if ('content' in $$props) $$invalidate(0, content = $$props.content);
+		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);
 	};
 
-	return [content, svgStyle];
+	return [type, isRow, rulerLabels, rulerTexts, data, bounding];
 }
 
-class SvgImage extends internal.SvelteComponent {
+class RuleItem extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$9, create_fragment$9, internal.safe_not_equal, { content: 0 }, add_css$6);
+		internal.init(this, options, instance$9, create_fragment$9, internal.safe_not_equal, { type: 0, data: 4, bounding: 5 }, add_css$6);
 	}
 }
 
-/* src/floorplan/Components/BaseImage.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RuleLabels/RuleLabels.svelte generated by Svelte v3.49.0 */
 
 function add_css$5(target) {
-	internal.append_styles(target, "svelte-126ja8e", ".floorplan-plugin__base-image.svelte-126ja8e{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}");
+	internal.append_styles(target, "svelte-1mzj9p3", ".floorplan-plugin__rule-labels-wrapper.svelte-1mzj9p3{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}");
 }
 
-// (12:22) 
-function create_if_block_1$3(ctx) {
-	let normalimage;
+function get_each_context$3(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[12] = list[i][0];
+	child_ctx[13] = list[i][1];
+	return child_ctx;
+}
+
+// (19:2) {#each ruleLabelArray as [type, data] (type)}
+function create_each_block$3(key_1, ctx) {
+	let first;
+	let ruleitem;
 	let current;
-	normalimage = new Normalmage({ props: { url: /*imageData*/ ctx[1].url } });
 
-	return {
-		c() {
-			internal.create_component(normalimage.$$.fragment);
-		},
-		m(target, anchor) {
-			internal.mount_component(normalimage, target, anchor);
-			current = true;
-		},
-		p(ctx, dirty) {
-			const normalimage_changes = {};
-			if (dirty & /*imageData*/ 2) normalimage_changes.url = /*imageData*/ ctx[1].url;
-			normalimage.$set(normalimage_changes);
-		},
-		i(local) {
-			if (current) return;
-			internal.transition_in(normalimage.$$.fragment, local);
-			current = true;
-		},
-		o(local) {
-			internal.transition_out(normalimage.$$.fragment, local);
-			current = false;
-		},
-		d(detaching) {
-			internal.destroy_component(normalimage, detaching);
+	const ruleitem_spread_levels = [
+		{
+			type: /*type*/ ctx[12],
+			data: /*data*/ ctx[13],
+			bounding: /*bounding*/ ctx[0]
 		}
-	};
-}
+	];
 
-// (10:2) {#if svgContent}
-function create_if_block$3(ctx) {
-	let svgimage;
-	let current;
+	let ruleitem_props = {};
 
-	svgimage = new SvgImage({
-			props: { content: /*svgContent*/ ctx[0] }
-		});
+	for (let i = 0; i < ruleitem_spread_levels.length; i += 1) {
+		ruleitem_props = internal.assign(ruleitem_props, ruleitem_spread_levels[i]);
+	}
+
+	ruleitem = new RuleItem({ props: ruleitem_props });
 
 	return {
+		key: key_1,
+		first: null,
 		c() {
-			internal.create_component(svgimage.$$.fragment);
+			first = internal.empty();
+			internal.create_component(ruleitem.$$.fragment);
+			this.first = first;
 		},
 		m(target, anchor) {
-			internal.mount_component(svgimage, target, anchor);
+			internal.insert(target, first, anchor);
+			internal.mount_component(ruleitem, target, anchor);
 			current = true;
 		},
-		p(ctx, dirty) {
-			const svgimage_changes = {};
-			if (dirty & /*svgContent*/ 1) svgimage_changes.content = /*svgContent*/ ctx[0];
-			svgimage.$set(svgimage_changes);
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding*/ 9)
+			? internal.get_spread_update(ruleitem_spread_levels, [
+					{
+						type: /*type*/ ctx[12],
+						data: /*data*/ ctx[13],
+						bounding: /*bounding*/ ctx[0]
+					}
+				])
+			: {};
+
+			ruleitem.$set(ruleitem_changes);
 		},
 		i(local) {
 			if (current) return;
-			internal.transition_in(svgimage.$$.fragment, local);
+			internal.transition_in(ruleitem.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			internal.transition_out(svgimage.$$.fragment, local);
+			internal.transition_out(ruleitem.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
-			internal.destroy_component(svgimage, detaching);
+			if (detaching) internal.detach(first);
+			internal.destroy_component(ruleitem, detaching);
 		}
 	};
 }
 
 function create_fragment$8(ctx) {
 	let div;
-	let current_block_type_index;
-	let if_block;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
 	let current;
-	const if_block_creators = [create_if_block$3, create_if_block_1$3];
-	const if_blocks = [];
-
-	function select_block_type(ctx, dirty) {
-		if (/*svgContent*/ ctx[0]) return 0;
-		if (/*imageData*/ ctx[1]) return 1;
-		return -1;
-	}
+	let each_value = /*ruleLabelArray*/ ctx[3];
+	const get_key = ctx => /*type*/ ctx[12];
 
-	if (~(current_block_type_index = select_block_type(ctx))) {
-		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context$3(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
 	}
 
 	return {
 		c() {
 			div = internal.element("div");
-			if (if_block) if_block.c();
-			internal.attr(div, "class", "floorplan-plugin__base-image svelte-126ja8e");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			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);
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
 
-			if (~current_block_type_index) {
-				if_blocks[current_block_type_index].m(div, null);
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
 			}
 
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			let previous_block_index = current_block_type_index;
-			current_block_type_index = select_block_type(ctx);
-
-			if (current_block_type_index === previous_block_index) {
-				if (~current_block_type_index) {
-					if_blocks[current_block_type_index].p(ctx, dirty);
-				}
-			} else {
-				if (if_block) {
-					internal.group_outros();
-
-					internal.transition_out(if_blocks[previous_block_index], 1, 1, () => {
-						if_blocks[previous_block_index] = null;
-					});
-
-					internal.check_outros();
-				}
-
-				if (~current_block_type_index) {
-					if_block = if_blocks[current_block_type_index];
+			if (dirty & /*ruleLabelArray, bounding*/ 9) {
+				each_value = /*ruleLabelArray*/ ctx[3];
+				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$3, null, get_each_context$3);
+				internal.check_outros();
+			}
 
-					if (!if_block) {
-						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-						if_block.c();
-					} else {
-						if_block.p(ctx, dirty);
-					}
+			if (dirty & /*width*/ 4) {
+				internal.set_style(div, "width", /*width*/ ctx[2], false);
+			}
 
-					internal.transition_in(if_block, 1);
-					if_block.m(div, null);
-				} else {
-					if_block = null;
-				}
+			if (dirty & /*height*/ 2) {
+				internal.set_style(div, "height", /*height*/ ctx[1], false);
 			}
 		},
 		i(local) {
 			if (current) return;
-			internal.transition_in(if_block);
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				internal.transition_in(each_blocks[i]);
+			}
+
 			current = true;
 		},
 		o(local) {
-			internal.transition_out(if_block);
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				internal.transition_out(each_blocks[i]);
+			}
+
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) internal.detach(div);
 
-			if (~current_block_type_index) {
-				if_blocks[current_block_type_index].d();
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
 			}
 		}
 	};
 }
 
+const padding = 1000;
+const exteriorWallOffset = 180;
+
 function instance$8($$self, $$props, $$invalidate) {
-	let imageData;
-	let svgContent;
+	let bounding;
+	let ruleLabelData;
+	let ruleLabelDataKeys;
+	let ruleLabelArray;
+	let boundingWidth;
+	let boundingHeight;
+	let contentWidth;
+	let contentHeight;
+	let width;
+	let height;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
 
-	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
-	};
+	$$self.$$set = $$props => {
+		if ('floorIndex' in $$props) $$invalidate(4, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData*/ 32) {
+			$$invalidate(0, bounding = floorplanData.bounding);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 48) {
+			$$invalidate(10, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+		}
+
+		if ($$self.$$.dirty & /*ruleLabelData*/ 1024) {
+			$$invalidate(11, ruleLabelDataKeys = Object.keys(ruleLabelData));
+		}
+
+		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 3072) {
+			$$invalidate(3, 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*/ 1) {
+			$$invalidate(6, 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*/ 1) {
+			$$invalidate(7, contentHeight = bounding.max.y - bounding.min.y - (padding - exteriorWallOffset) * 2);
+		}
 
-	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
-			$$invalidate(1, imageData = floorplanData.outlines[floorIndex]);
+		if ($$self.$$.dirty & /*contentWidth, boundingWidth*/ 768) {
+			$$invalidate(2, width = contentWidth / boundingWidth * 100 + '%');
 		}
 
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
-			$$invalidate(0, svgContent = floorplanData.outlines?.[floorIndex]?.svgContent);
+		if ($$self.$$.dirty & /*contentHeight, boundingHeight*/ 192) {
+			$$invalidate(1, height = contentHeight / boundingHeight * 100 + '%');
 		}
 	};
 
-	return [svgContent, imageData, floorIndex, floorplanData];
+	return [
+		bounding,
+		height,
+		width,
+		ruleLabelArray,
+		floorIndex,
+		floorplanData,
+		boundingHeight,
+		contentHeight,
+		boundingWidth,
+		contentWidth,
+		ruleLabelData,
+		ruleLabelDataKeys
+	];
 }
 
-class BaseImage extends internal.SvelteComponent {
+class RuleLabels extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$8, create_fragment$8, internal.safe_not_equal, { floorIndex: 2, floorplanData: 3 }, add_css$5);
+		internal.init(this, options, instance$8, create_fragment$8, internal.safe_not_equal, { floorIndex: 4, floorplanData: 5 }, add_css$5);
 	}
 }
 
-/* src/floorplan/Components/RoomMaterials/RoomMaterial_0.svelte generated by Svelte v3.47.0 */
+function pathD(points, options = {}) {
+    let d = '';
+    const { needZ, needA } = options;
+    const _points = needZ ? points.slice().concat(points[0]) : points.slice();
+    _points.forEach((_point, index) => {
+        const { x, y } = options.format ? options.format(_point) : _point;
+        const point = x + ',' + y;
+        if (index === 0) {
+            d += 'M' + point;
+            return d;
+        }
+        if (needA === null || needA === void 0 ? void 0 : needA[index]) {
+            d += 'A' + needA[index] + ',' + point;
+            return d;
+        }
+        d += 'L' + point;
+        return d;
+    });
+    return d + (needZ ? 'Z' : '');
+}
+/** 把户型图上点点位转换到 SVG 上的点位 */
+function formatFloorplanPoint({ x, y }, bounding) {
+    const { max, min } = bounding;
+    return { x: x - min.x, y: max.y - y };
+}
+
+/* src/floorplan/Components/RoomMaterials/RoomMaterial_0.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$7(ctx) {
 	let path_1;
@@ -1650,7 +1830,7 @@ class RoomMaterial_0 extends internal.SvelteComponent {
 	}
 }
 
-/* src/floorplan/Components/RoomMaterials/RoomMaterial_1.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomMaterials/RoomMaterial_1.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$6(ctx) {
 	let defs;
@@ -1684,6 +1864,7 @@ function create_fragment$6(ctx) {
 			internal.attr(pattern, "width", /*width*/ ctx[1]);
 			internal.attr(pattern, "height", /*width*/ ctx[1]);
 			internal.attr(pattern, "patternUnits", "userSpaceOnUse");
+			internal.attr(pattern, "patternTransform", "scale(50 50)");
 			internal.attr(path1, "d", /*d*/ ctx[0]);
 			internal.attr(path1, "fill", "url(#fpm-room-pattern-0)");
 		},
@@ -1738,7 +1919,7 @@ class RoomMaterial_1 extends internal.SvelteComponent {
 	}
 }
 
-/* src/floorplan/Components/RoomMaterials/RoomMaterial_2.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomMaterials/RoomMaterial_2.svelte generated by Svelte v3.49.0 */
 
 function create_fragment$5(ctx) {
 	let defs;
@@ -1766,8 +1947,8 @@ function create_fragment$5(ctx) {
 			path1 = internal.svg_element("path");
 			t2 = internal.space();
 			path2 = internal.svg_element("path");
-			internal.attr(rect0, "x", "0.5");
-			internal.attr(rect0, "y", "0.5");
+			internal.attr(rect0, "x", "0");
+			internal.attr(rect0, "y", "0");
 			internal.attr(rect0, "width", "6");
 			internal.attr(rect0, "height", "50");
 			internal.attr(rect0, "fill", "none");
@@ -1776,22 +1957,24 @@ function create_fragment$5(ctx) {
 			internal.attr(pattern0, "id", "room-material-pattern-1");
 			internal.attr(pattern0, "x", "0");
 			internal.attr(pattern0, "y", "0");
-			internal.attr(pattern0, "width", "13");
-			internal.attr(pattern0, "height", "51");
+			internal.attr(pattern0, "width", "12");
+			internal.attr(pattern0, "height", "50");
 			internal.attr(pattern0, "patternUnits", "userSpaceOnUse");
-			internal.attr(rect1, "x", "0.5");
-			internal.attr(rect1, "y", "0.5");
+			internal.attr(pattern0, "patternTransform", "scale(50 50)");
+			internal.attr(rect1, "x", "0");
+			internal.attr(rect1, "y", "0");
 			internal.attr(rect1, "width", "6");
 			internal.attr(rect1, "height", "50");
 			internal.attr(rect1, "fill", "none");
 			internal.attr(rect1, "stroke", "#4B4B57");
 			internal.attr(rect1, "stroke-width", "0.5");
 			internal.attr(pattern1, "id", "room-material-pattern-2");
-			internal.attr(pattern1, "x", "7");
+			internal.attr(pattern1, "x", "6");
 			internal.attr(pattern1, "y", "25");
-			internal.attr(pattern1, "width", "13");
-			internal.attr(pattern1, "height", "51");
+			internal.attr(pattern1, "width", "12");
+			internal.attr(pattern1, "height", "50");
 			internal.attr(pattern1, "patternUnits", "userSpaceOnUse");
+			internal.attr(pattern1, "patternTransform", "scale(50 50)");
 			internal.attr(path0, "d", /*d*/ ctx[0]);
 			internal.attr(path0, "fill", "#43434D");
 			internal.attr(path1, "d", /*d*/ ctx[0]);
@@ -1863,23 +2046,23 @@ class RoomMaterial_2 extends internal.SvelteComponent {
 	}
 }
 
-/* src/floorplan/Components/RoomMaterials/RoomMaterial.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomMaterials/RoomMaterial.svelte generated by Svelte v3.49.0 */
 
 function add_css$4(target) {
-	internal.append_styles(target, "svelte-1b0icjc", "svg.svelte-1b0icjc{position:absolute;width:100%;height:100%;overflow:visible}");
+	internal.append_styles(target, "svelte-1dykexu", ".floorplan-plugin__room-material.svelte-1dykexu{position:absolute;left:0;top:0;width:100%;height:100%}svg.svelte-1dykexu{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}");
 }
 
-function get_each_context$1(ctx, list, i) {
+function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[4] = list[i];
+	child_ctx[5] = list[i];
 	return child_ctx;
 }
 
-// (21:6) {:else}
+// (19:6) {:else}
 function create_else_block(ctx) {
 	let roommaterial_1;
 	let current;
-	roommaterial_1 = new RoomMaterial_1({ props: { path: /*room*/ ctx[4].path } });
+	roommaterial_1 = new RoomMaterial_1({ props: { path: /*room*/ ctx[5].path } });
 
 	return {
 		c() {
@@ -1891,7 +2074,7 @@ function create_else_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const roommaterial_1_changes = {};
-			if (dirty & /*rooms*/ 1) roommaterial_1_changes.path = /*room*/ ctx[4].path;
+			if (dirty & /*rooms*/ 1) roommaterial_1_changes.path = /*room*/ ctx[5].path;
 			roommaterial_1.$set(roommaterial_1_changes);
 		},
 		i(local) {
@@ -1909,11 +2092,11 @@ function create_else_block(ctx) {
 	};
 }
 
-// (19:37) 
+// (17:37) 
 function create_if_block_1$2(ctx) {
 	let roommaterial_2;
 	let current;
-	roommaterial_2 = new RoomMaterial_2({ props: { path: /*room*/ ctx[4].path } });
+	roommaterial_2 = new RoomMaterial_2({ props: { path: /*room*/ ctx[5].path } });
 
 	return {
 		c() {
@@ -1925,7 +2108,7 @@ function create_if_block_1$2(ctx) {
 		},
 		p(ctx, dirty) {
 			const roommaterial_2_changes = {};
-			if (dirty & /*rooms*/ 1) roommaterial_2_changes.path = /*room*/ ctx[4].path;
+			if (dirty & /*rooms*/ 1) roommaterial_2_changes.path = /*room*/ ctx[5].path;
 			roommaterial_2.$set(roommaterial_2_changes);
 		},
 		i(local) {
@@ -1943,11 +2126,11 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (17:6) {#if room.floorType === 1}
+// (15:6) {#if room.floorType === 1}
 function create_if_block$2(ctx) {
 	let roommaterial_0;
 	let current;
-	roommaterial_0 = new RoomMaterial_0({ props: { path: /*room*/ ctx[4].path } });
+	roommaterial_0 = new RoomMaterial_0({ props: { path: /*room*/ ctx[5].path } });
 
 	return {
 		c() {
@@ -1959,7 +2142,7 @@ function create_if_block$2(ctx) {
 		},
 		p(ctx, dirty) {
 			const roommaterial_0_changes = {};
-			if (dirty & /*rooms*/ 1) roommaterial_0_changes.path = /*room*/ ctx[4].path;
+			if (dirty & /*rooms*/ 1) roommaterial_0_changes.path = /*room*/ ctx[5].path;
 			roommaterial_0.$set(roommaterial_0_changes);
 		},
 		i(local) {
@@ -1977,8 +2160,8 @@ function create_if_block$2(ctx) {
 	};
 }
 
-// (15:2) {#each rooms as room}
-function create_each_block$1(ctx) {
+// (13:2) {#each rooms as room}
+function create_each_block$2(ctx) {
 	let svg;
 	let current_block_type_index;
 	let if_block;
@@ -1987,8 +2170,8 @@ function create_each_block$1(ctx) {
 	const if_blocks = [];
 
 	function select_block_type(ctx, dirty) {
-		if (/*room*/ ctx[4].floorType === 1) return 0;
-		if (/*room*/ ctx[4].floorType === 0) return 1;
+		if (/*room*/ ctx[5].floorType === 1) return 0;
+		if (/*room*/ ctx[5].floorType === 0) return 1;
 		return 2;
 	}
 
@@ -1999,7 +2182,10 @@ function create_each_block$1(ctx) {
 		c() {
 			svg = internal.svg_element("svg");
 			if_block.c();
-			internal.attr(svg, "class", "svelte-1b0icjc");
+			internal.attr(svg, "width", "100%");
+			internal.attr(svg, "height", "100%");
+			internal.attr(svg, "viewBox", `0 0 ${/*boundingWidth*/ ctx[1]} ${/*boundingHeight*/ ctx[2]}`);
+			internal.attr(svg, "class", "svelte-1dykexu");
 		},
 		m(target, anchor) {
 			internal.insert(target, svg, anchor);
@@ -2056,7 +2242,7 @@ function create_fragment$4(ctx) {
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
+		each_blocks[i] = create_each_block$2(get_each_context$2(ctx, each_value, i));
 	}
 
 	const out = i => internal.transition_out(each_blocks[i], 1, 1, () => {
@@ -2071,7 +2257,7 @@ function create_fragment$4(ctx) {
 				each_blocks[i].c();
 			}
 
-			internal.attr(div, "class", "floorplan-plugin__room-material");
+			internal.attr(div, "class", "floorplan-plugin__room-material svelte-1dykexu");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2083,18 +2269,18 @@ function create_fragment$4(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*rooms*/ 1) {
+			if (dirty & /*boundingWidth, boundingHeight, rooms*/ 7) {
 				each_value = /*rooms*/ ctx[0];
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$1(ctx, each_value, i);
+					const child_ctx = get_each_context$2(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 						internal.transition_in(each_blocks[i], 1);
 					} else {
-						each_blocks[i] = create_each_block$1(child_ctx);
+						each_blocks[i] = create_each_block$2(child_ctx);
 						each_blocks[i].c();
 						internal.transition_in(each_blocks[i], 1);
 						each_blocks[i].m(div, null);
@@ -2138,112 +2324,146 @@ function create_fragment$4(ctx) {
 function instance$4($$self, $$props, $$invalidate) {
 	let rooms;
 	let { floorIndex } = $$props;
-	let { pxmm } = $$props;
 	let { floorplanData } = $$props;
+	const boundingWidth = floorplanData.bounding.max.x - floorplanData.bounding.min.x;
+	const boundingHeight = floorplanData.bounding.max.y - floorplanData.bounding.min.y;
 
 	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(1, floorIndex = $$props.floorIndex);
-		if ('pxmm' in $$props) $$invalidate(2, pxmm = $$props.pxmm);
-		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+		if ('floorIndex' in $$props) $$invalidate(3, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData, floorIndex, pxmm*/ 14) {
-			$$invalidate(0, rooms = floorplanData.floorDatas[floorIndex].rooms.map(room => ({
-				...room,
-				path: room.path.map(p => formatFloorplanPoint(p, pxmm, floorplanData.bounding))
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 24) {
+			$$invalidate(0, rooms = floorplanData.floorDatas[floorIndex].rooms.map(room => Object.assign(Object.assign({}, room), {
+				path: room.path.map(p => formatFloorplanPoint(p, floorplanData.bounding))
 			})));
 		}
 	};
 
-	return [rooms, floorIndex, pxmm, floorplanData];
+	return [rooms, boundingWidth, boundingHeight, floorIndex, floorplanData];
 }
 
 class RoomMaterial extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$4, create_fragment$4, internal.safe_not_equal, { floorIndex: 1, pxmm: 2, floorplanData: 3 }, add_css$4);
+		internal.init(this, options, instance$4, create_fragment$4, internal.safe_not_equal, { floorIndex: 3, floorplanData: 4 }, add_css$4);
 	}
 }
 
-/* src/floorplan/Components/RoomHighlight/Room.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomHighlight/Room.svelte generated by Svelte v3.49.0 */
 
 function add_css$3(target) {
-	internal.append_styles(target, "svelte-11takew", "path.svelte-11takew{opacity:0}path.svelte-11takew:hover{opacity:0.1}");
+	internal.append_styles(target, "svelte-19uvvss", "path.svelte-19uvvss{opacity:0}path.svelte-19uvvss:hover{opacity:0.1}");
 }
 
 function create_fragment$3(ctx) {
 	let path;
+	let mounted;
+	let dispose;
 
 	return {
 		c() {
 			path = internal.svg_element("path");
-			internal.attr(path, "d", /*_pathD*/ ctx[0]);
+			internal.attr(path, "d", /*_pathD*/ ctx[2]);
 			internal.attr(path, "fill", `#fff`);
-			internal.attr(path, "class", "svelte-11takew");
+			internal.attr(path, "class", "svelte-19uvvss");
 		},
 		m(target, anchor) {
 			internal.insert(target, path, anchor);
+
+			if (!mounted) {
+				dispose = [
+					internal.listen(path, "mouseenter", /*onMouseEnter*/ ctx[0]),
+					internal.listen(path, "mouseleave", /*onMouseLeave*/ ctx[1])
+				];
+
+				mounted = true;
+			}
 		},
 		p: internal.noop,
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
 			if (detaching) internal.detach(path);
+			mounted = false;
+			internal.run_all(dispose);
 		}
 	};
 }
 
 function instance$3($$self, $$props, $$invalidate) {
-	let { pxmm } = $$props;
 	let { room } = $$props;
 	let { floorplanData } = $$props;
+	let { hoveredRoom } = $$props;
+
+	function onMouseEnter() {
+		hoveredRoom.set(room);
+	}
+
+	function onMouseLeave() {
+		hoveredRoom.set(undefined);
+	}
+
 	const { bounding } = floorplanData;
 
 	const _pathD = pathD(room.path, {
 		needZ: true,
-		format: vector => formatFloorplanPoint(vector, pxmm, bounding)
+		format: vector => formatFloorplanPoint(vector, bounding)
 	});
 
 	$$self.$$set = $$props => {
-		if ('pxmm' in $$props) $$invalidate(1, pxmm = $$props.pxmm);
-		if ('room' in $$props) $$invalidate(2, room = $$props.room);
-		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+		if ('room' in $$props) $$invalidate(3, room = $$props.room);
+		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
+		if ('hoveredRoom' in $$props) $$invalidate(5, hoveredRoom = $$props.hoveredRoom);
 	};
 
-	return [_pathD, pxmm, room, floorplanData];
+	return [onMouseEnter, onMouseLeave, _pathD, room, floorplanData, hoveredRoom];
 }
 
 class Room extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$3, create_fragment$3, internal.safe_not_equal, { pxmm: 1, room: 2, floorplanData: 3 }, add_css$3);
+
+		internal.init(
+			this,
+			options,
+			instance$3,
+			create_fragment$3,
+			internal.safe_not_equal,
+			{
+				room: 3,
+				floorplanData: 4,
+				hoveredRoom: 5
+			},
+			add_css$3
+		);
 	}
 }
 
-/* src/floorplan/Components/RoomHighlight/RoomHighlight.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/RoomHighlight/RoomHighlight.svelte generated by Svelte v3.49.0 */
 
 function add_css$2(target) {
-	internal.append_styles(target, "svelte-1aais5l", ".floorplan-plugin__room-highlight.svelte-1aais5l{position:absolute;width:100%;height:100%;pointer-events:all}svg.svelte-1aais5l{width:100%;height:100%;overflow:visible}");
+	internal.append_styles(target, "svelte-1kqo6e4", ".floorplan-plugin__room-highlight.svelte-1kqo6e4{position:absolute;width:100%;height:100%}svg.svelte-1kqo6e4{width:100%;height:100%;overflow:visible}");
 }
 
-function get_each_context(ctx, list, i) {
+function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[12] = list[i];
+	child_ctx[5] = list[i];
 	return child_ctx;
 }
 
-// (41:4) {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
-function create_each_block(key_1, ctx) {
+// (11:4) {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
+function create_each_block$1(key_1, ctx) {
 	let first;
 	let room;
 	let current;
 
 	const room_spread_levels = [
 		{
-			room: /*room*/ ctx[12],
-			floorplanData: /*floorplanData*/ ctx[2],
-			pxmm: /*pxmm*/ ctx[0]
+			room: /*room*/ ctx[5],
+			floorplanData: /*floorplanData*/ ctx[1],
+			hoveredRoom: /*hoveredRoom*/ ctx[2]
 		}
 	];
 
@@ -2271,12 +2491,12 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const room_changes = (dirty & /*floorplanData, floorIndex, pxmm*/ 7)
+			const room_changes = (dirty & /*floorplanData, floorIndex, hoveredRoom*/ 7)
 			? internal.get_spread_update(room_spread_levels, [
 					{
-						room: /*room*/ ctx[12],
-						floorplanData: /*floorplanData*/ ctx[2],
-						pxmm: /*pxmm*/ ctx[0]
+						room: /*room*/ ctx[5],
+						floorplanData: /*floorplanData*/ ctx[1],
+						hoveredRoom: /*hoveredRoom*/ ctx[2]
 					}
 				])
 			: {};
@@ -2304,17 +2524,14 @@ function create_fragment$2(ctx) {
 	let svg;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
-	let div_resize_listener;
 	let current;
-	let mounted;
-	let dispose;
-	let each_value = /*floorplanData*/ ctx[2].floorDatas[/*floorIndex*/ ctx[1]].rooms;
-	const get_key = ctx => /*room*/ ctx[12].id;
+	let each_value = /*floorplanData*/ ctx[1].floorDatas[/*floorIndex*/ ctx[0]].rooms;
+	const get_key = ctx => /*room*/ ctx[5].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context(ctx, each_value, i);
+		let child_ctx = get_each_context$1(ctx, each_value, i);
 		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+		each_1_lookup.set(key, each_blocks[i] = create_each_block$1(key, child_ctx));
 	}
 
 	return {
@@ -2326,9 +2543,11 @@ function create_fragment$2(ctx) {
 				each_blocks[i].c();
 			}
 
-			internal.attr(svg, "class", "svelte-1aais5l");
-			internal.attr(div, "class", "floorplan-plugin__room-highlight svelte-1aais5l");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			internal.attr(svg, "width", "100%");
+			internal.attr(svg, "height", "100%");
+			internal.attr(svg, "viewBox", `0 0 ${/*boundingWidth*/ ctx[3]} ${/*boundingHeight*/ ctx[4]}`);
+			internal.attr(svg, "class", "svelte-1kqo6e4");
+			internal.attr(div, "class", "floorplan-plugin__room-highlight svelte-1kqo6e4");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2338,20 +2557,13 @@ function create_fragment$2(ctx) {
 				each_blocks[i].m(svg, null);
 			}
 
-			/*div_binding*/ ctx[9](div);
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
 			current = true;
-
-			if (!mounted) {
-				dispose = internal.listen(div, "click", /*handleClick*/ ctx[6]);
-				mounted = true;
-			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*floorplanData, floorIndex, pxmm*/ 7) {
-				each_value = /*floorplanData*/ ctx[2].floorDatas[/*floorIndex*/ ctx[1]].rooms;
+			if (dirty & /*floorplanData, floorIndex, hoveredRoom*/ 7) {
+				each_value = /*floorplanData*/ ctx[1].floorDatas[/*floorIndex*/ ctx[0]].rooms;
 				internal.group_outros();
-				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, svg, internal.outro_and_destroy_block, create_each_block, null, get_each_context);
+				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, svg, internal.outro_and_destroy_block, create_each_block$1, null, get_each_context$1);
 				internal.check_outros();
 			}
 		},
@@ -2377,83 +2589,24 @@ function create_fragment$2(ctx) {
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].d();
 			}
-
-			/*div_binding*/ ctx[9](null);
-			div_resize_listener();
-			mounted = false;
-			dispose();
 		}
 	};
 }
 
 function instance$2($$self, $$props, $$invalidate) {
-	let { five } = $$props;
-	let { pxmm } = $$props;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
-	let { onRoomHeightClick } = $$props;
-	let clientWidth;
-	let clientHeight;
-	let highlightContainerDom;
-	const { observers: floorplan_observers } = floorplanData;
-
-	const handleClick = function (e) {
-		if (onRoomHeightClick?.(e) === false) return;
-
-		// 因为 mouse.offsetX 的兼容性问题，手动计算 mouse offsetX offsetY
-		const boundingClientRect = highlightContainerDom.getBoundingClientRect();
-
-		const mouseClientVector = new THREE.Vector2(e.clientX, e.clientY);
-		const domTopLeftVector = new THREE.Vector2(boundingClientRect.left, boundingClientRect.top);
-		const mouseOffsetVector = mouseClientVector.clone().sub(domTopLeftVector);
-
-		// px 转换为 百分比
-		const mouseOffsetRelativeVector = new THREE.Vector2(mouseOffsetVector.x / clientWidth, mouseOffsetVector.y / clientHeight);
-
-		const closestPoint = floorplan_observers.filter(observer => observer.floorIndex === floorIndex).sort((ob1, ob2) => {
-			const position1 = new THREE.Vector2(ob1.positionInImage.x, ob1.positionInImage.y);
-			const position2 = new THREE.Vector2(ob2.positionInImage.x, ob2.positionInImage.y);
-			return position1.distanceTo(mouseOffsetRelativeVector) - position2.distanceTo(mouseOffsetRelativeVector);
-		})[0];
-
-		five.moveToPano(closestPoint.index);
-	};
-
-	function div_binding($$value) {
-		internal.binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			highlightContainerDom = $$value;
-			$$invalidate(5, highlightContainerDom);
-		});
-	}
-
-	function div_elementresize_handler() {
-		clientWidth = this.clientWidth;
-		clientHeight = this.clientHeight;
-		$$invalidate(3, clientWidth);
-		$$invalidate(4, clientHeight);
-	}
+	let { hoveredRoom } = $$props;
+	const boundingWidth = floorplanData.bounding.max.x - floorplanData.bounding.min.x;
+	const boundingHeight = floorplanData.bounding.max.y - floorplanData.bounding.min.y;
 
 	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(7, five = $$props.five);
-		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
-		if ('floorIndex' in $$props) $$invalidate(1, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(2, floorplanData = $$props.floorplanData);
-		if ('onRoomHeightClick' in $$props) $$invalidate(8, onRoomHeightClick = $$props.onRoomHeightClick);
+		if ('floorIndex' in $$props) $$invalidate(0, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(1, floorplanData = $$props.floorplanData);
+		if ('hoveredRoom' in $$props) $$invalidate(2, hoveredRoom = $$props.hoveredRoom);
 	};
 
-	return [
-		pxmm,
-		floorIndex,
-		floorplanData,
-		clientWidth,
-		clientHeight,
-		highlightContainerDom,
-		handleClick,
-		five,
-		onRoomHeightClick,
-		div_binding,
-		div_elementresize_handler
-	];
+	return [floorIndex, floorplanData, hoveredRoom, boundingWidth, boundingHeight];
 }
 
 class RoomHighlight extends internal.SvelteComponent {
@@ -2467,35 +2620,31 @@ class RoomHighlight extends internal.SvelteComponent {
 			create_fragment$2,
 			internal.safe_not_equal,
 			{
-				five: 7,
-				pxmm: 0,
-				floorIndex: 1,
-				floorplanData: 2,
-				onRoomHeightClick: 8
+				floorIndex: 0,
+				floorplanData: 1,
+				hoveredRoom: 2
 			},
 			add_css$2
 		);
 	}
 }
 
-/* src/floorplan/ModelFloorplanPlugin/Components/CurrentFloor/CurrentFloor.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/CurrentFloor.svelte generated by Svelte v3.49.0 */
 
 function add_css$1(target) {
-	internal.append_styles(target, "svelte-3pdgs4", ".floorplan-current-floor.svelte-3pdgs4{position:relative;width:100%;height:100%}");
+	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}");
 }
 
-// (19:2) {#if hoverEnable}
+// (20:2) {#if hoverEnable}
 function create_if_block_2(ctx) {
 	let roomhighlight;
 	let current;
 
 	const roomhighlight_spread_levels = [
 		{
-			five: /*five*/ ctx[1],
-			pxmm: /*pxmm*/ ctx[0],
-			floorIndex: /*floorIndex*/ ctx[2],
-			floorplanData: /*floorplanData*/ ctx[6],
-			onRoomHeightClick: /*onRoomHeightClick*/ ctx[7]
+			floorIndex: /*floorIndex*/ ctx[1],
+			floorplanData: /*floorplanData*/ ctx[5],
+			hoveredRoom: /*hoveredRoom*/ ctx[8]
 		}
 	];
 
@@ -2516,14 +2665,12 @@ function create_if_block_2(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomhighlight_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, onRoomHeightClick*/ 199)
+			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 290)
 			? internal.get_spread_update(roomhighlight_spread_levels, [
 					{
-						five: /*five*/ ctx[1],
-						pxmm: /*pxmm*/ ctx[0],
-						floorIndex: /*floorIndex*/ ctx[2],
-						floorplanData: /*floorplanData*/ ctx[6],
-						onRoomHeightClick: /*onRoomHeightClick*/ ctx[7]
+						floorIndex: /*floorIndex*/ ctx[1],
+						floorplanData: /*floorplanData*/ ctx[5],
+						hoveredRoom: /*hoveredRoom*/ ctx[8]
 					}
 				])
 			: {};
@@ -2545,16 +2692,18 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (23:2) {#if roomLabelsEnable}
+// (24:2) {#if roomLabelsEnable}
 function create_if_block_1$1(ctx) {
 	let roomlabels;
 	let current;
 
 	const roomlabels_spread_levels = [
 		{
-			floorplanData: /*floorplanData*/ ctx[6],
-			floorIndex: /*floorIndex*/ ctx[2],
-			getLabelElement: /*getLabelElement*/ ctx[8]
+			floorplanData: /*floorplanData*/ ctx[5],
+			floorIndex: /*floorIndex*/ ctx[1],
+			getLabelElement: /*getLabelElement*/ ctx[6],
+			hoveredRoom: /*hoveredRoom*/ ctx[8],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
 		}
 	];
 
@@ -2575,12 +2724,14 @@ function create_if_block_1$1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement*/ 324)
+			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 482)
 			? internal.get_spread_update(roomlabels_spread_levels, [
 					{
-						floorplanData: /*floorplanData*/ ctx[6],
-						floorIndex: /*floorIndex*/ ctx[2],
-						getLabelElement: /*getLabelElement*/ ctx[8]
+						floorplanData: /*floorplanData*/ ctx[5],
+						floorIndex: /*floorIndex*/ ctx[1],
+						getLabelElement: /*getLabelElement*/ ctx[6],
+						hoveredRoom: /*hoveredRoom*/ ctx[8],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
 					}
 				])
 			: {};
@@ -2602,16 +2753,15 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (26:2) {#if ruleLabelsEnable}
+// (27:2) {#if ruleLabelsEnable}
 function create_if_block$1(ctx) {
 	let rulelabels;
 	let current;
 
 	const rulelabels_spread_levels = [
 		{
-			floorplanData: /*floorplanData*/ ctx[6],
-			floorIndex: /*floorIndex*/ ctx[2],
-			pxmm: /*pxmm*/ ctx[0]
+			floorplanData: /*floorplanData*/ ctx[5],
+			floorIndex: /*floorIndex*/ ctx[1]
 		}
 	];
 
@@ -2632,12 +2782,11 @@ function create_if_block$1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const rulelabels_changes = (dirty & /*floorplanData, floorIndex, pxmm*/ 69)
+			const rulelabels_changes = (dirty & /*floorplanData, floorIndex*/ 34)
 			? internal.get_spread_update(rulelabels_spread_levels, [
 					{
-						floorplanData: /*floorplanData*/ ctx[6],
-						floorIndex: /*floorIndex*/ ctx[2],
-						pxmm: /*pxmm*/ ctx[0]
+						floorplanData: /*floorplanData*/ ctx[5],
+						floorIndex: /*floorIndex*/ ctx[1]
 					}
 				])
 			: {};
@@ -2667,13 +2816,13 @@ function create_fragment$1(ctx) {
 	let baseimage;
 	let t2;
 	let t3;
+	let div_class_value;
 	let current;
 
 	const roommaterial_spread_levels = [
 		{
-			floorIndex: /*floorIndex*/ ctx[2],
-			floorplanData: /*floorplanData*/ ctx[6],
-			pxmm: /*pxmm*/ ctx[0]
+			floorIndex: /*floorIndex*/ ctx[1],
+			floorplanData: /*floorplanData*/ ctx[5]
 		}
 	];
 
@@ -2684,12 +2833,12 @@ function create_fragment$1(ctx) {
 	}
 
 	roommaterial = new RoomMaterial({ props: roommaterial_props });
-	let if_block0 = /*hoverEnable*/ ctx[3] && create_if_block_2(ctx);
+	let if_block0 = /*hoverEnable*/ ctx[2] && create_if_block_2(ctx);
 
 	const baseimage_spread_levels = [
 		{
-			floorplanData: /*floorplanData*/ ctx[6],
-			floorIndex: /*floorIndex*/ ctx[2]
+			floorplanData: /*floorplanData*/ ctx[5],
+			floorIndex: /*floorIndex*/ ctx[1]
 		}
 	];
 
@@ -2700,8 +2849,8 @@ function create_fragment$1(ctx) {
 	}
 
 	baseimage = new BaseImage({ props: baseimage_props });
-	let if_block1 = /*roomLabelsEnable*/ ctx[4] && create_if_block_1$1(ctx);
-	let if_block2 = /*ruleLabelsEnable*/ ctx[5] && create_if_block$1(ctx);
+	let if_block1 = /*roomLabelsEnable*/ ctx[3] && create_if_block_1$1(ctx);
+	let if_block2 = /*ruleLabelsEnable*/ ctx[4] && create_if_block$1(ctx);
 
 	return {
 		c() {
@@ -2715,7 +2864,10 @@ function create_fragment$1(ctx) {
 			if (if_block1) if_block1.c();
 			t3 = internal.space();
 			if (if_block2) if_block2.c();
-			internal.attr(div, "class", "floorplan-current-floor svelte-3pdgs4");
+
+			internal.attr(div, "class", div_class_value = "" + (internal.null_to_empty(`floorplan-plugin__floor${/*isCurrent*/ ctx[0]
+			? ' floorplan-plugin__floor--is-current'
+			: ''}`) + " svelte-bl8zrz"));
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2731,23 +2883,22 @@ function create_fragment$1(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			const roommaterial_changes = (dirty & /*floorIndex, floorplanData, pxmm*/ 69)
+			const roommaterial_changes = (dirty & /*floorIndex, floorplanData*/ 34)
 			? internal.get_spread_update(roommaterial_spread_levels, [
 					{
-						floorIndex: /*floorIndex*/ ctx[2],
-						floorplanData: /*floorplanData*/ ctx[6],
-						pxmm: /*pxmm*/ ctx[0]
+						floorIndex: /*floorIndex*/ ctx[1],
+						floorplanData: /*floorplanData*/ ctx[5]
 					}
 				])
 			: {};
 
 			roommaterial.$set(roommaterial_changes);
 
-			if (/*hoverEnable*/ ctx[3]) {
+			if (/*hoverEnable*/ ctx[2]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 
-					if (dirty & /*hoverEnable*/ 8) {
+					if (dirty & /*hoverEnable*/ 4) {
 						internal.transition_in(if_block0, 1);
 					}
 				} else {
@@ -2766,22 +2917,22 @@ function create_fragment$1(ctx) {
 				internal.check_outros();
 			}
 
-			const baseimage_changes = (dirty & /*floorplanData, floorIndex*/ 68)
+			const baseimage_changes = (dirty & /*floorplanData, floorIndex*/ 34)
 			? internal.get_spread_update(baseimage_spread_levels, [
 					{
-						floorplanData: /*floorplanData*/ ctx[6],
-						floorIndex: /*floorIndex*/ ctx[2]
+						floorplanData: /*floorplanData*/ ctx[5],
+						floorIndex: /*floorIndex*/ ctx[1]
 					}
 				])
 			: {};
 
 			baseimage.$set(baseimage_changes);
 
-			if (/*roomLabelsEnable*/ ctx[4]) {
+			if (/*roomLabelsEnable*/ ctx[3]) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty & /*roomLabelsEnable*/ 16) {
+					if (dirty & /*roomLabelsEnable*/ 8) {
 						internal.transition_in(if_block1, 1);
 					}
 				} else {
@@ -2800,11 +2951,11 @@ function create_fragment$1(ctx) {
 				internal.check_outros();
 			}
 
-			if (/*ruleLabelsEnable*/ ctx[5]) {
+			if (/*ruleLabelsEnable*/ ctx[4]) {
 				if (if_block2) {
 					if_block2.p(ctx, dirty);
 
-					if (dirty & /*ruleLabelsEnable*/ 32) {
+					if (dirty & /*ruleLabelsEnable*/ 16) {
 						internal.transition_in(if_block2, 1);
 					}
 				} else {
@@ -2822,6 +2973,12 @@ function create_fragment$1(ctx) {
 
 				internal.check_outros();
 			}
+
+			if (!current || dirty & /*isCurrent*/ 1 && div_class_value !== (div_class_value = "" + (internal.null_to_empty(`floorplan-plugin__floor${/*isCurrent*/ ctx[0]
+			? ' floorplan-plugin__floor--is-current'
+			: ''}`) + " svelte-bl8zrz"))) {
+				internal.attr(div, "class", div_class_value);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -2852,38 +3009,37 @@ function create_fragment$1(ctx) {
 }
 
 function instance$1($$self, $$props, $$invalidate) {
-	let { pxmm } = $$props;
-	let { five } = $$props;
+	let { isCurrent } = $$props;
 	let { floorIndex } = $$props;
 	let { hoverEnable } = $$props;
 	let { roomLabelsEnable } = $$props;
 	let { ruleLabelsEnable } = $$props;
 	let { floorplanData } = $$props;
-	let { onRoomHeightClick } = $$props;
 	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
+	const hoveredRoom = store.writable(undefined);
 
 	$$self.$$set = $$props => {
-		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
-		if ('five' in $$props) $$invalidate(1, five = $$props.five);
-		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
-		if ('hoverEnable' in $$props) $$invalidate(3, hoverEnable = $$props.hoverEnable);
-		if ('roomLabelsEnable' in $$props) $$invalidate(4, roomLabelsEnable = $$props.roomLabelsEnable);
-		if ('ruleLabelsEnable' in $$props) $$invalidate(5, ruleLabelsEnable = $$props.ruleLabelsEnable);
-		if ('floorplanData' in $$props) $$invalidate(6, floorplanData = $$props.floorplanData);
-		if ('onRoomHeightClick' in $$props) $$invalidate(7, onRoomHeightClick = $$props.onRoomHeightClick);
-		if ('getLabelElement' in $$props) $$invalidate(8, getLabelElement = $$props.getLabelElement);
+		if ('isCurrent' in $$props) $$invalidate(0, isCurrent = $$props.isCurrent);
+		if ('floorIndex' in $$props) $$invalidate(1, floorIndex = $$props.floorIndex);
+		if ('hoverEnable' in $$props) $$invalidate(2, hoverEnable = $$props.hoverEnable);
+		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);
 	};
 
 	return [
-		pxmm,
-		five,
+		isCurrent,
 		floorIndex,
 		hoverEnable,
 		roomLabelsEnable,
 		ruleLabelsEnable,
 		floorplanData,
-		onRoomHeightClick,
-		getLabelElement
+		getLabelElement,
+		adaptiveRoomLabelVisibleEnable,
+		hoveredRoom
 	];
 }
 
@@ -2898,65 +3054,57 @@ class CurrentFloor extends internal.SvelteComponent {
 			create_fragment$1,
 			internal.safe_not_equal,
 			{
-				pxmm: 0,
-				five: 1,
-				floorIndex: 2,
-				hoverEnable: 3,
-				roomLabelsEnable: 4,
-				ruleLabelsEnable: 5,
-				floorplanData: 6,
-				onRoomHeightClick: 7,
-				getLabelElement: 8
+				isCurrent: 0,
+				floorIndex: 1,
+				hoverEnable: 2,
+				roomLabelsEnable: 3,
+				ruleLabelsEnable: 4,
+				floorplanData: 5,
+				getLabelElement: 6,
+				adaptiveRoomLabelVisibleEnable: 7
 			},
 			add_css$1
 		);
 	}
 }
 
-/* src/floorplan/ModelFloorplanPlugin/Components/Main.svelte generated by Svelte v3.47.0 */
+/* src/floorplan/Components/Main.svelte generated by Svelte v3.49.0 */
 
 function add_css(target) {
-	internal.append_styles(target, "svelte-177x2q7", ".floorplan-main.svelte-177x2q7{width:100%;height:100%}");
+	internal.append_styles(target, "svelte-86bqav", ".floorplan-main.svelte-86bqav{width:100%;height:100%;pointer-events:none}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[14] = list[i];
+	return child_ctx;
 }
 
-// (23:0) {#if visible}
+// (22:0) {#if visible}
 function create_if_block(ctx) {
 	let div;
-	let currentfloor;
 	let t0;
 	let camera;
 	let t1;
 	let div_intro;
 	let current;
+	let each_value = /*floorplanData*/ ctx[9].floorDatas;
+	let each_blocks = [];
 
-	const currentfloor_spread_levels = [
-		{
-			five: /*five*/ ctx[1],
-			pxmm: /*pxmm*/ ctx[0],
-			floorIndex: /*floorIndex*/ ctx[5],
-			hoverEnable: /*hoverEnable*/ ctx[6],
-			floorplanData: /*floorplanData*/ ctx[10],
-			getLabelElement: /*getLabelElement*/ ctx[14],
-			roomLabelsEnable: /*roomLabelsEnable*/ ctx[8],
-			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[9],
-			onRoomHeightClick: /*onRoomHeightClick*/ ctx[13]
-		}
-	];
-
-	let currentfloor_props = {};
-
-	for (let i = 0; i < currentfloor_spread_levels.length; i += 1) {
-		currentfloor_props = internal.assign(currentfloor_props, currentfloor_spread_levels[i]);
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
 	}
 
-	currentfloor = new CurrentFloor({ props: currentfloor_props });
+	const out = i => internal.transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
 
 	const camera_spread_levels = [
 		{
-			panoIndex: /*panoIndex*/ ctx[4],
-			floorplanData: /*floorplanData*/ ctx[10],
-			lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[11],
-			cameraImageUrl: /*cameraImageUrl*/ ctx[12]
+			panoIndex: /*panoIndex*/ ctx[3],
+			floorplanData: /*floorplanData*/ ctx[9],
+			lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[10],
+			cameraImageUrl: /*cameraImageUrl*/ ctx[11]
 		}
 	];
 
@@ -2967,21 +3115,29 @@ function create_if_block(ctx) {
 	}
 
 	camera = new Camera({ props: camera_props });
-	let if_block = /*compassEnable*/ ctx[7] && create_if_block_1(ctx);
+	let if_block = /*compassEnable*/ ctx[6] && create_if_block_1(ctx);
 
 	return {
 		c() {
 			div = internal.element("div");
-			internal.create_component(currentfloor.$$.fragment);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
 			t0 = internal.space();
 			internal.create_component(camera.$$.fragment);
 			t1 = internal.space();
 			if (if_block) if_block.c();
-			internal.attr(div, "class", "floorplan-main svelte-177x2q7");
+			internal.attr(div, "class", "floorplan-main svelte-86bqav");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
-			internal.mount_component(currentfloor, div, null);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
 			internal.append(div, t0);
 			internal.mount_component(camera, div, null);
 			internal.append(div, t1);
@@ -2991,42 +3147,51 @@ function create_if_block(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, onRoomHeightClick*/ 26467)
-			? internal.get_spread_update(currentfloor_spread_levels, [
-					{
-						five: /*five*/ ctx[1],
-						pxmm: /*pxmm*/ ctx[0],
-						floorIndex: /*floorIndex*/ ctx[5],
-						hoverEnable: /*hoverEnable*/ ctx[6],
-						floorplanData: /*floorplanData*/ ctx[10],
-						getLabelElement: /*getLabelElement*/ ctx[14],
-						roomLabelsEnable: /*roomLabelsEnable*/ ctx[8],
-						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[9],
-						onRoomHeightClick: /*onRoomHeightClick*/ ctx[13]
+			if (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232) {
+				each_value = /*floorplanData*/ ctx[9].floorDatas;
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						internal.transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						internal.transition_in(each_blocks[i], 1);
+						each_blocks[i].m(div, t0);
 					}
-				])
-			: {};
+				}
 
-			currentfloor.$set(currentfloor_changes);
+				internal.group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				internal.check_outros();
+			}
 
-			const camera_changes = (dirty & /*panoIndex, floorplanData, lastPanoramaLongitude, cameraImageUrl*/ 7184)
+			const camera_changes = (dirty & /*panoIndex, floorplanData, lastPanoramaLongitude, cameraImageUrl*/ 3592)
 			? internal.get_spread_update(camera_spread_levels, [
 					{
-						panoIndex: /*panoIndex*/ ctx[4],
-						floorplanData: /*floorplanData*/ ctx[10],
-						lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[11],
-						cameraImageUrl: /*cameraImageUrl*/ ctx[12]
+						panoIndex: /*panoIndex*/ ctx[3],
+						floorplanData: /*floorplanData*/ ctx[9],
+						lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[10],
+						cameraImageUrl: /*cameraImageUrl*/ ctx[11]
 					}
 				])
 			: {};
 
 			camera.$set(camera_changes);
 
-			if (/*compassEnable*/ ctx[7]) {
+			if (/*compassEnable*/ ctx[6]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*compassEnable*/ 128) {
+					if (dirty & /*compassEnable*/ 64) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
@@ -3045,36 +3210,120 @@ function create_if_block(ctx) {
 				internal.check_outros();
 			}
 		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				internal.transition_in(each_blocks[i]);
+			}
+
+			internal.transition_in(camera.$$.fragment, local);
+			internal.transition_in(if_block);
+
+			if (!div_intro) {
+				internal.add_render_callback(() => {
+					div_intro = internal.create_in_transition(div, transition.fade, {
+						duration: /*duration*/ ctx[0],
+						easing: easing.linear
+					});
+
+					div_intro.start();
+				});
+			}
+
+			current = true;
+		},
+		o(local) {
+			each_blocks = each_blocks.filter(Boolean);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				internal.transition_out(each_blocks[i]);
+			}
+
+			internal.transition_out(camera.$$.fragment, local);
+			internal.transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) internal.detach(div);
+			internal.destroy_each(each_blocks, detaching);
+			internal.destroy_component(camera);
+			if (if_block) if_block.d();
+		}
+	};
+}
+
+// (24:4) {#each floorplanData.floorDatas as floorData}
+function create_each_block(ctx) {
+	let currentfloor;
+	let current;
+
+	const currentfloor_spread_levels = [
+		{
+			hoverEnable: /*hoverEnable*/ ctx[5],
+			floorplanData: /*floorplanData*/ ctx[9],
+			getLabelElement: /*getLabelElement*/ ctx[12],
+			roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
+			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
+		},
+		{
+			floorIndex: /*floorData*/ ctx[14].floorIndex
+		},
+		{
+			isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
+		}
+	];
+
+	let currentfloor_props = {};
+
+	for (let i = 0; i < currentfloor_spread_levels.length; i += 1) {
+		currentfloor_props = internal.assign(currentfloor_props, currentfloor_spread_levels[i]);
+	}
+
+	currentfloor = new CurrentFloor({ props: currentfloor_props });
+
+	return {
+		c() {
+			internal.create_component(currentfloor.$$.fragment);
+		},
+		m(target, anchor) {
+			internal.mount_component(currentfloor, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232)
+			? internal.get_spread_update(currentfloor_spread_levels, [
+					dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable*/ 13216 && {
+						hoverEnable: /*hoverEnable*/ ctx[5],
+						floorplanData: /*floorplanData*/ ctx[9],
+						getLabelElement: /*getLabelElement*/ ctx[12],
+						roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
+						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
+					},
+					dirty & /*floorplanData*/ 512 && {
+						floorIndex: /*floorData*/ ctx[14].floorIndex
+					},
+					dirty & /*floorplanData, floorIndex*/ 528 && {
+						isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
+					}
+				])
+			: {};
+
+			currentfloor.$set(currentfloor_changes);
+		},
 		i(local) {
 			if (current) return;
 			internal.transition_in(currentfloor.$$.fragment, local);
-			internal.transition_in(camera.$$.fragment, local);
-			internal.transition_in(if_block);
-
-			if (!div_intro) {
-				internal.add_render_callback(() => {
-					div_intro = internal.create_in_transition(div, transition.fade, {
-						duration: /*duration*/ ctx[2],
-						easing: easing.linear
-					});
-
-					div_intro.start();
-				});
-			}
-
 			current = true;
 		},
 		o(local) {
 			internal.transition_out(currentfloor.$$.fragment, local);
-			internal.transition_out(camera.$$.fragment, local);
-			internal.transition_out(if_block);
 			current = false;
 		},
 		d(detaching) {
-			if (detaching) internal.detach(div);
-			internal.destroy_component(currentfloor);
-			internal.destroy_component(camera);
-			if (if_block) if_block.d();
+			internal.destroy_component(currentfloor, detaching);
 		}
 	};
 }
@@ -3085,7 +3334,10 @@ function create_if_block_1(ctx) {
 	let current;
 
 	compass = new Compass({
-			props: { floorplanData: /*floorplanData*/ ctx[10] }
+			props: {
+				floorplanData: /*floorplanData*/ ctx[9],
+				northDesc: /*northDesc*/ ctx[2]
+			}
 		});
 
 	return {
@@ -3098,7 +3350,8 @@ function create_if_block_1(ctx) {
 		},
 		p(ctx, dirty) {
 			const compass_changes = {};
-			if (dirty & /*floorplanData*/ 1024) compass_changes.floorplanData = /*floorplanData*/ ctx[10];
+			if (dirty & /*floorplanData*/ 512) compass_changes.floorplanData = /*floorplanData*/ ctx[9];
+			if (dirty & /*northDesc*/ 4) compass_changes.northDesc = /*northDesc*/ ctx[2];
 			compass.$set(compass_changes);
 		},
 		i(local) {
@@ -3119,7 +3372,7 @@ function create_if_block_1(ctx) {
 function create_fragment(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*visible*/ ctx[3] && create_if_block(ctx);
+	let if_block = /*visible*/ ctx[1] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -3132,11 +3385,11 @@ function create_fragment(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*visible*/ ctx[3]) {
+			if (/*visible*/ ctx[1]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*visible*/ 8) {
+					if (dirty & /*visible*/ 2) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
@@ -3172,10 +3425,9 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
-	let { pxmm } = $$props;
-	let { five } = $$props;
 	let { duration = 0 } = $$props;
 	let { visible } = $$props;
+	let { northDesc } = $$props;
 	let { panoIndex } = $$props;
 	let { floorIndex } = $$props;
 	let { hoverEnable } = $$props;
@@ -3185,32 +3437,30 @@ function instance($$self, $$props, $$invalidate) {
 	let { floorplanData } = $$props;
 	let { lastPanoramaLongitude } = $$props;
 	let { cameraImageUrl } = $$props;
-	let { onRoomHeightClick } = $$props;
 	let { getLabelElement } = $$props;
+	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
-		if ('five' in $$props) $$invalidate(1, five = $$props.five);
-		if ('duration' in $$props) $$invalidate(2, duration = $$props.duration);
-		if ('visible' in $$props) $$invalidate(3, visible = $$props.visible);
-		if ('panoIndex' in $$props) $$invalidate(4, panoIndex = $$props.panoIndex);
-		if ('floorIndex' in $$props) $$invalidate(5, floorIndex = $$props.floorIndex);
-		if ('hoverEnable' in $$props) $$invalidate(6, hoverEnable = $$props.hoverEnable);
-		if ('compassEnable' in $$props) $$invalidate(7, compassEnable = $$props.compassEnable);
-		if ('roomLabelsEnable' in $$props) $$invalidate(8, roomLabelsEnable = $$props.roomLabelsEnable);
-		if ('ruleLabelsEnable' in $$props) $$invalidate(9, ruleLabelsEnable = $$props.ruleLabelsEnable);
-		if ('floorplanData' in $$props) $$invalidate(10, floorplanData = $$props.floorplanData);
-		if ('lastPanoramaLongitude' in $$props) $$invalidate(11, lastPanoramaLongitude = $$props.lastPanoramaLongitude);
-		if ('cameraImageUrl' in $$props) $$invalidate(12, cameraImageUrl = $$props.cameraImageUrl);
-		if ('onRoomHeightClick' in $$props) $$invalidate(13, onRoomHeightClick = $$props.onRoomHeightClick);
-		if ('getLabelElement' in $$props) $$invalidate(14, getLabelElement = $$props.getLabelElement);
+		if ('duration' in $$props) $$invalidate(0, duration = $$props.duration);
+		if ('visible' in $$props) $$invalidate(1, visible = $$props.visible);
+		if ('northDesc' in $$props) $$invalidate(2, northDesc = $$props.northDesc);
+		if ('panoIndex' in $$props) $$invalidate(3, panoIndex = $$props.panoIndex);
+		if ('floorIndex' in $$props) $$invalidate(4, floorIndex = $$props.floorIndex);
+		if ('hoverEnable' in $$props) $$invalidate(5, hoverEnable = $$props.hoverEnable);
+		if ('compassEnable' in $$props) $$invalidate(6, compassEnable = $$props.compassEnable);
+		if ('roomLabelsEnable' in $$props) $$invalidate(7, roomLabelsEnable = $$props.roomLabelsEnable);
+		if ('ruleLabelsEnable' in $$props) $$invalidate(8, ruleLabelsEnable = $$props.ruleLabelsEnable);
+		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);
 	};
 
 	return [
-		pxmm,
-		five,
 		duration,
 		visible,
+		northDesc,
 		panoIndex,
 		floorIndex,
 		hoverEnable,
@@ -3220,8 +3470,8 @@ function instance($$self, $$props, $$invalidate) {
 		floorplanData,
 		lastPanoramaLongitude,
 		cameraImageUrl,
-		onRoomHeightClick,
-		getLabelElement
+		getLabelElement,
+		adaptiveRoomLabelVisibleEnable
 	];
 }
 
@@ -3236,27 +3486,255 @@ class Main extends internal.SvelteComponent {
 			create_fragment,
 			internal.safe_not_equal,
 			{
-				pxmm: 0,
-				five: 1,
-				duration: 2,
-				visible: 3,
-				panoIndex: 4,
-				floorIndex: 5,
-				hoverEnable: 6,
-				compassEnable: 7,
-				roomLabelsEnable: 8,
-				ruleLabelsEnable: 9,
-				floorplanData: 10,
-				lastPanoramaLongitude: 11,
-				cameraImageUrl: 12,
-				onRoomHeightClick: 13,
-				getLabelElement: 14
+				duration: 0,
+				visible: 1,
+				northDesc: 2,
+				panoIndex: 3,
+				floorIndex: 4,
+				hoverEnable: 5,
+				compassEnable: 6,
+				roomLabelsEnable: 7,
+				ruleLabelsEnable: 8,
+				floorplanData: 9,
+				lastPanoramaLongitude: 10,
+				cameraImageUrl: 11,
+				getLabelElement: 12,
+				adaptiveRoomLabelVisibleEnable: 13
 			},
 			add_css
 		);
 	}
 }
 
+async function formatOutlines(outlines) {
+    const headers = new Headers({ 'Content-Type': 'text/plain' });
+    const getOutlineItem = async function (item) {
+        const outlineItem = {
+            index: item.index,
+            url: item.url,
+            svgUrl: item.svg_url,
+        };
+        if (item.svg_url) {
+            const svgContent = await fetch(item.svg_url, { headers }).then((res) => res.text());
+            outlineItem.svgContent = svgContent;
+        }
+        return outlineItem;
+    };
+    const svgOutlineItems = await Promise.all(outlines.map(getOutlineItem));
+    return svgOutlineItems;
+}
+function formatRoom(data) {
+    const floorplanRoomItem = {
+        id: data.id,
+        size: data.size,
+        name: data.name,
+        path: data.path,
+        roomType: data.room_type,
+        floorType: data.floor_type,
+        roomLabel: {
+            position: data.room_label.position,
+            positionInImage: data.room_label.position_in_image,
+        },
+        observerIndexs: data.observer_indexs,
+    };
+    return floorplanRoomItem;
+}
+function formatFloorData(_data) {
+    return {
+        floorName: _data.floor_name,
+        floorIndex: _data.floor_index,
+        rooms: _data.rooms.map(formatRoom),
+        rules: _data.rules,
+    };
+}
+function formateFloorplanObserver(data) {
+    const floorplanObserver = {
+        index: data.index,
+        floorIndex: data.floor_index,
+        position: data.position,
+        positionInImage: data.position_in_image,
+    };
+    return floorplanObserver;
+}
+function formatFloorplanEntrance(data) {
+    const floorplanEntrance = {
+        rad: data.rad,
+        position: data.position,
+        positionInImage: data.position_in_image,
+        northRad: data.north_rad,
+        roomId: data.room_id,
+        floorIndex: data.floor_index,
+    };
+    return floorplanEntrance;
+}
+async function formatData(data) {
+    const outlines = await formatOutlines(data.outlines);
+    const bounding = data.computed_data.bounding;
+    const floorDatas = data.computed_data.floor_datas.map(formatFloorData);
+    const entrance = data.computed_data.entrance ? formatFloorplanEntrance(data.computed_data.entrance) : null;
+    const floorplanData = {
+        outlines,
+        entrance,
+        bounding,
+        floorDatas,
+        observers: data.computed_data.observers.map(formateFloorplanObserver),
+    };
+    return floorplanData;
+}
+
+/**
+ * 把第一个参数传入第二个参数（函数）中并执行
+ * 一般用于执行函数后返回变量。
+ * @param {any} something
+ * @param {function} callback
+ * @return {any}
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function tap(something, callback) {
+    callback(something);
+    return something;
+}
+
+/**
+ * 过滤掉不需要的对象字段函数：实现从一个对象中排除某些指定属性后生成的新对象。
+ * @param object
+ * @param props 排除的属性
+ * @return
+ */
+function omit(object, props) {
+    return tap({}, (result) => {
+        for (const name in object) {
+            if (props.indexOf(name) !== -1)
+                continue;
+            result[name] = object[name];
+        }
+    });
+}
+
+var FLOOR_PLAN_ATTACHED_TO;
+(function (FLOOR_PLAN_ATTACHED_TO) {
+    FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["FLOOR"] = 1] = "FLOOR";
+    FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["CEILING"] = 2] = "CEILING";
+    FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["BOUNDING_CENTER"] = 3] = "BOUNDING_CENTER";
+})(FLOOR_PLAN_ATTACHED_TO || (FLOOR_PLAN_ATTACHED_TO = {}));
+
+/**
+ * plugin 的基本控制器
+ */
+class Controller$2 {
+    constructor(five$1) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * 插件事件钩子
+         */
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new five.Subscribe()
+        });
+        this.five = five$1;
+    }
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState() {
+        return this.state;
+    }
+}
+
+class Controller$1 extends Controller$2 {
+}
+
+/**
+ * 比较两个数字近似相等
+ * @param num1 数字1
+ * @param num2 数字2
+ * @param accuracy 精度：精确到小数点后几位，默认精确到 小数点后四位
+ */
+function nearlyEqual(num1, num2, accuracy = 4) {
+    return Math.floor(num1 * Math.pow(10, accuracy)) === Math.floor(num2 * Math.pow(10, accuracy));
+}
+
+/** 等待 five changeMode 结束
+ * @description Promise 的状态只代表 mode 与预期是否一致，不保证参数的一致性
+ */
+async function changeMode(five, changeModeParams) {
+    await new Promise((resolve, reject) => {
+        // 虽然 changeMode 是异步函数，但不代表异步流程结束代表切换 Mode 动画结束
+        five.changeMode(...changeModeParams).catch((error) => reject(error));
+        five.once('initAnimationEnded', () => {
+            const fiveCurrentState = five.getCurrentState();
+            const correctMode = changeModeParams[0];
+            if (fiveCurrentState.mode !== correctMode)
+                reject(new Error('mode 与预期不符'));
+            /** 检测当前的 current pose 和传入的 pose 是否一致 */
+            const checkPose = () => {
+                const correctPose = changeModeParams[1];
+                if (!correctPose)
+                    return true;
+                return Object.keys(correctPose).every((key) => {
+                    const fivePoseItem = fiveCurrentState[key];
+                    if (fivePoseItem === undefined)
+                        return true;
+                    const correctPoseItem = correctPose[key];
+                    if (typeof fivePoseItem === 'number' && typeof correctPoseItem === 'number') {
+                        return nearlyEqual(fivePoseItem, correctPoseItem, 2);
+                    }
+                    return fivePoseItem === correctPoseItem;
+                });
+            };
+            const checkPoseResult = checkPose();
+            if (!checkPoseResult)
+                reject(new Error('five pose 与预期不符'));
+            resolve();
+        });
+    });
+}
+
+/** 获取当前楼层地面的 Y 值 */
+function getFloorY(five, floorIndex) {
+    const maxFloorIndex = Math.max(...five.work.observers.map((ob) => ob.floorIndex));
+    return floorIndex > maxFloorIndex
+        ? five.model.bounding.max.y
+        : Math.max(...five.work.observers
+            .filter((ob) => ob.floorIndex === floorIndex)
+            .map((ob) => ob.standingPosition.y));
+}
+/** 获取当前吸附类型的 Y 值
+ * * FLOOR_PLAN_ATTACHED_TO.FLOOR：当前楼层地板的 Y
+ * * FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER：当前模型中心的 Y
+ * * FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER：当前楼层天花板的 Y
+*/
+function getAttachedY(five, floorIndex, attachedTo = FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER) {
+    const currentFloorY = getFloorY(five, floorIndex);
+    const nextFloorY = getFloorY(five, floorIndex + 1);
+    if (attachedTo === FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER)
+        return (five.model.bounding.max.y + five.model.bounding.min.y) / 2;
+    else if (attachedTo === FLOOR_PLAN_ATTACHED_TO.CEILING)
+        return nextFloorY;
+    else
+        return currentFloorY;
+}
+/**
+ * 获取「在俯视图」状态下，模型 mm 与屏幕像素 px 的对应关系，即每 mm 对应多少 px
+ * @param five five
+ */
+function getPxmm(five, container, floorIndex, options) {
+    const y = getAttachedY(five, floorIndex, options === null || options === void 0 ? void 0 : options.attachedTo);
+    const originPosition = new THREE__namespace.Vector3(0, y, 0);
+    const originPositionXUnit = new THREE__namespace.Vector3(1, y, 0);
+    const mouse = originPosition.clone().project(five.camera);
+    const xUnitMouse = originPositionXUnit.clone().project(five.camera);
+    const pxmm = Math.abs((xUnitMouse.x - mouse.x) / 1000) * (container.getBoundingClientRect().width / 2);
+    return pxmm;
+}
+
 function changeModelCanvasOpacity(five, opacity, duration = 300) {
     const fiveEle = five.getElement();
     if (!fiveEle)
@@ -3273,193 +3751,484 @@ function changeModelCanvasOpacity(five, opacity, duration = 300) {
     });
 }
 
-class TopviewFloorplanPluginController {
-    size = { width: 0, height: 0 };
-    visible = false;
-    pxmm = 0;
-    app;
-    five;
-    panoIndex = 0;
-    floorIndex = 0;
-    configs = {};
-    lastPanoramaLongitude = 0;
-    selector;
-    floorplanData;
-    wrapper;
-    container = document.createElement('div');
+class Controller extends Controller$1 {
     constructor(five, params) {
-        this.five = five;
-        this.selector = params.selector;
-        this.configs = omit(params, ['selector']);
-        // 设置 container 样式
-        this.container.classList.add('floorplan-plugin');
-        Object.assign(this.container.style, pluginStyle);
+        super(five);
+        // =============== public properties =================
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'topviewFloorplanPlugin'
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== private properties =================
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "selector", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "panoIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        Object.defineProperty(this, "floorIndex", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        /** 户型图父容器 */
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 户型图主容器 */
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
+        /** 展示户型图图前，Five 的 Panorama Longitude */
+        Object.defineProperty(this, "lastPanoramaLongitude", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0
+        });
+        /** 户型图大小 */
+        Object.defineProperty(this, "size", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { width: 0, height: 0 }
+        });
+        /** 是否已经执行过事件监听 */
+        Object.defineProperty(this, "hasAddedEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** 上一次隐藏是否是用户调用了 hide 导致的 */
+        Object.defineProperty(this, "isHiddenByHideFunc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        /** 更新户型图大小 */
+        Object.defineProperty(this, "updateSize", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.data)
+                    return;
+                if (!this.container || !this.wrapper)
+                    return;
+                if (this.five.getCurrentState().mode !== 'Topview')
+                    return;
+                // 计算户型图展示大小
+                const { min, max } = this.data.bounding;
+                const width = max.x - min.x;
+                const height = max.y - min.y;
+                // 每毫米对应的 px 值
+                const options = this.state.config.attachedTo ? { attachedTo: this.state.config.attachedTo } : undefined;
+                const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
+                const _width = Math.ceil(width * pxmm);
+                const _height = Math.ceil(height * pxmm);
+                if (this.size.width === _width && this.size.height === _height)
+                    return;
+                this.container.style.width = _width + 'px';
+                this.container.style.height = _height + 'px';
+                this.size = { width: _width, height: _height };
+            }
+        });
+        /** 销毁插件 */
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a, _b;
+                this.removeEventListener();
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.app = undefined;
+                (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+                this.data = undefined;
+                this.wrapper = undefined;
+                this.selector = undefined;
+                this.hooks.emit('dispose');
+            }
+        });
+        Object.defineProperty(this, "_disable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (options) => {
+                var _a, _b;
+                const { userAction } = options;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.app = undefined;
+                (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+                this.removeEventListener();
+                this.hooks.emit('disable', { userAction });
+            }
+        });
+        /** modelLoaded 之后自动执行 append container 操作  */
+        Object.defineProperty(this, "onFiveModelLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.state.enabled === false)
+                    return;
+                if (this.wrapper)
+                    return;
+                if (!this.selector)
+                    return;
+                const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
+                if (!wrapper)
+                    throw new Error('不正确的父容器选择器');
+                this.wrapper = wrapper;
+                wrapper.append(this.container);
+            }
+        });
+        /** 非 Topview 态隐藏户型图 */
+        Object.defineProperty(this, "onFiveModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (...[mode, , , , userAction]) => {
+                if (mode !== 'Topview' && this.state.visible) {
+                    this.updateState({ visible: false }, userAction);
+                    this._hide({ userAction });
+                }
+            }
+        });
+        Object.defineProperty(this, "onFivePanoArrived", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (index) => {
+                var _a;
+                if (!((_a = this.five) === null || _a === void 0 ? void 0 : _a.work))
+                    return;
+                this.panoIndex = index;
+                this.floorIndex = this.five.work.observers[index].floorIndex;
+            }
+        });
+        Object.defineProperty(this, "onFiveCameraUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (_, userAction) => {
+                if (!this.state.visible)
+                    return;
+                this.updatePosition();
+                this.updateSize();
+            }
+        });
+        Object.defineProperty(this, "onFiveWantsGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (type) => {
+                if (type !== 'pan' && type !== 'pinch' && type !== 'mouseWheel')
+                    return;
+                if (this.state.visible && !this.state.config.gestureEnable)
+                    return false;
+            }
+        });
+        Object.defineProperty(this, "onFiveWantsMoveToPano", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.state.visible && this.state.config.preventRoomClick)
+                    return false;
+            }
+        });
+        /** 动画结束后是 Topview 态就展示户型图 */
+        Object.defineProperty(this, "onFiveInitAnimationEnded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (...[, , userAction]) => {
+                const { mode } = this.five.getCurrentState();
+                if (mode === 'Topview' && !this.isHiddenByHideFunc && !this.state.visible && this.state.config.autoShowEnable) {
+                    this.updateState({ visible: true }, userAction);
+                    this._show({ userAction });
+                }
+            }
+        });
+        Object.defineProperty(this, "onModelShownFloorChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (shownFloor) => {
+                if (this.floorIndex === shownFloor)
+                    return;
+                if (shownFloor === null) {
+                    const panoIndex = this.five.getCurrentState().panoIndex;
+                    this.floorIndex = this.five.work.observers[panoIndex].floorIndex;
+                    return;
+                }
+                // 模型楼层高亮改变时，自动进行楼层切换
+                this.floorIndex = shownFloor;
+                this.updateSize();
+                this.render();
+            }
+        });
+        if (params === null || params === void 0 ? void 0 : params.selector) {
+            this.selector = params.selector;
+            console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+        }
+        // =============== init State ===============
+        const baseConfig = {
+            northDesc: '北',
+            modelOpacity: 1,
+            hoverEnable: true,
+            compassEnable: true,
+            gestureEnable: false,
+            autoShowEnable: true,
+            ruleLabelsEnable: true,
+            roomLabelsEnable: true,
+            cameraImageUrl: CAMERA_IMAGE,
+            attachedTo: FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
+            getLabelElement: undefined,
+            adaptiveRoomLabelVisibleEnable: true,
+        };
+        const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
+        const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
+        this.state = {
+            enabled: true,
+            visible: false,
+            config,
+        };
+        // =============== init Container ===============
+        this.initContainer();
+        // =============== init Listener ===============
+        // 注意插件声明周期内只监听一次的事件不放在 addEventListener 里面
         // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
-        this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
-        this.five.once('dispose', this.dispose);
-        this.five.on('modeChange', this.handleModeChange);
-        this.five.on('panoArrived', this.handlePanoArrived);
-        this.five.on('initAnimationEnded', this.handleInitAnimationEnded);
-        this.five.on('modelShownFloorChange', this.onModelShownFloorChange);
+        five.model.loaded ? this.onFiveModelLoaded() : five.once('modelLoaded', this.onFiveModelLoaded);
+        five.once('dispose', this.dispose);
+        this.addEventListener();
     }
-    /** 加载户型图数据 */
-    async load(data) {
-        const copyData = JSON.parse(JSON.stringify(data));
-        this.floorplanData = await formatData(copyData);
+    async load(serverData, state, userAction = true) {
+        function isPluginServerData(serverData) {
+            return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+        }
+        const _data = serverData;
+        if (_data && !_data.version)
+            console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
+        const copyData = JSON.parse(JSON.stringify(serverData));
+        const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+        const prevData = this.data;
+        this.data = await formatData(_serverData);
+        this.hooks.emit('dataLoaded', this.data);
+        this.hooks.emit('dataChange', this.data, prevData);
+        if (state)
+            this.updateState(state, userAction);
         this.render();
     }
+    /** 更新户型图位置 */
+    updatePosition() {
+        var _a;
+        const y = getAttachedY(this.five, this.floorIndex, this.state.config.attachedTo);
+        const modelPosition = (_a = this.five.model) === null || _a === void 0 ? void 0 : _a.bounding.getCenter(new THREE__namespace.Vector3()).setY(y);
+        if (!modelPosition)
+            return;
+        const ndcPosition = modelPosition.clone().project(this.five.camera);
+        const left = (ndcPosition.x + 1) / 2;
+        const top = -(ndcPosition.y - 1) / 2;
+        this.container.style.left = left * 100 + '%';
+        this.container.style.top = top * 100 + '%';
+    }
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper) {
         this.wrapper = wrapper;
+        // 插件 disabled 时，只是不执行副作用，但是 wrapper 还是要赋值的，不然 enable 的时候找不到父容器
+        if (!this.state.enabled)
+            return;
         wrapper.appendChild(this.container);
+        this.render();
         return this;
     }
-    dispose = () => {
-        this.hide();
-        this.container?.remove();
-        this.app?.$destroy();
-        this.five.off('modeChange', this.handleModeChange);
-        this.five.off('panoArrived', this.handlePanoArrived);
-        this.five.off('modelLoaded', this.handleModelLoaded);
-        this.five.off('wantsMoveToPano', this.handleWantsMoveToPano);
-        this.five.off('wantsPanGesture', this.handleWantsPanGesture);
-        this.five.off('initAnimationEnded', this.handleInitAnimationEnded);
-        this.five.off('modelShownFloorChange', this.onModelShownFloorChange);
-    };
-    /** 模型楼层高亮改变时，自动进行楼层切换 */
-    onModelShownFloorChange = (shownFloor) => {
-        if (shownFloor === null)
-            return;
-        this.floorIndex = shownFloor;
-        this.updateSize();
-        this.render();
-    };
-    /** panoIndex 改变时，更新 floorIndex */
-    handlePanoArrived = (index) => {
-        if (!this.five?.work)
+    async show(options = {}) {
+        // 已经展示完成了，不做任何操作
+        if (this.state.visible)
             return;
-        this.panoIndex = index;
-        this.floorIndex = this.five.work.observers[index].floorIndex;
-    };
-    /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
-    handleWantsMoveToPano = () => {
-        if (!this.visible)
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: true }, userAction);
+        this._show({ userAction });
+    }
+    async hide(options = {}) {
+        this.isHiddenByHideFunc = true;
+        if (!this.state.visible)
             return;
-        if (this.configs.preventRoomClick)
-            return false;
-        return;
-    };
-    /** 在户型图展示时阻止 Five 滑动行为 */
-    handleWantsPanGesture = () => {
-        if (!this.visible)
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: false }, userAction);
+        this._hide({ userAction });
+    }
+    enable(options = {}) {
+        if (this.state.enabled)
             return;
-        return false;
-    };
-    handleModelLoaded = () => {
-        if (this.wrapper)
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: true }, options.userAction || userAction);
+        this._enable({ userAction });
+    }
+    disable(options = {}) {
+        if (!this.state.enabled)
             return;
-        if (!this.selector)
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: false }, options.userAction || userAction);
+        this._disable({ userAction });
+    }
+    /** 更改插件 State */
+    setState(state, options = {}) {
+        const prevState = this.state;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState(state, userAction);
+        if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
+            const options = { userAction };
+            state.enabled ? this._enable(options) : this._disable(options);
+        }
+        if (state.visible !== undefined && prevState.visible !== state.visible) {
+            const options = { userAction };
+            state.visible ? this._show(options) : this._hide(options);
+        }
+    }
+    async formatData(serverData) {
+        return await formatData(serverData.data);
+    }
+    async _show(options) {
+        if (!this.state.enabled)
             return;
-        const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
-        if (!wrapper)
-            throw new Error('不正确的父容器选择器');
-        this.wrapper = wrapper;
-        wrapper.append(this.container);
-    };
-    /** 非 Topview 态隐藏户型图 */
-    handleModeChange = (mode) => {
-        if (mode !== 'Topview')
-            return this.hide();
-    };
-    /** 动画结束后是 Topview 态就展示户型图 */
-    handleInitAnimationEnded = () => {
-        const { mode } = this.five.getCurrentState();
-        if (mode === 'Topview')
-            this.show();
-    };
-    show() {
-        this.visible = true;
+        this.isHiddenByHideFunc = false;
+        const { userAction } = options;
+        this.hooks.emit('show', { userAction });
+        if (this.five.getCurrentState().mode !== 'Topview') {
+            await changeMode(this.five, ['Topview', undefined, undefined, userAction]);
+        }
         this.five.model.show(this.floorIndex);
+        this.updatePosition();
         this.updateSize();
         const renderDuration = 500;
-        const modelOpacity = this.configs.modelOpacity;
-        if (typeof modelOpacity === 'number') {
-            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-        }
-        this.render(renderDuration);
-        this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
-        this.five.on('wantsPanGesture', this.handleWantsPanGesture);
+        const modelOpacity = this.state.config.modelOpacity;
+        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+        this.hooks.emit('showAnimationEnded', { userAction });
+        this.render();
     }
-    hide() {
+    async _hide(options) {
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('hide', { userAction });
         const modelOpacity = 1;
         const renderDuration = 0;
-        this.visible = false;
         changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
         this.render();
-        this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
-        this.five.on('wantsPanGesture', this.handleWantsPanGesture);
     }
-    /** 更新户型图大小 */
-    updateSize = () => {
-        if (!this.floorplanData)
+    _enable(options) {
+        const { userAction } = options;
+        this.addEventListener();
+        if (this.wrapper)
+            this.wrapper.append(this.container);
+        this.hooks.emit('enable', { userAction });
+        if (this.state.visible)
+            this._show({ userAction });
+    }
+    updateState(state, userAction) {
+        const prevState = this.state;
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (equal(this.state, prevState, { deep: true }))
             return;
-        if (!this.container || !this.wrapper)
+        this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
+    }
+    addEventListener() {
+        if (!this.state.enabled)
             return;
-        if (this.five.getCurrentState().mode !== 'Topview')
+        if (this.hasAddedEventListener)
             return;
-        // 计算户型图展示大小
-        const { min, max } = this.floorplanData.bounding;
-        const width = max.x - min.x;
-        const height = max.y - min.y;
-        // 每毫米对应的 px 值
-        const options = this.configs.attachedTo ? { attachedTo: this.configs.attachedTo } : undefined;
-        const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
-        const _width = Math.ceil(width * pxmm);
-        const _height = Math.ceil(height * pxmm);
-        this.pxmm = pxmm;
-        this.size = { width: _width, height: _height };
-        this.container.style.width = _width + 'px';
-        this.container.style.height = _height + 'px';
-    };
+        const five = this.five;
+        five.on('modeChange', this.onFiveModeChange);
+        five.on('panoArrived', this.onFivePanoArrived);
+        five.on('cameraUpdate', this.onFiveCameraUpdate);
+        five.on('wantsGesture', this.onFiveWantsGesture);
+        five.on('wantsMoveToPano', this.onFiveWantsMoveToPano);
+        five.on('initAnimationEnded', this.onFiveInitAnimationEnded);
+        five.on('modelShownFloorChange', this.onModelShownFloorChange);
+    }
+    removeEventListener() {
+        const five = this.five;
+        this.hasAddedEventListener = false;
+        // 注意这里并没有消除 dispose 的监听
+        five.off('modeChange', this.onFiveModeChange);
+        five.off('panoArrived', this.onFivePanoArrived);
+        five.off('cameraUpdate', this.onFiveCameraUpdate);
+        five.off('wantsGesture', this.onFiveWantsGesture);
+        five.off('wantsMoveToPano', this.onFiveWantsMoveToPano);
+        five.off('initAnimationEnded', this.onFiveInitAnimationEnded);
+        five.off('modelShownFloorChange', this.onModelShownFloorChange);
+    }
+    /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
+     *
+     * - TODO: 等 selector 功能下掉之后删除这个逻辑
+     */
+    initContainer() {
+        this.container.classList.add('floorplan-plugin');
+        Object.assign(this.container.style, {
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate3d(-50%, -50%, 10px)',
+            zIndex: 10,
+            pointerEvents: 'none',
+            'will-change': 'width, height',
+        });
+        this.five.addExtraElement(this.container);
+    }
     render(duration) {
-        if (!this.container || !this.floorplanData)
+        if (!this.state.enabled)
+            return;
+        if (!this.container || !this.data)
             return;
         if (this.size.width === 0)
             return;
-        const { getLabelElement, cameraImageUrl, preventRoomClick, hoverEnable, compassEnable, roomLabelsEnable, ruleLabelsEnable, } = this.configs;
-        const handleClick = preventRoomClick ? () => false : undefined;
-        const props = {
-            five: this.five,
-            pxmm: this.pxmm,
-            cameraImageUrl,
-            visible: this.visible,
-            duration: duration ?? 0,
-            panoIndex: this.panoIndex,
-            floorIndex: this.floorIndex,
-            floorplanData: this.floorplanData,
-            hoverEnable: hoverEnable ?? false,
-            compassEnable: compassEnable ?? true,
-            ruleLabelsEnable: ruleLabelsEnable ?? true,
-            roomLabelsEnable: roomLabelsEnable ?? true,
-            lastPanoramaLongitude: this.lastPanoramaLongitude,
-            getLabelElement,
-            onRoomHeightClick: handleClick,
-        };
-        if (!this.app) {
-            this.app = new Main({
-                target: this.container,
-                intro: true,
-                props,
-            });
-        }
-        else {
-            this.app.$set(props);
-        }
+        const props = Object.assign(Object.assign({}, this.state.config), { visible: this.state.visible, duration: duration !== null && duration !== void 0 ? duration : 0, panoIndex: this.panoIndex, floorIndex: this.floorIndex, floorplanData: this.data, lastPanoramaLongitude: this.lastPanoramaLongitude });
+        if (this.app)
+            return this.app.$set(props);
+        this.app = new Main({ target: this.container, intro: true, props });
     }
 }
 
 const TopviewFloorplanPlugin = (five, params) => {
-    return new TopviewFloorplanPluginController(five, params);
+    return new Controller(five, params);
 };
 
 exports.TopviewFloorplanPlugin = TopviewFloorplanPlugin;