@realsee/dnalogel 2.1.2-alpha.1 → 2.1.2-alpha.11

package/dist/CSS3DRenderPlugin/CSS3DRender.d.ts

@@ -0,0 +1,167 @@
+import * as THREE from 'three';
+import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Subscribe } from '../shared-utils/Subscribe';
+import { AnyPosition } from './utils';
+import { CSS3DObjectPlus, Mode } from './utils/CSS3DObjectPlus';
+export { MinRatio } from './utils/CSS3DObjectPlus';
+export declare const __ELEMENT__ = "__CSS3DOBJECT_CSS3DRENDER_CONTAINER__";
+export declare const PLUGIN: string;
+export interface CSS3DRenderState {
+    enabled: boolean;
+    visible: boolean;
+    disposed: boolean;
+}
+export declare type CSS3DRenderEventMap = {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    dispose: () => void;
+    /**
+     * 插件状态变化
+     * @param params.state      最新的State
+     * @param params.prevState  上一个State
+     * @param params.userAction 是否是用户触发
+     */
+    stateChange: (params: {
+        state: CSS3DRenderState;
+        prevState?: CSS3DRenderState;
+        userAction: boolean;
+    }) => void;
+};
+export interface Create3DDElementParamsType {
+    points: AnyPosition[];
+    config?: {
+        ratio?: number;
+        devicePixelRatio?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        pointerEvents?: 'none' | 'auto';
+        scene?: THREE.Scene;
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        scene: THREE.Scene;
+    });
+}
+export declare const globalStore: {
+    frontModeResizeObserver?: {
+        observe: () => void;
+        unobserve: () => void;
+    };
+    behindModeResizeObserver?: {
+        observe: () => void;
+        unobserve: () => void;
+    };
+    frontModeContainer?: Element;
+    behindModeContainer?: Element;
+    frontModeStore?: {
+        css3DScene: THREE.Scene;
+        css3DRenderer: CSS3DRenderer;
+        requestAnimationFrameId?: number;
+        appendedToPage?: boolean;
+    };
+    behindModeStore?: {
+        scene: THREE.Scene;
+        css3DScene: THREE.Scene;
+        css3DRenderer: CSS3DRenderer;
+        requestAnimationFrameId?: number;
+        appendedToPage?: boolean;
+    };
+};
+export declare class CSS3DRender {
+    hooks: Subscribe<CSS3DRenderEventMap>;
+    state: CSS3DRenderState;
+    private store;
+    getCurrentState(): CSS3DRenderState;
+    setState(state: Partial<CSS3DRenderState>, options?: {
+        userAction: boolean;
+    }): void;
+    dispose(): void;
+    show({ userAction }?: {
+        userAction: boolean;
+    }): Promise<void>;
+    hide({ userAction }?: {
+        userAction: boolean;
+    }): Promise<void>;
+    enable({ userAction }?: {
+        userAction: boolean;
+    }): void;
+    disable({ userAction }?: {
+        userAction: boolean;
+    }): void;
+    /**
+     * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     * @param { Vector3Position[] } points 矩形四个点坐标
+     * @param config 均为可选值
+     * @config_document `config` 均为可选值
+     *  | key                   | type                       | defaultValue        | comment |
+     *  | -                     | -                          | -                   | -       |
+     *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+     *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+     *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+     *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+     *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+     *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+     *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+     *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+     *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
+     *
+     * @return
+     * ```typescript
+     *    {
+     *      id: string,                             // id
+     *      container: HTMLDIVElement               // dom容器
+     *      dispose: () => void                     // 销毁
+     *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+     *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+     *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+     *      show: () => void                        // 同 setVisible(true)
+     *      hide: () => void                        // 同 setVisible(false)
+     *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
+     *      enable: () => void                      // 同 setEnabled(true)
+     *      disable: () => void                     // 同 setEnabled(false)
+     *    } | void
+     * ```
+     */
+    create3DElement: (camera: THREE.Camera, points: Create3DDElementParamsType['points'], config?: Create3DDElementParamsType['config']) => void | {
+        id: string;
+        container: HTMLElement;
+        dispose: () => boolean;
+        css3DObject: CSS3DObjectPlus<HTMLElement>;
+        render: () => void;
+        show: () => void;
+        hide: () => void;
+        setVisible: (visible: boolean) => void;
+        disable: () => void;
+        enable: () => void;
+        setEnabled: (enabled: boolean) => void;
+        appendToElement: (container: Element) => void;
+    };
+    setContainer(container: Element, mode: Mode): void;
+    appendToElement(container: Element | undefined, mode: Mode): void;
+    setVisibleById: (id: string, visible: boolean) => void;
+    setEnabledById: (id: string, enabled: boolean) => void;
+    private render;
+    private createObject;
+    private initGlobalModeStore;
+    /**
+     * @description: 生成透明Mesh
+     */
+    private createOpacityMesh;
+    private handleShow;
+    private handleHide;
+    private handleEnable;
+    private handleDisable;
+    private createResizeObserver;
+    private disposedErrorLog;
+}

package/dist/CSS3DRenderPlugin/Controller.d.ts

@@ -0,0 +1,81 @@
+import type * as BasePlugin from '../base/BasePlugin';
+import type { Five } from '@realsee/five';
+import { CSS3DRender, CSS3DRenderEventMap, CSS3DRenderState } from './CSS3DRender';
+import type { AnyPosition } from './utils';
+export declare const PLUGIN_NAME: string;
+export interface Create3DDomContainerParamsType {
+    points: AnyPosition[];
+    config?: {
+        ratio?: number;
+        /** @deprecated dpr renamed as devicePixelRatio */
+        dpr?: number;
+        devicePixelRatio?: number;
+        autoRender?: boolean;
+        container?: HTMLElement;
+        pointerEvents?: 'none' | 'auto';
+    } & ({
+        mode?: 'front';
+    } | {
+        mode: 'behind';
+        behindFiveContainer: HTMLElement;
+    });
+}
+export default class Controller extends CSS3DRender implements BasePlugin.Controller<CSS3DRenderState, CSS3DRenderEventMap> {
+    five: Five;
+    behindFiveContainer?: HTMLElement;
+    readonly staticPrefix: string;
+    constructor(five: Five);
+    /** @deprecated disposeAll() renamed as dispose() */
+    disposeAll(): void;
+    setState(...params: Parameters<InstanceType<typeof CSS3DRender>['setState']>): void;
+    /**
+     * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+     * @param { Vector3Position[] } points 矩形四个点坐标
+     * @param config 均为可选值
+     * @config_document `config` 均为可选值
+     *  | key                   | type                       | defaultValue        | comment |
+     *  | -                     | -                          | -                   | -       |
+     *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+     *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
+     *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+     *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+     *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+     *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+     *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+     *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+     *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+     *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
+     *
+     * @return
+     * ```typescript
+     *    {
+     *      id: string,                             // id
+     *      container: HTMLDIVElement               // dom容器
+     *      dispose: () => void                     // 销毁
+     *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+     *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+     *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+     *      show: () => void                        // 同 setVisible(true)
+     *      hide: () => void                        // 同 setVisible(false)
+     *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)
+     *      enable: () => void                      // 同 setEnabled(true)
+     *      disable: () => void                     // 同 setEnabled(false)
+     *    } | void
+     * ```
+     */
+    create3DDomContainer: (points: Create3DDomContainerParamsType['points'], config?: Create3DDomContainerParamsType['config']) => {
+        render: () => void;
+        id: string;
+        container: HTMLElement;
+        dispose: () => boolean;
+        css3DObject: import("./utils/CSS3DObjectPlus").CSS3DObjectPlus<HTMLElement>;
+        show: () => void;
+        hide: () => void;
+        setVisible: (visible: boolean) => void;
+        disable: () => void;
+        enable: () => void;
+        setEnabled: (enabled: boolean) => void;
+        appendToElement: (container: Element) => void;
+    };
+    private getBehindFiveElement;
+}

package/dist/CSS3DRenderPlugin/index.d.ts

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

package/dist/CSS3DRenderPlugin/typing.d.ts

@@ -0,0 +1,26 @@
+import type CSS3DRenderPlugin from '.';
+import type * as BasePlugin from '../base/BasePlugin';
+import type { CSS3DRender } from './CSS3DRender';
+export declare type CSS3DRenderPluginParameterType = undefined;
+export declare type CSS3DRenderPluginExportType = ReturnType<typeof CSS3DRenderPlugin>;
+export declare type CSS3DRenderExportType = InstanceType<typeof CSS3DRender>;
+export declare type Create3DDomContainerReturnType = ReturnType<CSS3DRenderPluginExportType['create3DDomContainer']>;
+export declare type Create3DElementReturnType = ReturnType<InstanceType<typeof CSS3DRender>['create3DElement']>;
+export interface CSS3DRenderPluginState extends BasePlugin.State {
+    enabled: boolean;
+    visible: boolean;
+}
+export interface CSS3DRenderPluginEventMap extends BasePlugin.EventMap<CSS3DRenderPluginState> {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+}

package/dist/CSS3DRenderPlugin/utils/CSS3DObjectPlus.d.ts

@@ -0,0 +1,34 @@
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { Matrix4, Quaternion, Vector3 } from 'three';
+import { Subscribe } from '../../shared-utils/Subscribe';
+import type * as THREE from 'three';
+export declare const MinRatio = 0.00216;
+export declare const DefaultRatio = 0.003;
+export declare type Mode = 'front' | 'behind';
+export declare type CornerPoints = [Vector3, Vector3, Vector3, Vector3];
+export declare type CSS3DRenderEventMap = {
+    applyMatrix4: (matrix: Matrix4) => void;
+    applyQuaternion: (quaternion: Quaternion) => void;
+    applyScaleMatrix4: (matrix: Matrix4) => void;
+    changeMode: <T extends Mode = Mode>(mode: T, prevMode: Mode, scene: T extends 'behind' ? THREE.Scene : undefined) => void;
+};
+export declare class CSS3DObjectPlus<T extends HTMLElement = HTMLElement> extends CSS3DObject {
+    version: string;
+    width: number;
+    height: number;
+    domWidthPx: number;
+    domHeightPx: number;
+    cornerPoints: CornerPoints;
+    ratio: number;
+    container: T;
+    centerPosition: Vector3;
+    mode: 'front' | 'behind';
+    readonly hooks: Subscribe<CSS3DRenderEventMap>;
+    readonly isCSS3DObjectPlus: true;
+    constructor(container: T, cornerPoints: CornerPoints, ratio?: number, dpr?: number, mode?: Mode);
+    changeMode(mode: 'front'): void;
+    changeMode(mode: 'behind', scene: THREE.Scene): void;
+    applyScaleMatrix4(matrix: Matrix4): void;
+    applyMatrix4(matrix: Matrix4): void;
+    applyQuaternion(quaternion: Quaternion): this;
+}

package/dist/CSS3DRenderPlugin/utils/centerPoint.d.ts

@@ -0,0 +1,2 @@
+import { Vector3 } from 'three';
+export declare function centerPoint(...args: Vector3[]): Vector3;

package/dist/CSS3DRenderPlugin/utils/evenNumber.d.ts

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

package/dist/CSS3DRenderPlugin/utils/index.d.ts

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

package/dist/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/dist/CSS3DRenderPlugin/utils/random.d.ts

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

package/dist/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/dist/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/dist/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/dist/CruisePlugin/Controller.d.ts

@@ -0,0 +1,172 @@
+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';
+import type { Config } from '../base/BasePlugin';
+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 config?;
+    private privateState;
+    private GuideLine?;
+    constructor(five: Five, config?: Config);
+    /**
+     * @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;
+}

package/dist/CruisePlugin/index.d.ts

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