@realsee/dnalogel 2.1.0-alpha.13 → 2.1.0-alpha.15

package/libs/src/CSS3DRenderPlugin/typing.js

@@ -0,0 +1 @@
+export {};

package/libs/src/CSS3DRenderPlugin/utils/CSS3DObjectPlus.d.ts

@@ -0,0 +1,16 @@
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Vector3 } from 'three';
+export declare const MinRatio = 0.00216;
+export declare const DefaultRatio = 0.003;
+export declare class CSS3DObjectPlus<T extends HTMLElement> extends CSS3DObject {
+    version: string;
+    width: number;
+    height: number;
+    domWidthPx: number;
+    domHeightPx: number;
+    cornerPoints: [Vector3, Vector3, Vector3, Vector3];
+    ratio: number;
+    container: T;
+    centerPosition: Vector3;
+    constructor(container: T, cornerPoints: [Vector3, Vector3, Vector3, Vector3], ratio?: number, dpr?: number);
+}

package/libs/src/CSS3DRenderPlugin/utils/CSS3DObjectPlus.js

@@ -0,0 +1,136 @@
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import * as THREE from 'three';
+import { Vector3 } from 'three';
+import { evenNumber } from './evenNumber';
+import { centerPoint } from './centerPoint';
+const VERSION = '1.0.0';
+const NAME = `CSS3DObjectPlus@${VERSION}`;
+export const MinRatio = 0.00216;
+export const DefaultRatio = 0.003;
+export class CSS3DObjectPlus extends CSS3DObject {
+    // eslint-disable-next-line max-params
+    constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
+        const realRatio = Math.max(MinRatio, ratio);
+        const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
+        const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const centerPosition = centerPoint(cornerPoints[0], cornerPoints[2]);
+        let css3DObjectElement;
+        if (realRatio === ratio) {
+            container.style.width = `${domWidthPx}px`;
+            container.style.height = `${domHeightPx}px`;
+            css3DObjectElement = container;
+        }
+        else {
+            // 兼容ratio小于0.00216的情况
+            const element = document.createElement('div');
+            element.style.width = `${domWidthPx}px`;
+            element.style.height = `${domHeightPx}px`;
+            element.style.pointerEvents = 'none';
+            const scale = ratio / realRatio;
+            container.style.position = 'absolute';
+            container.style.left = '0';
+            container.style.top = '0';
+            container.style.width = `${scale * domWidthPx}px`;
+            container.style.height = `${scale * domHeightPx}px`;
+            element.appendChild(container);
+            css3DObjectElement = element;
+        }
+        super(css3DObjectElement);
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION
+        });
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "domWidthPx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "domHeightPx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cornerPoints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "ratio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "centerPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.scale.set(realRatio, realRatio, realRatio);
+        // set public property
+        this.cornerPoints = cornerPoints;
+        this.ratio = ratio;
+        this.container = container;
+        if (realRatio === ratio) {
+            this.width = planeWidth;
+            this.height = planeHeight;
+            this.domWidthPx = domWidthPx;
+            this.domHeightPx = domHeightPx;
+            this.centerPosition = centerPosition;
+        }
+        else {
+            const scale = ratio / realRatio;
+            this.width = scale * planeWidth;
+            this.height = scale * planeHeight;
+            this.domWidthPx = scale * domWidthPx;
+            this.domHeightPx = scale * domHeightPx;
+            this.centerPosition = new Vector3()
+                .subVectors(centerPosition.clone(), cornerPoints[0].clone())
+                .multiplyScalar(scale)
+                .add(cornerPoints[0]);
+        }
+        // end
+        container.classList.add(`${NAME}__container`);
+        // 旋转前
+        const startVector01 = new Vector3(1, 0, 0); // dom初始01点向量
+        const startVector12 = new Vector3(0, 1, 0); // dom初始12点向量
+        // 旋转后
+        const endVector01 = new Vector3().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
+        const endVector12 = new Vector3().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
+        // 使Vector01重合
+        const vector01Quaternion = new THREE.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
+        this.applyQuaternion(vector01Quaternion);
+        startVector12.applyQuaternion(vector01Quaternion);
+        // 使Vector12重合
+        const vector12Quaternion = new THREE.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
+        this.applyQuaternion(vector12Quaternion);
+        // set position
+        this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+    }
+}

package/libs/src/CSS3DRenderPlugin/utils/centerPoint.d.ts

@@ -0,0 +1,2 @@
+import { Vector3 } from 'three';
+export declare function centerPoint(point1: Vector3, point2: Vector3): Vector3;

package/libs/src/CSS3DRenderPlugin/utils/centerPoint.js

@@ -0,0 +1,4 @@
+import { Vector3 } from 'three';
+export function centerPoint(point1, point2) {
+    return new Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+}

package/libs/src/CSS3DRenderPlugin/utils/evenNumber.d.ts

@@ -0,0 +1,3 @@
+export declare function evenNumber(num: number, config?: {
+    smaller?: boolean;
+}): number;

package/libs/src/CSS3DRenderPlugin/utils/evenNumber.js

@@ -0,0 +1,4 @@
+export function evenNumber(num, config) {
+    const roundNum = Math.round(num);
+    return roundNum % 2 === 0 ? roundNum : roundNum + Number((config === null || config === void 0 ? void 0 : config.smaller) ? -1 : 1);
+}

package/libs/src/CSS3DRenderPlugin/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './centerPoint';
+export * from './evenNumber';
+export * from './random';
+export * from './positionToVector3';

package/libs/src/CSS3DRenderPlugin/utils/index.js

@@ -0,0 +1,4 @@
+export * from './centerPoint';
+export * from './evenNumber';
+export * from './random';
+export * from './positionToVector3';

package/libs/src/CSS3DRenderPlugin/utils/positionToVector3.d.ts

@@ -0,0 +1,13 @@
+import { Vector3 } from 'three';
+export declare type AnyPosition = Vector3 | [number, number, number] | {
+    x: number;
+    y: number;
+    z: number;
+};
+export declare const positionToVector3: ({ x, y, z }: {
+    x: number;
+    y: number;
+    z: number;
+}) => Vector3;
+export declare const arrayPositionToVector3: ([x, y, z]: [number, number, number]) => Vector3;
+export declare const anyPositionToVector3: (position: AnyPosition) => Vector3;

package/libs/src/CSS3DRenderPlugin/utils/positionToVector3.js

@@ -0,0 +1,11 @@
+import { Vector3 } from 'three';
+export const positionToVector3 = ({ x, y, z }) => new Vector3(x, y, z);
+export const arrayPositionToVector3 = ([x, y, z]) => new Vector3(x, y, z);
+export const anyPositionToVector3 = (position) => {
+    if (position instanceof Vector3)
+        return position;
+    else if (Array.isArray(position))
+        return arrayPositionToVector3(position);
+    else
+        return positionToVector3(position);
+};

package/libs/src/CSS3DRenderPlugin/utils/random.d.ts

@@ -0,0 +1 @@
+export declare function random(): string;

package/libs/src/CSS3DRenderPlugin/utils/random.js

@@ -0,0 +1,3 @@
+export function random() {
+    return Math.random().toString(36).slice(-6);
+}

package/libs/src/CameraMovementPlugin/CameraMovementPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { FivePlugin } from '@realsee/five';
+import { CameraMovementPluginExportType, CameraMovementPluginParameterType } from './typing';
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+export declare const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType>;
+export default CameraMovementPlugin;

package/libs/src/CameraMovementPlugin/CameraMovementPlugin.js

@@ -0,0 +1,159 @@
+import { Five } from '@realsee/five';
+import * as TWEEN from '@tweenjs/tween.js';
+import { tweenProgress } from '../shared-utils/animationFrame/tween';
+import { Rotation, } from './typing';
+import { formatLongitude, formatLatitude } from '../shared-utils/animationFrame/formatRad';
+import { progressNumber } from '../shared-utils/animationFrame/calculateProgress';
+const getLongitudeParams = (from, to, rotation) => {
+    const PI = Math.PI;
+    const PI_2 = PI * 2;
+    from = formatLongitude(from);
+    to = formatLongitude(to);
+    // 逆时针旋转，初始值必须是较大的值
+    if (rotation === Rotation.Anticlockwise && from < to)
+        from += PI_2;
+    // 顺时针旋转，结束值必须是较大值
+    if (rotation === Rotation.Clockwise && to < from)
+        to += PI_2;
+    // Loop 旋转，找锐角旋转
+    // 如果 to 比 from 大 180°，逆时针转
+    // 如果 from 比 to 大 180°，顺时针转
+    if (rotation === Rotation.Loop && to - from > PI)
+        return getLongitudeParams(from, to, Rotation.Anticlockwise);
+    if (rotation === Rotation.Loop && from - to > PI)
+        return getLongitudeParams(from, to, Rotation.Clockwise);
+    return { from, to };
+};
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+export const CameraMovementPlugin = (five) => {
+    const state = {};
+    const move = async (args, duration, opts = { preload: true }) => {
+        if (state.interruptCallback) {
+            state.interruptCallback(false);
+        }
+        if (opts.asyncStartCallback) {
+            await opts.asyncStartCallback();
+        }
+        if (args.mode && args.mode !== five.currentMode) {
+            await five.changeMode(args.mode);
+        }
+        if (opts.preload && args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+            await five.preloadPano(args.panoIndex);
+        }
+        if (opts.asyncEndCallback) {
+            await opts.asyncEndCallback();
+        }
+        if (args.panoIndex === undefined &&
+            args.fov === undefined &&
+            args.latitude === undefined &&
+            args.longitude === undefined) {
+            return true;
+        }
+        return await new Promise((resolve, reject) => {
+            const panoIndex = args.panoIndex !== undefined ? args.panoIndex : five.panoIndex;
+            if (panoIndex !== undefined) {
+                five.moveToPano(panoIndex, Object.assign({
+                    duration,
+                    moveEndCallback: () => resolve(true),
+                    moveCancelCallback: () => reject(false), // 移动开始
+                }, args));
+            }
+            else {
+                reject(false);
+            }
+        });
+    };
+    const getAnimeParams = (args) => {
+        const currentFiveState = five.state;
+        // latitude
+        const fromLatitude = formatLatitude(currentFiveState.latitude);
+        const toLatitude = formatLatitude(args.latitude);
+        // longitude
+        const { from: fromLongitude, to: toLongitude } = getLongitudeParams(currentFiveState.longitude, args.longitude, args.rotation || Rotation.Loop);
+        // fov
+        const fromFov = currentFiveState.fov;
+        const toFov = args.fov;
+        return {
+            from: { latitude: fromLatitude, longitude: fromLongitude, fov: fromFov },
+            to: { latitude: toLatitude, longitude: toLongitude, fov: toFov },
+        };
+    };
+    const rotate = async (args, duration, opts = {}) => {
+        if (state.interruptCallback) {
+            state.interruptCallback(false);
+        }
+        if (opts.asyncStartCallback) {
+            await opts.asyncStartCallback();
+        }
+        if (five.currentMode !== Five.Mode.Panorama) {
+            await five.changeMode(Five.Mode.Panorama);
+        }
+        if (args.panoIndex !== undefined && args.panoIndex !== five.panoIndex) {
+            if (opts.preload)
+                await five.preloadPano(args.panoIndex);
+            await new Promise((resolve, reject) => {
+                if (!args.panoIndex) {
+                    resolve(true);
+                    return;
+                }
+                five.moveToPano(args.panoIndex, {
+                    moveEndCallback: () => resolve(true),
+                    moveCancelCallback: () => reject(false), // 移动开始
+                });
+            });
+        }
+        if (opts.asyncEndCallback) {
+            await opts.asyncEndCallback();
+        }
+        const { from, to } = getAnimeParams(args);
+        return await new Promise((resolve) => {
+            const onUpdate = ({ progress }) => {
+                const state = {};
+                state.longitude = progressNumber(from.longitude, to.longitude, progress);
+                state.latitude = progressNumber(from.latitude, to.latitude, progress);
+                state.fov = progressNumber(from.fov, to.fov, progress);
+                five.setState(state, true);
+            };
+            const onComplete = () => {
+                resolve(true);
+            };
+            const onDestroy = () => {
+                resolve(false);
+            };
+            const animeDuration = args.rotateSpeed
+                ? Math.ceil((Math.abs(to.longitude - from.longitude) / args.rotateSpeed) * 1000)
+                : duration;
+            const tween = tweenProgress(animeDuration, TWEEN.Easing.Linear.None)
+                .onUpdate(onUpdate)
+                .onComplete(onComplete)
+                .onDestroy(onDestroy);
+            if (args.rotation === Rotation.Loop) {
+                tween.repeat(Infinity).yoyo(true);
+            }
+            /**
+             * 中断回调：可能会被其他动画中断。
+             */
+            state.interruptCallback = (flag = true) => {
+                tween.destroy();
+                state.interruptCallback = undefined;
+                if (state.timeoutId) {
+                    clearTimeout(state.timeoutId);
+                    state.timeoutId = undefined;
+                }
+                resolve(flag);
+            };
+            state.timeoutId = setTimeout(() => {
+                // 总时间到了之后强制结束，同时也是 Loop 模式的结束方式
+                if (state.interruptCallback)
+                    state.interruptCallback(true);
+            }, duration);
+        });
+    };
+    return {
+        move,
+        rotate,
+    };
+};
+export default CameraMovementPlugin;

package/libs/src/CameraMovementPlugin/index.d.ts

@@ -0,0 +1,5 @@
+import CameraMovementPlugin from "./CameraMovementPlugin";
+export { CameraMovementPlugin };
+export default CameraMovementPlugin;
+export type { MoveArgs, MoveOpts, RotateArgs, RotateOpts, CameraMovementPluginExportType } from './typing';
+export { CameraMovementEffect, Rotation } from './typing';

package/libs/src/CameraMovementPlugin/index.js

@@ -0,0 +1,4 @@
+import CameraMovementPlugin from "./CameraMovementPlugin";
+export { CameraMovementPlugin };
+export default CameraMovementPlugin;
+export { CameraMovementEffect, Rotation } from './typing';

package/libs/src/CameraMovementPlugin/typing.d.ts

@@ -0,0 +1,68 @@
+import type { Mode, Pose } from '@realsee/five';
+export interface CameraMovementPluginParameterType {
+}
+export interface CameraMovementPluginExportType {
+    /**
+     * 运镜：移动
+     * @param moveArgs 移动参数
+     * @param duration 移动耗时
+     * @param opts 额外配置
+     */
+    move(moveArgs: Partial<MoveArgs>, duration: number, opts?: MoveOpts): Promise<boolean>;
+    /**
+     * 运镜：旋转
+     * @param rotateArgs 旋转参数
+     * @param duration 旋转耗时
+     * @param opts 额外配置
+     */
+    rotate(rotateArgs: Partial<RotateArgs>, duration: number, opts?: RotateOpts): Promise<boolean>;
+}
+/**
+ * 运镜效果
+ */
+export declare enum CameraMovementEffect {
+    Move = "Move",
+    Rotate = "Rotate"
+}
+/**
+ * 旋转类型
+ */
+export declare enum Rotation {
+    Clockwise = "Clockwise",
+    Anticlockwise = "Anticlockwise",
+    Loop = "Loop"
+}
+/**
+ * 回调配置
+ */
+export interface CameraMovementOptsCallback {
+    asyncStartCallback?: () => void;
+    asyncEndCallback?: () => void;
+}
+/**
+ * 移动运镜参数
+ */
+export declare type MoveArgs = {
+    mode: Mode;
+    panoIndex: number;
+} & Pose;
+/**
+ * 移动运镜配置
+ */
+export declare type MoveOpts = {
+    preload?: boolean;
+} & CameraMovementOptsCallback;
+/**
+ * 旋转运镜参数
+ */
+export declare type RotateArgs = {
+    panoIndex?: number;
+    rotateSpeed?: number;
+    rotation?: Rotation;
+} & Pose;
+/**
+ * 旋转运镜配置
+ */
+export declare type RotateOpts = {
+    preload?: boolean;
+} & CameraMovementOptsCallback;

package/libs/src/CameraMovementPlugin/typing.js

@@ -0,0 +1,17 @@
+/**
+ * 运镜效果
+ */
+export var CameraMovementEffect;
+(function (CameraMovementEffect) {
+    CameraMovementEffect["Move"] = "Move";
+    CameraMovementEffect["Rotate"] = "Rotate";
+})(CameraMovementEffect || (CameraMovementEffect = {}));
+/**
+ * 旋转类型
+ */
+export var Rotation;
+(function (Rotation) {
+    Rotation["Clockwise"] = "Clockwise";
+    Rotation["Anticlockwise"] = "Anticlockwise";
+    Rotation["Loop"] = "Loop";
+})(Rotation || (Rotation = {}));

package/libs/src/CruisePlugin/Controller.d.ts

@@ -0,0 +1,170 @@
+import type { Five } from '@realsee/five';
+import type { BaseOptions } from '../base/BasePlugin';
+import * as BasePluginWithData from '../base/BasePluginWithData';
+import type { PluginState, EventMap, PluginServerData, PluginData } from './typing';
+export declare const pluginFlag: (name: string) => string;
+export default class CruisePluginController extends BasePluginWithData.Controller<PluginState, EventMap, PluginServerData, PluginData> {
+    static PluginVersion: string;
+    state: PluginState;
+    protected data?: PluginData;
+    private privateState;
+    private GuideLine?;
+    constructor(five: Five);
+    /**
+     * @description Load Data and State
+     */
+    load(serverData: PluginServerData | PluginServerData['data'], state?: PluginState, userAction?: boolean): Promise<void>;
+    /**
+     * @description Play | Continue play. if have been paused, continue play from the pause position; if playing, do nothing
+     */
+    play(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @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: {
+        userAction?: boolean;
+        index?: number;
+        id?: string;
+    }): void;
+    /**
+     * @description Play from first keyframe
+     */
+    playFromStart(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Pause
+     */
+    pause(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Show guide line
+     */
+    show(options?: {
+        userAction?: boolean;
+    }): Promise<void>;
+    /**
+     * @description Hide guide line
+     */
+    hide(options?: {
+        userAction?: boolean;
+    }): Promise<void>;
+    /**
+     * @description Enable
+     */
+    enable(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Disable
+     */
+    disable(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Dispose
+     */
+    dispose(): void;
+    /**
+     * @description Set state
+     */
+    setState(state: Partial<PluginState>, options?: BaseOptions & Record<string, any>): void;
+    /**
+     * @description Format data
+     */
+    protected formatData(serverData: PluginServerData | PluginServerData['data']): Promise<PluginData>;
+    private handleEnable;
+    private handleVisible;
+    private changePlayState;
+    /**
+     * @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
+     */
+    private handlePlay;
+    /**
+     * @description: Pause and record pause state
+     */
+    private handlePause;
+    /**
+     * @description Play single keyframe
+     */
+    private playKeyframe;
+    /**
+     * @description: listen interupted by five gesture
+     */
+    private addInterruptListener;
+    /**
+     * @description: getPlayPromise
+     */
+    private getPlayPromise;
+    /**
+     * @description Action promise queue in sequence
+     */
+    private actionPromiseQueue;
+    /**
+     * @description Action move keyframe
+     */
+    private move;
+    /**
+     * @description Action rotate keyframe
+     */
+    private rotate;
+    /**
+     * @description Update five camera
+     */
+    private updateCamera;
+    /**
+     * @description: Change five pano
+     */
+    private changePano;
+    /**
+     * @description: Change play speed
+     */
+    private changeSpeed;
+    /**
+     * @description Get duration by speed
+     */
+    private getSpeededDuration;
+    /**
+     * @description Get ratate progress
+     */
+    private getProgress;
+    /**
+     * @description Change five mode
+     */
+    private changeMode;
+    /**
+     * @description Force interupt five updateCamera
+     */
+    private forceInteruptUpdateCamera;
+    private getPauseData;
+    /**
+     * @description Set pause data
+     */
+    private setPauseData;
+    /**
+     * @description Clear pause data
+     */
+    private clearPauseData;
+    /**
+     * @description: Restore state that before loaded
+     */
+    private clear;
+    private handleDispose;
+    /**
+     * @description Action function if plugin is enable
+     */
+    private actionIfStateIsEnabled;
+    /**
+     * @description: Wait for five work ready
+     */
+    private waitFiveLoaded;
+    private setFiveLinearUpdateCamera;
+    private setFiveOriginUpdateCamera;
+}