@realsee/dnalogel 2.0.1 → 2.2.0-alpha.1

package/libs/PanoTagPlugin/utils/throttle.js

@@ -0,0 +1,17 @@
+/**
+ * 创建一个防抖动函数，该函数在高频调用时会每隔 wait 毫秒后调用 func 方法
+ * `throttle` 会在第一次调用时立刻调用一次
+ * @param func - 要防抖动的函数
+ * @param wait - 需要延迟的毫秒数
+ */
+export function throttle(func, wait = 200) {
+    let last;
+    return function (...args) {
+        if (last)
+            return;
+        func.apply(this, args);
+        last = setTimeout(function () {
+            last = null;
+        }, wait);
+    };
+}

package/libs/shared-utils/Object3DHelper/Base/BaseController.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from 'three';
+import { Subscribe } from '../../Subscribe';
+import type { HelperEventMap } from '../typings';
+import type { BaseHelper } from './BaseHelper';
+import DomEvents from '../utils/threex/domevents';
+export declare abstract class BaseController<T extends BaseHelper = BaseHelper, K extends THREE.Object3D = THREE.Object3D> {
+    hooks: Subscribe<HelperEventMap>;
+    helperObject3D: T;
+    protected originObject3D: K;
+    protected camera: THREE.Camera;
+    protected model: THREE.Object3D;
+    protected scene: THREE.Scene;
+    protected container: HTMLElement;
+    protected domEvents: DomEvents;
+    protected isDragging: boolean;
+    protected needsRender: () => void;
+    protected enabled: boolean;
+    constructor(camera: THREE.Camera, model: THREE.Object3D, originObject3D: K, helperObject3D: T, container: HTMLElement, scene: THREE.Scene, needsRender?: () => void);
+    enable(): void;
+    disable(): void;
+    show(): void;
+    hide(): void;
+    dispose(): void;
+    updateHelperPosition(): void;
+    setHelperPosition(position: THREE.Vector3): void;
+    setHelperMatrix4(matrix4: THREE.Matrix4, origin?: THREE.Vector3): void;
+    setHelperQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
+    setHelperScaleMatrix4(matrix4: THREE.Matrix4, params?: {
+        origin?: THREE.Vector3;
+        helperOrigin?: THREE.Vector3;
+    }): void;
+    onWantsTapGesture: (raycaster: THREE.Raycaster) => false | void;
+    onWantsGesture(type: 'press' | 'pan' | string, pointers: {
+        x: number;
+        y: number;
+    }[], final: boolean): false | void;
+    protected hoverListener(object3D: THREE.Object3D | undefined | THREE.Group | (THREE.Object3D | undefined | THREE.Group)[], hoverColor?: THREE.Color | string | number, hoverOpacity?: number): () => void;
+    private getIntersectObject;
+}

package/libs/shared-utils/Object3DHelper/Base/BaseController.js

@@ -0,0 +1,216 @@
+import * as THREE from 'three';
+import { Subscribe } from '../../Subscribe';
+import DomEvents from '../utils/threex/domevents';
+import { notNil } from '../../isNil';
+export class BaseController {
+    constructor(camera, model, originObject3D, helperObject3D, container, scene, needsRender) {
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
+        Object.defineProperty(this, "helperObject3D", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "originObject3D", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "camera", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "scene", {
+            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, "domEvents", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "isDragging", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "needsRender", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "enabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "onWantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (raycaster) => {
+                const selectedObject = this.getIntersectObject(raycaster);
+                if (selectedObject)
+                    return false;
+                return;
+            }
+        });
+        this.camera = camera;
+        this.model = model;
+        this.originObject3D = originObject3D;
+        this.helperObject3D = helperObject3D;
+        this.container = container;
+        this.scene = scene;
+        this.domEvents = new DomEvents(camera, container);
+        this.needsRender = needsRender !== null && needsRender !== void 0 ? needsRender : (() => { });
+        this.updateHelperPosition();
+        this.enable();
+    }
+    enable() {
+        if (this.enabled)
+            return;
+        this.enabled = true;
+        this.scene.add(this.helperObject3D);
+        this.needsRender();
+    }
+    disable() {
+        if (!this.enabled)
+            return;
+        this.enabled = false;
+        this.scene.remove(this.helperObject3D);
+        this.needsRender();
+    }
+    show() {
+        this.helperObject3D.visible = true;
+        this.needsRender();
+    }
+    hide() {
+        this.helperObject3D.visible = false;
+        this.needsRender();
+    }
+    dispose() {
+        this.scene.remove(this.helperObject3D);
+        this.helperObject3D.dispose();
+    }
+    updateHelperPosition() {
+        this.helperObject3D.updatePosition();
+    }
+    setHelperPosition(position) {
+        this.helperObject3D.setPosition(position);
+    }
+    setHelperMatrix4(matrix4, origin) {
+        this.helperObject3D.updateMatrix4(matrix4, origin);
+    }
+    setHelperQuaternion(quaternion, origin) {
+        this.helperObject3D.updateQuaternion(quaternion, origin);
+    }
+    setHelperScaleMatrix4(matrix4, params) {
+        this.helperObject3D.setHelperScaleMatrix4(matrix4, params);
+    }
+    onWantsGesture(type, pointers, final) {
+        if (this.isDragging)
+            return false;
+    }
+    hoverListener(object3D, hoverColor = 0xffffff, hoverOpacity = 1) {
+        const objects = (Array.isArray(object3D) ? object3D : [object3D]).filter(notNil);
+        const disposers = [];
+        for (const object of objects) {
+            if (object instanceof THREE.Mesh || object instanceof THREE.Group) {
+                const meshes = object instanceof THREE.Group ? object.children.filter((child) => child instanceof THREE.Mesh) : [object];
+                meshes.forEach((mesh) => {
+                    ;
+                    mesh['__originalColor__'] = mesh.material.color.clone();
+                    mesh['__originalOpacity__'] = mesh.material.opacity;
+                });
+                const setHoverColor = () => {
+                    meshes.forEach((mesh) => {
+                        mesh.material.color.set(hoverColor);
+                        mesh.material.opacity = hoverOpacity;
+                    });
+                    this.needsRender();
+                };
+                const resetColor = () => {
+                    meshes.forEach((mesh) => {
+                        mesh.material.color.copy(mesh['__originalColor__']);
+                        mesh.material.opacity = mesh['__originalOpacity__'];
+                    });
+                    this.needsRender();
+                };
+                const handleMouseover = () => {
+                    if (this.isDragging)
+                        return;
+                    setHoverColor();
+                };
+                const handleMouseout = () => {
+                    if (this.isDragging)
+                        return;
+                    resetColor();
+                };
+                for (const mesh of meshes) {
+                    this.domEvents.addEventListener(mesh, 'mouseover', handleMouseover);
+                    this.domEvents.addEventListener(mesh, 'mouseout', handleMouseout);
+                    this.hooks.on('moveStart', setHoverColor);
+                    this.hooks.on('moveEnd', resetColor);
+                    this.hooks.on('rotateEnd', resetColor);
+                    disposers.push(() => {
+                        this.domEvents.removeEventListener(mesh, 'mouseover', handleMouseover);
+                        this.domEvents.removeEventListener(mesh, 'mouseout', handleMouseout);
+                        this.hooks.off('moveStart', setHoverColor);
+                        this.hooks.off('moveEnd', resetColor);
+                        this.hooks.off('rotateEnd', resetColor);
+                    });
+                }
+            }
+        }
+        return () => disposers.forEach((disposer) => disposer === null || disposer === void 0 ? void 0 : disposer());
+    }
+    getIntersectObject(raycaster) {
+        const cameraPosition = this.camera.position;
+        const object = this.helperObject3D;
+        // 如果当前没有模型，则不存在模型被点击
+        if (!object)
+            return undefined;
+        // 如果存在模型，需要判断模型与射线的交点和 model 与射线的交点的远近
+        let objectIntersection;
+        const intersection = raycaster.intersectObject(object, true)[0];
+        if (!intersection)
+            return undefined;
+        objectIntersection = intersection;
+        objectIntersection.object = object;
+        if (!objectIntersection)
+            return undefined;
+        // 如果 five model intersection 更近，返回 undefined
+        if (this.model['intersectRaycaster']) {
+            const modelIntersection = this.model.intersectRaycaster(raycaster)[0];
+            if (modelIntersection && modelIntersection.point.distanceTo(cameraPosition) < objectIntersection.point.distanceTo(cameraPosition))
+                return undefined;
+        }
+        return objectIntersection.object;
+    }
+}

package/libs/shared-utils/Object3DHelper/Base/BaseHelper.d.ts

@@ -0,0 +1,89 @@
+import type { Create3DElementReturnType } from '../../../CSS3DRenderPlugin';
+import type * as THREE from 'three';
+import { Mesh, Object3D, Vector3 } from 'three';
+import type { Direction, Direction4 } from '../typings';
+import type { tipsDom } from '../Helper/HTML/tipsDom';
+export declare abstract class BaseHelper<OriginObject3D extends Object3D = Object3D> extends Object3D {
+    protected originObject3D: OriginObject3D;
+    get helperObject(): Object3D;
+    constructor(originObject3D: OriginObject3D);
+    updatePosition(): void;
+    setPosition(position: Vector3): void;
+    updateMatrix4(matrix: THREE.Matrix4, origin?: THREE.Vector3): void;
+    setHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
+        origin?: THREE.Vector3;
+        helperOrigin?: THREE.Vector3;
+    }): void;
+    updateQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
+    abstract hide(...args: any[]): void;
+    abstract show(...args: any[]): void;
+    abstract dispose(): void;
+}
+export declare abstract class MoveHelperAbstract<OriginObject3D extends Object3D = Object3D> extends BaseHelper<OriginObject3D> {
+    abstract xArrow?: Object3D & {
+        arrow: Object3D;
+        line?: Object3D;
+        direction: Direction;
+    };
+    abstract yArrow?: Object3D & {
+        arrow: Object3D;
+        line?: Object3D;
+        direction: Direction;
+    };
+    abstract zArrow?: Object3D & {
+        arrow: Object3D;
+        line?: Object3D;
+        direction: Direction;
+    };
+    abstract hide(...directions: Direction[]): void;
+    abstract show(...directions: Direction[]): void;
+}
+export declare abstract class RotateHelperAbstract<OriginObject3D extends Object3D = Object3D> extends BaseHelper<OriginObject3D> {
+    abstract xyCircle: Mesh & {
+        direction: Direction;
+    };
+    abstract xzCircle: Mesh & {
+        direction: Direction;
+    };
+    abstract yzCircle: Mesh & {
+        direction: Direction;
+    };
+    abstract xRingHelper: Object3D;
+    abstract yRingHelper: Object3D;
+    abstract zRingHelper: Object3D;
+    abstract xAngleHelper: Object3D & {
+        baseAxes: Vector3;
+        direction: Direction;
+    };
+    abstract yAngleHelper: Object3D & {
+        baseAxes: Vector3;
+        direction: Direction;
+    };
+    abstract zAngleHelper: Object3D & {
+        baseAxes: Vector3;
+        direction: Direction;
+    };
+    abstract angleTips?: ReturnType<typeof tipsDom>;
+    abstract hide(): void;
+    abstract show(direction?: Direction): void;
+    abstract updateAngleHelperQuaternion(): void;
+}
+export declare abstract class ScaleHelperAbstract<OriginObject3D extends Object3D = Object3D> extends BaseHelper<OriginObject3D> {
+}
+declare type NonVoid<T> = T extends void ? never : T;
+export declare abstract class RectangleScaleHelperAbstract<OriginObject3D extends Object3D, PointType extends Object3D | HTMLElement> extends ScaleHelperAbstract<OriginObject3D> {
+    abstract points: PointType extends Object3D ? {
+        point: PointType;
+        direction: Direction4;
+    }[] : {
+        point: PointType;
+        direction: Direction4;
+        position: Vector3;
+    }[];
+    abstract cornerPositions: Vector3[];
+    abstract css3DInstance?: NonVoid<Create3DElementReturnType>;
+    abstract updatePoints(): void;
+    abstract enable(): void;
+    abstract disable(): void;
+}
+export {};

package/libs/shared-utils/Object3DHelper/Base/BaseHelper.js

@@ -0,0 +1,39 @@
+import { Object3D } from 'three';
+export class BaseHelper extends Object3D {
+    constructor(originObject3D) {
+        super();
+        Object.defineProperty(this, "originObject3D", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.originObject3D = originObject3D;
+    }
+    get helperObject() {
+        return this;
+    }
+    updatePosition() {
+        this.position.copy(this.originObject3D.position);
+    }
+    setPosition(position) {
+        this.position.copy(position);
+    }
+    updateMatrix4(matrix, origin) {
+        this.applyMatrix4(matrix);
+    }
+    setHelperScaleMatrix4(matrix, params) {
+        this.scale.applyMatrix4(matrix);
+    }
+    updateQuaternion(quaternion, origin) {
+        this.applyQuaternion(quaternion);
+    }
+}
+export class MoveHelperAbstract extends BaseHelper {
+}
+export class RotateHelperAbstract extends BaseHelper {
+}
+export class ScaleHelperAbstract extends BaseHelper {
+}
+export class RectangleScaleHelperAbstract extends ScaleHelperAbstract {
+}

package/libs/shared-utils/Object3DHelper/Constants/color.d.ts

@@ -0,0 +1,12 @@
+import * as THREE from 'three';
+declare const AXES_COLOR: {
+    X: number;
+    Y: number;
+    Z: number;
+};
+declare class AXES_THREE_COLOR {
+    static get X(): THREE.Color;
+    static get Y(): THREE.Color;
+    static get Z(): THREE.Color;
+}
+export { AXES_COLOR, AXES_THREE_COLOR };

package/libs/shared-utils/Object3DHelper/Constants/color.js

@@ -0,0 +1,23 @@
+import * as THREE from 'three';
+const AXES_COLOR = {
+    X: 0xee5252,
+    Y: 0x48b74f,
+    Z: 0x4082ff,
+};
+// const AXES_THREE_COLOR = {
+//   X: new THREE.Color(AXES_COLOR.X).convertSRGBToLinear(),
+//   Y: new THREE.Color(AXES_COLOR.Y).convertSRGBToLinear(),
+//   Z: new THREE.Color(AXES_COLOR.Z).convertSRGBToLinear(),
+// }
+class AXES_THREE_COLOR {
+    static get X() {
+        return new THREE.Color(AXES_COLOR.X).convertSRGBToLinear().clone();
+    }
+    static get Y() {
+        return new THREE.Color(AXES_COLOR.Y).convertSRGBToLinear().clone();
+    }
+    static get Z() {
+        return new THREE.Color(AXES_COLOR.Z).convertSRGBToLinear().clone();
+    }
+}
+export { AXES_COLOR, AXES_THREE_COLOR };

package/libs/shared-utils/Object3DHelper/Controller/CSS3DScaleController.d.ts

@@ -0,0 +1,6 @@
+import type { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { RectangleScaleController } from './RectangleScaleController';
+export declare class CSS3DScaleController extends RectangleScaleController<CSS3DObject, HTMLElement> {
+    constructor(...params: ConstructorParameters<typeof RectangleScaleController<CSS3DObject, HTMLElement>>);
+    private addHTMLEventListener;
+}

package/libs/shared-utils/Object3DHelper/Controller/CSS3DScaleController.js

@@ -0,0 +1,21 @@
+import { RectangleScaleController } from './RectangleScaleController';
+import '../utils/getPoint';
+export class CSS3DScaleController extends RectangleScaleController {
+    constructor(...params) {
+        super(...params);
+        this.addHTMLEventListener();
+    }
+    addHTMLEventListener() {
+        this.helperObject3D.points.forEach((startPoint) => {
+            if (!startPoint)
+                return;
+            const element = startPoint.point;
+            const dragStart = (event) => this.dragStart(event, startPoint);
+            const dragging = this.dragging.bind(this);
+            const dragEnd = this.dragEnd.bind(this);
+            element.addEventListener('dragstart', dragStart);
+            element.addEventListener('drag', dragging);
+            element.addEventListener('dragend', dragEnd);
+        });
+    }
+}

package/libs/shared-utils/Object3DHelper/Controller/MoveController.d.ts

@@ -0,0 +1,13 @@
+import { BaseController } from '../Base/BaseController';
+import type { MoveHelperAbstract } from '../Helper';
+export declare class MoveController<T extends MoveHelperAbstract = MoveHelperAbstract> extends BaseController<T> {
+    private startInfo?;
+    constructor(...params: ConstructorParameters<typeof BaseController<T>>);
+    /**
+     * @description: 拖动开始，找出拖的Direction
+     */
+    private dragStart;
+    private dragging;
+    private move;
+    private dragEnd;
+}

package/libs/shared-utils/Object3DHelper/Controller/MoveController.js

@@ -0,0 +1,111 @@
+import { BaseController } from '../Base/BaseController';
+import * as THREE from 'three';
+import { getMouseRaycaster } from '../utils';
+import '../utils/getPoint';
+export class MoveController extends BaseController {
+    constructor(...params) {
+        super(...params);
+        Object.defineProperty(this, "startInfo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // add hover listener
+        const helper = this.helperObject3D;
+        this.hoverListener([helper.xArrow, helper.yArrow, helper.zArrow]);
+        const dragStart = this.dragStart.bind(this);
+        const dragging = this.dragging.bind(this);
+        const dragEnd = this.dragEnd.bind(this);
+        this.domEvents.addEventListener(this.helperObject3D, 'mousedown', dragStart);
+        document.addEventListener('mousemove', dragging);
+        document.addEventListener('mouseup', dragEnd);
+    }
+    /**
+     * @description: 拖动开始，找出拖的Direction
+     */
+    dragStart(params) {
+        if (this.isDragging)
+            return;
+        const intersect = params === null || params === void 0 ? void 0 : params.intersect;
+        if (!intersect)
+            return this.dragEnd();
+        const draggingDirection = (intersect === null || intersect === void 0 ? void 0 : intersect.object).direction;
+        if (!draggingDirection)
+            return this.dragEnd();
+        const directionX = new THREE.Vector3(1, 0, 0).applyQuaternion(this.helperObject3D.quaternion);
+        const directionY = new THREE.Vector3(0, 1, 0).applyQuaternion(this.helperObject3D.quaternion);
+        const directionZ = new THREE.Vector3(0, 0, 1).applyQuaternion(this.helperObject3D.quaternion);
+        const directionVector = (() => {
+            switch (draggingDirection) {
+                case 'x':
+                    return directionX;
+                case 'y':
+                    return directionY;
+                case 'z':
+                    return directionZ;
+            }
+        })();
+        const planeNormal = (() => {
+            switch (draggingDirection) {
+                case 'x':
+                    return directionZ;
+                case 'y':
+                    return directionZ;
+                case 'z':
+                    return directionX;
+            }
+        })();
+        const startIntersect = intersect.point.clone();
+        const plane = new THREE.Plane();
+        plane.setFromNormalAndCoplanarPoint(planeNormal, startIntersect);
+        this.startInfo = { startVectorProject: startIntersect.clone().projectOnVector(directionVector), directionVector, plane };
+        // 隐藏其他箭头
+        this.helperObject3D.hide(...['x', 'y', 'z'].filter((direction) => direction !== draggingDirection));
+        this.hooks.emit('moveStart');
+        this.isDragging = true;
+        console.log('%c MoveController dragStart', 'color: #e5af2e');
+    }
+    dragging(point) {
+        if (!this.isDragging)
+            return;
+        if (!this.startInfo)
+            return;
+        const ray = getMouseRaycaster(this.camera, point, this.container);
+        if (!ray)
+            return this.dragEnd();
+        console.log(`%c RotateController dragging`, 'color: #49de1b');
+        this.move(ray);
+        return false;
+    }
+    move(raycaster) {
+        if (!this.startInfo)
+            return this.dragEnd();
+        const { plane, directionVector, startVectorProject } = this.startInfo;
+        const object = this.originObject3D;
+        const planeIntersection = raycaster.ray.intersectPlane(plane, new THREE.Vector3());
+        if (!planeIntersection)
+            return;
+        const currentVectorProject = planeIntersection.clone().projectOnVector(directionVector);
+        const offsetVector = currentVectorProject.clone().sub(startVectorProject);
+        // 移动transform
+        const transform = new THREE.Matrix4();
+        transform.setPosition(offsetVector);
+        object.applyMatrix4(transform);
+        this.helperObject3D.applyMatrix4(transform);
+        startVectorProject.copy(currentVectorProject);
+        this.hooks.emit('positionUpdate', { matrix4: transform });
+    }
+    dragEnd() {
+        if (!this.isDragging)
+            return;
+        console.log('%c MoveController dragEnd', 'color: #e94e4e');
+        // 拖动结束，重置currentDraggingDirection
+        this.startInfo = undefined;
+        this.isDragging = false;
+        // 显示所有箭头
+        this.helperObject3D.show();
+        this.hooks.emit('moveEnd');
+        return;
+    }
+}

package/libs/shared-utils/Object3DHelper/Controller/RectangleScaleController.d.ts

@@ -0,0 +1,37 @@
+import { BaseController } from '../Base/BaseController';
+import type { RectangleScaleHelperAbstract } from '../Helper';
+import * as THREE from 'three';
+import type { Direction4 } from '../typings';
+import { Vector3 } from 'three';
+interface StartInfo {
+    startPoint: {
+        position: Vector3;
+        direction: Direction4;
+    };
+    nsMoveIsNegative?: boolean | null;
+    ewMoveIsNegative?: boolean | null;
+    plane: THREE.Plane;
+}
+export declare abstract class RectangleScaleController<OriginObject3D extends THREE.Object3D, PointType extends THREE.Object3D | HTMLElement> extends BaseController<RectangleScaleHelperAbstract<OriginObject3D, PointType>> {
+    protected startInfo?: StartInfo;
+    constructor(...params: ConstructorParameters<typeof BaseController<RectangleScaleHelperAbstract<OriginObject3D, PointType>>>);
+    enable(): void;
+    disable(): void;
+    show(): void;
+    hide(): void;
+    protected getDragPlane(): THREE.Plane;
+    protected dragStart(mousePoint: {
+        x: number;
+        y: number;
+    }, point: {
+        position: THREE.Vector3;
+        direction: Direction4;
+    }): void;
+    protected dragging(point: {
+        x: number;
+        y: number;
+    }): false | void;
+    protected scale(raycaster: THREE.Raycaster): void;
+    protected dragEnd(): void;
+}
+export {};