@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/libs/shared-utils/Preloader.js

@@ -0,0 +1,38 @@
+/**
+ * 预载器
+ */
+export const Preloader = {
+    blob: (url) => {
+        const noop = () => null;
+        return new Promise((resolve, reject) => {
+            const xhr = new XMLHttpRequest();
+            const clear = () => {
+                xhr.ontimeout = noop;
+                xhr.onreadystatechange = noop;
+                xhr.onprogress = noop;
+                xhr.onabort = noop;
+            };
+            xhr.ontimeout = () => {
+                reject(new Error('timeout'));
+                clear();
+            };
+            xhr.onreadystatechange = () => {
+                if (xhr.readyState !== 4)
+                    return;
+                if (xhr.status === 0 && !xhr.response)
+                    return;
+                if (xhr.status === 200 || xhr.status === 0) {
+                    resolve(xhr.response);
+                    clear();
+                }
+                else {
+                    reject(new Error('status:' + xhr.status));
+                    clear();
+                }
+            };
+            xhr.open('GET', url, true);
+            xhr.responseType = 'blob';
+            xhr.send(null);
+        });
+    },
+};

package/libs/shared-utils/Subscribe.d.ts

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

package/libs/shared-utils/Subscribe.js

@@ -0,0 +1,101 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+const __EVENT__ = '__events__';
+/**
+ * 订阅类。
+ * 观察者模式（供前端使用），Node端推荐<a href="https://nodejs.org/api/events.html#events_class_eventemitter">EventEmitter</a>。
+ */
+export default class Subscribe {
+    [__EVENT__];
+    constructor() {
+        this[__EVENT__] = {};
+    }
+    /**
+     * 判断是否注册时事件
+     * @param  {string|[string]}  name     事件类型
+     */
+    hasListener(name) {
+        const events = this[__EVENT__];
+        return events && events[name] && events[name].length;
+    }
+    /**
+     * 注册事件
+     * @param  {string|[string]}  names    事件类型
+     * @param  {function}         callback 事件回调函数
+     * @param  {any}              context  事件回调函数调用的上下文
+     * @param  {boolean}          once     是否只执行一次
+     */
+    on(names, callback, context, once = false) {
+        for (const name of [].concat(names)) {
+            if (!this[__EVENT__][name])
+                this[__EVENT__][name] = [];
+            this[__EVENT__][name].push([callback, context, once]);
+        }
+        return () => this.off(names, callback);
+    }
+    /**
+     * 注册事件(是否只执行一次)
+     * @param  {string|[string]}  names    事件类型
+     * @param  {function}         callback 事件回调函数
+     * @param  {any}              context  事件回调函数调用的上下文
+     */
+    once(names, callback, context) {
+        return this.on(names, callback, context, true);
+    }
+    /**
+     * 解除事件
+     * @param  {string|[string]}  names    事件类型
+     * @param  {function}         callback 事件回调函数
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     */
+    off(names, callback) {
+        if (arguments.length === 0) {
+            this[__EVENT__] = {};
+            return;
+        }
+        const hasNames = (names) => names;
+        if (hasNames(names)) {
+            const events = this[__EVENT__];
+            for (const name of [].concat(names)) {
+                if (events[name] === undefined)
+                    continue;
+                if (callback === undefined) {
+                    events[name].length = 0;
+                    continue;
+                }
+                events[name] = events[name].filter((one) => one[0] !== callback);
+            }
+        }
+        return this;
+    }
+    /**
+     * 触发事件
+     * @param  {string|[string]}    name      事件类型
+     * @param  {...any}             data      触发事件的数据
+     */
+    emit(name, ...data) {
+        let canceled = false;
+        const event = this[__EVENT__][name] || [];
+        if (event.length === 0) {
+            console.warn(` 💀 "${name}" ⟶ Unregistered event. `);
+        }
+        for (const one of event) {
+            try {
+                const [callback, context = this, once = false] = one;
+                const result = callback.apply(context, data);
+                if (once)
+                    this.off(name, callback);
+                if (result === false) {
+                    // 如果回调的返回结果是false，则中断后续的调用链
+                    canceled = true;
+                    return canceled;
+                }
+            }
+            catch (error) {
+                console.warn(error);
+            }
+        }
+        return canceled;
+    }
+}

package/libs/shared-utils/animationFrame/BetterTween.d.ts

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

package/libs/shared-utils/animationFrame/BetterTween.js

@@ -0,0 +1,30 @@
+import TWEEN from '@tweenjs/tween.js';
+import { requestAnimationFrameInterval } from './index';
+export class BetterTween extends TWEEN.Tween {
+    disposeMethods = [];
+    animationFrameDisposer;
+    onDispose = (callback) => {
+        this.disposeMethods.push(callback);
+        return this;
+    };
+    play = () => {
+        this.start(0);
+        this.animationFrameDisposer = requestAnimationFrameInterval((time) => this.update(time));
+        return this;
+    };
+    dispose = () => {
+        this.stop();
+        this.animationFrameDisposer?.();
+        this.disposeMethods.forEach((fn) => fn());
+        this.disposeMethods = [];
+        TWEEN.remove(this);
+    };
+}
+export function tweenProgress(duration, easing = TWEEN.Easing.Linear.None) {
+    const tween = new BetterTween({ progress: 0 }).to({ progress: 1 });
+    if (duration !== undefined)
+        tween.duration(duration);
+    if (easing !== undefined)
+        tween.easing(easing);
+    return tween;
+}

package/libs/shared-utils/animationFrame/calculateProgress.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 线性过程插值
+ */
+export declare function progressNumber(from: number, to: number, pst: number): number;
+/**
+ * 弧度过程插值值,会取锐角进行插值
+ */
+export declare function progressRad(from: number, to: number, pst: number): number;

package/libs/shared-utils/animationFrame/calculateProgress.js

@@ -0,0 +1,23 @@
+import { formatRad } from './formatRad';
+const PI = Math.PI;
+const PI_2 = PI * 2;
+/**
+ * 线性过程插值
+ */
+export function progressNumber(from, to, pst) {
+    return from + (to - from) * pst;
+}
+/**
+ * 弧度过程插值值,会取锐角进行插值
+ */
+export function progressRad(from, to, pst) {
+    from = formatRad(from);
+    to = formatRad(to);
+    if (to - from > PI) {
+        return formatRad(progressNumber(from + PI_2, to, pst));
+    }
+    if (from - to > PI) {
+        return formatRad(progressNumber(from - PI_2, to, pst));
+    }
+    return progressNumber(from, to, pst);
+}

package/libs/shared-utils/animationFrame/formatRad.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export declare function formatLongitude(rad: number): number;
+/**
+ * 把一个任意角度的弧度值转换为一个 [-2PI, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export declare function formatLatitude(rad: number): number;
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export declare const formatRad: typeof formatLongitude;

package/libs/shared-utils/animationFrame/formatRad.js

@@ -0,0 +1,20 @@
+const PI_2 = Math.PI * 2;
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export function formatLongitude(rad) {
+    return ((rad % PI_2) + PI_2) % PI_2;
+}
+/**
+ * 把一个任意角度的弧度值转换为一个 [-2PI, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export function formatLatitude(rad) {
+    return rad % PI_2;
+}
+/**
+ * 把一个任意角度的弧度值转换为一个 [0, 2PI] 的弧度值
+ * @param rad 弧度值
+ */
+export const formatRad = formatLongitude;

package/libs/shared-utils/animationFrame/index.d.ts

@@ -0,0 +1,15 @@
+declare const _requestAnimationFrame: ((callback: FrameRequestCallback) => number) & typeof requestAnimationFrame;
+export default _requestAnimationFrame;
+export declare function nextFrame(fn: FrameRequestCallback, delay?: number): void;
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+export declare function requestAnimationFrameInterval(callback?: (time: number) => any, frame?: number): () => void;
+/**
+ * 获取两个 AnimationFrame 间隔的时间
+ * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
+ */
+export declare function getFrameTime(): Promise<unknown>;

package/libs/shared-utils/animationFrame/index.js

@@ -0,0 +1,48 @@
+const _requestAnimationFrame = window.requestAnimationFrame || ((fn) => setTimeout(fn, 16));
+const _cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
+export default _requestAnimationFrame;
+export function nextFrame(fn, delay = 0) {
+    if (delay <= 0)
+        _requestAnimationFrame(fn);
+    else
+        _requestAnimationFrame(() => nextFrame(fn, delay - 1));
+}
+/**
+ * 在每个 AnimationFrame 中调用传入的函数
+ * @param callback 每次 AnimationFrame 中调用的函数
+ * @param frame 每秒运行多少次
+ * @returns 返回一个函数，调用可以停止 AnimationFrameLoop
+ */
+export function requestAnimationFrameInterval(callback, frame = 60) {
+    let index = -1;
+    let oldTime = 0;
+    let startTime = -1;
+    const minDeltaTime = 1000 / frame;
+    function loop(time) {
+        startTime === -1 && (startTime = time);
+        index = _requestAnimationFrame(loop);
+        const deltaTime = time - oldTime;
+        if (deltaTime < minDeltaTime)
+            return;
+        oldTime = time;
+        callback && callback(time - startTime);
+    }
+    index = _requestAnimationFrame(loop);
+    return function stop() {
+        _cancelAnimationFrame(index);
+    };
+}
+/**
+ * 获取两个 AnimationFrame 间隔的时间
+ * @returns 返回一个 Promise，resolve 的结果是两个 AnimationFrame 间隔的时间
+ */
+export function getFrameTime() {
+    const start = Date.now();
+    return new Promise((resolve) => {
+        _requestAnimationFrame(() => {
+            resolve(Date.now() - start);
+        });
+    });
+}
+// export { Easing } from './tween'
+// export { default as tween } from './tween'

package/libs/shared-utils/animationFrame/tween.d.ts

@@ -0,0 +1,75 @@
+import * as TWEEN from '@tweenjs/tween.js';
+export declare const Easing: {
+    Linear: {
+        None: (amount: number) => number;
+    };
+    Quadratic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Cubic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Quartic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Quintic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Sinusoidal: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Exponential: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Circular: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Elastic: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Back: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+    Bounce: {
+        In: (amount: number) => number;
+        Out: (amount: number) => number;
+        InOut: (amount: number) => number;
+    };
+};
+interface ITween<T> extends TWEEN.Tween<T> {
+    onDestroy: (fn: () => void) => TWEEN.Tween<T>;
+    destroy: () => void;
+}
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+export default function tween<T>(from: T, to: T, duration: number, easing?: (amount: number) => number): ITween<T>;
+export declare function tweenProgress(duration: number, easing: typeof Easing.Linear.None): ITween<{
+    progress: number;
+}>;
+export {};

package/libs/shared-utils/animationFrame/tween.js

@@ -0,0 +1,44 @@
+import * as TWEEN from '@tweenjs/tween.js';
+import { nextFrame, requestAnimationFrameInterval } from './index';
+export const Easing = TWEEN.Easing;
+/**
+ * 对象变化的补间动画
+ * 1. 应用 requestAnimationFrameInterval 做 update
+ * 2. 在原生 tween 上新增 destroy 方法和 onDestroy 监听
+ * DOC： https://github.com/tweenjs/tween.js
+ * @param from 对象起始状态
+ * @param to 对象末尾状态
+ * @param duration 经历时间（s）
+ * @param easing 过程动画，默认是 Easing.Linear.None
+ */
+export default function tween(from, to, duration, easing = Easing.Linear.None) {
+    const tween = new TWEEN.Tween(from).to(to, duration).easing(easing);
+    // 这里注意一下，因为 requestAnimationFrameInterval 给的时间是从 0 开始的，tween 动画也从 0 开始
+    nextFrame(() => tween.start(0));
+    const cancelAnimationFrame = requestAnimationFrameInterval((time) => {
+        if (tween.update(time) === false)
+            cancelAnimationFrame();
+    });
+    const destroyMethods = [];
+    tween.onDestroy = (fn) => {
+        destroyMethods.push(fn);
+        return tween;
+    };
+    tween.destroy = function () {
+        this.stop();
+        Object.assign(tween, {
+            _onStartCallback: null,
+            _onUpdateCallback: null,
+            _onCompleteCallback: null,
+            _onStopCallbackL: null,
+        });
+        let destroyMethod;
+        while ((destroyMethod = destroyMethods.shift()))
+            destroyMethod();
+        cancelAnimationFrame();
+    };
+    return tween;
+}
+export function tweenProgress(duration, easing) {
+    return tween({ progress: 0 }, { progress: 1 }, duration, easing);
+}

package/libs/shared-utils/changeModelCanvasOpacity.d.ts

@@ -0,0 +1,2 @@
+import type { Five } from '@realsee/five';
+export default function changeModelCanvasOpacity(five: Five, opacity: number, duration?: number): void;

package/libs/shared-utils/changeModelCanvasOpacity.js

@@ -0,0 +1,15 @@
+export default function changeModelCanvasOpacity(five, opacity, duration = 300) {
+    const fiveEle = five.getElement();
+    if (!fiveEle)
+        return;
+    fiveEle.style.opacity = opacity + '';
+    fiveEle.style.transition = duration === 0 ? 'none' : `opacity ${duration}ms linear`;
+    if (duration === 0)
+        return;
+    Promise.race([
+        new Promise((res) => fiveEle.addEventListener('transitionend', res, { once: true })),
+        new Promise((res) => setTimeout(res, duration)),
+    ]).then(() => {
+        fiveEle.style.transition = 'none';
+    });
+}

package/libs/shared-utils/createCanvasTextTexture.d.ts

@@ -0,0 +1,8 @@
+import { CanvasTexture } from 'three';
+export default function createCanvasTextTexture(text: string, config?: {
+    size?: number;
+    fontSize?: number;
+    backgroundColor?: string;
+    fontColor?: string;
+    textAlign?: CanvasTextAlign;
+}): CanvasTexture;

package/libs/shared-utils/createCanvasTextTexture.js

@@ -0,0 +1,19 @@
+import { CanvasTexture } from 'three';
+export default function createCanvasTextTexture(text, config) {
+    const size = config?.size ?? 512;
+    const fontSize = config?.fontSize ?? size * (35 / 256) * 1.2;
+    const backgroundColor = config?.backgroundColor ?? 'rgba(0,0,0,0)';
+    const fontColor = config?.fontColor ?? '#fff';
+    const textAlign = config?.textAlign ?? 'center';
+    const canvas = document.createElement('canvas');
+    canvas.setAttribute('width', size + '');
+    canvas.setAttribute('height', size + '');
+    const context = canvas.getContext('2d');
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, size, size);
+    context.font = `${fontSize}px "微软雅黑"`;
+    context.textAlign = textAlign;
+    context.fillStyle = fontColor;
+    context.fillText(text, size / 2, size * 0.7);
+    return new CanvasTexture(canvas);
+}

package/libs/shared-utils/createLine/index.d.ts

@@ -0,0 +1,3 @@
+import { Line } from '@realsee/five/line';
+import { Vector3 } from 'three';
+export default function createLine(point1: Vector3, point2: Vector3, color?: Vector3, dashed?: boolean): Line;

package/libs/shared-utils/createLine/index.js

@@ -0,0 +1,8 @@
+import { Line } from '@realsee/five/line';
+import { Vector3 } from 'three';
+export default function createLine(point1, point2, color = new Vector3(1, 1, 1), dashed = false) {
+    const line = new Line(point1, point2);
+    line.setMaterial({ dashed, color, linewidth: 1 });
+    line.remove(line.points);
+    return line;
+}

package/libs/shared-utils/debounce.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法
+ * @param func - 要防抖动的函数
+ * @param [wait=0] - 需要延迟的毫秒数
+ */
+export default function debounce<T extends (...args: any[]) => any>(func: T, wait?: number): (...args: Parameters<T>) => void;

package/libs/shared-utils/debounce.js

@@ -0,0 +1,14 @@
+/**
+ * 创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法
+ * @param func - 要防抖动的函数
+ * @param [wait=0] - 需要延迟的毫秒数
+ */
+export default function debounce(func, wait = 200) {
+    let last;
+    return function (...args) {
+        clearTimeout(last);
+        last = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+}

package/libs/shared-utils/equal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 对象比较
+ * @param {*} value 第一个比较的值
+ * @param {*} other 第二个比较的值
+ * @param {Object} options 可选参数，可选项包括：<br />
+ *    deep {Boolean} 是否深比较<br />
+ * @returns {boolean} 是否相等
+ */
+export default function equal(value: any, other: any, opt?: {
+    deep: boolean;
+}): boolean;

package/libs/shared-utils/equal.js

@@ -0,0 +1,84 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import isTruelyObject from './isTruelyObject';
+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} 是否相等
+ */
+export default function equal(value, other, opt = { deep: false }) {
+    if (!opt.deep)
+        return isShallowEqual(value, other);
+    return isDeepEqual(value, other);
+}