@realsee/dnalogel 2.0.0-alpha.42 → 2.0.0-alpha.45

package/libs/ModelItemLabelPlugin/ItemLabelItem.js

@@ -22,7 +22,7 @@ import "./events.type";
 import classNames from 'classnames';
 
 function add_css(target) {
-	append_styles(target, "svelte-1mttyji", ".item-label-item.svelte-1mttyji{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1mttyji{opacity:1;animation:svelte-1mttyji-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1mttyji::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(16px);z-index:-1}.item-label-item__text-wrap.svelte-1mttyji{padding:6px 6px 0;position:absolute;height:20px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:10px;font-size:11px;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-1mttyji{padding-bottom:4px;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-1mttyji{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@keyframes svelte-1mttyji-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+	append_styles(target, "svelte-n1c1kg", ".item-label-item.svelte-n1c1kg{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0}.item-label-item.visible.svelte-n1c1kg{opacity:1;-webkit-animation:svelte-n1c1kg-fadeIn .3s ease-in;animation:svelte-n1c1kg-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-n1c1kg::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(0.83333rem);z-index:-1}.item-label-item__text-wrap.svelte-n1c1kg{padding:0.3125rem 0.3125rem 0;position:absolute;height:1.04167rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:0.52083rem;font-size:0.57292rem;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-n1c1kg{padding-bottom:0.20833rem;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;-o-border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-n1c1kg{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@-webkit-keyframes svelte-n1c1kg-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-n1c1kg-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
 }
 
 function create_fragment(ctx) {
@@ -49,12 +49,12 @@ function create_fragment(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			div1 = element("div");
-			attr(span, "class", "item-label-item__text svelte-1mttyji");
-			attr(div0, "class", "item-label-item__text-wrap svelte-1mttyji");
+			attr(span, "class", "item-label-item__text svelte-n1c1kg");
+			attr(div0, "class", "item-label-item__text-wrap svelte-n1c1kg");
 			set_style(div0, "top", `-${/*itemLabel*/ ctx[0].strokeLength + 26}px`);
-			attr(div1, "class", "item-label-item__bar svelte-1mttyji");
+			attr(div1, "class", "item-label-item__bar svelte-n1c1kg");
 			set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"));
+			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-n1c1kg"));
 			set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
@@ -84,7 +84,7 @@ function create_fragment(ctx) {
 				set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"))) {
+			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-n1c1kg"))) {
 				attr(div2, "class", div2_class_value);
 			}
 

package/libs/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -21,7 +21,7 @@ import {
 import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
 
 function add_css(target) {
-	append_styles(target, "svelte-17nkflf", ".room-label-item.svelte-17nkflf{position:absolute;font-size:8px;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none}.room-label-item__text.svelte-17nkflf{position:absolute;left:0;top:-64px;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:20px;min-width:32px;padding:0 6px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-17nkflf{position:absolute;top:-44px;height:48px;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-17nkflf{font-size:10px}");
+	append_styles(target, "svelte-877671", ".room-label-item.svelte-877671{position:absolute;font-size:0.41667rem;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.room-label-item__text.svelte-877671{position:absolute;left:0;top:-3.33333rem;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:1.04167rem;min-width:1.66667rem;padding:0 0.3125rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-877671{position:absolute;top:-2.29167rem;height:2.5rem;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-877671{font-size:0.52083rem}");
 }
 
 function create_fragment(ctx) {
@@ -41,11 +41,11 @@ function create_fragment(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			div0 = element("div");
-			attr(span, "class", "room-label-item__text svelte-17nkflf");
+			attr(span, "class", "room-label-item__text svelte-877671");
 			set_style(span, "background-image", "url(" + ROOM_LABEL_BG + ")");
 			toggle_class(span, "wide", /*roomLabel*/ ctx[0].name.length > 3);
-			attr(div0, "class", "room-label-item__bar svelte-17nkflf");
-			attr(div1, "class", "room-label-item svelte-17nkflf");
+			attr(div0, "class", "room-label-item__bar svelte-877671");
+			attr(div1, "class", "room-label-item svelte-877671");
 			set_style(div1, "z-index", /*roomLabel*/ ctx[0].zIndex, false);
 			set_style(div1, "transform", /*roomLabel*/ ctx[0].transform, false);
 			set_style(div1, "opacity", /*roomLabel*/ ctx[0].visible ? 1 : 0, false);

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -29,7 +29,7 @@ import { Raycaster, Vector3 } from 'three';
 import RoomLabelItem from './RoomLabelItem';
 
 function add_css(target) {
-	append_styles(target, "svelte-185yvaa", ".room-labels-container.svelte-185yvaa{width:100%;height:100%;position:relative;color:#fff}");
+	append_styles(target, "svelte-9eg4zi", ".room-labels-container.svelte-9eg4zi{width:100%;height:100%;position:relative;color:#fff}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -110,7 +110,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "room-labels-container svelte-185yvaa");
+			attr(div, "class", "room-labels-container svelte-9eg4zi");
 			add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
 		},
 		m(target, anchor) {

package/libs/ModelTVVideoPlugin/Plugin.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import * as THREE from 'three';
 import { parseModelTVVideoPoints } from "./utils/parseData";
 export const ModelTVVideoPlugin = (five, { videoElement }) => {
@@ -161,7 +152,7 @@ export const ModelTVVideoPlugin = (five, { videoElement }) => {
             xhr.send();
         });
     };
-    const load = (data, videoElement) => __awaiter(void 0, void 0, void 0, function* () {
+    const load = async (data, videoElement) => {
         const { video_src, video_poster_src, points } = data;
         state.videoSource = video_src;
         // TODO 存疑，先处理多一次遍历 o(2n)
@@ -171,11 +162,11 @@ export const ModelTVVideoPlugin = (five, { videoElement }) => {
         if (videoElement) {
             state.videoElement = videoElement;
         }
-        state.videoTexture = yield getVideoTexture(state.videoSource, state.videoElement);
+        state.videoTexture = await getVideoTexture(state.videoSource, state.videoElement);
         state.enabled = !!data.enable;
         if (state.enabled)
             enable();
-    });
+    };
     const dispose = () => {
         disable();
         state.videoTexture = undefined;

package/libs/PanoCompassPlugin/Controller.d.ts

@@ -0,0 +1,84 @@
+import { Five } from '@realsee/five';
+import type { BaseOptions } from '../base/BasePlugin';
+import * as BasePlugin from '../base/BasePluginWithData';
+import type { EventMap, PanoCompassPluginData, PanoCompassPluginParameterType, PluginData, PluginServerData, State } from './typings';
+export declare class PanoCompassController extends BasePlugin.Controller<State, EventMap, PluginServerData, PluginData> {
+    /**
+     * 默认状态
+     */
+    state: State;
+    data?: PanoCompassPluginData;
+    private group;
+    private roomInfoInstance?;
+    private roomInfoWrapperInstance?;
+    private compassMeshTween?;
+    private compassMesh?;
+    private entryDoorMesh?;
+    constructor(five: Five, config?: PanoCompassPluginParameterType);
+    /**
+     * 启用插件，响应用户操作并展示UI
+     * @param options
+     */
+    enable(options?: Required<BaseOptions>): void;
+    /**
+     * 禁用插件，禁止响应用户操作并隐藏UI
+     * @param options
+     */
+    disable(options?: Required<BaseOptions>): void;
+    /**
+     * 展示UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    show(options?: Required<BaseOptions>): Promise<void>;
+    /**
+     * 隐藏UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    hide(options?: Required<BaseOptions>): Promise<void>;
+    setState(state: Partial<State>, options?: Required<BaseOptions>): void;
+    load(data: PluginServerData | PluginData, state?: State, userAction?: boolean): Promise<void>;
+    /**
+     * 销毁插件
+     * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.compassMesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
+     */
+    dispose: () => void;
+    protected formatData(serverData: PluginServerData | PluginData): Promise<PluginData>;
+    /**
+     * 添加事件监听
+     */
+    private _addEventListener;
+    /**
+     * 移除事件监听
+     */
+    private _removeEventListener;
+    /**
+     * 启用，响应事件，展示UI
+     */
+    private _enable;
+    /**
+     * 禁用，不响应事件，不展示UI
+     */
+    private _disable;
+    /**
+     * 展示UI
+     */
+    private _toggleVisible;
+    private _clearCompassIfNeed;
+    private _clearEntryDoorIfNeed;
+    /**
+     * 初始化
+     * @todo 逻辑需要细分
+     */
+    private init;
+    private loadCompassMesh;
+    private loadEntryDoorMesh;
+    private loadRoomInfo;
+    private onFivePanoWillArrive;
+    private onFivePanoArrived;
+    private onFiveCameraDirectionUpdate;
+    private onFiveModeChange;
+}

package/libs/PanoCompassPlugin/{controller.js → Controller.js}

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import * as THREE from 'three';
 import { Five } from '@realsee/five';
 import * as BasePlugin from '../base/BasePluginWithData';
@@ -379,19 +370,17 @@ export class PanoCompassController extends BasePlugin.Controller {
             this.init();
         }
     }
-    load(data, state, userAction = true) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const nextData = yield this.formatData(data);
-            if (JSON.stringify(this.data) !== JSON.stringify(nextData)) {
-                this.hooks.emit('dataChange', nextData, this.data);
-                this.data = Object.assign({}, nextData);
-                this.init();
-                if (state) {
-                    this.setState(state, { userAction });
-                }
-                this.hooks.emit('dataLoaded', this.data);
+    async load(data, state, userAction = true) {
+        const nextData = await this.formatData(data);
+        if (JSON.stringify(this.data) !== JSON.stringify(nextData)) {
+            this.hooks.emit('dataChange', nextData, this.data);
+            this.data = Object.assign({}, nextData);
+            this.init();
+            if (state) {
+                this.setState(state, { userAction });
             }
-        });
+            this.hooks.emit('dataLoaded', this.data);
+        }
     }
     formatData(serverData) {
         if (serverData.version && serverData.data) {
@@ -405,64 +394,58 @@ export class PanoCompassController extends BasePlugin.Controller {
      * 初始化
      * @todo 逻辑需要细分
      */
-    init() {
+    async init() {
         var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function* () {
-            const northRad = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.north_rad) !== null && _b !== void 0 ? _b : null;
-            this._clearCompassIfNeed();
-            if (northRad !== null) {
-                this.compassMesh = yield this.loadCompassMesh();
-                this.compassMesh.rotateX(-Math.PI / 2);
-                this.compassMesh.rotateZ(northRad - Math.PI / 2);
-                this.group.add(this.compassMesh);
-            }
-            const entrance = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.entrance) !== null && _d !== void 0 ? _d : null;
-            this._clearEntryDoorIfNeed();
-            if (entrance !== null) {
-                this.entryDoorMesh = yield this.loadEntryDoorMesh();
-                this.roomInfoWrapperInstance = this.loadRoomInfo();
-                this.roomInfoInstance = getRoomInfoInstance();
-                this.entryDoorMesh.rotateX(-Math.PI / 2);
-                if (this.roomInfoWrapperInstance) {
-                    this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
-                }
-                this.group.add(this.entryDoorMesh);
+        const northRad = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.north_rad) !== null && _b !== void 0 ? _b : null;
+        this._clearCompassIfNeed();
+        if (northRad !== null) {
+            this.compassMesh = await this.loadCompassMesh();
+            this.compassMesh.rotateX(-Math.PI / 2);
+            this.compassMesh.rotateZ(northRad - Math.PI / 2);
+            this.group.add(this.compassMesh);
+        }
+        const entrance = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.entrance) !== null && _d !== void 0 ? _d : null;
+        this._clearEntryDoorIfNeed();
+        if (entrance !== null) {
+            this.entryDoorMesh = await this.loadEntryDoorMesh();
+            this.roomInfoWrapperInstance = this.loadRoomInfo();
+            this.roomInfoInstance = getRoomInfoInstance();
+            this.entryDoorMesh.rotateX(-Math.PI / 2);
+            if (this.roomInfoWrapperInstance) {
+                this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
             }
-            this.onFivePanoArrived(this.five.panoIndex || 0);
-            this.five.needsRender = true;
-        });
+            this.group.add(this.entryDoorMesh);
+        }
+        this.onFivePanoArrived(this.five.panoIndex || 0);
+        this.five.needsRender = true;
     }
-    loadCompassMesh() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const compassImageUrl = this.state.config.compassImageUrl;
-            const compassTexture = yield loadTexture(compassImageUrl);
-            const compassGeometry = new THREE.CircleGeometry(0.7, 32);
-            const compassMaterial = new THREE.MeshBasicMaterial({
-                map: compassTexture,
-                transparent: true,
-                opacity: 0,
-                depthTest: false,
-            });
-            const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
-            compassMesh.name = 'pano-compass-mesh';
-            return compassMesh;
+    async loadCompassMesh() {
+        const compassImageUrl = this.state.config.compassImageUrl;
+        const compassTexture = await loadTexture(compassImageUrl);
+        const compassGeometry = new THREE.CircleGeometry(0.7, 32);
+        const compassMaterial = new THREE.MeshBasicMaterial({
+            map: compassTexture,
+            transparent: true,
+            opacity: 0,
+            depthTest: false,
         });
+        const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
+        compassMesh.name = 'pano-compass-mesh';
+        return compassMesh;
     }
-    loadEntryDoorMesh() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const entryDoorImageUrl = this.state.config.entryDoorImageUrl;
-            const entryDoorTexture = yield loadTexture(entryDoorImageUrl);
-            const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
-            const entryDoorMaterial = new THREE.MeshBasicMaterial({
-                map: entryDoorTexture,
-                transparent: true,
-                opacity: 0.8,
-                depthTest: false,
-            });
-            const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
-            entryDoorMesh.name = 'pano-compass-entry-door';
-            return entryDoorMesh;
+    async loadEntryDoorMesh() {
+        const entryDoorImageUrl = this.state.config.entryDoorImageUrl;
+        const entryDoorTexture = await loadTexture(entryDoorImageUrl);
+        const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
+        const entryDoorMaterial = new THREE.MeshBasicMaterial({
+            map: entryDoorTexture,
+            transparent: true,
+            opacity: 0.8,
+            depthTest: false,
         });
+        const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
+        entryDoorMesh.name = 'pano-compass-entry-door';
+        return entryDoorMesh;
     }
     loadRoomInfo() {
         const points = [

package/libs/PanoCompassPlugin/index.d.ts

@@ -4,4 +4,4 @@ import type { PanoCompassPluginParameterType } from './typings';
 export declare type PanoCompassPluginExportType = PanoCompassController;
 export declare const PanoCompassPlugin: FivePlugin<PanoCompassPluginParameterType, PanoCompassPluginExportType>;
 export default PanoCompassPlugin;
-export type { PanoCompassPluginParameterType } from './typings';
+export type { PanoCompassPluginParameterType, PanoCompassPluginData } from './typings';

package/libs/PanoDoorLabelPlugin/BaseController.d.ts

@@ -0,0 +1,60 @@
+import { Five } from '@realsee/five';
+import { BaseOptions, Controller, EventMap, State } from 'src/base/BasePlugin';
+/**
+ * pano plugin controller 基类
+ * @author kyleju
+ */
+export declare abstract class BasePanoPluginController<T extends State, E extends EventMap<T>> extends Controller<T, E> {
+    state: T;
+    container: Element;
+    enabled: boolean;
+    constructor(five: Five);
+    /**
+     * 启用组件
+     * @param options
+     */
+    enable(options?: BaseOptions): void;
+    /**
+     * 禁用组件
+     * @param options
+     */
+    disable(options?: BaseOptions): void;
+    /**
+     * 显示 UI
+     * @param options
+     * @returns
+     */
+    show(options?: BaseOptions): Promise<void>;
+    /**
+     * 隐藏 UI
+     * @param options
+     * @returns
+     */
+    hide(options: BaseOptions): Promise<void>;
+    /**
+     * 销毁对象
+     */
+    dispose(): void;
+    /**
+     * 设置状态
+     * @param state @T 状态
+     * @param options @BaseOptions 可选配置
+     * @returns
+     */
+    setState(state: Partial<T>, options?: BaseOptions): void;
+    get visible(): boolean;
+    appendTo(container: Element): void;
+    private updateState;
+    /**
+     * 组件 渲染
+     */
+    abstract render(): any;
+    /**
+     * State 初始化
+     */
+    abstract initState(): T;
+    /**
+     * State 改变回调
+     */
+    abstract stateChangedCallback(prevState: T, options?: BaseOptions): any;
+}

package/libs/PanoDoorLabelPlugin/BaseController.js

@@ -0,0 +1,103 @@
+import { Five } from '@realsee/five';
+import { Controller } from 'src/base/BasePlugin';
+/**
+ * pano plugin controller 基类
+ * @author kyleju
+ */
+export class BasePanoPluginController extends Controller {
+    constructor(five) {
+        super(five);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "enabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.five = five;
+        this.five.once('dispose', this.dispose);
+        this.enabled = true;
+        this.state = this.initState();
+        console.log('base controller');
+    }
+    /**
+     * 启用组件
+     * @param options
+     */
+    enable(options) {
+        this.enabled = true;
+        this.updateState(Object.assign(Object.assign({}, options), { userAction: true }));
+    }
+    /**
+     * 禁用组件
+     * @param options
+     */
+    disable(options) {
+        this.enabled = false;
+        this.updateState(Object.assign(Object.assign({}, options), { userAction: true }));
+    }
+    /**
+     * 显示 UI
+     * @param options
+     * @returns
+     */
+    show(options) {
+        if (!this.state.enabled)
+            return;
+        this.setState(Object.assign(Object.assign({}, this.state), { visible: true }), options);
+        return Promise.resolve();
+    }
+    /**
+     * 隐藏 UI
+     * @param options
+     * @returns
+     */
+    hide(options) {
+        if (!this.state.enabled)
+            return;
+        this.setState(Object.assign(Object.assign({}, this.state), { visible: false }), options);
+        return Promise.resolve();
+    }
+    /**
+     * 销毁对象
+     */
+    dispose() {
+        this.container.remove();
+    }
+    /**
+     * 设置状态
+     * @param state @T 状态
+     * @param options @BaseOptions 可选配置
+     * @returns
+     */
+    setState(state, options) {
+        if (!this.enabled)
+            return;
+        const prevState = Object.assign({}, this.state);
+        this.state = Object.assign(Object.assign(Object.assign({}, this.state), state), options);
+        this.stateChangedCallback(prevState, options);
+    }
+    get visible() {
+        return this.five.state.mode === Five.Mode.Panorama;
+    }
+    appendTo(container) {
+        if (!this.enabled)
+            return;
+        this.container = container;
+        this.render();
+    }
+    updateState(options) {
+        this.setState(Object.assign(Object.assign({}, this.state), { enabled: this.enabled, visible: this.visible }), options);
+    }
+}

package/libs/PanoDoorLabelPlugin/Controller.d.ts

@@ -0,0 +1,36 @@
+import type { Five } from '@realsee/five';
+import type { BaseOptions, EventMap, State } from 'src/base/BasePlugin';
+import type { FloorplanServerData } from '../floorplan/typings/floorplanServerData';
+import { BasePanoPluginController } from './BaseController';
+/**
+ * 分间标签插件
+ * @author kyleju
+ */
+export declare class PanoDoorLabelPluginController extends BasePanoPluginController<State, EventMap<State>> {
+    private MinVisibledistance;
+    private MaxVisibledistance;
+    private OffsetHeight;
+    private rooms;
+    private floorplanServerData;
+    /** 标签项 */
+    private doorLabelItems;
+    /** 每个点位 visible 标签的缓存 */
+    private visibleLabelMap;
+    /** 标签项Prop值 */
+    private labelItems;
+    /** 数据 */
+    private doorLabels;
+    private roomObservers;
+    constructor(five: Five);
+    loadData: (floorplanServerData: FloorplanServerData) => void;
+    stateChangedCallback(prevState: State, options?: BaseOptions): void;
+    render(): void;
+    initState(): State;
+    dispose(): void;
+    private initRoomObservers;
+    private hideAllLabels;
+    private fixDoorVisibleAndPosition;
+    private fixDoorPosition;
+    private onClick;
+    private initData;
+}