@realsee/dnalogel 2.0.0-alpha.53 → 2.0.0-alpha.54

package/libs/CruisePlugin/Controller.js

@@ -7,7 +7,8 @@ import equal from '../shared-utils/equal';
 import { vectorToCoordinates } from './utils/vectorToCoordinates';
 import * as THREE from 'three';
 import linerValue from './utils/linerValue';
-const VERSION = 'v1.0.5';
+import { sleep } from './utils/sleep';
+const VERSION = 'v1.0.6';
 const PLUGIN_NAME = 'CruisePlugin';
 const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
 export const pluginFlag = (name) => `${PLUGIN}--${name}`;
@@ -38,7 +39,7 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
                     speedConfig: {
                         rotateSpeed: 0.001,
                         rotateSpeedUnit: 'rad/ms',
-                        moveSpeed: 0.003,
+                        moveSpeed: 0.002,
                         moveSpeedUnit: 'm/ms',
                     },
                 },
@@ -254,12 +255,24 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
         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)); }),
+                keyframes: data.keyframes.map((keyframe, index) => {
+                    var _a;
+                    const nextKeyframe = data.keyframes[index + 1];
+                    const stay = (() => {
+                        if (!nextKeyframe)
+                            return 0;
+                        if (nextKeyframe.start === undefined || keyframe.end === undefined)
+                            return 0;
+                        return nextKeyframe.start - keyframe.end;
+                    })();
+                    return Object.assign({ id: (_a = keyframe.uuid) !== null && _a !== void 0 ? _a : uuid(), moveIndex: index, stay, index }, keyframe);
+                }),
             };
         }
         else if (data.panoIndexList) {
             let keyframes = [];
-            const moveEffect = data.moveEffect;
+            const { moveEffect, moveToFirstPanoEffect } = data;
+            this.privateState.moveToFirstPanoEffect = moveToFirstPanoEffect;
             data.panoIndexList
                 .filter((panoIndex, index) => panoIndex !== data.panoIndexList[index - 1])
                 .forEach((panoIndex, index) => {
@@ -280,13 +293,17 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
                 })();
                 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 : {})) });
+                    keyframes.push({
+                        moveIndex: index,
+                        stay: data.stay,
+                        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 } });
+                    keyframes.push({ moveIndex: index, stay: data.stay, data: { effect: 'Move', panoIndex, moveEffect } });
                     if (lookatNextPanoIndex)
-                        keyframes.push({ data: Object.assign({ effect: 'Rotate', panoIndex }, lookatNextPanoIndex) });
+                        keyframes.push({ moveIndex: index, stay: data.stay, data: Object.assign({ effect: 'Rotate', panoIndex }, lookatNextPanoIndex) });
                 }
             });
             return { keyframesId: uuid(), keyframes: keyframes.map((keyframe, index) => (Object.assign({ id: uuid(), index }, keyframe))) };
@@ -351,6 +368,7 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
         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 });
         }
+        let playedFirstKeyframe = false;
         const getPlayFromIndex = async () => {
             var _a, _b;
             // play from index
@@ -364,13 +382,14 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
                 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);
+                    await this.move(pauseData.fiveState, { moveEffect: privateState.moveToFirstPanoEffect });
                 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);
+                        await this.playKeyframe(pausedKeyframe, { duration });
+                        playedFirstKeyframe = true;
                         // playFromIndex += 1 cause played last part of paused keyframe
                         return pausedKeyframe.index + 1;
                     }
@@ -392,11 +411,19 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
             try {
                 console.log('playIndexChange', keyframe.index);
                 hooks.emit('playIndexChange', keyframe.index, keyframe);
-                await this.playKeyframe(keyframe);
+                console.log({ playFromIndex });
+                await this.playKeyframe(keyframe, {
+                    moveEffect: playedFirstKeyframe === false ? privateState.moveToFirstPanoEffect : undefined,
+                    duration: 800,
+                });
+                if (keyframe.stay)
+                    await sleep(keyframe.stay);
+                if (playedFirstKeyframe === false)
+                    playedFirstKeyframe = true;
             }
             catch (error) {
                 return Promise.resolve('broke');
-                // if think play be interupted by five gesture is an error, return Promise.reject(error)
+                // if think the play be interupted by five gesture is an error, return Promise.reject(error)
                 // return Promise.reject(error)
             }
         }
@@ -428,12 +455,12 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
     /**
      * @description Play single keyframe
      */
-    async playKeyframe(keyframe, duration) {
+    async playKeyframe(keyframe, params) {
         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));
+        privateState.currentPlayQueue.push(this.getPlayPromise(keyframe, params));
         return this.actionPromiseQueue();
     }
     /**
@@ -450,9 +477,10 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
     /**
      * @description: getPlayPromise
      */
-    async getPlayPromise(keyframe, paramsDuration) {
+    async getPlayPromise(keyframe, params) {
+        var _a;
         const data = keyframe.data;
-        const duration = paramsDuration !== null && paramsDuration !== void 0 ? paramsDuration : (keyframe.start !== undefined && keyframe.end !== undefined ? keyframe.end - keyframe.start : undefined);
+        const duration = (_a = params === null || params === void 0 ? void 0 : params.duration) !== null && _a !== void 0 ? _a : (keyframe.start !== undefined && keyframe.end !== undefined ? keyframe.end - keyframe.start : undefined);
         if (!data)
             return;
         return new Promise((resolve, reject) => {
@@ -476,13 +504,13 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
                 };
                 switch (data.effect) {
                     case 'Move':
-                        this.move(data, duration).then(res);
+                        this.move(data, params).then(res);
                         break;
                     case 'Rotate':
-                        this.rotate(data, duration).then(res);
+                        this.rotate(data, params).then(res);
                         break;
                     default:
-                        this.rotate(data, duration).then(res);
+                        this.rotate(data, params).then(res);
                 }
             }
             catch (e) { }
@@ -513,13 +541,13 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
     /**
      * @description Action move keyframe
      */
-    async move(data, duration) {
+    async move(data, params) {
         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);
+            await this.changePano(data, params);
         }
         else {
             return Promise.resolve();
@@ -529,15 +557,15 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
     /**
      * @description Action rotate keyframe
      */
-    async rotate(data, duration) {
+    async rotate(data, params) {
         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);
+            return await this.changePano(data, params);
         }
-        await this.updateCamera(data, duration);
+        await this.updateCamera(data, params === null || params === void 0 ? void 0 : params.duration);
     }
     /**
      * @description Update five camera
@@ -572,13 +600,14 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
     /**
      * @description: Change five pano
      */
-    async changePano(data, paramsDuration = 800) {
+    async changePano(data, params) {
+        var _a;
         const { five, privateState, state } = this;
         if (typeof data.panoIndex !== 'number')
             return;
         if (data.panoIndex === five.panoIndex)
             return;
-        let originDuration = paramsDuration;
+        let originDuration = (_a = params === null || params === void 0 ? void 0 : params.duration) !== null && _a !== void 0 ? _a : 800;
         const speed = (() => {
             var _a, _b;
             const speedConfig = (_a = state.config) === null || _a === void 0 ? void 0 : _a.speedConfig;
@@ -599,13 +628,13 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
             privateState.currentPlayKeyframe.originDuration = originDuration;
         const duration = this.getSpeededDuration(originDuration);
         return new Promise((resolve) => {
-            var _a, _b;
+            var _a, _b, _c;
             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,
+                effect: (_c = (_a = params === null || params === void 0 ? void 0 : params.moveEffect) !== null && _a !== void 0 ? _a : (_b = this.state.config) === null || _b === void 0 ? void 0 : _b.moveEffect) !== null && _c !== void 0 ? _c : data.moveEffect,
                 moveCancelCallback: () => resolve(),
                 moveEndCallback: () => resolve(),
             });
@@ -622,7 +651,7 @@ export default class CruisePluginController extends BasePluginWithData.Controlle
             try {
                 const duration = currentPlayKeyframe.originDuration !== undefined ? currentPlayKeyframe.originDuration * (1 - this.getProgress()) : undefined;
                 console.log('--speedChange--', speed, { duration });
-                const promise = this.playKeyframe(currentPlayKeyframe.keyframe, duration);
+                const promise = this.playKeyframe(currentPlayKeyframe.keyframe, { duration });
                 privateState.currentPlayQueue.push(promise);
             }
             catch (e) { }

package/libs/CruisePlugin/index.d.ts

@@ -1,6 +1,6 @@
 import type { FivePlugin } from '@realsee/five';
 import CruisePluginController from './Controller';
 export { CruisePluginController };
-declare const CruisePlugin: FivePlugin<void, InstanceType<typeof CruisePluginController>>;
-export { CruisePlugin };
+export declare const CruisePlugin: FivePlugin<void, InstanceType<typeof CruisePluginController>>;
+export type { CruisePluginExportType } from './typing';
 export default CruisePlugin;

package/libs/CruisePlugin/index.js

@@ -1,5 +1,4 @@
 import CruisePluginController from './Controller';
 export { CruisePluginController };
-const CruisePlugin = (five) => new CruisePluginController(five);
-export { CruisePlugin };
+export const CruisePlugin = (five) => new CruisePluginController(five);
 export default CruisePlugin;

package/libs/CruisePlugin/typing.d.ts

@@ -2,7 +2,7 @@ import type { MovePanoOptions, Pose, State } from '@realsee/five';
 import type CruisePlugin from '.';
 import type * as BasePluginWithData from '../base/BasePluginWithData';
 declare type FivePoseAndState = Partial<Pose> & Partial<State>;
-declare type MoveEffect = MovePanoOptions['effect'];
+export declare type MoveEffect = MovePanoOptions['effect'];
 export declare type CruiseData = {
     /** 移动/旋转 */
     effect: 'Move' | 'Rotate';
@@ -16,6 +16,8 @@ export declare type CruiseData = {
 export interface CruiseKeyframe {
     id: string;
     index: number;
+    moveIndex: number;
+    stay?: number;
     start?: number;
     end?: number;
     data: CruiseData;
@@ -39,13 +41,21 @@ export interface PluginServerData extends BasePluginWithData.ServerData {
         moveEffect?: undefined;
         /** for ts check, no care */
         moveType?: undefined;
+        /** for ts check, no care */
+        moveToFirstPanoEffect?: undefined;
+        /** for ts check, no care */
+        stay?: undefined;
     } | {
         /** 点位列表 */
         panoIndexList: number[];
         /** five走点动画 */
         moveEffect?: MoveEffect;
+        /** 到第一个点的走点动画 / 续播到暂停处的走点动画 */
+        moveToFirstPanoEffect?: MoveEffect;
         /** 漫游方式：justMove 为移动到指定点位，且朝向为下一个点的朝向；moveAndRotate 为先移动到指定点位且朝向不变，然后旋转到下一个点的朝向 */
         moveType?: 'justMove' | 'moveAndRotate';
+        /** 停留时长 */
+        stay?: number;
         /** for ts check, no care */
         keyframes?: undefined;
     };

package/libs/CruisePlugin/utils/sleep.d.ts

@@ -0,0 +1 @@
+export declare function sleep(duration: number): Promise<void>;

package/libs/CruisePlugin/utils/sleep.js

@@ -0,0 +1,7 @@
+export function sleep(duration) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, duration);
+    });
+}

package/libs/GuideLinePlugin/Controller.js

@@ -63,7 +63,7 @@ export default class Controller extends BasePluginWithData.Controller {
             this.five.scene.remove(this.linesGroup);
         const linesGroup = this.getLinesGroup(data.routes);
         if (!linesGroup)
-            return Promise.reject(new Error('no line'));
+            return;
         this.linesGroup = linesGroup;
         this.five.scene.add(linesGroup);
         this.handleVisible(this.state.visible);
@@ -167,10 +167,10 @@ export default class Controller extends BasePluginWithData.Controller {
         const geometry = getLineGeometry(positions);
         if (!geometry)
             return;
-        const material = getArrowMaterial({ textureUtl: data.arrowTextureUrl });
+        const material = getArrowMaterial({ textureUrl: data.arrowTextureUrl });
         const mesh = new THREE.Mesh(geometry, material);
         mesh.name = pluginFlag('route-line-mesh');
-        mesh.renderOrder = 3;
+        // mesh.renderOrder = 3
         return mesh;
     }
 }

package/libs/GuideLinePlugin/index.d.ts

@@ -1,5 +1,5 @@
 import type { FivePlugin } from '@realsee/five';
 import Controller from './Controller';
+export * from './typing';
 export declare const GuideLinePlugin: FivePlugin<void, InstanceType<typeof Controller>>;
-export type { GuideLinePluginExportType } from './typing';
 export default GuideLinePlugin;

package/libs/GuideLinePlugin/index.js

@@ -1,3 +1,4 @@
 import Controller from './Controller';
+export * from './typing';
 export const GuideLinePlugin = (five) => new Controller(five);
 export default GuideLinePlugin;

package/libs/GuideLinePlugin/utils/getArrowMaterial.d.ts

@@ -1,4 +1,4 @@
 import * as THREE from 'three';
 export declare function getArrowMaterial(params?: {
-    textureUtl?: string;
+    textureUrl?: string;
 }): THREE.MeshBasicMaterial;

package/libs/GuideLinePlugin/utils/getArrowMaterial.js

@@ -1,7 +1,12 @@
 import * as THREE from 'three';
 export function getArrowMaterial(params) {
     var _a;
-    const texture = new THREE.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');
+    // const texture = new THREE.TextureLoader().load(params?.textureUrl ?? '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png')
+    // const texture = new THREE.TextureLoader().load(params?.textureUrl ?? '//vrlab-static.ljcdn.com/release/web/arrow2.aa1762e4.png')
+    // const texture = new THREE.TextureLoader().load(params?.textureUrl ?? '//vrlab-static.ljcdn.com/release/web/arrow3.06c5b657.png')
+    // const texture = new THREE.TextureLoader().load(params?.textureUrl ?? '//vrlab-static.ljcdn.com/release/web/arrow4.b1427685.png')
+    // const texture = new THREE.TextureLoader().load(params?.textureUrl ?? '//vrlab-static.ljcdn.com/release/web/arrow5.ae49f3c8.png')
+    const texture = new THREE.TextureLoader().load((_a = params === null || params === void 0 ? void 0 : params.textureUrl) !== null && _a !== void 0 ? _a : '//vrlab-static.ljcdn.com/release/web/arrow6.b6ce0c62.png');
     texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
     texture.encoding = THREE.sRGBEncoding;
     const arrowMaterial = new THREE.MeshBasicMaterial({

package/libs/GuideLinePlugin/utils/getLineGeometry.d.ts

@@ -1,2 +1,2 @@
 import * as THREE from 'three';
-export default function getLineGeometry(positionList: THREE.Vector3[]): THREE.BufferGeometry;
+export default function getLineGeometry(positionList: THREE.Vector3[]): void | THREE.BufferGeometry;

package/libs/GuideLinePlugin/utils/getLineGeometry.js

@@ -7,10 +7,10 @@ const AXIS_NUMBER_OF_VERTEX = 3; // 每个顶点有三个轴坐标
 const UV_NUMBER_OF_VERTEX = 2; // 每个顶点有两个 UV 轴坐标
 export default function getLineGeometry(positionList) {
     if (positionList.length < 2)
-        return;
-    const lineWidth = 1;
-    const halfLineWidth = 1 / 2;
-    const aspect = 1;
+        return console.warn('positionList length must be greater than 1');
+    const lineWidth = 0.6;
+    const halfLineWidth = lineWidth / 2;
+    const aspect = 0.67; // 纵横比 width / height
     // 点位向量数组
     const keyPoints = positionList;
     // 点位组成的平滑曲线

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.53",
+  "version": "2.0.0-alpha.54",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",