@realsee/dnalogel 2.0.1 → 2.2.0-alpha.1

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

@@ -0,0 +1,189 @@
+import { BaseController } from '../Base/BaseController';
+import * as THREE from 'three';
+import { getMouseRaycaster, vectorIsEqual } from '../utils';
+import { Vector3 } from 'three';
+import { negateScale } from '../utils/negateScale';
+import '../utils/getPoint';
+export class RectangleScaleController extends BaseController {
+    constructor(...params) {
+        super(...params);
+        Object.defineProperty(this, "startInfo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+    }
+    enable() {
+        this.helperObject3D.enable();
+        super.enable();
+    }
+    disable() {
+        this.helperObject3D.disable();
+        super.disable();
+    }
+    show() {
+        this.helperObject3D.show();
+        super.show();
+    }
+    hide() {
+        this.helperObject3D.hide();
+        super.hide();
+    }
+    getDragPlane() {
+        const plane = new THREE.Plane();
+        // get normal from points
+        const positions = this.helperObject3D.cornerPositions;
+        if (positions.length === 0)
+            return;
+        if (positions.length < 3)
+            plane.setFromNormalAndCoplanarPoint(this.originObject3D.getWorldDirection(new Vector3()), positions[0]);
+        else
+            plane.setFromCoplanarPoints(positions[0], positions[1], positions[2]);
+        // const p0 = getPoint(positions[0]!, 0)
+        // const p1 = getPoint(positions[1]!, 1)
+        // const p2 = getPoint(positions[2]!, 2)
+        // this.scene.add(p0, p1, p2)
+        return plane;
+    }
+    dragStart(mousePoint, point) {
+        var _a, _b;
+        (_b = (_a = this.helperObject3D).updatePoints) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const plane = this.getDragPlane();
+        if (!plane)
+            return this.dragEnd();
+        this.startInfo = { startPoint: { position: point.position.clone(), direction: point.direction }, plane };
+        this.hooks.emit('scaleStart');
+        this.needsRender();
+        this.isDragging = true;
+        console.log('%c RectangleScaleController dragStart', 'color: #e5af2e');
+    }
+    dragging(point) {
+        if (!this.isDragging)
+            return;
+        const raycaster = getMouseRaycaster(this.camera, point, this.container);
+        if (!raycaster)
+            return this.dragEnd();
+        this.scale(raycaster);
+        console.log('%c RectangleScaleController dragging', 'color: #49de1b');
+    }
+    scale(raycaster) {
+        var _a, _b;
+        if (!this.startInfo)
+            return;
+        const object = this.originObject3D;
+        const { startPoint, plane } = this.startInfo;
+        const cornerPositions = this.helperObject3D.cornerPositions;
+        if (cornerPositions.length < 4)
+            return this.dragEnd();
+        const planeIntersection = raycaster.ray.intersectPlane(plane, new Vector3());
+        if (!planeIntersection)
+            return;
+        if (vectorIsEqual(planeIntersection, this.camera.position))
+            return;
+        const referencePosition = cornerPositions[0].clone();
+        const planeCenter = new Vector3().addVectors(cornerPositions[0], cornerPositions[2]).divideScalar(2);
+        const { position: startPosition, direction } = startPoint;
+        const ewVector = new Vector3().subVectors(cornerPositions[1], referencePosition); // west -> east vector
+        const nsVector = new Vector3().subVectors(cornerPositions[3], referencePosition); // south -> north vector
+        // eslint-disable-next-line complexity
+        const getScale = (direction) => {
+            const baseVector = (direction === 'ew' ? ewVector : nsVector).clone();
+            const startPositionProject = startPosition.clone().projectOnVector(baseVector);
+            const nowPositionProject = planeIntersection.clone().projectOnVector(baseVector);
+            const planeCenterProject = planeCenter.clone().projectOnVector(baseVector);
+            if (this.startInfo) {
+                if (direction === 'ns' && typeof this.startInfo.nsMoveIsNegative !== 'boolean') {
+                    const offset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
+                    const xIsNegative = offset.x < 0 && baseVector.x >= 0;
+                    const yIsNegative = offset.y < 0 && baseVector.y >= 0;
+                    const zIsNegative = offset.z < 0 && baseVector.z >= 0;
+                    this.startInfo.nsMoveIsNegative = xIsNegative || yIsNegative || zIsNegative;
+                }
+                if (direction === 'ew' && typeof this.startInfo.ewMoveIsNegative !== 'boolean') {
+                    const offset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
+                    const xIsNegative = offset.x < 0 && baseVector.x >= 0;
+                    const yIsNegative = offset.y < 0 && baseVector.y >= 0;
+                    const zIsNegative = offset.z < 0 && baseVector.z >= 0;
+                    this.startInfo.ewMoveIsNegative = xIsNegative || yIsNegative || zIsNegative;
+                }
+            }
+            if (nowPositionProject.equals(startPositionProject))
+                return;
+            const startPositionProjectOffset = new Vector3().subVectors(startPositionProject, planeCenterProject);
+            const nowPositionProjectOffset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
+            const scale = nowPositionProjectOffset.clone().divide(startPositionProjectOffset);
+            scale.x = isNaN(scale.x) ? 1 : scale.x;
+            scale.y = isNaN(scale.y) ? 1 : scale.y;
+            scale.z = isNaN(scale.z) ? 1 : scale.z;
+            return scale;
+        };
+        const nsScale = (_a = getScale('ns')) !== null && _a !== void 0 ? _a : new Vector3(1, 1, 1);
+        const ewScale = (_b = getScale('ew')) !== null && _b !== void 0 ? _b : new Vector3(1, 1, 1);
+        const scale = (() => {
+            switch (direction) {
+                case 'ew':
+                    return ewScale;
+                case 'ns':
+                    return nsScale;
+                case 'nesw':
+                case 'nwse':
+                    return new Vector3().multiplyVectors(nsScale, ewScale);
+            }
+        })();
+        const halfScale = scale.clone().sub(new Vector3(1, 1, 1)).multiplyScalar(0.5).add(new Vector3(1, 1, 1));
+        const scaleMatrix = new THREE.Matrix4().scale(halfScale);
+        const newScale = object.scale.clone().applyMatrix4(scaleMatrix);
+        // const minScale = 0.000001
+        // newScale.x = Math.max(newScale.x, minScale)
+        // newScale.y = Math.max(newScale.y, minScale)
+        // newScale.z = Math.max(newScale.z, minScale)
+        // if (direction === 'ew' || direction === 'ns') {
+        //   if (newScale.x === minScale || newScale.y === minScale || newScale.z === minScale) return
+        // }
+        // if (direction === 'nesw' || direction === 'nwse') {
+        //   if (newScale.x === minScale && newScale.y === minScale) return
+        //   if (newScale.x === minScale && newScale.z === minScale) return
+        //   if (newScale.y === minScale && newScale.z === minScale) return
+        // }
+        object.scale.copy(newScale); // 或者 object.scale.applyMatrix4(scaleMatrix)
+        startPoint.position.copy(planeIntersection);
+        this.hooks.emit('scaleUpdate', { matrix4: scaleMatrix, helperOrigin: planeCenter });
+        // 移动位置
+        if (referencePosition) {
+            const ewMoveScale = this.startInfo.ewMoveIsNegative ? negateScale(ewScale) : ewScale;
+            const nsMoveScale = this.startInfo.nsMoveIsNegative ? negateScale(nsScale) : nsScale;
+            const moveScale = (() => {
+                switch (direction) {
+                    case 'ew':
+                        return ewMoveScale;
+                    case 'ns':
+                        return nsMoveScale;
+                    case 'nesw':
+                    case 'nwse':
+                        return new Vector3().multiplyVectors(ewMoveScale, nsMoveScale);
+                }
+            })();
+            const halfMoveScale = moveScale.clone().sub(new Vector3(1, 1, 1)).multiplyScalar(0.5).add(new Vector3(1, 1, 1));
+            const objectPosition = object.position.clone();
+            const newPosition = new Vector3()
+                .subVectors(objectPosition, referencePosition)
+                .multiply(halfMoveScale)
+                .add(referencePosition)
+                .sub(objectPosition);
+            const transform = new THREE.Matrix4().setPosition(newPosition);
+            object.applyMatrix4(transform);
+            this.hooks.emit('positionUpdate', { matrix4: transform });
+        }
+        this.needsRender();
+    }
+    dragEnd() {
+        if (!this.isDragging)
+            return;
+        this.startInfo = undefined;
+        this.isDragging = false;
+        this.hooks.emit('scaleEnd');
+        this.needsRender();
+        console.log('%c RectangleScaleController dragEnd', 'color: #e94e4e');
+    }
+}

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

@@ -0,0 +1,22 @@
+import { BaseController } from '../Base/BaseController';
+import type { RotateHelperAbstract } from '../Helper';
+export declare class RotateController<T extends RotateHelperAbstract = RotateHelperAbstract> extends BaseController<T> {
+    private startInfo?;
+    private lastRotation?;
+    private rotations;
+    private a;
+    private helperObject3DQuaternion;
+    constructor(...params: ConstructorParameters<typeof BaseController<T>>);
+    /**
+     * @description: 拖动开始，找出拖的Direction
+     */
+    private dragStart;
+    private dragging;
+    private rotate;
+    private dragEnd;
+    private getAngleHelper;
+    private setAngleHelperStart;
+    private setAngleHelperLength;
+    private setTipsAngle;
+    private setTipsPosition;
+}

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

@@ -0,0 +1,264 @@
+import { BaseController } from '../Base/BaseController';
+import * as THREE from 'three';
+import { getMouseRaycaster } from '../utils';
+import '../utils/getPoint';
+export class RotateController extends BaseController {
+    constructor(...params) {
+        super(...params);
+        Object.defineProperty(this, "startInfo", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lastRotation", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rotations", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "a", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "helperObject3DQuaternion", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.helperObject3D.quaternion.clone()
+        });
+        // add hover listener
+        const helper = this.helperObject3D;
+        this.hoverListener([helper.xyCircle, helper.xzCircle, helper.yzCircle]);
+        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 direction = (intersect === null || intersect === void 0 ? void 0 : intersect.object).direction;
+        if (!direction)
+            return this.dragEnd();
+        // 检查end
+        this.helperObject3D.updateAngleHelperQuaternion();
+        const startIntersect = intersect.point;
+        const rotateCenter = this.originObject3D.position.clone();
+        const angleHelper = this.getAngleHelper(direction);
+        // init tips
+        this.setTipsAngle(0);
+        const tipsPosition = startIntersect.clone();
+        tipsPosition.y += 0.2;
+        this.setTipsPosition(tipsPosition);
+        // end
+        // init plane
+        const directionX = new THREE.Vector3(1, 0, 0).applyQuaternion(this.helperObject3DQuaternion.clone());
+        const directionY = new THREE.Vector3(0, 1, 0).applyQuaternion(this.helperObject3DQuaternion.clone());
+        const directionZ = new THREE.Vector3(0, 0, 1).applyQuaternion(this.helperObject3DQuaternion.clone());
+        const directionVector = (() => {
+            switch (direction) {
+                case 'x':
+                    return directionX;
+                case 'y':
+                    return directionY;
+                case 'z':
+                    return directionZ;
+            }
+        })();
+        const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(directionVector, startIntersect);
+        // end
+        // init startVectorProject
+        const projectPoint = new THREE.Vector3();
+        plane.projectPoint(startIntersect.clone(), projectPoint);
+        const startVector = projectPoint.clone().sub(rotateCenter);
+        // end
+        // 计算开始角度
+        const staticStartVector = startVector.clone();
+        const startAngle = startVector.angleTo(angleHelper.baseAxes);
+        this.setAngleHelperStart(direction, startAngle);
+        this.setAngleHelperLength(direction, 0);
+        this.rotations.push({ vector: startVector.clone(), direction: true });
+        // end
+        // this.scene.remove(this.a)
+        // this.a = new THREE.PlaneHelper(plane, 10, 0xffff00)
+        // this.scene.add(this.a)
+        this.startInfo = { direction, startVector, staticStartVector, plane, angleHelper };
+        this.helperObject3D.show(direction);
+        this.hooks.emit('rotateStart');
+        this.isDragging = true;
+        console.log(`%c RotateController dragStart ${direction}`, 'color: #e5af2e');
+    }
+    dragging(point) {
+        var _a;
+        if (!this.isDragging)
+            return;
+        const ray = getMouseRaycaster(this.camera, point, this.container);
+        if (!ray)
+            return this.dragEnd();
+        console.log(`%c RotateController dragging ${(_a = this.startInfo) === null || _a === void 0 ? void 0 : _a.direction}`, 'color: #49de1b');
+        this.rotate(ray);
+        return false;
+    }
+    rotate(raycaster) {
+        if (!this.startInfo)
+            return this.dragEnd();
+        const { startVector, plane, angleHelper, staticStartVector, direction } = this.startInfo;
+        const object = this.originObject3D;
+        const currentIntersectPoint = raycaster.ray.intersectPlane(plane, new THREE.Vector3());
+        if (!currentIntersectPoint)
+            return;
+        const rotateCenter = object.position.clone();
+        const projectPoint = new THREE.Vector3();
+        plane.projectPoint(currentIntersectPoint.clone(), projectPoint);
+        const currentVector = projectPoint.clone().sub(rotateCenter);
+        // 计算当前角度
+        if (startVector.angleTo(currentVector) === 0)
+            return;
+        if (this.lastRotation === undefined)
+            this.lastRotation = { angle: 0 };
+        if (this.rotations.length === 0)
+            return;
+        const rotationDirection = (() => {
+            if (this.rotations.length === 1) {
+                return currentVector.angleTo(angleHelper.baseAxes) > staticStartVector.angleTo(angleHelper.baseAxes);
+            }
+            else {
+                /**
+                 * 通过记录上两次旋转时的vectorEnd和方向，来计算当前旋转的方向
+                 */
+                const lr = this.rotations[this.rotations.length - 1]; // last rotation
+                const llr = this.rotations[this.rotations.length - 2]; // last last rotation
+                const currentToLLR = currentVector.angleTo(llr.vector);
+                const currentToLR = currentVector.angleTo(lr.vector);
+                const lrToLLR = lr.vector.angleTo(llr.vector);
+                if (lrToLLR === 0 || currentToLR === 0 || currentToLLR === 0)
+                    return;
+                /** example:
+                 *    'current lr llr' mains:
+                 *
+                 *    currentVector  lr  llr
+                 *             \     |    /
+                 *              \    |   /
+                 *               \   |  /
+                 *                \  | /
+                 *                 \ |/
+                 *          rotation center
+                 *
+                 * 1. 如果 currentVector 到 llr 角度大于 currentVector 到 lr 角度，说明当前旋转方向与lr相同
+                 * 2. 如果 currentVector 在 llr 和 lr 中间，说明当前旋转方向与lr相反
+                 * 3. 如果 currentVector 到 lr 角度大于 currentVector 到 llr 角度，说明当前旋转方向与lr相反
+                 */
+                // 1. current lr llr 或 llr lr current
+                if (currentToLLR > currentToLR && currentToLLR > lrToLLR) {
+                    return lr.direction;
+                }
+                // 2. lr current llr 或 llr current lr
+                if (currentToLLR < lrToLLR && currentToLR < lrToLLR) {
+                    return !lr.direction;
+                }
+                // 3. lr llr current 或 current llr lr
+                if (currentToLLR < currentToLR && currentToLR > lrToLLR) {
+                    return !lr.direction;
+                }
+            }
+            return;
+        })();
+        if (rotationDirection === undefined)
+            return console.warn('rotationDirection is undefined');
+        this.rotations.push({ vector: currentVector, direction: rotationDirection });
+        this.rotations = this.rotations.slice(-2); // 只保留后两个
+        this.lastRotation.angle = this.lastRotation.angle + currentVector.angleTo(startVector) * (rotationDirection ? 1 : -1);
+        this.setAngleHelperLength(direction, this.lastRotation.angle);
+        this.setTipsAngle((this.lastRotation.angle / Math.PI) * 180);
+        // end
+        const quaternion = new THREE.Quaternion().setFromUnitVectors(startVector.clone().normalize(), currentVector.clone().normalize());
+        object.applyQuaternion(quaternion);
+        this.helperObject3D.updateQuaternion(quaternion);
+        this.helperObject3DQuaternion.premultiply(quaternion);
+        this.hooks.emit('rotateUpdate', { quaternion, origin: rotateCenter });
+        this.startInfo.startVector = currentVector;
+    }
+    dragEnd() {
+        if (!this.isDragging)
+            return;
+        console.log('%c RotateController dragEnd', 'color: #e94e4e');
+        // 拖动结束，重置
+        this.startInfo = undefined;
+        this.isDragging = false;
+        this.lastRotation = undefined;
+        this.rotations = [];
+        // 显示所有
+        this.helperObject3D.show();
+        this.hooks.emit('rotateEnd');
+        return;
+    }
+    getAngleHelper(direction) {
+        switch (direction) {
+            case 'x':
+                return this.helperObject3D.xAngleHelper;
+            case 'y':
+                return this.helperObject3D.yAngleHelper;
+            case 'z':
+                return this.helperObject3D.zAngleHelper;
+        }
+    }
+    setAngleHelperStart(direction, start) {
+        const angleHelper = this.getAngleHelper(direction);
+        if (angleHelper instanceof THREE.Mesh && angleHelper.geometry instanceof THREE.CircleGeometry) {
+            const { radius, segments, thetaLength } = angleHelper.geometry.parameters;
+            angleHelper.geometry = new THREE.CircleGeometry(radius, segments, start, thetaLength);
+        }
+        else {
+            console.warn('only support THREE.CircleGeometry');
+        }
+    }
+    setAngleHelperLength(direction, length) {
+        const minLength = 0.001;
+        const thetaLength = length >= 0 ? Math.max(length, minLength) : Math.min(length, -minLength);
+        const angleHelper = this.getAngleHelper(direction);
+        if (angleHelper instanceof THREE.Mesh && angleHelper.geometry instanceof THREE.CircleGeometry) {
+            const { radius, thetaStart } = angleHelper.geometry.parameters;
+            const segments = Math.ceil(Math.abs(thetaLength) * (40 / (2 * Math.PI)));
+            angleHelper.geometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
+        }
+        else {
+            console.warn('only support THREE.CircleGeometry');
+        }
+    }
+    setTipsAngle(angle) {
+        var _a;
+        const element = (_a = this.helperObject3D.angleTips) === null || _a === void 0 ? void 0 : _a.element;
+        if (!element)
+            return;
+        element.innerText = `${angle.toFixed(0)}°`;
+    }
+    setTipsPosition(position) {
+        const angleTips = this.helperObject3D.angleTips;
+        if (!angleTips)
+            return;
+        const project = position.project(this.camera);
+        const { x, y, z } = project;
+        if (z > 1)
+            return;
+        const left = ((x + 1) / 2) * 100 + '%';
+        const top = ((-y + 1) / 2) * 100 + '%';
+        angleTips.setLeftTop(left, top);
+    }
+}

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

@@ -0,0 +1,11 @@
+import type { Direction4 } from '../../typings';
+interface Square {
+    element: HTMLElement;
+    direction: Direction4;
+}
+export declare function rectangleScaleDom(): {
+    container: HTMLElement;
+    squares: [Square, Square, Square, Square, Square, Square, Square, Square];
+};
+export declare function backgroundDom(): HTMLElement;
+export {};

package/libs/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/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/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/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/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/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);
+    hide(...directions: Direction[]): void;
+    show(direction?: Direction): void;
+    dispose(): void;
+}