@realsee/dnalogel 2.0.0-alpha.49 → 2.0.0-alpha.51

package/dist/index.umd.js

@@ -1011,6 +1011,24 @@
         FLOOR_PLAN_ATTACHED_TO[FLOOR_PLAN_ATTACHED_TO["BOUNDING_CENTER"] = 3] = "BOUNDING_CENTER";
     })(exports.FLOOR_PLAN_ATTACHED_TO || (exports.FLOOR_PLAN_ATTACHED_TO = {}));
 
+    /**
+     * 传入一个 Promise
+     * 无异常，返回 [null, data]
+     * 有异常，则返回 [Error, undefined]
+     * 用于替代 try&catch 处理 await 异常的方案
+     */
+    async function to(promise) {
+        try {
+            const data = await promise;
+            return [null, data];
+        }
+        catch (error) {
+            if (error instanceof Error)
+                return [error, null];
+            return [new Error(''), null];
+        }
+    }
+
     /**
      * 检查一个值是否是狭义上的对象
      * @param {any} value 要检查的值
@@ -4636,10 +4654,48 @@
         });
     }
 
+    /** 获取当前楼层地面的 Y 值 */
+    function getFloorY(five, floorIndex) {
+        const maxFloorIndex = Math.max(...five.work.observers.map((ob) => ob.floorIndex));
+        return floorIndex > maxFloorIndex
+            ? five.model.bounding.max.y
+            : Math.max(...five.work.observers
+                .filter((ob) => ob.floorIndex === floorIndex)
+                .map((ob) => ob.standingPosition.y));
+    }
+    /** 获取当前吸附类型的 Y 值
+     * * FLOOR_PLAN_ATTACHED_TO.FLOOR：当前楼层地板的 Y
+     * * FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER：当前模型中心的 Y
+     * * FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER：当前楼层天花板的 Y
+    */
+    function getAttachedY(five, floorIndex, attachedTo = exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER) {
+        const currentFloorY = getFloorY(five, floorIndex);
+        const nextFloorY = getFloorY(five, floorIndex + 1);
+        if (attachedTo === exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER)
+            return (five.model.bounding.max.y + five.model.bounding.min.y) / 2;
+        else if (attachedTo === exports.FLOOR_PLAN_ATTACHED_TO.CEILING)
+            return nextFloorY;
+        else
+            return currentFloorY;
+    }
+    /**
+     * 获取「在俯视图」状态下，模型 mm 与屏幕像素 px 的对应关系，即每 mm 对应多少 px
+     * @param five five
+     */
+    function getPxmm(five, container, floorIndex, options) {
+        const y = getAttachedY(five, floorIndex, options === null || options === void 0 ? void 0 : options.attachedTo);
+        const originPosition = new THREE__namespace.Vector3(0, y, 0);
+        const originPositionXUnit = new THREE__namespace.Vector3(1, y, 0);
+        const mouse = originPosition.clone().project(five.camera);
+        const xUnitMouse = originPositionXUnit.clone().project(five.camera);
+        const pxmm = Math.abs((xUnitMouse.x - mouse.x) / 1000) * (container.getBoundingClientRect().width / 2);
+        return pxmm;
+    }
+
     /**
      * plugin 的基本控制器
      */
-    class Controller$5 {
+    class Controller$6 {
         constructor(five$1) {
             Object.defineProperty(this, "five", {
                 enumerable: true,
@@ -4666,9 +4722,31 @@
         }
     }
 
-    class Controller$4 extends Controller$5 {
+    class Controller$5 extends Controller$6 {
     }
 
+    var FloorplanErrorType;
+    (function (FloorplanErrorType) {
+        /** 意料之外的错误 */
+        FloorplanErrorType["UnknownError"] = "UnknownError";
+        /** 数据未加载 */
+        FloorplanErrorType["DataNotLoaded"] = "DataNotLoaded";
+        /** 展示过程被隐藏打断 */
+        FloorplanErrorType["BreakOffByHide"] = "BreakOffByHide";
+        /** 展示过程中插件被禁用 */
+        FloorplanErrorType["BreakOffByDisable"] = "BreakOffByDisable";
+        /** 模型未加载完成 */
+        FloorplanErrorType["ModelNotLoaded"] = "ModelNotLoaded";
+        /** Five changeMode 行为不符合预期 */
+        FloorplanErrorType["ChangeModeError"] = "ChangeModeError";
+        /** Five updateCamera 行为不符合预期 */
+        FloorplanErrorType["UpdateCameraError"] = "UpdateCameraError";
+    })(FloorplanErrorType || (FloorplanErrorType = {}));
+    /** 户型图展示 & 模型消失的默认时间 */
+    const SHOW_ANIME_DURATION = 500;
+    /** Five camera 默认 fov */
+    const FIVE_CAMERA_DEFAULT_FOV = 80;
+
     /**
      * 比较两个数字近似相等
      * @param num1 数字1
@@ -4715,42 +4793,47 @@
         });
     }
 
-    /** 获取当前楼层地面的 Y 值 */
-    function getFloorY(five, floorIndex) {
-        const maxFloorIndex = Math.max(...five.work.observers.map((ob) => ob.floorIndex));
-        return floorIndex > maxFloorIndex
-            ? five.model.bounding.max.y
-            : Math.max(...five.work.observers
-                .filter((ob) => ob.floorIndex === floorIndex)
-                .map((ob) => ob.standingPosition.y));
-    }
-    /** 获取当前吸附类型的 Y 值
-     * * FLOOR_PLAN_ATTACHED_TO.FLOOR：当前楼层地板的 Y
-     * * FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER：当前模型中心的 Y
-     * * FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER：当前楼层天花板的 Y
-    */
-    function getAttachedY(five, floorIndex, attachedTo = exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER) {
-        const currentFloorY = getFloorY(five, floorIndex);
-        const nextFloorY = getFloorY(five, floorIndex + 1);
-        if (attachedTo === exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER)
-            return (five.model.bounding.max.y + five.model.bounding.min.y) / 2;
-        else if (attachedTo === exports.FLOOR_PLAN_ATTACHED_TO.CEILING)
-            return nextFloorY;
-        else
-            return currentFloorY;
+    /** 判断当前状态是否可以展示户型图 */
+    function checkShowState(five, showState) {
+        if (five.currentMode !== showState.mode)
+            return false;
+        const { latitude, longitude, fov } = showState;
+        const { latitude: _latitude, longitude: _longitude } = five.getCurrentState();
+        const _fov = five.camera.fov;
+        if (!nearlyEqual(latitude, _latitude, 2))
+            return false;
+        if (!nearlyEqual(longitude, _longitude, 2))
+            return false;
+        if (fov !== _fov)
+            return false;
+        return true;
     }
-    /**
-     * 获取「在俯视图」状态下，模型 mm 与屏幕像素 px 的对应关系，即每 mm 对应多少 px
-     * @param five five
+    /** 更改 Five 状态到展示户型图的状态
+     * 1. 判断状态不符合时，会纠正到正确的状态
+     * 2. 内置了相应的动画时间计算
+     * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
      */
-    function getPxmm(five, container, floorIndex, options) {
-        const y = getAttachedY(five, floorIndex, options === null || options === void 0 ? void 0 : options.attachedTo);
-        const originPosition = new THREE__namespace.Vector3(0, y, 0);
-        const originPositionXUnit = new THREE__namespace.Vector3(1, y, 0);
-        const mouse = originPosition.clone().project(five.camera);
-        const xUnitMouse = originPositionXUnit.clone().project(five.camera);
-        const pxmm = Math.abs((xUnitMouse.x - mouse.x) / 1000) * (container.getBoundingClientRect().width / 2);
-        return pxmm;
+    async function correctFiveState(five, showState, userAction = true) {
+        // 当前已满足状态，不需要变更
+        const result = checkShowState(five, showState);
+        if (result === true)
+            return;
+        const currentFiveState = five.getCurrentState();
+        // 纠正 mode
+        if (currentFiveState.mode !== showState.mode) {
+            const [changeModeError] = await to(changeMode(five, [showState.mode, showState, undefined, userAction]));
+            if (changeModeError)
+                throw new Error(FloorplanErrorType.ChangeModeError);
+            return;
+        }
+        // 纠正相机状态
+        // 根据 latitude、longitude、fov 计算动画时间，最多 1s
+        const { latitude, longitude, fov } = currentFiveState;
+        const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
+        const [updateCameraError] = await to(five.updateCamera(showState, time, userAction));
+        if (updateCameraError)
+            throw new Error(FloorplanErrorType.UpdateCameraError);
+        return;
     }
 
     function changeModelCanvasOpacity(five, opacity, duration = 300) {
@@ -4769,15 +4852,38 @@
         });
     }
 
-    class Controller$3 extends Controller$4 {
+    /** 当前 five 的相机视角是否满足户型图自动隐藏条件
+     *
+     * @description 水平旋转角大于正负 5 度 || 俯仰角度大于 5 度
+     *
+     */
+    function shouldFloorplanHideWithPose$1(pose) {
+        const { latitude, longitude } = pose;
+        const latitudeHide = Math.abs(latitude - Math.PI / 2) > (5 * Math.PI) / 180;
+        const longitudeHide = longitude > 5 * (Math.PI / 180) && longitude < 355 * (Math.PI / 180);
+        return latitudeHide || longitudeHide;
+    }
+    /** 当前 five 的相机视角是否满足户型图自动展示隐藏条件
+     *
+     * @description 水平旋转角正负 30 度 && 俯仰角度小于 10 度
+     *
+     */
+    function shouldFloorplanShowWithPose$1(pose) {
+        const { latitude, longitude } = pose;
+        const latitudeVisible = Math.abs(latitude - Math.PI / 2) < (10 * Math.PI) / 180;
+        const longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
+        return latitudeVisible && longitudeVisible;
+    }
+    class Controller$4 extends Controller$5 {
         constructor(five, params) {
+            var _a;
             super(five);
             // =============== public properties =================
             Object.defineProperty(this, "name", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: 'topviewFloorplanPlugin'
+                value: 'modelFloorplanPlugin'
             });
             Object.defineProperty(this, "state", {
                 enumerable: true,
@@ -4792,18 +4898,26 @@
                 writable: true,
                 value: void 0
             });
-            Object.defineProperty(this, "app", {
+            /** 展示户型图时，需要正确的状态 */
+            Object.defineProperty(this, "showState", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: undefined
+                value: void 0
             });
-            Object.defineProperty(this, "selector", {
+            /** show 动画的公共 Promise */
+            Object.defineProperty(this, "showPromise", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
                 value: void 0
             });
+            Object.defineProperty(this, "app", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: undefined
+            });
             Object.defineProperty(this, "panoIndex", {
                 enumerable: true,
                 configurable: true,
@@ -4816,6 +4930,19 @@
                 writable: true,
                 value: 0
             });
+            Object.defineProperty(this, "selector", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            /** 公共 Promise 的 reject 方法 */
+            Object.defineProperty(this, "showRejection", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
             /** 户型图父容器 */
             Object.defineProperty(this, "wrapper", {
                 enumerable: true,
@@ -4858,34 +4985,6 @@
                 writable: true,
                 value: false
             });
-            /** 更新户型图大小 */
-            Object.defineProperty(this, "updateSize", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: () => {
-                    if (!this.data)
-                        return;
-                    if (!this.container || !this.wrapper)
-                        return;
-                    if (this.five.getCurrentState().mode !== 'Topview')
-                        return;
-                    // 计算户型图展示大小
-                    const { min, max } = this.data.bounding;
-                    const width = max.x - min.x;
-                    const height = max.y - min.y;
-                    // 每毫米对应的 px 值
-                    const options = this.state.config.attachedTo ? { attachedTo: this.state.config.attachedTo } : undefined;
-                    const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
-                    const _width = Math.ceil(width * pxmm);
-                    const _height = Math.ceil(height * pxmm);
-                    if (this.size.width === _width && this.size.height === _height)
-                        return;
-                    this.container.style.width = _width + 'px';
-                    this.container.style.height = _height + 'px';
-                    this.size = { width: _width, height: _height };
-                }
-            });
             /** 销毁插件 */
             Object.defineProperty(this, "dispose", {
                 enumerable: true,
@@ -4903,21 +5002,213 @@
                     this.hooks.emit('dispose');
                 }
             });
-            Object.defineProperty(this, "_disable", {
+            /** 展示户型图
+             * 1. show 函数大部分情况下需要耗时
+             * 2. 如果当前已经在展示中，将不会触发任何事件
+             * 3. 如果展示过程被中断，将抛出错误
+             * 4. 多次调用 show 方法，只会触发一次 showAnimationEnded 事件，但是展示结果会取决于最后一次调用参数
+             * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
+             * @param opts.floorIndex 楼层
+             * @param opts.modelOpacity 模型透明度
+             * @param opts.immediately 是否立即展示
+             * @param opts.isAutoShow 是否是自动展示
+             * @param opts.userAction 是否是用户行为
+             */
+            Object.defineProperty(this, "show", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (options) => {
-                    var _a, _b;
-                    const { userAction } = options;
-                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
-                    this.app = undefined;
-                    (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
-                    this.removeEventListener();
-                    this.hooks.emit('disable', { userAction });
-                }
-            });
-            /** modelLoaded 之后自动执行 append container 操作  */
+                value: async (options = {}) => {
+                    if (!this.state.enabled)
+                        return;
+                    // 已经展示完成了，不做任何操作
+                    if (!this.showPromise && this.state.visible)
+                        return;
+                    const userAction = options.userAction !== undefined ? options.userAction : true;
+                    this.updateState({ visible: true }, userAction);
+                    this._show(options);
+                }
+            });
+            /** 隐藏户型图 */
+            Object.defineProperty(this, "hide", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: async (options = {}) => {
+                    if (!this.state.enabled)
+                        return;
+                    this.isHiddenByHideFunc = true;
+                    if (this.state.visible === false)
+                        return;
+                    this.updateState({ visible: false }, options.userAction || true);
+                    this._hide(options);
+                }
+            });
+            /** 更新户型图大小 */
+            Object.defineProperty(this, "updateSize", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    if (!this.data)
+                        return;
+                    if (!checkShowState(this.five, this.showState))
+                        return;
+                    if (!this.container || !this.wrapper)
+                        return;
+                    // 计算户型图展示大小
+                    const { min, max } = this.data.bounding;
+                    const width = max.x - min.x;
+                    const height = max.y - min.y;
+                    // 每毫米对应的 px 值
+                    const options = this.state.config.attachedTo ? { attachedTo: this.state.config.attachedTo } : undefined;
+                    const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
+                    const _width = Math.ceil(width * pxmm);
+                    const _height = Math.ceil(height * pxmm);
+                    if (this.size.width === _width && this.size.height === _height)
+                        return;
+                    this.container.style.width = _width + 'px';
+                    this.container.style.height = _height + 'px';
+                    this.size = { width: _width, height: _height };
+                }
+            });
+            Object.defineProperty(this, "_disable", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (options) => {
+                    var _a, _b, _c;
+                    const { userAction } = options;
+                    this.hooks.emit('disable', { userAction });
+                    // ===== 处理展示过程中 disable =====
+                    (_a = this.showRejection) === null || _a === void 0 ? void 0 : _a.call(this, FloorplanErrorType.BreakOffByDisable);
+                    this.showPromise = undefined;
+                    (_b = this.app) === null || _b === void 0 ? void 0 : _b.$destroy();
+                    this.app = undefined;
+                    (_c = this.container) === null || _c === void 0 ? void 0 : _c.remove();
+                    this.removeEventListener();
+                }
+            });
+            Object.defineProperty(this, "_enable", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (options) => {
+                    const { userAction } = options;
+                    this.addEventListener();
+                    if (!this.wrapper)
+                        return;
+                    this.wrapper.append(this.container);
+                    this.hooks.emit('enable', { userAction });
+                    if (this.state.visible)
+                        this._show({ userAction });
+                }
+            });
+            Object.defineProperty(this, "_show", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: async (options) => {
+                    var _a;
+                    if (!this.state.enabled)
+                        return;
+                    if (!((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded))
+                        throw new Error(FloorplanErrorType.ModelNotLoaded);
+                    if (!this.data)
+                        throw new Error(FloorplanErrorType.DataNotLoaded);
+                    this.isHiddenByHideFunc = false;
+                    // ===== 参数合并 =====
+                    const baseShowOpts = {
+                        floorIndex: this.floorIndex,
+                        modelOpacity: this.state.config.modelOpacity,
+                        immediately: false,
+                        isAutoShow: false,
+                        userAction: true,
+                    };
+                    const mergedOptions = Object.assign(Object.assign({}, baseShowOpts), options);
+                    const getShowPromise = async () => {
+                        this.hooks.emit('show', { userAction: mergedOptions.userAction, auto: mergedOptions.isAutoShow });
+                        let hasRejected = false;
+                        let externalErrorMsg;
+                        this.showRejection = (errorMsg) => {
+                            hasRejected = true;
+                            externalErrorMsg = errorMsg;
+                        };
+                        const [correctError] = await to(correctFiveState(this.five, this.showState, mergedOptions.userAction));
+                        if (correctError)
+                            throw correctError;
+                        // 异步结束要判断当前是不是被中断了
+                        if (hasRejected)
+                            throw externalErrorMsg ? new Error(externalErrorMsg) : new Error(FloorplanErrorType.UnknownError);
+                        // 更新户型图大小
+                        this.updateSize();
+                        // 高亮当前楼层，有两个目的
+                        // 1. 点击模型时，可以跳转到当前楼层的点位上
+                        // 2. 当前楼层比较小时，户型图也比较小，如果展示全部楼层，会展示户型图外有一圈模型
+                        this.floorIndex = mergedOptions.floorIndex;
+                        this.five.model.show(this.floorIndex);
+                        // 模型消失, 渲染户型图
+                        const modelOpacity = mergedOptions.modelOpacity;
+                        const renderDuration = mergedOptions.immediately ? 0 : SHOW_ANIME_DURATION;
+                        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+                        this.render(renderDuration);
+                    };
+                    this.showPromise = getShowPromise()
+                        .then(() => {
+                        this.hooks.emit('showAnimationEnded', {
+                            auto: mergedOptions.isAutoShow,
+                            userAction: mergedOptions.userAction,
+                        });
+                    })
+                        .catch((error) => {
+                        this.updateState({ visible: false }, mergedOptions.userAction);
+                        // 自动展示的报错内部处理
+                        if (mergedOptions.isAutoShow)
+                            return;
+                        // 非自动展示的报错继续向外抛出
+                        if (error instanceof Error)
+                            throw error;
+                    })
+                        .finally(() => {
+                        this.showPromise = undefined;
+                        this.showRejection = undefined;
+                    });
+                    return this.showPromise;
+                }
+            });
+            Object.defineProperty(this, "_hide", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (options) => {
+                    var _a;
+                    // ===== 处理展示过程中 hide =====
+                    (_a = this.showRejection) === null || _a === void 0 ? void 0 : _a.call(this, FloorplanErrorType.BreakOffByHide);
+                    this.showPromise = undefined;
+                    // ===== 合并参数 =====
+                    const baseOptions = {
+                        userAction: true,
+                        isAutoHide: false,
+                    };
+                    const mergedOptions = Object.assign(Object.assign({}, baseOptions), options);
+                    changeModelCanvasOpacity(this.five, 1, 0);
+                    this.hooks.emit('hide', { auto: mergedOptions.isAutoHide, userAction: mergedOptions.userAction });
+                    this.render();
+                }
+            });
+            Object.defineProperty(this, "handleClick", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    if (!this.state.visible)
+                        return;
+                    const preventDefault = this.hooks.emit('click');
+                    if (preventDefault)
+                        return false;
+                }
+            });
+            /** modelLoaded 之后自动执行 append container 操作  */
             Object.defineProperty(this, "onFiveModelLoaded", {
                 enumerable: true,
                 configurable: true,
@@ -4936,18 +5227,44 @@
                     wrapper.append(this.container);
                 }
             });
-            /** 非 Topview 态隐藏户型图 */
+            /** 更改模型时，自动隐藏户型图 */
             Object.defineProperty(this, "onFiveModeChange", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (...[mode, , , , userAction]) => {
-                    if (mode !== 'Topview' && this.state.visible) {
-                        this.updateState({ visible: false }, userAction);
-                        this._hide({ userAction });
+                value: (mode) => {
+                    // 目前 Five modeChange 事件没有暴露 userAction，先拿 false 苟着
+                    if (mode !== this.showState.mode) {
+                        this.updateState({ visible: false }, false);
+                        this._hide({ userAction: false });
+                    }
+                }
+            });
+            /** 惯性结束后，判断能否自动展示户型图 */
+            Object.defineProperty(this, "onFiveInteriaPan", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (_, isFinal) => {
+                    if (!isFinal)
+                        return;
+                    if (this.state.config.autoShowEnable === false)
+                        return;
+                    // 如果用户调用 hide 方法手动隐藏户型图，则不允许自动展示
+                    if (this.isHiddenByHideFunc)
+                        return;
+                    const fiveCurrentState = this.five.getCurrentState();
+                    if (fiveCurrentState.mode !== 'Floorplan')
+                        return;
+                    if (this.state.visible)
+                        return;
+                    if (shouldFloorplanShowWithPose$1(fiveCurrentState)) {
+                        this.updateState({ visible: true }, true);
+                        this._show({ isAutoShow: true });
                     }
                 }
             });
+            /** panoIndex 改变时，更新 floorIndex */
             Object.defineProperty(this, "onFivePanoArrived", {
                 enumerable: true,
                 configurable: true,
@@ -4960,6 +5277,7 @@
                     this.floorIndex = this.five.work.observers[index].floorIndex;
                 }
             });
+            /** cameraUpdate 时判断户型图是否应该自动隐藏 */
             Object.defineProperty(this, "onFiveCameraUpdate", {
                 enumerable: true,
                 configurable: true,
@@ -4967,43 +5285,71 @@
                 value: (_, userAction) => {
                     if (!this.state.visible)
                         return;
-                    this.updatePosition();
-                    this.updateSize();
+                    // 展示过程中不处理自动隐藏逻辑
+                    if (this.showPromise)
+                        return;
+                    const fiveCurrentState = this.five.getCurrentState();
+                    if (shouldFloorplanHideWithPose$1(fiveCurrentState)) {
+                        this.updateState({ visible: false }, userAction);
+                        this._hide({ userAction, isAutoHide: true });
+                    }
                 }
             });
+            /** 在户型图展示时阻止多指操作, 阻止鼠标放大 */
             Object.defineProperty(this, "onFiveWantsGesture", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (type) => {
-                    if (type !== 'pan' && type !== 'pinch' && type !== 'mouseWheel')
+                value: (type, pointers) => {
+                    if (!this.state.visible)
                         return;
-                    if (this.state.visible && !this.state.config.gestureEnable)
+                    // 阻止多指操作
+                    if (pointers.length > 1)
+                        return false;
+                    // 阻止鼠标滚轮行为
+                    if (type === 'mouseWheel')
                         return false;
                 }
             });
-            Object.defineProperty(this, "onFiveWantsMoveToPano", {
+            /** 户型图展示中，转动三维模型，结束时应该自动修复模型状态 */
+            Object.defineProperty(this, "onFiveWantsPanGesture", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: () => {
-                    if (this.state.visible && this.state.config.preventRoomClick)
-                        return false;
-                }
-            });
-            /** 动画结束后是 Topview 态就展示户型图 */
-            Object.defineProperty(this, "onFiveInitAnimationEnded", {
+                value: (_, isFinal) => {
+                    if (this.five.getCurrentState().mode !== 'Floorplan')
+                        return;
+                    if (this.state.config.autoShowEnable === false)
+                        return;
+                    if (isFinal && this.state.visible) {
+                        this.five.updateCamera(this.showState, 0);
+                        // 禁用掉 isFinal 的 panGesture 行为
+                        // 因为 panGesture 中包含对相机的处理，会跟回调事件中的处理逻辑冲突
+                        // 此行为也会禁用 pan 结束后的惯性处理
+                        return false;
+                    }
+                }
+            });
+            /** 阻止点击分间走点 */
+            Object.defineProperty(this, "onFiveWantsTapGesture", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (...[, , userAction]) => {
-                    const { mode } = this.five.getCurrentState();
-                    if (mode === 'Topview' && !this.isHiddenByHideFunc && !this.state.visible && this.state.config.autoShowEnable) {
-                        this.updateState({ visible: true }, userAction);
-                        this._show({ userAction });
+                value: () => this.handleClick()
+            });
+            /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
+            Object.defineProperty(this, "onFiveWantsChangeMode", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (mode, prevMode) => {
+                    if (prevMode === 'Panorama' && mode === 'Floorplan') {
+                        this.lastPanoramaLongitude = this.five.getCurrentState().longitude;
                     }
+                    // if (mode !== 'Floorplan') this.hide()
                 }
             });
+            /** 模型楼层高亮改变时，自动进行楼层切换 */
             Object.defineProperty(this, "onModelShownFloorChange", {
                 enumerable: true,
                 configurable: true,
@@ -5016,7 +5362,6 @@
                         this.floorIndex = this.five.work.observers[panoIndex].floorIndex;
                         return;
                     }
-                    // 模型楼层高亮改变时，自动进行楼层切换
                     this.floorIndex = shownFloor;
                     this.updateSize();
                     this.render();
@@ -5026,13 +5371,19 @@
                 this.selector = params.selector;
                 console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
             }
+            // =============== init Show State ===============
+            this.showState = {
+                mode: 'Floorplan',
+                longitude: 0,
+                latitude: Math.PI / 2,
+                fov: FIVE_CAMERA_DEFAULT_FOV / ((_a = params === null || params === void 0 ? void 0 : params.scale) !== null && _a !== void 0 ? _a : 1),
+            };
             // =============== init State ===============
             const baseConfig = {
                 northDesc: '北',
                 modelOpacity: 1,
                 hoverEnable: true,
                 compassEnable: true,
-                gestureEnable: false,
                 autoShowEnable: true,
                 ruleLabelsEnable: true,
                 roomLabelsEnable: true,
@@ -5074,19 +5425,6 @@
                 this.updateState(state, userAction);
             this.render();
         }
-        /** 更新户型图位置 */
-        updatePosition() {
-            var _a;
-            const y = getAttachedY(this.five, this.floorIndex, this.state.config.attachedTo);
-            const modelPosition = (_a = this.five.model) === null || _a === void 0 ? void 0 : _a.bounding.getCenter(new THREE__namespace.Vector3()).setY(y);
-            if (!modelPosition)
-                return;
-            const ndcPosition = modelPosition.clone().project(this.five.camera);
-            const left = (ndcPosition.x + 1) / 2;
-            const top = -(ndcPosition.y - 1) / 2;
-            this.container.style.left = left * 100 + '%';
-            this.container.style.top = top * 100 + '%';
-        }
         /** 把插件的渲染DOM插入到对应的容器中去 */
         appendTo(wrapper) {
             this.wrapper = wrapper;
@@ -5097,22 +5435,7 @@
             this.render();
             return this;
         }
-        async show(options = {}) {
-            // 已经展示完成了，不做任何操作
-            if (this.state.visible)
-                return;
-            const userAction = options.userAction !== undefined ? options.userAction : true;
-            this.updateState({ visible: true }, userAction);
-            this._show({ userAction });
-        }
-        async hide(options = {}) {
-            this.isHiddenByHideFunc = true;
-            if (!this.state.visible)
-                return;
-            const userAction = options.userAction !== undefined ? options.userAction : true;
-            this.updateState({ visible: false }, userAction);
-            this._hide({ userAction });
-        }
+        /** 启用插件 */
         enable(options = {}) {
             if (this.state.enabled)
                 return;
@@ -5120,6 +5443,7 @@
             this.updateState({ enabled: true }, options.userAction || userAction);
             this._enable({ userAction });
         }
+        /** 禁用插件 */
         disable(options = {}) {
             if (!this.state.enabled)
                 return;
@@ -5133,53 +5457,22 @@
             const userAction = options.userAction !== undefined ? options.userAction : true;
             this.updateState(state, userAction);
             if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
-                const options = { userAction };
-                state.enabled ? this._enable(options) : this._disable(options);
+                state.enabled ? this._enable({ userAction }) : this._disable({ userAction });
             }
             if (state.visible !== undefined && prevState.visible !== state.visible) {
                 const options = { userAction };
                 state.visible ? this._show(options) : this._hide(options);
             }
         }
-        async formatData(serverData) {
-            return await formatData(serverData.data);
-        }
-        async _show(options) {
-            if (!this.state.enabled)
-                return;
-            this.isHiddenByHideFunc = false;
-            const { userAction } = options;
-            this.hooks.emit('show', { userAction });
-            if (this.five.getCurrentState().mode !== 'Topview') {
-                await changeMode(this.five, ['Topview', undefined, undefined, userAction]);
-            }
-            this.five.model.show(this.floorIndex);
-            this.updatePosition();
-            this.updateSize();
-            const renderDuration = 500;
-            const modelOpacity = this.state.config.modelOpacity;
-            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-            this.hooks.emit('showAnimationEnded', { userAction });
-            this.render();
-        }
-        async _hide(options) {
-            if (!this.state.enabled)
+        changeConfigs(_config, userAction = true) {
+            const config = Object.assign(Object.assign({}, this.state.config), _config);
+            this.updateState({ config }, userAction);
+            if (!this.container)
                 return;
-            const { userAction } = options;
-            this.hooks.emit('hide', { userAction });
-            const modelOpacity = 1;
-            const renderDuration = 0;
-            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
             this.render();
         }
-        _enable(options) {
-            const { userAction } = options;
-            this.addEventListener();
-            if (this.wrapper)
-                this.wrapper.append(this.container);
-            this.hooks.emit('enable', { userAction });
-            if (this.state.visible)
-                this._show({ userAction });
+        async formatData(serverData) {
+            return await formatData(serverData.data);
         }
         updateState(state, userAction) {
             const prevState = this.state;
@@ -5188,6 +5481,22 @@
                 return;
             this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
         }
+        /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
+         *
+         * - TODO: 等 selector 功能下掉之后删除这个逻辑
+         */
+        initContainer() {
+            this.container.classList.add('floorplan-plugin');
+            Object.assign(this.container.style, {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: 10,
+                pointerEvents: 'none',
+            });
+            this.five.addExtraElement(this.container);
+        }
         addEventListener() {
             if (!this.state.enabled)
                 return;
@@ -5195,42 +5504,30 @@
                 return;
             const five = this.five;
             five.on('modeChange', this.onFiveModeChange);
+            five.on('interiaPan', this.onFiveInteriaPan);
             five.on('panoArrived', this.onFivePanoArrived);
             five.on('cameraUpdate', this.onFiveCameraUpdate);
             five.on('wantsGesture', this.onFiveWantsGesture);
-            five.on('wantsMoveToPano', this.onFiveWantsMoveToPano);
-            five.on('initAnimationEnded', this.onFiveInitAnimationEnded);
+            five.on('wantsPanGesture', this.onFiveWantsPanGesture);
+            five.on('wantsTapGesture', this.onFiveWantsTapGesture);
+            five.on('wantsChangeMode', this.onFiveWantsChangeMode);
             five.on('modelShownFloorChange', this.onModelShownFloorChange);
         }
         removeEventListener() {
             const five = this.five;
             this.hasAddedEventListener = false;
             // 注意这里并没有消除 dispose 的监听
+            five.off('modelLoaded', this.onFiveModelLoaded);
             five.off('modeChange', this.onFiveModeChange);
+            five.off('interiaPan', this.onFiveInteriaPan);
             five.off('panoArrived', this.onFivePanoArrived);
             five.off('cameraUpdate', this.onFiveCameraUpdate);
             five.off('wantsGesture', this.onFiveWantsGesture);
-            five.off('wantsMoveToPano', this.onFiveWantsMoveToPano);
-            five.off('initAnimationEnded', this.onFiveInitAnimationEnded);
+            five.off('wantsPanGesture', this.onFiveWantsPanGesture);
+            five.off('wantsTapGesture', this.onFiveWantsTapGesture);
+            five.off('wantsChangeMode', this.onFiveWantsChangeMode);
             five.off('modelShownFloorChange', this.onModelShownFloorChange);
         }
-        /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
-         *
-         * - TODO: 等 selector 功能下掉之后删除这个逻辑
-         */
-        initContainer() {
-            this.container.classList.add('floorplan-plugin');
-            Object.assign(this.container.style, {
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translate3d(-50%, -50%, 10px)',
-                zIndex: 10,
-                pointerEvents: 'none',
-                'will-change': 'width, height',
-            });
-            this.five.addExtraElement(this.container);
-        }
         render(duration) {
             if (!this.state.enabled)
                 return;
@@ -5245,887 +5542,33 @@
         }
     }
 
-    const TopviewFloorplanPlugin = (five, params) => {
-        return new Controller$3(five, params);
+    const ModelFloorplanPlugin = (five, params) => {
+        return new Controller$4(five, params);
     };
 
-    /**
-     * 创建一个防抖动函数，该函数在高频调用时会每隔 wait 毫秒后调用 func 方法
-     * `throttle` 会在第一次调用时立刻调用一次
-     * @param func - 要防抖动的函数
-     * @param wait - 需要延迟的毫秒数
+    /** 当前 five 的相机视角是否满足户型图自动隐藏条件
+     *
+     * @description 水平旋转角大于正负 5 度 || 俯仰角度大于 5 度
+     *
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function throttle(func, wait = 200) {
-        let last;
-        return function (...args) {
-            if (last)
-                return;
-            func(...args);
-            last = setTimeout(function () {
-                last = null;
-            }, wait);
-        };
-    }
-
-    /* src/floorplan/PanoFloorplanRadarPlugin/Components/Camera.svelte generated by Svelte v3.49.0 */
-
-    function add_css$a(target) {
-    	internal.append_styles(target, "svelte-1ty3s4p", ".plugin-radar__camera-wrapper.svelte-1ty3s4p{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-1ty3s4p{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-1ty3s4p{position:absolute;left:-0.78125rem;top:-0.78125rem;width:0.88542rem;height:0.88542rem;transform-origin:0.78125rem 0.78125rem;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
+    function shouldFloorplanHideWithPose(pose) {
+        const { latitude, longitude } = pose;
+        const latitudeHide = Math.abs(latitude - Math.PI / 2) > (5 * Math.PI) / 180;
+        const longitudeHide = longitude > 5 * (Math.PI / 180) && longitude < 355 * (Math.PI / 180);
+        return latitudeHide || longitudeHide;
     }
-
-    function create_fragment$c(ctx) {
-    	let div2;
-    	let div1;
-    	let div0;
-
-    	return {
-    		c() {
-    			div2 = internal.element("div");
-    			div1 = internal.element("div");
-    			div0 = internal.element("div");
-    			internal.attr(div0, "class", "plugin-radar__camera-rotate svelte-1ty3s4p");
-    			internal.set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
-    			internal.set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
-    			internal.attr(div1, "class", "plugin-radar__camera-position svelte-1ty3s4p");
-    			internal.set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
-    			internal.attr(div2, "class", "plugin-radar__camera-wrapper svelte-1ty3s4p");
-    		},
-    		m(target, anchor) {
-    			internal.insert(target, div2, anchor);
-    			internal.append(div2, div1);
-    			internal.append(div1, div0);
-    		},
-    		p(ctx, [dirty]) {
-    			if (dirty & /*cameraImageUrl*/ 1) {
-    				internal.set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
-    			}
-
-    			if (dirty & /*rotateTransform*/ 2) {
-    				internal.set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
-    			}
-
-    			if (dirty & /*positionTransform*/ 4) {
-    				internal.set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
-    			}
-    		},
-    		i: internal.noop,
-    		o: internal.noop,
-    		d(detaching) {
-    			if (detaching) internal.detach(div2);
-    		}
-    	};
+    /** 当前 five 的相机视角是否满足户型图自动展示隐藏条件
+     *
+     * @description 水平旋转角正负 30 度 && 俯仰角度小于 10 度
+     *
+     */
+    function shouldFloorplanShowWithPose(pose) {
+        const { latitude, longitude } = pose;
+        const latitudeVisible = Math.abs(latitude - Math.PI / 2) < (10 * Math.PI) / 180;
+        const longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
+        return latitudeVisible && longitudeVisible;
     }
-
-    function getCameraRotateTransform(longitude) {
-    	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
-    	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
-
-    	return `rotate(${rotate}deg)`;
-    }
-
-    function instance$c($$self, $$props, $$invalidate) {
-    	let positionTransform;
-    	let rotateTransform;
-    	let { five } = $$props;
-    	let { pxmm } = $$props;
-    	let { floorplanData } = $$props;
-    	let { cameraImageUrl } = $$props;
-    	let panoIndex = five.getCurrentState().panoIndex;
-    	let longitude = five.getCurrentState().longitude;
-
-    	/** 获取相机在当前 Five 状态下的位移 */
-    	function getCameraPositionTransform(floorplanData, panoIndex) {
-    		const bounding = floorplanData.bounding;
-    		const floorplanObserver = floorplanData.observers[panoIndex];
-    		if (!floorplanObserver) return '';
-    		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
-    		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
-    		const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
-    		const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
-    		return `translate(${left}px, ${top}px)`;
-    	}
-
-    	function onFivePanoWillArrive(_panoIndex) {
-    		$$invalidate(6, panoIndex = _panoIndex);
-    	}
-
-    	const onFiveCameraDirectionUpdate = throttle(
-    		pose => {
-    			$$invalidate(7, longitude = pose.longitude);
-    		},
-    		1000 / 60
-    	);
-
-    	svelte.onMount(() => {
-    		five.on('panoWillArrive', onFivePanoWillArrive);
-    		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
-
-    		return function dispose() {
-    			five.off('panoWillArrive', onFivePanoWillArrive);
-    			five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
-    		};
-    	});
-
-    	$$self.$$set = $$props => {
-    		if ('five' in $$props) $$invalidate(3, five = $$props.five);
-    		if ('pxmm' in $$props) $$invalidate(4, pxmm = $$props.pxmm);
-    		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
-    		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
-    	};
-
-    	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*floorplanData, panoIndex*/ 96) {
-    			// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
-    			$$invalidate(2, positionTransform = getCameraPositionTransform(floorplanData, panoIndex));
-    		}
-
-    		if ($$self.$$.dirty & /*longitude*/ 128) {
-    			$$invalidate(1, rotateTransform = getCameraRotateTransform(longitude));
-    		}
-    	};
-
-    	return [
-    		cameraImageUrl,
-    		rotateTransform,
-    		positionTransform,
-    		five,
-    		pxmm,
-    		floorplanData,
-    		panoIndex,
-    		longitude
-    	];
-    }
-
-    class Camera extends internal.SvelteComponent {
-    	constructor(options) {
-    		super();
-
-    		internal.init(
-    			this,
-    			options,
-    			instance$c,
-    			create_fragment$c,
-    			internal.safe_not_equal,
-    			{
-    				five: 3,
-    				pxmm: 4,
-    				floorplanData: 5,
-    				cameraImageUrl: 0
-    			},
-    			add_css$a
-    		);
-    	}
-    }
-
-    /* src/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/ExtraObjects.svelte generated by Svelte v3.49.0 */
-
-    function add_css$9(target) {
-    	internal.append_styles(target, "svelte-1i87fz7", ".plugin-pano-floorplan__extra-objects.svelte-1i87fz7{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-1i87fz7{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-1i87fz7{transform:translate(-50%, -50%)}");
-    }
-
-    function get_each_context$5(ctx, list, i) {
-    	const child_ctx = ctx.slice();
-    	child_ctx[1] = list[i];
-    	return child_ctx;
-    }
-
-    // (5:2) {#each extraObjects as extraObject (extraObject.id)}
-    function create_each_block$5(key_1, ctx) {
-    	let div1;
-    	let div0;
-    	let style_width = `${/*extraObject*/ ctx[1].icon.width / 16}rem`;
-    	let style_height = `${/*extraObject*/ ctx[1].icon.height / 16}rem`;
-    	let t;
-    	let style_top = `${/*extraObject*/ ctx[1].positionInImage.y * 100}%`;
-    	let style_left = `${/*extraObject*/ ctx[1].positionInImage.x * 100}%`;
-
-    	return {
-    		key: key_1,
-    		first: null,
-    		c() {
-    			div1 = internal.element("div");
-    			div0 = internal.element("div");
-    			t = internal.space();
-    			internal.attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-1i87fz7");
-    			internal.set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
-    			internal.set_style(div0, "width", style_width, false);
-    			internal.set_style(div0, "height", style_height, false);
-    			internal.attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-1i87fz7");
-    			internal.set_style(div1, "top", style_top, false);
-    			internal.set_style(div1, "left", style_left, false);
-    			this.first = div1;
-    		},
-    		m(target, anchor) {
-    			internal.insert(target, div1, anchor);
-    			internal.append(div1, div0);
-    			internal.append(div1, t);
-    		},
-    		p(new_ctx, dirty) {
-    			ctx = new_ctx;
-
-    			if (dirty & /*extraObjects*/ 1) {
-    				internal.set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
-    			}
-
-    			if (dirty & /*extraObjects*/ 1 && style_width !== (style_width = `${/*extraObject*/ ctx[1].icon.width / 16}rem`)) {
-    				internal.set_style(div0, "width", style_width, false);
-    			}
-
-    			if (dirty & /*extraObjects*/ 1 && style_height !== (style_height = `${/*extraObject*/ ctx[1].icon.height / 16}rem`)) {
-    				internal.set_style(div0, "height", style_height, false);
-    			}
-
-    			if (dirty & /*extraObjects*/ 1 && style_top !== (style_top = `${/*extraObject*/ ctx[1].positionInImage.y * 100}%`)) {
-    				internal.set_style(div1, "top", style_top, false);
-    			}
-
-    			if (dirty & /*extraObjects*/ 1 && style_left !== (style_left = `${/*extraObject*/ ctx[1].positionInImage.x * 100}%`)) {
-    				internal.set_style(div1, "left", style_left, false);
-    			}
-    		},
-    		d(detaching) {
-    			if (detaching) internal.detach(div1);
-    		}
-    	};
-    }
-
-    function create_fragment$b(ctx) {
-    	let div;
-    	let each_blocks = [];
-    	let each_1_lookup = new Map();
-    	let each_value = /*extraObjects*/ ctx[0];
-    	const get_key = ctx => /*extraObject*/ ctx[1].id;
-
-    	for (let i = 0; i < each_value.length; i += 1) {
-    		let child_ctx = get_each_context$5(ctx, each_value, i);
-    		let key = get_key(child_ctx);
-    		each_1_lookup.set(key, each_blocks[i] = create_each_block$5(key, child_ctx));
-    	}
-
-    	return {
-    		c() {
-    			div = internal.element("div");
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].c();
-    			}
-
-    			internal.attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-1i87fz7");
-    		},
-    		m(target, anchor) {
-    			internal.insert(target, div, anchor);
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].m(div, null);
-    			}
-    		},
-    		p(ctx, [dirty]) {
-    			if (dirty & /*extraObjects*/ 1) {
-    				each_value = /*extraObjects*/ ctx[0];
-    				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.destroy_block, create_each_block$5, null, get_each_context$5);
-    			}
-    		},
-    		i: internal.noop,
-    		o: internal.noop,
-    		d(detaching) {
-    			if (detaching) internal.detach(div);
-
-    			for (let i = 0; i < each_blocks.length; i += 1) {
-    				each_blocks[i].d();
-    			}
-    		}
-    	};
-    }
-
-    function instance$b($$self, $$props, $$invalidate) {
-    	let { extraObjects = [] } = $$props;
-
-    	$$self.$$set = $$props => {
-    		if ('extraObjects' in $$props) $$invalidate(0, extraObjects = $$props.extraObjects);
-    	};
-
-    	return [extraObjects];
-    }
-
-    class ExtraObjects extends internal.SvelteComponent {
-    	constructor(options) {
-    		super();
-    		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { extraObjects: 0 }, add_css$9);
-    	}
-    }
-
-    /* src/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/CurrentFloor.svelte generated by Svelte v3.49.0 */
-
-    function create_if_block$4(ctx) {
-    	let highlight;
-    	let current;
-
-    	const highlight_spread_levels = [
-    		{
-    			five: /*five*/ ctx[0],
-    			pxmm: /*pxmm*/ ctx[1],
-    			floorIndex: /*floorIndex*/ ctx[2],
-    			floorplanData: /*floorplanData*/ ctx[4],
-    			onRoomHeightClick: /*onRoomHeightClick*/ ctx[6]
-    		}
-    	];
-
-    	let highlight_props = {};
-
-    	for (let i = 0; i < highlight_spread_levels.length; i += 1) {
-    		highlight_props = internal.assign(highlight_props, highlight_spread_levels[i]);
-    	}
-
-    	highlight = new RoomHighlight({ props: highlight_props });
-
-    	return {
-    		c() {
-    			internal.create_component(highlight.$$.fragment);
-    		},
-    		m(target, anchor) {
-    			internal.mount_component(highlight, target, anchor);
-    			current = true;
-    		},
-    		p(ctx, dirty) {
-    			const highlight_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, onRoomHeightClick*/ 87)
-    			? internal.get_spread_update(highlight_spread_levels, [
-    					{
-    						five: /*five*/ ctx[0],
-    						pxmm: /*pxmm*/ ctx[1],
-    						floorIndex: /*floorIndex*/ ctx[2],
-    						floorplanData: /*floorplanData*/ ctx[4],
-    						onRoomHeightClick: /*onRoomHeightClick*/ ctx[6]
-    					}
-    				])
-    			: {};
-
-    			highlight.$set(highlight_changes);
-    		},
-    		i(local) {
-    			if (current) return;
-    			internal.transition_in(highlight.$$.fragment, local);
-    			current = true;
-    		},
-    		o(local) {
-    			internal.transition_out(highlight.$$.fragment, local);
-    			current = false;
-    		},
-    		d(detaching) {
-    			internal.destroy_component(highlight, detaching);
-    		}
-    	};
-    }
-
-    function create_fragment$a(ctx) {
-    	let baseimage;
-    	let t0;
-    	let extraobjects;
-    	let t1;
-    	let if_block_anchor;
-    	let current;
-
-    	const baseimage_spread_levels = [
-    		{
-    			floorIndex: /*floorIndex*/ ctx[2],
-    			floorplanData: /*floorplanData*/ ctx[4]
-    		}
-    	];
-
-    	let baseimage_props = {};
-
-    	for (let i = 0; i < baseimage_spread_levels.length; i += 1) {
-    		baseimage_props = internal.assign(baseimage_props, baseimage_spread_levels[i]);
-    	}
-
-    	baseimage = new BaseImage({ props: baseimage_props });
-
-    	extraobjects = new ExtraObjects({
-    			props: {
-    				extraObjects: /*currentFloorExtraObjects*/ ctx[5]
-    			}
-    		});
-
-    	let if_block = /*hoverEnable*/ ctx[3] && create_if_block$4(ctx);
-
-    	return {
-    		c() {
-    			internal.create_component(baseimage.$$.fragment);
-    			t0 = internal.space();
-    			internal.create_component(extraobjects.$$.fragment);
-    			t1 = internal.space();
-    			if (if_block) if_block.c();
-    			if_block_anchor = internal.empty();
-    		},
-    		m(target, anchor) {
-    			internal.mount_component(baseimage, target, anchor);
-    			internal.insert(target, t0, anchor);
-    			internal.mount_component(extraobjects, target, anchor);
-    			internal.insert(target, t1, anchor);
-    			if (if_block) if_block.m(target, anchor);
-    			internal.insert(target, if_block_anchor, anchor);
-    			current = true;
-    		},
-    		p(ctx, [dirty]) {
-    			const baseimage_changes = (dirty & /*floorIndex, floorplanData*/ 20)
-    			? internal.get_spread_update(baseimage_spread_levels, [
-    					{
-    						floorIndex: /*floorIndex*/ ctx[2],
-    						floorplanData: /*floorplanData*/ ctx[4]
-    					}
-    				])
-    			: {};
-
-    			baseimage.$set(baseimage_changes);
-    			const extraobjects_changes = {};
-    			if (dirty & /*currentFloorExtraObjects*/ 32) extraobjects_changes.extraObjects = /*currentFloorExtraObjects*/ ctx[5];
-    			extraobjects.$set(extraobjects_changes);
-
-    			if (/*hoverEnable*/ ctx[3]) {
-    				if (if_block) {
-    					if_block.p(ctx, dirty);
-
-    					if (dirty & /*hoverEnable*/ 8) {
-    						internal.transition_in(if_block, 1);
-    					}
-    				} else {
-    					if_block = create_if_block$4(ctx);
-    					if_block.c();
-    					internal.transition_in(if_block, 1);
-    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-    				}
-    			} else if (if_block) {
-    				internal.group_outros();
-
-    				internal.transition_out(if_block, 1, 1, () => {
-    					if_block = null;
-    				});
-
-    				internal.check_outros();
-    			}
-    		},
-    		i(local) {
-    			if (current) return;
-    			internal.transition_in(baseimage.$$.fragment, local);
-    			internal.transition_in(extraobjects.$$.fragment, local);
-    			internal.transition_in(if_block);
-    			current = true;
-    		},
-    		o(local) {
-    			internal.transition_out(baseimage.$$.fragment, local);
-    			internal.transition_out(extraobjects.$$.fragment, local);
-    			internal.transition_out(if_block);
-    			current = false;
-    		},
-    		d(detaching) {
-    			internal.destroy_component(baseimage, detaching);
-    			if (detaching) internal.detach(t0);
-    			internal.destroy_component(extraobjects, detaching);
-    			if (detaching) internal.detach(t1);
-    			if (if_block) if_block.d(detaching);
-    			if (detaching) internal.detach(if_block_anchor);
-    		}
-    	};
-    }
-
-    function instance$a($$self, $$props, $$invalidate) {
-    	let currentFloorExtraObjects;
-    	let { five } = $$props;
-    	let { pxmm } = $$props;
-    	let { floorIndex } = $$props;
-    	let { hoverEnable } = $$props;
-    	let { floorplanData } = $$props;
-    	let { extraObjects = [] } = $$props;
-    	const onRoomHeightClick = undefined;
-
-    	$$self.$$set = $$props => {
-    		if ('five' in $$props) $$invalidate(0, five = $$props.five);
-    		if ('pxmm' in $$props) $$invalidate(1, pxmm = $$props.pxmm);
-    		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
-    		if ('hoverEnable' in $$props) $$invalidate(3, hoverEnable = $$props.hoverEnable);
-    		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
-    		if ('extraObjects' in $$props) $$invalidate(7, extraObjects = $$props.extraObjects);
-    	};
-
-    	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*extraObjects, floorIndex*/ 132) {
-    			$$invalidate(5, currentFloorExtraObjects = extraObjects === null || extraObjects === void 0
-    			? void 0
-    			: extraObjects.filter(object => object.floorIndex === floorIndex));
-    		}
-    	};
-
-    	return [
-    		five,
-    		pxmm,
-    		floorIndex,
-    		hoverEnable,
-    		floorplanData,
-    		currentFloorExtraObjects,
-    		onRoomHeightClick,
-    		extraObjects
-    	];
-    }
-
-    class CurrentFloor extends internal.SvelteComponent {
-    	constructor(options) {
-    		super();
-
-    		internal.init(this, options, instance$a, create_fragment$a, internal.safe_not_equal, {
-    			five: 0,
-    			pxmm: 1,
-    			floorIndex: 2,
-    			hoverEnable: 3,
-    			floorplanData: 4,
-    			extraObjects: 7
-    		});
-    	}
-    }
-
-    /* src/floorplan/PanoFloorplanRadarPlugin/Components/Main.svelte generated by Svelte v3.49.0 */
-
-    function add_css$8(target) {
-    	internal.append_styles(target, "svelte-1mvqyqq", ".plugin-floorplan-radar.svelte-1mvqyqq{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-1mvqyqq{position:relative}");
-    }
-
-    // (41:0) {#if visible}
-    function create_if_block$3(ctx) {
-    	let div;
-    	let div_resize_listener;
-    	let current;
-    	let if_block = /*clientWidth*/ ctx[6] !== 0 && create_if_block_1$1(ctx);
-
-    	return {
-    		c() {
-    			div = internal.element("div");
-    			if (if_block) if_block.c();
-    			internal.attr(div, "class", "plugin-floorplan-radar svelte-1mvqyqq");
-    			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[12].call(div));
-    		},
-    		m(target, anchor) {
-    			internal.insert(target, div, anchor);
-    			if (if_block) if_block.m(div, null);
-    			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[12].bind(div));
-    			current = true;
-    		},
-    		p(ctx, dirty) {
-    			if (/*clientWidth*/ ctx[6] !== 0) {
-    				if (if_block) {
-    					if_block.p(ctx, dirty);
-
-    					if (dirty & /*clientWidth*/ 64) {
-    						internal.transition_in(if_block, 1);
-    					}
-    				} else {
-    					if_block = create_if_block_1$1(ctx);
-    					if_block.c();
-    					internal.transition_in(if_block, 1);
-    					if_block.m(div, null);
-    				}
-    			} else if (if_block) {
-    				internal.group_outros();
-
-    				internal.transition_out(if_block, 1, 1, () => {
-    					if_block = null;
-    				});
-
-    				internal.check_outros();
-    			}
-    		},
-    		i(local) {
-    			if (current) return;
-    			internal.transition_in(if_block);
-    			current = true;
-    		},
-    		o(local) {
-    			internal.transition_out(if_block);
-    			current = false;
-    		},
-    		d(detaching) {
-    			if (detaching) internal.detach(div);
-    			if (if_block) if_block.d();
-    			div_resize_listener();
-    		}
-    	};
-    }
-
-    // (43:4) {#if clientWidth !== 0}
-    function create_if_block_1$1(ctx) {
-    	let div;
-    	let currentfloor;
-    	let t;
-    	let camera;
-    	let style_width = `${/*contentWidth*/ ctx[8]}px`;
-    	let style_height = `${/*contentHeight*/ ctx[11]}px`;
-    	let current;
-
-    	const currentfloor_spread_levels = [
-    		{
-    			five: /*five*/ ctx[0],
-    			pxmm: /*pxmm*/ ctx[9],
-    			floorIndex: /*floorIndex*/ ctx[10],
-    			floorplanData: /*floorplanData*/ ctx[3],
-    			hoverEnable: /*hoverEnable*/ ctx[2],
-    			extraObjects: /*extraObjects*/ ctx[5]
-    		}
-    	];
-
-    	let currentfloor_props = {};
-
-    	for (let i = 0; i < currentfloor_spread_levels.length; i += 1) {
-    		currentfloor_props = internal.assign(currentfloor_props, currentfloor_spread_levels[i]);
-    	}
-
-    	currentfloor = new CurrentFloor({ props: currentfloor_props });
-
-    	const camera_spread_levels = [
-    		{
-    			pxmm: /*pxmm*/ ctx[9],
-    			five: /*five*/ ctx[0],
-    			floorplanData: /*floorplanData*/ ctx[3],
-    			cameraImageUrl: /*cameraImageUrl*/ ctx[4]
-    		}
-    	];
-
-    	let camera_props = {};
-
-    	for (let i = 0; i < camera_spread_levels.length; i += 1) {
-    		camera_props = internal.assign(camera_props, camera_spread_levels[i]);
-    	}
-
-    	camera = new Camera({ props: camera_props });
-
-    	return {
-    		c() {
-    			div = internal.element("div");
-    			internal.create_component(currentfloor.$$.fragment);
-    			t = internal.space();
-    			internal.create_component(camera.$$.fragment);
-    			internal.attr(div, "class", "plugin-floorplan-radar-container svelte-1mvqyqq");
-    			internal.set_style(div, "width", style_width, false);
-    			internal.set_style(div, "height", style_height, false);
-    		},
-    		m(target, anchor) {
-    			internal.insert(target, div, anchor);
-    			internal.mount_component(currentfloor, div, null);
-    			internal.append(div, t);
-    			internal.mount_component(camera, div, null);
-    			current = true;
-    		},
-    		p(ctx, dirty) {
-    			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects*/ 1581)
-    			? internal.get_spread_update(currentfloor_spread_levels, [
-    					{
-    						five: /*five*/ ctx[0],
-    						pxmm: /*pxmm*/ ctx[9],
-    						floorIndex: /*floorIndex*/ ctx[10],
-    						floorplanData: /*floorplanData*/ ctx[3],
-    						hoverEnable: /*hoverEnable*/ ctx[2],
-    						extraObjects: /*extraObjects*/ ctx[5]
-    					}
-    				])
-    			: {};
-
-    			currentfloor.$set(currentfloor_changes);
-
-    			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 537)
-    			? internal.get_spread_update(camera_spread_levels, [
-    					{
-    						pxmm: /*pxmm*/ ctx[9],
-    						five: /*five*/ ctx[0],
-    						floorplanData: /*floorplanData*/ ctx[3],
-    						cameraImageUrl: /*cameraImageUrl*/ ctx[4]
-    					}
-    				])
-    			: {};
-
-    			camera.$set(camera_changes);
-
-    			if (dirty & /*contentWidth*/ 256 && style_width !== (style_width = `${/*contentWidth*/ ctx[8]}px`)) {
-    				internal.set_style(div, "width", style_width, false);
-    			}
-
-    			if (dirty & /*contentHeight*/ 2048 && style_height !== (style_height = `${/*contentHeight*/ ctx[11]}px`)) {
-    				internal.set_style(div, "height", style_height, false);
-    			}
-    		},
-    		i(local) {
-    			if (current) return;
-    			internal.transition_in(currentfloor.$$.fragment, local);
-    			internal.transition_in(camera.$$.fragment, local);
-    			current = true;
-    		},
-    		o(local) {
-    			internal.transition_out(currentfloor.$$.fragment, local);
-    			internal.transition_out(camera.$$.fragment, local);
-    			current = false;
-    		},
-    		d(detaching) {
-    			if (detaching) internal.detach(div);
-    			internal.destroy_component(currentfloor);
-    			internal.destroy_component(camera);
-    		}
-    	};
-    }
-
-    function create_fragment$9(ctx) {
-    	let if_block_anchor;
-    	let current;
-    	let if_block = /*visible*/ ctx[1] && create_if_block$3(ctx);
-
-    	return {
-    		c() {
-    			if (if_block) if_block.c();
-    			if_block_anchor = internal.empty();
-    		},
-    		m(target, anchor) {
-    			if (if_block) if_block.m(target, anchor);
-    			internal.insert(target, if_block_anchor, anchor);
-    			current = true;
-    		},
-    		p(ctx, [dirty]) {
-    			if (/*visible*/ ctx[1]) {
-    				if (if_block) {
-    					if_block.p(ctx, dirty);
-
-    					if (dirty & /*visible*/ 2) {
-    						internal.transition_in(if_block, 1);
-    					}
-    				} else {
-    					if_block = create_if_block$3(ctx);
-    					if_block.c();
-    					internal.transition_in(if_block, 1);
-    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
-    				}
-    			} else if (if_block) {
-    				internal.group_outros();
-
-    				internal.transition_out(if_block, 1, 1, () => {
-    					if_block = null;
-    				});
-
-    				internal.check_outros();
-    			}
-    		},
-    		i(local) {
-    			if (current) return;
-    			internal.transition_in(if_block);
-    			current = true;
-    		},
-    		o(local) {
-    			internal.transition_out(if_block);
-    			current = false;
-    		},
-    		d(detaching) {
-    			if (if_block) if_block.d(detaching);
-    			if (detaching) internal.detach(if_block_anchor);
-    		}
-    	};
-    }
-
-    function instance$9($$self, $$props, $$invalidate) {
-    	let { five } = $$props;
-    	let { visible } = $$props;
-    	let { hoverEnable } = $$props;
-    	let { floorplanData } = $$props;
-    	let { cameraImageUrl } = $$props;
-    	let { extraObjects = [] } = $$props;
-    	let pxmm = 0;
-    	let floorIndex = 0;
-    	let clientWidth = 0;
-    	let clientHeight = 0;
-    	let contentWidth = 0;
-    	let contentHeight = 0;
-
-    	function handlePanoArrived(panoIndex) {
-    		$$invalidate(10, floorIndex = five.work.observers[panoIndex].floorIndex);
-    	}
-
-    	svelte.onMount(() => {
-    		five.on('panoArrived', handlePanoArrived);
-
-    		return () => {
-    			five.off('panoArrived', handlePanoArrived);
-    		};
-    	});
-
-    	function div_elementresize_handler() {
-    		clientWidth = this.clientWidth;
-    		clientHeight = this.clientHeight;
-    		$$invalidate(6, clientWidth);
-    		$$invalidate(7, clientHeight);
-    	}
-
-    	$$self.$$set = $$props => {
-    		if ('five' in $$props) $$invalidate(0, five = $$props.five);
-    		if ('visible' in $$props) $$invalidate(1, visible = $$props.visible);
-    		if ('hoverEnable' in $$props) $$invalidate(2, hoverEnable = $$props.hoverEnable);
-    		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
-    		if ('cameraImageUrl' in $$props) $$invalidate(4, cameraImageUrl = $$props.cameraImageUrl);
-    		if ('extraObjects' in $$props) $$invalidate(5, extraObjects = $$props.extraObjects);
-    	};
-
-    	$$self.$$.update = () => {
-    		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 456) {
-    			{
-    				const size = Math.min(clientWidth, clientHeight);
-    				const { max, min } = floorplanData.bounding;
-    				const boundingWidth = max.x - min.x;
-    				const boundingHeight = max.y - min.y;
-
-    				const contentSize = (function getSize() {
-    					if (boundingWidth > boundingHeight) return [size, size / boundingWidth * boundingHeight];
-    					return [size / boundingHeight * boundingWidth, size];
-    				})();
-
-    				$$invalidate(8, contentWidth = contentSize[0]);
-    				$$invalidate(11, contentHeight = contentSize[1]);
-    				$$invalidate(9, pxmm = contentWidth / boundingWidth);
-    			}
-    		}
-    	};
-
-    	return [
-    		five,
-    		visible,
-    		hoverEnable,
-    		floorplanData,
-    		cameraImageUrl,
-    		extraObjects,
-    		clientWidth,
-    		clientHeight,
-    		contentWidth,
-    		pxmm,
-    		floorIndex,
-    		contentHeight,
-    		div_elementresize_handler
-    	];
-    }
-
-    class Main extends internal.SvelteComponent {
-    	constructor(options) {
-    		super();
-
-    		internal.init(
-    			this,
-    			options,
-    			instance$9,
-    			create_fragment$9,
-    			internal.safe_not_equal,
-    			{
-    				five: 0,
-    				visible: 1,
-    				hoverEnable: 2,
-    				floorplanData: 3,
-    				cameraImageUrl: 4,
-    				extraObjects: 5
-    			},
-    			add_css$8
-    		);
-    	}
-    }
-
-    class Controller$2 extends Controller$4 {
+    class Controller$3 extends Controller$5 {
         constructor(five, params) {
             super(five);
             // =============== public properties =================
@@ -6133,115 +5576,517 @@
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: 'panoFloorplanRadarPlugin'
+                value: 'modelFloorplanPlugin'
+            });
+            Object.defineProperty(this, "state", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            // =============== private properties =================
+            Object.defineProperty(this, "data", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            /** 展示户型图时，需要正确的状态 */
+            Object.defineProperty(this, "showState", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            /** show 动画的公共 Promise */
+            Object.defineProperty(this, "showPromise", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            Object.defineProperty(this, "app", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: undefined
+            });
+            Object.defineProperty(this, "panoIndex", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: 0
+            });
+            Object.defineProperty(this, "floorIndex", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: 0
+            });
+            Object.defineProperty(this, "selector", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            /** 公共 Promise 的 reject 方法 */
+            Object.defineProperty(this, "showRejection", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            /** 户型图父容器 */
+            Object.defineProperty(this, "wrapper", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: void 0
+            });
+            /** 户型图主容器 */
+            Object.defineProperty(this, "container", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: document.createElement('div')
+            });
+            /** 展示户型图图前，Five 的 Panorama Longitude */
+            Object.defineProperty(this, "lastPanoramaLongitude", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: 0
+            });
+            /** 户型图大小 */
+            Object.defineProperty(this, "size", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: { width: 0, height: 0 }
+            });
+            /** 是否已经执行过事件监听 */
+            Object.defineProperty(this, "hasAddedEventListener", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: false
+            });
+            /** 上一次隐藏是否是用户调用了 hide 导致的 */
+            Object.defineProperty(this, "isHiddenByHideFunc", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: false
+            });
+            /** 销毁插件 */
+            Object.defineProperty(this, "dispose", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    var _a, _b;
+                    this.removeEventListener();
+                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                    this.app = undefined;
+                    (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+                    this.data = undefined;
+                    this.wrapper = undefined;
+                    this.selector = undefined;
+                    this.hooks.emit('dispose');
+                }
+            });
+            /** 展示户型图
+             * 1. show 函数大部分情况下需要耗时
+             * 2. 如果当前已经在展示中，将不会触发任何事件
+             * 3. 如果展示过程被中断，将抛出错误
+             * 4. 多次调用 show 方法，只会触发一次 showAnimationEnded 事件，但是展示结果会取决于最后一次调用参数
+             * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
+             * @param opts.floorIndex 楼层
+             * @param opts.modelOpacity 模型透明度
+             * @param opts.immediately 是否立即展示
+             * @param opts.isAutoShow 是否是自动展示
+             * @param opts.userAction 是否是用户行为
+             */
+            Object.defineProperty(this, "show", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: async (options = {}) => {
+                    if (!this.state.enabled)
+                        return;
+                    // 已经展示完成了，不做任何操作
+                    if (!this.showPromise && this.state.visible)
+                        return;
+                    const userAction = options.userAction !== undefined ? options.userAction : true;
+                    this.updateState({ visible: true }, userAction);
+                    this._show(options);
+                }
+            });
+            /** 隐藏户型图 */
+            Object.defineProperty(this, "hide", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: async (options = {}) => {
+                    if (!this.state.enabled)
+                        return;
+                    this.isHiddenByHideFunc = true;
+                    if (this.state.visible === false)
+                        return;
+                    this.updateState({ visible: false }, options.userAction || true);
+                    this._hide(options);
+                }
+            });
+            /** 更新户型图大小 */
+            Object.defineProperty(this, "updateSize", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    if (!this.data)
+                        return;
+                    if (!checkShowState(this.five, this.showState))
+                        return;
+                    if (!this.container || !this.wrapper)
+                        return;
+                    // 计算户型图展示大小
+                    const { min, max } = this.data.bounding;
+                    const width = max.x - min.x;
+                    const height = max.y - min.y;
+                    // 每毫米对应的 px 值
+                    const options = this.state.config.attachedTo ? { attachedTo: this.state.config.attachedTo } : undefined;
+                    const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
+                    const _width = Math.ceil(width * pxmm);
+                    const _height = Math.ceil(height * pxmm);
+                    if (this.size.width === _width && this.size.height === _height)
+                        return;
+                    this.container.style.width = _width + 'px';
+                    this.container.style.height = _height + 'px';
+                    this.size = { width: _width, height: _height };
+                }
+            });
+            Object.defineProperty(this, "_disable", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (options) => {
+                    var _a, _b, _c;
+                    const { userAction } = options;
+                    this.hooks.emit('disable', { userAction });
+                    // ===== 处理展示过程中 disable =====
+                    (_a = this.showRejection) === null || _a === void 0 ? void 0 : _a.call(this, FloorplanErrorType.BreakOffByDisable);
+                    this.showPromise = undefined;
+                    (_b = this.app) === null || _b === void 0 ? void 0 : _b.$destroy();
+                    this.app = undefined;
+                    (_c = this.container) === null || _c === void 0 ? void 0 : _c.remove();
+                    this.removeEventListener();
+                }
             });
-            Object.defineProperty(this, "state", {
+            Object.defineProperty(this, "_enable", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: void 0
+                value: (options) => {
+                    const { userAction } = options;
+                    this.addEventListener();
+                    if (!this.wrapper)
+                        return;
+                    this.wrapper.append(this.container);
+                    this.hooks.emit('enable', { userAction });
+                    if (this.state.visible)
+                        this._show({ userAction });
+                }
             });
-            // =============== protected properties =================
-            Object.defineProperty(this, "data", {
+            Object.defineProperty(this, "_show", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: void 0
+                value: async (options) => {
+                    var _a;
+                    if (!this.state.enabled)
+                        return;
+                    if (!((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded))
+                        throw new Error(FloorplanErrorType.ModelNotLoaded);
+                    if (!this.data)
+                        throw new Error(FloorplanErrorType.DataNotLoaded);
+                    this.isHiddenByHideFunc = false;
+                    // ===== 参数合并 =====
+                    const baseShowOpts = {
+                        floorIndex: this.floorIndex,
+                        modelOpacity: this.state.config.modelOpacity,
+                        immediately: false,
+                        isAutoShow: false,
+                        userAction: true,
+                    };
+                    const mergedOptions = Object.assign(Object.assign({}, baseShowOpts), options);
+                    const getShowPromise = async () => {
+                        this.hooks.emit('show', { userAction: mergedOptions.userAction, auto: mergedOptions.isAutoShow });
+                        let hasRejected = false;
+                        let externalErrorMsg;
+                        this.showRejection = (errorMsg) => {
+                            hasRejected = true;
+                            externalErrorMsg = errorMsg;
+                        };
+                        const [correctError] = await to(correctFiveState(this.five, this.showState, mergedOptions.userAction));
+                        if (correctError)
+                            throw correctError;
+                        // 异步结束要判断当前是不是被中断了
+                        if (hasRejected)
+                            throw externalErrorMsg ? new Error(externalErrorMsg) : new Error(FloorplanErrorType.UnknownError);
+                        // 更新户型图大小
+                        this.updateSize();
+                        this.updatePosition();
+                        // 高亮当前楼层，有两个目的
+                        // 1. 点击模型时，可以跳转到当前楼层的点位上
+                        // 2. 当前楼层比较小时，户型图也比较小，如果展示全部楼层，会展示户型图外有一圈模型
+                        this.floorIndex = mergedOptions.floorIndex;
+                        this.five.model.show(this.floorIndex);
+                        // 模型消失, 渲染户型图
+                        const modelOpacity = mergedOptions.modelOpacity;
+                        const renderDuration = mergedOptions.immediately ? 0 : SHOW_ANIME_DURATION;
+                        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+                        this.render(renderDuration);
+                    };
+                    this.showPromise = getShowPromise()
+                        .then(() => {
+                        this.hooks.emit('showAnimationEnded', {
+                            auto: mergedOptions.isAutoShow,
+                            userAction: mergedOptions.userAction,
+                        });
+                    })
+                        .catch((error) => {
+                        this.updateState({ visible: false }, mergedOptions.userAction);
+                        // 自动展示的报错内部处理
+                        if (mergedOptions.isAutoShow)
+                            return;
+                        // 非自动展示的报错继续向外抛出
+                        if (error instanceof Error)
+                            throw error;
+                    })
+                        .finally(() => {
+                        this.showPromise = undefined;
+                        this.showRejection = undefined;
+                    });
+                    return this.showPromise;
+                }
             });
-            // =============== private properties =================
-            Object.defineProperty(this, "app", {
+            Object.defineProperty(this, "_hide", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: void 0
+                value: (options) => {
+                    var _a;
+                    // ===== 处理展示过程中 hide =====
+                    (_a = this.showRejection) === null || _a === void 0 ? void 0 : _a.call(this, FloorplanErrorType.BreakOffByHide);
+                    this.showPromise = undefined;
+                    // ===== 合并参数 =====
+                    const baseOptions = {
+                        userAction: true,
+                        isAutoHide: false,
+                    };
+                    const mergedOptions = Object.assign(Object.assign({}, baseOptions), options);
+                    changeModelCanvasOpacity(this.five, 1, 0);
+                    this.hooks.emit('hide', { auto: mergedOptions.isAutoHide, userAction: mergedOptions.userAction });
+                    this.render();
+                }
             });
-            Object.defineProperty(this, "wrapperSelector", {
+            Object.defineProperty(this, "handleClick", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: ''
+                value: () => {
+                    if (!this.state.visible)
+                        return;
+                    const preventDefault = this.hooks.emit('click');
+                    if (preventDefault)
+                        return false;
+                }
             });
-            Object.defineProperty(this, "wrapper", {
+            /** modelLoaded 之后自动执行 append container 操作  */
+            Object.defineProperty(this, "onFiveModelLoaded", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: null
+                value: () => {
+                    if (this.state.enabled === false)
+                        return;
+                    if (this.wrapper)
+                        return;
+                    if (!this.selector)
+                        return;
+                    const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
+                    if (!wrapper)
+                        throw new Error('不正确的父容器选择器');
+                    this.wrapper = wrapper;
+                    wrapper.append(this.container);
+                }
             });
-            Object.defineProperty(this, "disposed", {
+            /** 更改模型时，自动隐藏户型图 */
+            Object.defineProperty(this, "onFiveModeChange", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: false
+                value: (mode) => {
+                    // 目前 Five modeChange 事件没有暴露 userAction，先拿 false 苟着
+                    if (mode !== this.showState.mode) {
+                        this.updateState({ visible: false }, false);
+                        this._hide({ userAction: false });
+                    }
+                }
             });
-            Object.defineProperty(this, "extraObjects", {
+            /** panoIndex 改变时，更新 floorIndex */
+            Object.defineProperty(this, "onFivePanoArrived", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: []
+                value: (index) => {
+                    var _a;
+                    if (!((_a = this.five) === null || _a === void 0 ? void 0 : _a.work))
+                        return;
+                    this.panoIndex = index;
+                    this.floorIndex = this.five.work.observers[index].floorIndex;
+                }
             });
-            Object.defineProperty(this, "dispose", {
+            /** cameraUpdate 时判断户型图是否应该自动隐藏 */
+            Object.defineProperty(this, "onFiveCameraUpdate", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: () => {
-                    var _a;
-                    this.disposed = true;
-                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
-                    this.wrapper = null;
-                    this.wrapperSelector = '';
-                    this.hooks.emit('dispose');
+                value: (_, userAction) => {
+                    if (!this.state.visible)
+                        return;
+                    // 展示过程中不处理自动隐藏逻辑
+                    if (this.showPromise)
+                        return;
+                    const fiveCurrentState = this.five.getCurrentState();
+                    this.updatePosition();
+                    this.updateSize();
+                    if (shouldFloorplanHideWithPose(fiveCurrentState)) {
+                        this.updateState({ visible: false }, userAction);
+                        this._hide({ userAction });
+                    }
                 }
             });
-            Object.defineProperty(this, "_disable", {
+            /** 户型图展示中，转动三维模型，结束时应该自动修复模型状态 */
+            Object.defineProperty(this, "onFiveWantsPanGesture", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (options) => {
-                    var _a;
-                    const { userAction } = options;
-                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
-                    this.app = undefined;
-                    this.hooks.emit('disable', { userAction });
+                value: (_, isFinal) => {
+                    if (this.five.getCurrentState().mode !== this.showState.mode)
+                        return;
+                    if (this.state.config.autoShowEnable === false)
+                        return;
+                    if (isFinal && this.state.visible) {
+                        this.five.updateCamera(this.showState, 0);
+                        // 禁用掉 isFinal 的 panGesture 行为
+                        // 因为 panGesture 中包含对相机的处理，会跟回调事件中的处理逻辑冲突
+                        // 此行为也会禁用 pan 结束后的惯性处理
+                        return false;
+                    }
+                    // 自动展示户型图
+                    // Five 没有惯性滚动，所以把自动展示的逻辑做在 WantsPanGesture 了
+                    if (isFinal && !this.state.visible) {
+                        // 如果用户调用 hide 方法手动隐藏户型图，则不允许自动展示
+                        if (this.isHiddenByHideFunc)
+                            return;
+                        const fiveCurrentState = this.five.getCurrentState();
+                        if (fiveCurrentState.mode !== this.showState.mode)
+                            return;
+                        if (this.state.visible)
+                            return;
+                        if (shouldFloorplanShowWithPose(fiveCurrentState)) {
+                            this.updateState({ visible: true }, true);
+                            this._show({ isAutoShow: true });
+                        }
+                        return false;
+                    }
                 }
             });
-            this.five = five;
+            /** 阻止点击分间走点 */
+            Object.defineProperty(this, "onFiveWantsTapGesture", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => this.handleClick()
+            });
+            /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
+            Object.defineProperty(this, "onFiveWantsChangeMode", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (mode, prevMode) => {
+                    if (prevMode === 'Panorama' && mode === this.showState.mode) {
+                        this.lastPanoramaLongitude = this.five.getCurrentState().longitude;
+                    }
+                }
+            });
+            /** 模型楼层高亮改变时，自动进行楼层切换 */
+            Object.defineProperty(this, "onModelShownFloorChange", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (shownFloor) => {
+                    if (this.floorIndex === shownFloor)
+                        return;
+                    if (shownFloor === null) {
+                        const panoIndex = this.five.getCurrentState().panoIndex;
+                        this.floorIndex = this.five.work.observers[panoIndex].floorIndex;
+                        return;
+                    }
+                    this.floorIndex = shownFloor;
+                    this.updateSize();
+                    this.render();
+                }
+            });
+            if (params === null || params === void 0 ? void 0 : params.selector) {
+                this.selector = params.selector;
+                console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+            }
+            // =============== init Show State ===============
+            this.showState = {
+                mode: 'Mapview',
+                longitude: 0,
+                latitude: Math.PI / 2,
+                fov: 90,
+            };
             // =============== init State ===============
             const baseConfig = {
-                hoverEnable: false,
+                northDesc: '北',
+                modelOpacity: 1,
+                hoverEnable: true,
+                compassEnable: true,
+                autoShowEnable: true,
+                ruleLabelsEnable: true,
+                roomLabelsEnable: true,
                 cameraImageUrl: CAMERA_IMAGE,
+                attachedTo: exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
+                getLabelElement: undefined,
+                adaptiveRoomLabelVisibleEnable: true,
             };
-            const paramsConfig = (params === null || params === void 0 ? void 0 : params.configs) ? params.configs : {};
+            const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
             const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
-            this.state = { enabled: true, visible: true, config };
-            // =============== init wrapper ===============
-            if (params === null || params === void 0 ? void 0 : params.wrapper)
-                console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
-            if (typeof (params === null || params === void 0 ? void 0 : params.wrapper) === 'string')
-                this.wrapperSelector = params.wrapper;
-            else if ((params === null || params === void 0 ? void 0 : params.wrapper) instanceof Element)
-                this.wrapper = params.wrapper;
+            this.state = {
+                enabled: true,
+                visible: false,
+                config,
+            };
+            // =============== init Container ===============
+            this.initContainer();
             // =============== init Listener ===============
+            // 注意插件声明周期内只监听一次的事件不放在 addEventListener 里面
+            // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+            five.model.loaded ? this.onFiveModelLoaded() : five.once('modelLoaded', this.onFiveModelLoaded);
             five.once('dispose', this.dispose);
+            this.addEventListener();
         }
         async load(serverData, state, userAction = true) {
-            // const loadImage = async () => {
-            //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
-            //   // 当有 svgString 时，没有加载过程
-            //   if (floorplanData.outlines[floorIndex]?.svgContent) return
-            //   // 如果当前楼层图片不存在，不存在加载过程
-            //   const nowFloorImageSrc = floorplanData.outlines[floorIndex]?.url
-            //   if (!nowFloorImageSrc) return
-            //   // 图片加载完成时再 render
-            //   await new Promise<void>((resolve) => {
-            //     const nowFloorImage = new Image()
-            //     nowFloorImage.src = nowFloorImageSrc
-            //     nowFloorImage.onload = () => resolve()
-            //   })
-            // }
-            // await loadImage()
             function isPluginServerData(serverData) {
                 return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
             }
+            const _data = serverData;
+            if (_data && !_data.version)
+                console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
             const copyData = JSON.parse(JSON.stringify(serverData));
             const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
             const prevData = this.data;
@@ -6252,21 +6097,17 @@
                 this.updateState(state, userAction);
             this.render();
         }
-        async show(options = {}) {
-            // 已经展示完成了，不做任何操作
-            if (this.state.visible)
-                return;
-            const userAction = options.userAction !== undefined ? options.userAction : true;
-            this.updateState({ visible: true }, userAction);
-            this._show({ userAction });
-        }
-        async hide(options = {}) {
-            if (!this.state.visible)
+        /** 把插件的渲染DOM插入到对应的容器中去 */
+        appendTo(wrapper) {
+            this.wrapper = wrapper;
+            // 插件 disabled 时，只是不执行副作用，但是 wrapper 还是要赋值的，不然 enable 的时候找不到父容器
+            if (!this.state.enabled)
                 return;
-            const userAction = options.userAction !== undefined ? options.userAction : true;
-            this.updateState({ visible: false }, userAction);
-            this._hide({ userAction });
+            wrapper.appendChild(this.container);
+            this.render();
+            return this;
         }
+        /** 启用插件 */
         enable(options = {}) {
             if (this.state.enabled)
                 return;
@@ -6274,6 +6115,7 @@
             this.updateState({ enabled: true }, options.userAction || userAction);
             this._enable({ userAction });
         }
+        /** 禁用插件 */
         disable(options = {}) {
             if (!this.state.enabled)
                 return;
@@ -6287,56 +6129,29 @@
             const userAction = options.userAction !== undefined ? options.userAction : true;
             this.updateState(state, userAction);
             if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
-                const options = { userAction };
-                state.enabled ? this._enable(options) : this._disable(options);
+                state.enabled ? this._enable({ userAction }) : this._disable({ userAction });
             }
             if (state.visible !== undefined && prevState.visible !== state.visible) {
                 const options = { userAction };
                 state.visible ? this._show(options) : this._hide(options);
             }
         }
-        /** 把插件的渲染DOM插入到对应的容器中去 */
-        appendTo(wrapper) {
-            this.wrapper = wrapper;
-            this.render();
-        }
-        changeConfigs(config, userAction = true) {
-            this.setState({ config }, { userAction });
-            this.render();
-        }
-        setExtraObjectsWith3DPositions(data) {
-            if (!this.data)
+        /** 更新户型图位置 */
+        updatePosition() {
+            var _a;
+            const y = getAttachedY(this.five, this.floorIndex, this.state.config.attachedTo);
+            const modelPosition = (_a = this.five.model) === null || _a === void 0 ? void 0 : _a.bounding.getCenter(new THREE__namespace.Vector3()).setY(y);
+            if (!modelPosition)
                 return;
-            this.extraObjects = formatExtraObjects(data, this.five, this.data);
-            this.render();
+            const ndcPosition = modelPosition.clone().project(this.five.camera);
+            const left = (ndcPosition.x + 1) / 2;
+            const top = -(ndcPosition.y - 1) / 2;
+            this.container.style.left = left * 100 + '%';
+            this.container.style.top = top * 100 + '%';
         }
         async formatData(serverData) {
             return await formatData(serverData.data);
         }
-        _enable(options) {
-            const { userAction } = options;
-            this.hooks.emit('enable', { userAction });
-            if (this.state.visible)
-                this._show({ userAction });
-        }
-        _show(options) {
-            if (this.disposed)
-                return;
-            if (!this.state.enabled)
-                return;
-            const { userAction } = options;
-            this.hooks.emit('show', { userAction });
-            this.render();
-        }
-        _hide(options) {
-            if (this.disposed)
-                return;
-            if (!this.state.enabled)
-                return;
-            const { userAction } = options;
-            this.hooks.emit('hide', { userAction });
-            this.render();
-        }
         updateState(state, userAction) {
             const prevState = this.state;
             this.state = Object.assign(Object.assign({}, this.state), state);
@@ -6344,142 +6159,76 @@
                 return;
             this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
         }
-        render() {
-            if (this.disposed)
-                return;
+        /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
+         *
+         * - TODO: 等 selector 功能下掉之后删除这个逻辑
+         */
+        initContainer() {
+            this.container.classList.add('floorplan-plugin');
+            Object.assign(this.container.style, {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: 10,
+                pointerEvents: 'none',
+            });
+            this.five.addExtraElement(this.container);
+        }
+        addEventListener() {
             if (!this.state.enabled)
                 return;
-            // 处理 wrapper
-            if (!this.wrapper && this.wrapperSelector) {
-                const _wrapper = document.querySelector(this.wrapperSelector);
-                this.wrapper = _wrapper;
-            }
-            if (!this.data || !this.wrapper)
+            if (this.hasAddedEventListener)
                 return;
-            const props = Object.assign(Object.assign({}, this.state.config), { five: this.five, floorplanData: this.data, visible: this.state.visible, extraObjects: this.extraObjects });
-            this.app ? this.app.$set(props) : (this.app = new Main({ target: this.wrapper, props }));
-        }
-    }
-
-    const PanoFloorplanRadarPlugin = (five, params) => {
-        return new Controller$2(five, params);
-    };
-
-    /**
-     * 传入一个 Promise
-     * 无异常，返回 [null, data]
-     * 有异常，则返回 [Error, undefined]
-     * 用于替代 try&catch 处理 await 异常的方案
-     */
-    async function to(promise) {
-        try {
-            const data = await promise;
-            return [null, data];
+            const five = this.five;
+            five.on('modeChange', this.onFiveModeChange);
+            five.on('panoArrived', this.onFivePanoArrived);
+            five.on('cameraUpdate', this.onFiveCameraUpdate);
+            five.on('wantsPanGesture', this.onFiveWantsPanGesture);
+            five.on('wantsTapGesture', this.onFiveWantsTapGesture);
+            five.on('wantsChangeMode', this.onFiveWantsChangeMode);
+            five.on('modelShownFloorChange', this.onModelShownFloorChange);
         }
-        catch (error) {
-            if (error instanceof Error)
-                return [error, null];
-            return [new Error(''), null];
+        removeEventListener() {
+            const five = this.five;
+            this.hasAddedEventListener = false;
+            // 注意这里并没有消除 dispose 的监听
+            five.off('modelLoaded', this.onFiveModelLoaded);
+            five.off('modeChange', this.onFiveModeChange);
+            five.off('panoArrived', this.onFivePanoArrived);
+            five.off('cameraUpdate', this.onFiveCameraUpdate);
+            five.off('wantsPanGesture', this.onFiveWantsPanGesture);
+            five.off('wantsTapGesture', this.onFiveWantsTapGesture);
+            five.off('wantsChangeMode', this.onFiveWantsChangeMode);
+            five.off('modelShownFloorChange', this.onModelShownFloorChange);
         }
-    }
-
-    var FloorplanErrorType;
-    (function (FloorplanErrorType) {
-        /** 意料之外的错误 */
-        FloorplanErrorType["UnknownError"] = "UnknownError";
-        /** 数据未加载 */
-        FloorplanErrorType["DataNotLoaded"] = "DataNotLoaded";
-        /** 展示过程被隐藏打断 */
-        FloorplanErrorType["BreakOffByHide"] = "BreakOffByHide";
-        /** 展示过程中插件被禁用 */
-        FloorplanErrorType["BreakOffByDisable"] = "BreakOffByDisable";
-        /** 模型未加载完成 */
-        FloorplanErrorType["ModelNotLoaded"] = "ModelNotLoaded";
-        /** Five changeMode 行为不符合预期 */
-        FloorplanErrorType["ChangeModeError"] = "ChangeModeError";
-        /** Five updateCamera 行为不符合预期 */
-        FloorplanErrorType["UpdateCameraError"] = "UpdateCameraError";
-    })(FloorplanErrorType || (FloorplanErrorType = {}));
-    /** 户型图展示 & 模型消失的默认时间 */
-    const SHOW_ANIME_DURATION = 500;
-    /** Five camera 默认 fov */
-    const FIVE_CAMERA_DEFAULT_FOV = 80;
-
-    /** 判断当前状态是否可以展示户型图 */
-    function checkShowState(five, showState) {
-        if (five.currentMode !== showState.mode)
-            return false;
-        const { latitude, longitude, fov } = showState;
-        const { latitude: _latitude, longitude: _longitude } = five.getCurrentState();
-        const _fov = five.camera.fov;
-        if (!nearlyEqual(latitude, _latitude, 2))
-            return false;
-        if (!nearlyEqual(longitude, _longitude, 2))
-            return false;
-        if (fov !== _fov)
-            return false;
-        return true;
-    }
-    /** 更改 Five 状态到展示户型图的状态
-     * 1. 判断状态不符合时，会纠正到正确的状态
-     * 2. 内置了相应的动画时间计算
-     * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
-     */
-    async function correctFiveState(five, showState, userAction = true) {
-        // 当前已满足状态，不需要变更
-        const result = checkShowState(five, showState);
-        if (result === true)
-            return;
-        const currentFiveState = five.getCurrentState();
-        // 纠正 mode
-        if (currentFiveState.mode !== showState.mode) {
-            const [changeModeError] = await to(changeMode(five, [showState.mode, showState, undefined, userAction]));
-            if (changeModeError)
-                throw new Error(FloorplanErrorType.ChangeModeError);
-            return;
+        render(duration) {
+            if (!this.state.enabled)
+                return;
+            if (!this.container || !this.data)
+                return;
+            if (this.size.width === 0)
+                return;
+            const props = Object.assign(Object.assign({}, this.state.config), { visible: this.state.visible, duration: duration !== null && duration !== void 0 ? duration : 0, panoIndex: this.panoIndex, floorIndex: this.floorIndex, floorplanData: this.data, lastPanoramaLongitude: this.lastPanoramaLongitude });
+            if (this.app)
+                return this.app.$set(props);
+            this.app = new Main$1({ target: this.container, intro: true, props });
         }
-        // 纠正相机状态
-        // 根据 latitude、longitude、fov 计算动画时间，最多 1s
-        const { latitude, longitude, fov } = currentFiveState;
-        const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
-        const [updateCameraError] = await to(five.updateCamera(showState, time, userAction));
-        if (updateCameraError)
-            throw new Error(FloorplanErrorType.UpdateCameraError);
-        return;
     }
 
-    /** 当前 five 的相机视角是否满足户型图自动隐藏条件
-     *
-     * @description 水平旋转角大于正负 5 度 || 俯仰角度大于 5 度
-     *
-     */
-    function shouldFloorplanHideWithPose(pose) {
-        const { latitude, longitude } = pose;
-        const latitudeHide = Math.abs(latitude - Math.PI / 2) > (5 * Math.PI) / 180;
-        const longitudeHide = longitude > 5 * (Math.PI / 180) && longitude < 355 * (Math.PI / 180);
-        return latitudeHide || longitudeHide;
-    }
-    /** 当前 five 的相机视角是否满足户型图自动展示隐藏条件
-     *
-     * @description 水平旋转角正负 30 度 && 俯仰角度小于 10 度
-     *
-     */
-    function shouldFloorplanShowWithPose(pose) {
-        const { latitude, longitude } = pose;
-        const latitudeVisible = Math.abs(latitude - Math.PI / 2) < (10 * Math.PI) / 180;
-        const longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
-        return latitudeVisible && longitudeVisible;
-    }
-    class Controller$1 extends Controller$4 {
+    const MapviewFloorplanPlugin = (five, params) => {
+        return new Controller$3(five, params);
+    };
+
+    class Controller$2 extends Controller$5 {
         constructor(five, params) {
-            var _a;
             super(five);
             // =============== public properties =================
             Object.defineProperty(this, "name", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: 'modelFloorplanPlugin'
+                value: 'topviewFloorplanPlugin'
             });
             Object.defineProperty(this, "state", {
                 enumerable: true,
@@ -6494,26 +6243,18 @@
                 writable: true,
                 value: void 0
             });
-            /** 展示户型图时，需要正确的状态 */
-            Object.defineProperty(this, "showState", {
+            Object.defineProperty(this, "app", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: void 0
+                value: undefined
             });
-            /** show 动画的公共 Promise */
-            Object.defineProperty(this, "showPromise", {
+            Object.defineProperty(this, "selector", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
                 value: void 0
             });
-            Object.defineProperty(this, "app", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: undefined
-            });
             Object.defineProperty(this, "panoIndex", {
                 enumerable: true,
                 configurable: true,
@@ -6526,19 +6267,6 @@
                 writable: true,
                 value: 0
             });
-            Object.defineProperty(this, "selector", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: void 0
-            });
-            /** 公共 Promise 的 reject 方法 */
-            Object.defineProperty(this, "showRejection", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: void 0
-            });
             /** 户型图父容器 */
             Object.defineProperty(this, "wrapper", {
                 enumerable: true,
@@ -6581,65 +6309,6 @@
                 writable: true,
                 value: false
             });
-            /** 销毁插件 */
-            Object.defineProperty(this, "dispose", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: () => {
-                    var _a, _b;
-                    this.removeEventListener();
-                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
-                    this.app = undefined;
-                    (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
-                    this.data = undefined;
-                    this.wrapper = undefined;
-                    this.selector = undefined;
-                    this.hooks.emit('dispose');
-                }
-            });
-            /** 展示户型图
-             * 1. show 函数大部分情况下需要耗时
-             * 2. 如果当前已经在展示中，将不会触发任何事件
-             * 3. 如果展示过程被中断，将抛出错误
-             * 4. 多次调用 show 方法，只会触发一次 showAnimationEnded 事件，但是展示结果会取决于最后一次调用参数
-             * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
-             * @param opts.floorIndex 楼层
-             * @param opts.modelOpacity 模型透明度
-             * @param opts.immediately 是否立即展示
-             * @param opts.isAutoShow 是否是自动展示
-             * @param opts.userAction 是否是用户行为
-             */
-            Object.defineProperty(this, "show", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: async (options = {}) => {
-                    if (!this.state.enabled)
-                        return;
-                    // 已经展示完成了，不做任何操作
-                    if (!this.showPromise && this.state.visible)
-                        return;
-                    const userAction = options.userAction !== undefined ? options.userAction : true;
-                    this.updateState({ visible: true }, userAction);
-                    this._show(options);
-                }
-            });
-            /** 隐藏户型图 */
-            Object.defineProperty(this, "hide", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: async (options = {}) => {
-                    if (!this.state.enabled)
-                        return;
-                    this.isHiddenByHideFunc = true;
-                    if (this.state.visible === false)
-                        return;
-                    this.updateState({ visible: false }, options.userAction || true);
-                    this._hide(options);
-                }
-            });
             /** 更新户型图大小 */
             Object.defineProperty(this, "updateSize", {
                 enumerable: true,
@@ -6648,10 +6317,10 @@
                 value: () => {
                     if (!this.data)
                         return;
-                    if (!checkShowState(this.five, this.showState))
-                        return;
                     if (!this.container || !this.wrapper)
                         return;
+                    if (this.five.getCurrentState().mode !== 'Topview')
+                        return;
                     // 计算户型图展示大小
                     const { min, max } = this.data.bounding;
                     const width = max.x - min.x;
@@ -6668,349 +6337,1362 @@
                     this.size = { width: _width, height: _height };
                 }
             });
+            /** 销毁插件 */
+            Object.defineProperty(this, "dispose", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    var _a, _b;
+                    this.removeEventListener();
+                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                    this.app = undefined;
+                    (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
+                    this.data = undefined;
+                    this.wrapper = undefined;
+                    this.selector = undefined;
+                    this.hooks.emit('dispose');
+                }
+            });
             Object.defineProperty(this, "_disable", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
                 value: (options) => {
-                    var _a, _b, _c;
+                    var _a, _b;
                     const { userAction } = options;
-                    this.hooks.emit('disable', { userAction });
-                    // ===== 处理展示过程中 disable =====
-                    (_a = this.showRejection) === null || _a === void 0 ? void 0 : _a.call(this, FloorplanErrorType.BreakOffByDisable);
-                    this.showPromise = undefined;
-                    (_b = this.app) === null || _b === void 0 ? void 0 : _b.$destroy();
+                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
                     this.app = undefined;
-                    (_c = this.container) === null || _c === void 0 ? void 0 : _c.remove();
+                    (_b = this.container) === null || _b === void 0 ? void 0 : _b.remove();
                     this.removeEventListener();
+                    this.hooks.emit('disable', { userAction });
                 }
             });
-            Object.defineProperty(this, "_enable", {
+            /** modelLoaded 之后自动执行 append container 操作  */
+            Object.defineProperty(this, "onFiveModelLoaded", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (options) => {
-                    const { userAction } = options;
-                    this.addEventListener();
-                    if (!this.wrapper)
+                value: () => {
+                    if (this.state.enabled === false)
                         return;
-                    this.wrapper.append(this.container);
-                    this.hooks.emit('enable', { userAction });
-                    if (this.state.visible)
-                        this._show({ userAction });
+                    if (this.wrapper)
+                        return;
+                    if (!this.selector)
+                        return;
+                    const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
+                    if (!wrapper)
+                        throw new Error('不正确的父容器选择器');
+                    this.wrapper = wrapper;
+                    wrapper.append(this.container);
                 }
             });
-            Object.defineProperty(this, "_show", {
+            /** 非 Topview 态隐藏户型图 */
+            Object.defineProperty(this, "onFiveModeChange", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: async (options) => {
-                    var _a;
-                    if (!this.state.enabled)
-                        return;
-                    if (!((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded))
-                        throw new Error(FloorplanErrorType.ModelNotLoaded);
-                    if (!this.data)
-                        throw new Error(FloorplanErrorType.DataNotLoaded);
-                    this.isHiddenByHideFunc = false;
-                    // ===== 参数合并 =====
-                    const baseShowOpts = {
-                        floorIndex: this.floorIndex,
-                        modelOpacity: this.state.config.modelOpacity,
-                        immediately: false,
-                        isAutoShow: false,
-                        userAction: true,
-                    };
-                    const mergedOptions = Object.assign(Object.assign({}, baseShowOpts), options);
-                    const getShowPromise = async () => {
-                        this.hooks.emit('show', { userAction: mergedOptions.userAction, auto: mergedOptions.isAutoShow });
-                        let hasRejected = false;
-                        let externalErrorMsg;
-                        this.showRejection = (errorMsg) => {
-                            hasRejected = true;
-                            externalErrorMsg = errorMsg;
-                        };
-                        const [correctError] = await to(correctFiveState(this.five, this.showState, mergedOptions.userAction));
-                        if (correctError)
-                            throw correctError;
-                        // 异步结束要判断当前是不是被中断了
-                        if (hasRejected)
-                            throw externalErrorMsg ? new Error(externalErrorMsg) : new Error(FloorplanErrorType.UnknownError);
-                        // 更新户型图大小
-                        this.updateSize();
-                        // 高亮当前楼层，有两个目的
-                        // 1. 点击模型时，可以跳转到当前楼层的点位上
-                        // 2. 当前楼层比较小时，户型图也比较小，如果展示全部楼层，会展示户型图外有一圈模型
-                        this.floorIndex = mergedOptions.floorIndex;
-                        this.five.model.show(this.floorIndex);
-                        // 模型消失, 渲染户型图
-                        const modelOpacity = mergedOptions.modelOpacity;
-                        const renderDuration = mergedOptions.immediately ? 0 : SHOW_ANIME_DURATION;
-                        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
-                        this.render(renderDuration);
-                    };
-                    this.showPromise = getShowPromise()
-                        .then(() => {
-                        this.hooks.emit('showAnimationEnded', {
-                            auto: mergedOptions.isAutoShow,
-                            userAction: mergedOptions.userAction,
-                        });
-                    })
-                        .catch((error) => {
-                        this.updateState({ visible: false }, mergedOptions.userAction);
-                        // 自动展示的报错内部处理
-                        if (mergedOptions.isAutoShow)
-                            return;
-                        // 非自动展示的报错继续向外抛出
-                        if (error instanceof Error)
-                            throw error;
-                    })
-                        .finally(() => {
-                        this.showPromise = undefined;
-                        this.showRejection = undefined;
-                    });
-                    return this.showPromise;
+                value: (...[mode, , , , userAction]) => {
+                    if (mode !== 'Topview' && this.state.visible) {
+                        this.updateState({ visible: false }, userAction);
+                        this._hide({ userAction });
+                    }
                 }
             });
-            Object.defineProperty(this, "_hide", {
+            Object.defineProperty(this, "onFivePanoArrived", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (options) => {
+                value: (index) => {
                     var _a;
-                    // ===== 处理展示过程中 hide =====
-                    (_a = this.showRejection) === null || _a === void 0 ? void 0 : _a.call(this, FloorplanErrorType.BreakOffByHide);
-                    this.showPromise = undefined;
-                    // ===== 合并参数 =====
-                    const baseOptions = {
-                        userAction: true,
-                        isAutoHide: false,
-                    };
-                    const mergedOptions = Object.assign(Object.assign({}, baseOptions), options);
-                    changeModelCanvasOpacity(this.five, 1, 0);
-                    this.hooks.emit('hide', { auto: mergedOptions.isAutoHide, userAction: mergedOptions.userAction });
-                    this.render();
+                    if (!((_a = this.five) === null || _a === void 0 ? void 0 : _a.work))
+                        return;
+                    this.panoIndex = index;
+                    this.floorIndex = this.five.work.observers[index].floorIndex;
                 }
             });
-            Object.defineProperty(this, "handleClick", {
+            Object.defineProperty(this, "onFiveCameraUpdate", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: () => {
+                value: (_, userAction) => {
                     if (!this.state.visible)
                         return;
-                    const preventDefault = this.hooks.emit('click');
-                    if (preventDefault)
+                    this.updatePosition();
+                    this.updateSize();
+                }
+            });
+            Object.defineProperty(this, "onFiveWantsGesture", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (type) => {
+                    if (type !== 'pan' && type !== 'pinch' && type !== 'mouseWheel')
+                        return;
+                    if (this.state.visible && !this.state.config.gestureEnable)
+                        return false;
+                }
+            });
+            Object.defineProperty(this, "onFiveWantsMoveToPano", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: () => {
+                    if (this.state.visible && this.state.config.preventRoomClick)
                         return false;
                 }
             });
-            /** modelLoaded 之后自动执行 append container 操作  */
-            Object.defineProperty(this, "onFiveModelLoaded", {
+            /** 动画结束后是 Topview 态就展示户型图 */
+            Object.defineProperty(this, "onFiveInitAnimationEnded", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (...[, , userAction]) => {
+                    const { mode } = this.five.getCurrentState();
+                    if (mode === 'Topview' && !this.isHiddenByHideFunc && !this.state.visible && this.state.config.autoShowEnable) {
+                        this.updateState({ visible: true }, userAction);
+                        this._show({ userAction });
+                    }
+                }
+            });
+            Object.defineProperty(this, "onModelShownFloorChange", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: (shownFloor) => {
+                    if (this.floorIndex === shownFloor)
+                        return;
+                    if (shownFloor === null) {
+                        const panoIndex = this.five.getCurrentState().panoIndex;
+                        this.floorIndex = this.five.work.observers[panoIndex].floorIndex;
+                        return;
+                    }
+                    // 模型楼层高亮改变时，自动进行楼层切换
+                    this.floorIndex = shownFloor;
+                    this.updateSize();
+                    this.render();
+                }
+            });
+            if (params === null || params === void 0 ? void 0 : params.selector) {
+                this.selector = params.selector;
+                console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+            }
+            // =============== init State ===============
+            const baseConfig = {
+                northDesc: '北',
+                modelOpacity: 1,
+                hoverEnable: true,
+                compassEnable: true,
+                gestureEnable: false,
+                autoShowEnable: true,
+                ruleLabelsEnable: true,
+                roomLabelsEnable: true,
+                cameraImageUrl: CAMERA_IMAGE,
+                attachedTo: exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
+                getLabelElement: undefined,
+                adaptiveRoomLabelVisibleEnable: true,
+            };
+            const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
+            const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
+            this.state = {
+                enabled: true,
+                visible: false,
+                config,
+            };
+            // =============== init Container ===============
+            this.initContainer();
+            // =============== init Listener ===============
+            // 注意插件声明周期内只监听一次的事件不放在 addEventListener 里面
+            // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+            five.model.loaded ? this.onFiveModelLoaded() : five.once('modelLoaded', this.onFiveModelLoaded);
+            five.once('dispose', this.dispose);
+            this.addEventListener();
+        }
+        async load(serverData, state, userAction = true) {
+            function isPluginServerData(serverData) {
+                return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+            }
+            const _data = serverData;
+            if (_data && !_data.version)
+                console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
+            const copyData = JSON.parse(JSON.stringify(serverData));
+            const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+            const prevData = this.data;
+            this.data = await formatData(_serverData);
+            this.hooks.emit('dataLoaded', this.data);
+            this.hooks.emit('dataChange', this.data, prevData);
+            if (state)
+                this.updateState(state, userAction);
+            this.render();
+        }
+        /** 更新户型图位置 */
+        updatePosition() {
+            var _a;
+            const y = getAttachedY(this.five, this.floorIndex, this.state.config.attachedTo);
+            const modelPosition = (_a = this.five.model) === null || _a === void 0 ? void 0 : _a.bounding.getCenter(new THREE__namespace.Vector3()).setY(y);
+            if (!modelPosition)
+                return;
+            const ndcPosition = modelPosition.clone().project(this.five.camera);
+            const left = (ndcPosition.x + 1) / 2;
+            const top = -(ndcPosition.y - 1) / 2;
+            this.container.style.left = left * 100 + '%';
+            this.container.style.top = top * 100 + '%';
+        }
+        /** 把插件的渲染DOM插入到对应的容器中去 */
+        appendTo(wrapper) {
+            this.wrapper = wrapper;
+            // 插件 disabled 时，只是不执行副作用，但是 wrapper 还是要赋值的，不然 enable 的时候找不到父容器
+            if (!this.state.enabled)
+                return;
+            wrapper.appendChild(this.container);
+            this.render();
+            return this;
+        }
+        async show(options = {}) {
+            // 已经展示完成了，不做任何操作
+            if (this.state.visible)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ visible: true }, userAction);
+            this._show({ userAction });
+        }
+        async hide(options = {}) {
+            this.isHiddenByHideFunc = true;
+            if (!this.state.visible)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ visible: false }, userAction);
+            this._hide({ userAction });
+        }
+        enable(options = {}) {
+            if (this.state.enabled)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ enabled: true }, options.userAction || userAction);
+            this._enable({ userAction });
+        }
+        disable(options = {}) {
+            if (!this.state.enabled)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ enabled: false }, options.userAction || userAction);
+            this._disable({ userAction });
+        }
+        /** 更改插件 State */
+        setState(state, options = {}) {
+            const prevState = this.state;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState(state, userAction);
+            if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
+                const options = { userAction };
+                state.enabled ? this._enable(options) : this._disable(options);
+            }
+            if (state.visible !== undefined && prevState.visible !== state.visible) {
+                const options = { userAction };
+                state.visible ? this._show(options) : this._hide(options);
+            }
+        }
+        async formatData(serverData) {
+            return await formatData(serverData.data);
+        }
+        async _show(options) {
+            if (!this.state.enabled)
+                return;
+            this.isHiddenByHideFunc = false;
+            const { userAction } = options;
+            this.hooks.emit('show', { userAction });
+            if (this.five.getCurrentState().mode !== 'Topview') {
+                await changeMode(this.five, ['Topview', undefined, undefined, userAction]);
+            }
+            this.five.model.show(this.floorIndex);
+            this.updatePosition();
+            this.updateSize();
+            const renderDuration = 500;
+            const modelOpacity = this.state.config.modelOpacity;
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+            this.hooks.emit('showAnimationEnded', { userAction });
+            this.render();
+        }
+        async _hide(options) {
+            if (!this.state.enabled)
+                return;
+            const { userAction } = options;
+            this.hooks.emit('hide', { userAction });
+            const modelOpacity = 1;
+            const renderDuration = 0;
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+            this.render();
+        }
+        _enable(options) {
+            const { userAction } = options;
+            this.addEventListener();
+            if (this.wrapper)
+                this.wrapper.append(this.container);
+            this.hooks.emit('enable', { userAction });
+            if (this.state.visible)
+                this._show({ userAction });
+        }
+        updateState(state, userAction) {
+            const prevState = this.state;
+            this.state = Object.assign(Object.assign({}, this.state), state);
+            if (equal(this.state, prevState, { deep: true }))
+                return;
+            this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
+        }
+        addEventListener() {
+            if (!this.state.enabled)
+                return;
+            if (this.hasAddedEventListener)
+                return;
+            const five = this.five;
+            five.on('modeChange', this.onFiveModeChange);
+            five.on('panoArrived', this.onFivePanoArrived);
+            five.on('cameraUpdate', this.onFiveCameraUpdate);
+            five.on('wantsGesture', this.onFiveWantsGesture);
+            five.on('wantsMoveToPano', this.onFiveWantsMoveToPano);
+            five.on('initAnimationEnded', this.onFiveInitAnimationEnded);
+            five.on('modelShownFloorChange', this.onModelShownFloorChange);
+        }
+        removeEventListener() {
+            const five = this.five;
+            this.hasAddedEventListener = false;
+            // 注意这里并没有消除 dispose 的监听
+            five.off('modeChange', this.onFiveModeChange);
+            five.off('panoArrived', this.onFivePanoArrived);
+            five.off('cameraUpdate', this.onFiveCameraUpdate);
+            five.off('wantsGesture', this.onFiveWantsGesture);
+            five.off('wantsMoveToPano', this.onFiveWantsMoveToPano);
+            five.off('initAnimationEnded', this.onFiveInitAnimationEnded);
+            five.off('modelShownFloorChange', this.onModelShownFloorChange);
+        }
+        /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
+         *
+         * - TODO: 等 selector 功能下掉之后删除这个逻辑
+         */
+        initContainer() {
+            this.container.classList.add('floorplan-plugin');
+            Object.assign(this.container.style, {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translate3d(-50%, -50%, 10px)',
+                zIndex: 10,
+                pointerEvents: 'none',
+                'will-change': 'width, height',
+            });
+            this.five.addExtraElement(this.container);
+        }
+        render(duration) {
+            if (!this.state.enabled)
+                return;
+            if (!this.container || !this.data)
+                return;
+            if (this.size.width === 0)
+                return;
+            const props = Object.assign(Object.assign({}, this.state.config), { visible: this.state.visible, duration: duration !== null && duration !== void 0 ? duration : 0, panoIndex: this.panoIndex, floorIndex: this.floorIndex, floorplanData: this.data, lastPanoramaLongitude: this.lastPanoramaLongitude });
+            if (this.app)
+                return this.app.$set(props);
+            this.app = new Main$1({ target: this.container, intro: true, props });
+        }
+    }
+
+    const TopviewFloorplanPlugin = (five, params) => {
+        return new Controller$2(five, params);
+    };
+
+    /**
+     * 创建一个防抖动函数，该函数在高频调用时会每隔 wait 毫秒后调用 func 方法
+     * `throttle` 会在第一次调用时立刻调用一次
+     * @param func - 要防抖动的函数
+     * @param wait - 需要延迟的毫秒数
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function throttle(func, wait = 200) {
+        let last;
+        return function (...args) {
+            if (last)
+                return;
+            func(...args);
+            last = setTimeout(function () {
+                last = null;
+            }, wait);
+        };
+    }
+
+    /* src/floorplan/PanoFloorplanRadarPlugin/Components/Camera.svelte generated by Svelte v3.49.0 */
+
+    function add_css$a(target) {
+    	internal.append_styles(target, "svelte-1ty3s4p", ".plugin-radar__camera-wrapper.svelte-1ty3s4p{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-1ty3s4p{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-1ty3s4p{position:absolute;left:-0.78125rem;top:-0.78125rem;width:0.88542rem;height:0.88542rem;transform-origin:0.78125rem 0.78125rem;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
+    }
+
+    function create_fragment$c(ctx) {
+    	let div2;
+    	let div1;
+    	let div0;
+
+    	return {
+    		c() {
+    			div2 = internal.element("div");
+    			div1 = internal.element("div");
+    			div0 = internal.element("div");
+    			internal.attr(div0, "class", "plugin-radar__camera-rotate svelte-1ty3s4p");
+    			internal.set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
+    			internal.set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
+    			internal.attr(div1, "class", "plugin-radar__camera-position svelte-1ty3s4p");
+    			internal.set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
+    			internal.attr(div2, "class", "plugin-radar__camera-wrapper svelte-1ty3s4p");
+    		},
+    		m(target, anchor) {
+    			internal.insert(target, div2, anchor);
+    			internal.append(div2, div1);
+    			internal.append(div1, div0);
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*cameraImageUrl*/ 1) {
+    				internal.set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
+    			}
+
+    			if (dirty & /*rotateTransform*/ 2) {
+    				internal.set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
+    			}
+
+    			if (dirty & /*positionTransform*/ 4) {
+    				internal.set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
+    			}
+    		},
+    		i: internal.noop,
+    		o: internal.noop,
+    		d(detaching) {
+    			if (detaching) internal.detach(div2);
+    		}
+    	};
+    }
+
+    function getCameraRotateTransform(longitude) {
+    	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+    	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+    	return `rotate(${rotate}deg)`;
+    }
+
+    function instance$c($$self, $$props, $$invalidate) {
+    	let positionTransform;
+    	let rotateTransform;
+    	let { five } = $$props;
+    	let { pxmm } = $$props;
+    	let { floorplanData } = $$props;
+    	let { cameraImageUrl } = $$props;
+    	let panoIndex = five.getCurrentState().panoIndex;
+    	let longitude = five.getCurrentState().longitude;
+
+    	/** 获取相机在当前 Five 状态下的位移 */
+    	function getCameraPositionTransform(floorplanData, panoIndex) {
+    		const bounding = floorplanData.bounding;
+    		const floorplanObserver = floorplanData.observers[panoIndex];
+    		if (!floorplanObserver) return '';
+    		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
+    		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
+    		const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
+    		const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
+    		return `translate(${left}px, ${top}px)`;
+    	}
+
+    	function onFivePanoWillArrive(_panoIndex) {
+    		$$invalidate(6, panoIndex = _panoIndex);
+    	}
+
+    	const onFiveCameraDirectionUpdate = throttle(
+    		pose => {
+    			$$invalidate(7, longitude = pose.longitude);
+    		},
+    		1000 / 60
+    	);
+
+    	svelte.onMount(() => {
+    		five.on('panoWillArrive', onFivePanoWillArrive);
+    		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+
+    		return function dispose() {
+    			five.off('panoWillArrive', onFivePanoWillArrive);
+    			five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    		};
+    	});
+
+    	$$self.$$set = $$props => {
+    		if ('five' in $$props) $$invalidate(3, five = $$props.five);
+    		if ('pxmm' in $$props) $$invalidate(4, pxmm = $$props.pxmm);
+    		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
+    		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
+    	};
+
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*floorplanData, panoIndex*/ 96) {
+    			// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+    			$$invalidate(2, positionTransform = getCameraPositionTransform(floorplanData, panoIndex));
+    		}
+
+    		if ($$self.$$.dirty & /*longitude*/ 128) {
+    			$$invalidate(1, rotateTransform = getCameraRotateTransform(longitude));
+    		}
+    	};
+
+    	return [
+    		cameraImageUrl,
+    		rotateTransform,
+    		positionTransform,
+    		five,
+    		pxmm,
+    		floorplanData,
+    		panoIndex,
+    		longitude
+    	];
+    }
+
+    class Camera extends internal.SvelteComponent {
+    	constructor(options) {
+    		super();
+
+    		internal.init(
+    			this,
+    			options,
+    			instance$c,
+    			create_fragment$c,
+    			internal.safe_not_equal,
+    			{
+    				five: 3,
+    				pxmm: 4,
+    				floorplanData: 5,
+    				cameraImageUrl: 0
+    			},
+    			add_css$a
+    		);
+    	}
+    }
+
+    /* src/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/ExtraObjects.svelte generated by Svelte v3.49.0 */
+
+    function add_css$9(target) {
+    	internal.append_styles(target, "svelte-1i87fz7", ".plugin-pano-floorplan__extra-objects.svelte-1i87fz7{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.plugin-pano-floorplan__extra-object-item--position.svelte-1i87fz7{position:absolute;width:0;height:0}.plugin-pano-floorplan__extra-object-item.svelte-1i87fz7{transform:translate(-50%, -50%)}");
+    }
+
+    function get_each_context$5(ctx, list, i) {
+    	const child_ctx = ctx.slice();
+    	child_ctx[1] = list[i];
+    	return child_ctx;
+    }
+
+    // (5:2) {#each extraObjects as extraObject (extraObject.id)}
+    function create_each_block$5(key_1, ctx) {
+    	let div1;
+    	let div0;
+    	let style_width = `${/*extraObject*/ ctx[1].icon.width / 16}rem`;
+    	let style_height = `${/*extraObject*/ ctx[1].icon.height / 16}rem`;
+    	let t;
+    	let style_top = `${/*extraObject*/ ctx[1].positionInImage.y * 100}%`;
+    	let style_left = `${/*extraObject*/ ctx[1].positionInImage.x * 100}%`;
+
+    	return {
+    		key: key_1,
+    		first: null,
+    		c() {
+    			div1 = internal.element("div");
+    			div0 = internal.element("div");
+    			t = internal.space();
+    			internal.attr(div0, "class", "plugin-pano-floorplan__extra-object-item svelte-1i87fz7");
+    			internal.set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
+    			internal.set_style(div0, "width", style_width, false);
+    			internal.set_style(div0, "height", style_height, false);
+    			internal.attr(div1, "class", "plugin-pano-floorplan__extra-object-item--position svelte-1i87fz7");
+    			internal.set_style(div1, "top", style_top, false);
+    			internal.set_style(div1, "left", style_left, false);
+    			this.first = div1;
+    		},
+    		m(target, anchor) {
+    			internal.insert(target, div1, anchor);
+    			internal.append(div1, div0);
+    			internal.append(div1, t);
+    		},
+    		p(new_ctx, dirty) {
+    			ctx = new_ctx;
+
+    			if (dirty & /*extraObjects*/ 1) {
+    				internal.set_style(div0, "background-image", `url(${/*extraObject*/ ctx[1].icon.url})`);
+    			}
+
+    			if (dirty & /*extraObjects*/ 1 && style_width !== (style_width = `${/*extraObject*/ ctx[1].icon.width / 16}rem`)) {
+    				internal.set_style(div0, "width", style_width, false);
+    			}
+
+    			if (dirty & /*extraObjects*/ 1 && style_height !== (style_height = `${/*extraObject*/ ctx[1].icon.height / 16}rem`)) {
+    				internal.set_style(div0, "height", style_height, false);
+    			}
+
+    			if (dirty & /*extraObjects*/ 1 && style_top !== (style_top = `${/*extraObject*/ ctx[1].positionInImage.y * 100}%`)) {
+    				internal.set_style(div1, "top", style_top, false);
+    			}
+
+    			if (dirty & /*extraObjects*/ 1 && style_left !== (style_left = `${/*extraObject*/ ctx[1].positionInImage.x * 100}%`)) {
+    				internal.set_style(div1, "left", style_left, false);
+    			}
+    		},
+    		d(detaching) {
+    			if (detaching) internal.detach(div1);
+    		}
+    	};
+    }
+
+    function create_fragment$b(ctx) {
+    	let div;
+    	let each_blocks = [];
+    	let each_1_lookup = new Map();
+    	let each_value = /*extraObjects*/ ctx[0];
+    	const get_key = ctx => /*extraObject*/ ctx[1].id;
+
+    	for (let i = 0; i < each_value.length; i += 1) {
+    		let child_ctx = get_each_context$5(ctx, each_value, i);
+    		let key = get_key(child_ctx);
+    		each_1_lookup.set(key, each_blocks[i] = create_each_block$5(key, child_ctx));
+    	}
+
+    	return {
+    		c() {
+    			div = internal.element("div");
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].c();
+    			}
+
+    			internal.attr(div, "class", "plugin-pano-floorplan__extra-objects svelte-1i87fz7");
+    		},
+    		m(target, anchor) {
+    			internal.insert(target, div, anchor);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].m(div, null);
+    			}
+    		},
+    		p(ctx, [dirty]) {
+    			if (dirty & /*extraObjects*/ 1) {
+    				each_value = /*extraObjects*/ ctx[0];
+    				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.destroy_block, create_each_block$5, null, get_each_context$5);
+    			}
+    		},
+    		i: internal.noop,
+    		o: internal.noop,
+    		d(detaching) {
+    			if (detaching) internal.detach(div);
+
+    			for (let i = 0; i < each_blocks.length; i += 1) {
+    				each_blocks[i].d();
+    			}
+    		}
+    	};
+    }
+
+    function instance$b($$self, $$props, $$invalidate) {
+    	let { extraObjects = [] } = $$props;
+
+    	$$self.$$set = $$props => {
+    		if ('extraObjects' in $$props) $$invalidate(0, extraObjects = $$props.extraObjects);
+    	};
+
+    	return [extraObjects];
+    }
+
+    class ExtraObjects extends internal.SvelteComponent {
+    	constructor(options) {
+    		super();
+    		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { extraObjects: 0 }, add_css$9);
+    	}
+    }
+
+    /* src/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/CurrentFloor.svelte generated by Svelte v3.49.0 */
+
+    function create_if_block$4(ctx) {
+    	let highlight;
+    	let current;
+
+    	const highlight_spread_levels = [
+    		{
+    			five: /*five*/ ctx[0],
+    			pxmm: /*pxmm*/ ctx[1],
+    			floorIndex: /*floorIndex*/ ctx[2],
+    			floorplanData: /*floorplanData*/ ctx[4],
+    			onRoomHeightClick: /*onRoomHeightClick*/ ctx[6]
+    		}
+    	];
+
+    	let highlight_props = {};
+
+    	for (let i = 0; i < highlight_spread_levels.length; i += 1) {
+    		highlight_props = internal.assign(highlight_props, highlight_spread_levels[i]);
+    	}
+
+    	highlight = new RoomHighlight({ props: highlight_props });
+
+    	return {
+    		c() {
+    			internal.create_component(highlight.$$.fragment);
+    		},
+    		m(target, anchor) {
+    			internal.mount_component(highlight, target, anchor);
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			const highlight_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, onRoomHeightClick*/ 87)
+    			? internal.get_spread_update(highlight_spread_levels, [
+    					{
+    						five: /*five*/ ctx[0],
+    						pxmm: /*pxmm*/ ctx[1],
+    						floorIndex: /*floorIndex*/ ctx[2],
+    						floorplanData: /*floorplanData*/ ctx[4],
+    						onRoomHeightClick: /*onRoomHeightClick*/ ctx[6]
+    					}
+    				])
+    			: {};
+
+    			highlight.$set(highlight_changes);
+    		},
+    		i(local) {
+    			if (current) return;
+    			internal.transition_in(highlight.$$.fragment, local);
+    			current = true;
+    		},
+    		o(local) {
+    			internal.transition_out(highlight.$$.fragment, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			internal.destroy_component(highlight, detaching);
+    		}
+    	};
+    }
+
+    function create_fragment$a(ctx) {
+    	let baseimage;
+    	let t0;
+    	let extraobjects;
+    	let t1;
+    	let if_block_anchor;
+    	let current;
+
+    	const baseimage_spread_levels = [
+    		{
+    			floorIndex: /*floorIndex*/ ctx[2],
+    			floorplanData: /*floorplanData*/ ctx[4]
+    		}
+    	];
+
+    	let baseimage_props = {};
+
+    	for (let i = 0; i < baseimage_spread_levels.length; i += 1) {
+    		baseimage_props = internal.assign(baseimage_props, baseimage_spread_levels[i]);
+    	}
+
+    	baseimage = new BaseImage({ props: baseimage_props });
+
+    	extraobjects = new ExtraObjects({
+    			props: {
+    				extraObjects: /*currentFloorExtraObjects*/ ctx[5]
+    			}
+    		});
+
+    	let if_block = /*hoverEnable*/ ctx[3] && create_if_block$4(ctx);
+
+    	return {
+    		c() {
+    			internal.create_component(baseimage.$$.fragment);
+    			t0 = internal.space();
+    			internal.create_component(extraobjects.$$.fragment);
+    			t1 = internal.space();
+    			if (if_block) if_block.c();
+    			if_block_anchor = internal.empty();
+    		},
+    		m(target, anchor) {
+    			internal.mount_component(baseimage, target, anchor);
+    			internal.insert(target, t0, anchor);
+    			internal.mount_component(extraobjects, target, anchor);
+    			internal.insert(target, t1, anchor);
+    			if (if_block) if_block.m(target, anchor);
+    			internal.insert(target, if_block_anchor, anchor);
+    			current = true;
+    		},
+    		p(ctx, [dirty]) {
+    			const baseimage_changes = (dirty & /*floorIndex, floorplanData*/ 20)
+    			? internal.get_spread_update(baseimage_spread_levels, [
+    					{
+    						floorIndex: /*floorIndex*/ ctx[2],
+    						floorplanData: /*floorplanData*/ ctx[4]
+    					}
+    				])
+    			: {};
+
+    			baseimage.$set(baseimage_changes);
+    			const extraobjects_changes = {};
+    			if (dirty & /*currentFloorExtraObjects*/ 32) extraobjects_changes.extraObjects = /*currentFloorExtraObjects*/ ctx[5];
+    			extraobjects.$set(extraobjects_changes);
+
+    			if (/*hoverEnable*/ ctx[3]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+
+    					if (dirty & /*hoverEnable*/ 8) {
+    						internal.transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block$4(ctx);
+    					if_block.c();
+    					internal.transition_in(if_block, 1);
+    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+    				}
+    			} else if (if_block) {
+    				internal.group_outros();
+
+    				internal.transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
+
+    				internal.check_outros();
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			internal.transition_in(baseimage.$$.fragment, local);
+    			internal.transition_in(extraobjects.$$.fragment, local);
+    			internal.transition_in(if_block);
+    			current = true;
+    		},
+    		o(local) {
+    			internal.transition_out(baseimage.$$.fragment, local);
+    			internal.transition_out(extraobjects.$$.fragment, local);
+    			internal.transition_out(if_block);
+    			current = false;
+    		},
+    		d(detaching) {
+    			internal.destroy_component(baseimage, detaching);
+    			if (detaching) internal.detach(t0);
+    			internal.destroy_component(extraobjects, detaching);
+    			if (detaching) internal.detach(t1);
+    			if (if_block) if_block.d(detaching);
+    			if (detaching) internal.detach(if_block_anchor);
+    		}
+    	};
+    }
+
+    function instance$a($$self, $$props, $$invalidate) {
+    	let currentFloorExtraObjects;
+    	let { five } = $$props;
+    	let { pxmm } = $$props;
+    	let { floorIndex } = $$props;
+    	let { hoverEnable } = $$props;
+    	let { floorplanData } = $$props;
+    	let { extraObjects = [] } = $$props;
+    	const onRoomHeightClick = undefined;
+
+    	$$self.$$set = $$props => {
+    		if ('five' in $$props) $$invalidate(0, five = $$props.five);
+    		if ('pxmm' in $$props) $$invalidate(1, pxmm = $$props.pxmm);
+    		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
+    		if ('hoverEnable' in $$props) $$invalidate(3, hoverEnable = $$props.hoverEnable);
+    		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
+    		if ('extraObjects' in $$props) $$invalidate(7, extraObjects = $$props.extraObjects);
+    	};
+
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*extraObjects, floorIndex*/ 132) {
+    			$$invalidate(5, currentFloorExtraObjects = extraObjects === null || extraObjects === void 0
+    			? void 0
+    			: extraObjects.filter(object => object.floorIndex === floorIndex));
+    		}
+    	};
+
+    	return [
+    		five,
+    		pxmm,
+    		floorIndex,
+    		hoverEnable,
+    		floorplanData,
+    		currentFloorExtraObjects,
+    		onRoomHeightClick,
+    		extraObjects
+    	];
+    }
+
+    class CurrentFloor extends internal.SvelteComponent {
+    	constructor(options) {
+    		super();
+
+    		internal.init(this, options, instance$a, create_fragment$a, internal.safe_not_equal, {
+    			five: 0,
+    			pxmm: 1,
+    			floorIndex: 2,
+    			hoverEnable: 3,
+    			floorplanData: 4,
+    			extraObjects: 7
+    		});
+    	}
+    }
+
+    /* src/floorplan/PanoFloorplanRadarPlugin/Components/Main.svelte generated by Svelte v3.49.0 */
+
+    function add_css$8(target) {
+    	internal.append_styles(target, "svelte-1mvqyqq", ".plugin-floorplan-radar.svelte-1mvqyqq{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-1mvqyqq{position:relative}");
+    }
+
+    // (41:0) {#if visible}
+    function create_if_block$3(ctx) {
+    	let div;
+    	let div_resize_listener;
+    	let current;
+    	let if_block = /*clientWidth*/ ctx[6] !== 0 && create_if_block_1$1(ctx);
+
+    	return {
+    		c() {
+    			div = internal.element("div");
+    			if (if_block) if_block.c();
+    			internal.attr(div, "class", "plugin-floorplan-radar svelte-1mvqyqq");
+    			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[12].call(div));
+    		},
+    		m(target, anchor) {
+    			internal.insert(target, div, anchor);
+    			if (if_block) if_block.m(div, null);
+    			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[12].bind(div));
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			if (/*clientWidth*/ ctx[6] !== 0) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+
+    					if (dirty & /*clientWidth*/ 64) {
+    						internal.transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block_1$1(ctx);
+    					if_block.c();
+    					internal.transition_in(if_block, 1);
+    					if_block.m(div, null);
+    				}
+    			} else if (if_block) {
+    				internal.group_outros();
+
+    				internal.transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
+
+    				internal.check_outros();
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			internal.transition_in(if_block);
+    			current = true;
+    		},
+    		o(local) {
+    			internal.transition_out(if_block);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) internal.detach(div);
+    			if (if_block) if_block.d();
+    			div_resize_listener();
+    		}
+    	};
+    }
+
+    // (43:4) {#if clientWidth !== 0}
+    function create_if_block_1$1(ctx) {
+    	let div;
+    	let currentfloor;
+    	let t;
+    	let camera;
+    	let style_width = `${/*contentWidth*/ ctx[8]}px`;
+    	let style_height = `${/*contentHeight*/ ctx[11]}px`;
+    	let current;
+
+    	const currentfloor_spread_levels = [
+    		{
+    			five: /*five*/ ctx[0],
+    			pxmm: /*pxmm*/ ctx[9],
+    			floorIndex: /*floorIndex*/ ctx[10],
+    			floorplanData: /*floorplanData*/ ctx[3],
+    			hoverEnable: /*hoverEnable*/ ctx[2],
+    			extraObjects: /*extraObjects*/ ctx[5]
+    		}
+    	];
+
+    	let currentfloor_props = {};
+
+    	for (let i = 0; i < currentfloor_spread_levels.length; i += 1) {
+    		currentfloor_props = internal.assign(currentfloor_props, currentfloor_spread_levels[i]);
+    	}
+
+    	currentfloor = new CurrentFloor({ props: currentfloor_props });
+
+    	const camera_spread_levels = [
+    		{
+    			pxmm: /*pxmm*/ ctx[9],
+    			five: /*five*/ ctx[0],
+    			floorplanData: /*floorplanData*/ ctx[3],
+    			cameraImageUrl: /*cameraImageUrl*/ ctx[4]
+    		}
+    	];
+
+    	let camera_props = {};
+
+    	for (let i = 0; i < camera_spread_levels.length; i += 1) {
+    		camera_props = internal.assign(camera_props, camera_spread_levels[i]);
+    	}
+
+    	camera = new Camera({ props: camera_props });
+
+    	return {
+    		c() {
+    			div = internal.element("div");
+    			internal.create_component(currentfloor.$$.fragment);
+    			t = internal.space();
+    			internal.create_component(camera.$$.fragment);
+    			internal.attr(div, "class", "plugin-floorplan-radar-container svelte-1mvqyqq");
+    			internal.set_style(div, "width", style_width, false);
+    			internal.set_style(div, "height", style_height, false);
+    		},
+    		m(target, anchor) {
+    			internal.insert(target, div, anchor);
+    			internal.mount_component(currentfloor, div, null);
+    			internal.append(div, t);
+    			internal.mount_component(camera, div, null);
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects*/ 1581)
+    			? internal.get_spread_update(currentfloor_spread_levels, [
+    					{
+    						five: /*five*/ ctx[0],
+    						pxmm: /*pxmm*/ ctx[9],
+    						floorIndex: /*floorIndex*/ ctx[10],
+    						floorplanData: /*floorplanData*/ ctx[3],
+    						hoverEnable: /*hoverEnable*/ ctx[2],
+    						extraObjects: /*extraObjects*/ ctx[5]
+    					}
+    				])
+    			: {};
+
+    			currentfloor.$set(currentfloor_changes);
+
+    			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 537)
+    			? internal.get_spread_update(camera_spread_levels, [
+    					{
+    						pxmm: /*pxmm*/ ctx[9],
+    						five: /*five*/ ctx[0],
+    						floorplanData: /*floorplanData*/ ctx[3],
+    						cameraImageUrl: /*cameraImageUrl*/ ctx[4]
+    					}
+    				])
+    			: {};
+
+    			camera.$set(camera_changes);
+
+    			if (dirty & /*contentWidth*/ 256 && style_width !== (style_width = `${/*contentWidth*/ ctx[8]}px`)) {
+    				internal.set_style(div, "width", style_width, false);
+    			}
+
+    			if (dirty & /*contentHeight*/ 2048 && style_height !== (style_height = `${/*contentHeight*/ ctx[11]}px`)) {
+    				internal.set_style(div, "height", style_height, false);
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			internal.transition_in(currentfloor.$$.fragment, local);
+    			internal.transition_in(camera.$$.fragment, local);
+    			current = true;
+    		},
+    		o(local) {
+    			internal.transition_out(currentfloor.$$.fragment, local);
+    			internal.transition_out(camera.$$.fragment, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (detaching) internal.detach(div);
+    			internal.destroy_component(currentfloor);
+    			internal.destroy_component(camera);
+    		}
+    	};
+    }
+
+    function create_fragment$9(ctx) {
+    	let if_block_anchor;
+    	let current;
+    	let if_block = /*visible*/ ctx[1] && create_if_block$3(ctx);
+
+    	return {
+    		c() {
+    			if (if_block) if_block.c();
+    			if_block_anchor = internal.empty();
+    		},
+    		m(target, anchor) {
+    			if (if_block) if_block.m(target, anchor);
+    			internal.insert(target, if_block_anchor, anchor);
+    			current = true;
+    		},
+    		p(ctx, [dirty]) {
+    			if (/*visible*/ ctx[1]) {
+    				if (if_block) {
+    					if_block.p(ctx, dirty);
+
+    					if (dirty & /*visible*/ 2) {
+    						internal.transition_in(if_block, 1);
+    					}
+    				} else {
+    					if_block = create_if_block$3(ctx);
+    					if_block.c();
+    					internal.transition_in(if_block, 1);
+    					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+    				}
+    			} else if (if_block) {
+    				internal.group_outros();
+
+    				internal.transition_out(if_block, 1, 1, () => {
+    					if_block = null;
+    				});
+
+    				internal.check_outros();
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			internal.transition_in(if_block);
+    			current = true;
+    		},
+    		o(local) {
+    			internal.transition_out(if_block);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (if_block) if_block.d(detaching);
+    			if (detaching) internal.detach(if_block_anchor);
+    		}
+    	};
+    }
+
+    function instance$9($$self, $$props, $$invalidate) {
+    	let { five } = $$props;
+    	let { visible } = $$props;
+    	let { hoverEnable } = $$props;
+    	let { floorplanData } = $$props;
+    	let { cameraImageUrl } = $$props;
+    	let { extraObjects = [] } = $$props;
+    	let pxmm = 0;
+    	let floorIndex = 0;
+    	let clientWidth = 0;
+    	let clientHeight = 0;
+    	let contentWidth = 0;
+    	let contentHeight = 0;
+
+    	function handlePanoArrived(panoIndex) {
+    		$$invalidate(10, floorIndex = five.work.observers[panoIndex].floorIndex);
+    	}
+
+    	svelte.onMount(() => {
+    		five.on('panoArrived', handlePanoArrived);
+
+    		return () => {
+    			five.off('panoArrived', handlePanoArrived);
+    		};
+    	});
+
+    	function div_elementresize_handler() {
+    		clientWidth = this.clientWidth;
+    		clientHeight = this.clientHeight;
+    		$$invalidate(6, clientWidth);
+    		$$invalidate(7, clientHeight);
+    	}
+
+    	$$self.$$set = $$props => {
+    		if ('five' in $$props) $$invalidate(0, five = $$props.five);
+    		if ('visible' in $$props) $$invalidate(1, visible = $$props.visible);
+    		if ('hoverEnable' in $$props) $$invalidate(2, hoverEnable = $$props.hoverEnable);
+    		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+    		if ('cameraImageUrl' in $$props) $$invalidate(4, cameraImageUrl = $$props.cameraImageUrl);
+    		if ('extraObjects' in $$props) $$invalidate(5, extraObjects = $$props.extraObjects);
+    	};
+
+    	$$self.$$.update = () => {
+    		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 456) {
+    			{
+    				const size = Math.min(clientWidth, clientHeight);
+    				const { max, min } = floorplanData.bounding;
+    				const boundingWidth = max.x - min.x;
+    				const boundingHeight = max.y - min.y;
+
+    				const contentSize = (function getSize() {
+    					if (boundingWidth > boundingHeight) return [size, size / boundingWidth * boundingHeight];
+    					return [size / boundingHeight * boundingWidth, size];
+    				})();
+
+    				$$invalidate(8, contentWidth = contentSize[0]);
+    				$$invalidate(11, contentHeight = contentSize[1]);
+    				$$invalidate(9, pxmm = contentWidth / boundingWidth);
+    			}
+    		}
+    	};
+
+    	return [
+    		five,
+    		visible,
+    		hoverEnable,
+    		floorplanData,
+    		cameraImageUrl,
+    		extraObjects,
+    		clientWidth,
+    		clientHeight,
+    		contentWidth,
+    		pxmm,
+    		floorIndex,
+    		contentHeight,
+    		div_elementresize_handler
+    	];
+    }
+
+    class Main extends internal.SvelteComponent {
+    	constructor(options) {
+    		super();
+
+    		internal.init(
+    			this,
+    			options,
+    			instance$9,
+    			create_fragment$9,
+    			internal.safe_not_equal,
+    			{
+    				five: 0,
+    				visible: 1,
+    				hoverEnable: 2,
+    				floorplanData: 3,
+    				cameraImageUrl: 4,
+    				extraObjects: 5
+    			},
+    			add_css$8
+    		);
+    	}
+    }
+
+    class Controller$1 extends Controller$5 {
+        constructor(five, params) {
+            super(five);
+            // =============== public properties =================
+            Object.defineProperty(this, "name", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: () => {
-                    if (this.state.enabled === false)
-                        return;
-                    if (this.wrapper)
-                        return;
-                    if (!this.selector)
-                        return;
-                    const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
-                    if (!wrapper)
-                        throw new Error('不正确的父容器选择器');
-                    this.wrapper = wrapper;
-                    wrapper.append(this.container);
-                }
+                value: 'panoFloorplanRadarPlugin'
             });
-            /** 更改模型时，自动隐藏户型图 */
-            Object.defineProperty(this, "onFiveModeChange", {
+            Object.defineProperty(this, "state", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (mode) => {
-                    // 目前 Five modeChange 事件没有暴露 userAction，先拿 false 苟着
-                    if (mode !== this.showState.mode) {
-                        this.updateState({ visible: false }, false);
-                        this._hide({ userAction: false });
-                    }
-                }
+                value: void 0
             });
-            /** 惯性结束后，判断能否自动展示户型图 */
-            Object.defineProperty(this, "onFiveInteriaPan", {
+            // =============== protected properties =================
+            Object.defineProperty(this, "data", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (_, isFinal) => {
-                    if (!isFinal)
-                        return;
-                    if (this.state.config.autoShowEnable === false)
-                        return;
-                    // 如果用户调用 hide 方法手动隐藏户型图，则不允许自动展示
-                    if (this.isHiddenByHideFunc)
-                        return;
-                    const fiveCurrentState = this.five.getCurrentState();
-                    if (fiveCurrentState.mode !== 'Floorplan')
-                        return;
-                    if (this.state.visible)
-                        return;
-                    if (shouldFloorplanShowWithPose(fiveCurrentState)) {
-                        this.updateState({ visible: true }, true);
-                        this._show({ isAutoShow: true });
-                    }
-                }
+                value: void 0
             });
-            /** panoIndex 改变时，更新 floorIndex */
-            Object.defineProperty(this, "onFivePanoArrived", {
+            // =============== private properties =================
+            Object.defineProperty(this, "app", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (index) => {
-                    var _a;
-                    if (!((_a = this.five) === null || _a === void 0 ? void 0 : _a.work))
-                        return;
-                    this.panoIndex = index;
-                    this.floorIndex = this.five.work.observers[index].floorIndex;
-                }
+                value: void 0
             });
-            /** cameraUpdate 时判断户型图是否应该自动隐藏 */
-            Object.defineProperty(this, "onFiveCameraUpdate", {
+            Object.defineProperty(this, "wrapperSelector", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (_, userAction) => {
-                    if (!this.state.visible)
-                        return;
-                    // 展示过程中不处理自动隐藏逻辑
-                    if (this.showPromise)
-                        return;
-                    const fiveCurrentState = this.five.getCurrentState();
-                    if (shouldFloorplanHideWithPose(fiveCurrentState)) {
-                        this.updateState({ visible: false }, userAction);
-                        this._hide({ userAction, isAutoHide: true });
-                    }
-                }
+                value: ''
             });
-            /** 在户型图展示时阻止多指操作, 阻止鼠标放大 */
-            Object.defineProperty(this, "onFiveWantsGesture", {
-                enumerable: true,
-                configurable: true,
-                writable: true,
-                value: (type, pointers) => {
-                    if (!this.state.visible)
-                        return;
-                    // 阻止多指操作
-                    if (pointers.length > 1)
-                        return false;
-                    // 阻止鼠标滚轮行为
-                    if (type === 'mouseWheel')
-                        return false;
-                }
+            Object.defineProperty(this, "wrapper", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: null
             });
-            /** 户型图展示中，转动三维模型，结束时应该自动修复模型状态 */
-            Object.defineProperty(this, "onFiveWantsPanGesture", {
+            Object.defineProperty(this, "disposed", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (_, isFinal) => {
-                    if (this.five.getCurrentState().mode !== 'Floorplan')
-                        return;
-                    if (this.state.config.autoShowEnable === false)
-                        return;
-                    if (isFinal && this.state.visible) {
-                        this.five.updateCamera(this.showState, 0);
-                        // 禁用掉 isFinal 的 panGesture 行为
-                        // 因为 panGesture 中包含对相机的处理，会跟回调事件中的处理逻辑冲突
-                        // 此行为也会禁用 pan 结束后的惯性处理
-                        return false;
-                    }
-                }
+                value: false
             });
-            /** 阻止点击分间走点 */
-            Object.defineProperty(this, "onFiveWantsTapGesture", {
+            Object.defineProperty(this, "extraObjects", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: () => this.handleClick()
+                value: []
             });
-            /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
-            Object.defineProperty(this, "onFiveWantsChangeMode", {
+            Object.defineProperty(this, "dispose", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (mode, prevMode) => {
-                    if (prevMode === 'Panorama' && mode === 'Floorplan') {
-                        this.lastPanoramaLongitude = this.five.getCurrentState().longitude;
-                    }
-                    // if (mode !== 'Floorplan') this.hide()
+                value: () => {
+                    var _a;
+                    this.disposed = true;
+                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                    this.wrapper = null;
+                    this.wrapperSelector = '';
+                    this.hooks.emit('dispose');
                 }
             });
-            /** 模型楼层高亮改变时，自动进行楼层切换 */
-            Object.defineProperty(this, "onModelShownFloorChange", {
+            Object.defineProperty(this, "_disable", {
                 enumerable: true,
                 configurable: true,
                 writable: true,
-                value: (shownFloor) => {
-                    if (this.floorIndex === shownFloor)
-                        return;
-                    if (shownFloor === null) {
-                        const panoIndex = this.five.getCurrentState().panoIndex;
-                        this.floorIndex = this.five.work.observers[panoIndex].floorIndex;
-                        return;
-                    }
-                    this.floorIndex = shownFloor;
-                    this.updateSize();
-                    this.render();
+                value: (options) => {
+                    var _a;
+                    const { userAction } = options;
+                    (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                    this.app = undefined;
+                    this.hooks.emit('disable', { userAction });
                 }
             });
-            if (params === null || params === void 0 ? void 0 : params.selector) {
-                this.selector = params.selector;
-                console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
-            }
-            // =============== init Show State ===============
-            this.showState = {
-                mode: 'Floorplan',
-                longitude: 0,
-                latitude: Math.PI / 2,
-                fov: FIVE_CAMERA_DEFAULT_FOV / ((_a = params === null || params === void 0 ? void 0 : params.scale) !== null && _a !== void 0 ? _a : 1),
-            };
+            this.five = five;
             // =============== init State ===============
             const baseConfig = {
-                northDesc: '北',
-                modelOpacity: 1,
-                hoverEnable: true,
-                compassEnable: true,
-                autoShowEnable: true,
-                ruleLabelsEnable: true,
-                roomLabelsEnable: true,
+                hoverEnable: false,
                 cameraImageUrl: CAMERA_IMAGE,
-                attachedTo: exports.FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
-                getLabelElement: undefined,
-                adaptiveRoomLabelVisibleEnable: true,
             };
-            const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
+            const paramsConfig = (params === null || params === void 0 ? void 0 : params.configs) ? params.configs : {};
             const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
-            this.state = {
-                enabled: true,
-                visible: false,
-                config,
-            };
-            // =============== init Container ===============
-            this.initContainer();
+            this.state = { enabled: true, visible: true, config };
+            // =============== init wrapper ===============
+            if (params === null || params === void 0 ? void 0 : params.wrapper)
+                console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+            if (typeof (params === null || params === void 0 ? void 0 : params.wrapper) === 'string')
+                this.wrapperSelector = params.wrapper;
+            else if ((params === null || params === void 0 ? void 0 : params.wrapper) instanceof Element)
+                this.wrapper = params.wrapper;
             // =============== init Listener ===============
-            // 注意插件声明周期内只监听一次的事件不放在 addEventListener 里面
-            // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
-            five.model.loaded ? this.onFiveModelLoaded() : five.once('modelLoaded', this.onFiveModelLoaded);
             five.once('dispose', this.dispose);
-            this.addEventListener();
         }
         async load(serverData, state, userAction = true) {
+            // const loadImage = async () => {
+            //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
+            //   // 当有 svgString 时，没有加载过程
+            //   if (floorplanData.outlines[floorIndex]?.svgContent) return
+            //   // 如果当前楼层图片不存在，不存在加载过程
+            //   const nowFloorImageSrc = floorplanData.outlines[floorIndex]?.url
+            //   if (!nowFloorImageSrc) return
+            //   // 图片加载完成时再 render
+            //   await new Promise<void>((resolve) => {
+            //     const nowFloorImage = new Image()
+            //     nowFloorImage.src = nowFloorImageSrc
+            //     nowFloorImage.onload = () => resolve()
+            //   })
+            // }
+            // await loadImage()
             function isPluginServerData(serverData) {
                 return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
             }
-            const _data = serverData;
-            if (_data && !_data.version)
-                console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
             const copyData = JSON.parse(JSON.stringify(serverData));
             const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
             const prevData = this.data;
@@ -7021,17 +7703,21 @@
                 this.updateState(state, userAction);
             this.render();
         }
-        /** 把插件的渲染DOM插入到对应的容器中去 */
-        appendTo(wrapper) {
-            this.wrapper = wrapper;
-            // 插件 disabled 时，只是不执行副作用，但是 wrapper 还是要赋值的，不然 enable 的时候找不到父容器
-            if (!this.state.enabled)
+        async show(options = {}) {
+            // 已经展示完成了，不做任何操作
+            if (this.state.visible)
                 return;
-            wrapper.appendChild(this.container);
-            this.render();
-            return this;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ visible: true }, userAction);
+            this._show({ userAction });
+        }
+        async hide(options = {}) {
+            if (!this.state.visible)
+                return;
+            const userAction = options.userAction !== undefined ? options.userAction : true;
+            this.updateState({ visible: false }, userAction);
+            this._hide({ userAction });
         }
-        /** 启用插件 */
         enable(options = {}) {
             if (this.state.enabled)
                 return;
@@ -7039,7 +7725,6 @@
             this.updateState({ enabled: true }, options.userAction || userAction);
             this._enable({ userAction });
         }
-        /** 禁用插件 */
         disable(options = {}) {
             if (!this.state.enabled)
                 return;
@@ -7053,23 +7738,56 @@
             const userAction = options.userAction !== undefined ? options.userAction : true;
             this.updateState(state, userAction);
             if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
-                state.enabled ? this._enable({ userAction }) : this._disable({ userAction });
+                const options = { userAction };
+                state.enabled ? this._enable(options) : this._disable(options);
             }
             if (state.visible !== undefined && prevState.visible !== state.visible) {
                 const options = { userAction };
                 state.visible ? this._show(options) : this._hide(options);
             }
         }
-        changeConfigs(_config, userAction = true) {
-            const config = Object.assign(Object.assign({}, this.state.config), _config);
-            this.updateState({ config }, userAction);
-            if (!this.container)
+        /** 把插件的渲染DOM插入到对应的容器中去 */
+        appendTo(wrapper) {
+            this.wrapper = wrapper;
+            this.render();
+        }
+        changeConfigs(config, userAction = true) {
+            this.setState({ config }, { userAction });
+            this.render();
+        }
+        setExtraObjectsWith3DPositions(data) {
+            if (!this.data)
                 return;
+            this.extraObjects = formatExtraObjects(data, this.five, this.data);
             this.render();
         }
         async formatData(serverData) {
             return await formatData(serverData.data);
         }
+        _enable(options) {
+            const { userAction } = options;
+            this.hooks.emit('enable', { userAction });
+            if (this.state.visible)
+                this._show({ userAction });
+        }
+        _show(options) {
+            if (this.disposed)
+                return;
+            if (!this.state.enabled)
+                return;
+            const { userAction } = options;
+            this.hooks.emit('show', { userAction });
+            this.render();
+        }
+        _hide(options) {
+            if (this.disposed)
+                return;
+            if (!this.state.enabled)
+                return;
+            const { userAction } = options;
+            this.hooks.emit('hide', { userAction });
+            this.render();
+        }
         updateState(state, userAction) {
             const prevState = this.state;
             this.state = Object.assign(Object.assign({}, this.state), state);
@@ -7077,68 +7795,24 @@
                 return;
             this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
         }
-        /** 如果用户是通过 selector 设置父容器，需要在 modelLoaded 之后把 container 自动放到父容器里
-         *
-         * - TODO: 等 selector 功能下掉之后删除这个逻辑
-         */
-        initContainer() {
-            this.container.classList.add('floorplan-plugin');
-            Object.assign(this.container.style, {
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: 'translate(-50%, -50%)',
-                zIndex: 10,
-                pointerEvents: 'none',
-            });
-            this.five.addExtraElement(this.container);
-        }
-        addEventListener() {
-            if (!this.state.enabled)
-                return;
-            if (this.hasAddedEventListener)
+        render() {
+            if (this.disposed)
                 return;
-            const five = this.five;
-            five.on('modeChange', this.onFiveModeChange);
-            five.on('interiaPan', this.onFiveInteriaPan);
-            five.on('panoArrived', this.onFivePanoArrived);
-            five.on('cameraUpdate', this.onFiveCameraUpdate);
-            five.on('wantsGesture', this.onFiveWantsGesture);
-            five.on('wantsPanGesture', this.onFiveWantsPanGesture);
-            five.on('wantsTapGesture', this.onFiveWantsTapGesture);
-            five.on('wantsChangeMode', this.onFiveWantsChangeMode);
-            five.on('modelShownFloorChange', this.onModelShownFloorChange);
-        }
-        removeEventListener() {
-            const five = this.five;
-            this.hasAddedEventListener = false;
-            // 注意这里并没有消除 dispose 的监听
-            five.off('modelLoaded', this.onFiveModelLoaded);
-            five.off('modeChange', this.onFiveModeChange);
-            five.off('interiaPan', this.onFiveInteriaPan);
-            five.off('panoArrived', this.onFivePanoArrived);
-            five.off('cameraUpdate', this.onFiveCameraUpdate);
-            five.off('wantsGesture', this.onFiveWantsGesture);
-            five.off('wantsPanGesture', this.onFiveWantsPanGesture);
-            five.off('wantsTapGesture', this.onFiveWantsTapGesture);
-            five.off('wantsChangeMode', this.onFiveWantsChangeMode);
-            five.off('modelShownFloorChange', this.onModelShownFloorChange);
-        }
-        render(duration) {
             if (!this.state.enabled)
                 return;
-            if (!this.container || !this.data)
-                return;
-            if (this.size.width === 0)
+            // 处理 wrapper
+            if (!this.wrapper && this.wrapperSelector) {
+                const _wrapper = document.querySelector(this.wrapperSelector);
+                this.wrapper = _wrapper;
+            }
+            if (!this.data || !this.wrapper)
                 return;
-            const props = Object.assign(Object.assign({}, this.state.config), { visible: this.state.visible, duration: duration !== null && duration !== void 0 ? duration : 0, panoIndex: this.panoIndex, floorIndex: this.floorIndex, floorplanData: this.data, lastPanoramaLongitude: this.lastPanoramaLongitude });
-            if (this.app)
-                return this.app.$set(props);
-            this.app = new Main$1({ target: this.container, intro: true, props });
+            const props = Object.assign(Object.assign({}, this.state.config), { five: this.five, floorplanData: this.data, visible: this.state.visible, extraObjects: this.extraObjects });
+            this.app ? this.app.$set(props) : (this.app = new Main({ target: this.wrapper, props }));
         }
     }
 
-    const ModelFloorplanPlugin = (five, params) => {
+    const PanoFloorplanRadarPlugin = (five, params) => {
         return new Controller$1(five, params);
     };
 
@@ -9245,7 +9919,7 @@
     }
 
     const defaultBaseOptions$1 = { userAction: true };
-    class PanoCompassController extends Controller$4 {
+    class PanoCompassController extends Controller$5 {
         constructor(five$1, config) {
             super(five$1);
             /**
@@ -16697,7 +17371,7 @@ void main() {
      * pano plugin controller 基类
      * @author kyleju
      */
-    class BasePanoPluginController extends Controller$5 {
+    class BasePanoPluginController extends Controller$6 {
         constructor(five) {
             super(five);
             Object.defineProperty(this, "state", {
@@ -17436,6 +18110,7 @@ void main() {
     exports.FLOOR_TYPE_MAP = FLOOR_TYPE_MAP;
     exports.ItemLabelPlugin = Plugin;
     exports.Magnifier = Magnifier;
+    exports.MapviewFloorplanPlugin = MapviewFloorplanPlugin;
     exports.ModelChassisCompassPlugin = ModelChassisCompassPlugin;
     exports.ModelEntryDoorGuidePlugin = ModelEntryDoorGuidePlugin;
     exports.ModelFloorplanPlugin = ModelFloorplanPlugin;