@realsee/dnalogel 2.0.2-alpha → 2.1.0-alpha.2

package/dist/index.es.js

@@ -1,13 +1,13 @@
 import * as THREE from 'three';
-import { Vector3 as Vector3$1, Scene, Group, Raycaster as Raycaster$1, MeshBasicMaterial, CanvasTexture, AnimationMixer, Color, TextureLoader, Vector2 as Vector2$1, PlaneGeometry, sRGBEncoding, Mesh, CurvePath, LineCurve3, TubeGeometry, ShaderMaterial, SphereGeometry, DoubleSide, RingGeometry, Quaternion, Euler } from 'three';
-import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Vector3 as Vector3$1, Group, Raycaster as Raycaster$1, MeshBasicMaterial, CanvasTexture, AnimationMixer, Color, TextureLoader, Vector2 as Vector2$1, PlaneGeometry, sRGBEncoding, Mesh, CurvePath, LineCurve3, TubeGeometry, ShaderMaterial, SphereGeometry, DoubleSide, RingGeometry, Quaternion, Euler } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
 import { Line as Line$1 } from '@realsee/five/line';
 import { SvelteComponent, init, safe_not_equal, append_styles, element, text, space, attr, set_style, toggle_class, insert, append, listen, set_data, noop as noop$1, detach, add_render_callback, add_resize_listener, group_outros, update_keyed_each, outro_and_destroy_block, check_outros, transition_in, transition_out, globals, empty, create_component, mount_component, destroy_component, src_url_equal, HtmlTag, binding_callbacks, assign, get_spread_update, destroy_block, destroy_each, svg_element, run_all, null_to_empty, create_in_transition } from 'svelte/internal';
 import { onDestroy, onMount, afterUpdate, beforeUpdate } from 'svelte';
 import { linear } from 'svelte/easing';
 import { fade } from 'svelte/transition';
 import { writable } from 'svelte/store';
-import { Subscribe, Five } from '@realsee/five';
+import { Subscribe as Subscribe$1, Five } from '@realsee/five';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
 import * as TWEEN from '@tweenjs/tween.js';
 import TWEEN__default from '@tweenjs/tween.js';
@@ -173,210 +173,811 @@ const ModelViewPlugin = (five) => {
     return { appendTo, refresh };
 };
 
-function evenNumber(num, config) {
-    const roundNum = Math.round(num);
-    return roundNum % 2 === 0 ? roundNum : roundNum + Number((config === null || config === void 0 ? void 0 : config.smaller) ? -1 : 1);
+function createSymbol(description) {
+    // @ts-ignore
+    return typeof Symbol === 'undefined' ? `$Symbol<${description}>$` : Symbol(description);
+}
+const EVENT_SYMBOL = createSymbol('$$EVENT$$');
+function __generateEventIfNotExisted(instance) {
+    if (!instance[EVENT_SYMBOL]) {
+        instance[EVENT_SYMBOL] = {};
+    }
+    return instance[EVENT_SYMBOL];
+}
+function __removeEventIfNotExisted(instance) {
+    if (!instance[EVENT_SYMBOL]) {
+        delete instance[EVENT_SYMBOL];
+    }
+}
+/**
+ * 监听者模式
+ * @template T - 预设的监听回调类型
+ * @example
+ * ```
+ * new Subscribe<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+class Subscribe {
+    /**
+     * 判断是否注册了事件
+     * @param name - 事件类型
+     */
+    hasListener(name) {
+        const events = __generateEventIfNotExisted(this);
+        return Boolean((events === null || events === void 0 ? void 0 : events[name]) && events[name].length > 0);
+    }
+    /**
+     * 注册事件
+     * @param name - 事件类型
+     * @param callback - 事件回调函数
+     * @param once - 是否只执行一次
+     * @returns 解除事件
+     * @template K - 预设的监听事件名称
+     * @template C - 回调函数函数上下文
+     */
+    on(name, callback, once) {
+        const events = __generateEventIfNotExisted(this);
+        if (!events[name])
+            events[name] = [];
+        events[name].push([callback, once || false]);
+        return () => this.off(name, callback);
+    }
+    /**
+     * 注册事件(是否只执行一次)
+     * @param name - 事件类型
+     * @param callback - 事件回调函数
+     * @returns 解除事件
+     * @template K - 预设的监听事件名称
+     * @template C - 回调函数函数上下文
+     */
+    once(name, callback) {
+        return this.on(name, callback, true);
+    }
+    /**
+     * 解除事件
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     * @param name - 事件类型
+     * @param callback - 事件回调函数
+     * @template K - 预设的监听事件名称
+     */
+    off(name, callback) {
+        if (name === undefined) {
+            __removeEventIfNotExisted(this);
+            return;
+        }
+        const events = __generateEventIfNotExisted(this);
+        if (!events[name])
+            events[name] = [];
+        if (callback === undefined) {
+            events[name].length = 0;
+            return;
+        }
+        let index = 0;
+        for (; index < events[name].length; index++) {
+            if (events[name][index][0] === callback)
+                break;
+        }
+        if (index < events[name].length) {
+            events[name].splice(index, 1);
+        }
+    }
+    /**
+     * 触发事件
+     * @param name - 事件类型
+     * @param data - 触发事件的数据
+     * @returns canceled 是否被触发取消
+     * @template K - 预设的监听事件名称
+     */
+    emit(name, ...data) {
+        let canceled = false;
+        const events = __generateEventIfNotExisted(this);
+        const event = events[name] || [];
+        for (let one of event.slice()) {
+            const [callback, once = false] = one;
+            const result = callback(...data);
+            if (once)
+                this.off(name, callback);
+            if (result === false)
+                canceled = true;
+        }
+        return canceled;
+    }
 }
 
 function centerPoint(point1, point2) {
     return new Vector3$1((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
 }
 
-const transformPositionToVector3 = ({ x, y, z }) => new Vector3$1(x, y, z);
+function evenNumber(num, config) {
+    const roundNum = Math.round(num);
+    return roundNum % 2 === 0 ? roundNum : roundNum + Number((config === null || config === void 0 ? void 0 : config.smaller) ? -1 : 1);
+}
 
-/**
- * @description: 究极简陋的 ResizeObserver polyfill
- */
-function createResizeObserver(func, element) {
-    if (!element || typeof ResizeObserver === 'undefined') {
-        return {
-            observe: () => window.addEventListener('resize', func),
-            unobserve: () => window.removeEventListener('resize', func),
-        };
-    }
-    else {
-        const observer = new ResizeObserver(func);
-        return {
-            observe: () => observer.observe(element),
-            unobserve: () => observer.unobserve(element),
-        };
-    }
+function random() {
+    return Math.random().toString(36).slice(-6);
 }
 
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-const CSS3DRenderPlugin = (five) => {
-    const state = { disposeCallbacks: [] };
-    const create3DDomContainer = (...params) => {
-        var _a, _b, _c;
-        const points = params[0].map((point) => (point instanceof Vector3$1 ? point : transformPositionToVector3(point)));
-        const config = params[1];
-        if ((points === null || points === void 0 ? void 0 : points.length) < 4)
-            return console.error('points must be equal or greater than than 4');
-        if (!((_a = five === null || five === void 0 ? void 0 : five.model) === null || _a === void 0 ? void 0 : _a.loaded))
-            return console.error('five.model.loaded is: ', (_b = five === null || five === void 0 ? void 0 : five.model) === null || _b === void 0 ? void 0 : _b.loaded);
-        const fiveElement = five.getElement();
-        if (!fiveElement)
-            return console.error('five.getElement() is ' + fiveElement);
-        const disposers = [];
-        const ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
-        if (ratio <= 0.00215)
-            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
-        const dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
-        const mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
-        const autoRender = (_c = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _c !== void 0 ? _c : true;
-        const behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
-        const container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
-        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
-        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
-        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
-        // ======= INIT START =======
-        let resizeObserver;
-        const frontModeUnInited = mode === 'front' && !state.frontMode;
-        const behindModeUnInited = mode === 'behind' && !state.behindMode;
-        const inited = !(frontModeUnInited || behindModeUnInited);
-        if (behindModeUnInited) {
-            state.behindMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
+const positionToVector3 = ({ x, y, z }) => new Vector3$1(x, y, z);
+const arrayPositionToVector3 = ([x, y, z]) => new Vector3$1(x, y, z);
+const anyPositionToVector3 = (position) => {
+    if (position instanceof Vector3$1)
+        return position;
+    else if (Array.isArray(position))
+        return arrayPositionToVector3(position);
+    else
+        return positionToVector3(position);
+};
+
+const VERSION$3 = '1.0.0';
+const NAME = `CSS3DObjectPlus@${VERSION$3}`;
+const MinRatio = 0.00216;
+const DefaultRatio = 0.003;
+class CSS3DObjectPlus extends CSS3DObject {
+    constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
+        const realRatio = Math.max(MinRatio, ratio);
+        const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
+        const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const centerPosition = centerPoint(cornerPoints[0], cornerPoints[2]);
+        let css3DObjectElement;
+        if (realRatio === ratio) {
+            container.style.width = `${domWidthPx}px`;
+            container.style.height = `${domHeightPx}px`;
+            css3DObjectElement = container;
         }
-        if (frontModeUnInited) {
-            state.frontMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
+        else {
+            // 兼容ratio小于0.00216的情况
+            const element = document.createElement('div');
+            element.style.width = `${domWidthPx}px`;
+            element.style.height = `${domHeightPx}px`;
+            element.style.pointerEvents = 'none';
+            const scale = ratio / realRatio;
+            container.style.position = 'absolute';
+            container.style.left = '0';
+            container.style.top = '0';
+            container.style.width = `${scale * domWidthPx}px`;
+            container.style.height = `${scale * domHeightPx}px`;
+            element.appendChild(container);
+            css3DObjectElement = element;
         }
-        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
-        const { scene, css3DRenderer } = stateMode;
-        const render = (() => {
-            if (!inited) {
-                const css3DRendererSetSize = () => {
-                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
-                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
-                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+        super(css3DObjectElement);
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION$3
+        });
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "domWidthPx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "domHeightPx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cornerPoints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "ratio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "centerPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.scale.set(realRatio, realRatio, realRatio);
+        // set public property
+        this.cornerPoints = cornerPoints;
+        this.ratio = ratio;
+        this.container = container;
+        if (realRatio === ratio) {
+            this.width = planeWidth;
+            this.height = planeHeight;
+            this.domWidthPx = domWidthPx;
+            this.domHeightPx = domHeightPx;
+            this.centerPosition = centerPosition;
+        }
+        else {
+            const scale = ratio / realRatio;
+            this.width = scale * planeWidth;
+            this.height = scale * planeHeight;
+            this.domWidthPx = scale * domWidthPx;
+            this.domHeightPx = scale * domHeightPx;
+            this.centerPosition = new Vector3$1()
+                .subVectors(centerPosition.clone(), cornerPoints[0].clone())
+                .multiplyScalar(scale)
+                .add(cornerPoints[0]);
+        }
+        // end
+        container.classList.add(`${NAME}__container`);
+        // 旋转前
+        const startVector01 = new Vector3$1(1, 0, 0); // dom初始01点向量
+        const startVector12 = new Vector3$1(0, 1, 0); // dom初始12点向量
+        // 旋转后
+        const endVector01 = new Vector3$1().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
+        const endVector12 = new Vector3$1().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
+        // 使Vector01重合
+        const vector01Quaternion = new THREE.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
+        this.applyQuaternion(vector01Quaternion);
+        startVector12.applyQuaternion(vector01Quaternion);
+        // 使Vector12重合
+        const vector12Quaternion = new THREE.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
+        this.applyQuaternion(vector12Quaternion);
+        // set position
+        this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+    }
+}
+
+const VERSION$2 = 'v1.1.0';
+const PLUGIN_NAME$3 = 'CSS3DRenderer';
+const PLUGIN$2 = `${PLUGIN_NAME$3}@${VERSION$2}`;
+const pluginFlag$1 = (name) => `${PLUGIN$2}--${name}`;
+const globalStore = {};
+class CSS3DRender {
+    constructor() {
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                enabled: true,
+                visible: true,
+                disposed: false,
+            }
+        });
+        Object.defineProperty(this, "store", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                disposers: [],
+                frontModeCSS3DObjects: {},
+                behindModeCSS3DObjects: {},
+            }
+        });
+        /**
+         * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+         * @param { Vector3Position[] } points 矩形四个点坐标
+         * @param config 均为可选值
+         * @config_document `config` 均为可选值
+         *  | key                   | type                       | defaultValue        | comment |
+         *  | -                     | -                          | -                   | -       |
+         *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+         *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+         *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+         *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+         *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+         *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+         *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+         *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
+         *
+         * @return
+         * ```typescript
+         *    {
+         *      id: string,                             // id
+         *      container: HTMLDIVElement               // dom容器
+         *      dispose: () => void                     // 销毁
+         *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+         *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+         *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+         *      show: () => void                        // 同 setVisible(true)
+         *      hide: () => void                        // 同 setVisible(false)
+         *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
+         *      enable: () => void                      // 同 setEnabled(true)
+         *      disable: () => void                     // 同 setEnabled(false)
+         *    } | void
+         * ```
+         */
+        Object.defineProperty(this, "create3DElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (camera, points, config) => {
+                if (this.state.disposed)
+                    return this.disposedErrorLog();
+                // ==== init ====
+                const mergeConfig = (() => {
+                    const defaultConfig = {
+                        ratio: 0.00216,
+                        devicePixelRatio: 1,
+                        mode: 'front',
+                        autoRender: true,
+                        container: document.createElement('div'),
+                        pointerEvents: 'none',
+                    };
+                    return Object.assign(defaultConfig, config);
+                })();
+                const vector3Points = points.map(anyPositionToVector3);
+                if ((vector3Points === null || vector3Points === void 0 ? void 0 : vector3Points.length) < 4)
+                    return console.error(`${PLUGIN$2}: requires 4 point but params may have fewer`);
+                const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents } = mergeConfig;
+                const disposers = [];
+                // ==== init END ====
+                // 获取css3DObject, 如果mode为behind的话，也一起获取mesh
+                const { css3DObject, opacityMesh } = this.createObject(vector3Points, {
+                    ratio,
+                    dpr,
+                    container,
+                    mode,
+                    pointerEvents,
+                });
+                container.id = `container--${css3DObject.uuid}`;
+                const frontModeAndFrontModeUnInited = mode === 'front' && !globalStore.frontModeStore;
+                const behindModeAndBehindModeUnInited = mode === 'behind' && !globalStore.behindModeStore;
+                if (behindModeAndBehindModeUnInited) {
+                    globalStore.behindModeStore = {
+                        scene: mergeConfig.scene,
+                        css3DScene: new THREE.Scene(),
+                        css3DRenderer: new CSS3DRenderer(),
+                    };
+                }
+                if (frontModeAndFrontModeUnInited) {
+                    globalStore.frontModeStore = { css3DScene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer() };
+                }
+                const modeStore = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+                const { css3DScene, css3DRenderer } = modeStore;
+                const render = (() => {
+                    const renderCSS3DObject = () => {
+                        if (mode === 'front') {
+                            this.store.frontModeCSS3DObjects[css3DObject.uuid] = {
+                                visible: true,
+                                enabled: true,
+                                css3DObject,
+                                mode: 'front',
+                            };
+                        }
+                        else {
+                            this.store.behindModeCSS3DObjects[css3DObject.uuid] = {
+                                visible: true,
+                                enabled: true,
+                                css3DObject,
+                                opacityMesh: opacityMesh,
+                                mode: 'behind',
+                                scene: mergeConfig.scene,
+                            };
+                        }
+                        css3DScene.add(css3DObject);
+                        if (mode === 'behind' && opacityMesh) {
+                            mergeConfig.scene.add(opacityMesh);
+                            disposers.push(() => opacityMesh && mergeConfig.scene.remove(opacityMesh));
+                        }
+                    };
+                    if (frontModeAndFrontModeUnInited || behindModeAndBehindModeUnInited) {
+                        css3DRenderer.domElement.style.position = 'absolute';
+                        css3DRenderer.domElement.style.top = '0';
+                        css3DRenderer.domElement.style.userSelect = 'none';
+                        css3DRenderer.domElement.style.pointerEvents = 'none';
+                        css3DRenderer.domElement.classList.add(pluginFlag$1(mode));
+                        const renderEveryFrame = () => {
+                            const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                            modeStore.requestAnimationFrameId = requestAnimationFrameId;
+                            css3DRenderer.render(css3DScene, camera);
+                        };
+                        return () => {
+                            renderCSS3DObject();
+                            renderEveryFrame();
+                        };
+                    }
+                    return () => renderCSS3DObject();
+                })();
+                const wrapper = mode === 'front' ? globalStore.frontModeContainer : globalStore.behindModeContainer;
+                if (wrapper) {
+                    this.appendToElement(wrapper, mode);
+                    const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+                    if (store)
+                        store.appendedToPage = true;
+                }
+                const setVisible = (visible) => this.setVisibleById(css3DObject.uuid, visible);
+                const setEnabled = (enabled) => this.setEnabledById(css3DObject.uuid, enabled);
+                const show = () => setVisible(true);
+                const hide = () => setVisible(false);
+                const enable = () => setEnabled(true);
+                const disable = () => setEnabled(false);
+                const dispose = () => {
+                    delete this.store.frontModeCSS3DObjects[css3DObject.uuid];
+                    delete this.store.behindModeCSS3DObjects[css3DObject.uuid];
+                    disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
+                    css3DScene.remove(css3DObject);
+                    // 如果全没了，就清除父容器
+                    if (css3DScene.children.length === 0) {
+                        if (typeof modeStore.requestAnimationFrameId === 'number') {
+                            cancelAnimationFrame(modeStore.requestAnimationFrameId);
+                        }
+                        css3DRenderer.domElement.remove();
+                        if (mode === 'front')
+                            globalStore.frontModeStore = undefined;
+                        if (mode === 'behind')
+                            globalStore.behindModeStore = undefined;
+                    }
+                    return true;
                 };
-                css3DRendererSetSize();
-                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
-                css3DRenderer.domElement.style.position = 'absolute';
-                css3DRenderer.domElement.style.top = '0';
-                css3DRenderer.domElement.style.userSelect = 'none';
-                css3DRenderer.domElement.style.pointerEvents = 'none';
-                const renderEveryFrame = () => {
-                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
-                    css3DRenderer.render(scene, five.camera);
+                this.store.disposers.push(dispose);
+                if (autoRender)
+                    render();
+                return {
+                    id: css3DObject.uuid,
+                    container,
+                    dispose,
+                    css3DObject,
+                    render: autoRender ? undefined : render,
+                    show,
+                    hide,
+                    setVisible,
+                    disable,
+                    enable,
+                    setEnabled,
+                    appendToElement: (container) => this.appendToElement(container, mode),
                 };
-                return () => {
-                    var _a;
-                    scene.add(css3DObject);
-                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                    renderEveryFrame();
-                    if (mode === 'behind' && mesh) {
-                        five.scene.add(mesh);
-                        disposers.push(() => mesh && five.scene.remove(mesh));
+            }
+        });
+        Object.defineProperty(this, "setVisibleById", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id, visible) => {
+                var _a;
+                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
+                if (!data)
+                    return;
+                data.css3DObject.visible = visible;
+                data.visible = visible;
+                if (data.mode === 'behind')
+                    data.opacityMesh.visible = visible;
+            }
+        });
+        Object.defineProperty(this, "setEnabledById", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (id, enabled) => {
+                var _a, _b, _c;
+                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
+                if (!data)
+                    return;
+                const css3DScene = data.mode === 'front' ? (_b = globalStore.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalStore.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
+                if (!css3DScene)
+                    return;
+                if (enabled) {
+                    css3DScene.add(data.css3DObject);
+                    if (data.mode === 'behind')
+                        data.scene.add(data.opacityMesh);
+                }
+                else {
+                    css3DScene.remove(data.css3DObject);
+                    if (data.mode === 'behind')
+                        data.scene.remove(data.opacityMesh);
+                }
+                data.enabled = enabled;
+            }
+        });
+        Object.defineProperty(this, "createObject", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points, config) => {
+                const { ratio, dpr, container, mode, pointerEvents } = config;
+                const css3DObject = new CSS3DObjectPlus(container, points, ratio, dpr);
+                container.style.pointerEvents = pointerEvents;
+                container.classList.add(`${PLUGIN_NAME$3}__container`);
+                const { domWidthPx, domHeightPx } = css3DObject;
+                // 生成透明Mesh
+                const opacityMesh = (() => {
+                    if (mode === 'behind') {
+                        const material = new THREE.MeshBasicMaterial({
+                            opacity: 0,
+                            transparent: false,
+                            side: THREE.DoubleSide,
+                        });
+                        const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
+                        const mesh = new THREE.Mesh(geometry, material);
+                        mesh.name = pluginFlag$1('mesh');
+                        mesh.position.copy(css3DObject.position);
+                        mesh.rotation.copy(css3DObject.rotation);
+                        mesh.scale.copy(css3DObject.scale);
+                        return mesh;
                     }
-                };
+                })();
+                return { css3DObject, opacityMesh };
             }
-            else {
-                return () => {
-                    scene.add(css3DObject);
+        });
+        Object.defineProperty(this, "createResizeObserver", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (element, resizeHandler, fireImmediately = true) => {
+                if (!element || !ResizeObserver)
+                    return { observe: () => { }, unobserve: () => { } };
+                const resizeObserverHandler = () => {
+                    /**
+                     * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                     * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                     */
+                    const width = evenNumber(element.clientWidth, { smaller: true });
+                    const height = evenNumber(element.clientHeight, { smaller: true });
+                    resizeHandler(width, height);
+                };
+                const observer = new ResizeObserver(resizeObserverHandler);
+                if (fireImmediately)
+                    resizeObserverHandler();
+                return {
+                    observe: () => observer.observe(element),
+                    unobserve: () => observer.unobserve(element),
                 };
             }
-        })();
-        if (frontModeUnInited) {
-            const wrapper = fiveElement.parentElement || document.body;
-            wrapper.appendChild(css3DRenderer.domElement);
+        });
+        Object.defineProperty(this, "disposedErrorLog", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                console.error(`${PLUGIN$2} is disposed`);
+            }
+        });
+    }
+    getCurrentState() {
+        return this.state;
+    }
+    setState(state, options = { userAction: true }) {
+        if (this.state.disposed)
+            return this.disposedErrorLog();
+        const prevState = Object.assign({}, this.state);
+        this.state = Object.assign(this.state, state);
+        if (prevState.visible !== this.state.visible) {
+            state.visible ? this.handleShow() : this.handleHide();
         }
-        if (behindModeUnInited) {
-            const wrapper = behindFiveContainer;
-            wrapper.appendChild(css3DRenderer.domElement);
+        if (prevState.enabled !== this.state.enabled) {
+            state.enabled ? this.handleEnable() : this.handleDisable();
         }
-        // ======= INIT END =======
-        const dispose = () => {
-            var _a;
-            disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
-            scene.remove(css3DObject);
-            if (scene.children.length === 0) {
-                if (typeof stateMode.requestAnimationFrameId === 'number') {
-                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
-                }
-                css3DRenderer.domElement.remove();
-                if (mode === 'front')
-                    state.frontMode = undefined;
-                if (mode === 'behind')
-                    state.behindMode = undefined;
-                if (!state.behindMode && !state.frontMode) {
-                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                }
-            }
-            return true;
-        };
-        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
-        if (idx !== -1) {
-            state.disposeCallbacks.splice(idx, 1);
+        this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction });
+    }
+    dispose() {
+        this.store.disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
+        this.store.disposers = [];
+        this.hooks.emit('dispose');
+        this.state.disposed = true;
+    }
+    async show({ userAction } = { userAction: true }) {
+        if (this.state.disposed)
+            return this.disposedErrorLog();
+        this.setState({ visible: true }, { userAction });
+        this.hooks.emit('show', { userAction });
+    }
+    async hide({ userAction } = { userAction: true }) {
+        if (this.state.disposed)
+            return this.disposedErrorLog();
+        this.setState({ visible: false }, { userAction });
+        this.hooks.emit('hide', { userAction });
+    }
+    enable({ userAction } = { userAction: true }) {
+        if (this.state.disposed)
+            return this.disposedErrorLog();
+        this.setState({ enabled: true }, { userAction });
+        this.hooks.emit('enable', { userAction });
+    }
+    disable({ userAction } = { userAction: true }) {
+        if (this.state.disposed)
+            return this.disposedErrorLog();
+        this.setState({ enabled: false }, { userAction });
+        this.hooks.emit('disable', { userAction });
+    }
+    appendToElement(container, mode) {
+        if (!container)
+            throw new Error(`${PLUGIN$2} Cannot append to container: container is ${container}`);
+        const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+        if (!store) {
+            if (mode === 'front')
+                globalStore.frontModeContainer = container;
+            if (mode === 'behind')
+                globalStore.behindModeContainer = container;
+            return;
         }
-        else {
-            state.disposeCallbacks.push(dispose);
+        if (store.appendedToPage)
+            return;
+        container.appendChild(store.css3DRenderer.domElement);
+        if (!globalStore.resizeObserver) {
+            const { observe, unobserve } = this.createResizeObserver(container, store.css3DRenderer.setSize, true);
+            globalStore.resizeObserver = { observe, unobserve };
+            observe();
+            this.store.disposers.push(unobserve);
         }
-        if (autoRender)
-            render();
-        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
-    };
-    const createObject = (points, config) => {
-        const { ratio, dpr, container: element, mode } = config;
-        const planeWidth = points[0].distanceTo(points[1]);
-        const planeHeight = points[1].distanceTo(points[2]);
-        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
-        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
-        const css3DObject = new CSS3DObject(element);
-        css3DObject.scale.set(ratio, ratio, ratio);
-        element.style.width = domWidthPx + 'px';
-        element.style.height = domHeightPx + 'px';
-        element.style.pointerEvents = 'none';
-        const centerPosition = centerPoint(points[0], points[2]);
-        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
-        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
-        // 旋转
-        const rotateXAngle = new Vector3$1(0, 1, 0).angleTo(new Vector3$1(0, vector12.y, vector12.z));
-        const rotateYAngle = new Vector3$1(1, 0, 0).angleTo(new Vector3$1(vector01.x, 0, vector01.z));
-        const rotateZAngle = vector01.angleTo(new Vector3$1(vector01.x, 0, vector01.z));
+        store.appendedToPage = true;
+    }
+    async handleShow() {
+        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+            value.css3DObject.visible = value.visible;
+        });
+        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+            value.css3DObject.visible = value.visible;
+            value.opacityMesh.visible = value.visible;
+        });
+    }
+    async handleHide() {
+        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+            value.css3DObject.visible = false;
+        });
+        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+            value.css3DObject.visible = false;
+            value.opacityMesh.visible = false;
+        });
+    }
+    handleEnable() {
+        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+            var _a;
+            if (!value.enabled)
+                return;
+            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+        });
+        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+            var _a, _b;
+            if (!value.enabled)
+                return;
+            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.add(value.opacityMesh);
+        });
+    }
+    handleDisable() {
+        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
+            var _a;
+            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+        });
+        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
+            var _a, _b;
+            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.remove(value.opacityMesh);
+        });
+    }
+}
+
+const PLUGIN_NAME$2 = `CSS3DRenderPlugin-${random()}@${VERSION$2}`;
+class Controller$8 extends CSS3DRender {
+    constructor(five) {
+        super();
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         /**
-         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
-         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
-         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+         * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+         * @param { Vector3Position[] } points 矩形四个点坐标
+         * @param config 均为可选值
+         * @config_document `config` 均为可选值
+         *  | key                   | type                       | defaultValue        | comment |
+         *  | -                     | -                          | -                   | -       |
+         *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+         *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
+         *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+         *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+         *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+         *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+         *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+         *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+         *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
+         *
+         * @return
+         * ```typescript
+         *    {
+         *      id: string,                             // id
+         *      container: HTMLDIVElement               // dom容器
+         *      dispose: () => void                     // 销毁
+         *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+         *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+         *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+         *      show: () => void                        // 同 setVisible(true)
+         *      hide: () => void                        // 同 setVisible(false)
+         *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)
+         *      enable: () => void                      // 同 setEnabled(true)
+         *      disable: () => void                     // 同 setEnabled(false)
+         *    } | void
+         * ```
          */
-        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
-        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
-        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
-        css3DObject.rotateOnWorldAxis(new Vector3$1(1, 0, 0), rotateX); // x
-        css3DObject.rotateOnWorldAxis(new Vector3$1(0, 1, 0), rotateY); // y
-        css3DObject.rotateOnWorldAxis(new Vector3$1(0, 0, 1), rotateZ); // z
-        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-        let mesh;
-        if (mode === 'behind') {
-            const material = new THREE.MeshBasicMaterial({
-                opacity: 0,
-                transparent: false,
-                side: THREE.DoubleSide,
-            });
-            const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
-            mesh = new THREE.Mesh(geometry, material);
-            mesh.name = 'CSS3DRenderPlugin-mesh';
-            mesh.position.copy(css3DObject.position);
-            mesh.rotation.copy(css3DObject.rotation);
-            mesh.scale.copy(css3DObject.scale);
-        }
-        return { css3DObject, mesh };
-    };
-    return {
-        create3DDomContainer,
-        disposeAll: () => {
-            state.disposeCallbacks.forEach((d) => d === null || d === void 0 ? void 0 : d());
-            state.disposeCallbacks = [];
-        },
-    };
-};
+        Object.defineProperty(this, "create3DDomContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points, config) => {
+                if (this.state.disposed)
+                    return;
+                // ==== init ====
+                const mergeConfig = (() => {
+                    var _a;
+                    if ((config === null || config === void 0 ? void 0 : config.dpr) !== undefined)
+                        console.warn(`${PLUGIN_NAME$2}: please use "config.devicePixelRatio" replace "config.dpr"`);
+                    const defaultconfig = {
+                        ratio: 0.00216,
+                        devicePixelRatio: (_a = config === null || config === void 0 ? void 0 : config.dpr) !== null && _a !== void 0 ? _a : 1,
+                        mode: 'front',
+                        autoRender: true,
+                    };
+                    return Object.assign(defaultconfig, config, (config === null || config === void 0 ? void 0 : config.mode) === 'behind' ? { scene: this.five.scene } : undefined);
+                })();
+                const fiveElement = this.five.getElement();
+                if (!fiveElement)
+                    return console.error(`${PLUGIN_NAME$2}: five.getElement() is ${fiveElement}`);
+                const { autoRender, mode } = mergeConfig;
+                // 自动添加dom
+                const wrapper = mode === 'front' ? fiveElement.parentElement : mergeConfig.behindFiveContainer;
+                this.appendToElement(wrapper || document.body, mode);
+                const create3DElementResault = this.create3DElement(this.five.camera, points, Object.assign(Object.assign({}, mergeConfig), { autoRender: false }));
+                if (!create3DElementResault)
+                    return;
+                const oldRender = create3DElementResault.render;
+                const newRender = () => {
+                    var _a;
+                    if (mode === 'front') {
+                        oldRender();
+                    }
+                    if (mode === 'behind') {
+                        if ((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded)
+                            oldRender();
+                        else
+                            this.five.once('modelLoaded', () => oldRender());
+                    }
+                };
+                if (autoRender)
+                    newRender();
+                return Object.assign(Object.assign({}, create3DElementResault), { render: autoRender ? undefined : newRender });
+            }
+        });
+        this.five = five;
+    }
+    /** @deprecated disposeAll() renamed as dispose() */
+    disposeAll() {
+        return this.dispose();
+    }
+    setState(...params) {
+        const result = super.setState(...params);
+        this.five.needsRender = true;
+        return result;
+    }
+}
+
+const CSS3DRenderPlugin = (five) => new Controller$8(five);
 
 function createLine$1(point1, point2, color = new Vector3$1(1, 1, 1), dashed = false) {
     const line = new Line$1(point1, point2);
@@ -1654,7 +2255,7 @@ function add_css$j(target) {
 	append_styles(target, "svelte-12pzct5", ".floorplan-plugin__room-label-item.svelte-12pzct5{position:absolute;display:flex;flex-flow:column;align-items:center;line-height:1;color:#fff;transform:translate(-50%, -50%);white-space:nowrap;will-change:opacity;transition:opacity 300ms}.floorplan-plugin__room-size.svelte-12pzct5{opacity:0.45}");
 }
 
-// (96:30) 
+// (95:30) 
 function create_if_block_1$5(ctx) {
 	let html_tag;
 	let raw_value = /*userConfigElement*/ ctx[4].outerHTML + "";
@@ -1680,14 +2281,13 @@ function create_if_block_1$5(ctx) {
 	};
 }
 
-// (90:2) {#if getLabelElement === undefined}
+// (89:2) {#if getLabelElement === undefined}
 function create_if_block$9(ctx) {
 	let span0;
 	let t0_value = /*room*/ ctx[0].name + "";
 	let t0;
 	let t1;
 	let span1;
-	let t2;
 
 	return {
 		c() {
@@ -1695,7 +2295,7 @@ function create_if_block$9(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			span1 = element("span");
-			t2 = text(/*roomSizeDes*/ ctx[5]);
+			span1.textContent = `${/*roomSizeDes*/ ctx[5]}`;
 			attr(span0, "class", "floorplan-plugin__room-name");
 			attr(span1, "class", "floorplan-plugin__room-size svelte-12pzct5");
 		},
@@ -1704,11 +2304,9 @@ function create_if_block$9(ctx) {
 			append(span0, t0);
 			insert(target, t1, anchor);
 			insert(target, span1, anchor);
-			append(span1, t2);
 		},
 		p(ctx, dirty) {
 			if (dirty & /*room*/ 1 && t0_value !== (t0_value = /*room*/ ctx[0].name + "")) set_data(t0, t0_value);
-			if (dirty & /*roomSizeDes*/ 32) set_data(t2, /*roomSizeDes*/ ctx[5]);
 		},
 		d(detaching) {
 			if (detaching) detach(span0);
@@ -1742,7 +2340,7 @@ function create_fragment$o(ctx) {
 		m(target, anchor) {
 			insert(target, div, anchor);
 			if (if_block) if_block.m(div, null);
-			/*div_binding*/ ctx[16](div);
+			/*div_binding*/ ctx[15](div);
 		},
 		p(ctx, [dirty]) {
 			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block) {
@@ -1770,7 +2368,7 @@ function create_fragment$o(ctx) {
 				if_block.d();
 			}
 
-			/*div_binding*/ ctx[16](null);
+			/*div_binding*/ ctx[15](null);
 		}
 	};
 }
@@ -1793,14 +2391,12 @@ function isPointInPolygon(point, polygon) {
 }
 
 function instance$o($$self, $$props, $$invalidate) {
-	let roomSizeDes;
 	let isLabelInRoom;
 	let userConfigElement;
 	let labelVisible;
 	let { pxmm } = $$props;
 	let { room } = $$props;
 	let { hoveredRoom } = $$props;
-	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
@@ -1840,6 +2436,7 @@ function instance$o($$self, $$props, $$invalidate) {
 	const bodyWidth = document.body.clientWidth;
 
 	const bodyHeight = document.body.clientHeight;
+	const roomSizeDes = room.size ? (room.size / 1000000).toFixed(1) + '㎡' : '';
 
 	// ====================================
 	const roomLabel = room.roomLabel;
@@ -1855,7 +2452,7 @@ function instance$o($$self, $$props, $$invalidate) {
 	let labelElementSize;
 
 	hoveredRoom.subscribe(function onHoverdRoomUpdate(_room) {
-		$$invalidate(13, isHoverd = !!_room && _room.id === room.id);
+		$$invalidate(12, isHoverd = !!_room && _room.id === room.id);
 	});
 
 	onMount(() => {
@@ -1865,7 +2462,7 @@ function instance$o($$self, $$props, $$invalidate) {
 		? void 0
 		: labelElement.getClientRects()[0];
 
-		$$invalidate(14, labelElementSize = {
+		$$invalidate(13, labelElementSize = {
 			width: labelDomRect.width,
 			height: labelDomRect.height
 		});
@@ -1882,18 +2479,13 @@ function instance$o($$self, $$props, $$invalidate) {
 		if ('pxmm' in $$props) $$invalidate(9, pxmm = $$props.pxmm);
 		if ('room' in $$props) $$invalidate(0, room = $$props.room);
 		if ('hoveredRoom' in $$props) $$invalidate(10, hoveredRoom = $$props.hoveredRoom);
-		if ('getRoomAreaText' in $$props) $$invalidate(11, getRoomAreaText = $$props.getRoomAreaText);
 		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
-		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(12, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(11, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*room, getRoomAreaText*/ 2049) {
-			$$invalidate(5, roomSizeDes = room.size ? getRoomAreaText(room.size) : '');
-		}
-
-		if ($$self.$$.dirty & /*labelElementSize, room*/ 16385) {
-			$$invalidate(15, isLabelInRoom = labelElementSize
+		if ($$self.$$.dirty & /*labelElementSize, room*/ 8193) {
+			$$invalidate(14, isLabelInRoom = labelElementSize
 			? isLabelInRoomCurry(room, labelElementSize)
 			: undefined);
 		}
@@ -1904,7 +2496,7 @@ function instance$o($$self, $$props, $$invalidate) {
 			: getLabelElement(room));
 		}
 
-		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 45568) {
+		if ($$self.$$.dirty & /*adaptiveRoomLabelVisibleEnable, isHoverd, isLabelInRoom, pxmm*/ 23040) {
 			$$invalidate(3, labelVisible = adaptiveRoomLabelVisibleEnable
 			? isHoverd
 				? true
@@ -1927,7 +2519,6 @@ function instance$o($$self, $$props, $$invalidate) {
 		fontSize,
 		pxmm,
 		hoveredRoom,
-		getRoomAreaText,
 		adaptiveRoomLabelVisibleEnable,
 		isHoverd,
 		labelElementSize,
@@ -1950,9 +2541,8 @@ class RoomLabel extends SvelteComponent {
 				pxmm: 9,
 				room: 0,
 				hoveredRoom: 10,
-				getRoomAreaText: 11,
 				getLabelElement: 1,
-				adaptiveRoomLabelVisibleEnable: 12
+				adaptiveRoomLabelVisibleEnable: 11
 			},
 			add_css$j
 		);
@@ -1967,19 +2557,19 @@ function add_css$i(target) {
 
 function get_each_context$b(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[10] = list[i];
+	child_ctx[9] = list[i];
 	return child_ctx;
 }
 
-// (18:0) {#if rooms}
+// (17:0) {#if rooms}
 function create_if_block$8(ctx) {
 	let div;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let div_resize_listener;
 	let current;
-	let each_value = /*rooms*/ ctx[6];
-	const get_key = ctx => /*room*/ ctx[10].id;
+	let each_value = /*rooms*/ ctx[5];
+	const get_key = ctx => /*room*/ ctx[9].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$b(ctx, each_value, i);
@@ -1996,7 +2586,7 @@ function create_if_block$8(ctx) {
 			}
 
 			attr(div, "class", "floorplan-plugin__room-labels svelte-13xux0b");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[8].call(div));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2005,12 +2595,12 @@ function create_if_block$8(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[8].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*pxmm, rooms, getLabelElement, getRoomAreaText, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 111) {
-				each_value = /*rooms*/ ctx[6];
+			if (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55) {
+				each_value = /*rooms*/ ctx[5];
 				group_outros();
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block$b, null, get_each_context$b);
 				check_outros();
@@ -2044,7 +2634,7 @@ function create_if_block$8(ctx) {
 	};
 }
 
-// (20:4) {#each rooms as room (room.id)}
+// (19:4) {#each rooms as room (room.id)}
 function create_each_block$b(key_1, ctx) {
 	let first;
 	let roomlabel;
@@ -2052,12 +2642,11 @@ function create_each_block$b(key_1, ctx) {
 
 	const roomlabel_spread_levels = [
 		{
-			pxmm: /*pxmm*/ ctx[5],
-			room: /*room*/ ctx[10],
-			getLabelElement: /*getLabelElement*/ ctx[2],
-			getRoomAreaText: /*getRoomAreaText*/ ctx[1],
+			pxmm: /*pxmm*/ ctx[4],
+			room: /*room*/ ctx[9],
+			getLabelElement: /*getLabelElement*/ ctx[1],
 			hoveredRoom: /*hoveredRoom*/ ctx[0],
-			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[3]
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
 		}
 	];
 
@@ -2085,15 +2674,14 @@ function create_each_block$b(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const roomlabel_changes = (dirty & /*pxmm, rooms, getLabelElement, getRoomAreaText, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 111)
+			const roomlabel_changes = (dirty & /*pxmm, rooms, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 55)
 			? get_spread_update(roomlabel_spread_levels, [
 					{
-						pxmm: /*pxmm*/ ctx[5],
-						room: /*room*/ ctx[10],
-						getLabelElement: /*getLabelElement*/ ctx[2],
-						getRoomAreaText: /*getRoomAreaText*/ ctx[1],
+						pxmm: /*pxmm*/ ctx[4],
+						room: /*room*/ ctx[9],
+						getLabelElement: /*getLabelElement*/ ctx[1],
 						hoveredRoom: /*hoveredRoom*/ ctx[0],
-						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[3]
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[2]
 					}
 				])
 			: {};
@@ -2119,7 +2707,7 @@ function create_each_block$b(key_1, ctx) {
 function create_fragment$n(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*rooms*/ ctx[6] && create_if_block$8(ctx);
+	let if_block = /*rooms*/ ctx[5] && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -2132,11 +2720,11 @@ function create_fragment$n(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*rooms*/ ctx[6]) {
+			if (/*rooms*/ ctx[5]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*rooms*/ 64) {
+					if (dirty & /*rooms*/ 32) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -2176,7 +2764,6 @@ function instance$n($$self, $$props, $$invalidate) {
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
 	let { hoveredRoom } = $$props;
-	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 	let clientWidth = 0;
@@ -2184,35 +2771,33 @@ function instance$n($$self, $$props, $$invalidate) {
 
 	function div_elementresize_handler() {
 		clientWidth = this.clientWidth;
-		$$invalidate(4, clientWidth);
+		$$invalidate(3, clientWidth);
 	}
 
 	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(7, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(8, floorplanData = $$props.floorplanData);
+		if ('floorIndex' in $$props) $$invalidate(6, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(7, floorplanData = $$props.floorplanData);
 		if ('hoveredRoom' in $$props) $$invalidate(0, hoveredRoom = $$props.hoveredRoom);
-		if ('getRoomAreaText' in $$props) $$invalidate(1, getRoomAreaText = $$props.getRoomAreaText);
-		if ('getLabelElement' in $$props) $$invalidate(2, getLabelElement = $$props.getLabelElement);
-		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(3, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
+		if ('getLabelElement' in $$props) $$invalidate(1, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(2, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 384) {
-			$$invalidate(6, rooms = floorplanData.floorDatas[floorIndex].rooms);
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 192) {
+			$$invalidate(5, rooms = floorplanData.floorDatas[floorIndex].rooms);
 		}
 
-		if ($$self.$$.dirty & /*floorplanData, clientWidth*/ 272) {
+		if ($$self.$$.dirty & /*floorplanData, clientWidth*/ 136) {
 			{
 				const { max, min } = floorplanData.bounding;
 				const boundingWidth = max.x - min.x;
-				$$invalidate(5, pxmm = clientWidth / boundingWidth);
+				$$invalidate(4, pxmm = clientWidth / boundingWidth);
 			}
 		}
 	};
 
 	return [
 		hoveredRoom,
-		getRoomAreaText,
 		getLabelElement,
 		adaptiveRoomLabelVisibleEnable,
 		clientWidth,
@@ -2235,12 +2820,11 @@ class RoomLabels extends SvelteComponent {
 			create_fragment$n,
 			safe_not_equal,
 			{
-				floorIndex: 7,
-				floorplanData: 8,
+				floorIndex: 6,
+				floorplanData: 7,
 				hoveredRoom: 0,
-				getRoomAreaText: 1,
-				getLabelElement: 2,
-				adaptiveRoomLabelVisibleEnable: 3
+				getLabelElement: 1,
+				adaptiveRoomLabelVisibleEnable: 2
 			},
 			add_css$i
 		);
@@ -2255,18 +2839,18 @@ function add_css$h(target) {
 
 function get_each_context$a(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[11] = list[i];
-	child_ctx[13] = i;
+	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[14] = list[i];
+	child_ctx[13] = list[i];
 	return child_ctx;
 }
 
-// (48:4) {#each rulerLabels as rulerLabel}
+// (47:4) {#each rulerLabels as rulerLabel}
 function create_each_block_1(ctx) {
 	let div;
 
@@ -2274,8 +2858,8 @@ function create_each_block_1(ctx) {
 		c() {
 			div = element("div");
 			attr(div, "class", "floorplan-plugin__rule-scale svelte-xt7p1v");
-			set_style(div, "left", /*rulerLabel*/ ctx[14].left * 100 + '%', false);
-			set_style(div, "bottom", /*rulerLabel*/ ctx[14].bottom * 100 + '%', false);
+			set_style(div, "left", /*rulerLabel*/ ctx[13].left * 100 + '%', false);
+			set_style(div, "bottom", /*rulerLabel*/ ctx[13].bottom * 100 + '%', false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2287,11 +2871,11 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (57:4) {#each rulerTexts as textItem, textItemIndex (textItemIndex)}
+// (56:4) {#each rulerTexts as textItem, textItemIndex (textItemIndex)}
 function create_each_block$a(key_1, ctx) {
 	let div1;
 	let div0;
-	let t0_value = /*getRuleDistanceText*/ ctx[1](/*textItem*/ ctx[11].distance) + "";
+	let t0_value = /*textItem*/ ctx[10].distance + "";
 	let t0;
 	let t1;
 
@@ -2304,10 +2888,10 @@ function create_each_block$a(key_1, ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			attr(div0, "class", "floorplan-plugin__rule-text svelte-xt7p1v");
-			toggle_class(div0, "is-row", /*isRow*/ ctx[2]);
+			toggle_class(div0, "is-row", /*isRow*/ ctx[1]);
 			attr(div1, "class", "floorplan-plugin__rule-text-item svelte-xt7p1v");
-			set_style(div1, "left", /*textItem*/ ctx[11].left * 100 + '%', false);
-			set_style(div1, "bottom", /*textItem*/ ctx[11].bottom * 100 + '%', false);
+			set_style(div1, "left", /*textItem*/ ctx[10].left * 100 + '%', false);
+			set_style(div1, "bottom", /*textItem*/ ctx[10].bottom * 100 + '%', false);
 			this.first = div1;
 		},
 		m(target, anchor) {
@@ -2318,7 +2902,6 @@ function create_each_block$a(key_1, ctx) {
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			if (dirty & /*getRuleDistanceText*/ 2 && t0_value !== (t0_value = /*getRuleDistanceText*/ ctx[1](/*textItem*/ ctx[11].distance) + "")) set_data(t0, t0_value);
 		},
 		d(detaching) {
 			if (detaching) detach(div1);
@@ -2336,15 +2919,15 @@ function create_fragment$m(ctx) {
 	let each_blocks = [];
 	let each1_lookup = new Map();
 	let div3_class_value;
-	let each_value_1 = /*rulerLabels*/ ctx[3];
+	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[4];
-	const get_key = ctx => /*textItemIndex*/ ctx[13];
+	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$a(ctx, each_value, i);
@@ -2372,12 +2955,12 @@ function create_fragment$m(ctx) {
 
 			attr(div0, "class", "floorplan-plugin__rule-line svelte-xt7p1v");
 			attr(div1, "class", "floorplan-plugin__rule-scale-wrapper svelte-xt7p1v");
-			toggle_class(div1, "is-row", /*isRow*/ ctx[2]);
+			toggle_class(div1, "is-row", /*isRow*/ ctx[1]);
 			attr(div2, "class", "floorplan-plugin__rule-text-wrapper svelte-xt7p1v");
 			attr(div3, "class", div3_class_value = "floorplan-plugin__rule-labels floorplan-plugin__rule-labels--" + /*type*/ ctx[0] + " svelte-xt7p1v");
-			toggle_class(div3, "is-row", /*isRow*/ ctx[2]);
-			set_style(div3, "width", /*isRow*/ ctx[2] ? '100%' : 1 / 16 + 'rem', false);
-			set_style(div3, "height", !/*isRow*/ ctx[2] ? '100%' : 1 / 16 + 'rem', false);
+			toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
+			set_style(div3, "width", /*isRow*/ ctx[1] ? '100%' : 1 / 16 + 'rem', false);
+			set_style(div3, "height", !/*isRow*/ ctx[1] ? '100%' : 1 / 16 + 'rem', false);
 		},
 		m(target, anchor) {
 			insert(target, div3, anchor);
@@ -2397,8 +2980,8 @@ function create_fragment$m(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*rulerLabels*/ 8) {
-				each_value_1 = /*rulerLabels*/ ctx[3];
+			if (dirty & /*rulerLabels*/ 4) {
+				each_value_1 = /*rulerLabels*/ ctx[2];
 				let i;
 
 				for (i = 0; i < each_value_1.length; i += 1) {
@@ -2420,8 +3003,8 @@ function create_fragment$m(ctx) {
 				each_blocks_1.length = each_value_1.length;
 			}
 
-			if (dirty & /*rulerTexts, isRow, getRuleDistanceText*/ 22) {
-				each_value = /*rulerTexts*/ ctx[4];
+			if (dirty & /*rulerTexts, isRow*/ 10) {
+				each_value = /*rulerTexts*/ ctx[3];
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each1_lookup, div2, destroy_block, create_each_block$a, null, get_each_context$a);
 			}
 
@@ -2429,8 +3012,8 @@ function create_fragment$m(ctx) {
 				attr(div3, "class", div3_class_value);
 			}
 
-			if (dirty & /*type, isRow*/ 5) {
-				toggle_class(div3, "is-row", /*isRow*/ ctx[2]);
+			if (dirty & /*type, isRow*/ 3) {
+				toggle_class(div3, "is-row", /*isRow*/ ctx[1]);
 			}
 		},
 		i: noop$1,
@@ -2453,7 +3036,6 @@ function instance$m($$self, $$props, $$invalidate) {
 	let { type } = $$props;
 	let { data } = $$props;
 	let { bounding } = $$props;
-	let { getRuleDistanceText } = $$props;
 	const isRow = type === 'top' || type === 'bottom';
 	const contentWidth = bounding.max.x - bounding.min.x - (padding$1 - exteriorWallOffset$1) * 2;
 	const contentHeight = bounding.max.y - bounding.min.y - (padding$1 - exteriorWallOffset$1) * 2;
@@ -2499,32 +3081,17 @@ function instance$m($$self, $$props, $$invalidate) {
 
 	$$self.$$set = $$props => {
 		if ('type' in $$props) $$invalidate(0, type = $$props.type);
-		if ('data' in $$props) $$invalidate(5, data = $$props.data);
-		if ('bounding' in $$props) $$invalidate(6, bounding = $$props.bounding);
-		if ('getRuleDistanceText' in $$props) $$invalidate(1, getRuleDistanceText = $$props.getRuleDistanceText);
+		if ('data' in $$props) $$invalidate(4, data = $$props.data);
+		if ('bounding' in $$props) $$invalidate(5, bounding = $$props.bounding);
 	};
 
-	return [type, getRuleDistanceText, isRow, rulerLabels, rulerTexts, data, bounding];
+	return [type, isRow, rulerLabels, rulerTexts, data, bounding];
 }
 
 class RuleItem extends SvelteComponent {
 	constructor(options) {
 		super();
-
-		init(
-			this,
-			options,
-			instance$m,
-			create_fragment$m,
-			safe_not_equal,
-			{
-				type: 0,
-				data: 5,
-				bounding: 6,
-				getRuleDistanceText: 1
-			},
-			add_css$h
-		);
+		init(this, options, instance$m, create_fragment$m, safe_not_equal, { type: 0, data: 4, bounding: 5 }, add_css$h);
 	}
 }
 
@@ -2536,12 +3103,12 @@ function add_css$g(target) {
 
 function get_each_context$9(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[13] = list[i][0];
-	child_ctx[14] = list[i][1];
+	child_ctx[12] = list[i][0];
+	child_ctx[13] = list[i][1];
 	return child_ctx;
 }
 
-// (20:2) {#each ruleLabelArray as [type, data] (type)}
+// (19:2) {#each ruleLabelArray as [type, data] (type)}
 function create_each_block$9(key_1, ctx) {
 	let first;
 	let ruleitem;
@@ -2549,10 +3116,9 @@ function create_each_block$9(key_1, ctx) {
 
 	const ruleitem_spread_levels = [
 		{
-			type: /*type*/ ctx[13],
-			data: /*data*/ ctx[14],
-			bounding: /*bounding*/ ctx[1],
-			getRuleDistanceText: /*getRuleDistanceText*/ ctx[0]
+			type: /*type*/ ctx[12],
+			data: /*data*/ ctx[13],
+			bounding: /*bounding*/ ctx[0]
 		}
 	];
 
@@ -2580,13 +3146,12 @@ function create_each_block$9(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding, getRuleDistanceText*/ 19)
+			const ruleitem_changes = (dirty & /*ruleLabelArray, bounding*/ 9)
 			? get_spread_update(ruleitem_spread_levels, [
 					{
-						type: /*type*/ ctx[13],
-						data: /*data*/ ctx[14],
-						bounding: /*bounding*/ ctx[1],
-						getRuleDistanceText: /*getRuleDistanceText*/ ctx[0]
+						type: /*type*/ ctx[12],
+						data: /*data*/ ctx[13],
+						bounding: /*bounding*/ ctx[0]
 					}
 				])
 			: {};
@@ -2614,8 +3179,8 @@ function create_fragment$l(ctx) {
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let current;
-	let each_value = /*ruleLabelArray*/ ctx[4];
-	const get_key = ctx => /*type*/ ctx[13];
+	let each_value = /*ruleLabelArray*/ ctx[3];
+	const get_key = ctx => /*type*/ ctx[12];
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$9(ctx, each_value, i);
@@ -2632,8 +3197,8 @@ function create_fragment$l(ctx) {
 			}
 
 			attr(div, "class", "floorplan-plugin__rule-labels-wrapper svelte-1mzj9p3");
-			set_style(div, "width", /*width*/ ctx[3], false);
-			set_style(div, "height", /*height*/ ctx[2], false);
+			set_style(div, "width", /*width*/ ctx[2], false);
+			set_style(div, "height", /*height*/ ctx[1], false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2645,19 +3210,19 @@ function create_fragment$l(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*ruleLabelArray, bounding, getRuleDistanceText*/ 19) {
-				each_value = /*ruleLabelArray*/ ctx[4];
+			if (dirty & /*ruleLabelArray, bounding*/ 9) {
+				each_value = /*ruleLabelArray*/ ctx[3];
 				group_outros();
 				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block$9, null, get_each_context$9);
 				check_outros();
 			}
 
-			if (dirty & /*width*/ 8) {
-				set_style(div, "width", /*width*/ ctx[3], false);
+			if (dirty & /*width*/ 4) {
+				set_style(div, "width", /*width*/ ctx[2], false);
 			}
 
-			if (dirty & /*height*/ 4) {
-				set_style(div, "height", /*height*/ ctx[2], false);
+			if (dirty & /*height*/ 2) {
+				set_style(div, "height", /*height*/ ctx[1], false);
 			}
 		},
 		i(local) {
@@ -2702,58 +3267,55 @@ function instance$l($$self, $$props, $$invalidate) {
 	let height;
 	let { floorIndex } = $$props;
 	let { floorplanData } = $$props;
-	let { getRuleDistanceText } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('floorIndex' in $$props) $$invalidate(5, floorIndex = $$props.floorIndex);
-		if ('floorplanData' in $$props) $$invalidate(6, floorplanData = $$props.floorplanData);
-		if ('getRuleDistanceText' in $$props) $$invalidate(0, getRuleDistanceText = $$props.getRuleDistanceText);
+		if ('floorIndex' in $$props) $$invalidate(4, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*floorplanData*/ 64) {
-			$$invalidate(1, bounding = floorplanData.bounding);
+		if ($$self.$$.dirty & /*floorplanData*/ 32) {
+			$$invalidate(0, bounding = floorplanData.bounding);
 		}
 
-		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 96) {
-			$$invalidate(11, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 48) {
+			$$invalidate(10, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
 		}
 
-		if ($$self.$$.dirty & /*ruleLabelData*/ 2048) {
-			$$invalidate(12, ruleLabelDataKeys = Object.keys(ruleLabelData));
+		if ($$self.$$.dirty & /*ruleLabelData*/ 1024) {
+			$$invalidate(11, ruleLabelDataKeys = Object.keys(ruleLabelData));
 		}
 
-		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 6144) {
-			$$invalidate(4, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
+		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 3072) {
+			$$invalidate(3, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 2) {
-			$$invalidate(9, boundingWidth = bounding.max.x - bounding.min.x);
+		if ($$self.$$.dirty & /*bounding*/ 1) {
+			$$invalidate(8, boundingWidth = bounding.max.x - bounding.min.x);
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 2) {
-			$$invalidate(7, boundingHeight = bounding.max.y - bounding.min.y);
+		if ($$self.$$.dirty & /*bounding*/ 1) {
+			$$invalidate(6, boundingHeight = bounding.max.y - bounding.min.y);
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 2) {
-			$$invalidate(10, contentWidth = bounding.max.x - bounding.min.x - (padding - exteriorWallOffset) * 2);
+		if ($$self.$$.dirty & /*bounding*/ 1) {
+			$$invalidate(9, contentWidth = bounding.max.x - bounding.min.x - (padding - exteriorWallOffset) * 2);
 		}
 
-		if ($$self.$$.dirty & /*bounding*/ 2) {
-			$$invalidate(8, contentHeight = bounding.max.y - bounding.min.y - (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*/ 1536) {
-			$$invalidate(3, width = contentWidth / boundingWidth * 100 + '%');
+		if ($$self.$$.dirty & /*contentWidth, boundingWidth*/ 768) {
+			$$invalidate(2, width = contentWidth / boundingWidth * 100 + '%');
 		}
 
-		if ($$self.$$.dirty & /*contentHeight, boundingHeight*/ 384) {
-			$$invalidate(2, height = contentHeight / boundingHeight * 100 + '%');
+		if ($$self.$$.dirty & /*contentHeight, boundingHeight*/ 192) {
+			$$invalidate(1, height = contentHeight / boundingHeight * 100 + '%');
 		}
 	};
 
 	return [
-		getRuleDistanceText,
 		bounding,
 		height,
 		width,
@@ -2772,20 +3334,7 @@ function instance$l($$self, $$props, $$invalidate) {
 class RuleLabels extends SvelteComponent {
 	constructor(options) {
 		super();
-
-		init(
-			this,
-			options,
-			instance$l,
-			create_fragment$l,
-			safe_not_equal,
-			{
-				floorIndex: 5,
-				floorplanData: 6,
-				getRuleDistanceText: 0
-			},
-			add_css$g
-		);
+		init(this, options, instance$l, create_fragment$l, safe_not_equal, { floorIndex: 4, floorplanData: 5 }, add_css$g);
 	}
 }
 
@@ -3696,7 +4245,7 @@ function add_css$c(target) {
 	append_styles(target, "svelte-bl8zrz", ".floorplan-plugin__floor.svelte-bl8zrz{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}.floorplan-plugin__floor--is-current.svelte-bl8zrz{opacity:1;pointer-events:auto}");
 }
 
-// (22:2) {#if hoverEnable}
+// (20:2) {#if hoverEnable}
 function create_if_block_2(ctx) {
 	let roomhighlight;
 	let current;
@@ -3705,7 +4254,7 @@ function create_if_block_2(ctx) {
 		{
 			floorIndex: /*floorIndex*/ ctx[1],
 			floorplanData: /*floorplanData*/ ctx[5],
-			hoveredRoom: /*hoveredRoom*/ ctx[10]
+			hoveredRoom: /*hoveredRoom*/ ctx[8]
 		}
 	];
 
@@ -3726,12 +4275,12 @@ function create_if_block_2(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 1058)
+			const roomhighlight_changes = (dirty & /*floorIndex, floorplanData, hoveredRoom*/ 290)
 			? get_spread_update(roomhighlight_spread_levels, [
 					{
 						floorIndex: /*floorIndex*/ ctx[1],
 						floorplanData: /*floorplanData*/ ctx[5],
-						hoveredRoom: /*hoveredRoom*/ ctx[10]
+						hoveredRoom: /*hoveredRoom*/ ctx[8]
 					}
 				])
 			: {};
@@ -3753,7 +4302,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (26:2) {#if roomLabelsEnable}
+// (24:2) {#if roomLabelsEnable}
 function create_if_block_1$3(ctx) {
 	let roomlabels;
 	let current;
@@ -3762,10 +4311,9 @@ function create_if_block_1$3(ctx) {
 		{
 			floorplanData: /*floorplanData*/ ctx[5],
 			floorIndex: /*floorIndex*/ ctx[1],
-			getRoomAreaText: /*getRoomAreaText*/ ctx[6],
-			getLabelElement: /*getLabelElement*/ ctx[7],
-			hoveredRoom: /*hoveredRoom*/ ctx[10],
-			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[9]
+			getLabelElement: /*getLabelElement*/ ctx[6],
+			hoveredRoom: /*hoveredRoom*/ ctx[8],
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
 		}
 	];
 
@@ -3786,15 +4334,14 @@ function create_if_block_1$3(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getRoomAreaText, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 1762)
+			const roomlabels_changes = (dirty & /*floorplanData, floorIndex, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable*/ 482)
 			? get_spread_update(roomlabels_spread_levels, [
 					{
 						floorplanData: /*floorplanData*/ ctx[5],
 						floorIndex: /*floorIndex*/ ctx[1],
-						getRoomAreaText: /*getRoomAreaText*/ ctx[6],
-						getLabelElement: /*getLabelElement*/ ctx[7],
-						hoveredRoom: /*hoveredRoom*/ ctx[10],
-						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[9]
+						getLabelElement: /*getLabelElement*/ ctx[6],
+						hoveredRoom: /*hoveredRoom*/ ctx[8],
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[7]
 					}
 				])
 			: {};
@@ -3816,7 +4363,7 @@ function create_if_block_1$3(ctx) {
 	};
 }
 
-// (38:2) {#if ruleLabelsEnable}
+// (27:2) {#if ruleLabelsEnable}
 function create_if_block$6(ctx) {
 	let rulelabels;
 	let current;
@@ -3824,8 +4371,7 @@ function create_if_block$6(ctx) {
 	const rulelabels_spread_levels = [
 		{
 			floorplanData: /*floorplanData*/ ctx[5],
-			floorIndex: /*floorIndex*/ ctx[1],
-			getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
+			floorIndex: /*floorIndex*/ ctx[1]
 		}
 	];
 
@@ -3846,12 +4392,11 @@ function create_if_block$6(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const rulelabels_changes = (dirty & /*floorplanData, floorIndex, getRuleDistanceText*/ 290)
+			const rulelabels_changes = (dirty & /*floorplanData, floorIndex*/ 34)
 			? get_spread_update(rulelabels_spread_levels, [
 					{
 						floorplanData: /*floorplanData*/ ctx[5],
-						floorIndex: /*floorIndex*/ ctx[1],
-						getRuleDistanceText: /*getRuleDistanceText*/ ctx[8]
+						floorIndex: /*floorIndex*/ ctx[1]
 					}
 				])
 			: {};
@@ -4080,9 +4625,7 @@ function instance$e($$self, $$props, $$invalidate) {
 	let { roomLabelsEnable } = $$props;
 	let { ruleLabelsEnable } = $$props;
 	let { floorplanData } = $$props;
-	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
-	let { getRuleDistanceText } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 	const hoveredRoom = writable(undefined);
 
@@ -4093,10 +4636,8 @@ function instance$e($$self, $$props, $$invalidate) {
 		if ('roomLabelsEnable' in $$props) $$invalidate(3, roomLabelsEnable = $$props.roomLabelsEnable);
 		if ('ruleLabelsEnable' in $$props) $$invalidate(4, ruleLabelsEnable = $$props.ruleLabelsEnable);
 		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
-		if ('getRoomAreaText' in $$props) $$invalidate(6, getRoomAreaText = $$props.getRoomAreaText);
-		if ('getLabelElement' in $$props) $$invalidate(7, getLabelElement = $$props.getLabelElement);
-		if ('getRuleDistanceText' in $$props) $$invalidate(8, getRuleDistanceText = $$props.getRuleDistanceText);
-		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(9, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
+		if ('getLabelElement' in $$props) $$invalidate(6, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(7, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	return [
@@ -4106,9 +4647,7 @@ function instance$e($$self, $$props, $$invalidate) {
 		roomLabelsEnable,
 		ruleLabelsEnable,
 		floorplanData,
-		getRoomAreaText,
 		getLabelElement,
-		getRuleDistanceText,
 		adaptiveRoomLabelVisibleEnable,
 		hoveredRoom
 	];
@@ -4131,10 +4670,8 @@ class CurrentFloor$1 extends SvelteComponent {
 				roomLabelsEnable: 3,
 				ruleLabelsEnable: 4,
 				floorplanData: 5,
-				getRoomAreaText: 6,
-				getLabelElement: 7,
-				getRuleDistanceText: 8,
-				adaptiveRoomLabelVisibleEnable: 9
+				getLabelElement: 6,
+				adaptiveRoomLabelVisibleEnable: 7
 			},
 			add_css$c
 		);
@@ -4149,11 +4686,11 @@ function add_css$b(target) {
 
 function get_each_context$6(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[16] = list[i];
+	child_ctx[14] = list[i];
 	return child_ctx;
 }
 
-// (24:0) {#if visible}
+// (22:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let t0;
@@ -4220,7 +4757,7 @@ function create_if_block$5(ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (dirty & /*hoverEnable, floorplanData, getRoomAreaText, getLabelElement, getRuleDistanceText, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 62384) {
+			if (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232) {
 				each_value = /*floorplanData*/ ctx[9].floorDatas;
 				let i;
 
@@ -4326,7 +4863,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (26:4) {#each floorplanData.floorDatas as floorData}
+// (24:4) {#each floorplanData.floorDatas as floorData}
 function create_each_block$6(ctx) {
 	let currentfloor;
 	let current;
@@ -4335,18 +4872,16 @@ function create_each_block$6(ctx) {
 		{
 			hoverEnable: /*hoverEnable*/ ctx[5],
 			floorplanData: /*floorplanData*/ ctx[9],
-			getRoomAreaText: /*getRoomAreaText*/ ctx[12],
-			getLabelElement: /*getLabelElement*/ ctx[13],
-			getRuleDistanceText: /*getRuleDistanceText*/ ctx[14],
+			getLabelElement: /*getLabelElement*/ ctx[12],
 			roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
 			ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
-			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[15]
+			adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
 		},
 		{
-			floorIndex: /*floorData*/ ctx[16].floorIndex
+			floorIndex: /*floorData*/ ctx[14].floorIndex
 		},
 		{
-			isCurrent: /*floorData*/ ctx[16].floorIndex === /*floorIndex*/ ctx[4]
+			isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
 		}
 	];
 
@@ -4367,23 +4902,21 @@ function create_each_block$6(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getRoomAreaText, getLabelElement, getRuleDistanceText, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 62384)
+			const currentfloor_changes = (dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable, floorIndex*/ 13232)
 			? get_spread_update(currentfloor_spread_levels, [
-					dirty & /*hoverEnable, floorplanData, getRoomAreaText, getLabelElement, getRuleDistanceText, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable*/ 62368 && {
+					dirty & /*hoverEnable, floorplanData, getLabelElement, roomLabelsEnable, ruleLabelsEnable, adaptiveRoomLabelVisibleEnable*/ 13216 && {
 						hoverEnable: /*hoverEnable*/ ctx[5],
 						floorplanData: /*floorplanData*/ ctx[9],
-						getRoomAreaText: /*getRoomAreaText*/ ctx[12],
-						getLabelElement: /*getLabelElement*/ ctx[13],
-						getRuleDistanceText: /*getRuleDistanceText*/ ctx[14],
+						getLabelElement: /*getLabelElement*/ ctx[12],
 						roomLabelsEnable: /*roomLabelsEnable*/ ctx[7],
 						ruleLabelsEnable: /*ruleLabelsEnable*/ ctx[8],
-						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[15]
+						adaptiveRoomLabelVisibleEnable: /*adaptiveRoomLabelVisibleEnable*/ ctx[13]
 					},
 					dirty & /*floorplanData*/ 512 && {
-						floorIndex: /*floorData*/ ctx[16].floorIndex
+						floorIndex: /*floorData*/ ctx[14].floorIndex
 					},
 					dirty & /*floorplanData, floorIndex*/ 528 && {
-						isCurrent: /*floorData*/ ctx[16].floorIndex === /*floorIndex*/ ctx[4]
+						isCurrent: /*floorData*/ ctx[14].floorIndex === /*floorIndex*/ ctx[4]
 					}
 				])
 			: {};
@@ -4405,7 +4938,7 @@ function create_each_block$6(ctx) {
 	};
 }
 
-// (43:4) {#if compassEnable}
+// (39:4) {#if compassEnable}
 function create_if_block_1$2(ctx) {
 	let compass;
 	let current;
@@ -4514,9 +5047,7 @@ function instance$d($$self, $$props, $$invalidate) {
 	let { floorplanData } = $$props;
 	let { lastPanoramaLongitude } = $$props;
 	let { cameraImageUrl } = $$props;
-	let { getRoomAreaText } = $$props;
 	let { getLabelElement } = $$props;
-	let { getRuleDistanceText } = $$props;
 	let { adaptiveRoomLabelVisibleEnable } = $$props;
 
 	$$self.$$set = $$props => {
@@ -4532,10 +5063,8 @@ function instance$d($$self, $$props, $$invalidate) {
 		if ('floorplanData' in $$props) $$invalidate(9, floorplanData = $$props.floorplanData);
 		if ('lastPanoramaLongitude' in $$props) $$invalidate(10, lastPanoramaLongitude = $$props.lastPanoramaLongitude);
 		if ('cameraImageUrl' in $$props) $$invalidate(11, cameraImageUrl = $$props.cameraImageUrl);
-		if ('getRoomAreaText' in $$props) $$invalidate(12, getRoomAreaText = $$props.getRoomAreaText);
-		if ('getLabelElement' in $$props) $$invalidate(13, getLabelElement = $$props.getLabelElement);
-		if ('getRuleDistanceText' in $$props) $$invalidate(14, getRuleDistanceText = $$props.getRuleDistanceText);
-		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(15, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
+		if ('getLabelElement' in $$props) $$invalidate(12, getLabelElement = $$props.getLabelElement);
+		if ('adaptiveRoomLabelVisibleEnable' in $$props) $$invalidate(13, adaptiveRoomLabelVisibleEnable = $$props.adaptiveRoomLabelVisibleEnable);
 	};
 
 	return [
@@ -4551,9 +5080,7 @@ function instance$d($$self, $$props, $$invalidate) {
 		floorplanData,
 		lastPanoramaLongitude,
 		cameraImageUrl,
-		getRoomAreaText,
 		getLabelElement,
-		getRuleDistanceText,
 		adaptiveRoomLabelVisibleEnable
 	];
 }
@@ -4581,10 +5108,8 @@ class Main$1 extends SvelteComponent {
 				floorplanData: 9,
 				lastPanoramaLongitude: 10,
 				cameraImageUrl: 11,
-				getRoomAreaText: 12,
-				getLabelElement: 13,
-				getRuleDistanceText: 14,
-				adaptiveRoomLabelVisibleEnable: 15
+				getLabelElement: 12,
+				adaptiveRoomLabelVisibleEnable: 13
 			},
 			add_css$b
 		);
@@ -4771,7 +5296,7 @@ class Controller$7 {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Subscribe()
+            value: new Subscribe$1()
         });
         this.five = five;
     }
@@ -5448,12 +5973,10 @@ class Controller$5 extends Controller$6 {
             autoShowEnable: true,
             ruleLabelsEnable: true,
             roomLabelsEnable: true,
-            adaptiveRoomLabelVisibleEnable: true,
             cameraImageUrl: CAMERA_IMAGE,
             attachedTo: FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
             getLabelElement: undefined,
-            getRoomAreaText: (size) => (size / 1000000).toFixed(1) + '㎡',
-            getRuleDistanceText: (distance) => distance.toString()
+            adaptiveRoomLabelVisibleEnable: true,
         };
         const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
         const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
@@ -5526,10 +6049,12 @@ class Controller$5 extends Controller$6 {
             const options = { userAction };
             state.visible ? this._show(options) : this._hide(options);
         }
-        this.render();
     }
-    changeConfigs(config, userAction = true) {
+    changeConfigs(_config, userAction = true) {
+        const config = Object.assign(Object.assign({}, this.state.config), _config);
         this.updateState({ config }, userAction);
+        if (!this.container)
+            return;
         this.render();
     }
     async formatData(serverData) {
@@ -5537,8 +6062,7 @@ class Controller$5 extends Controller$6 {
     }
     updateState(state, userAction) {
         const prevState = this.state;
-        const config = state.config ? Object.assign(Object.assign({}, prevState.config), state.config) : prevState.config;
-        this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), { config });
+        this.state = Object.assign(Object.assign({}, this.state), state);
         if (equal(this.state, prevState, { deep: true }))
             return;
         this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
@@ -8116,6 +8640,8 @@ function createCanvasTextTexture(text, config) {
     return new CanvasTexture(canvas);
 }
 
+const transformPositionToVector3 = ({ x, y, z }) => new Vector3$1(x, y, z);
+
 /**
  * 模型入户门引导插件
  */
@@ -9090,28 +9616,11 @@ const PanoRulerPlugin = (five, params) => {
         state.enable = false;
         return true;
     };
-    function changeConfigs(config) {
-        if (config.distanceText && config.distanceText !== state.options.distanceText) {
-            const distanceText = config.distanceText;
-            state.options.distanceText = distanceText;
-            Object.values(__rule).forEach((item) => {
-                item.rules.forEach((rule) => {
-                    const [origin, vertical] = rule.rule;
-                    const distance = origin.distanceTo(vertical);
-                    const textEle = rule.$element.querySelector('.PanoRulerPlugin-rule-label-name');
-                    if (!textEle)
-                        return;
-                    textEle.innerText = distanceText(distance);
-                });
-            });
-        }
-    }
     return {
         enable,
         disable,
         load,
         state,
-        changeConfigs,
     };
 };
 
@@ -10496,7 +11005,7 @@ class Magnifier {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Subscribe()
+            value: new Subscribe$1()
         });
         Object.defineProperty(this, "contentDom", {
             enumerable: true,
@@ -11008,8 +11517,7 @@ function createDistanceItem(props) {
         if (userDistanceItem) {
             userDistanceItem.update({ line: line.toCompletelyJson(), polyline: line.getPolyline().toCompletelyJson() });
         }
-        const distance = startPoint.position.clone().distanceTo(endPoint.position);
-        const distanceString = props.line.model.params.getDistanceText(distance);
+        const distanceString = startPoint.position.clone().distanceTo(endPoint.position).toFixed(2) + 'm';
         contentDom.innerText !== distanceString && (contentDom.innerText = distanceString);
     }
     function appendTo(container) {
@@ -11105,7 +11613,7 @@ class Line {
         this.model = model;
         if (point.id === anotherPoint.id)
             throw new Error('无效的线段, 一个点无法构成线段');
-        this.hook = new Subscribe();
+        this.hook = new Subscribe$1();
         this.points = [point, anotherPoint];
         this.mesh = createLineMesh(this, 'normal');
         this.lightMesh = createLineMesh(this, 'light');
@@ -11238,7 +11746,7 @@ class Model {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Subscribe()
+            value: new Subscribe$1()
         });
         this.params = params;
     }
@@ -11348,12 +11856,6 @@ const preventDefault = (e) => e.preventDefault();
 class BaseController {
     constructor(params) {
         var _a, _b;
-        Object.defineProperty(this, "model", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "five", {
             enumerable: true,
             configurable: true,
@@ -11366,13 +11868,7 @@ class BaseController {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "config", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "dashed", {
+        Object.defineProperty(this, "model", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -11431,7 +11927,6 @@ class BaseController {
             configurable: true,
             writable: true,
             value: () => {
-                this.dashed.distanceItem.update(this.five);
                 this.model.lines.forEach((line) => line.distanceItem.update(this.five));
             }
         });
@@ -11439,7 +11934,6 @@ class BaseController {
         this.five = params.five;
         this.hook = params.hook;
         this.model = params.model;
-        this.config = params.config;
         this.magnifier = params.magnifier;
         this.container = params.container;
         this.fiveHelper = params.fiveHelper;
@@ -11448,10 +11942,6 @@ class BaseController {
         // ==================== Groups ====================
         this.group = params.group;
         this.mouseGroup = params.mouseGroup;
-        // ==================== 虚线 ====================
-        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
-        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
-        this.dashed.mesh.name = 'dashLine';
         const fiveElement = this.five.getElement();
         if (fiveElement) {
             fiveElement.addEventListener('touchstart', preventDefault);
@@ -11527,6 +12017,12 @@ class EditController extends BaseController {
             writable: true,
             value: 'edit'
         });
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
+        });
         Object.defineProperty(this, "pressPoint", {
             enumerable: true,
             configurable: true,
@@ -11558,6 +12054,13 @@ class EditController extends BaseController {
             writable: true,
             value: null
         });
+        /** 鼠标点到上一个端点连接的虚线 */
+        Object.defineProperty(this, "dashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "hammer", {
             enumerable: true,
             configurable: true,
@@ -11770,7 +12273,9 @@ class EditController extends BaseController {
                 this.dashed.distanceItem.update(this.five);
             }
         });
-        this.model = new Model(this.config);
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
         // ==================== 事件监听 ====================
         // five
         this.five.on('cameraUpdate', this.onCameraUpdate);
@@ -12604,7 +13109,7 @@ class MixedController extends BaseController {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Model(this.config)
+            value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
         });
         Object.defineProperty(this, "hasAppendDashed", {
             enumerable: true,
@@ -12642,6 +13147,13 @@ class MixedController extends BaseController {
             writable: true,
             value: void 0
         });
+        /** 圆环点到上一个端点连接的虚线 */
+        Object.defineProperty(this, "dashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         /** 编辑线条发生改变时通知外部 */
         Object.defineProperty(this, "onLineChanged", {
             enumerable: true,
@@ -12844,6 +13356,10 @@ class MixedController extends BaseController {
             onClick: this.deleteDomClickCallback,
             cancelDelete: this.cancelDeleteClickCallback,
         }).appendTo(this.container);
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        this.dashed.mesh.name = 'dashLine';
         // ==================== 事件监听 ====================
         // five
         this.five.on('cameraUpdate', this.onCameraUpdate);
@@ -14191,7 +14707,7 @@ class MeasureController {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: new Subscribe()
+            value: new Subscribe$1()
         });
         Object.defineProperty(this, "magnifier", {
             enumerable: true,
@@ -14217,12 +14733,6 @@ class MeasureController {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "config", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "fiveHelper", {
             enumerable: true,
             configurable: true,
@@ -14321,14 +14831,7 @@ class MeasureController {
         });
         this.five = five;
         this.params = params;
-        const defaultConfig = {
-            userDistanceItemCreator: undefined,
-            getDistanceText(distance) {
-                return distance.toFixed(2) + 'm';
-            },
-        };
-        this.config = Object.assign(Object.assign({}, defaultConfig), omit(params, ['openParams', 'magnifierParams']));
-        this.model = new Model(this.config);
+        this.model = new Model({ userDistanceItemCreator: this.params.userDistanceItemCreator });
         this.fiveHelper = new FiveHelper(five);
         // magnifier
         this.magnifier = new Magnifier(five, (_a = params.magnifierParams) !== null && _a !== void 0 ? _a : { width: 190, height: 190, scale: 2 });
@@ -14350,7 +14853,6 @@ class MeasureController {
             hook: this.hook,
             group: this.group,
             model: this.model,
-            config: this.config,
             magnifier: this.magnifier,
             container: this.container,
             fiveHelper: this.fiveHelper,
@@ -14485,14 +14987,6 @@ class MeasureController {
             (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.dispose();
         this.useUIController = new UIController(this, this.controllerParams);
     }
-    changeConfigs(config) {
-        var _a;
-        if (config.getDistanceText && config.getDistanceText !== this.config.getDistanceText) {
-            const getDistanceText = config.getDistanceText;
-            this.config.getDistanceText = getDistanceText;
-            (_a = this.controller) === null || _a === void 0 ? void 0 : _a.updateDistanceUI();
-        }
-    }
 }
 
 const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
@@ -15171,7 +15665,7 @@ const PanoSpatialTagPlugin = (five, params) => {
     const container = document.createElement('div');
     container.classList.add('PanoSpatialTagPlugin');
     Object.assign(container.style, pluginStyle);
-    const hooks = new Subscribe();
+    const hooks = new Subscribe$1();
     let blurImage = new Image();
     blurImage.src = BLUR_IMAGE_URL;
     const state = {
@@ -16075,7 +16569,7 @@ const ModelItemLabelPlugin = (five, params) => {
         itemLabels: [],
         wrapper: null,
         app: undefined,
-        hooks: new Subscribe(),
+        hooks: new Subscribe$1(),
         modelOcclusionEnable: (_a = params === null || params === void 0 ? void 0 : params.modelOcclusionEnable) !== null && _a !== void 0 ? _a : true,
         displayStrategyType: (_b = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _b !== void 0 ? _b : DISPLAY_STRATEGY_TYPE.SMALL,
     };
@@ -17342,7 +17836,7 @@ const Plugin = (five, params) => {
         itemLabels: [],
         wrapper: null,
         app: undefined,
-        hooks: new Subscribe(),
+        hooks: new Subscribe$1(),
         modelOcclusionEnable: (_a = params === null || params === void 0 ? void 0 : params.modelOcclusionEnable) !== null && _a !== void 0 ? _a : true,
         onlyVisibleInPanorama: (_b = params === null || params === void 0 ? void 0 : params.onlyVisibleInPanorama) !== null && _b !== void 0 ? _b : true,
         displayStrategyType: (_c = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _c !== void 0 ? _c : ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,