@realsee/dnalogel 2.0.0-alpha.6 → 2.0.0-alpha.7

package/libs/PanoCompassPlugin/index.d.ts

@@ -5,15 +5,15 @@ export interface PanoCompassPluginParameterType {
     entryDoorImageUrl?: string;
 }
 export interface PanoCompassPluginData {
-    entrance: null | {
-        north_rad: number;
+    north_rad: null | number;
+    entrance: null | undefined | {
         position: {
             x: number;
             y: number;
             z: number;
         };
     };
-    room_observers: {
+    room_observers: undefined | {
         index: number;
         floor_index: number;
         room: FloorplanServerRoomItem;

package/libs/PanoCompassPlugin/index.js

@@ -53,23 +53,28 @@ class PanoCompassController {
     async init() {
         if (!this.data || !this.modelLoaded)
             return;
-        this.compassMesh = await this.loadCompassMesh();
-        this.entryDoorMesh = await this.loadEntryDoorMesh();
-        this.roomInfoWrapperInstance = this.loadRoomInfo();
-        this.roomInfoInstance = getRoomInfoInstance();
-        this.compassMesh.rotateX(-Math.PI / 2);
-        this.entryDoorMesh.rotateX(-Math.PI / 2);
-        const northRad = this.data.entrance.north_rad;
-        this.compassMesh.rotateZ(northRad - Math.PI / 2);
+        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.group.add(this.compassMesh);
-        this.group.add(this.entryDoorMesh);
-        if (this.roomInfoWrapperInstance)
-            this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
         this.five.needsRender = true;
     }
     async loadCompassMesh() {
-        const compassImageUrl = this.config?.compassImageUrl || '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
+        const compassImageUrl = this.config?.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({
@@ -83,7 +88,8 @@ class PanoCompassController {
         return compassMesh;
     }
     async loadEntryDoorMesh() {
-        const entryDoorImageUrl = this.config?.entryDoorImageUrl || '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
+        const entryDoorImageUrl = this.config?.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({
@@ -113,42 +119,48 @@ class PanoCompassController {
         this.compassMesh?.material.setValues({ opacity: 0 });
     };
     onFivePanoArrived = (panoIndex) => {
-        if (!this.compassMesh || !this.entryDoorMesh || !this.roomInfoInstance || !this.roomInfoWrapperInstance)
-            return;
-        if (!this.data)
-            return;
         // ======== fix compass position ========
         const standingPosition = this.five.work.observers[panoIndex].standingPosition;
-        // 指南针上移 0.01m，防止与地板重合
-        this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+        if (this.compassMesh) {
+            // 指南针上移 0.01m，防止与地板重合
+            this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
+            if (this.compassMesh.material.opacity !== 0)
+                return;
+            this.compassMeshTween?.dispose();
+            this.compassMeshTween = tweenProgress(1000)
+                .onUpdate(({ progress }) => {
+                this.compassMesh?.material.setValues({ opacity: progress });
+                this.five.needsRender = true;
+            })
+                .play();
+        }
         // ======== fix entry door label position and rotation ========
-        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);
+        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);
+            // 不是客厅时，隐藏入户门指引
+            this.data?.room_observers[panoIndex].room.type === 1
+                ? this.entryDoorMesh?.material.setValues({ opacity: 1 })
+                : this.entryDoorMesh?.material.setValues({ opacity: 0 });
+        }
         // ======== fix room info ========
-        this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
-        this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
-        // 不是客厅时，隐藏入户门指引
-        this.data?.room_observers[panoIndex].room.type === 1
-            ? this.entryDoorMesh?.material.setValues({ opacity: 1 })
-            : this.entryDoorMesh?.material.setValues({ opacity: 0 });
+        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;
-        if (this.compassMesh.material.opacity !== 0)
-            return;
-        this.compassMeshTween?.dispose();
-        this.compassMeshTween = tweenProgress(1000)
-            .onUpdate(({ progress }) => {
-            this.compassMesh?.material.setValues({ opacity: progress });
-            this.five.needsRender = true;
-        })
-            .play();
     };
-    onFiveCameraDirectionUpdate = ({ longitude, latitude }) => {
+    onFiveCameraDirectionUpdate = ({ longitude, latitude, }) => {
         if (!this.roomInfoWrapperInstance)
             return;
         this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;

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

@@ -0,0 +1,36 @@
+import Line from '../Model/line';
+import Magnifier from '../Modules/Magnifier';
+import FiveHelper from '../Modules/FiveHelper';
+import { Group } from 'three';
+import { Model } from '../Model';
+import { PluginEvent } from '../typings/event.type';
+import { Five, Intersection, IntersectMeshInterface, Subscribe } from '@realsee/five';
+import { UserDistanceItem } from '../utils/distanceDom';
+export interface IControllerParams {
+    five: Five;
+    group: Group;
+    model: Model;
+    mouseGroup: Group;
+    container: Element;
+    magnifier: Magnifier;
+    fiveHelper: FiveHelper;
+    hook: Subscribe<PluginEvent>;
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export default abstract class BaseController {
+    protected five: Five;
+    protected group: Group;
+    protected model: Model;
+    protected disposed: 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/PanoMeasurePlugin/Controller/BaseController.js

@@ -0,0 +1,69 @@
+import { preventDefault } from '../utils/ironbox';
+export default class BaseController {
+    five;
+    group;
+    model;
+    disposed = false;
+    mouseGroup;
+    container;
+    fiveHelper;
+    hook;
+    magnifier;
+    userDistanceItemCreator;
+    constructor(params) {
+        // ==================== 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.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;
+    }
+    updateDistanceUI = () => {
+        this.model.lines.forEach((line) => line.distanceItem.update(this.five));
+    };
+    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.dispose();
+        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/PanoMeasurePlugin/Controller/EditController.d.ts

@@ -0,0 +1,52 @@
+import { Model } from '../Model';
+import Line from '../Model/line';
+import { LineJson } from '../typings/data';
+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;
+}

package/libs/PanoMeasurePlugin/Controller/EditController.js

@@ -0,0 +1,216 @@
+import Hammer from 'hammerjs';
+import { Model } from '../Model';
+import Line from '../Model/line';
+import Point from '../Model/point';
+import throttle from '../../shared-utils/throttle';
+import BaseController from './BaseController';
+import { getIntersectionFromEvent } from '../utils/getIntersectionFromEvent';
+export default class EditController extends BaseController {
+    type = 'edit';
+    model = new Model({ userDistanceItemCreator: this.userDistanceItemCreator });
+    pressPoint;
+    hasAppendDashed = false;
+    hasAppendMouseGroup = false;
+    fiveElement;
+    /** 上一个端点位置 */
+    lastPoint = null;
+    /** 鼠标点到上一个端点连接的虚线 */
+    dashed;
+    hammer;
+    /** 根据 intersection 更新放大镜和吸附点 */
+    onIntersectionUpdate = throttle((intersection, mesh) => {
+        if (this.hasAppendMouseGroup === false) {
+            this.group.add(this.mouseGroup);
+            this.magnifier.appendTo(this.container);
+            this.hasAppendMouseGroup = true;
+        }
+        const position = this.updateMouseGroup(intersection, mesh).position;
+        this.pressPoint?.position.copy(position);
+        this.updateDashed();
+        requestAnimationFrame(() => this.magnifier.updateWithPoint(this.mouseGroup.position));
+        this.five.needsRender = true;
+    }, 20);
+    constructor(params) {
+        super(params);
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        // ==================== 事件监听 ====================
+        // five
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsPanGesture', this.onWantsPanGesture);
+        this.five.on('wantsTapGesture', this.onWantsTapGesture);
+        this.five.on('wantsToMoveToPano', this.onWantsToMoveToPano);
+        this.five.on('intersectionOnModelUpdate', this.onIntersectionUpdate);
+        // model
+        this.model.hook.on('lineAdded', this.onLineChanged);
+        this.model.hook.on('lineRemoved', this.onLineChanged);
+        // hammer
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            this.fiveElement = fiveElement;
+            const hammer = new Hammer(fiveElement);
+            this.hammer = hammer;
+            hammer.on('tap', this.onTap);
+            hammer.on('pan', this.onPan);
+            hammer.on('press', this.onPress);
+            hammer.on('panend', this.onPanEnd);
+        }
+        // fiveElement
+        this.fiveElement?.addEventListener('mouseleave', this.onMouseLeave);
+        // ==================== 其他 ====================
+        this.hook.emit('anchorChange', null);
+        this.five.refresh();
+    }
+    dispose() {
+        super.dispose();
+        this.group.remove(this.mouseGroup, this.dashed.mesh);
+        // ==================== 解除事件监听 ====================
+        // five
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsPanGesture', this.onWantsPanGesture);
+        this.five.off('wantsTapGesture', this.onWantsTapGesture);
+        this.five.off('wantsToMoveToPano', this.onWantsToMoveToPano);
+        this.five.off('intersectionOnModelUpdate', this.onIntersectionUpdate);
+        // model
+        this.model.hook.off('lineAdded', this.onLineChanged);
+        this.model.hook.off('lineRemoved', this.onLineChanged);
+        // hammer
+        this.hammer?.destroy();
+        // fiveElement
+        this.fiveElement?.removeEventListener('mouseleave', this.onMouseLeave);
+        this.magnifier.dispose();
+        this.dashed.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    getEditingLines() {
+        return this.model.lines;
+    }
+    /** 撤销编辑 */
+    revoke = () => {
+        // ============ revoke points ============
+        // 如果当前没有虚线，只有起始点，需要删除起始点，重置起始状态。并删除虚线实例
+        if (this.model.lines.length === 0 && this.lastPoint) {
+            this.lastPoint = null;
+            this.hasAppendDashed = false;
+            this.dashed.distanceItem.remove();
+            this.group.remove(this.dashed.mesh);
+            this.hook.emit('anchorChange', null);
+            this.five.needsRender = true;
+            return;
+        }
+        if (this.model.lines.length === 0 && !this.lastPoint)
+            return;
+        if (!this.lastPoint)
+            return;
+        const revokedLine = this.model.lines[this.model.lines.length - 1];
+        const lastPoint = revokedLine.findAnotherPoint(this.lastPoint);
+        if (!lastPoint)
+            return;
+        this.lastPoint = lastPoint;
+        this.hook.emit('anchorChange', lastPoint.position);
+        // ============ revoke lines ============
+        this.group.remove(revokedLine.mesh);
+        this.model.removeLine(revokedLine);
+        // ============ revoke mouse group ============
+        this.hasAppendMouseGroup = false;
+        this.mouseGroup.position.copy(this.lastPoint.position);
+        this.group.remove(this.mouseGroup);
+        // ============ revoke lineDistance ============
+        revokedLine.distanceItem.remove();
+        // ============ revoke dashed ============
+        this.updateDashed();
+        // ============ revoke magnifier ============
+        this.magnifier.dispose();
+        this.five.needsRender = true;
+    };
+    onMouseLeave = () => {
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+        this.hasAppendMouseGroup = false;
+        if (this.lastPoint) {
+            this.mouseGroup.position.copy(this.lastPoint.position);
+            this.updateDashed();
+        }
+    };
+    /** 编辑线条发生改变时通知外部 */
+    onLineChanged = () => {
+        this.hook.emit('editedLineChange', this.model.lines.map((line) => line.toCompletelyJson()));
+    };
+    onPress = (e) => {
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        if (!intersection || !intersection.face)
+            return;
+        const nowPoint = new Point(intersection.point);
+        this.pressPoint = nowPoint;
+        this.onIntersectionUpdate(intersection);
+    };
+    /**
+     * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+     * 2. 如果有长按点，把长按点位置更新为当前位置
+     */
+    onPan = (e) => {
+        if (!this.pressPoint)
+            return;
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        if (!intersection || !intersection.face)
+            return;
+        this.onIntersectionUpdate(intersection);
+    };
+    onPanEnd = (e) => {
+        if (!this.pressPoint)
+            return;
+        this.onTap(e);
+    };
+    /**
+     * 1. 如果存在上一个点，需要绘制当前点到上一个点的连线
+     * 2. 把上一个点的位置更新为当前点的位置
+     * 3. 清除 mouseGroup 和 magnifier
+     */
+    onTap = (e) => {
+        if (!this.hasAppendDashed) {
+            this.dashed.distanceItem.appendTo(this.container);
+            this.group.add(this.dashed.mesh);
+        }
+        this.hasAppendDashed = true;
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        this.updateMouseGroup(intersection);
+        const nowPoint = new Point(this.mouseGroup.position);
+        const lastPoint = this.lastPoint;
+        if (nowPoint)
+            this.lastPoint = nowPoint;
+        if (nowPoint && lastPoint) {
+            const line = new Line(lastPoint, nowPoint, this.model);
+            line.distanceItem.appendTo(this.container);
+            this.model.addLine(line);
+            this.group.add(line.mesh);
+            line.distanceItem.update(this.five);
+        }
+        this.pressPoint = undefined;
+        this.hasAppendMouseGroup = false;
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+        this.updateDashed();
+        this.five.needsRender = true;
+        this.hook.emit('anchorChange', nowPoint.position);
+    };
+    onWantsTapGesture = () => false;
+    /** 编辑时取消走点 */
+    onWantsToMoveToPano = () => false;
+    /** 存在长按点时不能移动全景 */
+    onWantsPanGesture = () => (this.pressPoint ? false : undefined);
+    /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+    onCameraUpdate = () => {
+        this.updateDistanceUI();
+        this.dashed.distanceItem.update(this.five);
+    };
+    /** 更新虚线 */
+    updateDashed = () => {
+        if (!this.lastPoint)
+            return;
+        this.dashed.points[0].position.copy(this.lastPoint.position);
+        this.dashed.points[1].position.copy(this.mouseGroup.position);
+        this.dashed.mesh.setPoints(this.lastPoint.position, this.mouseGroup.position);
+        this.dashed.distanceItem.update(this.five);
+    };
+}

package/libs/PanoMeasurePlugin/Controller/ShortcutKeyController.d.ts

@@ -0,0 +1,12 @@
+import MeasureController from '.';
+import { Five } from '@realsee/five';
+/** 快捷键控制器 */
+export declare class ShortcutKeyController {
+    five: Five;
+    measureController: MeasureController;
+    constructor(measureController: MeasureController, five: Five);
+    dispose(): void;
+    private escape;
+    private onKeyDown;
+    private onMouseDown;
+}

package/libs/PanoMeasurePlugin/Controller/ShortcutKeyController.js

@@ -0,0 +1,44 @@
+/** 快捷键控制器 */
+export class ShortcutKeyController {
+    five;
+    measureController;
+    constructor(measureController, five) {
+        this.five = five;
+        this.measureController = measureController;
+        const fiveElement = this.five.getElement();
+        if (!fiveElement)
+            return;
+        document.body.addEventListener('keydown', this.onKeyDown);
+        fiveElement.addEventListener('mousedown', this.onMouseDown);
+    }
+    dispose() {
+        const fiveElement = this.five.getElement();
+        if (!fiveElement)
+            return;
+        document.body.removeEventListener('keydown', this.onKeyDown);
+        fiveElement.removeEventListener('mousedown', this.onMouseDown);
+    }
+    escape() {
+        if (this.measureController.getCurrentMode() === 'Watch')
+            return this.measureController.disable();
+        return this.measureController.changeMode('Watch');
+    }
+    onKeyDown = (e) => {
+        // Command + S -> 保存 & 更改场景
+        if (e.metaKey && e.code === 'KeyS') {
+            this.measureController.save().changeMode('Watch');
+            e.preventDefault();
+            return;
+        }
+        // Escape -> 切换到观察模式 / 如果已经在观察模式，退出功能
+        if (e.code === 'Escape')
+            return this.escape();
+    };
+    onMouseDown = (e) => {
+        // 鼠标右键取消
+        if (e.button !== 2)
+            return;
+        e.preventDefault();
+        this.escape();
+    };
+}

package/libs/PanoMeasurePlugin/Controller/WatchController.d.ts

@@ -0,0 +1,25 @@
+import Line from '../Model/line';
+import BaseController, { IControllerParams } from './BaseController';
+export default class WatchController extends BaseController {
+    type: string;
+    private deleteDom;
+    private highlightedLines;
+    private fiveElement?;
+    private editPointState?;
+    private hammer?;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    highlightLine(line: Line): void;
+    clearHighlightLines(): void;
+    private onPanStart;
+    private onPanEnd;
+    private onPan;
+    private onIntersectionUpdate;
+    private wantsPanGesture;
+    private wantsTapGesture;
+    private chooseLine;
+    private highlightLines;
+    private lineRemoved;
+    private onCameraUpdate;
+    private deleteDomClickCallback;
+}