@realsee/dnalogel 2.0.0-alpha.41 → 2.0.0-alpha.44

package/libs/src/PanoCompassPlugin/Plugin.js

@@ -0,0 +1,249 @@
+import * as THREE from 'three';
+import { getRoomInfoInstance } from './getRoomInfoInstance';
+import { loadTexture } from '../shared-utils/three/loadTexture';
+import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
+import { tweenProgress } from '../shared-utils/animationFrame/BetterTween';
+export const PanoCompassPlugin = function (five, config) {
+    return new PanoCompassController(five, config);
+};
+export default PanoCompassPlugin;
+class PanoCompassController {
+    constructor(five, config) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "group", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new THREE.Group()
+        });
+        Object.defineProperty(this, "modelLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "roomInfoInstance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "roomInfoWrapperInstance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "compassMeshTween", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "compassMesh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "entryDoorMesh", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a, _b, _c, _d;
+                this.five.scene.remove(this.group);
+                this.group.remove(...this.group.children);
+                (_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
+                (_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
+                this.five.off('panoArrived', this.onFivePanoArrived);
+                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
+            }
+        });
+        Object.defineProperty(this, "onFiveFistPanoLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.modelLoaded = true;
+                if (this.data)
+                    this.init();
+            }
+        });
+        Object.defineProperty(this, "onFivePanoWillArrive", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (panoIndex) => {
+                var _a, _b;
+                if (panoIndex === this.five.panoIndex)
+                    return;
+                (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
+                (_b = this.compassMesh) === null || _b === void 0 ? void 0 : _b.material.setValues({ opacity: 0 });
+            }
+        });
+        Object.defineProperty(this, "onFivePanoArrived", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (panoIndex) => {
+                var _a, _b, _c, _d;
+                // ======== fix compass position ========
+                const standingPosition = this.five.work.observers[panoIndex].standingPosition;
+                if (this.compassMesh) {
+                    // 指南针上移 0.01m，防止与地板重合
+                    this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+                    if (this.compassMesh.material.opacity !== 0)
+                        return;
+                    (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
+                    this.compassMeshTween = tweenProgress(1000)
+                        .onUpdate(({ progress }) => {
+                        var _a;
+                        (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
+                        this.five.needsRender = true;
+                    })
+                        .play();
+                }
+                // ======== fix entry door label position and rotation ========
+                if (this.entryDoorMesh) {
+                    const entryDoorPosition = new THREE.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
+                    const panoToEntryDoorVector = entryDoorPosition
+                        .clone()
+                        .setY(standingPosition.y)
+                        .sub(standingPosition)
+                        .normalize();
+                    const compassEntryDoorPosition = standingPosition
+                        .clone()
+                        .add(panoToEntryDoorVector.clone().multiplyScalar(0.7))
+                        .setY(standingPosition.y + 0.01);
+                    this.entryDoorMesh.rotation.z = new THREE.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
+                    this.entryDoorMesh.position.copy(compassEntryDoorPosition);
+                    // 不是客厅时，隐藏入户门指引
+                    ((_b = this.data) === null || _b === void 0 ? void 0 : _b.room_observers[panoIndex].room.type) === 1
+                        ? (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.setValues({ opacity: 1 })
+                        : (_d = this.entryDoorMesh) === null || _d === void 0 ? void 0 : _d.material.setValues({ opacity: 0 });
+                }
+                // ======== fix room info ========
+                if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
+                    this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+                    this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
+                }
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "onFiveCameraDirectionUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ({ longitude, latitude, }) => {
+                var _a, _b;
+                if (!this.roomInfoWrapperInstance)
+                    return;
+                this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
+                latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
+                    ? (_a = this.roomInfoInstance) === null || _a === void 0 ? void 0 : _a.show()
+                    : (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
+            }
+        });
+        this.five = five;
+        this.config = config;
+        this.five.scene.add(this.group);
+        five.once('dispose', this.dispose);
+        five.once('modelLoaded', this.onFiveFistPanoLoaded);
+        this.five.on('panoArrived', this.onFivePanoArrived);
+        this.five.on('panoWillArrive', this.onFivePanoWillArrive);
+        this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
+    }
+    load(data) {
+        this.data = data;
+        if (this.modelLoaded)
+            this.init();
+    }
+    async init() {
+        if (!this.data || !this.modelLoaded)
+            return;
+        const northRad = this.data.north_rad;
+        if (northRad != null) {
+            this.compassMesh = await this.loadCompassMesh();
+            this.compassMesh.rotateX(-Math.PI / 2);
+            this.compassMesh.rotateZ(northRad - Math.PI / 2);
+            this.group.add(this.compassMesh);
+        }
+        if (this.data.entrance != null) {
+            this.entryDoorMesh = await this.loadEntryDoorMesh();
+            this.roomInfoWrapperInstance = this.loadRoomInfo();
+            this.roomInfoInstance = getRoomInfoInstance();
+            this.entryDoorMesh.rotateX(-Math.PI / 2);
+            if (this.roomInfoWrapperInstance)
+                this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
+            this.group.add(this.entryDoorMesh);
+        }
+        this.onFivePanoArrived(this.five.panoIndex || 0);
+        this.five.needsRender = true;
+    }
+    async loadCompassMesh() {
+        var _a;
+        const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
+            '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
+        const compassTexture = await loadTexture(compassImageUrl);
+        const compassGeometry = new THREE.CircleGeometry(0.7, 32);
+        const compassMaterial = new THREE.MeshBasicMaterial({
+            map: compassTexture,
+            transparent: true,
+            opacity: 0,
+            depthTest: false,
+        });
+        const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
+        compassMesh.name = 'pano-compass-mesh';
+        return compassMesh;
+    }
+    async loadEntryDoorMesh() {
+        var _a;
+        const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
+            '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
+        const entryDoorTexture = await loadTexture(entryDoorImageUrl);
+        const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
+        const entryDoorMaterial = new THREE.MeshBasicMaterial({
+            map: entryDoorTexture,
+            transparent: true,
+            opacity: 0.8,
+            depthTest: false,
+        });
+        const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
+        entryDoorMesh.name = 'pano-compass-entry-door';
+        return entryDoorMesh;
+    }
+    loadRoomInfo() {
+        const points = [
+            new THREE.Vector3(-0.7, 0, -0.7),
+            new THREE.Vector3(0.7, 0, -0.7),
+            new THREE.Vector3(0.7, 0, 0.7),
+            new THREE.Vector3(-0.7, 0, 0.7),
+        ];
+        const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
+        return roomInfo;
+    }
+}

package/libs/src/PanoCompassPlugin/getRoomInfoInstance.d.ts

@@ -0,0 +1,8 @@
+import type { FloorplanServerRoomItem } from '../floorplan/typings/floorplanServerData';
+export declare function getRoomInfoInstance(): {
+    appendTo(element: Element): void;
+    dispose(): void;
+    setRoom(room: FloorplanServerRoomItem): void;
+    show(): void;
+    hide(): void;
+};

package/libs/src/PanoCompassPlugin/getRoomInfoInstance.js

@@ -0,0 +1,48 @@
+import { roomInfoIcon } from './Assets/roomInfoIcon';
+export function getRoomInfoInstance() {
+    const infoDom = document.createElement('div');
+    const iconDom = document.createElement('i');
+    const textDom = document.createElement('span');
+    infoDom.appendChild(iconDom);
+    infoDom.appendChild(textDom);
+    // infoDom style
+    infoDom.style.position = 'relative';
+    infoDom.style.width = '100%';
+    infoDom.style.display = 'flex';
+    infoDom.style.flexDirection = 'column';
+    infoDom.style.alignItems = 'center';
+    infoDom.style.marginTop = `${150 / 16}rem`;
+    infoDom.style.opacity = '0';
+    infoDom.style.transition = 'opacity 1000ms linear';
+    // iconDom style
+    iconDom.style.display = 'block';
+    iconDom.style.width = `${134 / 16}rem`;
+    iconDom.style.height = `${22 / 16}rem`;
+    iconDom.style.backgroundSize = '100%';
+    iconDom.style.backgroundRepeat = 'no-repeat';
+    iconDom.style.backgroundImage = `url(${roomInfoIcon})`;
+    textDom.style.marginTop = `${10 / 16}rem`;
+    // textDom style
+    textDom.style.fontSize = `${16 / 16}rem`;
+    textDom.style.color = '#fff';
+    textDom.style.opacity = '0.7';
+    textDom.style.textShadow = '0 2px 16px rgb(22 34 83 / 24%)';
+    textDom.style.fontWeight = 'bold';
+    return {
+        appendTo(element) {
+            element.appendChild(infoDom);
+        },
+        dispose() {
+            infoDom.remove();
+        },
+        setRoom(room) {
+            textDom.innerHTML = room.name + ' ' + Math.floor(room.size / 1000000) + '㎡';
+        },
+        show() {
+            infoDom.style.opacity = '1';
+        },
+        hide() {
+            infoDom.style.opacity = '0';
+        }
+    };
+}

package/libs/src/PanoCompassPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import PanoCompassPlugin from './Plugin';
+export { PanoCompassPlugin };
+export default PanoCompassPlugin;
+export type { PanoCompassPluginParameterType, PanoCompassPluginData, PanoCompassPluginExportType } from './Plugin';
+export declare const panoCompassPluginServerParams: {
+    name: string;
+    version: number;
+};

package/libs/src/PanoCompassPlugin/index.js

@@ -0,0 +1,7 @@
+import PanoCompassPlugin from './Plugin';
+export { PanoCompassPlugin };
+export default PanoCompassPlugin;
+export const panoCompassPluginServerParams = {
+    name: 'PanoCompassPlugin',
+    version: 0,
+};

package/libs/src/PanoCursorRaycasterPlugin/index.d.ts

@@ -0,0 +1,48 @@
+import type { FivePlugin, Intersection } from '@realsee/five';
+import { Group, Vector3 } from 'three';
+export interface PanoCursorRaycasterPluginParameterType {
+}
+export interface PanoCursorRaycasterPluginExportType {
+    /**
+     * @description: 获取鼠标与模型的焦点位置
+     * @return {Intersection | null} 鼠标与模型的焦点位置
+     */
+    intersection: () => Intersection | null;
+    /**
+     * @description: 辅助坐标轴
+     * @param {Vector3} point: 坐标轴原点的位置
+     * @param {number} length: 坐标轴线长度，单位：米，默认值：2
+     * @param {number} fixDistance: 为避免被模型遮挡，默认向camera方向移动0.1m，默认值：0.1
+     * @return {{clear: () => void; pointAxesHelperMesh: THREE.Group}} clear: 清理函数；pointAxesHelperMesh: 辅助坐标轴mesh
+     */
+    pointAxesHelper: (point: Vector3, length?: number, fixDistance?: number) => {
+        clear: () => void;
+        pointAxesHelperMesh: Group;
+    };
+    /**
+     * @description: 将一个点在camera和点的向量上移动。传入点的位置和相对移动的距离，返回一个新的位置
+     * @param {Vector3} point: 点
+     * @param {number} distance: 向camera相对移动的距离（正方向为：点 -> 摄像头）
+     * @return {Vector3} 计算移动后的位置
+     */
+    movePointTowardsCamera: (point: Vector3, distance: number) => Vector3;
+    /**
+     * @description: 某个点是否可见
+     * @param {Vector3} point: 要检测的点
+     * @param {number} distanceError: 允许的误差，如果点有可能打在模型后，则传入一个误差值，通常为0.01
+     * @return {boolean}: 是否可见
+     */
+    canSeePoint: (point: Vector3, distanceError?: number) => boolean;
+    /**
+     * @description: 清理函数
+     * @return {() => void} 清理函数
+     */
+    destroy: () => void;
+}
+/**
+ * 全景中对当前鼠标的位置进行碰撞监测
+ * @param five
+ * @return
+ */
+export declare const PanoCursorRaycasterPlugin: FivePlugin<PanoCursorRaycasterPluginParameterType, PanoCursorRaycasterPluginExportType>;
+export default PanoCursorRaycasterPlugin;

package/libs/src/PanoCursorRaycasterPlugin/index.js

@@ -0,0 +1,76 @@
+import { Group, Raycaster, Vector3 } from 'three';
+import createLine from '../shared-utils/createLine';
+/**
+ * 全景中对当前鼠标的位置进行碰撞监测
+ * @param five
+ * @return
+ */
+export const PanoCursorRaycasterPlugin = (five) => {
+    const state = {
+        intersection: null,
+        disposers: [],
+    };
+    const updateIntersection = (intersection) => {
+        state.intersection = intersection;
+    };
+    const clearIntersection = () => {
+        state.intersection = null;
+    };
+    five.on('modelLoaded', () => {
+        five.on('intersectionOnModelUpdate', updateIntersection);
+        five.on('intersectionHidden', clearIntersection);
+    });
+    five.on('dispose', () => {
+        five.off('intersectionOnModelUpdate', updateIntersection);
+        five.off('intersectionHidden', clearIntersection);
+    });
+    const pointAxesHelper = (point, length = 2, fixDistance = 0.1) => {
+        const halfLength = length / 2;
+        const helperCenterPoint = movePointTowardsCamera(point, fixDistance);
+        const p = helperCenterPoint;
+        const pointAxesHelperMesh = new Group();
+        pointAxesHelperMesh.add(createLine(new Vector3(p.x + halfLength, p.y, p.z), new Vector3(p.x - halfLength, p.y, p.z), new Vector3(1, 0, 0)), createLine(new Vector3(p.x, p.y + halfLength, p.z), new Vector3(p.x, p.y - halfLength, p.z), new Vector3(0, 1, 0)), createLine(new Vector3(p.x, p.y, p.z + halfLength), new Vector3(p.x, p.y, p.z - halfLength), new Vector3(0, 0, 1)));
+        five.scene.add(pointAxesHelperMesh);
+        five.needsRender = true;
+        // 清理函数
+        const clear = () => {
+            five.scene.remove(pointAxesHelperMesh);
+        };
+        state.disposers.push(clear);
+        return { clear, pointAxesHelperMesh };
+    };
+    const canSeePoint = (point, distanceError = 0) => {
+        var _a, _b;
+        const cameraPosition = (_a = five === null || five === void 0 ? void 0 : five.camera) === null || _a === void 0 ? void 0 : _a.position;
+        if (!cameraPosition)
+            return false;
+        const distance = point.distanceTo(cameraPosition);
+        const direction = point.sub(cameraPosition).normalize();
+        const raycaster = new Raycaster(cameraPosition, direction);
+        const intersection = (_b = five.model.intersectRaycaster(raycaster)) === null || _b === void 0 ? void 0 : _b[0];
+        return !(intersection && intersection.distance + distanceError < distance);
+    };
+    const intersection = () => {
+        return state.intersection;
+    };
+    const destroy = () => {
+        var _a, _b;
+        (_b = (_a = state.disposers) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (d) => d === null || d === void 0 ? void 0 : d());
+        five.off('intersectionOnModelUpdate', updateIntersection);
+        five.off('intersectionHidden', clearIntersection);
+    };
+    // 逐步取代 destroy ,向下兼容
+    const dispose = destroy;
+    const movePointTowardsCamera = (point, distance) => {
+        // 原点 position
+        const originPoint = point.clone();
+        // camera position
+        const cameraPosition = five.camera.position.clone();
+        // 移动的向量
+        const fixVector3 = cameraPosition.sub(originPoint).setLength(distance);
+        // 向量相加
+        return fixVector3.add(originPoint);
+    };
+    return { intersection, pointAxesHelper, movePointTowardsCamera, destroy, dispose, canSeePoint };
+};
+export default PanoCursorRaycasterPlugin;

package/libs/src/PanoMeasurePlugin/Controller/BaseController.d.ts

@@ -0,0 +1,39 @@
+import type Line from '../Model/line';
+import type Magnifier from '../Modules/Magnifier';
+import type FiveHelper from '../Modules/FiveHelper';
+import type { Group } from 'three';
+import type { Model } from '../Model';
+import type { PanoMeasurePluginEvent } from '../typings/event.type';
+import type { UserDistanceItem } from '../utils/distanceDom';
+import type { Five, Intersection, IntersectMeshInterface, Subscribe } from '@realsee/five';
+import type { OpenParameter } from '../typings/data';
+export interface IControllerParams {
+    five: Five;
+    group: Group;
+    model: Model;
+    mouseGroup: Group;
+    container: Element;
+    magnifier: Magnifier;
+    fiveHelper: FiveHelper;
+    openParams: OpenParameter;
+    hook: Subscribe<PanoMeasurePluginEvent>;
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export default abstract class BaseController {
+    protected five: Five;
+    protected group: Group;
+    protected model: Model;
+    protected disposed: boolean;
+    protected isMobile: boolean;
+    protected mouseGroup: Group;
+    protected container: Element;
+    protected fiveHelper: FiveHelper;
+    protected hook: IControllerParams['hook'];
+    protected magnifier: IControllerParams['magnifier'];
+    protected userDistanceItemCreator: IControllerParams['userDistanceItemCreator'];
+    constructor(params: IControllerParams);
+    protected removeLine(line: Line): void;
+    protected updateDistanceUI: () => void;
+    protected updateMouseGroup(intersection: Intersection, mesh?: IntersectMeshInterface): Group;
+    protected dispose(): void;
+}

package/libs/src/PanoMeasurePlugin/Controller/BaseController.js

@@ -0,0 +1,132 @@
+import { preventDefault } from '../utils/ironbox';
+export default class BaseController {
+    constructor(params) {
+        var _a, _b;
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "group", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "disposed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "isMobile", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mouseGroup", {
+            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, "fiveHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hook", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "magnifier", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "userDistanceItemCreator", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "updateDistanceUI", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.model.lines.forEach((line) => line.distanceItem.update(this.five));
+            }
+        });
+        // ==================== Params ====================
+        this.five = params.five;
+        this.hook = params.hook;
+        this.model = params.model;
+        this.magnifier = params.magnifier;
+        this.container = params.container;
+        this.fiveHelper = params.fiveHelper;
+        this.isMobile = (_b = (_a = params.openParams) === null || _a === void 0 ? void 0 : _a.isMobile) !== null && _b !== void 0 ? _b : false;
+        this.userDistanceItemCreator = params.userDistanceItemCreator;
+        // ==================== Groups ====================
+        this.group = params.group;
+        this.mouseGroup = params.mouseGroup;
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            fiveElement.addEventListener('touchstart', preventDefault);
+            fiveElement.addEventListener('contextmenu', preventDefault);
+        }
+    }
+    removeLine(line) {
+        this.group.remove(line.mesh, line.lightMesh);
+        line.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    updateMouseGroup(intersection, mesh) {
+        if (!intersection)
+            return this.mouseGroup;
+        // ============ update mouseGroup position ============
+        const adsorbentPoint = this.fiveHelper.getAdsorbentPoint(intersection);
+        const viewPosition = adsorbentPoint ? adsorbentPoint : intersection.point;
+        this.mouseGroup.position.copy(viewPosition);
+        // ============ update mouseGroup quaternion ============
+        if (mesh) {
+            this.mouseGroup.quaternion.copy(mesh.quaternion);
+        }
+        else if (intersection.face) {
+            const normal = intersection.face.normal;
+            const positionVector = normal.clone().multiplyScalar(0.05);
+            const position = intersection.point.clone().add(positionVector);
+            const lookAtVector = position.clone().add(positionVector);
+            this.mouseGroup.lookAt(lookAtVector);
+        }
+        return this.mouseGroup;
+    }
+    dispose() {
+        this.disposed = true;
+        this.magnifier.remove();
+        this.model.lines.forEach((line) => this.removeLine(line));
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            fiveElement.removeEventListener('touchstart', preventDefault);
+            fiveElement.removeEventListener('contextmenu', preventDefault);
+        }
+    }
+}

package/libs/src/PanoMeasurePlugin/Controller/EditController.d.ts

@@ -0,0 +1,52 @@
+import type { LineJson } from '../typings/data';
+import { Model } from '../Model';
+import Line from '../Model/line';
+import BaseController, { IControllerParams } from './BaseController';
+export interface EditEvent {
+    editedLineChange: (lines: LineJson[]) => void;
+}
+export default class EditController extends BaseController {
+    type: string;
+    model: Model;
+    private pressPoint?;
+    private hasAppendDashed;
+    private hasAppendMouseGroup;
+    private fiveElement?;
+    /** 上一个端点位置 */
+    private lastPoint;
+    /** 鼠标点到上一个端点连接的虚线 */
+    private dashed;
+    private hammer?;
+    /** 根据 intersection 更新放大镜和吸附点 */
+    private onIntersectionUpdate;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    getEditingLines(): Line[];
+    /** 撤销编辑 */
+    revoke: () => void;
+    private onMouseLeave;
+    /** 编辑线条发生改变时通知外部 */
+    private onLineChanged;
+    private onPress;
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    private onPan;
+    private onPanEnd;
+    /**
+     * 1. 如果存在上一个点，需要绘制当前点到上一个点的连线
+     * 2. 把上一个点的位置更新为当前点的位置
+     * 3. 清除 mouseGroup 和 magnifier
+     */
+    private onTap;
+    private onWantsTapGesture;
+    /** 编辑时取消走点 */
+    private onWantsToMoveToPano;
+    /** 存在长按点时不能移动全景 */
+    private onWantsPanGesture;
+    /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+    private onCameraUpdate;
+    /** 更新虚线 */
+    private updateDashed;
+}