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

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

@@ -1,229 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,246 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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 {};