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

package/dist/PanoCompassPlugin/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
+var five = require('@realsee/five');
 var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
 var TWEEN = require('@tweenjs/tween.js');
 
@@ -29,6 +30,64 @@ function _interopNamespace(e) {
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var TWEEN__default = /*#__PURE__*/_interopDefaultLegacy(TWEEN);
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+/**
+ * plugin 的基本控制器
+ */
+class Controller$1 {
+    constructor(five$1) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * 插件事件钩子
+         */
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new five.Subscribe()
+        });
+        this.five = five$1;
+    }
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState() {
+        return this.state;
+    }
+}
+
+class Controller extends Controller$1 {
+}
+
 const roomInfoIcon = 'data:image/png;base64,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';
 
 function getRoomInfoInstance() {
@@ -80,12 +139,14 @@ function getRoomInfoInstance() {
 }
 
 const textureLoader = new THREE__namespace.TextureLoader();
-async function loadTexture(url) {
-    return new Promise((resolve, reject) => {
-        textureLoader.load(url, resolve, undefined, reject);
-    }).then((texture) => {
-        texture.encoding = THREE__namespace.sRGBEncoding;
-        return texture;
+function loadTexture(url) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            textureLoader.load(url, resolve, undefined, reject);
+        }).then((texture) => {
+            texture.encoding = THREE__namespace.sRGBEncoding;
+            return texture;
+        });
     });
 }
 
@@ -382,16 +443,28 @@ function tweenProgress(duration, easing = TWEEN__default["default"].Easing.Linea
     return tween;
 }
 
-const PanoCompassPlugin = function (five, config) {
-    return new PanoCompassController(five, config);
-};
-class PanoCompassController {
-    constructor(five, config) {
-        Object.defineProperty(this, "five", {
+const defaultBaseOptions = { userAction: true };
+class PanoCompassController extends Controller {
+    constructor(five$1, config) {
+        super(five$1);
+        /**
+         * 默认状态
+         */
+        Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: {
+                visible: true,
+                enabled: true,
+                config: {
+                    /**
+                     * @todo 图片转base64
+                     */
+                    compassImageUrl: '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png',
+                    entryDoorImageUrl: '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png',
+                },
+            }
         });
         Object.defineProperty(this, "data", {
             enumerable: true,
@@ -399,24 +472,12 @@ class PanoCompassController {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "config", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "group", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: new THREE__namespace.Group()
         });
-        Object.defineProperty(this, "modelLoaded", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
         Object.defineProperty(this, "roomInfoInstance", {
             enumerable: true,
             configurable: true,
@@ -447,6 +508,10 @@ class PanoCompassController {
             writable: true,
             value: void 0
         });
+        /**
+         * 销毁插件
+         * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.compassMesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
+         */
         Object.defineProperty(this, "dispose", {
             enumerable: true,
             configurable: true,
@@ -457,18 +522,112 @@ class PanoCompassController {
                 this.group.remove(...this.group.children);
                 (_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
                 (_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
+                this.five.off('dispose', this.dispose);
                 this.five.off('panoArrived', this.onFivePanoArrived);
                 this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+            }
+        });
+        /**
+         * 添加事件监听
+         */
+        Object.defineProperty(this, "_addEventListener", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.five.on('panoArrived', this.onFivePanoArrived);
+                this.five.on('panoWillArrive', this.onFivePanoWillArrive);
+                this.five.on('modeChange', this.onFiveModeChange);
+                this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
             }
         });
-        Object.defineProperty(this, "onFiveFistPanoLoaded", {
+        /**
+         * 移除事件监听
+         */
+        Object.defineProperty(this, "_removeEventListener", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: () => {
-                this.modelLoaded = true;
-                if (this.data)
-                    this.init();
+                this.five.off('panoArrived', this.onFivePanoArrived);
+                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+                this.five.off('modeChange', this.onFiveModeChange);
+                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+            }
+        });
+        /**
+         * 启用，响应事件，展示UI
+         */
+        Object.defineProperty(this, "_enable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.five.scene.add(this.group);
+                this.init();
+                this.onFivePanoArrived(this.five.panoIndex || 0);
+                this._addEventListener();
+            }
+        });
+        /**
+         * 禁用，不响应事件，不展示UI
+         */
+        Object.defineProperty(this, "_disable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this._clearCompassIfNeed();
+                this._clearEntryDoorIfNeed();
+                this.five.scene.remove(this.group);
+                this._removeEventListener();
+            }
+        });
+        /**
+         * 展示UI
+         */
+        Object.defineProperty(this, "_toggleVisible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.group.visible = this.state.visible;
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "_clearCompassIfNeed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                if (this.compassMesh) {
+                    this.group.remove(this.compassMesh);
+                    (_a = this.compassMesh.material.map) === null || _a === void 0 ? void 0 : _a.dispose();
+                    this.compassMesh = null;
+                }
+            }
+        });
+        Object.defineProperty(this, "_clearEntryDoorIfNeed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                if (this.entryDoorMesh) {
+                    this.group.remove(this.entryDoorMesh);
+                    (_a = this.entryDoorMesh.material.map) === null || _a === void 0 ? void 0 : _a.dispose();
+                    this.entryDoorMesh = null;
+                }
+                if (this.roomInfoInstance) {
+                    this.roomInfoInstance.dispose();
+                    this.roomInfoInstance = null;
+                }
+                if (this.roomInfoWrapperInstance) {
+                    this.roomInfoWrapperInstance.dispose();
+                    this.roomInfoWrapperInstance = null;
+                }
             }
         });
         Object.defineProperty(this, "onFivePanoWillArrive", {
@@ -488,22 +647,22 @@ class PanoCompassController {
             configurable: true,
             writable: true,
             value: (panoIndex) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f, _g;
                 // ======== fix compass position ========
-                const standingPosition = this.five.work.observers[panoIndex].standingPosition;
+                const standingPosition = (_c = (_b = (_a = this.five.work) === null || _a === void 0 ? void 0 : _a.observers) === null || _b === void 0 ? void 0 : _b[panoIndex]) === null || _c === void 0 ? void 0 : _c.standingPosition;
                 if (this.compassMesh) {
                     // 指南针上移 0.01m，防止与地板重合
                     this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
-                    if (this.compassMesh.material.opacity !== 0)
-                        return;
-                    (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
-                    this.compassMeshTween = tweenProgress(1000)
-                        .onUpdate(({ progress }) => {
-                        var _a;
-                        (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
-                        this.five.needsRender = true;
-                    })
-                        .play();
+                    if (this.compassMesh.material.opacity === 0) {
+                        (_d = this.compassMeshTween) === null || _d === void 0 ? void 0 : _d.dispose();
+                        this.compassMeshTween = tweenProgress(1000)
+                            .onUpdate(({ progress }) => {
+                            var _a;
+                            (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
+                            this.five.needsRender = true;
+                        })
+                            .play();
+                    }
                 }
                 // ======== fix entry door label position and rotation ========
                 if (this.entryDoorMesh) {
@@ -520,9 +679,9 @@ class PanoCompassController {
                     this.entryDoorMesh.rotation.z = new THREE__namespace.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
                     this.entryDoorMesh.position.copy(compassEntryDoorPosition);
                     // 不是客厅时，隐藏入户门指引
-                    ((_b = this.data) === null || _b === void 0 ? void 0 : _b.room_observers[panoIndex].room.type) === 1
-                        ? (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.setValues({ opacity: 1 })
-                        : (_d = this.entryDoorMesh) === null || _d === void 0 ? void 0 : _d.material.setValues({ opacity: 0 });
+                    ((_e = this.data) === null || _e === void 0 ? void 0 : _e.room_observers[panoIndex].room.type) === 1
+                        ? (_f = this.entryDoorMesh) === null || _f === void 0 ? void 0 : _f.material.setValues({ opacity: 1 })
+                        : (_g = this.entryDoorMesh) === null || _g === void 0 ? void 0 : _g.material.setValues({ opacity: 0 });
                 }
                 // ======== fix room info ========
                 if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
@@ -546,73 +705,193 @@ class PanoCompassController {
                     : (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
             }
         });
-        this.five = five;
-        this.config = config;
+        // eslint-disable-next-line max-params
+        Object.defineProperty(this, "onFiveModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode, prevMode, panoIndex, toPose, userAction) => {
+                if (mode === prevMode)
+                    return;
+                this.setState({
+                    visible: mode === five.Five.Mode.Panorama,
+                }, { userAction });
+            }
+        });
         this.five.scene.add(this.group);
-        five.once('dispose', this.dispose);
-        five.once('modelLoaded', this.onFiveFistPanoLoaded);
-        this.five.on('panoArrived', this.onFivePanoArrived);
-        this.five.on('panoWillArrive', this.onFivePanoWillArrive);
-        this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+        this.five.once('dispose', this.dispose);
+        this.setState({
+            visible: true,
+            enabled: true,
+            config: Object.assign(Object.assign({}, this.state.config), (config || {})),
+        });
     }
-    load(data) {
-        this.data = data;
-        if (this.modelLoaded)
-            this.init();
+    /**
+     * 启用插件，响应用户操作并展示UI
+     * @param options
+     */
+    enable(options = defaultBaseOptions) {
+        this.setState({
+            enabled: true,
+        }, options);
     }
-    async init() {
-        if (!this.data || !this.modelLoaded)
+    /**
+     * 禁用插件，禁止响应用户操作并隐藏UI
+     * @param options
+     */
+    disable(options = defaultBaseOptions) {
+        this.setState({
+            enabled: false,
+        }, options);
+    }
+    /**
+     * 展示UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    show(options = defaultBaseOptions) {
+        if (!this.state.enabled)
             return;
-        const northRad = this.data.north_rad;
-        if (northRad != null) {
-            this.compassMesh = await this.loadCompassMesh();
-            this.compassMesh.rotateX(-Math.PI / 2);
-            this.compassMesh.rotateZ(northRad - Math.PI / 2);
-            this.group.add(this.compassMesh);
+        this.setState({
+            visible: true,
+        }, options);
+        return Promise.resolve();
+    }
+    /**
+     * 隐藏UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    hide(options = defaultBaseOptions) {
+        if (!this.state.enabled)
+            return;
+        this.setState({
+            visible: false,
+        }, options);
+        return Promise.resolve();
+    }
+    setState(state, options = { userAction: true }) {
+        var _a, _b;
+        const prevState = JSON.parse(JSON.stringify(this.state));
+        this.state = {
+            visible: (_a = state.visible) !== null && _a !== void 0 ? _a : prevState.visible,
+            enabled: (_b = state.enabled) !== null && _b !== void 0 ? _b : prevState.enabled,
+            config: Object.assign(Object.assign({}, prevState.config), (state.config || {})),
+        };
+        this.hooks.emit('stateChange', {
+            state: this.state,
+            prevState,
+            userAction: options.userAction,
+        });
+        if (state.enabled === true) {
+            this._enable();
+            this.hooks.emit('enable', options);
+        }
+        if (state.enabled === false) {
+            this._disable();
+            this.hooks.emit('disable', options);
+        }
+        if (state.visible === false) {
+            this._toggleVisible();
+            this.hooks.emit('hide', options);
+        }
+        if (state.visible === true) {
+            this._toggleVisible();
+            this.hooks.emit('show', options);
+        }
+        /**
+         * @todo config变化不应该重新初始化，需要做精准的替换
+         */
+        if (state.config) {
+            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);
+            }
+        });
+    }
+    formatData(serverData) {
+        if (serverData.version && serverData.data) {
+            return Promise.resolve(serverData.data);
         }
-        if (this.data.entrance != null) {
-            this.entryDoorMesh = await this.loadEntryDoorMesh();
-            this.roomInfoWrapperInstance = this.loadRoomInfo();
-            this.roomInfoInstance = getRoomInfoInstance();
-            this.entryDoorMesh.rotateX(-Math.PI / 2);
-            if (this.roomInfoWrapperInstance)
-                this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
-            this.group.add(this.entryDoorMesh);
+        else {
+            return Promise.resolve(serverData);
         }
-        this.onFivePanoArrived(this.five.panoIndex || 0);
-        this.five.needsRender = true;
     }
-    async loadCompassMesh() {
-        var _a;
-        const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
-            '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
-        const compassTexture = await loadTexture(compassImageUrl);
-        const compassGeometry = new THREE__namespace.CircleGeometry(0.7, 32);
-        const compassMaterial = new THREE__namespace.MeshBasicMaterial({
-            map: compassTexture,
-            transparent: true,
-            opacity: 0,
-            depthTest: false,
-        });
-        const compassMesh = new THREE__namespace.Mesh(compassGeometry, compassMaterial);
-        compassMesh.name = 'pano-compass-mesh';
-        return compassMesh;
+    /**
+     * 初始化
+     * @todo 逻辑需要细分
+     */
+    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);
+            }
+            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__namespace.CircleGeometry(0.7, 32);
+            const compassMaterial = new THREE__namespace.MeshBasicMaterial({
+                map: compassTexture,
+                transparent: true,
+                opacity: 0,
+                depthTest: false,
+            });
+            const compassMesh = new THREE__namespace.Mesh(compassGeometry, compassMaterial);
+            compassMesh.name = 'pano-compass-mesh';
+            return compassMesh;
+        });
     }
-    async loadEntryDoorMesh() {
-        var _a;
-        const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
-            '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
-        const entryDoorTexture = await loadTexture(entryDoorImageUrl);
-        const entryDoorGeometry = new THREE__namespace.PlaneGeometry(0.2, 0.16);
-        const entryDoorMaterial = new THREE__namespace.MeshBasicMaterial({
-            map: entryDoorTexture,
-            transparent: true,
-            opacity: 0.8,
-            depthTest: false,
-        });
-        const entryDoorMesh = new THREE__namespace.Mesh(entryDoorGeometry, entryDoorMaterial);
-        entryDoorMesh.name = 'pano-compass-entry-door';
-        return entryDoorMesh;
+    loadEntryDoorMesh() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const entryDoorImageUrl = this.state.config.entryDoorImageUrl;
+            const entryDoorTexture = yield loadTexture(entryDoorImageUrl);
+            const entryDoorGeometry = new THREE__namespace.PlaneGeometry(0.2, 0.16);
+            const entryDoorMaterial = new THREE__namespace.MeshBasicMaterial({
+                map: entryDoorTexture,
+                transparent: true,
+                opacity: 0.8,
+                depthTest: false,
+            });
+            const entryDoorMesh = new THREE__namespace.Mesh(entryDoorGeometry, entryDoorMaterial);
+            entryDoorMesh.name = 'pano-compass-entry-door';
+            return entryDoorMesh;
+        });
     }
     loadRoomInfo() {
         const points = [
@@ -626,11 +905,7 @@ class PanoCompassController {
     }
 }
 
-const panoCompassPluginServerParams = {
-    name: 'PanoCompassPlugin',
-    version: 0,
-};
+const PanoCompassPlugin = (five, config) => new PanoCompassController(five, config);
 
 exports.PanoCompassPlugin = PanoCompassPlugin;
 exports["default"] = PanoCompassPlugin;
-exports.panoCompassPluginServerParams = panoCompassPluginServerParams;

package/dist/PanoCompassPlugin/shared-utils/Preloader.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 预载器
+ */
+export declare const Preloader: {
+    blob: (url: string) => Promise<string>;
+};

package/dist/PanoCompassPlugin/shared-utils/Subscribe.d.ts

@@ -0,0 +1,45 @@
+declare const __EVENT__ = "__events__";
+/**
+ * 订阅类。
+ * 观察者模式（供前端使用），Node端推荐<a href="https://nodejs.org/api/events.html#events_class_eventemitter">EventEmitter</a>。
+ */
+export default class Subscribe {
+    private [__EVENT__];
+    constructor();
+    /**
+     * 判断是否注册时事件
+     * @param  {string|[string]}  name     事件类型
+     */
+    hasListener(name: string): any;
+    /**
+     * 注册事件
+     * @param  {string|[string]}  names    事件类型
+     * @param  {function}         callback 事件回调函数
+     * @param  {any}              context  事件回调函数调用的上下文
+     * @param  {boolean}          once     是否只执行一次
+     */
+    on(names: string | string[], callback: (...args: any[]) => void, context?: any, once?: boolean): () => this;
+    /**
+     * 注册事件(是否只执行一次)
+     * @param  {string|[string]}  names    事件类型
+     * @param  {function}         callback 事件回调函数
+     * @param  {any}              context  事件回调函数调用的上下文
+     */
+    once(names: string | string[], callback: (...args: any[]) => void, context?: any): () => this;
+    /**
+     * 解除事件
+     * @param  {string|[string]}  names    事件类型
+     * @param  {function}         callback 事件回调函数
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     */
+    off(names?: string | string[], callback?: (...args: any[]) => void): this;
+    /**
+     * 触发事件
+     * @param  {string|[string]}    name      事件类型
+     * @param  {...any}             data      触发事件的数据
+     */
+    emit(name: string, ...data: any[]): boolean;
+}
+export {};

package/dist/PanoCompassPlugin/shared-utils/animationFrame/BetterTween.d.ts

@@ -0,0 +1,11 @@
+import TWEEN from '@tweenjs/tween.js';
+export declare class BetterTween<G> extends TWEEN.Tween<G> {
+    private disposeMethods;
+    private animationFrameDisposer?;
+    onDispose: (callback: () => void) => this;
+    play: () => this;
+    dispose: () => void;
+}
+export declare function tweenProgress(duration?: number, easing?: (amount: number) => number): BetterTween<{
+    progress: number;
+}>;