@realsee/dnalogel 2.0.2-alpha → 2.2.0-alpha.1

package/libs/shared-utils/Object3DHelper/Helper/MoveHelper.js

@@ -0,0 +1,56 @@
+import { MoveHelperAbstract } from '.';
+import { ArrowGroup } from './Objects/ArrowGroup';
+import { AXES_THREE_COLOR } from '../Constants/color';
+export class MoveHelper extends MoveHelperAbstract {
+    constructor(originObject3D) {
+        super(originObject3D);
+        Object.defineProperty(this, "xArrow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new ArrowGroup({ direction: 'x', color: AXES_THREE_COLOR.X })
+        });
+        Object.defineProperty(this, "yArrow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new ArrowGroup({ direction: 'y', color: AXES_THREE_COLOR.Y })
+        });
+        Object.defineProperty(this, "zArrow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new ArrowGroup({ direction: 'z', color: AXES_THREE_COLOR.Z })
+        });
+        this.add(this.xArrow);
+        this.add(this.yArrow);
+        this.add(this.zArrow);
+    }
+    hide(...directions) {
+        if (directions.length === 0) {
+            this.xArrow.visible = false;
+            this.yArrow.visible = false;
+            this.zArrow.visible = false;
+        }
+        else {
+            directions.forEach((direction) => {
+                const arrow = [this.xArrow, this.yArrow, this.zArrow].find((arrow) => arrow.direction === direction);
+                arrow && (arrow.visible = false);
+            });
+        }
+    }
+    show(direction) {
+        if (!direction) {
+            this.xArrow.visible = true;
+            this.yArrow.visible = true;
+            this.zArrow.visible = true;
+        }
+        else {
+            const arrow = [this.xArrow, this.yArrow, this.zArrow].find((arrow) => arrow.direction === direction);
+            arrow && (arrow.visible = true);
+        }
+    }
+    dispose() {
+        this.remove(this.xArrow, this.yArrow, this.zArrow);
+    }
+}

package/libs/shared-utils/Object3DHelper/Helper/Objects/ArrowGroup.d.ts

@@ -0,0 +1,17 @@
+import * as THREE from 'three';
+import type { Direction } from '../../typings';
+import { DirectionGroup, DirectionMesh } from '../../utils';
+interface InstanceParameter {
+    direction: Direction;
+    color?: THREE.Color | string | number;
+}
+export declare class ArrowGroup extends DirectionGroup {
+    line: DirectionMesh<THREE.Geometry, THREE.MeshBasicMaterial>;
+    arrow: DirectionMesh<THREE.ConeGeometry, THREE.MeshBasicMaterial>;
+    private lineHeight;
+    private arrowHeight;
+    constructor(param: InstanceParameter);
+    private formatArrow;
+    private formatLine;
+}
+export {};

package/libs/shared-utils/Object3DHelper/Helper/Objects/ArrowGroup.js

@@ -0,0 +1,83 @@
+import * as THREE from 'three';
+import { DirectionGroup, DirectionMesh } from '../../utils';
+function createArrowShape(size) {
+    const shape = new THREE.Shape();
+    const width = size / 4;
+    shape.moveTo(0, size);
+    shape.lineTo(-width, size / 2);
+    shape.lineTo(-width / 2, size / 2);
+    shape.lineTo(-width / 2, 0);
+    shape.lineTo(0, 0);
+    shape.lineTo(width / 2, 0);
+    shape.lineTo(width / 2, size / 2);
+    shape.lineTo(width, size / 2);
+    shape.lineTo(0, size);
+    return shape;
+}
+export class ArrowGroup extends DirectionGroup {
+    constructor(param) {
+        var _a;
+        super(param.direction);
+        Object.defineProperty(this, "line", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "arrow", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lineHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0.4
+        });
+        Object.defineProperty(this, "arrowHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0.1
+        });
+        this.name = 'ArrowGroup';
+        const color = new THREE.Color((_a = param.color) !== null && _a !== void 0 ? _a : 0xf7692b);
+        const material = new THREE.MeshBasicMaterial({ color, depthTest: false });
+        // arrow
+        const coneGeometry = new THREE.ConeGeometry(0.04, 0.1, 32);
+        const arrow = new DirectionMesh(coneGeometry, material.clone(), param.direction);
+        arrow.name = `arrow-${param.direction}`;
+        this.arrow = arrow;
+        // line
+        const radius = 0.004;
+        const cylinderGeometry = new THREE.CylinderGeometry(radius, radius, 0.4, 32);
+        const cylinder = new DirectionMesh(cylinderGeometry, material.clone(), param.direction);
+        cylinder.name = `line-${param.direction}`;
+        this.line = cylinder;
+        this.formatArrow();
+        this.formatLine();
+        this.add(this.arrow, this.line);
+    }
+    formatArrow() {
+        this.arrow.geometry.translate(0, this.lineHeight + this.arrowHeight / 2, 0);
+        if (this.direction === 'x') {
+            this.arrow.geometry.rotateX(Math.PI / 2);
+            this.arrow.geometry.rotateY(Math.PI / 2);
+        }
+        else if (this.direction === 'z') {
+            this.arrow.geometry.rotateX(Math.PI / 2);
+        }
+    }
+    formatLine() {
+        this.line.geometry.translate(0, this.lineHeight / 2, 0);
+        if (this.direction === 'x') {
+            this.line.geometry.rotateX(Math.PI / 2);
+            this.line.geometry.rotateY(Math.PI / 2);
+        }
+        else if (this.direction === 'z') {
+            this.line.geometry.rotateX(Math.PI / 2);
+        }
+    }
+}

package/libs/shared-utils/Object3DHelper/Helper/OutlineHelper.d.ts

@@ -0,0 +1,11 @@
+import * as THREE from 'three';
+export declare class OutlineHelper extends THREE.Group {
+    box: THREE.Mesh<THREE.BufferGeometry, THREE.MeshBasicMaterial>;
+    outline: THREE.LineSegments<THREE.BufferGeometry, THREE.LineBasicMaterial>;
+    private originObject;
+    private positionAttribute;
+    constructor(obj: THREE.Object3D);
+    private update;
+    private createOutline;
+    private createBox;
+}

package/libs/shared-utils/Object3DHelper/Helper/OutlineHelper.js

@@ -0,0 +1,130 @@
+import * as THREE from 'three';
+const _vector = new THREE.Vector3();
+export class OutlineHelper extends THREE.Group {
+    constructor(obj) {
+        super();
+        Object.defineProperty(this, "box", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "outline", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "originObject", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "positionAttribute", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.originObject = obj;
+        this.positionAttribute = new THREE.BufferAttribute(new Float32Array(8 * 3), 3);
+        this.box = this.createBox();
+        this.outline = this.createOutline();
+        this.add(this.box, this.outline);
+        this.update();
+    }
+    update() {
+        /*
+                5____4
+            1/___0/|
+            | 6__|_7
+            2/___3/
+    
+            0: max.x, max.y, max.z
+            1: min.x, max.y, max.z
+            2: min.x, min.y, max.z
+            3: max.x, min.y, max.z
+            4: max.x, max.y, min.z
+            5: min.x, max.y, min.z
+            6: min.x, min.y, min.z
+            7: max.x, min.y, min.z
+            */
+        const box3 = new THREE.Box3();
+        if (this.originObject !== undefined) {
+            this.originObject.updateMatrixWorld(false);
+            this.originObject.traverse((object) => {
+                var _a;
+                if (object.name === 'shadow')
+                    return;
+                const geometry = object.geometry;
+                if (geometry !== undefined) {
+                    if ((_a = geometry === null || geometry === void 0 ? void 0 : geometry.attributes) === null || _a === void 0 ? void 0 : _a.position) {
+                        // BufferGeometry
+                        const position = geometry.attributes.position;
+                        for (let i = 0, l = position.count; i < l; i++) {
+                            _vector.fromBufferAttribute(position, i).applyMatrix4(object.matrixWorld);
+                            box3.expandByPoint(_vector);
+                        }
+                    }
+                    else {
+                        // Geometry
+                        geometry.vertices.forEach((v) => {
+                            const point = v.clone().applyMatrix4(object.matrixWorld);
+                            box3.expandByPoint(point);
+                        });
+                    }
+                }
+            });
+        }
+        if (box3.isEmpty())
+            return;
+        const objectPosition = this.originObject.position;
+        box3.translate(objectPosition.clone().negate());
+        const min = box3.min;
+        const max = box3.max;
+        const position = this.positionAttribute;
+        position.setXYZ(0, max.x, max.y, max.z);
+        position.setXYZ(1, min.x, max.y, max.z);
+        position.setXYZ(2, min.x, min.y, max.z);
+        position.setXYZ(3, max.x, min.y, max.z);
+        position.setXYZ(4, max.x, max.y, min.z);
+        position.setXYZ(5, min.x, max.y, min.z);
+        position.setXYZ(6, min.x, min.y, min.z);
+        position.setXYZ(7, max.x, min.y, min.z);
+        position.needsUpdate = true;
+    }
+    createOutline() {
+        const lineIndices = new Uint16Array([0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7]);
+        const lineGeometry = new THREE.BufferGeometry();
+        lineGeometry.setIndex(new THREE.BufferAttribute(lineIndices, 1));
+        lineGeometry.setAttribute('position', this.positionAttribute);
+        const lineMaterial = new THREE.LineBasicMaterial({
+            color: 0x00fcff,
+            linewidth: 1,
+            opacity: 1,
+            depthTest: false,
+            transparent: true,
+            toneMapped: false,
+        });
+        const lineSegments = new THREE.LineSegments(lineGeometry, lineMaterial);
+        lineSegments.matrixAutoUpdate = false;
+        return lineSegments;
+    }
+    createBox() {
+        const boxIndices = new Uint16Array([
+            0, 1, 2, 0, 2, 3, 0, 3, 7, 0, 7, 4, 0, 4, 5, 0, 5, 1, 6, 1, 5, 6, 2, 1, 6, 5, 4, 6, 4, 7, 6, 3, 2, 6, 7, 3,
+        ]);
+        const boxGeometry = new THREE.BufferGeometry();
+        boxGeometry.setIndex(new THREE.BufferAttribute(boxIndices, 1));
+        boxGeometry.setAttribute('position', this.positionAttribute);
+        const boxMaterial = new THREE.MeshBasicMaterial({
+            color: 0x00fcff,
+            opacity: 0.1,
+            depthTest: false,
+            transparent: true,
+        });
+        const box = new THREE.Mesh(boxGeometry, boxMaterial);
+        return box;
+    }
+}

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.d.ts

@@ -0,0 +1,39 @@
+import * as THREE from 'three';
+import { RectangleScaleHelperAbstract } from '.';
+import type { Create3DElementReturnType } from '../../../CSS3DRenderPlugin';
+import type { Vector3 } from 'three';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { CSS3DObjectPlus } from '../../../CSS3DRenderPlugin/utils/CSS3DObjectPlus';
+declare type NonVoid<T> = T extends void ? never : T;
+declare type OriginObjectType = CSS3DObject | THREE.Object3D;
+export declare class RectangleScaleHelper<T extends OriginObjectType = OriginObjectType> extends RectangleScaleHelperAbstract<T, HTMLElement> {
+    points: RectangleScaleHelperAbstract<THREE.Object3D, HTMLElement>['points'];
+    cornerPositions: Vector3[];
+    css3DInstance?: NonVoid<Create3DElementReturnType>;
+    get helperObject(): CSS3DObjectPlus<HTMLElement>;
+    private css3DRenderer;
+    private plane?;
+    private camera;
+    private scene;
+    private container;
+    private enabled;
+    constructor(originObject3D: T, container: Element, camera: THREE.Camera, scene: THREE.Scene);
+    updatePosition(): void;
+    setPosition(position: Vector3): void;
+    updateMatrix4(matrix: THREE.Matrix4): void;
+    setHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
+        origin?: Vector3;
+        helperOrigin?: Vector3;
+    }): void;
+    updatePoints(): void;
+    updateQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
+    enable(): void;
+    disable(): void;
+    show(): void;
+    hide(): void;
+    dispose(): void;
+    private initRectangleScaleHelper;
+    private getCornerPositions;
+    private calculatePointPosition;
+}
+export {};

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.js

@@ -0,0 +1,229 @@
+import { CSS3DRender } from '../../../CSS3DRenderPlugin/CSS3DRender';
+import * as THREE from 'three';
+import { RectangleScaleHelperAbstract } from '.';
+import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import { rectangleScaleDom } from './HTML/rectangleScaleDom';
+import { CSS3DObjectPlus } from '../../../CSS3DRenderPlugin/utils/CSS3DObjectPlus';
+export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
+    constructor(originObject3D, container, camera, scene) {
+        super(originObject3D);
+        Object.defineProperty(this, "points", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "cornerPositions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "css3DInstance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "css3DRenderer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new CSS3DRender()
+        });
+        Object.defineProperty(this, "plane", {
+            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, "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, "enabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        this.camera = camera;
+        this.scene = scene;
+        this.container = container;
+        this.initRectangleScaleHelper();
+    }
+    get helperObject() {
+        var _a;
+        if (!((_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject))
+            throw new Error('css3DInstance is not initialized');
+        return this.css3DInstance.css3DObject;
+    }
+    updatePosition() {
+        var _a, _b;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(this.originObject3D.position);
+        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(this.originObject3D.position);
+    }
+    setPosition(position) {
+        var _a, _b;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(position);
+        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(position);
+    }
+    updateMatrix4(matrix) {
+        var _a, _b;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.applyMatrix4(matrix);
+        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.applyMatrix4(matrix);
+        this.cornerPositions.forEach((cornerPosition) => cornerPosition.applyMatrix4(matrix));
+    }
+    setHelperScaleMatrix4(matrix, params) {
+        var _a, _b;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.scale.applyMatrix4(matrix);
+        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix);
+        const { origin, helperOrigin } = params !== null && params !== void 0 ? params : {};
+        if (!helperOrigin)
+            return;
+        this.cornerPositions.forEach((position) => {
+            position.subVectors(position, helperOrigin).applyMatrix4(matrix).add(helperOrigin);
+        });
+        this.updatePoints();
+    }
+    updatePoints() {
+        const position8 = this.calculatePointPosition(this.cornerPositions);
+        this.points.forEach((point, index) => {
+            point.position.copy(position8[index]);
+        });
+    }
+    updateQuaternion(quaternion, origin) {
+        var _a;
+        const css3DObject = (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject;
+        if (css3DObject) {
+            const v = new THREE.Vector3().subVectors(css3DObject.position, origin).applyQuaternion(quaternion).add(origin);
+            css3DObject.position.copy(v);
+            css3DObject.applyQuaternion(quaternion);
+        }
+        if (this.plane) {
+            const v = new THREE.Vector3().subVectors(this.plane.position, origin).applyQuaternion(quaternion).add(origin);
+            this.plane.position.copy(v);
+            this.plane.applyQuaternion(quaternion);
+        }
+        this.cornerPositions.forEach((cornerPosition) => {
+            const v = new THREE.Vector3().subVectors(cornerPosition, origin).applyQuaternion(quaternion).add(origin);
+            cornerPosition.copy(v);
+        });
+    }
+    enable() {
+        var _a;
+        if (this.enabled)
+            return;
+        this.enabled = true;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.enable();
+        if (this.plane)
+            this.scene.add(this.plane);
+    }
+    disable() {
+        var _a;
+        if (!this.enabled)
+            return;
+        this.enabled = false;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.disable();
+        if (this.plane)
+            this.scene.remove(this.plane);
+    }
+    show() {
+        var _a;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.show();
+        if (this.plane)
+            this.plane.visible = true;
+    }
+    hide() {
+        var _a;
+        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.hide();
+        if (this.plane)
+            this.plane.visible = false;
+    }
+    dispose() {
+        this.disable();
+        this.css3DRenderer.dispose();
+    }
+    initRectangleScaleHelper() {
+        var _a;
+        const cornerPositions = this.getCornerPositions();
+        if (!cornerPositions)
+            return;
+        this.cornerPositions = cornerPositions;
+        const css3DInstance = this.css3DRenderer.create3DElement(this.camera, cornerPositions, { ratio: 0.003 }); // ratio 暂时不用和 originObject3D 保持同步，因为本来就是不同的东西
+        if (!css3DInstance)
+            return;
+        this.css3DInstance = css3DInstance;
+        css3DInstance.appendToElement(this.container);
+        // create UI
+        const css3DObjectElement = css3DInstance.css3DObject.container;
+        const { container: dom, squares } = rectangleScaleDom();
+        this.points = squares.map((square, index) => ({
+            direction: square.direction,
+            point: square.element,
+            position: this.calculatePointPosition(cornerPositions)[index],
+        }));
+        // append html
+        // css3DObjectElement.appendChild(backgroundDom())
+        css3DObjectElement.insertBefore(dom, (_a = css3DObjectElement.children[0]) !== null && _a !== void 0 ? _a : null);
+        // ============================ 分割线 ============================
+        const geometry = new THREE.PlaneGeometry(css3DInstance.css3DObject.width, css3DInstance.css3DObject.height);
+        const material = new THREE.MeshBasicMaterial({
+            color: 0x000000,
+            opacity: 0.15,
+            transparent: true,
+            side: THREE.DoubleSide,
+        });
+        const plane = new THREE.Mesh(geometry, material);
+        this.scene.add(plane);
+        this.plane = plane;
+        this.updatePosition();
+    }
+    getCornerPositions() {
+        const { originObject3D } = this;
+        if (originObject3D instanceof CSS3DObject) {
+            if (originObject3D instanceof CSS3DObjectPlus) {
+                return originObject3D.cornerPoints;
+            }
+            else {
+                console.error('暂时只支持 CSS3DRenderPlugin 生成的物体');
+            }
+        }
+        else {
+            console.error('当前物体暂时不支持 ScaleHelper');
+        }
+    }
+    calculatePointPosition(cornerPositions) {
+        /**
+         *  6----5----4
+         *  |         |
+         *  7         3
+         *  |         |
+         *  0----1----2
+         */
+        return [
+            cornerPositions[0].clone(),
+            cornerPositions[0].clone().add(cornerPositions[1]).divideScalar(2),
+            cornerPositions[1].clone(),
+            cornerPositions[1].clone().add(cornerPositions[2]).divideScalar(2),
+            cornerPositions[2].clone(),
+            cornerPositions[2].clone().add(cornerPositions[3]).divideScalar(2),
+            cornerPositions[3].clone(),
+            cornerPositions[3].clone().add(cornerPositions[0]).divideScalar(2),
+        ];
+    }
+}

package/libs/shared-utils/Object3DHelper/Helper/RotateHelper.d.ts

@@ -0,0 +1,54 @@
+import * as THREE from 'three';
+import type { Object3D } from 'three';
+import { RotateHelperAbstract } from '../Base/BaseHelper';
+import type { Color, Direction } from '../typings';
+import { tipsDom } from './HTML/tipsDom';
+export declare class RotateHelper extends RotateHelperAbstract {
+    yzCircle: Circle;
+    xzCircle: Circle;
+    xyCircle: Circle;
+    xRingHelper: AxesDashedRing;
+    yRingHelper: AxesDashedRing;
+    zRingHelper: AxesDashedRing;
+    xAngleHelper: Sector;
+    yAngleHelper: Sector;
+    zAngleHelper: Sector;
+    angleTips?: ReturnType<typeof tipsDom>;
+    private container?;
+    constructor(originObject3D: Object3D, angleTipsParams?: {
+        container: HTMLElement;
+    });
+    updateAngleHelperQuaternion(): void;
+    updateQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
+    hide(): void;
+    show(direction?: Direction): void;
+    dispose(): void;
+    private filterRingHelper;
+    private filterAngleHelper;
+}
+declare class Circle extends THREE.Mesh {
+    direction: Direction;
+    material: THREE.MeshBasicMaterial;
+    gapAngle: number;
+    geometry: THREE.RingGeometry;
+    constructor(options: {
+        direction: Direction;
+        color?: Color;
+    });
+}
+declare class AxesDashedRing extends THREE.Group {
+    direction: Readonly<Direction>;
+    constructor(options: {
+        direction: Direction;
+    });
+}
+declare class Sector extends THREE.Mesh {
+    direction: Direction;
+    material: THREE.MeshBasicMaterial;
+    baseAxes: THREE.Vector3;
+    constructor(options: {
+        direction: Direction;
+        color?: Color;
+    });
+}
+export {};