@realsee/dnalogel 2.1.0-alpha.13 → 2.1.0-alpha.15

package/libs/src/shared-utils/Object3DHelper/Helper/HTML/rectangleScaleDom.js

@@ -0,0 +1,101 @@
+import { createElement } from './utils/createElement';
+export function rectangleScaleDom() {
+    const container = createElement({
+        width: '100%',
+        height: '100%',
+        left: '0',
+        top: '0',
+        position: 'absolute',
+        pointerEvents: 'none',
+    });
+    const wrapper = createElement({
+        boxSizing: 'border-box',
+        width: '100%',
+        height: '100%',
+        left: '0',
+        top: '0',
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    });
+    const border = createElement({
+        boxSizing: 'border-box',
+        width: '100%',
+        height: '100%',
+        left: '0',
+        top: '0',
+        position: 'absolute',
+        border: '1px solid rgba(255,255,255,0.4)',
+    });
+    // DELETE
+    // const text = createElement({ fontSize: '50px' })
+    // text.innerText = '这是正面'
+    // wrapper.appendChild(text)
+    container.appendChild(wrapper);
+    wrapper.appendChild(border);
+    /**
+     *  6----5----4
+     *  |         |
+     *  7         3
+     *  |         |
+     *  0----1----2
+     */
+    const offset = '-4px';
+    const square0 = { direction: 'nesw', element: squareDom({ cursor: 'nesw-resize', left: offset, bottom: offset }) };
+    const square1 = { direction: 'ns', element: squareDom({ cursor: 'ns-resize', bottom: offset }) };
+    const square2 = { direction: 'nwse', element: squareDom({ cursor: 'nwse-resize', right: offset, bottom: offset }) };
+    const square3 = { direction: 'ew', element: squareDom({ cursor: 'ew-resize', right: offset }) };
+    const square4 = { direction: 'nesw', element: squareDom({ cursor: 'nesw-resize', right: offset, top: offset }) };
+    const square5 = { direction: 'ns', element: squareDom({ cursor: 'ns-resize', top: offset }) };
+    const square6 = { direction: 'nwse', element: squareDom({ cursor: 'nwse-resize', left: offset, top: offset }) };
+    const square7 = { direction: 'ew', element: squareDom({ cursor: 'ew-resize', left: offset }) };
+    // 0,2,4,6 四个角放后面，当点击区域可能出现互相遮挡的情况时，优先保障四个角的点
+    new Array(square1, square3, square5, square7, square0, square2, square4, square6).forEach((square) => wrapper.appendChild(square.element));
+    const squares = [
+        square0,
+        square1,
+        square2,
+        square3,
+        square4,
+        square5,
+        square6,
+        square7,
+    ];
+    return { container, squares };
+}
+export function backgroundDom() {
+    return createElement({
+        width: '100%',
+        height: '100%',
+        left: '0',
+        top: '0',
+        position: 'absolute',
+        background: 'rgba(0, 0, 0, 0.15)',
+        pointerEvents: 'none',
+    });
+}
+function squareDom(style) {
+    const square = createElement(Object.assign({ background: '#FFFFFF', width: '9px', height: '9px', position: 'absolute', pointerEvents: 'none' }, style));
+    const squareDraggingWrapper = createElement({
+        width: '15px',
+        height: '15px',
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        pointerEvents: 'none',
+    });
+    const squareDragging = createElement({
+        width: '15px',
+        height: '15px',
+        cursor: style === null || style === void 0 ? void 0 : style.cursor,
+        pointerEvents: 'auto',
+        // backgroundColor: 'red',
+        background: 'transparent',
+    });
+    squareDragging.draggable = true;
+    squareDraggingWrapper.appendChild(squareDragging);
+    square.appendChild(squareDraggingWrapper);
+    return square;
+}

package/libs/src/shared-utils/Object3DHelper/Helper/HTML/tipsDom.d.ts

@@ -0,0 +1,6 @@
+export declare function tipsDom(style?: Partial<CSSStyleDeclaration>): {
+    element: HTMLElement;
+    show: () => void;
+    hide: () => void;
+    setLeftTop: (left: string, top: string) => void;
+};

package/libs/src/shared-utils/Object3DHelper/Helper/HTML/tipsDom.js

@@ -0,0 +1,24 @@
+import { createElement } from './utils/createElement';
+export function tipsDom(style) {
+    const element = createElement(Object.assign({ position: 'absolute', display: 'block', borderRadius: '4px', paddingTop: '1px', paddingBottom: '1px', paddingLeft: '4px', paddingRight: '4px', pointerEvents: 'none', userSelect: 'none', zIndex: '9999', backgroundColor: 'rgba(0,0,0,0.7)', fontSize: '12px', color: '#fff', letterSpacing: '0', lineHeight: '18px' }, style));
+    const show = () => {
+        if (element.style.display === 'block')
+            return;
+        if (!element.style.top)
+            return;
+        if (!element.style.left)
+            return;
+        element.style.display = 'block';
+    };
+    const hide = () => {
+        element.style.display = 'none';
+        element.style.top = '';
+        element.style.left = '';
+    };
+    const setLeftTop = (left, top) => {
+        element.style.left = left;
+        element.style.top = top;
+        show();
+    };
+    return { element, show, hide, setLeftTop };
+}

package/libs/src/shared-utils/Object3DHelper/Helper/HTML/utils/createElement.d.ts

@@ -0,0 +1,2 @@
+export declare function createElement(style?: Partial<CSSStyleDeclaration>, tagName?: string): HTMLElement;
+export declare function setStyle(element: HTMLElement, style?: Partial<CSSStyleDeclaration>): HTMLElement;

package/libs/src/shared-utils/Object3DHelper/Helper/HTML/utils/createElement.js

@@ -0,0 +1,12 @@
+export function createElement(style, tagName) {
+    return setStyle(document.createElement(tagName !== null && tagName !== void 0 ? tagName : 'div'), style);
+}
+export function setStyle(element, style) {
+    if (!style)
+        return element;
+    for (const key in style) {
+        if (key && style[key])
+            element.style[key] = style[key];
+    }
+    return element;
+}

package/libs/src/shared-utils/Object3DHelper/Helper/MoveHelper.d.ts

@@ -0,0 +1,13 @@
+import type { Object3D } from 'three';
+import type { Direction } from '../typings';
+import { MoveHelperAbstract } from '.';
+import { ArrowGroup } from './Objects/ArrowGroup';
+export declare class MoveHelper extends MoveHelperAbstract {
+    xArrow: ArrowGroup;
+    yArrow: ArrowGroup;
+    zArrow: ArrowGroup;
+    constructor(originObject3D: Object3D);
+    show(): void;
+    showDraggingHelper(directions: Direction[]): void;
+    dispose(): void;
+}

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

@@ -0,0 +1,43 @@
+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);
+    }
+    show() {
+        super.show();
+        this.xArrow.visible = true;
+        this.yArrow.visible = true;
+        this.zArrow.visible = true;
+    }
+    showDraggingHelper(directions) {
+        this.xArrow.visible = directions.includes('x');
+        this.yArrow.visible = directions.includes('y');
+        this.zArrow.visible = directions.includes('z');
+    }
+    dispose() {
+        this.remove(this.xArrow, this.yArrow, this.zArrow);
+    }
+}

package/libs/src/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/src/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/src/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/src/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/src/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.d.ts

@@ -0,0 +1,40 @@
+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>;
+    plane?: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>;
+    private css3DRenderer;
+    private camera;
+    private scene;
+    private container;
+    private enabled;
+    constructor(originObject3D: T, container: Element, camera: THREE.Camera, scene: THREE.Scene);
+    updatePosition(): void;
+    updateQuaternion(): void;
+    applyMatrix4(matrix: THREE.Matrix4): void;
+    showDraggingHelper(): void;
+    applyHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
+        origin?: Vector3;
+        helperOrigin?: Vector3;
+    }): void;
+    updatePoints(): void;
+    applyHelperQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
+    enable(): void;
+    disable(): void;
+    show(): void;
+    hide(): void;
+    dispose(): void;
+    private initRectangleScaleHelper;
+    private getCornerPositions;
+    private calculatePointPosition;
+}
+export {};