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

package/libs/src/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';
+import '../utils/getPoint';
+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, "plane", {
+            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, "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);
+    }
+    updateQuaternion() {
+        var _a;
+        (_a = this.plane) === null || _a === void 0 ? void 0 : _a.quaternion.copy(this.originObject3D.quaternion);
+    }
+    // public setPosition(position: Vector3) {
+    //   this.css3DInstance?.css3DObject.position.copy(position)
+    //   this.plane?.position.copy(position)
+    // }
+    applyMatrix4(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));
+    }
+    showDraggingHelper() {
+        // nothing to do
+    }
+    applyHelperScaleMatrix4(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);
+    }
+    updatePoints() {
+        const position8 = this.calculatePointPosition(this.cornerPositions);
+        this.points.forEach((point, index) => {
+            point.position.copy(position8[index]);
+        });
+    }
+    applyHelperQuaternion(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/src/shared-utils/Object3DHelper/Helper/RotateHelper.d.ts

@@ -0,0 +1,55 @@
+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;
+    applyHelperQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
+    hide(): void;
+    show(): void;
+    showDraggingHelper(directions: 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 {};

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

@@ -0,0 +1,246 @@
+import * as THREE from 'three';
+import { RotateHelperAbstract } from '../Base/BaseHelper';
+import { AXES_THREE_COLOR } from '../Constants/color';
+import { tipsDom } from './HTML/tipsDom';
+export class RotateHelper extends RotateHelperAbstract {
+    constructor(originObject3D, angleTipsParams) {
+        var _a;
+        super(originObject3D);
+        Object.defineProperty(this, "yzCircle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Circle({ direction: 'x', color: AXES_THREE_COLOR.X })
+        });
+        Object.defineProperty(this, "xzCircle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Circle({ direction: 'y', color: AXES_THREE_COLOR.Y })
+        });
+        Object.defineProperty(this, "xyCircle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Circle({ direction: 'z', color: AXES_THREE_COLOR.Z })
+        });
+        Object.defineProperty(this, "xRingHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new AxesDashedRing({ direction: 'x' })
+        });
+        Object.defineProperty(this, "yRingHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new AxesDashedRing({ direction: 'y' })
+        });
+        Object.defineProperty(this, "zRingHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new AxesDashedRing({ direction: 'z' })
+        });
+        Object.defineProperty(this, "xAngleHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Sector({ direction: 'x', color: AXES_THREE_COLOR.X })
+        });
+        Object.defineProperty(this, "yAngleHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Sector({ direction: 'y', color: AXES_THREE_COLOR.Y })
+        });
+        Object.defineProperty(this, "zAngleHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Sector({ direction: 'z', color: AXES_THREE_COLOR.Z })
+        });
+        Object.defineProperty(this, "angleTips", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        if (angleTipsParams) {
+            this.container = angleTipsParams === null || angleTipsParams === void 0 ? void 0 : angleTipsParams.container;
+            this.angleTips = tipsDom({ display: 'none' });
+            (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(this.angleTips.element);
+        }
+        this.show();
+    }
+    updateAngleHelperQuaternion() {
+        this.xAngleHelper.quaternion.copy(this.yzCircle.quaternion);
+        this.yAngleHelper.quaternion.copy(this.xzCircle.quaternion);
+        this.zAngleHelper.quaternion.copy(this.xyCircle.quaternion);
+        this.xRingHelper.quaternion.copy(this.yzCircle.quaternion);
+        this.yRingHelper.quaternion.copy(this.xzCircle.quaternion);
+        this.zRingHelper.quaternion.copy(this.xyCircle.quaternion);
+    }
+    applyHelperQuaternion(quaternion, origin) {
+        this.yzCircle.applyQuaternion(quaternion);
+        this.xzCircle.applyQuaternion(quaternion);
+        this.xyCircle.applyQuaternion(quaternion);
+        this.xAngleHelper.baseAxes.applyQuaternion(quaternion);
+        this.yAngleHelper.baseAxes.applyQuaternion(quaternion);
+        this.zAngleHelper.baseAxes.applyQuaternion(quaternion);
+    }
+    hide() {
+        // 改为remove而不是设置visible，是因为会影响其他helper的碰撞检测
+        this.remove(this.yzCircle, this.xzCircle, this.xyCircle, this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
+    }
+    show() {
+        var _a;
+        this.add(this.xyCircle, this.xzCircle, this.yzCircle);
+        this.remove(this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
+        (_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.hide();
+    }
+    showDraggingHelper(directions) {
+        var _a;
+        this.hide();
+        this.add(...this.filterRingHelper(directions));
+        this.add(...this.filterAngleHelper(directions));
+        (_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.show();
+    }
+    dispose() {
+        var _a, _b;
+        this.remove(this.yzCircle, this.xzCircle, this.xyCircle, this.xRingHelper, this.yRingHelper, this.zRingHelper, this.xAngleHelper, this.yAngleHelper, this.zAngleHelper);
+        if ((_a = this.angleTips) === null || _a === void 0 ? void 0 : _a.element)
+            (_b = this.container) === null || _b === void 0 ? void 0 : _b.removeChild(this.angleTips.element);
+    }
+    filterRingHelper(directions) {
+        return [this.xRingHelper, this.yRingHelper, this.zRingHelper].filter((helper) => directions.includes(helper.direction));
+    }
+    filterAngleHelper(directions) {
+        return [this.xAngleHelper, this.yAngleHelper, this.zAngleHelper].filter((helper) => directions.includes(helper.direction));
+    }
+}
+class Circle extends THREE.Mesh {
+    constructor(options) {
+        var _a;
+        super();
+        Object.defineProperty(this, "direction", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "gapAngle", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 0.02
+        });
+        Object.defineProperty(this, "geometry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new THREE.RingGeometry(0.25, 0.3, 20, 8, this.gapAngle, Math.PI / 2 - this.gapAngle * 2)
+        });
+        this.material = new THREE.MeshBasicMaterial({
+            opacity: 0.6,
+            color: (_a = options.color) !== null && _a !== void 0 ? _a : 0xffffff,
+            depthTest: false,
+            transparent: true,
+            side: THREE.DoubleSide,
+        });
+        this.direction = options.direction;
+        this.geometry.name = `RotateHelperCircleGeometry-${this.direction}`;
+        // this.renderOrder = 20
+        if (this.direction === 'y') {
+            this.rotateX(Math.PI / 2);
+        }
+        else if (this.direction === 'x') {
+            this.rotateY(-Math.PI / 2);
+        }
+    }
+}
+class AxesDashedRing extends THREE.Group {
+    constructor(options) {
+        super();
+        Object.defineProperty(this, "direction", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.direction = options.direction;
+        const gapAngle = 0.015;
+        const meshes = new Array(8).fill(null).map((_, i) => {
+            const geometry = new THREE.RingGeometry(0.25, 0.3, 20, 8, (Math.PI / 4) * i + gapAngle, Math.PI / 4 - gapAngle * 2);
+            const material = new THREE.MeshBasicMaterial({
+                opacity: 1,
+                color: 0xffffff,
+                depthTest: false,
+                transparent: true,
+                side: THREE.DoubleSide,
+            });
+            const mesh = new THREE.Mesh(geometry, material);
+            mesh.name = `AxesDashedRing-${this.direction}-${i}`;
+            return mesh;
+        });
+        this.add(...meshes);
+        if (this.direction === 'y') {
+            this.rotateX(Math.PI / 2);
+        }
+        else if (this.direction === 'x') {
+            this.rotateY(-Math.PI / 2);
+        }
+    }
+}
+class Sector extends THREE.Mesh {
+    constructor(options) {
+        var _a;
+        super();
+        Object.defineProperty(this, "direction", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "baseAxes", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        switch (options.direction) {
+            case 'x':
+                this.baseAxes = new THREE.Vector3(0, 0, 1);
+                break;
+            case 'y':
+                this.baseAxes = new THREE.Vector3(1, 0, 0);
+                break;
+            case 'z':
+                this.baseAxes = new THREE.Vector3(1, 0, 0);
+                break;
+        }
+        const ratio = 0.3 + 0.0005; // 挡住白色圆环的锯齿
+        this.geometry = new THREE.CircleGeometry(ratio, 48, 0, 0.0001);
+        this.material = new THREE.MeshBasicMaterial({
+            opacity: 0.4,
+            color: (_a = options.color) !== null && _a !== void 0 ? _a : 0xffffff,
+            depthTest: false,
+            transparent: true,
+            side: THREE.DoubleSide,
+        });
+        this.direction = options.direction;
+        // this.renderOrder = 20
+        if (this.direction === 'y') {
+            this.rotateX(Math.PI / 2);
+        }
+        else if (this.direction === 'x') {
+            this.rotateY(-Math.PI / 2);
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+export * from '../Base/BaseHelper';
+export * from './MoveHelper';
+export * from './RotateHelper';
+export * from './RectangleScaleHelper';
+export * from './OutlineHelper';

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

@@ -0,0 +1,5 @@
+export * from '../Base/BaseHelper';
+export * from './MoveHelper';
+export * from './RotateHelper';
+export * from './RectangleScaleHelper';
+export * from './OutlineHelper';

package/libs/src/shared-utils/Object3DHelper/index.d.ts

@@ -0,0 +1,71 @@
+import type { OutlineHelper } from './Helper';
+import type { Object3DHelperEventMap, Object3DHelperState } from './typings';
+import type { MoveController } from './Controller/MoveController';
+import type { RotateController } from './Controller/RotateController';
+import type { BaseController } from './Base/BaseController';
+import { Subscribe } from '../Subscribe';
+interface Controllers {
+    moveController?: MoveController;
+    rotateController?: RotateController;
+    scaleController?: BaseController;
+}
+interface Helpers {
+    outlineHelper?: OutlineHelper;
+}
+export declare class Object3DHelper {
+    controllers: Controllers;
+    state: Object3DHelperState;
+    hooks: Subscribe<Object3DHelperEventMap>;
+    private helpers;
+    private eventListener;
+    constructor(controllers?: Controllers, helpers?: Helpers);
+    /**
+     * @description Show guide line
+     */
+    show(options?: {
+        userAction?: boolean;
+    }): Promise<void>;
+    /**
+     * @description Hide guide line
+     */
+    hide(options?: {
+        userAction?: boolean;
+    }): Promise<void>;
+    /**
+     * @description Enable
+     */
+    enable(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Disable
+     */
+    disable(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Dispose
+     */
+    dispose(): void;
+    setState(state: Partial<Object3DHelperState>, options?: {
+        userAction?: boolean;
+    } & Record<string, any>): void;
+    addControllers(controllers: Controllers): void;
+    addHelpers(helpers: Partial<{
+        [K in keyof Helpers]: Helpers[K];
+    }>): void;
+    getCurrentState(): Object3DHelperState;
+    private addEventListener;
+    private handleEnd;
+    private handleStart;
+    private setOtherHelpersVisible;
+    private handlePositionUpdate;
+    private handleScaleUpdate;
+    private handleRotateUpdate;
+    private handleEnable;
+    private handleVisible;
+    private everyControllerDo;
+    private handleDispose;
+    private actionIfStateIsEnabled;
+}
+export {};