@realsee/dnalogel 2.0.0-alpha.16 → 2.0.0-alpha.19

package/dist/index.umd.js

@@ -24,21 +24,6 @@
         return Object.freeze(n);
     }
 
-    function _mergeNamespaces(n, m) {
-        m.forEach(function (e) {
-            e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
-                if (k !== 'default' && !(k in n)) {
-                    var d = Object.getOwnPropertyDescriptor(e, k);
-                    Object.defineProperty(n, k, d.get ? d : {
-                        enumerable: true,
-                        get: function () { return e[k]; }
-                    });
-                }
-            });
-        });
-        return Object.freeze(n);
-    }
-
     var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
     var TWEEN__namespace = /*#__PURE__*/_interopNamespace(TWEEN);
     var TWEEN__default = /*#__PURE__*/_interopDefaultLegacy(TWEEN);
@@ -493,8 +478,8 @@
 
     /* src/ModelRoomLabelPlugin/RoomLabelItem.svelte generated by Svelte v3.47.0 */
 
-    function add_css$l(target) {
-    	internal.append_styles(target, "svelte-17nkflf", ".room-label-item.svelte-17nkflf{position:absolute;font-size:8px;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none}.room-label-item__text.svelte-17nkflf{position:absolute;left:0;top:-64px;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:20px;min-width:32px;padding:0 6px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-17nkflf{position:absolute;top:-44px;height:48px;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-17nkflf{font-size:10px}");
+    function add_css$m(target) {
+    	internal.append_styles(target, "svelte-1ak9fbs", ".room-label-item.svelte-1ak9fbs{position:absolute;font-size:0.41667rem;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.room-label-item__text.svelte-1ak9fbs{position:absolute;left:0;top:-3.33333rem;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:1.04167rem;min-width:1.66667rem;padding:0 0.3125rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-1ak9fbs{position:absolute;top:-2.29167rem;height:2.5rem;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-1ak9fbs{font-size:0.52083rem}");
     }
 
     function create_fragment$q(ctx) {
@@ -514,11 +499,11 @@
     			t0 = internal.text(t0_value);
     			t1 = internal.space();
     			div0 = internal.element("div");
-    			internal.attr(span, "class", "room-label-item__text svelte-17nkflf");
+    			internal.attr(span, "class", "room-label-item__text svelte-1ak9fbs");
     			internal.set_style(span, "background-image", "url(" + ROOM_LABEL_BG + ")");
     			internal.toggle_class(span, "wide", /*roomLabel*/ ctx[0].name.length > 3);
-    			internal.attr(div0, "class", "room-label-item__bar svelte-17nkflf");
-    			internal.attr(div1, "class", "room-label-item svelte-17nkflf");
+    			internal.attr(div0, "class", "room-label-item__bar svelte-1ak9fbs");
+    			internal.attr(div1, "class", "room-label-item svelte-1ak9fbs");
     			internal.set_style(div1, "z-index", /*roomLabel*/ ctx[0].zIndex, false);
     			internal.set_style(div1, "transform", /*roomLabel*/ ctx[0].transform, false);
     			internal.set_style(div1, "opacity", /*roomLabel*/ ctx[0].visible ? 1 : 0, false);
@@ -587,24 +572,24 @@
     class RoomLabelItem extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$q, create_fragment$q, internal.safe_not_equal, { five: 2, roomLabel: 0 }, add_css$l);
+    		internal.init(this, options, instance$q, create_fragment$q, internal.safe_not_equal, { five: 2, roomLabel: 0 }, add_css$m);
     	}
     }
 
     /* src/ModelRoomLabelPlugin/RoomLabelItems.svelte generated by Svelte v3.47.0 */
 
-    function add_css$k(target) {
-    	internal.append_styles(target, "svelte-185yvaa", ".room-labels-container.svelte-185yvaa{width:100%;height:100%;position:relative;color:#fff}");
+    function add_css$l(target) {
+    	internal.append_styles(target, "svelte-9eg4zi", ".room-labels-container.svelte-9eg4zi{width:100%;height:100%;position:relative;color:#fff}");
     }
 
-    function get_each_context$8(ctx, list, i) {
+    function get_each_context$9(ctx, list, i) {
     	const child_ctx = ctx.slice();
     	child_ctx[9] = list[i];
     	return child_ctx;
     }
 
     // (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
-    function create_each_block$8(key_1, ctx) {
+    function create_each_block$9(key_1, ctx) {
     	let first;
     	let roomlabelitem;
     	let current;
@@ -662,9 +647,9 @@
     	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context$8(ctx, each_value, i);
+    		let child_ctx = get_each_context$9(ctx, each_value, i);
     		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block$8(key, child_ctx));
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$9(key, child_ctx));
     	}
 
     	return {
@@ -675,7 +660,7 @@
     				each_blocks[i].c();
     			}
 
-    			internal.attr(div, "class", "room-labels-container svelte-185yvaa");
+    			internal.attr(div, "class", "room-labels-container svelte-9eg4zi");
     			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
     		},
     		m(target, anchor) {
@@ -692,7 +677,7 @@
     			if (dirty & /*roomLabels, five*/ 3) {
     				each_value = /*roomLabels*/ ctx[0];
     				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$8, null, get_each_context$8);
+    				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.outro_and_destroy_block, create_each_block$9, null, get_each_context$9);
     				internal.check_outros();
     			}
     		},
@@ -815,7 +800,7 @@
     class RoomLabelItems extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$p, create_fragment$p, internal.safe_not_equal, { five: 1, roomLabels: 0 }, add_css$k);
+    		internal.init(this, options, instance$p, create_fragment$p, internal.safe_not_equal, { five: 1, roomLabels: 0 }, add_css$l);
     	}
     }
 
@@ -986,37 +971,11 @@
         FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["BOUNDING_CENTER"] = 3] = "BOUNDING_CENTER";
     })(exports.FLOOR_PLAN_ATTACHED_TO || (exports.FLOOR_PLAN_ATTACHED_TO = {}));
 
-    /*! *****************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __awaiter(thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    }
-
     const pluginStyle$1 = {
         position: 'absolute',
         left: '50%',
         top: '50%',
         transform: 'translate(-50%, -50%)',
-        pointerEvents: 'none',
         zIndex: '10',
     };
 
@@ -1043,9 +1002,9 @@
         return d + (needZ ? 'Z' : '');
     }
     /** 把户型图上点点位转换到 SVG 上的点位 */
-    function formatFloorplanPoint({ x, y }, pxmm, bounding) {
+    function formatFloorplanPoint({ x, y }, bounding) {
         const { max, min } = bounding;
-        return { x: (x - min.x) * pxmm, y: (max.y - y) * pxmm };
+        return { x: x - min.x, y: max.y - y };
     }
     /** 模型坐标转户型图坐标 */
     function modelPosition2FloorplanPosition(position, floorplanData) {
@@ -1073,26 +1032,22 @@
         return floorIndex;
     }
 
-    function formatOutlines(outlines) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const headers = new Headers({ 'Content-Type': 'text/plain' });
-            const getOutlineItem = function (item) {
-                return __awaiter(this, void 0, void 0, function* () {
-                    const outlineItem = {
-                        index: item.index,
-                        url: item.url,
-                        svgUrl: item.svg_url,
-                    };
-                    if (item.svg_url) {
-                        const svgContent = yield fetch(item.svg_url, { headers }).then((res) => res.text());
-                        outlineItem.svgContent = svgContent;
-                    }
-                    return outlineItem;
-                });
+    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,
             };
-            const svgOutlineItems = yield Promise.all(outlines.map(getOutlineItem));
-            return svgOutlineItems;
-        });
+            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 = {
@@ -1138,21 +1093,19 @@
         };
         return floorplanEntrance;
     }
-    function formatData(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const outlines = yield 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;
-        });
+    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 formatExtraObjects(data, five, floorplanData) {
         const extraObjects = data.map((object) => {
@@ -1172,35 +1125,6 @@
         return extraObjects;
     }
 
-    /**
-     * 把第一个参数传入第二个参数（函数）中并执行
-     * 一般用于执行函数后返回变量。
-     * @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];
-            }
-        });
-    }
-
     /**
      * 获取「在俯视图」状态下，模型 mm 与屏幕像素 px 的对应关系，即每 mm 对应多少 px
      * @param five five
@@ -1234,16 +1158,45 @@
         return pxmm;
     }
 
+    /**
+     * 把第一个参数传入第二个参数（函数）中并执行
+     * 一般用于执行函数后返回变量。
+     * @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];
+            }
+        });
+    }
+
     const CAMERA_IMAGE = 'data:image/png;base64,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';
 
     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.47.0 */
 
-    function add_css$j(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$k(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$o(ctx) {
@@ -1254,7 +1207,7 @@
     		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);
@@ -1262,7 +1215,7 @@
     			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);
     		},
@@ -1338,17 +1291,17 @@
     				lastPanoramaLongitude: 7,
     				cameraImageUrl: 0
     			},
-    			add_css$j
+    			add_css$k
     		);
     	}
     }
 
     const COMPASS_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArUAAAB7CAMAAABdA4ieAAAC91BMVEUAAACOpP/H0P+yxP/a4/+asv/W3/+/z/+cs//S3f+mu//Q2//5+v/H1P/d5f/l6//y9f++zf/i6f+ww/+ovP/7/P/u8v/N2f+Mp//q7/+4yf+uwf+Wr/+7y/+1xv+Ho//x9P+9zP+2x/+swP+gt/+Oqf/Y4v/r8P/l7P/b4//F0/+juf+Zsv+XsP+Trf/p7v97mv9wj/+kuv+ftf/x9P92lf/3+f/I1f+5yv+Eof98m//8/f/4+f90lf+9zf/j6f/T3f/L1/+Bnv/6+/+SrP/m7P/f5v/O2v/L2P/E0v/Az//+///s8P/e5v+rv/+pvv+Anv+qvv+Pqv+Kpv+CoP93l/9xlP/z9v/p7v90lf9uj//P2//v8//o7f/k6v/K1v+6yv9rjv98nv/E0v/9/v/09//h6P/X4f9pjP/9/f/N2f/K1v/C0f+Ho/99nP/1+P9sj//6+//u8/+iuP/u8//g6P/U3v+3x/+0xv+etf+Vrv9pjf/B0P9ukf+ht/+Vr/94mP/G0/+8zP+2x//+/v/09v/W4f9ojv/c5P+xxP/d5v+xw/+vwv+Jo//g6P+nvP+SrP/R3P/1+f/W3//U3//C0P+Jp/9nh/+Kpv+Fov/Y4f/J1/+Pqf+rv/+Oqv+Oqv+muv+twP/f5//t8P97mf/h5/+twP+kuf/L2P+juP+Ipf+huP+Pqf/d5v+zxf+cs/+Zsf+wwv/V3v+8zP+Go/+zxP+GpP/T3f/r8P/u8v/o7f/d5P/m7P/H1P/w9P/D0f+uwf/Z4v/F0v/09//D0v/v8//s8v/d5P/Y4f/s8P+etv/X4f+gt/+ovf+bsv+xw/+Vr//j6v+1x//J1v+4yf/r8P+yxf/T3f/B0f+Fo//09//W4P/h6P/L1v/i6f/x9f/t8v/G0/+uwf/z9f/7/P/n7f/z9v/T3f+4yf/J1v/z9f/w8//q7v/O2v/8/f/5+v/y9f/w8//g6P/z9v+/zv+5yf+9zf/5+v/Q3P/B0P/u8f/R2//////LSJnaAAAA/HRSTlMAAwGMx2jAn2u7ebn0q8zX7J3TiHz45bRS35SFYZmPSembkYNwVMXh2cmodWVjXN43DHZu6gfyrJZGOvrzLAbVvbBB91raz7aypqH+4s6Bfj9/Vk9EMint3C8gt+fc1q+XGAml/O/SxBz7s66kSz3wI/bjc+fQvpOObV8VoyZyXjSpmgv97sMPyorNiYZN0XpYuvHCv6JNEhEWw61YgCUdGBIP5CIgHypaUEU6NS9JQy8lGlY6NCuMfVtPSzspJoRxcExBNTMUyn9zaWRfVkk9Oad9emtkY0RBMLGsnJaQj4ZmXVHhsaKbeW9owb466dnVy7mYj45wyaGV3bdGzuNnAAASkklEQVR42uyaS0iUURiGTUQZ1MaMURSEbOFt4ybGQClFHO9rBS8F3nAURHG0hZvyQrgQRsfNuKmRCTcGGaEzThNqMyouwswKNTVMLe/a/bLo+845/5z/dzIiumj971I3gz6+Puc9x0POT6bRaXfYrJa18YHFhYXXKzMz6+/fb2+/ePFia8uvWlXelFkcr6pO2NqCr2xv77xfn5lZWXm9sDgwvmZZGnHYzaZjHnLk/PaYzL0jS9Pji6+XN3Z3gvJPnTkTEJCT01xSUtWuVick+PlVJ6tUqvj44uLipkxIU3F5fLxKlZxc7efnl6BWt1eVlDTn5AQEnDl16lR+be2n3fWZlYWBNcugze485yFHzq/Kub7eEcv44tzyekpsbEhIZGRWVk1NUFBtPqU2gFGbANRWVycnI7XlCO0XQm25mFp1VRWjFrDNz68NCqqpyYqMDAmJjc3NzQ3cmJwfmLba7CZPDzlyfg5Wh3V6YG559HyhUhkVlZJSUJDLqK3pDkJqoS8ZtVWEWiCTUltejl37BaCVdG2Cul1MLUIb1M2pLShIiYpSKpWF58+37U3Oj1ue2E0ecuT8EK1mm3VoYG4vW6MrLQ0MDDwvUIvQ8q6tBWqZIeRQQ+DU8q51NwQxtbVAbRajNrZARG1gaWBpm0anyY6enB+bGOyV6ZVzIK6bPUPzs17Rx48fb80GaHVtpQRaF7XYtZFIbTcRBAFb7rWc2uJM1rVoCCqgFquWdy0TBDCEbqSWlm2KQC38rZSW6nS67OxW+CxXr0Z7ec/J8MqRxtQ7ONQ/2xIREeHlFR191UVtqRu1wBep2hpqCNxrpYYg6dp4Ude2Y9cG8K5FQ8hyNwSglnZtNoE22svLKyKirKxFsTo28cQsH9v+81Bevb29O1qMZQAtUhs9SqnVsK5199osRi3fENwNgXitcBqrrmZly7r2DKUWq7Zb8FrBEAoptW1tGg3rWk5tC3xSQ53ig8zuf5pzd4df9c8qFIrEOgOhtgyphdCubaVdC9iyrkVo+Wnsm12bID6NZYqWLxX32qpm0fKVD9ii10bSrkVDiJJ2bWuriFqjsaUDPmpdXWIifG7f1bGezT55bfhfYrrfM7Wamufrq9cjtIkGA+1aZgiArdRrlUBtirRr2YbAvBZGBLV71/INAcuWbwjcEERey7tWKe7abGnXdiC1DFq9r29eampF/3O5dv/1ODd7pj5og4ODU13UQtdyQ+Beq9FovnMaE20IAdwQJHut2BCE05jaffkSDAGwxbJl1CK27DQ2iqcxCFKLXWsgXatX+BJqg4O1aWlJz14N35XR/RfTeP/2VOeFpKS0tDQCLVDrq9AjtXVIrdFYVsaoHWWGQKgN3EdtCNVa91sGtdQQmvhpjFUtX74QWjoioNdm0a5lGwL3Wp1GI/HaCCP1WkMddi1Cm5cH1BJsky5UxGHrysLw7wQd9pl/XFfFBaRWq9UCtalIrZ56rcG7A7u2jHktMQQN91qllFq2fImoba468G5M6rVq4rV8Q0CvZdTGgtcitrxrNUgtli1QCyFe6+0yBL3eF6Cl1CYBtYBtnL9/0b2ezWseco56QGLvpV++7O8fF1dRAdhC16Ih0K4lhpBoQBaMLS6vZacxTdu+DSFXsiHkU689YENgd2MSQ0iQ7rXiG90Qvnxh2eJhTOfqWihb7rXUEIBalyFotaRru+IQ28uXY9LBF27JD3OObPqePn9TlJ4eExNDqO0CapOQWsCWdq2CUmtgGwKnli9f6LWFrg0hhFEr7doS1rXSu7HM8nK3DaHd7W6shnutyxACqdficYxSyzYEgVqEVsENQYtdi9j6U2rTi4oqfaZu32n0kHO04nlr+N3HjIaGoqIipNafUNsF1KIicK9VUK8FQ8Cu5YbAqQVslfv2Wuq1+TU7uxszK/DycG1t2mJZWrKOjIzYHA673Wx2Ok3nPImbNJqcfWa7vdfhsMG3rUtLFss0PG3Eh43ruzvC8sW7lhkCgxYMQXzLYCReyzYESGoePY0JXesPiYlBbCsbOjMyMu713L/uIedo5NiNm+8++vhkALSVlaRrqSEAtNKu1VNqWddKN4Rs3f6uLdxYnsTXsdNLg7Ze8y95WOhp6rM7RqyW6fGB+bnJ5Q0lNQRyo+u+fOGGIMFWOI2Rqq2ghgDUYtcSbH18fE4AuXLnHvr0PX30JvzEiRM+gG0nYFsE2IIgQARD0LINIY9vCNLla1R8ozu6PLc4brE6zH/iEcAxp90GD83mJ/dAqjU64TTGvNYodC0uX2SvJV1LNwSkFg3B1bWEWvhBhIdfeSjbwiHO9QeP34aFXQkPp9AitWgIgtfGYdcecBrrMJYJy1c0gLIHb62GrE96+/7aCmoyOwYnhvrnJo3otXz5Yl6roNCmptLTGHYtei1imy50rQ+lFrANC7v48ra86B6+HLs1/PDs2YsA7RWAlmLb0MkNgXStdENwv2WIUKzi2yrnoZo98ekkPpYQ7saQWtq1dPlCr+WGIO1axJZSe/Hs2bePHsiae4jSeOfxpdBQhJZULe/aSmIISG0cNwTetQoIMQTDbP9Qj818mP+Pejp7ByfGVmeF5WufIVw4wGuxahm1oaGh9S9vyqPYYYgnnL1O19cDtEAt7VrqtXCIdnWtsCEkYdfyWwaF4jMp174j9JtsvGvrGer/oMcNQXzL0CVZvhoaMii1iG2YQG19/enTp08+li33K/tm7JNGGIbxqiEht5m7iasMcBuwwOJk0tEFcn9BG7s1bizQGBycCCbXpUkTo9VFJVpRSeNkuBqnq6BRoiwOMtldm3Tr+37fJ9+dtFEUbNX3+RPIj+d+93zf/ctgyZb1YDAUAmx510J410JY1wqvbTeEma3vJ9uP9571yObu8rfTd6xrhSEIahFb2bXCayW1wWAwM2CvLf5XFvSMMr9fzw9kMhnEFqmVXSsMYQI3hFFJLUD7GixwZuvHU/kuoG+zsXx0CtS+Yl4runZ0fHzcvSEAtUPcEEKCWshhdYlezx44I0vV80J+AILQQgIuagdby9e1vXbm9Ogp3kmd2j45q7z1Ll/tXRuAoCEAtQzbQkE93qdLCw+Wsa9NXVXVfB6xdXftsOxauSHwszHgtfG0L6IufNkBdhm0vGul10Kk14quzQO1qqqDK7yg9Dwj682wrk+raqEgoGXUtrp2yGUI3Gt/we3T5/L+0Q+6W/mIXTvR7rWArTSEfJ5Rq+the40at5dBMTDDCC2jVhoCYjscAGo5tBC+fA0elXefhsF2dqTdOKtMyLlWvo2F3NQCtNPTiG04aZcI3B6lb6mqJZPhK2rVFrVBFATRtXKvrZw1Fh/RotXdoOzu/LwYhLj3Wo8hCGrDQG1y1jTIcbufvo2ilTJnZxFbnRsC81qxIYQ8XntRpy9SWOZ3y+dv2pevjPRaQa1pplIph87OuoxsXEulTJND6zWEjPRagDZwXqbredd94bgiqfUYgsq6Ngldi9hqmna8Qj9etw6/bMvSNIYt/MAtQ8i7DQG79rLeoPH8b75QPg8wbINyQ+CGILtW0yxLUZoE7v2RrRmKolgaUouGwL1W93gtdu1lnY57bj5IPBRei+GGAHF3rYKJ7608l82lF5lacSLxOFLLutaUXeuhNlOnOyEdkMu9VnYtJGnysrUshDYej6SLG9QBd5TZdASgjSsQhNZFrS69FoilF6+OsgDkIrauDWEWu1ZjhoDYRiKRdNohU+g4CyUnl2tRa1nSEKTXFmwi9s7kNg89G4IwBNG1SG0uZ9BVhQ4PEwzDyKWBWoEtUis2BNG19toSydc9bx81D91dC9hKaiNIrWE4dPxwy8yXnEQCoL3WtSnetQhtsklXRLv1YajNli8BraYgtozaXBqgTSQS2cl1+q1vytj6pD+bBWpF10qvFV2btIukBV2WhVRrQxDQCkNAbLNZv1N7zoeMt/jr13x+P1LLyhawlYLAX8fobl33g0ZWtE2+11oearFr/RDf3gEV7p/z6WDS5/MJaF1eqwhslSo9q3qW/vn9Y63Na7Fqs0gtpDZHhXs9/Z9r0ShC6+5aQS1C65ToEKHXmVqvRtoNwQ9BbKPR96vUGt5H1IcYg9YjCDkxIcSrNB32ONLRSg7H1msIEMA2GqNJoZWp1ckYQCuoRWwZtUYaFSFdpNHwYbOwsodde7UhtLAFaGOxl7U5eub9Ztfscd0Eoihsu8oSKJBoQpUYyYULmhSIBVjACuip0tFQpEaaagTSyLiI9GSMZArEKp4it95N7oXBk6dUr7Ln59sB4uNw7p0BTlfb3s7Wcm0fvfbbV7MveAYo7k9eEB5h+x0Aa22b9OlKb9bHP7kNgLZC2slawKTs80Bx/2sIW8DO7dy7VSt9SfuoyHMurei1k7bnt/3K8ExQXLT2Y0MA8qLwro2mRaG6hV5RTNpuuba81345v+n+E3oR6su7aAjc2hyt9cL4qN+fcNNcw9DzPJG1i7VG2dfidHlHaYW1qK0H2oauZvvz/ZEyhtLyrBUN4WzuxLweIO6HrOXWhiQa6pUupHeLkRCYrbWB2dqzZh+vPGxOl1xoW3iztYyxqNWj4KadG0URm7z9tyHoPZi+PnBJRExjk7WEEHiTrtMof9T7q7NctJYwcBaYGgJwVf/R5Sft3bkh8KydrXVV93aHzs7WklBMY2b+kob65uE0NhcEQhhaa1mWo+7VmqqzgElaRlDbKWtD0wykAg6GikJkretO2saKelt1cRyjtQAD5qw1zUBCdr2L1jIWAdzaWEVvq44+pI0AErLQs/rdyiAjm9ONiF5rATGlpaPWwUM1ZHSxFokIY9FNn12fivw4toQwkbWobemPynhbD1lW0hKtfYTtVa3PUk+q3pp7LYDW0jLL2lGJ+yP14DhZltFFW5DW6swApgbrpn1kbVmCtJnj+KP0GyFwFsCspZRLq1j70Z2qsxC0loK0qK0vd95Wne/7IC1Q8qgd9DgB1Il0dKx4CVsH8P1E3n3C7t76AM/aErKW3s1FAxVZNweUllvrIwc5V5r7MUiSWVoMW5C2NdVAXao7DmNL1vpJkgy1dH/V9W9wNmmTxdqy7OR7CMMnV2EiaxMgkGzoXjdDEKC2S0HwR3OeoD6beuBZ26K0QXC4y/Pa/7Jrx7gJw1AYx2su0iuYgYFI7sAJstiS2ZKpk8UeWfKWKyQLLJ5Qxyp34TZ9D15YOkBpm9ji/U/A8CP+HFj0styMapHtZ54bh/t5y2E9LoQNVppMXoN1uixLQns8rl9PeZ0T3O96O5T4rL2wBQkuZnCbWQ7OXdUe1zwNni8YCsh2VOuK1I/a2jtHapHtZp/J+cD9bf0HoiW1rpAp38TfYlEUgJaetWUOZwP3P3UnetYCW1ChU52JogoS1UKIlq9gT95yILSugKRKciq2VhLaEpIVm3366j2pxaSMyf07YRUlND5qTynvGG6aaDOSWgnptFiIKoQLWmQ7pLphuOkTB0lqoZDSTGiVBrXE1iT0wbgEEn0gtSEEncoNfRV1uKKN/KqL+/4C1xYSA7XapjATRGU1hGxT3NtcGnUK0UJgZf7TuDWEls1yt9wiWsja7awzYRWttYgWYrPcLbejWqua2WaCqBSixQLvWe5mi06RWqv8TDOhNUrZC9sdm+Xuu5cpUqvU+wwzYbVVkIXYLHd/olekVpmpZ8KiMYbU7ma/EXJZBW5JrZl2V9bRnNWyWe4xt8TWTPd3FdEYSEFslnsoURlAi01FqN56f2br2xeOe9ytgbyf4nErGg/hl6RN4Jc5Lt++2rVjHMdCIIqiqtoRQW2mMogIyZFjlsB2B9wjjaY1PXa3wcbSPaEDR1fP9fVt8aPai2+f2+TlWu2l0yweZHlEO5S9cyu1lDKj5T/fWCH4jLaUnXMbvFyrzby8xRrayqUM2+ZWqvuM1nmpgHWkl8F9z9yG7LNa5yEMa0n8yHb93Er1oXjnoMVyFn3KQVcP7VRpFn+sDiznaiuHNufsHnkIwy7aPA/r5jbFGW3m7S12ku55WPN7Li1PPIRhN6sjtBjTmm+KmYcwPEOKs9tHF1JDHCoHLZ5DQ8yPBic9DoHjAKvsb85qjbFxHOCprMZaf5qdhlorxwGeTsPIttvPlno0y3GAZfbHp6n3ynGAV0m99u/2J6H3znGAvW4n+J25tdY7xwFey1pvQe6/DlrjOMDLqfXW7N5pbs0YWhxgtpj0rl1uiaHFISzccSWohUCzOIemm0VKChwHOMutKCVwHOA4av/JVi0xtDiRpCRfRcvQ4lBfxSnG0OJc/+xTjKHFyVRMP38iDC0O92lZVRhanO+vcVWGFu9BRWkW7+Z3rapEizdy7ZVm8V5Gtr8AtSnix59eOmYAAAAASUVORK5CYII=';
 
-    /* src/floorplan/ModelFloorplanPlugin/Components/Compass.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/Compass.svelte generated by Svelte v3.47.0 */
 
-    function add_css$i(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$j(target) {
+    	internal.append_styles(target, "svelte-1q44ru9", ".floorplan-plugin__compass.svelte-1q44ru9{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-1q44ru9{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-1q44ru9{position:absolute;left:50%;top:0.78125rem;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:0.52083rem;color:#fff}");
     }
 
     // (13:0) {#if northRad}
@@ -1366,10 +1319,10 @@
     			t0 = internal.space();
     			span = internal.element("span");
     			t1 = internal.text(/*northDesc*/ ctx[0]);
-    			internal.attr(div0, "class", "floorplan-plugin__compass-image svelte-5l80pv");
+    			internal.attr(div0, "class", "floorplan-plugin__compass-image svelte-1q44ru9");
     			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.attr(span, "class", "floorplan-plugin__compass-text svelte-1q44ru9");
+    			internal.attr(div1, "class", "floorplan-plugin__compass svelte-1q44ru9");
     			internal.set_style(div1, "transform", /*compassTransformStyle*/ ctx[2], false);
     		},
     		m(target, anchor) {
@@ -1440,345 +1393,271 @@
     class Compass extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$n, create_fragment$n, internal.safe_not_equal, { floorplanData: 3, northDesc: 0 }, add_css$i);
+    		internal.init(this, options, instance$n, create_fragment$n, internal.safe_not_equal, { floorplanData: 3, northDesc: 0 }, add_css$j);
     	}
     }
 
-    /* src/floorplan/ModelFloorplanPlugin/Components/RoomLabels/RoomLabel.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/Normalmage.svelte generated by Svelte v3.47.0 */
 
-    function add_css$h(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$i(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$m(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$7(ctx) {
-    	let span0;
-    	let t0_value = /*room*/ ctx[0].name + "";
-    	let t0;
-    	let t1;
-    	let span1;
+    function instance$m($$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$m(ctx) {
-    	let div;
+    	return [url];
+    }
 
-    	function select_block_type(ctx, dirty) {
-    		if (/*getLabelElement*/ ctx[1] === undefined) return create_if_block$7;
-    		if (/*userConfigElement*/ ctx[2]) return create_if_block_1$4;
+    class Normalmage extends internal.SvelteComponent {
+    	constructor(options) {
+    		super();
+    		internal.init(this, options, instance$m, create_fragment$m, internal.safe_not_equal, { url: 0 }, add_css$i);
     	}
+    }
 
-    	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.47.0 */
+
+    function add_css$h(target) {
+    	internal.append_styles(target, "svelte-ub47ya", ".floorplan-plugin__base-image.svelte-ub47ya{width:100%;height:100%}");
+    }
+
+    function create_fragment$l(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();
+    			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-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$m($$self, $$props, $$invalidate) {
-    	let userConfigElement;
-    	let { room } = $$props;
-    	let { getLabelElement } = $$props;
-
-    	// TODO: 统一这里的判断条件，目前写了多处
-    	const bodyWidth = document.body.clientWidth;
+    function instance$l($$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 === null || getLabelElement === void 0
-    			? void 0
-    			: 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$m, create_fragment$m, internal.safe_not_equal, { room: 0, getLabelElement: 1 }, add_css$h);
+    		internal.init(this, options, instance$l, create_fragment$l, internal.safe_not_equal, { content: 0 }, add_css$h);
     	}
     }
 
-    /* src/floorplan/ModelFloorplanPlugin/Components/RoomLabels/RoomLabels.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/BaseImage.svelte generated by Svelte v3.47.0 */
 
     function add_css$g(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$7(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$6(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$7(ctx, each_value, i);
-    		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block$7(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$7, null, get_each_context$7);
-    				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$7(key_1, ctx) {
-    	let first;
-    	let roomlabel;
+    // (11:2) {#if svgContent}
+    function create_if_block$7(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$l(ctx) {
-    	let if_block_anchor;
+    function create_fragment$k(ctx) {
+    	let div;
+    	let current_block_type_index;
+    	let if_block;
     	let current;
-    	let if_block = /*rooms*/ ctx[1] && create_if_block$6(ctx);
+    	const if_block_creators = [create_if_block$7, 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$6(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) {
@@ -1791,434 +1670,230 @@
     			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$l($$self, $$props, $$invalidate) {
-    	let rooms;
+    function instance$k($$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$l,
-    			create_fragment$l,
-    			internal.safe_not_equal,
-    			{
-    				floorIndex: 2,
-    				floorplanData: 3,
-    				getLabelElement: 0
-    			},
-    			add_css$g
-    		);
+    		internal.init(this, options, instance$k, create_fragment$k, internal.safe_not_equal, { floorIndex: 2, floorplanData: 3 }, add_css$g);
     	}
     }
 
-    /**
-     * 判断对象是否为`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.47.0 */
 
     function add_css$f(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%)}");
-    }
-
-    function get_each_context$6(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;
+    	internal.append_styles(target, "svelte-i2nwuk", ".floorplan-plugin__room-label-item.svelte-i2nwuk{position:absolute;display:flex;flex-flow:column;align-items:center;line-height:0.78125rem;color:#fff;transform:translate(-50%, -50%);white-space:nowrap}.floorplan-plugin__room-size.svelte-i2nwuk{opacity:0.45}");
     }
 
-    // (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`;
+    // (22:30) 
+    function create_if_block_1$3(ctx) {
+    	let html_tag;
+    	let raw_value = /*userConfigElement*/ ctx[2].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();
+    			html_anchor = internal.empty();
+    			html_tag.a = html_anchor;
     		},
     		m(target, anchor) {
-    			internal.insert(target, div, anchor);
-    		},
-    		p(new_ctx, dirty) {
-    			ctx = new_ctx;
+    			html_tag.m(raw_value, target, anchor);
+    			internal.insert(target, html_anchor, anchor);
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*userConfigElement*/ 4 && raw_value !== (raw_value = /*userConfigElement*/ ctx[2].outerHTML + "")) html_tag.p(raw_value);
     		},
     		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$6(key_1, ctx) {
-    	let div;
-    	let span;
-    	let t0_value = /*textItem*/ ctx[24].distance + "";
+    // (16:2) {#if getLabelElement === undefined}
+    function create_if_block$6(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[3]}`;
+    			internal.attr(span0, "class", "floorplan-plugin__room-name");
+    			internal.attr(span1, "class", "floorplan-plugin__room-size svelte-i2nwuk");
     		},
     		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$k(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$j(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$6;
+    		if (/*userConfigElement*/ ctx[2]) 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$6(ctx, each_value, i);
-    		let key = get_key_1(child_ctx);
-    		each1_lookup.set(key, each_blocks[i] = create_each_block$6(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-i2nwuk");
+    			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);
     		},
     		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);
     		},
     		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 (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$6, null, get_each_context$6);
-    			}
+    			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 & /*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 (if_block) {
+    					if_block.c();
+    					if_block.m(div, null);
+    				}
     			}
     		},
     		i: internal.noop,
     		o: internal.noop,
     		d(detaching) {
-    			if (detaching) internal.detach(div1);
-
-    			for (let i = 0; i < each_blocks_1.length; i += 1) {
-    				each_blocks_1[i].d();
-    			}
+    			if (detaching) internal.detach(div);
 
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].d();
+    			if (if_block) {
+    				if_block.d();
     			}
     		}
     	};
     }
 
-    const padding = 1000;
-
-    function instance$k($$self, $$props, $$invalidate) {
-    	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;
+    function instance$j($$self, $$props, $$invalidate) {
+    	let userConfigElement;
+    	let { room } = $$props;
+    	let { getLabelElement } = $$props;
 
-    	// 计算每一段墙的长度，以及墙两侧点距离标尺初始点的像素值
-    	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 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);
+    	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';
 
     	$$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 ('room' in $$props) $$invalidate(0, room = $$props.room);
+    		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
     	};
 
-    	return [
-    		type,
-    		isTop,
-    		isBottom,
-    		isLeft,
-    		isRight,
-    		isRow,
-    		positionPxArray,
-    		transform,
-    		transformOrigin,
-    		width,
-    		textArray,
-    		pxmm,
-    		data,
-    		bounding
-    	];
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*getLabelElement, room*/ 3) {
+    			$$invalidate(2, userConfigElement = getLabelElement === null || getLabelElement === void 0
+    			? void 0
+    			: getLabelElement(room));
+    		}
+    	};
+
+    	return [room, getLabelElement, userConfigElement, roomSizeDes, left, top, fontSize];
     }
 
-    class RuleItem extends internal.SvelteComponent {
+    class RoomLabel extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-
-    		internal.init(
-    			this,
-    			options,
-    			instance$k,
-    			create_fragment$k,
-    			internal.safe_not_equal,
-    			{
-    				pxmm: 11,
-    				type: 0,
-    				data: 12,
-    				bounding: 13
-    			},
-    			add_css$f
-    		);
+    		internal.init(this, options, instance$j, create_fragment$j, internal.safe_not_equal, { room: 0, getLabelElement: 1 }, add_css$f);
     	}
     }
 
-    /* src/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleLabels.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/RoomLabels/RoomLabels.svelte generated by Svelte v3.47.0 */
 
-    function get_each_context$5(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$e(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$5(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$8(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[4] = list[i];
+    	return child_ctx;
     }
 
-    function create_fragment$j(ctx) {
+    // (8:0) {#if rooms}
+    function create_if_block$5(ctx) {
     	let div;
     	let each_blocks = [];
     	let each_1_lookup = new Map();
     	let current;
-    	let each_value = /*ruleLabelArray*/ ctx[1];
-    	const get_key = ctx => /*type*/ ctx[7];
+    	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$5(ctx, each_value, i);
+    		let child_ctx = get_each_context$8(ctx, each_value, i);
     		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block$5(key, child_ctx));
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$8(key, child_ctx));
     	}
 
     	return {
@@ -2229,7 +1904,7 @@
     				each_blocks[i].c();
     			}
 
-    			internal.attr(div, "class", "floorplan-plugin__rulelabels");
+    			internal.attr(div, "class", "floorplan-plugin__room-labels svelte-13xux0b");
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -2240,11 +1915,11 @@
 
     			current = true;
     		},
-    		p(ctx, [dirty]) {
-    			if (dirty & /*ruleLabelArray, pxmm, bounding*/ 7) {
-    				each_value = /*ruleLabelArray*/ ctx[1];
+    		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$5, null, get_each_context$5);
+    				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$8, null, get_each_context$8);
     				internal.check_outros();
     			}
     		},
@@ -2274,373 +1949,670 @@
     	};
     }
 
-    function instance$j($$self, $$props, $$invalidate) {
-    	let bounding;
-    	let ruleLabelData;
-    	let ruleLabelDataKeys;
-    	let ruleLabelArray;
-    	let { pxmm } = $$props;
-    	let { floorIndex } = $$props;
-    	let { floorplanData } = $$props;
-
-    	$$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);
-    		}
+    // (10:4) {#each rooms as room (room.id)}
+    function create_each_block$8(key_1, ctx) {
+    	let first;
+    	let roomlabel;
+    	let current;
 
-    		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 24) {
-    			$$invalidate(5, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+    	const roomlabel_spread_levels = [
+    		{
+    			room: /*room*/ ctx[4],
+    			getLabelElement: /*getLabelElement*/ ctx[0]
     		}
+    	];
 
-    		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$j, create_fragment$j, 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 & /*rooms, getLabelElement*/ 3)
+    			? internal.get_spread_update(roomlabel_spread_levels, [
+    					{
+    						room: /*room*/ ctx[4],
+    						getLabelElement: /*getLabelElement*/ ctx[0]
+    					}
+    				])
+    			: {};
 
-    function add_css$e(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$i(ctx) {
-    	let img;
-    	let img_src_value;
+    	let if_block_anchor;
+    	let current;
+    	let if_block = /*rooms*/ ctx[1] && create_if_block$5(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[1]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+
+    					if (dirty & /*rooms*/ 2) {
+    						internal.transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block$5(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$i($$self, $$props, $$invalidate) {
-    	let { url } = $$props;
+    	let rooms;
+    	let { floorIndex } = $$props;
+    	let { floorplanData } = $$props;
+    	let { getLabelElement } = $$props;
 
     	$$self.$$set = $$props => {
-    		if ('url' in $$props) $$invalidate(0, url = $$props.url);
+    		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);
     	};
 
-    	return [url];
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
+    			$$invalidate(1, rooms = floorplanData.floorDatas[floorIndex].rooms);
+    		}
+    	};
+
+    	return [getLabelElement, rooms, floorIndex, floorplanData];
     }
 
-    class Normalmage extends internal.SvelteComponent {
+    class RoomLabels extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$i, create_fragment$i, internal.safe_not_equal, { url: 0 }, add_css$e);
+
+    		internal.init(
+    			this,
+    			options,
+    			instance$i,
+    			create_fragment$i,
+    			internal.safe_not_equal,
+    			{
+    				floorIndex: 2,
+    				floorplanData: 3,
+    				getLabelElement: 0
+    			},
+    			add_css$e
+    		);
     	}
     }
 
-    /* src/floorplan/Components/SvgImage.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/RuleLabels/RuleItem.svelte generated by Svelte v3.47.0 */
 
     function add_css$d(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$h(ctx) {
+    function get_each_context$7(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;
+    }
+
+    // (53: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);
+    		}
+    	};
+    }
+
+    // (62:4) {#each rulerTexts as textItem, textItemIndex (textItemIndex)}
+    function create_each_block$7(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$h(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$7(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each1_lookup.set(key, each_blocks[i] = create_each_block$7(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$7, null, get_each_context$7);
+    			}
+
+    			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$h($$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$h, create_fragment$h, internal.safe_not_equal, { content: 0 }, add_css$d);
+    		internal.init(this, options, instance$h, create_fragment$h, internal.safe_not_equal, { type: 0, data: 4, bounding: 5 }, add_css$d);
     	}
     }
 
-    /* src/floorplan/Components/BaseImage.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/RuleLabels/RuleLabels.svelte generated by Svelte v3.47.0 */
 
     function add_css$c(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}");
     }
 
-    // (13:22) 
-    function create_if_block_1$3(ctx) {
-    	let normalimage;
+    function get_each_context$6(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$6(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]
     		}
-    	};
-    }
+    	];
 
-    // (11:2) {#if svgContent}
-    function create_if_block$5(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$g(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$5, 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$6(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$6(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$6, null, get_each_context$6);
+    				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$g($$self, $$props, $$invalidate) {
-    	let imageData;
-    	let svgContent;
-    	var _a, _b;
+    	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);
+    		if ('floorIndex' in $$props) $$invalidate(4, floorIndex = $$props.floorIndex);
+    		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
-    			$$invalidate(1, imageData = floorplanData.outlines[floorIndex]);
+    		if ($$self.$$.dirty & /*floorplanData*/ 32) {
+    			$$invalidate(0, bounding = floorplanData.bounding);
     		}
 
-    		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);
+    		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);
+    		}
+
+    		if ($$self.$$.dirty & /*contentWidth, boundingWidth*/ 768) {
+    			$$invalidate(2, width = contentWidth / boundingWidth * 100 + '%');
+    		}
+
+    		if ($$self.$$.dirty & /*contentHeight, boundingHeight*/ 192) {
+    			$$invalidate(1, height = contentHeight / boundingHeight * 100 + '%');
     		}
     	};
 
-    	return [svgContent, imageData, floorIndex, floorplanData, _a, _b];
+    	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$g, create_fragment$g, internal.safe_not_equal, { floorIndex: 2, floorplanData: 3 }, add_css$c);
+    		internal.init(this, options, instance$g, create_fragment$g, internal.safe_not_equal, { floorIndex: 4, floorplanData: 5 }, add_css$c);
     	}
     }
 
@@ -2911,20 +2883,20 @@
     /* src/floorplan/Components/RoomMaterials/RoomMaterial.svelte generated by Svelte v3.47.0 */
 
     function add_css$b(target) {
-    	internal.append_styles(target, "svelte-1b0icjc", "svg.svelte-1b0icjc{position:absolute;width:100%;height:100%;overflow:visible}");
+    	internal.append_styles(target, "svelte-1d4xj70", "svg.svelte-1d4xj70{position:absolute;width:100%;height:100%;overflow:visible}");
     }
 
-    function get_each_context$4(ctx, list, i) {
+    function get_each_context$5(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[4] = list[i];
+    	child_ctx[5] = list[i];
     	return child_ctx;
     }
 
-    // (18: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() {
@@ -2936,7 +2908,7 @@
     		},
     		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) {
@@ -2954,11 +2926,11 @@
     	};
     }
 
-    // (16: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() {
@@ -2970,7 +2942,7 @@
     		},
     		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) {
@@ -2988,11 +2960,11 @@
     	};
     }
 
-    // (14:6) {#if room.floorType === 1}
+    // (15:6) {#if room.floorType === 1}
     function create_if_block$4(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() {
@@ -3004,7 +2976,7 @@
     		},
     		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) {
@@ -3022,18 +2994,19 @@
     	};
     }
 
-    // (12:2) {#each rooms as room}
-    function create_each_block$4(ctx) {
+    // (13:2) {#each rooms as room}
+    function create_each_block$5(ctx) {
     	let svg;
     	let current_block_type_index;
     	let if_block;
+    	let svg_viewBox_value;
     	let current;
     	const if_block_creators = [create_if_block$4, create_if_block_1$2, create_else_block];
     	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;
     	}
 
@@ -3044,7 +3017,10 @@
     		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", svg_viewBox_value = `0 0 ${/*boundingWidth*/ ctx[1]} ${/*boundingHeight*/ ctx[2]}`);
+    			internal.attr(svg, "class", "svelte-1d4xj70");
     		},
     		m(target, anchor) {
     			internal.insert(target, svg, anchor);
@@ -3101,7 +3077,7 @@
     	let each_blocks = [];
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
+    		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
     	}
 
     	const out = i => internal.transition_out(each_blocks[i], 1, 1, () => {
@@ -3128,18 +3104,18 @@
     			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$4(ctx, each_value, i);
+    					const child_ctx = get_each_context$5(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$4(child_ctx);
+    						each_blocks[i] = create_each_block$5(child_ctx);
     						each_blocks[i].c();
     						internal.transition_in(each_blocks[i], 1);
     						each_blocks[i].m(div, null);
@@ -3183,37 +3159,37 @@
     function instance$c($$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) {
+    		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, pxmm, floorplanData.bounding))
+    				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$c, create_fragment$c, internal.safe_not_equal, { floorIndex: 1, pxmm: 2, floorplanData: 3 }, add_css$b);
+    		internal.init(this, options, instance$c, create_fragment$c, internal.safe_not_equal, { floorIndex: 3, floorplanData: 4 }, add_css$b);
     	}
     }
 
     /* src/floorplan/Components/RoomHighlight/Room.svelte generated by Svelte v3.47.0 */
 
     function add_css$a(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$b(ctx) {
@@ -3224,7 +3200,7 @@
     			path = internal.svg_element("path");
     			internal.attr(path, "d", /*_pathD*/ ctx[0]);
     			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);
@@ -3239,55 +3215,52 @@
     }
 
     function instance$b($$self, $$props, $$invalidate) {
-    	let { pxmm } = $$props;
     	let { room } = $$props;
     	let { floorplanData } = $$props;
     	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(1, room = $$props.room);
+    		if ('floorplanData' in $$props) $$invalidate(2, floorplanData = $$props.floorplanData);
     	};
 
-    	return [_pathD, pxmm, room, floorplanData];
+    	return [_pathD, room, floorplanData];
     }
 
     class Room extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-    		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { pxmm: 1, room: 2, floorplanData: 3 }, add_css$a);
+    		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { room: 1, floorplanData: 2 }, add_css$a);
     	}
     }
 
     /* src/floorplan/Components/RoomHighlight/RoomHighlight.svelte generated by Svelte v3.47.0 */
 
     function add_css$9(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$3(ctx, list, i) {
+    function get_each_context$4(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[12] = list[i];
+    	child_ctx[4] = list[i];
     	return child_ctx;
     }
 
-    // (41:4) {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
-    function create_each_block$3(key_1, ctx) {
+    // (10:4) {#each floorplanData.floorDatas[floorIndex].rooms as room (room.id)}
+    function create_each_block$4(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[4],
+    			floorplanData: /*floorplanData*/ ctx[1]
     		}
     	];
 
@@ -3315,12 +3288,11 @@
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
 
-    			const room_changes = (dirty & /*floorplanData, floorIndex, pxmm*/ 7)
+    			const room_changes = (dirty & /*floorplanData, floorIndex*/ 3)
     			? internal.get_spread_update(room_spread_levels, [
     					{
-    						room: /*room*/ ctx[12],
-    						floorplanData: /*floorplanData*/ ctx[2],
-    						pxmm: /*pxmm*/ ctx[0]
+    						room: /*room*/ ctx[4],
+    						floorplanData: /*floorplanData*/ ctx[1]
     					}
     				])
     			: {};
@@ -3348,17 +3320,14 @@
     	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[4].id;
 
     	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context$3(ctx, each_value, i);
+    		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$3(key, child_ctx));
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
     	}
 
     	return {
@@ -3370,9 +3339,11 @@
     				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[2]} ${/*boundingHeight*/ ctx[3]}`);
+    			internal.attr(svg, "class", "svelte-1kqo6e4");
+    			internal.attr(div, "class", "floorplan-plugin__room-highlight svelte-1kqo6e4");
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -3382,20 +3353,13 @@
     				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*/ 3) {
+    				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$3, null, get_each_context$3);
+    				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$4, null, get_each_context$4);
     				internal.check_outros();
     			}
     		},
@@ -3421,127 +3385,46 @@
     			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$a($$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 === null || onRoomHeightClick === void 0
-    		? void 0
-    		: 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);
-    	}
+    	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);
     	};
 
-    	return [
-    		pxmm,
-    		floorIndex,
-    		floorplanData,
-    		clientWidth,
-    		clientHeight,
-    		highlightContainerDom,
-    		handleClick,
-    		five,
-    		onRoomHeightClick,
-    		div_binding,
-    		div_elementresize_handler
-    	];
+    	return [floorIndex, floorplanData, boundingWidth, boundingHeight];
     }
 
     class RoomHighlight extends internal.SvelteComponent {
     	constructor(options) {
     		super();
-
-    		internal.init(
-    			this,
-    			options,
-    			instance$a,
-    			create_fragment$a,
-    			internal.safe_not_equal,
-    			{
-    				five: 7,
-    				pxmm: 0,
-    				floorIndex: 1,
-    				floorplanData: 2,
-    				onRoomHeightClick: 8
-    			},
-    			add_css$9
-    		);
+    		internal.init(this, options, instance$a, create_fragment$a, internal.safe_not_equal, { floorIndex: 0, floorplanData: 1 }, add_css$9);
     	}
     }
 
-    /* src/floorplan/ModelFloorplanPlugin/Components/CurrentFloor/CurrentFloor.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/CurrentFloor.svelte generated by Svelte v3.47.0 */
 
     function add_css$8(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}
+    // (17: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]
     		}
     	];
 
@@ -3562,14 +3445,11 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			const roomhighlight_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, onRoomHeightClick*/ 199)
+    			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData*/ 34)
     			? 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]
     					}
     				])
     			: {};
@@ -3591,16 +3471,16 @@
     	};
     }
 
-    // (23:2) {#if roomLabelsEnable}
+    // (21: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]
     		}
     	];
 
@@ -3621,12 +3501,12 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement*/ 324)
+    			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement*/ 98)
     			? 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]
     					}
     				])
     			: {};
@@ -3648,16 +3528,15 @@
     	};
     }
 
-    // (26:2) {#if ruleLabelsEnable}
+    // (24:2) {#if ruleLabelsEnable}
     function create_if_block$3(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]
     		}
     	];
 
@@ -3678,12 +3557,11 @@
     			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]
     					}
     				])
     			: {};
@@ -3713,13 +3591,13 @@
     	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]
     		}
     	];
 
@@ -3730,12 +3608,12 @@
     	}
 
     	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]
     		}
     	];
 
@@ -3746,8 +3624,8 @@
     	}
 
     	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$3(ctx);
+    	let if_block1 = /*roomLabelsEnable*/ ctx[3] && create_if_block_1$1(ctx);
+    	let if_block2 = /*ruleLabelsEnable*/ ctx[4] && create_if_block$3(ctx);
 
     	return {
     		c() {
@@ -3761,7 +3639,10 @@
     			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);
@@ -3777,23 +3658,22 @@
     			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 {
@@ -3812,22 +3692,22 @@
     				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 {
@@ -3846,11 +3726,11 @@
     				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 {
@@ -3868,6 +3748,12 @@
 
     				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;
@@ -3898,37 +3784,31 @@
     }
 
     function instance$9($$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;
 
     	$$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);
     	};
 
     	return [
-    		pxmm,
-    		five,
+    		isCurrent,
     		floorIndex,
     		hoverEnable,
     		roomLabelsEnable,
     		ruleLabelsEnable,
     		floorplanData,
-    		onRoomHeightClick,
     		getLabelElement
     	];
     }
@@ -3944,65 +3824,56 @@
     			create_fragment$9,
     			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
     			},
     			add_css$8
     		);
     	}
     }
 
-    /* src/floorplan/ModelFloorplanPlugin/Components/Main.svelte generated by Svelte v3.47.0 */
+    /* src/floorplan/Components/Main.svelte generated by Svelte v3.47.0 */
 
     function add_css$7(target) {
-    	internal.append_styles(target, "svelte-177x2q7", ".floorplan-main.svelte-177x2q7{width:100%;height:100%}");
+    	internal.append_styles(target, "svelte-q5wdnn", ".floorplan-main.svelte-q5wdnn{width:100%;height:100%}");
+    }
+
+    function get_each_context$3(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[13] = list[i];
+    	return child_ctx;
     }
 
-    // (24:0) {#if visible}
+    // (21:0) {#if visible}
     function create_if_block$2(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[2],
-    			pxmm: /*pxmm*/ ctx[1],
-    			floorIndex: /*floorIndex*/ ctx[6],
-    			hoverEnable: /*hoverEnable*/ ctx[7],
-    			floorplanData: /*floorplanData*/ ctx[11],
-    			getLabelElement: /*getLabelElement*/ ctx[15],
-    			roomLabelsEnable: /*roomLabelsEnable*/ ctx[9],
-    			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[10],
-    			onRoomHeightClick: /*onRoomHeightClick*/ ctx[14]
-    		}
-    	];
-
-    	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$3(get_each_context$3(ctx, each_value, i));
     	}
 
-    	currentfloor = new CurrentFloor$1({ 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[5],
-    			floorplanData: /*floorplanData*/ ctx[11],
-    			lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[12],
-    			cameraImageUrl: /*cameraImageUrl*/ ctx[13]
+    			panoIndex: /*panoIndex*/ ctx[3],
+    			floorplanData: /*floorplanData*/ ctx[9],
+    			lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[10],
+    			cameraImageUrl: /*cameraImageUrl*/ ctx[11]
     		}
     	];
 
@@ -4013,21 +3884,29 @@
     	}
 
     	camera = new Camera$1({ props: camera_props });
-    	let if_block = /*compassEnable*/ ctx[8] && 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-q5wdnn");
     		},
     		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);
@@ -4037,42 +3916,51 @@
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
 
-    			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, onRoomHeightClick*/ 52934)
-    			? internal.get_spread_update(currentfloor_spread_levels, [
-    					{
-    						five: /*five*/ ctx[2],
-    						pxmm: /*pxmm*/ ctx[1],
-    						floorIndex: /*floorIndex*/ ctx[6],
-    						hoverEnable: /*hoverEnable*/ ctx[7],
-    						floorplanData: /*floorplanData*/ ctx[11],
-    						getLabelElement: /*getLabelElement*/ ctx[15],
-    						roomLabelsEnable: /*roomLabelsEnable*/ ctx[9],
-    						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[10],
-    						onRoomHeightClick: /*onRoomHeightClick*/ ctx[14]
+    			if (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, floorIndex*/ 5040) {
+    				each_value = /*floorplanData*/ ctx[9].floorDatas;
+    				let i;
+
+    				for (i = 0; i < each_value.length; i += 1) {
+    					const child_ctx = get_each_context$3(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$3(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*/ 14368)
+    			const camera_changes = (dirty & /*panoIndex, floorplanData, lastPanoramaLongitude, cameraImageUrl*/ 3592)
     			? internal.get_spread_update(camera_spread_levels, [
     					{
-    						panoIndex: /*panoIndex*/ ctx[5],
-    						floorplanData: /*floorplanData*/ ctx[11],
-    						lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[12],
-    						cameraImageUrl: /*cameraImageUrl*/ ctx[13]
+    						panoIndex: /*panoIndex*/ ctx[3],
+    						floorplanData: /*floorplanData*/ ctx[9],
+    						lastPanoramaLongitude: /*lastPanoramaLongitude*/ ctx[10],
+    						cameraImageUrl: /*cameraImageUrl*/ ctx[11]
     					}
     				])
     			: {};
 
     			camera.$set(camera_changes);
 
-    			if (/*compassEnable*/ ctx[8]) {
+    			if (/*compassEnable*/ ctx[6]) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
 
-    					if (dirty & /*compassEnable*/ 256) {
+    					if (dirty & /*compassEnable*/ 64) {
     						internal.transition_in(if_block, 1);
     					}
     				} else {
@@ -4093,14 +3981,18 @@
     		},
     		i(local) {
     			if (current) return;
-    			internal.transition_in(currentfloor.$$.fragment, local);
+
+    			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[3],
+    						duration: /*duration*/ ctx[0],
     						easing: easing.linear
     					});
 
@@ -4111,29 +4003,107 @@
     			current = true;
     		},
     		o(local) {
-    			internal.transition_out(currentfloor.$$.fragment, 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_component(currentfloor);
+    			internal.destroy_each(each_blocks, detaching);
     			internal.destroy_component(camera);
     			if (if_block) if_block.d();
     		}
     	};
     }
 
-    // (40:4) {#if compassEnable}
+    // (23:4) {#each floorplanData.floorDatas as floorData}
+    function create_each_block$3(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]
+    		},
+    		{
+    			floorIndex: /*floorData*/ ctx[13].floorIndex
+    		},
+    		{
+    			isCurrent: /*floorData*/ ctx[13].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$1({ 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, floorIndex*/ 5040)
+    			? internal.get_spread_update(currentfloor_spread_levels, [
+    					dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable*/ 5024 && {
+    						hoverEnable: /*hoverEnable*/ ctx[5],
+    						floorplanData: /*floorplanData*/ ctx[9],
+    						getLabelElement: /*getLabelElement*/ ctx[12],
+    						roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
+    						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8]
+    					},
+    					dirty & /*floorplanData*/ 512 && {
+    						floorIndex: /*floorData*/ ctx[13].floorIndex
+    					},
+    					dirty & /*floorplanData, floorIndex*/ 528 && {
+    						isCurrent: /*floorData*/ ctx[13].floorIndex === /*floorIndex*/ ctx[4]
+    					}
+    				])
+    			: {};
+
+    			currentfloor.$set(currentfloor_changes);
+    		},
+    		i(local) {
+    			if (current) return;
+    			internal.transition_in(currentfloor.$$.fragment, local);
+    			current = true;
+    		},
+    		o(local) {
+    			internal.transition_out(currentfloor.$$.fragment, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			internal.destroy_component(currentfloor, detaching);
+    		}
+    	};
+    }
+
+    // (37:4) {#if compassEnable}
     function create_if_block_1(ctx) {
     	let compass;
     	let current;
 
     	compass = new Compass({
     			props: {
-    				floorplanData: /*floorplanData*/ ctx[11],
-    				northDesc: /*northDesc*/ ctx[0]
+    				floorplanData: /*floorplanData*/ ctx[9],
+    				northDesc: /*northDesc*/ ctx[2]
     			}
     		});
 
@@ -4147,8 +4117,8 @@
     		},
     		p(ctx, dirty) {
     			const compass_changes = {};
-    			if (dirty & /*floorplanData*/ 2048) compass_changes.floorplanData = /*floorplanData*/ ctx[11];
-    			if (dirty & /*northDesc*/ 1) compass_changes.northDesc = /*northDesc*/ ctx[0];
+    			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) {
@@ -4169,7 +4139,7 @@
     function create_fragment$8(ctx) {
     	let if_block_anchor;
     	let current;
-    	let if_block = /*visible*/ ctx[4] && create_if_block$2(ctx);
+    	let if_block = /*visible*/ ctx[1] && create_if_block$2(ctx);
 
     	return {
     		c() {
@@ -4182,11 +4152,11 @@
     			current = true;
     		},
     		p(ctx, [dirty]) {
-    			if (/*visible*/ ctx[4]) {
+    			if (/*visible*/ ctx[1]) {
     				if (if_block) {
     					if_block.p(ctx, dirty);
 
-    					if (dirty & /*visible*/ 16) {
+    					if (dirty & /*visible*/ 2) {
     						internal.transition_in(if_block, 1);
     					}
     				} else {
@@ -4222,11 +4192,9 @@
     }
 
     function instance$8($$self, $$props, $$invalidate) {
-    	let { northDesc } = $$props;
-    	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;
@@ -4236,34 +4204,28 @@
     	let { floorplanData } = $$props;
     	let { lastPanoramaLongitude } = $$props;
     	let { cameraImageUrl } = $$props;
-    	let { onRoomHeightClick } = $$props;
     	let { getLabelElement } = $$props;
 
     	$$self.$$set = $$props => {
-    		if ('northDesc' in $$props) $$invalidate(0, northDesc = $$props.northDesc);
-    		if ('pxmm' in $$props) $$invalidate(1, pxmm = $$props.pxmm);
-    		if ('five' in $$props) $$invalidate(2, five = $$props.five);
-    		if ('duration' in $$props) $$invalidate(3, duration = $$props.duration);
-    		if ('visible' in $$props) $$invalidate(4, visible = $$props.visible);
-    		if ('panoIndex' in $$props) $$invalidate(5, panoIndex = $$props.panoIndex);
-    		if ('floorIndex' in $$props) $$invalidate(6, floorIndex = $$props.floorIndex);
-    		if ('hoverEnable' in $$props) $$invalidate(7, hoverEnable = $$props.hoverEnable);
-    		if ('compassEnable' in $$props) $$invalidate(8, compassEnable = $$props.compassEnable);
-    		if ('roomLabelsEnable' in $$props) $$invalidate(9, roomLabelsEnable = $$props.roomLabelsEnable);
-    		if ('ruleLabelsEnable' in $$props) $$invalidate(10, ruleLabelsEnable = $$props.ruleLabelsEnable);
-    		if ('floorplanData' in $$props) $$invalidate(11, floorplanData = $$props.floorplanData);
-    		if ('lastPanoramaLongitude' in $$props) $$invalidate(12, lastPanoramaLongitude = $$props.lastPanoramaLongitude);
-    		if ('cameraImageUrl' in $$props) $$invalidate(13, cameraImageUrl = $$props.cameraImageUrl);
-    		if ('onRoomHeightClick' in $$props) $$invalidate(14, onRoomHeightClick = $$props.onRoomHeightClick);
-    		if ('getLabelElement' in $$props) $$invalidate(15, 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);
     	};
 
     	return [
-    		northDesc,
-    		pxmm,
-    		five,
     		duration,
     		visible,
+    		northDesc,
     		panoIndex,
     		floorIndex,
     		hoverEnable,
@@ -4273,7 +4235,6 @@
     		floorplanData,
     		lastPanoramaLongitude,
     		cameraImageUrl,
-    		onRoomHeightClick,
     		getLabelElement
     	];
     }
@@ -4289,22 +4250,19 @@
     			create_fragment$8,
     			internal.safe_not_equal,
     			{
-    				northDesc: 0,
-    				pxmm: 1,
-    				five: 2,
-    				duration: 3,
-    				visible: 4,
-    				panoIndex: 5,
-    				floorIndex: 6,
-    				hoverEnable: 7,
-    				compassEnable: 8,
-    				roomLabelsEnable: 9,
-    				ruleLabelsEnable: 10,
-    				floorplanData: 11,
-    				lastPanoramaLongitude: 12,
-    				cameraImageUrl: 13,
-    				onRoomHeightClick: 14,
-    				getLabelElement: 15
+    				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
     			},
     			add_css$7
     		);
@@ -4414,32 +4372,58 @@
                 value: () => {
                     var _a, _b;
                     this.hide();
-                    (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
-                    (_b = this.app) === null || _b === void 0 ? void 0 : _b.$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);
+                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                    (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+                    this.five.off('modeChange', this.onFiveModeChange);
+                    this.five.off('panGesture', this.onFivePanGesture);
+                    this.five.off('panoArrived', this.onFivePanoArrived);
+                    this.five.off('modelLoaded', this.onFiveModelLoaded);
+                    this.five.off('pinchGesture', this.onFivePinchGesture);
+                    this.five.off('wantsGesture', this.onFiveWantsGesture);
+                    this.five.off('wantsMoveToPano', this.onFiveWantsMoveToPano);
+                    this.five.off('initAnimationEnded', this.onFiveInitAnimationEnded);
                     this.five.off('modelShownFloorChange', this.onModelShownFloorChange);
                 }
             });
-            /** 模型楼层高亮改变时，自动进行楼层切换 */
+            Object.defineProperty(this, "onFiveWantsMoveToPano", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    if (this.visible && this.configs.preventRoomClick)
+                        return false;
+                }
+            });
+            Object.defineProperty(this, "onFiveWantsGesture", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (type) => {
+                    if (type !== 'pan' && type !== 'pinch' && type !== 'mouseWheel')
+                        return;
+                    if (this.visible && !this.configs.gestureEnable)
+                        return false;
+                }
+            });
             Object.defineProperty(this, "onModelShownFloorChange", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
                 value: (shownFloor) => {
-                    if (shownFloor === null)
+                    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();
                 }
             });
-            /** panoIndex 改变时，更新 floorIndex */
-            Object.defineProperty(this, "handlePanoArrived", {
+            Object.defineProperty(this, "onFivePanoArrived", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
@@ -4451,31 +4435,28 @@
                     this.floorIndex = this.five.work.observers[index].floorIndex;
                 }
             });
-            /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
-            Object.defineProperty(this, "handleWantsMoveToPano", {
+            Object.defineProperty(this, "onFivePanGesture", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
                 value: () => {
                     if (!this.visible)
                         return;
-                    if (this.configs.preventRoomClick)
-                        return false;
-                    return;
+                    this.updatePosition();
                 }
             });
-            /** 在户型图展示时阻止 Five 滑动行为 */
-            Object.defineProperty(this, "handleWantsPanGesture", {
+            Object.defineProperty(this, "onFivePinchGesture", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
                 value: () => {
                     if (!this.visible)
                         return;
-                    return false;
+                    this.updatePosition();
+                    this.updateSize();
                 }
             });
-            Object.defineProperty(this, "handleModelLoaded", {
+            Object.defineProperty(this, "onFiveModelLoaded", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
@@ -4492,7 +4473,7 @@
                 }
             });
             /** 非 Topview 态隐藏户型图 */
-            Object.defineProperty(this, "handleModeChange", {
+            Object.defineProperty(this, "onFiveModeChange", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
@@ -4502,7 +4483,7 @@
                 }
             });
             /** 动画结束后是 Topview 态就展示户型图 */
-            Object.defineProperty(this, "handleInitAnimationEnded", {
+            Object.defineProperty(this, "onFiveInitAnimationEnded", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
@@ -4542,24 +4523,30 @@
             this.five = five;
             this.selector = params.selector;
             this.configs = omit(params, ['selector']);
+            this.five.addExtraElement(this.container);
             // 设置 container 样式
             this.container.classList.add('floorplan-plugin');
             Object.assign(this.container.style, pluginStyle$1);
             // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
-            this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
+            this.five.model.loaded
+                ? this.onFiveModelLoaded()
+                : five.once('modelLoaded', this.onFiveModelLoaded);
             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('modeChange', this.onFiveModeChange);
+            this.five.on('panGesture', this.onFivePanGesture);
+            this.five.on('mouseWheel', this.onFivePinchGesture);
+            this.five.on('panoArrived', this.onFivePanoArrived);
+            this.five.on('pinchGesture', this.onFivePinchGesture);
+            this.five.on('wantsGesture', this.onFiveWantsGesture);
+            this.five.on('wantsMoveToPano', this.onFiveWantsMoveToPano);
+            this.five.on('initAnimationEnded', this.onFiveInitAnimationEnded);
             this.five.on('modelShownFloorChange', this.onModelShownFloorChange);
         }
         /** 加载户型图数据 */
-        load(data) {
-            return __awaiter(this, void 0, void 0, function* () {
-                const copyData = JSON.parse(JSON.stringify(data));
-                this.floorplanData = yield formatData(copyData);
-                this.render();
-            });
+        async load(data) {
+            const copyData = JSON.parse(JSON.stringify(data));
+            this.floorplanData = await formatData(copyData);
+            this.render();
         }
         /** 把插件的渲染DOM插入到对应的容器中去 */
         appendTo(wrapper) {
@@ -4570,6 +4557,7 @@
         show() {
             this.visible = true;
             this.five.model.show(this.floorIndex);
+            this.updatePosition();
             this.updateSize();
             const renderDuration = 500;
             const modelOpacity = this.configs.modelOpacity;
@@ -4577,8 +4565,6 @@
                 changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
             }
             this.render(renderDuration);
-            this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
-            this.five.on('wantsPanGesture', this.handleWantsPanGesture);
         }
         hide() {
             const modelOpacity = 1;
@@ -4586,20 +4572,28 @@
             this.visible = false;
             changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
             this.render();
-            this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
-            this.five.on('wantsPanGesture', this.handleWantsPanGesture);
+        }
+        /** 更新户型图位置 */
+        updatePosition() {
+            var _a;
+            const modelCenter = (_a = this.five.model) === null || _a === void 0 ? void 0 : _a.bounding.getCenter(new THREE__namespace.Vector3());
+            if (!modelCenter)
+                return;
+            const ndcModelCenter = modelCenter.clone().project(this.five.camera);
+            const left = (ndcModelCenter.x + 1) / 2;
+            const top = -(ndcModelCenter.y - 1) / 2;
+            this.container.style.left = left * 100 + '%';
+            this.container.style.top = top * 100 + '%';
         }
         render(duration) {
             if (!this.container || !this.floorplanData)
                 return;
             if (this.size.width === 0)
                 return;
-            const { northDesc, getLabelElement, cameraImageUrl, preventRoomClick, hoverEnable, compassEnable, roomLabelsEnable, ruleLabelsEnable, } = this.configs;
-            const handleClick = preventRoomClick ? () => false : undefined;
+            const { northDesc, getLabelElement, cameraImageUrl, hoverEnable, compassEnable, roomLabelsEnable, ruleLabelsEnable, } = this.configs;
             const props = {
+                getLabelElement,
                 northDesc: northDesc !== null && northDesc !== void 0 ? northDesc : '北',
-                five: this.five,
-                pxmm: this.pxmm,
                 cameraImageUrl,
                 visible: this.visible,
                 duration: duration !== null && duration !== void 0 ? duration : 0,
@@ -4611,8 +4605,6 @@
                 ruleLabelsEnable: ruleLabelsEnable !== null && ruleLabelsEnable !== void 0 ? ruleLabelsEnable : true,
                 roomLabelsEnable: roomLabelsEnable !== null && roomLabelsEnable !== void 0 ? roomLabelsEnable : true,
                 lastPanoramaLongitude: this.lastPanoramaLongitude,
-                getLabelElement,
-                onRoomHeightClick: handleClick,
             };
             if (!this.app) {
                 this.app = new Main$1({
@@ -4653,7 +4645,7 @@
     /* src/floorplan/PanoFloorplanRadarPlugin/Components/Camera.svelte generated by Svelte v3.47.0 */
 
     function add_css$6(target) {
-    	internal.append_styles(target, "svelte-o7uo2v", ".plugin-radar__camera-wrapper.svelte-o7uo2v{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-o7uo2v{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-o7uo2v{position:absolute;left:-15px;top:-15px;width:17px;height:17px;transform-origin:15px 15px;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
+    	internal.append_styles(target, "svelte-1ty3s4p", ".plugin-radar__camera-wrapper.svelte-1ty3s4p{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-1ty3s4p{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-1ty3s4p{position:absolute;left:-0.78125rem;top:-0.78125rem;width:0.88542rem;height:0.88542rem;transform-origin:0.78125rem 0.78125rem;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
     }
 
     function create_fragment$7(ctx) {
@@ -4666,12 +4658,12 @@
     			div2 = internal.element("div");
     			div1 = internal.element("div");
     			div0 = internal.element("div");
-    			internal.attr(div0, "class", "plugin-radar__camera-rotate svelte-o7uo2v");
+    			internal.attr(div0, "class", "plugin-radar__camera-rotate svelte-1ty3s4p");
     			internal.set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
     			internal.set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
-    			internal.attr(div1, "class", "plugin-radar__camera-position svelte-o7uo2v");
+    			internal.attr(div1, "class", "plugin-radar__camera-position svelte-1ty3s4p");
     			internal.set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
-    			internal.attr(div2, "class", "plugin-radar__camera-wrapper svelte-o7uo2v");
+    			internal.attr(div2, "class", "plugin-radar__camera-wrapper svelte-1ty3s4p");
     		},
     		m(target, anchor) {
     			internal.insert(target, div2, anchor);
@@ -4787,7 +4779,7 @@
     /* src/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/ExtraObjects.svelte generated by Svelte v3.47.0 */
 
     function add_css$5(target) {
-    	internal.append_styles(target, "svelte-8n0d4v", ".plugin-pano-floorplan__extra-objects.svelte-8n0d4v{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-8n0d4v{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-8n0d4v{transform:translate(-50%, -50%)}");
+    	internal.append_styles(target, "svelte-1i87fz7", ".plugin-pano-floorplan__extra-objects.svelte-1i87fz7{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-1i87fz7{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-1i87fz7{transform:translate(-50%, -50%)}");
     }
 
     function get_each_context$2(ctx, list, i) {
@@ -4813,11 +4805,11 @@
     			div1 = internal.element("div");
     			div0 = internal.element("div");
     			t = internal.space();
-    			internal.attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-8n0d4v");
+    			internal.attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-1i87fz7");
     			internal.set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
     			internal.set_style(div0, "width", style_width, false);
     			internal.set_style(div0, "height", style_height, false);
-    			internal.attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-8n0d4v");
+    			internal.attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-1i87fz7");
     			internal.set_style(div1, "top", style_top, false);
     			internal.set_style(div1, "left", style_left, false);
     			this.first = div1;
@@ -4877,7 +4869,7 @@
     				each_blocks[i].c();
     			}
 
-    			internal.attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-8n0d4v");
+    			internal.attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-1i87fz7");
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -5151,7 +5143,7 @@
     /* src/floorplan/PanoFloorplanRadarPlugin/Components/Main.svelte generated by Svelte v3.47.0 */
 
     function add_css$4(target) {
-    	internal.append_styles(target, "svelte-7d8ub2", ".plugin-floorplan-radar.svelte-7d8ub2{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-7d8ub2{position:relative}");
+    	internal.append_styles(target, "svelte-1mvqyqq", ".plugin-floorplan-radar.svelte-1mvqyqq{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-1mvqyqq{position:relative}");
     }
 
     // (41:2) {#if clientWidth !== 0}
@@ -5206,7 +5198,7 @@
     			internal.create_component(currentfloor.$$.fragment);
     			t = internal.space();
     			internal.create_component(camera.$$.fragment);
-    			internal.attr(div, "class", "plugin-floorplan-radar-container svelte-7d8ub2");
+    			internal.attr(div, "class", "plugin-floorplan-radar-container svelte-1mvqyqq");
     			internal.set_style(div, "width", style_width, false);
     			internal.set_style(div, "height", style_height, false);
     		},
@@ -5283,7 +5275,7 @@
     		c() {
     			div = internal.element("div");
     			if (if_block) if_block.c();
-    			internal.attr(div, "class", "plugin-floorplan-radar svelte-7d8ub2");
+    			internal.attr(div, "class", "plugin-floorplan-radar svelte-1mvqyqq");
     			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[11].call(div));
     		},
     		m(target, anchor) {
@@ -5494,9 +5486,9 @@
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (data) => __awaiter(this, void 0, void 0, function* () {
+                value: async (data) => {
                     const copyData = JSON.parse(JSON.stringify(data));
-                    const floorplanData = yield formatData(copyData);
+                    const floorplanData = await formatData(copyData);
                     this.data = floorplanData;
                     // const loadImage = async () => {
                     //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
@@ -5514,7 +5506,7 @@
                     // }
                     // await loadImage()
                     this.render();
-                })
+                }
             });
             this.five = five;
             (params === null || params === void 0 ? void 0 : params.configs) && Object.assign(this.configs, params.configs);
@@ -5574,24 +5566,37 @@
         return new PanoFloorplanRadarPluginController(five, params);
     };
 
+    var FloorplanErrorType;
+    (function (FloorplanErrorType) {
+        FloorplanErrorType["UnknownError"] = "UnknowError";
+        FloorplanErrorType["DataNotLoaded"] = "DataNotLoaded";
+        FloorplanErrorType["BreakOffByHide"] = "BreakOffByHide";
+        FloorplanErrorType["ModelNotLoaded"] = "ModelNotLoaded";
+        FloorplanErrorType["ChangeModeError"] = "ChangeModeError";
+        FloorplanErrorType["UpdateCameraError"] = "UpdateCameraError";
+        FloorplanErrorType["DifferentShowParams"] = "DifferentShowParams";
+    })(FloorplanErrorType || (FloorplanErrorType = {}));
+    /** 户型图展示 & 模型消失的默认时间 */
+    const SHOW_ANIME_DURATION = 500;
+    /** Five camera 默认 fov */
+    const FIVE_CAMERA_DEFAULT_FOV = 80;
+
     /**
      * 传入一个 Promise
      * 无异常，返回 [null, data]
      * 有异常，则返回 [Error, undefined]
      * 用于替代 try&catch 处理 await 异常的方案
      */
-    function to(promise) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const data = yield promise;
-                return [null, data];
-            }
-            catch (error) {
-                if (error instanceof Error)
-                    return [error, null];
-                return [new Error(''), null];
-            }
-        });
+    async function to(promise) {
+        try {
+            const data = await promise;
+            return [null, data];
+        }
+        catch (error) {
+            if (error instanceof Error)
+                return [error, null];
+            return [new Error(''), null];
+        }
     }
 
     /**
@@ -5699,38 +5704,21 @@
         return isDeepEqual(value, other);
     }
 
-    function changeMode(five, ...changeModeParams) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const [changeModeError] = yield to(five.changeMode(...changeModeParams));
-            if (changeModeError)
-                throw changeModeError;
-            yield new Promise((reslove, reject) => {
-                five.once('initAnimationEnded', reslove);
-                const handleModeChange = (mode) => {
-                    if (mode !== changeModeParams[0])
-                        reject('changeMode 被中断');
-                    five.off('modeChange', handleModeChange);
-                };
-                five.on('modeChange', handleModeChange);
-            });
+    async function changeMode(five, ...changeModeParams) {
+        const [changeModeError] = await to(five.changeMode(...changeModeParams));
+        if (changeModeError)
+            throw changeModeError;
+        await new Promise((reslove, reject) => {
+            five.once('initAnimationEnded', reslove);
+            const handleModeChange = (mode) => {
+                if (mode !== changeModeParams[0])
+                    reject('changeMode 被中断');
+                five.off('modeChange', handleModeChange);
+            };
+            five.on('modeChange', handleModeChange);
         });
     }
 
-    var FloorplanErrorType;
-    (function (FloorplanErrorType) {
-        FloorplanErrorType["UnknownError"] = "UnknowError";
-        FloorplanErrorType["DataNotLoaded"] = "DataNotLoaded";
-        FloorplanErrorType["BreakOffByHide"] = "BreakOffByHide";
-        FloorplanErrorType["ModelNotLoaded"] = "ModelNotLoaded";
-        FloorplanErrorType["ChangeModeError"] = "ChangeModeError";
-        FloorplanErrorType["UpdateCameraError"] = "UpdateCameraError";
-        FloorplanErrorType["DifferentShowParams"] = "DifferentShowParams";
-    })(FloorplanErrorType || (FloorplanErrorType = {}));
-    /** 户型图展示 & 模型消失的默认时间 */
-    const SHOW_ANIME_DURATION = 500;
-    /** Five camera 默认 fov */
-    const FIVE_CAMERA_DEFAULT_FOV = 80;
-
     /**
      * 比较两个数字近似相等
      * @param num1 数字1
@@ -5757,32 +5745,30 @@
      * 2. 内置了相应的动画时间计算
      * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
      */
-    function correctFiveState(five$1, showState, userAction = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // 当前已满足状态，不需要变更
+    async function correctFiveState(five$1, showState, userAction = true) {
+        // 当前已满足状态，不需要变更
+        const result = checkShowState(five$1, showState);
+        if (result === true)
+            return;
+        // 纠正 mode
+        if (five$1.currentMode !== five.Five.Mode.Floorplan) {
+            const [changeModeError] = await to(changeMode(five$1, five.Five.Mode.Floorplan, showState, undefined, userAction));
+            if (changeModeError)
+                throw changeModeError;
+            // changeMode 是异步行为，可能会被打断，需要在结束后加一次判断
             const result = checkShowState(five$1, showState);
-            if (result === true)
-                return;
-            // 纠正 mode
-            if (five$1.currentMode !== five.Five.Mode.Floorplan) {
-                const [changeModeError] = yield to(changeMode(five$1, five.Five.Mode.Floorplan, showState, undefined, userAction));
-                if (changeModeError)
-                    throw changeModeError;
-                // changeMode 是异步行为，可能会被打断，需要在结束后加一次判断
-                const result = checkShowState(five$1, showState);
-                if (result === false)
-                    throw new Error(FloorplanErrorType.ChangeModeError);
-                return;
-            }
-            // 纠正相机状态
-            // 根据 latitude、longitude、fov 计算动画时间，最多 1s
-            const { latitude, longitude, fov } = five$1.getCurrentState();
-            const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
-            const [updateCameraError] = yield to(five$1.updateCamera(showState, time, userAction));
-            if (updateCameraError)
-                throw new Error(FloorplanErrorType.UpdateCameraError);
+            if (result === false)
+                throw new Error(FloorplanErrorType.ChangeModeError);
             return;
-        });
+        }
+        // 纠正相机状态
+        // 根据 latitude、longitude、fov 计算动画时间，最多 1s
+        const { latitude, longitude, fov } = five$1.getCurrentState();
+        const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
+        const [updateCameraError] = await to(five$1.updateCamera(showState, time, userAction));
+        if (updateCameraError)
+            throw new Error(FloorplanErrorType.UpdateCameraError);
+        return;
     }
 
     const MODEL_FLOORPLAN_PLUGIN_NAME = 'modelFloorplanPlugin';
@@ -5971,12 +5957,12 @@
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (opts) => __awaiter(this, void 0, void 0, function* () {
-                    var _b, _c;
+                value: async (opts) => {
+                    var _a, _b;
                     // 已经在展示中了
                     if (!this.showPromise && this.visible)
                         return true;
-                    if (!((_b = this.five.model) === null || _b === void 0 ? void 0 : _b.loaded))
+                    if (!((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded))
                         throw new Error(FloorplanErrorType.ModelNotLoaded);
                     if (!this.floorplanData)
                         throw new Error(FloorplanErrorType.DataNotLoaded);
@@ -5986,18 +5972,18 @@
                         if (!!this.showPromise && sameWithLastOpts)
                             return this.showPromise;
                         if (!!this.showPromise && !sameWithLastOpts)
-                            (_c = this.showRejection) === null || _c === void 0 ? void 0 : _c.call(this, FloorplanErrorType.DifferentShowParams);
+                            (_b = this.showRejection) === null || _b === void 0 ? void 0 : _b.call(this, FloorplanErrorType.DifferentShowParams);
                     }
                     this.ModelFloorplanPluginsShowOpts = opts;
-                    const getShowPromise = () => __awaiter(this, void 0, void 0, function* () {
-                        var _d, _e;
+                    const getShowPromise = async () => {
+                        var _a, _b;
                         let hasRejected = false;
                         let externalErrorMsg;
                         this.showRejection = (errorMsg) => {
                             hasRejected = true;
                             externalErrorMsg = errorMsg;
                         };
-                        const [correctError] = yield to(correctFiveState(this.five, this.showState, opts === null || opts === void 0 ? void 0 : opts.userAction));
+                        const [correctError] = await to(correctFiveState(this.five, this.showState, opts === null || opts === void 0 ? void 0 : opts.userAction));
                         if (correctError)
                             throw correctError;
                         // 异步结束要判断当前是不是被中断了，是不是调用了隐藏
@@ -6016,7 +6002,7 @@
                             this.floorIndex = opts.floorIndex;
                         this.five.model.show(this.floorIndex);
                         // 模型消失, 渲染户型图
-                        const modelOpacity = (_e = (_d = opts === null || opts === void 0 ? void 0 : opts.modelOpacity) !== null && _d !== void 0 ? _d : this.configs.modelOpacity) !== null && _e !== void 0 ? _e : 1;
+                        const modelOpacity = (_b = (_a = opts === null || opts === void 0 ? void 0 : opts.modelOpacity) !== null && _a !== void 0 ? _a : this.configs.modelOpacity) !== null && _b !== void 0 ? _b : 1;
                         const renderDuration = (opts === null || opts === void 0 ? void 0 : opts.immediately) ? 0 : SHOW_ANIME_DURATION;
                         changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
                         this.render(renderDuration);
@@ -6024,7 +6010,7 @@
                         this.five.on('wantsGesture', this.handleWantsGesture);
                         this.five.on('wantsTapGesture', this.handleWantsTapGesture);
                         return true;
-                    });
+                    };
                     const showPromise = getShowPromise()
                         .then(() => {
                         var _a;
@@ -6046,7 +6032,7 @@
                     });
                     this.showPromise = showPromise;
                     return showPromise;
-                })
+                }
             });
             /** 隐藏户型图 */
             Object.defineProperty(this, "hide", {
@@ -6076,8 +6062,13 @@
                 configurable: true,
                 writable: true,
                 value: (shownFloor) => {
-                    if (shownFloor === null)
+                    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();
@@ -6190,7 +6181,9 @@
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: ({ latitude, longitude }, isFinal) => __awaiter(this, void 0, void 0, function* () {
+                value: async ({ latitude, longitude }, isFinal) => {
+                    if (this.five.getCurrentState().mode !== 'Floorplan')
+                        return;
                     if (this.configs.autoShowEnable === false)
                         return;
                     // 如果操作结束后，户型图还在展示中，初始化模型状态
@@ -6211,16 +6204,16 @@
                     const longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
                     if (isFinal && !this.visible && latitudeVisible && longitudeVisible) {
                         // 当手指离开时需要等惯性结束之后在进行判断
-                        const handleInteriaPan = (any, isFinal) => __awaiter(this, void 0, void 0, function* () {
+                        const handleInteriaPan = async (any, isFinal) => {
                             if (!isFinal)
                                 return;
                             this.five.off('interiaPan', handleInteriaPan);
-                            yield this.show({ isAutoShow: true });
-                        });
+                            await this.show({ isAutoShow: true });
+                        };
                         this.five.on('interiaPan', handleInteriaPan);
                         return;
                     }
-                })
+                }
             });
             this.five = five$1;
             this.hooks = new five.Subscribe();
@@ -6234,9 +6227,9 @@
                 left: '50%',
                 top: '50%',
                 transform: 'translate(-50%, -50%)',
-                pointerEvents: 'none',
                 zIndex: 10,
             });
+            this.five.addExtraElement(this.container);
             // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
             this.five.model.loaded ? this.handleModelLoaded() : five$1.once('modelLoaded', this.handleModelLoaded);
             five$1.once('dispose', this.dispose);
@@ -6247,12 +6240,10 @@
             five$1.on('modelShownFloorChange', this.onModelShownFloorChange);
         }
         /** 加载户型图数据 */
-        load(data) {
-            return __awaiter(this, void 0, void 0, function* () {
-                const copyData = JSON.parse(JSON.stringify(data));
-                this.floorplanData = yield formatData(copyData);
-                this.render();
-            });
+        async load(data) {
+            const copyData = JSON.parse(JSON.stringify(data));
+            this.floorplanData = await formatData(copyData);
+            this.render();
         }
         /** 把插件的渲染DOM插入到对应的容器中去 */
         appendTo(wrapper) {
@@ -6263,8 +6254,6 @@
         /** 更改户型图楼层 */
         changeFloor(floorIndex) {
             this.five.model.show(floorIndex);
-            this.floorIndex = floorIndex;
-            this.render();
         }
         changeConfigs(params) {
             Object.assign(this.configs, params);
@@ -6279,10 +6268,9 @@
                 return;
             const { northDesc, hoverEnable, cameraImageUrl, getLabelElement, roomLabelsEnable, compassEnable, ruleLabelsEnable } = this.configs;
             const props = {
-                northDesc: northDesc !== null && northDesc !== void 0 ? northDesc : '北',
-                five: this.five,
-                pxmm: this.pxmm,
                 cameraImageUrl,
+                getLabelElement,
+                northDesc: northDesc !== null && northDesc !== void 0 ? northDesc : '北',
                 visible: this.visible,
                 duration: duration !== null && duration !== void 0 ? duration : 0,
                 panoIndex: this.panoIndex,
@@ -6293,8 +6281,6 @@
                 ruleLabelsEnable: ruleLabelsEnable !== null && ruleLabelsEnable !== void 0 ? ruleLabelsEnable : true,
                 roomLabelsEnable: roomLabelsEnable !== null && roomLabelsEnable !== void 0 ? roomLabelsEnable : true,
                 lastPanoramaLongitude: this.lastPanoramaLongitude,
-                getLabelElement,
-                onRoomHeightClick: this.handleClick,
             };
             if (!this.app) {
                 this.app = new Main$1({
@@ -6364,7 +6350,7 @@
         const defaultNorthRad = params.north_rad || undefined;
         // 局部状态
         const state = {};
-        const load = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        const load = async (data) => {
             const fbxUrl = (data === null || data === void 0 ? void 0 : data.fbx_url) || defaultFbxUrl;
             const northRad = (data === null || data === void 0 ? void 0 : data.north_rad) || defaultNorthRad;
             if (!northRad) {
@@ -6375,7 +6361,7 @@
             const zOffset = bounding.max.z - bounding.min.z;
             const maxOffset = Math.max(xOffset, zOffset);
             const fbxLoader = new FBXLoader.FBXLoader();
-            const object = yield fbxLoader.loadAsync(fbxUrl);
+            const object = await fbxLoader.loadAsync(fbxUrl);
             transfromToMeshBasicMaterial(object, {
                 transparent: true,
                 side: THREE__namespace.DoubleSide,
@@ -6389,7 +6375,7 @@
             bject3d2LocalMatrix(object, { position, rotation, scale });
             state.object = object;
             return true;
-        });
+        };
         const onCameraUpdate = ({ latitude }) => {
             if (!state.object)
                 return;
@@ -6459,25 +6445,25 @@
         const defaultRad = (_c = params.rad) !== null && _c !== void 0 ? _c : undefined;
         const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
         const mixers = [];
-        const load = (data) => __awaiter(void 0, void 0, void 0, function* () {
-            var _d, _e, _f, _g, _h, _j, _k;
-            const position = (_d = data === null || data === void 0 ? void 0 : data.position) !== null && _d !== void 0 ? _d : defaultModelPosition;
+        const load = async (data) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            const position = (_a = data === null || data === void 0 ? void 0 : data.position) !== null && _a !== void 0 ? _a : defaultModelPosition;
             if (!position)
                 return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
             const modelPosition = transformPositionToVector3(position);
-            const rad = (_e = data === null || data === void 0 ? void 0 : data.rad) !== null && _e !== void 0 ? _e : defaultRad;
-            const fbxUrl = (_f = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _f !== void 0 ? _f : defaultFbxUrl;
+            const rad = (_b = data === null || data === void 0 ? void 0 : data.rad) !== null && _b !== void 0 ? _b : defaultRad;
+            const fbxUrl = (_c = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _c !== void 0 ? _c : defaultFbxUrl;
             state.rad = rad;
             if (rad === undefined)
                 return Promise.reject(`ModelEntryDoorGuidePlugin.load(): rad is ${rad}`);
             // 加载模型
-            const object = yield new FBXLoader.FBXLoader().loadAsync(fbxUrl);
+            const object = await new FBXLoader.FBXLoader().loadAsync(fbxUrl);
             // 设置位置
             object.position.copy(modelPosition);
             object.rotation.z = rad;
             object.scale.set(0.8, 0.8, 0.8);
             transfromToMeshBasicMaterial(object, { transparent: true, side: THREE__namespace.DoubleSide });
-            const textMesh = (_k = (_j = (_h = (_g = object.children) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.children) === null || _j === void 0 ? void 0 : _j[3]) === null || _k === void 0 ? void 0 : _k.clone();
+            const textMesh = (_g = (_f = (_e = (_d = object.children) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f[3]) === null || _g === void 0 ? void 0 : _g.clone();
             if (!textMesh)
                 return Promise.reject(`ModelEntryDoorGuidePlugin.load(): textMesh is ${textMesh}`);
             textMesh.material = new THREE.MeshBasicMaterial({ transparent: true, map: createCanvasTextTexture('入户门') });
@@ -6485,7 +6471,7 @@
             object.children[0].add(textMesh);
             state.object = object;
             return true;
-        });
+        };
         const initAnimation = () => {
             if (state.animation)
                 return;
@@ -6722,21 +6708,21 @@
      */
     const CameraMovementPlugin = (five$1) => {
         const state = {};
-        const move = (args, duration, opts = { preload: true }) => __awaiter(void 0, void 0, void 0, function* () {
+        const move = async (args, duration, opts = { preload: true }) => {
             if (state.interruptCallback) {
                 state.interruptCallback(false);
             }
             if (opts.asyncStartCallback) {
-                yield opts.asyncStartCallback();
+                await opts.asyncStartCallback();
             }
             if (args.mode && args.mode !== five$1.currentMode) {
-                yield five$1.changeMode(args.mode);
+                await five$1.changeMode(args.mode);
             }
             if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five$1.panoIndex) {
-                yield five$1.preloadPano(args.panoIndex);
+                await five$1.preloadPano(args.panoIndex);
             }
             if (opts.asyncEndCallback) {
-                yield opts.asyncEndCallback();
+                await opts.asyncEndCallback();
             }
             if (args.panoIndex === undefined &&
                 args.fov === undefined &&
@@ -6744,7 +6730,7 @@
                 args.longitude === undefined) {
                 return true;
             }
-            return yield new Promise((resolve, reject) => {
+            return await new Promise((resolve, reject) => {
                 const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five$1.panoIndex;
                 if (panoIndex !== undefined) {
                     five$1.moveToPano(panoIndex, Object.assign({
@@ -6757,7 +6743,7 @@
                     reject(false);
                 }
             });
-        });
+        };
         const getAnimeParams = (args) => {
             const currentFiveState = five$1.state;
             // latitude
@@ -6773,20 +6759,20 @@
                 to: { latitude: toLatitude, longitude: toLongitude, fov: toFov },
             };
         };
-        const rotate = (args, duration, opts = {}) => __awaiter(void 0, void 0, void 0, function* () {
+        const rotate = async (args, duration, opts = {}) => {
             if (state.interruptCallback) {
                 state.interruptCallback(false);
             }
             if (opts.asyncStartCallback) {
-                yield opts.asyncStartCallback();
+                await opts.asyncStartCallback();
             }
             if (five$1.currentMode !== five.Five.Mode.Panorama) {
-                yield five$1.changeMode(five.Five.Mode.Panorama);
+                await five$1.changeMode(five.Five.Mode.Panorama);
             }
             if (args.panoIndex !== undefined && args.panoIndex !== five$1.panoIndex) {
                 if (opts.preload)
-                    yield five$1.preloadPano(args.panoIndex);
-                yield new Promise((resolve, reject) => {
+                    await five$1.preloadPano(args.panoIndex);
+                await new Promise((resolve, reject) => {
                     if (!args.panoIndex) {
                         resolve(true);
                         return;
@@ -6798,10 +6784,10 @@
                 });
             }
             if (opts.asyncEndCallback) {
-                yield opts.asyncEndCallback();
+                await opts.asyncEndCallback();
             }
             const { from, to } = getAnimeParams(args);
-            return yield new Promise((resolve) => {
+            return await new Promise((resolve) => {
                 const onUpdate = ({ progress }) => {
                     const state = {};
                     state.longitude = progressNumber(from.longitude, to.longitude, progress);
@@ -6843,7 +6829,7 @@
                         state.interruptCallback(true);
                 }, duration);
             });
-        });
+        };
         return {
             move,
             rotate,
@@ -7202,7 +7188,7 @@
             state.loaded = true;
             return true;
         };
-        const load = (_roomInfo, _roomRules, options) => __awaiter(void 0, void 0, void 0, function* () {
+        const load = async (_roomInfo, _roomRules, options) => {
             const roomInfo = _roomInfo || params.roomInfo;
             const roomRules = _roomRules || params.roomRules;
             if (!roomInfo || !roomRules) {
@@ -7213,9 +7199,9 @@
                 return _load(roomInfo, roomRules);
             }
             else {
-                return yield new Promise((resolve) => five$1.once('modelLoaded', () => resolve(_load(roomInfo, roomRules))));
+                return await new Promise((resolve) => five$1.once('modelLoaded', () => resolve(_load(roomInfo, roomRules))));
             }
-        });
+        };
         if (params.roomInfo && params.roomRules) {
             load(params.roomInfo, params.roomRules);
         }
@@ -7480,14 +7466,12 @@
     }
 
     const textureLoader = new THREE__namespace.TextureLoader();
-    function loadTexture(url) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve, reject) => {
-                textureLoader.load(url, resolve, undefined, reject);
-            }).then((texture) => {
-                texture.encoding = THREE__namespace.sRGBEncoding;
-                return texture;
-            });
+    async function loadTexture(url) {
+        return new Promise((resolve, reject) => {
+            textureLoader.load(url, resolve, undefined, reject);
+        }).then((texture) => {
+            texture.encoding = THREE__namespace.sRGBEncoding;
+            return texture;
         });
     }
 
@@ -7727,65 +7711,59 @@
             if (this.modelLoaded)
                 this.init();
         }
-        init() {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (!this.data || !this.modelLoaded)
-                    return;
-                const northRad = this.data.north_rad;
-                if (northRad != null) {
-                    this.compassMesh = yield this.loadCompassMesh();
-                    this.compassMesh.rotateX(-Math.PI / 2);
-                    this.compassMesh.rotateZ(northRad - Math.PI / 2);
-                    this.group.add(this.compassMesh);
-                }
-                if (this.data.entrance != null) {
-                    this.entryDoorMesh = yield this.loadEntryDoorMesh();
-                    this.roomInfoWrapperInstance = this.loadRoomInfo();
-                    this.roomInfoInstance = getRoomInfoInstance();
-                    this.entryDoorMesh.rotateX(-Math.PI / 2);
-                    if (this.roomInfoWrapperInstance)
-                        this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
-                    this.group.add(this.entryDoorMesh);
-                }
-                this.onFivePanoArrived(this.five.panoIndex || 0);
-                this.five.needsRender = true;
-            });
-        }
-        loadCompassMesh() {
+        async init() {
+            if (!this.data || !this.modelLoaded)
+                return;
+            const northRad = this.data.north_rad;
+            if (northRad != null) {
+                this.compassMesh = await this.loadCompassMesh();
+                this.compassMesh.rotateX(-Math.PI / 2);
+                this.compassMesh.rotateZ(northRad - Math.PI / 2);
+                this.group.add(this.compassMesh);
+            }
+            if (this.data.entrance != null) {
+                this.entryDoorMesh = await this.loadEntryDoorMesh();
+                this.roomInfoWrapperInstance = this.loadRoomInfo();
+                this.roomInfoInstance = getRoomInfoInstance();
+                this.entryDoorMesh.rotateX(-Math.PI / 2);
+                if (this.roomInfoWrapperInstance)
+                    this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
+                this.group.add(this.entryDoorMesh);
+            }
+            this.onFivePanoArrived(this.five.panoIndex || 0);
+            this.five.needsRender = true;
+        }
+        async loadCompassMesh() {
             var _a;
-            return __awaiter(this, void 0, void 0, function* () {
-                const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
-                    '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
-                const compassTexture = yield loadTexture(compassImageUrl);
-                const compassGeometry = new THREE__namespace.CircleGeometry(0.7, 32);
-                const compassMaterial = new THREE__namespace.MeshBasicMaterial({
-                    map: compassTexture,
-                    transparent: true,
-                    opacity: 0,
-                    depthTest: false,
-                });
-                const compassMesh = new THREE__namespace.Mesh(compassGeometry, compassMaterial);
-                compassMesh.name = 'pano-compass-mesh';
-                return compassMesh;
+            const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
+                '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
+            const compassTexture = await loadTexture(compassImageUrl);
+            const compassGeometry = new THREE__namespace.CircleGeometry(0.7, 32);
+            const compassMaterial = new THREE__namespace.MeshBasicMaterial({
+                map: compassTexture,
+                transparent: true,
+                opacity: 0,
+                depthTest: false,
             });
+            const compassMesh = new THREE__namespace.Mesh(compassGeometry, compassMaterial);
+            compassMesh.name = 'pano-compass-mesh';
+            return compassMesh;
         }
-        loadEntryDoorMesh() {
+        async loadEntryDoorMesh() {
             var _a;
-            return __awaiter(this, void 0, void 0, function* () {
-                const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
-                    '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
-                const entryDoorTexture = yield loadTexture(entryDoorImageUrl);
-                const entryDoorGeometry = new THREE__namespace.PlaneGeometry(0.2, 0.16);
-                const entryDoorMaterial = new THREE__namespace.MeshBasicMaterial({
-                    map: entryDoorTexture,
-                    transparent: true,
-                    opacity: 0.8,
-                    depthTest: false,
-                });
-                const entryDoorMesh = new THREE__namespace.Mesh(entryDoorGeometry, entryDoorMaterial);
-                entryDoorMesh.name = 'pano-compass-entry-door';
-                return entryDoorMesh;
+            const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
+                '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
+            const entryDoorTexture = await loadTexture(entryDoorImageUrl);
+            const entryDoorGeometry = new THREE__namespace.PlaneGeometry(0.2, 0.16);
+            const entryDoorMaterial = new THREE__namespace.MeshBasicMaterial({
+                map: entryDoorTexture,
+                transparent: true,
+                opacity: 0.8,
+                depthTest: false,
             });
+            const entryDoorMesh = new THREE__namespace.Mesh(entryDoorGeometry, entryDoorMaterial);
+            entryDoorMesh.name = 'pano-compass-entry-door';
+            return entryDoorMesh;
         }
         loadRoomInfo() {
             const points = [
@@ -10650,11 +10628,6 @@
 
     var Hammer = hammer.exports;
 
-    var Hammer$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/_mergeNamespaces({
-        __proto__: null,
-        'default': Hammer
-    }, [hammer.exports]));
-
     // uuid
     function S4() {
         return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
@@ -11650,7 +11623,7 @@
             const fiveElement = this.five.getElement();
             if (fiveElement) {
                 this.fiveElement = fiveElement;
-                const hammer = new Hammer$1(fiveElement);
+                const hammer = new Hammer(fiveElement);
                 this.hammer = hammer;
                 hammer.on('tap', this.onTap);
                 hammer.on('pan', this.onPan);
@@ -13213,7 +13186,7 @@
     /* src/PanoSpatialTagPlugin/Components/origins.svelte generated by Svelte v3.47.0 */
 
     function add_css$3(target) {
-    	internal.append_styles(target, "svelte-scnx9u", ".PanoSpatialTagPlugin__tag-origin.svelte-scnx9u{position:absolute;width:0.5rem;height:0.5rem;border-radius:50%;background:#fff;box-shadow:0 0 .6rem #fff;transform:translate(-50%, -50%) scale(1);transform-origin:center center;animation:svelte-scnx9u-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-scnx9u:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-scnx9u{transform:translate(-50%, -50%) scale(0.6);animation:svelte-scnx9u-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@keyframes svelte-scnx9u-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-scnx9u-PanoSpatialTagPlugin__tag-origin-destroy{0%{transform:translate(-50%, -50%) scale(0.6);opacity:1}10%{transform:translate(-50%, -50%) scale(1);opacity:0.9}100%{transform:translate(-50%, -50%) scale(1);opacity:0}}");
+    	internal.append_styles(target, "svelte-1kuu68s", ".PanoSpatialTagPlugin__tag-origin.svelte-1kuu68s{position:absolute;width:0.5rem;height:0.5rem;border-radius:50%;background:#fff;box-shadow:0 0 .6rem #fff;transform:translate(-50%, -50%) scale(1);transform-origin:center center;-webkit-animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin 1.2s forwards;animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-1kuu68s:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-1kuu68s{transform:translate(-50%, -50%) scale(0.6);-webkit-animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s;animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@-webkit-keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@-webkit-keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy{0%{transform:translate(-50%, -50%) scale(0.6);opacity:1}10%{transform:translate(-50%, -50%) scale(1);opacity:0.9}100%{transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy{0%{transform:translate(-50%, -50%) scale(0.6);opacity:1}10%{transform:translate(-50%, -50%) scale(1);opacity:0.9}100%{transform:translate(-50%, -50%) scale(1);opacity:0}}");
     }
 
     function get_each_context$1(ctx, list, i) {
@@ -13237,7 +13210,7 @@
     	return {
     		c() {
     			i = internal.element("i");
-    			internal.attr(i, "class", "svelte-scnx9u");
+    			internal.attr(i, "class", "svelte-1kuu68s");
     			internal.toggle_class(i, "PanoSpatialTagPlugin__tag-origin", true);
     			internal.toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
     			internal.set_style(i, "top", style_top, false);
@@ -13362,7 +13335,7 @@
     /* src/PanoSpatialTagPlugin/Components/tag.svelte generated by Svelte v3.47.0 */
 
     function add_css$2(target) {
-    	internal.append_styles(target, "svelte-1c0xhg0", ".PanoSpatialTagPlugin__tag-x.svelte-1c0xhg0.svelte-1c0xhg0{position:relative;display:block;white-space:nowrap;box-sizing:border-box;width:25rem;height:14rem;color:#FFF;transform:translate(0, -100%);transition:height .5s linear}.PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0.svelte-1c0xhg0{content:'';position:absolute;width:30rem;height:30rem;top:-15rem;left:-15rem;z-index:-1;opacity:0;transition:opacity .8s .6s;background:url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');background-size:30rem 30rem}.PanoSpatialTagPlugin__tag-line.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:1rem;height:calc(100% - 1.5rem);width:.15rem;background:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));box-shadow:0 .1rem .5rem rgba(0, 0, 0, .2);opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;transform-origin:center bottom}.PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:0.3rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:0.5rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0{animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0{animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0.svelte-1c0xhg0{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line.svelte-1c0xhg0{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-1c0xhg0.svelte-1c0xhg0{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-animate.svelte-1c0xhg0{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;display:inline-block;transform:translate(-100%, 0);transition:transform .9s cubic-bezier(0,.65,.16,1.08) .6s;padding-left:.5rem;font-size:1rem}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content .svelte-1c0xhg0{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0{opacity:0.5;transform:translate(-50%, 0) scaleY(0);animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 135%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 20%) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 125%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1-hide{0%{opacity:0.5;transform:translate(-50%, 10%) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 105%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2-hide{0%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 100%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}");
+    	internal.append_styles(target, "svelte-1wukaol", ".PanoSpatialTagPlugin__tag-x.svelte-1wukaol.svelte-1wukaol{position:relative;display:block;white-space:nowrap;box-sizing:border-box;width:25rem;height:14rem;color:#FFF;transform:translate(0, -100%);transition:height .5s linear}.PanoSpatialTagPlugin__tag-shadow.svelte-1wukaol.svelte-1wukaol{content:'';position:absolute;width:30rem;height:30rem;top:-15rem;left:-15rem;z-index:-1;opacity:0;transition:opacity .8s .6s;background:url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');background-size:30rem 30rem}.PanoSpatialTagPlugin__tag-line.svelte-1wukaol.svelte-1wukaol{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-1wukaol.svelte-1wukaol{position:absolute;top:0;left:1rem;height:calc(100% - 1.5rem);width:.15rem;background:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));box-shadow:0 .1rem .5rem rgba(0, 0, 0, .2);opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;transform-origin:center bottom}.PanoSpatialTagPlugin__tag-line1.svelte-1wukaol.svelte-1wukaol{position:absolute;top:0;left:0.3rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-line2.svelte-1wukaol.svelte-1wukaol{position:absolute;top:0;left:0.5rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-show.svelte-1wukaol .PanoSpatialTagPlugin__tag-line1.svelte-1wukaol{-webkit-animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s;animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-1wukaol .PanoSpatialTagPlugin__tag-line2.svelte-1wukaol{-webkit-animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s;animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-1wukaol.svelte-1wukaol{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1wukaol .PanoSpatialTagPlugin__tag-line.svelte-1wukaol{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-1wukaol.svelte-1wukaol{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-1wukaol .PanoSpatialTagPlugin__tag-animate.svelte-1wukaol{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-1wukaol.svelte-1wukaol{position:absolute;display:inline-block;transform:translate(-100%, 0);transition:transform .9s cubic-bezier(0,.65,.16,1.08) .6s;padding-left:.5rem;font-size:1rem}.PanoSpatialTagPlugin__tag-upside-down.svelte-1wukaol .PanoSpatialTagPlugin__tag-content.svelte-1wukaol{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-1wukaol .PanoSpatialTagPlugin__tag-flagpole.svelte-1wukaol{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1wukaol .PanoSpatialTagPlugin__tag-shadow.svelte-1wukaol{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-1wukaol .PanoSpatialTagPlugin__tag-shadow.svelte-1wukaol{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-1wukaol .PanoSpatialTagPlugin__tag-content.svelte-1wukaol{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-1wukaol .PanoSpatialTagPlugin__tag-flagpole.svelte-1wukaol{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-1wukaol .PanoSpatialTagPlugin__tag-shadow.svelte-1wukaol{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-1wukaol .PanoSpatialTagPlugin__tag-content.svelte-1wukaol{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-1wukaol .PanoSpatialTagPlugin__tag-content .svelte-1wukaol{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-1wukaol .PanoSpatialTagPlugin__tag-line1.svelte-1wukaol{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);-webkit-animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s;animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-1wukaol .PanoSpatialTagPlugin__tag-line2.svelte-1wukaol{opacity:0.5;transform:translate(-50%, 0) scaleY(0);-webkit-animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s;animation:svelte-1wukaol-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@-webkit-keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line1{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 135%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 20%) scaleY(0)}}@keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line1{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 135%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 20%) scaleY(0)}}@-webkit-keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line2{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 125%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}}@keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line2{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 125%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}}@-webkit-keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line1-hide{0%{opacity:0.5;transform:translate(-50%, 10%) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 105%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}@keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line1-hide{0%{opacity:0.5;transform:translate(-50%, 10%) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 105%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}@-webkit-keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line2-hide{0%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 100%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}@keyframes svelte-1wukaol-PanoSpatialTagPlugin__tag-line2-hide{0%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 100%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}");
     }
 
     function create_fragment$2(ctx) {
@@ -13396,19 +13369,19 @@
     			t3 = internal.space();
     			div3 = internal.element("div");
     			div2 = internal.element("div");
-    			internal.attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-1c0xhg0");
+    			internal.attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-1wukaol");
     			internal.set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
-    			internal.attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-1c0xhg0");
+    			internal.attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-1wukaol");
     			internal.set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
-    			internal.attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-1c0xhg0");
-    			internal.attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-1c0xhg0");
-    			internal.attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-1c0xhg0");
-    			internal.attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-1c0xhg0");
-    			internal.attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-1c0xhg0");
+    			internal.attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-1wukaol");
+    			internal.attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-1wukaol");
+    			internal.attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-1wukaol");
+    			internal.attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-1wukaol");
+    			internal.attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-1wukaol");
     			internal.set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
     			internal.attr(div4, "id", div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0]);
     			internal.set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
-    			internal.attr(div4, "class", "svelte-1c0xhg0");
+    			internal.attr(div4, "class", "svelte-1wukaol");
     			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-x", true);
     			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
     			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
@@ -14275,7 +14248,7 @@
     /* src/ModelItemLabelPlugin/ItemLabelItem.svelte generated by Svelte v3.47.0 */
 
     function add_css$1(target) {
-    	internal.append_styles(target, "svelte-1mttyji", ".item-label-item.svelte-1mttyji{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1mttyji{opacity:1;animation:svelte-1mttyji-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1mttyji::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(16px);z-index:-1}.item-label-item__text-wrap.svelte-1mttyji{padding:6px 6px 0;position:absolute;height:20px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:10px;font-size:11px;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-1mttyji{padding-bottom:4px;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-1mttyji{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@keyframes svelte-1mttyji-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+    	internal.append_styles(target, "svelte-1hzvil1", ".item-label-item.svelte-1hzvil1{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1hzvil1{opacity:1;-webkit-animation:svelte-1hzvil1-fadeIn .3s ease-in;animation:svelte-1hzvil1-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1hzvil1::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(0.83333rem);z-index:-1}.item-label-item__text-wrap.svelte-1hzvil1{padding:0.3125rem 0.3125rem 0;position:absolute;height:1.04167rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:0.52083rem;font-size:0.57292rem;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-1hzvil1{padding-bottom:0.20833rem;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;-o-border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-1hzvil1{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@-webkit-keyframes svelte-1hzvil1-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-1hzvil1-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
     }
 
     function create_fragment$1(ctx) {
@@ -14302,12 +14275,12 @@
     			t0 = internal.text(t0_value);
     			t1 = internal.space();
     			div1 = internal.element("div");
-    			internal.attr(span, "class", "item-label-item__text svelte-1mttyji");
-    			internal.attr(div0, "class", "item-label-item__text-wrap svelte-1mttyji");
+    			internal.attr(span, "class", "item-label-item__text svelte-1hzvil1");
+    			internal.attr(div0, "class", "item-label-item__text-wrap svelte-1hzvil1");
     			internal.set_style(div0, "top", `-${/*itemLabel*/ ctx[0].strokeLength + 26}px`);
-    			internal.attr(div1, "class", "item-label-item__bar svelte-1mttyji");
+    			internal.attr(div1, "class", "item-label-item__bar svelte-1hzvil1");
     			internal.set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-    			internal.attr(div2, "class", div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"));
+    			internal.attr(div2, "class", div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1hzvil1"));
     			internal.set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
     			internal.set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
     		},
@@ -14337,7 +14310,7 @@
     				internal.set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
     			}
 
-    			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"))) {
+    			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1hzvil1"))) {
     				internal.attr(div2, "class", div2_class_value);
     			}
 
@@ -14401,7 +14374,7 @@
     /* src/ModelItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.47.0 */
 
     function add_css(target) {
-    	internal.append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
+    	internal.append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
     }
 
     function get_each_context(ctx, list, i) {
@@ -14482,7 +14455,7 @@
     				each_blocks[i].c();
     			}
 
-    			internal.attr(div, "class", "item-labels-container svelte-rmdeb");
+    			internal.attr(div, "class", "item-labels-container svelte-gk8s47");
     			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
     			internal.set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
     		},
@@ -15070,7 +15043,7 @@
                 xhr.send();
             });
         };
-        const load = (data, videoElement) => __awaiter(void 0, void 0, void 0, function* () {
+        const load = async (data, videoElement) => {
             const { video_src, video_poster_src, points } = data;
             state.videoSource = video_src;
             // TODO 存疑，先处理多一次遍历 o(2n)
@@ -15080,11 +15053,11 @@
             if (videoElement) {
                 state.videoElement = videoElement;
             }
-            state.videoTexture = yield getVideoTexture(state.videoSource, state.videoElement);
+            state.videoTexture = await getVideoTexture(state.videoSource, state.videoElement);
             state.enabled = !!data.enable;
             if (state.enabled)
                 enable();
-        });
+        };
         const dispose = () => {
             disable();
             state.videoTexture = undefined;