@realsee/dnalogel 2.0.0-alpha.35 → 2.0.0-alpha.36

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -1,61 +1,80 @@
-import { omit } from '../../shared-utils/filter';
-import { Subscribe } from '@realsee/five';
-import { FloorplanErrorType, FIVE_CAMERA_DEFAULT_FOV, SHOW_ANIME_DURATION } from './utils/constant';
 import to from '../../shared-utils/to';
+import equal from '../../shared-utils/equal';
 import Main from '../Components/Main';
 import formatData from '../utils/formatData';
-import equal from '../../shared-utils/equal';
+import { CAMERA_IMAGE } from '../Assets/camera';
+import { omit } from '../../shared-utils/filter';
 import getPxmm from '../../shared-utils/getPxmm';
-import correctFiveState, { checkShowState } from './utils/correctFiveState';
+import { FLOOR_PLAN_ATTACHED_TO } from '../constant';
+import * as BasePlugin from '../../base/BasePluginWithData';
+import correctFiveState, { checkShowState } from '../utils/correctFiveState';
 import changeModelCanvasOpacity from '../../shared-utils/changeModelCanvasOpacity';
-export const MODEL_FLOORPLAN_PLUGIN_NAME = 'modelFloorplanPlugin';
-export default class ModelFloorplanPluginController {
+import { FloorplanErrorType, FIVE_CAMERA_DEFAULT_FOV, SHOW_ANIME_DURATION } from '../utils/constant';
+/** 当前 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;
+}
+export class Controller extends BasePlugin.Controller {
     constructor(five, params) {
         var _a;
+        super(five);
+        // =============== public properties =================
         Object.defineProperty(this, "name", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: MODEL_FLOORPLAN_PLUGIN_NAME
+            value: 'modelFloorplanPlugin'
         });
-        /** 用于绑定事件钩子 */
-        Object.defineProperty(this, "hooks", {
+        Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        /** 展示状态 */
-        Object.defineProperty(this, "visible", {
+        // =============== private properties =================
+        Object.defineProperty(this, "data", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: false
-        });
-        /** 户型图大小 */
-        Object.defineProperty(this, "size", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: { width: 0, height: 0 }
+            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, "pxmm", {
+        /** show 动画的公共 Promise */
+        Object.defineProperty(this, "showPromise", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: 0
+            value: void 0
         });
-        Object.defineProperty(this, "five", {
+        Object.defineProperty(this, "app", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: undefined
         });
         Object.defineProperty(this, "panoIndex", {
             enumerable: true,
@@ -69,85 +88,118 @@ export default class ModelFloorplanPluginController {
             writable: true,
             value: 0
         });
-        Object.defineProperty(this, "configs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        Object.defineProperty(this, "lastPanoramaLongitude", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 0
-        });
         Object.defineProperty(this, "selector", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "floorplanData", {
+        /** 公共 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')
         });
-        Object.defineProperty(this, "showState", {
+        /** 展示户型图图前，Five 的 Panorama Longitude */
+        Object.defineProperty(this, "lastPanoramaLongitude", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: 0
         });
-        /** 记录上次 show 的参数，如果不一致，需要 reject 掉正在进行的 showPromise */
-        Object.defineProperty(this, "ModelFloorplanPluginsShowOpts", {
+        /** 户型图大小 */
+        Object.defineProperty(this, "size", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: { width: 0, height: 0 }
         });
-        Object.defineProperty(this, "showPromise", {
+        /** 是否已经执行过事件监听 */
+        Object.defineProperty(this, "hasAddedEventListener", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: false
         });
-        Object.defineProperty(this, "showRejection", {
+        /** 上一次隐藏是否是用户调用了 hide 导致的 */
+        Object.defineProperty(this, "isHiddenByHideFunc", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: false
         });
+        /** 销毁插件 */
         Object.defineProperty(this, "dispose", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: () => {
                 var _a, _b;
-                const five = this.five;
-                this.hide();
+                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();
-                five.off('modelLoaded', this.handleModelLoaded);
-                five.off('modeChange', this.handleModeChange);
-                five.off('panGesture', this.handlePanGesture);
-                five.off('panoArrived', this.handlePanoArrived);
-                five.off('wantsChangeMode', this.handleWantsChangeMode);
-                five.off('wantsInteriaPan', this.handleWantsInteriaPan);
-                five.off('wantsTapGesture', this.handleWantsTapGesture);
-                five.off('modelShownFloorChange', this.onModelShownFloorChange);
+                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);
             }
         });
         /** 更新户型图大小 */
@@ -156,166 +208,172 @@ export default class ModelFloorplanPluginController {
             configurable: true,
             writable: true,
             value: () => {
-                if (!this.floorplanData)
+                if (!this.data)
                     return;
                 if (!checkShowState(this.five, this.showState))
                     return;
                 if (!this.container || !this.wrapper)
                     return;
                 // 计算户型图展示大小
-                const { min, max } = this.floorplanData.bounding;
+                const { min, max } = this.data.bounding;
                 const width = max.x - min.x;
                 const height = max.y - min.y;
                 // 每毫米对应的 px 值
-                const options = this.configs.attachedTo ? { attachedTo: this.configs.attachedTo } : undefined;
+                const 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.pxmm = pxmm;
-                this.size = { width: _width, height: _height };
                 this.container.style.width = _width + 'px';
                 this.container.style.height = _height + 'px';
+                this.size = { width: _width, height: _height };
             }
         });
-        /** 展示户型图
-         * 1. show 函数大部分情况下需要耗时
-         * 2. 如果当前已经在展示中，将不会触发任何事件
-         * 3. 如果展示过程被中断，将抛出错误
-         * 4. 多次调用 show 方法，只会触发一次 showAnimationEnded 事件，但是展示结果会取决于最后一次调用参数
-         * 5. 如果多次调用 show 方法，参数与上次参数不一致时，上次 show Promise 会被 reject
-         * @param opts.floorIndex 楼层
-         * @param opts.modelOpacity 模型透明度
-         * @param opts.immediately 是否立即展示
-         * @param opts.isAutoShow 是否是自动展示
-         */
-        Object.defineProperty(this, "show", {
+        Object.defineProperty(this, "_disable", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: async (opts) => {
-                var _a, _b;
-                // 已经在展示中了
-                if (!this.showPromise && this.visible)
-                    return 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.floorplanData)
+                if (!this.data)
                     throw new Error(FloorplanErrorType.DataNotLoaded);
-                this.visible = true;
-                if (this.showPromise) {
-                    const sameWithLastOpts = equal(opts, this.ModelFloorplanPluginsShowOpts, { deep: false });
-                    if (!!this.showPromise && sameWithLastOpts)
-                        return this.showPromise;
-                    if (!!this.showPromise && !sameWithLastOpts)
-                        (_b = this.showRejection) === null || _b === void 0 ? void 0 : _b.call(this, FloorplanErrorType.DifferentShowParams);
-                }
-                this.ModelFloorplanPluginsShowOpts = opts;
+                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 () => {
-                    var _a, _b;
+                    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, opts === null || opts === void 0 ? void 0 : opts.userAction));
+                    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);
-                    if (!this.visible)
-                        throw new Error(FloorplanErrorType.UnknownError);
-                    // 更新户型图状态
-                    this.visible = true;
                     // 更新户型图大小
                     this.updateSize();
                     // 高亮当前楼层，有两个目的
                     // 1. 点击模型时，可以跳转到当前楼层的点位上
                     // 2. 当前楼层比较小时，户型图也比较小，如果展示全部楼层，会展示户型图外有一圈模型
-                    if (opts === null || opts === void 0 ? void 0 : opts.floorIndex)
-                        this.floorIndex = opts.floorIndex;
+                    this.floorIndex = mergedOptions.floorIndex;
                     this.five.model.show(this.floorIndex);
                     // 模型消失, 渲染户型图
-                    const modelOpacity = (_b = (_a = opts === null || opts === void 0 ? void 0 : opts.modelOpacity) !== null && _a !== void 0 ? _a : this.configs.modelOpacity) !== null && _b !== void 0 ? _b : 1;
-                    const renderDuration = (opts === null || opts === void 0 ? void 0 : opts.immediately) ? 0 : SHOW_ANIME_DURATION;
+                    const modelOpacity = mergedOptions.modelOpacity;
+                    const renderDuration = mergedOptions.immediately ? 0 : SHOW_ANIME_DURATION;
                     changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
                     this.render(renderDuration);
-                    // 展示之后的事件监听
-                    this.five.on('wantsGesture', this.handleWantsGesture);
-                    this.five.on('wantsTapGesture', this.handleWantsTapGesture);
-                    return true;
                 };
-                const showPromise = getShowPromise()
+                this.showPromise = getShowPromise()
                     .then(() => {
-                    var _a;
-                    this.hooks.emit('showAnimationEnded', { auto: !!(opts === null || opts === void 0 ? void 0 : opts.isAutoShow), userAction: (_a = opts === null || opts === void 0 ? void 0 : opts.userAction) !== null && _a !== void 0 ? _a : true });
-                    return true;
+                    this.hooks.emit('showAnimationEnded', {
+                        auto: mergedOptions.isAutoShow,
+                        userAction: mergedOptions.userAction,
+                    });
                 })
                     .catch((error) => {
+                    this.updateState({ visible: false }, mergedOptions.userAction);
                     // 自动展示的报错内部处理
-                    if (opts === null || opts === void 0 ? void 0 : opts.isAutoShow)
-                        return false;
-                    if (!(error instanceof Error))
-                        return false;
+                    if (mergedOptions.isAutoShow)
+                        return;
                     // 非自动展示的报错继续向外抛出
-                    throw error;
+                    if (error instanceof Error)
+                        throw error;
                 })
                     .finally(() => {
                     this.showPromise = undefined;
                     this.showRejection = undefined;
                 });
-                this.showPromise = showPromise;
-                return showPromise;
+                return this.showPromise;
             }
         });
-        /** 隐藏户型图 */
-        Object.defineProperty(this, "hide", {
+        Object.defineProperty(this, "_hide", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: (options) => {
-                var _a, _b;
-                if (this.size.width === 0)
-                    return true;
-                if (this.visible === false)
-                    return true;
-                const isAutoHide = !!(options === null || options === void 0 ? void 0 : options.isAutoHide);
-                this.five.off('wantsGesture', this.handleWantsGesture);
-                this.five.off('wantsTapGesture', this.handleWantsTapGesture);
-                this.visible = false;
+                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();
-                this.hooks.emit('hide', { auto: isAutoHide, userAction: (_b = options === null || options === void 0 ? void 0 : options.userAction) !== null && _b !== void 0 ? _b : true });
-                return true;
             }
         });
-        /** 模型楼层高亮改变时，自动进行楼层切换 */
-        Object.defineProperty(this, "onModelShownFloorChange", {
+        Object.defineProperty(this, "handleClick", {
             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;
+            value: () => {
+                if (!this.state.visible)
                     return;
-                }
-                this.floorIndex = shownFloor;
-                this.updateSize();
-                this.render();
+                const preventDefault = this.hooks.emit('click');
+                if (preventDefault)
+                    return false;
             }
         });
-        Object.defineProperty(this, "handleModelLoaded", {
+        /** modelLoaded 之后自动执行 append container 操作  */
+        Object.defineProperty(this, "onFiveModelLoaded", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: () => {
+                if (this.state.enabled === false)
+                    return;
                 if (this.wrapper)
                     return;
                 if (!this.selector)
@@ -327,54 +385,45 @@ export default class ModelFloorplanPluginController {
                 wrapper.append(this.container);
             }
         });
-        Object.defineProperty(this, "handleClick", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                if (!this.visible)
-                    return;
-                const prevented = this.hooks.emit('click');
-                if (prevented)
-                    return false;
-            }
-        });
-        Object.defineProperty(this, "handleWantsTapGesture", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => this.handleClick()
-        });
-        /** 从 Panorama 切换到其他模态时，记录当前的相机水平视角 */
-        Object.defineProperty(this, "handleWantsChangeMode", {
+        /** 更改模型时，自动隐藏户型图 */
+        Object.defineProperty(this, "onFiveModeChange", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: (mode) => {
-                if (mode !== 'Panorama') {
-                    this.lastPanoramaLongitude = this.five.getCurrentState().longitude;
+                // 目前 Five modeChange 事件没有暴露 userAction，先拿 false 苟着
+                if (mode !== this.showState.mode) {
+                    this.updateState({ visible: false }, false);
+                    this._hide({ userAction: false });
                 }
-                if (mode !== 'Floorplan')
-                    this.hide();
             }
         });
-        /** 监听模型态变化，只有在模型态才进行手势动作监听 */
-        Object.defineProperty(this, "handleModeChange", {
+        /** 惯性结束后，判断能否自动展示户型图 */
+        Object.defineProperty(this, "onFiveInteriaPan", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: (mode) => {
-                if (mode === 'Floorplan') {
-                    this.five.on('panGesture', this.handlePanGesture);
-                }
-                else {
-                    this.hide();
-                    this.five.off('panGesture', this.handlePanGesture);
+            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 });
                 }
             }
         });
         /** panoIndex 改变时，更新 floorIndex */
-        Object.defineProperty(this, "handlePanoArrived", {
+        Object.defineProperty(this, "onFivePanoArrived", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -386,149 +435,260 @@ export default class ModelFloorplanPluginController {
                 this.floorIndex = this.five.work.observers[index].floorIndex;
             }
         });
-        /** 当户型图正在展示中的时候禁用惯性 */
-        Object.defineProperty(this, "handleWantsInteriaPan", {
+        /** cameraUpdate 时判断户型图是否应该自动隐藏 */
+        Object.defineProperty(this, "onFiveCameraUpdate", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: () => {
-                if (this.visible)
-                    return false;
+            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 });
+                }
             }
         });
         /** 在户型图展示时阻止多指操作, 阻止鼠标放大 */
-        Object.defineProperty(this, "handleWantsGesture", {
+        Object.defineProperty(this, "onFiveWantsGesture", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: (type, pointers) => {
-                if (!this.visible)
+                if (!this.state.visible)
                     return;
+                // 阻止多指操作
                 if (pointers.length > 1)
                     return false;
+                // 阻止鼠标滚轮行为
                 if (type === 'mouseWheel')
                     return false;
             }
         });
-        /** 监听三维模型滑动
-         * 1. 在三维模型转动结束时，如果达到设置的阈值，会自动切换到户型图
-         * 2. 如何户型图已经展示，滑动时关闭户型图
-         */
-        Object.defineProperty(this, "handlePanGesture", {
+        /** 户型图展示中，转动三维模型，结束时应该自动修复模型状态 */
+        Object.defineProperty(this, "onFiveWantsPanGesture", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: async ({ latitude, longitude }, isFinal) => {
+            value: (_, isFinal) => {
                 if (this.five.getCurrentState().mode !== 'Floorplan')
                     return;
-                if (this.configs.autoShowEnable === false)
+                if (this.state.config.autoShowEnable === false)
                     return;
-                // 如果操作结束后，户型图还在展示中，初始化模型状态
-                if (isFinal && this.visible)
-                    return this.five.setState(this.showState, true);
-                // 满足消失的条件：
-                // 水平旋转角大于正负 5 度 || 俯仰角度大于 5 度
-                const latitudeHide = Math.abs(latitude - Math.PI / 2) > (5 * Math.PI) / 180;
-                const longitudeHide = longitude > 5 * (Math.PI / 180) && longitude < 355 * (Math.PI / 180);
-                const canHide = latitudeHide || longitudeHide;
-                if (this.visible && canHide)
-                    return this.hide({ isAutoHide: true });
-                if (this.five.camera.fov / FIVE_CAMERA_DEFAULT_FOV < 0.8)
+                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: () => 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,
+            writable: true,
+            value: (shownFloor) => {
+                if (this.floorIndex === shownFloor)
                     return;
-                // 户型图展示条件：
-                // 水平旋转角正负 30 度 && 俯仰角度小于 10 度
-                const latitudeVisible = Math.abs(latitude - Math.PI / 2) < (10 * Math.PI) / 180;
-                const longitudeVisible = longitude < 30 * (Math.PI / 180) || longitude > 330 * (Math.PI / 180);
-                if (isFinal && !this.visible && latitudeVisible && longitudeVisible) {
-                    // 当手指离开时需要等惯性结束之后在进行判断
-                    const handleInteriaPan = async (any, isFinal) => {
-                        if (!isFinal)
-                            return;
-                        this.five.off('interiaPan', handleInteriaPan);
-                        await this.show({ isAutoShow: true });
-                    };
-                    this.five.on('interiaPan', handleInteriaPan);
+                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();
             }
         });
-        this.five = five;
-        this.hooks = new Subscribe();
-        this.selector = params.selector;
-        this.configs = omit(params, ['selector']);
-        this.showState = { 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) };
-        // 设置 container 样式
-        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);
+        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),
+        };
+        // =============== init State ===============
+        const baseConfig = {
+            northDesc: '北',
+            modelOpacity: 1,
+            hoverEnable: true,
+            compassEnable: true,
+            autoShowEnable: true,
+            ruleLabelsEnable: true,
+            roomLabelsEnable: true,
+            cameraImageUrl: CAMERA_IMAGE,
+            attachedTo: FLOOR_PLAN_ATTACHED_TO.BOUNDING_CENTER,
+            getLabelElement: undefined,
+            adaptiveRoomLabelVisibleEnable: true,
+        };
+        const paramsConfig = params ? omit(params, ['selector', 'scale']) : {};
+        const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
+        this.state = {
+            enabled: true,
+            visible: false,
+            config,
+        };
+        // =============== init Container ===============
+        this.initContainer();
+        // =============== init Listener ===============
+        // 注意插件声明周期内只监听一次的事件不放在 addEventListener 里面
         // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
-        this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
+        five.model.loaded ? this.onFiveModelLoaded() : five.once('modelLoaded', this.onFiveModelLoaded);
         five.once('dispose', this.dispose);
-        five.on('modeChange', this.handleModeChange);
-        five.on('panoArrived', this.handlePanoArrived);
-        five.on('wantsChangeMode', this.handleWantsChangeMode);
-        five.on('wantsInteriaPan', this.handleWantsInteriaPan);
-        five.on('modelShownFloorChange', this.onModelShownFloorChange);
+        this.addEventListener();
     }
-    /** 加载户型图数据 */
-    async load(data) {
-        const copyData = JSON.parse(JSON.stringify(data));
-        this.floorplanData = await formatData(copyData);
+    async load(serverData, state, userAction = true) {
+        function isPluginServerData(serverData) {
+            return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+        }
+        const _data = serverData;
+        if (_data && !_data.version)
+            console.warn('传入 serverData.data 的方式后续可能不再支持，请把 serverData 整体传入 load 函数');
+        const copyData = JSON.parse(JSON.stringify(serverData));
+        const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+        const prevData = this.data;
+        this.data = await formatData(_serverData);
+        this.hooks.emit('dataLoaded', this.data);
+        this.hooks.emit('dataChange', this.data, prevData);
+        if (state)
+            this.updateState(state, userAction);
         this.render();
     }
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper) {
         this.wrapper = wrapper;
+        // 插件 disabled 时，只是不执行副作用，但是 wrapper 还是要赋值的，不然 enable 的时候找不到父容器
+        if (!this.state.enabled)
+            return;
         wrapper.appendChild(this.container);
+        this.render();
         return this;
     }
-    /** 更改户型图楼层 */
-    changeFloor(floorIndex) {
-        this.five.model.show(floorIndex);
+    /** 启用插件 */
+    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 });
     }
-    changeConfigs(params) {
-        Object.assign(this.configs, params);
-        if (!this.container)
+    /** 禁用插件 */
+    disable(options = {}) {
+        if (!this.state.enabled)
             return;
-        this.render();
+        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) {
+            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);
+    }
+    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 });
+    }
+    /** 如果用户是通过 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)
+            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.container || !this.floorplanData)
+        if (!this.state.enabled)
+            return;
+        if (!this.container || !this.data)
             return;
         if (this.size.width === 0)
             return;
-        const { northDesc, hoverEnable, cameraImageUrl, getLabelElement, roomLabelsEnable, compassEnable, ruleLabelsEnable } = this.configs;
-        const props = {
-            cameraImageUrl,
-            getLabelElement,
-            northDesc: northDesc !== null && northDesc !== void 0 ? northDesc : '北',
-            visible: this.visible,
-            duration: duration !== null && duration !== void 0 ? duration : 0,
-            panoIndex: this.panoIndex,
-            floorIndex: this.floorIndex,
-            floorplanData: this.floorplanData,
-            hoverEnable: hoverEnable !== null && hoverEnable !== void 0 ? hoverEnable : false,
-            compassEnable: compassEnable !== null && compassEnable !== void 0 ? compassEnable : true,
-            ruleLabelsEnable: ruleLabelsEnable !== null && ruleLabelsEnable !== void 0 ? ruleLabelsEnable : true,
-            roomLabelsEnable: roomLabelsEnable !== null && roomLabelsEnable !== void 0 ? roomLabelsEnable : true,
-            lastPanoramaLongitude: this.lastPanoramaLongitude,
-        };
-        if (!this.app) {
-            this.app = new Main({
-                target: this.container,
-                intro: true,
-                props,
-            });
-        }
-        else {
-            this.app.$set(props);
-        }
+        const props = Object.assign(Object.assign({}, this.state.config), { visible: this.state.visible, duration: duration !== null && duration !== void 0 ? duration : 0, panoIndex: this.panoIndex, floorIndex: this.floorIndex, floorplanData: this.data, lastPanoramaLongitude: this.lastPanoramaLongitude });
+        if (this.app)
+            return this.app.$set(props);
+        this.app = new Main({ target: this.container, intro: true, props });
     }
 }