@realsee/dnalogel 0.1.7 → 2.0.0-alpha.1

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.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.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/{shared-utils → libs/shared-utils}/createLine/index.d.ts

@@ -1,3 +1,3 @@
-import { Vector3 } from 'three';
 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/{shared-utils → libs/shared-utils}/debounce.d.ts

@@ -3,4 +3,4 @@
  * @param func - 要防抖动的函数
  * @param [wait=0] - 需要延迟的毫秒数
  */
-export default function debounce<T extends (...args: any) => any>(func: T, wait?: number): (...args: Parameters<T>) => void;
+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.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);
+}

package/libs/shared-utils/filter.js

@@ -0,0 +1,53 @@
+import tap from './tap';
+/**
+ * 对象属性筛选函数。
+ * 基于已有对象生成一个满足条件(属性)新的对象。
+ * @param {object} object
+ * @param {Function} check
+ */
+export function filter(object, check) {
+    return tap({}, (result) => {
+        Object.keys(object).forEach((key) => {
+            const _key = key;
+            if (check(_key, object[_key])) {
+                result[_key] = object[_key];
+            }
+        });
+    });
+}
+/**
+ * 对象镜子函数。
+ * 生成一个"镜子"对象：对象的属性名与其值相同。
+ * @param  {string[]} strings 对象属性
+ */
+export function mirror(strings) {
+    return tap({}, (result) => {
+        for (const string of strings)
+            result[string] = string;
+    });
+}
+/**
+ * 过滤掉不需要的对象字段函数：实现从一个对象中排除某些指定属性后生成的新对象。
+ * @param object
+ * @param props 排除的属性
+ * @return
+ */
+export function omit(object, props) {
+    return tap({}, (result) => {
+        for (const name in object) {
+            if (props.indexOf(name) !== -1)
+                continue;
+            result[name] = object[name];
+        }
+    });
+}
+/**
+ * 筛选需要的对象字段：实现从一个对象中选择某些指定属性生成新的对象（与`omit()`功能相反）。
+ * @param  {object}    object
+ * @param  {string[]} props
+ * @return {object}
+ */
+export function pick(object, props) {
+    // eslint-disable-next-line no-return-assign
+    return tap({}, (result) => props.forEach((prop) => (result[prop] = object[prop])));
+}

package/libs/shared-utils/five/changeMode.js

@@ -0,0 +1,15 @@
+import to from '../to';
+export default async function changeMode(five, ...changeModeParams) {
+    const [changeModeError] = await to(five.changeMode(...changeModeParams));
+    if (changeModeError)
+        throw changeModeError;
+    await new Promise((reslove, reject) => {
+        five.once('initAnimationEnded', reslove);
+        const handleModeChange = (mode) => {
+            if (mode !== changeModeParams[0])
+                reject('changeMode 被中断');
+            five.off('modeChange', handleModeChange);
+        };
+        five.on('modeChange', handleModeChange);
+    });
+}

package/libs/shared-utils/five/useFivePlugin.js

@@ -0,0 +1,8 @@
+import { unsafe__useFiveInstance } from '@realsee/five/react';
+export function useFivePlugin(name) {
+    const five = unsafe__useFiveInstance();
+    const plugin = five.plugins[name];
+    if (!plugin)
+        throw new Error(`can not find plugin "${name}"`);
+    return plugin;
+}

package/libs/shared-utils/formatRad.js

@@ -0,0 +1,10 @@
+const PI_2 = Math.PI * 2;
+/**
+ * 将弧度转成 0 - 2PI 中的值
+ * @param rad - 任意弧度值
+ * @return 0 - 2PI 的数值
+ */
+function formatRad(rad) {
+    return ((rad % PI_2) + PI_2) % PI_2;
+}
+export { formatRad };

package/libs/shared-utils/getPxmm.js

@@ -0,0 +1,20 @@
+import * as THREE from 'three';
+/**
+ * 获取「在俯视图」状态下，模型 mm 与屏幕像素 px 的对应关系，即每 mm 对应多少 px
+ * @param five five
+ */
+export default function getPxmm(five, container) {
+    const boundingCenter = new THREE.Vector3(0, 0, 0);
+    five.model.bounding.getCenter(boundingCenter);
+    const { y: boundingCenterY } = boundingCenter;
+    const { longitude } = five.getCurrentState();
+    // 因为模型可能经过旋转，所以屏幕水平方向上的 1m 对应 X 轴距离需要转换
+    const X = 1 / Math.abs(Math.cos(longitude));
+    // 模型绕 (boundingCenterX, boundingCenterY, boundingCenterZ) 旋转
+    const originPosition = new THREE.Vector3(0, boundingCenterY, 0);
+    const originPositionXUnit = new THREE.Vector3(X, boundingCenterY, 0);
+    const mouse = originPosition.project(five.camera);
+    const xUnitMouse = originPositionXUnit.project(five.camera);
+    const pxmm = Math.abs((xUnitMouse.x - mouse.x) / 1000) * (container.getBoundingClientRect().width / 2);
+    return pxmm;
+}

package/libs/shared-utils/getRandomColor.js

@@ -0,0 +1,10 @@
+export default function getRandomColor() {
+    const color = '#' +
+        '0123456789abcdef'
+            .split('')
+            .map((_v, i, a) => {
+            return i > 5 ? null : a[Math.floor(Math.random() * 16)];
+        })
+            .join('');
+    return color;
+}

package/libs/shared-utils/isNil.js

@@ -0,0 +1,14 @@
+/**
+ * 判断对象是否为`null`或`undefined`。
+ * @param
+ * @return
+ */
+export function isNil(value) {
+    return !notNil(value);
+}
+/**
+ * 判断对象不为`null`或`undefined`。
+ */
+export function notNil(value) {
+    return value !== null && value !== undefined;
+}

package/libs/shared-utils/isTruelyObject.js

@@ -0,0 +1,20 @@
+/**
+ * 检查一个值是否是狭义上的对象
+ * @param {any} value 要检查的值
+ *
+ * isTruelyObject({})
+ * // => true
+ *
+ * isObjectLike([1, 2, 3])
+ * // => false
+ *
+ * isObjectLike(Function)
+ * // => false
+ *
+ * isObjectLike(null)
+ * // => false
+ *
+ */
+export default function isTruelyObject(value) {
+    return Object.prototype.toString.call(value) === '[object Object]';
+}

package/libs/shared-utils/math/evenNumber.d.ts

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

package/libs/shared-utils/math/evenNumber.js

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

package/{shared-utils → libs/shared-utils}/math/planimetry.d.ts

@@ -44,8 +44,8 @@ export declare function getK(point1: Point, point2: Point): number;
  * @return {point}
  */
 export declare function closestPointOnLine(point: Point, linePoints: Point[]): {
-    x: number;
-    y: number;
+    x: any;
+    y: any;
 };
 /**
  * 点到线段的距离，
@@ -62,8 +62,8 @@ export declare function pointDistanceFromLine(point: Point, linePoints: Point[])
  * @return {[linePoints, linePoints]}
  */
 export declare function linesWithDistanceOfLine(distanceOfLine: number, linePoints: Point[]): {
-    x: number;
-    y: number;
+    x: any;
+    y: any;
 }[][];
 /**
  * 做线段的距离一定值的平行线段 (如果线段是弧形的)