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

package/dist/CruisePlugin/index.js

@@ -0,0 +1,1249 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var five = require('@realsee/five');
+var THREE = require('three');
+var getNormals = require('polyline-normals');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var getNormals__default = /*#__PURE__*/_interopDefaultLegacy(getNormals);
+
+/**
+ * plugin 的基本控制器
+ */
+class Controller$2 {
+    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$1 extends Controller$2 {
+}
+
+// 定义常量
+const TRIANGLE_NUMBER_OF_RECTANGLE = 2; // 每个矩形有两个三角形
+const VERTEX_NUMBER_OF_TRIANGLE = 3; // 每个三角形有三个顶点
+const AXIS_NUMBER_OF_VERTEX = 3; // 每个顶点有三个轴坐标
+const UV_NUMBER_OF_VERTEX = 2; // 每个顶点有两个 UV 轴坐标
+function getLineGeometry(positionList) {
+    if (positionList.length < 2)
+        return;
+    const lineWidth = 1;
+    const halfLineWidth = 1 / 2;
+    const aspect = 1;
+    // 点位向量数组
+    const keyPoints = positionList;
+    // 点位组成的平滑曲线
+    const curve = new THREE__namespace.CatmullRomCurve3(keyPoints, false, 'catmullrom', 0.5);
+    // 求顶点和 UV
+    const divisions = Math.ceil(curve.getLength()); // 曲线切片数
+    const curvePoints = curve.getPoints(divisions);
+    const curvePointsLength = curvePoints.length;
+    const normals = getNormals__default["default"](curvePoints.map((p) => [p.x, p.z])); // curvePoints：每个点切线的向量「二维」
+    const rectangleNumber = curvePoints.length - 1; // 曲线上 N 个点，构成了 N - 1 个矩形
+    const indexNumber = rectangleNumber * TRIANGLE_NUMBER_OF_RECTANGLE * VERTEX_NUMBER_OF_TRIANGLE;
+    const verticesNumber = 2 * curvePointsLength; // 顶点数量（包含公用）：每个曲线点对应两个顶点，N 个 点有 2N 个顶点
+    const positionNumber = verticesNumber * AXIS_NUMBER_OF_VERTEX; // 坐标点数量
+    const uvNumber = verticesNumber * UV_NUMBER_OF_VERTEX; // uv 数量
+    const index = new Uint32Array(indexNumber);
+    const positions = new Float32Array(positionNumber);
+    const uv = new Float32Array(uvNumber);
+    let totalLength = 0;
+    for (let i = 0; i < curvePoints.length; i++) {
+        const [nx, nz] = normals[i][0];
+        const curvePoint = curvePoints[i];
+        const { x: curvePointX, y: curvePointY, z: curvePointZ } = curvePoint;
+        // vertices[2i]
+        positions[i * 6 + 0] = curvePointX + nx * halfLineWidth;
+        positions[i * 6 + 1] = curvePointY + 0.05;
+        positions[i * 6 + 2] = curvePointZ + nz * halfLineWidth;
+        // vertices[2i + 1]
+        positions[i * 6 + 3] = curvePointX - nx * halfLineWidth;
+        positions[i * 6 + 4] = curvePointY + 0.05;
+        positions[i * 6 + 5] = curvePointZ - nz * halfLineWidth;
+        totalLength += i > 0 ? curvePoints[i - 1].clone().sub(curvePoints[i]).length() : 0;
+        const end = totalLength / lineWidth / aspect;
+        uv[i * 4 + 0] = 0;
+        uv[i * 4 + 1] = end;
+        uv[i * 4 + 2] = 1;
+        uv[i * 4 + 3] = end;
+        if (i === curvePoints.length - 1)
+            continue;
+        index[i * 6 + 0] = i * 2 + 0;
+        index[i * 6 + 1] = i * 2 + 2;
+        index[i * 6 + 2] = i * 2 + 1;
+        index[i * 6 + 3] = i * 2 + 2;
+        index[i * 6 + 4] = i * 2 + 3;
+        index[i * 6 + 5] = i * 2 + 1;
+    }
+    const geometry = new THREE__namespace.BufferGeometry();
+    geometry.setAttribute('position', new THREE__namespace.BufferAttribute(positions, 3));
+    geometry.setAttribute('uv', new THREE__namespace.BufferAttribute(uv, 2));
+    geometry.setIndex(new THREE__namespace.BufferAttribute(index, 1));
+    return geometry;
+}
+
+function getArrowMaterial(params) {
+    var _a;
+    const texture = new THREE__namespace.TextureLoader().load((_a = params === null || params === void 0 ? void 0 : params.textureUtl) !== null && _a !== void 0 ? _a : '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png');
+    texture.wrapS = texture.wrapT = THREE__namespace.RepeatWrapping;
+    texture.encoding = THREE__namespace.sRGBEncoding;
+    const arrowMaterial = new THREE__namespace.MeshBasicMaterial({
+        color: 0xffffff,
+        map: texture,
+        transparent: true,
+        opacity: 0.8,
+    });
+    return arrowMaterial;
+}
+
+/**
+ * 判断对象是否为`null`或`undefined`。
+ * @param
+ * @return
+ */
+/**
+ * 判断对象不为`null`或`undefined`。
+ */
+function notNil(value) {
+    return value !== null && value !== undefined;
+}
+
+/**
+ * 检查一个值是否是狭义上的对象
+ * @param {any} value 要检查的值
+ *
+ * isTruelyObject({})
+ * // => true
+ *
+ * isObjectLike([1, 2, 3])
+ * // => false
+ *
+ * isObjectLike(Function)
+ * // => false
+ *
+ * isObjectLike(null)
+ * // => false
+ *
+ */
+function isTruelyObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+/* eslint-disable @typescript-eslint/no-use-before-define */
+function baseIsEqual(value, other) {
+    if (value === other)
+        return true;
+    if (typeof value !== typeof other)
+        return false;
+    if (Number.isNaN(value) && Number.isNaN(other))
+        return true;
+    return false;
+}
+function objEqualShallow(value, other) {
+    const valueProps = Object.getOwnPropertyNames(value);
+    const otherProps = Object.getOwnPropertyNames(other);
+    if (valueProps.length !== otherProps.length)
+        return false;
+    for (let i = 0, len = valueProps.length; i < len; i++) {
+        const propName = valueProps[i];
+        if (!baseIsEqual(value[propName], other[propName]))
+            return false;
+    }
+    return true;
+}
+function arrayEqualShallow(value, other) {
+    if (value.length !== other.length)
+        return false;
+    for (let i = 0, len = value.length; i < len; i++) {
+        if (!baseIsEqual(value[i], other[i]))
+            return false;
+    }
+    return true;
+}
+function isShallowEqual(value, other) {
+    if (baseIsEqual(value, other))
+        return true;
+    if (isTruelyObject(value) && isTruelyObject(other))
+        return objEqualShallow(value, other);
+    if (Array.isArray(value) && Array.isArray(other))
+        return arrayEqualShallow(value, other);
+    return false;
+}
+function isDeepEqual(value, other) {
+    if (baseIsEqual(value, other))
+        return true;
+    if (isTruelyObject(value) && isTruelyObject(other))
+        return objEqualDeep(value, other);
+    if (Array.isArray(value) && Array.isArray(other))
+        return arrayEqualDeep(value, other);
+    return false;
+}
+function arrayEqualDeep(value, other) {
+    if (value.length !== other.length)
+        return false;
+    for (let i = 0, len = value.length; i < len; i++) {
+        if (!isDeepEqual(value[i], other[i]))
+            return false;
+    }
+    return true;
+}
+function objEqualDeep(value, other) {
+    const valueProps = Object.getOwnPropertyNames(value);
+    const otherProps = Object.getOwnPropertyNames(other);
+    if (valueProps.length !== otherProps.length)
+        return false;
+    for (let i = 0, len = valueProps.length; i < len; i++) {
+        const propName = valueProps[i];
+        if (!isDeepEqual(value[propName], other[propName]))
+            return false;
+    }
+    return true;
+}
+/**
+ * 对象比较
+ * @param {*} value 第一个比较的值
+ * @param {*} other 第二个比较的值
+ * @param {Object} options 可选参数，可选项包括：<br />
+ *    deep {Boolean} 是否深比较<br />
+ * @returns {boolean} 是否相等
+ */
+function equal(value, other, opt = { deep: false }) {
+    if (!opt.deep)
+        return isShallowEqual(value, other);
+    return isDeepEqual(value, other);
+}
+
+const VERSION$1 = 'v1.0.1';
+const PLUGIN_NAME$1 = 'GuideLinePlugin';
+const PLUGIN$1 = `${PLUGIN_NAME$1}@${VERSION$1}`;
+const pluginFlag = (name) => `${PLUGIN$1}--${name}`;
+class Controller extends Controller$1 {
+    constructor(five) {
+        super(five);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                visible: false,
+                enabled: true,
+                disposed: false,
+            }
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "linesGroup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "disposedErrorLog", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                console.error(`${PLUGIN$1} is disposed`);
+            }
+        });
+        Object.defineProperty(this, "actionWhenEnabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (func) => {
+                if (this.state.enabled)
+                    return func();
+            }
+        });
+        Object.assign(window, { [`__${PLUGIN_NAME$1}_DEBUG__`]: this });
+    }
+    async load(serverData, state, userAction = true) {
+        const prevData = this.data ? JSON.parse(JSON.stringify(this.data)) : undefined;
+        // format server data to plugin data
+        const data = await this.formatData(serverData);
+        this.hooks.emit('dataChange', data, prevData);
+        this.data = data;
+        // render line group
+        if (this.linesGroup)
+            this.five.scene.remove(this.linesGroup);
+        const linesGroup = this.getLinesGroup(data.routes);
+        if (!linesGroup)
+            return Promise.reject(new Error('no line'));
+        this.linesGroup = linesGroup;
+        this.five.scene.add(linesGroup);
+        this.handleVisible(this.state.visible);
+        this.handleEnable(this.state.enabled);
+        // initialize plugin state
+        if (state)
+            this.setState(state);
+        // load end
+        this.five.needsRender = true;
+        this.hooks.emit('dataLoaded', data);
+        console.log(`${PLUGIN$1} loaded`, data);
+    }
+    async formatData(serverData) {
+        if (typeof serverData === 'object' && serverData !== null && serverData.version && serverData.data) {
+            return serverData.data;
+        }
+        return serverData;
+    }
+    async show(options) {
+        this.setState({ visible: true }, options);
+    }
+    async hide(options) {
+        this.setState({ visible: false }, options);
+    }
+    enable(options) {
+        this.setState({ enabled: true }, options);
+    }
+    disable(options) {
+        this.setState({ enabled: false }, options);
+    }
+    dispose() {
+        this.setState({ disposed: true });
+    }
+    setState(state, options) {
+        var _a;
+        if (this.state.disposed)
+            return this.disposedErrorLog();
+        const prevState = Object.assign({}, this.state);
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (state.disposed !== undefined && state.disposed !== prevState.disposed) {
+            if (state.disposed)
+                this.handleDispose();
+        }
+        if (state.visible !== undefined && state.visible !== prevState.visible) {
+            this.handleVisible(state.visible, options === null || options === void 0 ? void 0 : options.userAction);
+        }
+        if (state.enabled !== undefined && state.enabled !== prevState.enabled) {
+            this.handleEnable(state.enabled, options === null || options === void 0 ? void 0 : options.userAction);
+        }
+        if (!equal(prevState, this.state, { deep: true })) {
+            this.hooks.emit('stateChange', { state: this.state, prevState, userAction: (_a = options === null || options === void 0 ? void 0 : options.userAction) !== null && _a !== void 0 ? _a : true });
+            this.five.needsRender = true;
+        }
+    }
+    handleEnable(enabled, userAction = true) {
+        if (this.linesGroup) {
+            if (enabled) {
+                this.five.scene.add(this.linesGroup);
+                this.actionWhenEnabled(() => this.hooks.emit('enable', { userAction }));
+            }
+            else {
+                this.five.scene.remove(this.linesGroup);
+                this.hooks.emit('disable', { userAction });
+            }
+        }
+    }
+    handleVisible(visible, userAction = true) {
+        if (this.linesGroup) {
+            if (visible) {
+                this.linesGroup.visible = true;
+                this.actionWhenEnabled(() => this.hooks.emit('show', { userAction }));
+            }
+            else {
+                this.linesGroup.visible = false;
+                this.actionWhenEnabled(() => this.hooks.emit('hide', { userAction }));
+            }
+        }
+    }
+    handleDispose() {
+        if (this.linesGroup)
+            this.five.scene.add(this.linesGroup);
+    }
+    /**
+     * 获取多条路线的 Mesh Group
+     */
+    getLinesGroup(routes) {
+        /** 'as THREE.Mesh[]' for build check */
+        const meshes = routes.map(this.getLineMesh.bind(this)).filter(notNil);
+        const group = new THREE__namespace.Group();
+        group.name = pluginFlag('route-group');
+        if (meshes.length === 0)
+            return;
+        group.add(...meshes);
+        return group;
+    }
+    /**
+     * 获取单条路线的 Mesh
+     */
+    getLineMesh(data) {
+        const positions = data.panoIndexList.map((panoIndex) => { var _a; return (_a = this.five.work.observers[panoIndex]) === null || _a === void 0 ? void 0 : _a.standingPosition; }).filter(notNil);
+        const geometry = getLineGeometry(positions);
+        if (!geometry)
+            return;
+        const material = getArrowMaterial({ textureUtl: data.arrowTextureUrl });
+        const mesh = new THREE__namespace.Mesh(geometry, material);
+        mesh.name = pluginFlag('route-line-mesh');
+        mesh.renderOrder = 3;
+        return mesh;
+    }
+}
+Object.defineProperty(Controller, "lasestVersion", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: VERSION$1
+});
+
+const GuideLinePlugin = (five) => new Controller(five);
+
+// uuid
+function S4() {
+    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+}
+/**
+ * 随机生成一个uuid值
+ */
+function uuid() {
+    // then to call it, plus stitch in '4' in the third group
+    return (S4() + S4() + '-' + S4() + '-4' + S4().substr(0, 3) + '-' + S4() + '-' + S4() + S4() + S4()).toLowerCase();
+}
+
+/** 坐标转换成单位向量 */
+function coordinatesToVector(coordinates) {
+    const distance = Math.abs(Math.cos(coordinates.latitude));
+    return new THREE__namespace.Vector3(
+    /* x */ -Math.sin(coordinates.longitude) * distance, 
+    /* y */ -Math.sin(coordinates.latitude), 
+    /* z */ -Math.cos(coordinates.longitude) * distance);
+}
+
+/**
+ * @description: 获取coordinates间的夹角
+ * @return {number} 夹角角度
+ */
+function coordinatesAngle(coordinates1, coordinates2) {
+    const vector1 = coordinatesToVector(coordinates1);
+    const vector2 = coordinatesToVector(coordinates2);
+    const angle = vector1.angleTo(vector2);
+    return angle;
+}
+
+const safeCall = async (fn) => {
+    try {
+        // eslint-disable-next-line prettier/prettier
+        fn().then(() => { }, () => { }).catch(() => { });
+    }
+    catch (e) { }
+};
+
+const TAU = Math.PI * 2;
+/**
+ * 将弧度转成 0 - 2PI 中的值
+ * @param rad - 任意弧度值
+ * @return 0 - 2PI 的数值
+ */
+function formatRad(rad) {
+    if (rad >= 0 && rad < TAU)
+        return rad;
+    return ((rad % TAU) + TAU) % TAU;
+}
+
+/** 单位向量转换成坐标 */
+function vectorToCoordinates(vector) {
+    return {
+        longitude: formatRad(-Math.atan2(vector.x, -vector.z)),
+        latitude: -Math.asin(vector.y / 1),
+    };
+}
+
+// eslint-disable-next-line max-params
+function linerValue(x0, v0, t1, t) {
+    const a = -x0 / t1;
+    const d = x0;
+    return a * t + d;
+}
+
+const VERSION = 'v1.0.5';
+const PLUGIN_NAME = 'CruisePlugin';
+const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
+const disposedErrorLog = () => {
+    console.error(`${PLUGIN} is disposed`);
+};
+const disableWarnLog = () => {
+    console.warn(`${PLUGIN} is disabled`);
+};
+const disableErrorLog = () => {
+    console.error(`${PLUGIN} is disabled`);
+};
+const pauseDataMap = new Map();
+class CruisePluginController extends Controller$1 {
+    constructor(five) {
+        super(five);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                visible: true,
+                enabled: true,
+                disposed: false,
+                playing: false,
+                speed: 1,
+                config: {
+                    speedConfig: {
+                        rotateSpeed: 0.001,
+                        rotateSpeedUnit: 'rad/ms',
+                        moveSpeed: 0.003,
+                        moveSpeedUnit: 'm/ms',
+                    },
+                },
+            }
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "privateState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                playing: false,
+                currentPlayQueue: [],
+                currentPlayKeyframe: null,
+                broke: false,
+                disposers: [],
+            }
+        });
+        Object.defineProperty(this, "GuideLine", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.assign(window, { [`__${PLUGIN_NAME}_DEBUG__`]: this });
+        const setFiveLinearUpdateCamera = this.setFiveLinearUpdateCamera.bind(this);
+        const setFiveOriginUpdateCamera = this.setFiveOriginUpdateCamera.bind(this);
+        this.hooks.on('play', setFiveLinearUpdateCamera);
+        this.hooks.on('broke', setFiveOriginUpdateCamera);
+        this.hooks.on('end', setFiveOriginUpdateCamera);
+        this.hooks.on('pause', setFiveOriginUpdateCamera);
+        this.privateState.disposers.push(() => {
+            this.hooks.off('play', setFiveLinearUpdateCamera);
+            this.hooks.off('broke', setFiveOriginUpdateCamera);
+            this.hooks.off('end', setFiveOriginUpdateCamera);
+            this.hooks.off('pause', setFiveOriginUpdateCamera);
+        });
+    }
+    /**
+     * @description Load Data and State
+     */
+    async load(serverData, state, userAction) {
+        var _a, _b, _c, _d, _e;
+        if (this.state.disposed)
+            return disposedErrorLog();
+        if (!this.privateState.fiveOriginGetProgress) {
+            if (!((_b = (_a = this.five.controller) === null || _a === void 0 ? void 0 : _a.cameraMotion) === null || _b === void 0 ? void 0 : _b.getProgress)) {
+                await this.waitFiveLoaded();
+                this.privateState.fiveOriginGetProgress = (_d = (_c = this.five.controller) === null || _c === void 0 ? void 0 : _c.cameraMotion) === null || _d === void 0 ? void 0 : _d.getProgress;
+            }
+        }
+        this.clear();
+        // copy this.data
+        const prevData = this.data ? JSON.parse(JSON.stringify(this.data)) : undefined;
+        // format server data to plugin data
+        const data = await this.formatData(serverData);
+        this.data = data;
+        this.hooks.emit('dataChange', data, prevData);
+        let guideLinePanoIndex = [];
+        let tempFloorIndex;
+        // filter panoIndex list Data
+        const hasPanoIndexKeyframes = this.data.keyframes.filter((keyframe) => keyframe.data.panoIndex !== undefined);
+        hasPanoIndexKeyframes
+            .filter((keyframe, index) => { var _a; return keyframe.data.panoIndex !== ((_a = hasPanoIndexKeyframes[index - 1]) === null || _a === void 0 ? void 0 : _a.data.panoIndex); })
+            .map((keyframe) => keyframe.data.panoIndex)
+            .forEach((panoIndex) => {
+            var _a, _b;
+            const floorIndex = (_a = this.five.work.observers[panoIndex]) === null || _a === void 0 ? void 0 : _a.floorIndex;
+            if (floorIndex === undefined)
+                return;
+            if (tempFloorIndex === floorIndex) {
+                const index = guideLinePanoIndex.length - 1;
+                guideLinePanoIndex[index] = [...((_b = guideLinePanoIndex[index]) !== null && _b !== void 0 ? _b : []), panoIndex];
+            }
+            else {
+                tempFloorIndex = floorIndex;
+                const index = guideLinePanoIndex.length;
+                guideLinePanoIndex[index] = [panoIndex];
+            }
+        });
+        // initialize GuideLinePlugin
+        if (!this.GuideLine)
+            this.GuideLine = GuideLinePlugin(this.five);
+        // load GuideLine
+        (_e = this.GuideLine) === null || _e === void 0 ? void 0 : _e.load({ routes: guideLinePanoIndex.map((route) => ({ panoIndexList: route })) });
+        // first pause
+        this.setState({ playing: false });
+        // set state
+        this.handleVisible(this.state.visible);
+        this.handleEnable(this.state.enabled);
+        this.changePlayState(this.state.playing);
+        this.changeSpeed(this.state.speed);
+        // initialize plugin state
+        if (state)
+            this.setState(state, { userAction });
+        // load end
+        console.log(`${PLUGIN} loaded`, data);
+        this.hooks.emit('dataLoaded', data);
+    }
+    /**
+     * @description Play | Continue play. if have been paused, continue play from the pause position; if playing, do nothing
+     */
+    play(options) {
+        this.setState({ playing: true }, options);
+    }
+    /**
+     * @description If playing, first pause, then play from keyframes index/id
+     * @param {number} options.index play from keyframes index
+     * @param {string} options.id play from keyframes id
+     */
+    playFrom(options) {
+        const { index, id, userAction } = options;
+        if (this.state.playing)
+            this.setState({ playing: false }, { userAction });
+        this.setState({ playing: true }, { userAction, playFromIndex: index, playFromId: id });
+    }
+    /**
+     * @description Play from first keyframe
+     */
+    playFromStart(options) {
+        return this.playFrom(Object.assign(Object.assign({}, options), { index: 0 }));
+    }
+    /**
+     * @description Pause
+     */
+    pause(options) {
+        this.setState({ playing: false }, options);
+    }
+    /**
+     * @description Show guide line
+     */
+    async show(options) {
+        this.setState({ visible: true }, options);
+    }
+    /**
+     * @description Hide guide line
+     */
+    async hide(options) {
+        this.setState({ visible: false }, options);
+    }
+    /**
+     * @description Enable
+     */
+    enable(options) {
+        this.setState({ enabled: true }, options);
+    }
+    /**
+     * @description Disable
+     */
+    disable(options) {
+        this.setState({ enabled: false }, options);
+    }
+    /**
+     * @description Dispose
+     */
+    dispose() {
+        this.setState({ disposed: true });
+    }
+    /**
+     * @description Set state
+     */
+    setState(state, options) {
+        var _a;
+        if (this.state.disposed)
+            return disposedErrorLog();
+        if (!this.state.enabled) {
+            // when plugin is disabled, only can change enabled or disposed to true
+            if (state.enabled !== true && state.disposed !== true)
+                return disableErrorLog();
+        }
+        const prevState = Object.assign({}, this.state);
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (state.disposed !== undefined && state.disposed !== prevState.disposed) {
+            if (state.disposed)
+                this.handleDispose();
+        }
+        if (state.visible !== undefined && state.visible !== prevState.visible) {
+            this.handleVisible(state.visible, options === null || options === void 0 ? void 0 : options.userAction);
+        }
+        if (state.enabled !== undefined && state.enabled !== prevState.enabled) {
+            this.handleEnable(state.enabled, options === null || options === void 0 ? void 0 : options.userAction);
+        }
+        if (state.playing !== undefined && state.playing !== prevState.playing) {
+            this.changePlayState(state.playing, options);
+        }
+        if (state.speed !== undefined && state.speed !== prevState.speed) {
+            this.changeSpeed(state.speed, options === null || options === void 0 ? void 0 : options.userAction);
+        }
+        if (!equal(prevState, this.state, { deep: true })) {
+            console.log('--emit stateChange--', this.state);
+            this.hooks.emit('stateChange', { state: this.state, prevState, userAction: (_a = options === null || options === void 0 ? void 0 : options.userAction) !== null && _a !== void 0 ? _a : true });
+        }
+    }
+    /**
+     * @description Format data
+     */
+    async formatData(serverData) {
+        if (!this.five.work)
+            await this.waitFiveLoaded();
+        const observers = this.five.work.observers;
+        const data = (() => {
+            const _serverData = serverData;
+            if (typeof _serverData === 'object' && _serverData !== null && _serverData.version && _serverData.data) {
+                return _serverData.data;
+            }
+            return _serverData;
+        })();
+        if (data.keyframes) {
+            return {
+                keyframesId: uuid(),
+                keyframes: data.keyframes.map((keyframe, index) => { var _a; return (Object.assign({ id: (_a = keyframe.uuid) !== null && _a !== void 0 ? _a : uuid(), index }, keyframe)); }),
+            };
+        }
+        else if (data.panoIndexList) {
+            let keyframes = [];
+            const moveEffect = data.moveEffect;
+            data.panoIndexList
+                .filter((panoIndex, index) => panoIndex !== data.panoIndexList[index - 1])
+                .forEach((panoIndex, index) => {
+                const lookatNextPanoIndex = (() => {
+                    var _a, _b, _c, _d;
+                    const nextPanoIndex = data.panoIndexList[index + 1];
+                    if (nextPanoIndex === undefined)
+                        return;
+                    const vectorFrom = (_a = observers[panoIndex]) === null || _a === void 0 ? void 0 : _a.position;
+                    const vectorTo = (_b = observers[nextPanoIndex]) === null || _b === void 0 ? void 0 : _b.position;
+                    if (!vectorTo || !vectorFrom)
+                        return;
+                    // if panoIndex and next panoIndex isn't in same floor, return
+                    if (((_c = observers[panoIndex]) === null || _c === void 0 ? void 0 : _c.floorIndex) !== ((_d = observers[nextPanoIndex]) === null || _d === void 0 ? void 0 : _d.floorIndex))
+                        return;
+                    const vector = new THREE__namespace.Vector3().subVectors(vectorTo, vectorFrom);
+                    return vectorToCoordinates(vector);
+                })();
+                if (data.moveType === undefined || data.moveType === 'justMove') {
+                    // move to panoIndex, latitude, longitude
+                    keyframes.push({ data: Object.assign({ effect: 'Move', panoIndex, moveEffect }, (lookatNextPanoIndex !== null && lookatNextPanoIndex !== void 0 ? lookatNextPanoIndex : {})) });
+                }
+                else if (data.moveType === 'moveAndRotate') {
+                    // move to panoIndex, then rotate to latitude and longitude
+                    keyframes.push({ data: { effect: 'Move', panoIndex, moveEffect } });
+                    if (lookatNextPanoIndex)
+                        keyframes.push({ data: Object.assign({ effect: 'Rotate', panoIndex }, lookatNextPanoIndex) });
+                }
+            });
+            return { keyframesId: uuid(), keyframes: keyframes.map((keyframe, index) => (Object.assign({ id: uuid(), index }, keyframe))) };
+        }
+        else {
+            throw new Error('format error: data no keyframes or no panoIndexList');
+        }
+    }
+    handleEnable(enabled, userAction = true) {
+        var _a, _b;
+        if (enabled) {
+            (_a = this.GuideLine) === null || _a === void 0 ? void 0 : _a.enable();
+            this.hooks.emit('enable', { userAction });
+        }
+        else {
+            (_b = this.GuideLine) === null || _b === void 0 ? void 0 : _b.disable();
+            this.changePlayState(false, { userAction });
+            this.hooks.emit('disable', { userAction });
+        }
+        this.state.enabled = enabled;
+    }
+    handleVisible(visible, userAction = true) {
+        var _a, _b;
+        if (visible) {
+            (_a = this.GuideLine) === null || _a === void 0 ? void 0 : _a.show();
+            this.actionIfStateIsEnabled(() => this.hooks.emit('show', { userAction }));
+        }
+        else {
+            (_b = this.GuideLine) === null || _b === void 0 ? void 0 : _b.hide();
+            this.actionIfStateIsEnabled(() => this.hooks.emit('hide', { userAction }));
+        }
+        this.state.visible = visible;
+    }
+    changePlayState(play, options) {
+        this.actionIfStateIsEnabled(() => { var _a; return this.hooks.emit('playStateChange', play ? 'playing' : 'pause', { userAction: (_a = options === null || options === void 0 ? void 0 : options.userAction) !== null && _a !== void 0 ? _a : true }); });
+        play ? this.handlePlay(options) : this.handlePause(options);
+        this.state.playing = play;
+    }
+    /**
+     * @description Play | Continue play. if have been paused, continue play from the pause position; if playing, do nothing
+     * @param {number} options.playFromIndex play from keyframes index
+     * @param {string} options.playFromId play from keyframes id
+     */
+    // eslint-disable-next-line complexity
+    async handlePlay(options) {
+        var _a;
+        const { data, state, privateState, hooks } = this;
+        // check whether keyframes can be played
+        if (privateState.playing)
+            return;
+        if (!(data === null || data === void 0 ? void 0 : data.keyframes) || (data === null || data === void 0 ? void 0 : data.keyframes.length) === 0)
+            return;
+        // set current play id
+        const currentPlayId = uuid();
+        // if handlePlay function is called again before play end, currentPlayId isn't equal to privateState.playId
+        privateState.playId = currentPlayId;
+        // set state
+        privateState.playing = true;
+        privateState.broke = false;
+        const keyframes = data.keyframes;
+        const pauseData = this.getPauseData();
+        if ((options === null || options === void 0 ? void 0 : options.notEmitEvent) !== true) {
+            hooks.emit('play', { userAction: (_a = options === null || options === void 0 ? void 0 : options.userAction) !== null && _a !== void 0 ? _a : true });
+        }
+        const getPlayFromIndex = async () => {
+            var _a, _b;
+            // play from index
+            if ((options === null || options === void 0 ? void 0 : options.playFromIndex) !== undefined)
+                return options.playFromIndex;
+            // play from id
+            else if ((options === null || options === void 0 ? void 0 : options.playFromId) !== undefined)
+                return (_a = this.data) === null || _a === void 0 ? void 0 : _a.keyframes.findIndex((keyframe) => keyframe.id === options.playFromId);
+            // play from pause position
+            else if (pauseData === null || pauseData === void 0 ? void 0 : pauseData.keyframeId) {
+                const pausedKeyframe = (_b = this.data) === null || _b === void 0 ? void 0 : _b.keyframes.find((keyframe) => keyframe.id === pauseData.keyframeId);
+                // restore paused state
+                if (pauseData === null || pauseData === void 0 ? void 0 : pauseData.fiveState)
+                    await this.move(pauseData.fiveState);
+                if (pausedKeyframe) {
+                    if (pausedKeyframe.data.effect === 'Move')
+                        return pausedKeyframe.index;
+                    else if (pausedKeyframe.data.effect === 'Rotate') {
+                        const duration = pauseData.duration !== undefined ? pauseData.duration * (1 - pauseData.playedProgress) : undefined;
+                        await this.playKeyframe(pausedKeyframe, duration);
+                        // playFromIndex += 1 cause played last part of paused keyframe
+                        return pausedKeyframe.index + 1;
+                    }
+                }
+            }
+        };
+        const playFromIndex = await getPlayFromIndex();
+        this.clearPauseData();
+        // play keyframes
+        for (const keyframe of keyframes) {
+            if (privateState.broke || !state.playing || !privateState.playing)
+                return;
+            if (currentPlayId !== privateState.playId)
+                return;
+            // jump to start keyframe
+            if (playFromIndex !== undefined && keyframe.index < playFromIndex)
+                continue;
+            // play single keyframe
+            try {
+                console.log('playIndexChange', keyframe.index);
+                hooks.emit('playIndexChange', keyframe.index, keyframe);
+                await this.playKeyframe(keyframe);
+            }
+            catch (error) {
+                return Promise.resolve('broke');
+                // if think play be interupted by five gesture is an error, return Promise.reject(error)
+                // return Promise.reject(error)
+            }
+        }
+        if (state.playing && currentPlayId === privateState.playId) {
+            this.setState({ playing: false }, { userAction: false });
+            console.log('--emit end--');
+            hooks.emit('end');
+            this.clearPauseData();
+        }
+    }
+    /**
+     * @description: Pause and record pause state
+     */
+    handlePause(options) {
+        var _a;
+        const { state, privateState, hooks } = this;
+        state.playing = false;
+        if (privateState.playing === false)
+            return;
+        privateState.playing = false;
+        this.setPauseData();
+        if (!privateState.broke)
+            this.forceInteruptUpdateCamera();
+        console.log('--emit pause--');
+        if ((options === null || options === void 0 ? void 0 : options.notEmitEvent) !== true) {
+            hooks.emit('pause', { userAction: (_a = options === null || options === void 0 ? void 0 : options.userAction) !== null && _a !== void 0 ? _a : true });
+        }
+    }
+    /**
+     * @description Play single keyframe
+     */
+    async playKeyframe(keyframe, duration) {
+        var _a;
+        const { privateState } = this;
+        if (((_a = this.privateState.currentPlayKeyframe) === null || _a === void 0 ? void 0 : _a.keyframe.id) !== keyframe.id)
+            this.privateState.currentPlayKeyframe = { keyframe };
+        privateState.currentPlayQueue.push(this.getPlayPromise(keyframe, duration));
+        return this.actionPromiseQueue();
+    }
+    /**
+     * @description: listen interupted by five gesture
+     */
+    addInterruptListener(callback) {
+        this.five.once('gesture', callback);
+        this.five.once('modeChange', callback);
+        return () => {
+            this.five.off('gesture', callback);
+            this.five.once('modeChange', callback);
+        };
+    }
+    /**
+     * @description: getPlayPromise
+     */
+    async getPlayPromise(keyframe, paramsDuration) {
+        const data = keyframe.data;
+        const duration = paramsDuration !== null && paramsDuration !== void 0 ? paramsDuration : (keyframe.start !== undefined && keyframe.end !== undefined ? keyframe.end - keyframe.start : undefined);
+        if (!data)
+            return;
+        return new Promise((resolve, reject) => {
+            let fulfilled = false;
+            this.addInterruptListener(() => {
+                if (fulfilled)
+                    return;
+                console.log('--emit broke--');
+                this.hooks.emit('broke');
+                this.privateState.broke = true;
+                this.setState({ playing: false });
+                fulfilled = true;
+                return reject(new Error('play is interupted'));
+            });
+            try {
+                if (fulfilled)
+                    return;
+                const res = () => {
+                    resolve();
+                    fulfilled = true;
+                };
+                switch (data.effect) {
+                    case 'Move':
+                        this.move(data, duration).then(res);
+                        break;
+                    case 'Rotate':
+                        this.rotate(data, duration).then(res);
+                        break;
+                    default:
+                        this.rotate(data, duration).then(res);
+                }
+            }
+            catch (e) { }
+        });
+    }
+    /**
+     * @description Action promise queue in sequence
+     */
+    async actionPromiseQueue() {
+        const { privateState } = this;
+        return new Promise((resolve, reject) => {
+            if (privateState.currentPlayQueue.length === 0) {
+                resolve();
+                return;
+            }
+            const promise = privateState.currentPlayQueue.shift();
+            if (!promise) {
+                resolve();
+                return;
+            }
+            promise.then(resolve, reject);
+        }).then(() => {
+            if (privateState.currentPlayQueue.length === 0)
+                return Promise.resolve();
+            return this.actionPromiseQueue();
+        });
+    }
+    /**
+     * @description Action move keyframe
+     */
+    async move(data, duration) {
+        console.log('--move--', data.panoIndex);
+        if (data.mode && data.mode !== this.five.currentMode) {
+            await this.changeMode(data);
+        }
+        else if (data.panoIndex !== this.five.panoIndex) {
+            await this.changePano(data, duration);
+        }
+        else {
+            return Promise.resolve();
+        }
+        // await updateCamera(data)
+    }
+    /**
+     * @description Action rotate keyframe
+     */
+    async rotate(data, duration) {
+        console.log('--rotate--', data);
+        if (data.mode && data.mode !== this.five.currentMode) {
+            await this.changeMode({ mode: data.mode, panoIndex: data.panoIndex });
+        }
+        else if (data.panoIndex && data.panoIndex !== this.five.panoIndex) {
+            return await this.changePano(data, duration);
+        }
+        await this.updateCamera(data, duration);
+    }
+    /**
+     * @description Update five camera
+     */
+    async updateCamera(data, paramsDuration = 800) {
+        const { five, privateState, state } = this;
+        let originDuration = paramsDuration;
+        const speed = (() => {
+            var _a, _b;
+            const speedConfig = (_a = state.config) === null || _a === void 0 ? void 0 : _a.speedConfig;
+            const speedValue = (_b = data.rotateSpeed) !== null && _b !== void 0 ? _b : speedConfig === null || speedConfig === void 0 ? void 0 : speedConfig.rotateSpeed;
+            if ((speedConfig === null || speedConfig === void 0 ? void 0 : speedConfig.rotateSpeedUnit) === undefined)
+                return speedValue;
+            if (speedValue !== undefined) {
+                return speedConfig.rotateSpeedUnit === 'rad/ms' ? speedValue : speedValue / 1000;
+            }
+        })();
+        if (speed) {
+            const coordinates1 = this.five.getCurrentState();
+            const coordinates2 = data;
+            const angle = coordinatesAngle(coordinates1, coordinates2);
+            originDuration = angle / speed;
+        }
+        if (privateState.currentPlayKeyframe)
+            privateState.currentPlayKeyframe.originDuration = originDuration;
+        const duration = this.getSpeededDuration(originDuration);
+        return new Promise((resolve) => {
+            safeCall(() => five.updateCamera(data, duration));
+            setTimeout(() => resolve(), duration);
+        });
+    }
+    /**
+     * @description: Change five pano
+     */
+    async changePano(data, paramsDuration = 800) {
+        const { five, privateState, state } = this;
+        if (typeof data.panoIndex !== 'number')
+            return;
+        if (data.panoIndex === five.panoIndex)
+            return;
+        let originDuration = paramsDuration;
+        const speed = (() => {
+            var _a, _b;
+            const speedConfig = (_a = state.config) === null || _a === void 0 ? void 0 : _a.speedConfig;
+            const speedValue = (_b = data.moveSpeed) !== null && _b !== void 0 ? _b : speedConfig === null || speedConfig === void 0 ? void 0 : speedConfig.moveSpeed;
+            if ((speedConfig === null || speedConfig === void 0 ? void 0 : speedConfig.moveSpeedUnit) === undefined)
+                return speedValue;
+            if (speedValue !== undefined) {
+                return speedConfig.moveSpeedUnit === 'm/ms' ? speedValue : speedValue / 1000;
+            }
+        })();
+        if (speed && typeof five.panoIndex === 'number' && typeof data.panoIndex === 'number') {
+            const postion1 = five.work.observers[five.panoIndex].position;
+            const postion2 = five.work.observers[data.panoIndex].position;
+            const distance = postion1.distanceTo(postion2);
+            originDuration = distance / speed;
+        }
+        if (privateState.currentPlayKeyframe)
+            privateState.currentPlayKeyframe.originDuration = originDuration;
+        const duration = this.getSpeededDuration(originDuration);
+        return new Promise((resolve) => {
+            var _a, _b;
+            five.moveToPano(data.panoIndex, {
+                latitude: data.latitude,
+                longitude: data.longitude,
+                fov: data.fov,
+                duration,
+                effect: (_b = (_a = this.state.config) === null || _a === void 0 ? void 0 : _a.moveEffect) !== null && _b !== void 0 ? _b : data.moveEffect,
+                moveCancelCallback: () => resolve(),
+                moveEndCallback: () => resolve(),
+            });
+        });
+    }
+    /**
+     * @description: Change play speed
+     */
+    changeSpeed(speed, userAction = true) {
+        const { state, privateState, hooks } = this;
+        const { currentPlayKeyframe } = privateState;
+        hooks.emit('speedChange', speed, { userAction });
+        if (state.playing && currentPlayKeyframe) {
+            try {
+                const duration = currentPlayKeyframe.originDuration !== undefined ? currentPlayKeyframe.originDuration * (1 - this.getProgress()) : undefined;
+                console.log('--speedChange--', speed, { duration });
+                const promise = this.playKeyframe(currentPlayKeyframe.keyframe, duration);
+                privateState.currentPlayQueue.push(promise);
+            }
+            catch (e) { }
+        }
+    }
+    /**
+     * @description Get duration by speed
+     */
+    getSpeededDuration(duration) {
+        return duration / this.state.speed;
+    }
+    /**
+     * @description Get ratate progress
+     */
+    getProgress() {
+        return this.five.controller.cameraMotion.progress;
+    }
+    /**
+     * @description Change five mode
+     */
+    async changeMode(data, duration) {
+        if (data.mode && data.mode !== this.five.currentMode) {
+            await this.five.changeMode(data.mode, data, duration);
+        }
+    }
+    /**
+     * @description Force interupt five updateCamera
+     */
+    forceInteruptUpdateCamera() {
+        this.five.updateCamera({}, 0);
+    }
+    getPauseData() {
+        var _a, _b;
+        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.keyframesId)
+            return pauseDataMap.get((_b = this.data) === null || _b === void 0 ? void 0 : _b.keyframesId);
+    }
+    /**
+     * @description Set pause data
+     */
+    setPauseData() {
+        var _a, _b, _c, _d;
+        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.keyframesId)
+            return pauseDataMap.set((_b = this.data) === null || _b === void 0 ? void 0 : _b.keyframesId, {
+                keyframeId: (_c = this.privateState.currentPlayKeyframe) === null || _c === void 0 ? void 0 : _c.keyframe.id,
+                fiveState: this.five.getCurrentState(),
+                duration: (_d = this.privateState.currentPlayKeyframe) === null || _d === void 0 ? void 0 : _d.originDuration,
+                playedProgress: this.getProgress(),
+            });
+    }
+    /**
+     * @description Clear pause data
+     */
+    clearPauseData() {
+        var _a, _b;
+        if ((_a = this.data) === null || _a === void 0 ? void 0 : _a.keyframesId)
+            return pauseDataMap.delete((_b = this.data) === null || _b === void 0 ? void 0 : _b.keyframesId);
+    }
+    /**
+     * @description: Restore state that before loaded
+     */
+    clear() {
+        this.clearPauseData();
+        this.privateState.currentPlayKeyframe = null;
+    }
+    // TODO
+    handleDispose() {
+        var _a, _b;
+        this.setState({ playing: false });
+        this.clearPauseData();
+        this.clear();
+        (_a = this.GuideLine) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.GuideLine = undefined;
+        (_b = this.privateState.disposers) === null || _b === void 0 ? void 0 : _b.forEach((d) => d === null || d === void 0 ? void 0 : d());
+    }
+    /**
+     * @description Action function if plugin is enable
+     */
+    actionIfStateIsEnabled(func, options) {
+        if (this.state.enabled)
+            return func();
+        else {
+            if (options === null || options === void 0 ? void 0 : options.warnLog)
+                disableWarnLog();
+        }
+    }
+    /**
+     * @description: Wait for five work ready
+     */
+    async waitFiveLoaded() {
+        return new Promise((resolve) => {
+            if (this.five.work) {
+                resolve();
+                return;
+            }
+            this.five.once('loaded', () => {
+                resolve();
+            });
+        });
+    }
+    setFiveLinearUpdateCamera() {
+        if (!this.privateState.fiveOriginGetProgress)
+            return;
+        this.five.controller.cameraMotion.getProgress = (time) => {
+            const cameraMotion = this.five.controller.cameraMotion;
+            const deltaTime = time - cameraMotion.startTime;
+            if (deltaTime < 0)
+                return 0;
+            if (deltaTime >= cameraMotion.duration)
+                return 1;
+            return 1 - linerValue(1, cameraMotion.startVelocity, cameraMotion.duration, deltaTime);
+        };
+    }
+    setFiveOriginUpdateCamera() {
+        if (!this.privateState.fiveOriginGetProgress)
+            return;
+        this.five.controller.cameraMotion.getProgress = this.privateState.fiveOriginGetProgress;
+    }
+}
+Object.defineProperty(CruisePluginController, "PluginVersion", {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    value: VERSION
+});
+
+const CruisePlugin = (five) => new CruisePluginController(five);
+
+exports.CruisePlugin = CruisePlugin;
+exports.CruisePluginController = CruisePluginController;
+exports["default"] = CruisePlugin;