@realsee/dnalogel 2.0.0-alpha.7 → 2.0.0-beta.36

package/libs/PanoMeasurePlugin/Modules/Magnifier.js

@@ -1,103 +1,278 @@
-import { Vector2 } from 'three';
+import Hammer from 'hammerjs';
+import * as THREE from 'three';
+import '../../shared-utils';
+import { Subscribe } from '@realsee/five';
 /** 交换数组元素 */
 function exchange(array, index1, index2) {
     const value = array[index1];
     array[index1] = array[index2];
     array[index2] = value;
 }
+/** 翻转 ArrayBuffer(RGBA像素) 的 Y 轴 */
+function flipPixelsY(pixels, width, height) {
+    const flipYLength = height / 2;
+    for (let currentHeight = 1; currentHeight <= flipYLength; currentHeight++) {
+        const targetHeight = height - (currentHeight - 1);
+        for (let currentWidth = 1; currentWidth <= width; currentWidth++) {
+            const pixelIndex = (currentHeight - 1) * width + currentWidth - 1;
+            const targetPixelIndex = (targetHeight - 1) * width + currentWidth - 1;
+            exchange(pixels, pixelIndex * 4 + 0, targetPixelIndex * 4 + 0);
+            exchange(pixels, pixelIndex * 4 + 1, targetPixelIndex * 4 + 1);
+            exchange(pixels, pixelIndex * 4 + 2, targetPixelIndex * 4 + 2);
+            exchange(pixels, pixelIndex * 4 + 3, targetPixelIndex * 4 + 3);
+        }
+    }
+}
 export default class Magnifier {
-    five;
-    scale;
-    width;
-    height;
-    pixelRatio;
-    originWidth;
-    originHeight;
-    context;
-    canvas = document.createElement('canvas');
-    container;
     constructor(five, options) {
+        var _a, _b, _c;
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "visible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
+        Object.defineProperty(this, "contentDom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('canvas')
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "scale", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapper", {
+            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, "offset", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { x: 0, y: 0 }
+        });
+        Object.defineProperty(this, "canvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.contentDom
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "renderCenter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new THREE.Vector3()
+        });
+        Object.defineProperty(this, "lastPanEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onPan", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                var _a, _b, _c, _d;
+                if (!this.wrapper)
+                    return;
+                const lastDeltaX = (_b = (_a = this.lastPanEvent) === null || _a === void 0 ? void 0 : _a.deltaX) !== null && _b !== void 0 ? _b : 0;
+                const lastDeltaY = (_d = (_c = this.lastPanEvent) === null || _c === void 0 ? void 0 : _c.deltaY) !== null && _d !== void 0 ? _d : 0;
+                const deltaX = event.deltaX - lastDeltaX;
+                const deltaY = event.deltaY - lastDeltaY;
+                this.lastPanEvent = event;
+                const prevented = this.hooks.emit('wantsPanGesture', { srcEvent: event, deltaX, deltaY });
+                if (prevented)
+                    return;
+                const translateX = this.offset.x + deltaX;
+                const translateY = this.offset.y + deltaY;
+                this.contentDom.style.boxShadow = '0 2px 30px 0 rgba(0,0,0,0.20)';
+                this.canvas.style.transform = `translate3d(${translateX}px, ${translateY}px, 100px)`;
+                this.offset = { x: translateX, y: translateY };
+            }
+        });
+        Object.defineProperty(this, "onPanEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                this.lastPanEvent = undefined;
+                this.contentDom.style.boxShadow = 'none';
+            }
+        });
         if (!five.renderer)
             throw new Error('Five Render 未初始化');
         this.five = five;
-        const scale = options.scale;
-        const pixelRatio = five.renderer.getPixelRatio();
-        const originWidth = options.width;
-        const originHeight = options.height;
-        const width = originWidth * pixelRatio;
-        const height = originHeight * pixelRatio;
-        const magnifier = this.canvas;
+        this.scale = (_a = options === null || options === void 0 ? void 0 : options.scale) !== null && _a !== void 0 ? _a : 2;
+        this.width = (_b = options === null || options === void 0 ? void 0 : options.width) !== null && _b !== void 0 ? _b : 190;
+        this.height = (_c = options === null || options === void 0 ? void 0 : options.height) !== null && _c !== void 0 ? _c : 190;
+        this.config = {
+            dragEnabled: (options === null || options === void 0 ? void 0 : options.dragEnabled) || false,
+            autoFixPCPosition: (options === null || options === void 0 ? void 0 : options.autoFixPCPosition) || false,
+            initialPosition: (options === null || options === void 0 ? void 0 : options.initialPosition) || { left: '0', top: '0' },
+        };
         const context = this.canvas.getContext('2d');
         if (!context)
             throw new Error('CANNOT CREATE CONTEXT2D');
-        this.scale = scale;
         this.context = context;
-        this.width = width;
-        this.height = height;
-        this.originWidth = originWidth;
-        this.originHeight = originHeight;
-        this.pixelRatio = pixelRatio;
-        magnifier.classList.add('plugin-measure-magnifier');
-        magnifier.style.position = 'absolute';
-        magnifier.style.pointerEvents = 'none';
-        magnifier.style.borderRadius = '50%';
-        magnifier.style.left = -width / 2 + 'px';
-        magnifier.style.top = -height - 90 + 'px';
-        magnifier.setAttribute('width', width.toString());
-        magnifier.setAttribute('height', height.toString());
-        this.canvas.style.width = originWidth + 'px';
-        this.canvas.style.height = originHeight + 'px';
+        if (this.config.dragEnabled) {
+            this.hammer = new Hammer(this.canvas);
+            this.hammer.on('pan', this.onPan);
+            this.hammer.on('panend', this.onPanEnd);
+            // this.hooks.on('wantsPanGesture', this.onMagnifierWantsPanGesture)
+        }
     }
     dispose() {
+        var _a;
         this.clear();
+        this.remove();
+        (_a = this.hammer) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    /** 移除放大镜 DOM */
+    remove() {
         this.canvas.remove();
+        this.visible = false;
     }
+    /** 清除放大镜渲染内容 */
     clear() {
         this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
     }
+    /** 把放大镜放到某一个容器中 */
     appendTo(element) {
-        this.container = element;
+        this.wrapper = element;
+        this.initStyle();
         element.append(this.canvas);
+        this.visible = true;
+    }
+    /** 放大传入点位周围的内容 */
+    renderWithPoint(point) {
+        if (!this.wrapper)
+            return;
+        this.renderCenter = point;
+        this.render();
+        if (this.config.autoFixPCPosition)
+            this.autoFixPCPosition();
     }
-    updateWithPoint(point) {
-        if (!this.five.renderer || !this.container)
+    autoFixPCPosition() {
+        if (!this.wrapper)
             return;
-        const { scale, pixelRatio, context, originWidth, originHeight, width, height } = this;
-        const position2d = point.clone().project(this.five.camera);
-        const left = ((position2d.x + 1) / 2) * this.container.clientWidth;
-        const right = (-(position2d.x - 1) / 2) * this.container.clientWidth;
-        const top = (-(position2d.y - 1) / 2) * this.container.clientHeight;
+        const { width, height } = this;
+        const position2d = this.renderCenter.clone().project(this.five.camera);
+        const left = ((position2d.x + 1) / 2) * this.wrapper.clientWidth;
+        const right = (-(position2d.x - 1) / 2) * this.wrapper.clientWidth;
+        const top = (-(position2d.y - 1) / 2) * this.wrapper.clientHeight;
         if (left < 183) {
-            this.canvas.style.top = -originHeight / 2 + 'px';
+            this.canvas.style.top = -height / 2 + 'px';
             this.canvas.style.left = 90 + 'px';
         }
         else if (top < 183) {
             this.canvas.style.top = 90 + 'px';
-            this.canvas.style.left = -originWidth / 2 + 'px';
+            this.canvas.style.left = -width / 2 + 'px';
         }
         else if (right < 183) {
-            this.canvas.style.top = -originHeight / 2 + 'px';
-            this.canvas.style.left = -originWidth - 90 + 'px';
+            this.canvas.style.top = -height / 2 + 'px';
+            this.canvas.style.left = -width - 90 + 'px';
         }
         else {
-            this.canvas.style.left = -originWidth / 2 + 'px';
-            this.canvas.style.top = -originHeight - 90 + 'px';
+            this.canvas.style.left = -width / 2 + 'px';
+            this.canvas.style.top = -height - 90 + 'px';
         }
         this.canvas.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
-        const renderSize = this.five.renderer.getSize(new Vector2());
+        this.offset = { x: left, y: top };
+    }
+    render() {
+        if (!this.five.renderer || !this.wrapper)
+            return;
+        const { scale, context, width, height } = this;
+        const position2d = this.renderCenter.clone().project(this.five.camera);
+        const renderSize = this.five.renderer.getSize(new THREE.Vector2());
+        // const pixelRatio = this.five.renderer.getPixelRatio()
+        // 安卓机型和ios部分机型在app里读不到像素，固定为1降低清晰度可以读到
+        const pixelRatio = 1;
+        // 从 renderTarget 读取区域的大小
+        const readPixelsWidth = width / scale;
+        const readPixelsHeight = height / scale;
+        // 一个像素重复多少倍，pixelRatio 是兼容屏幕像素比，scale 是真实重复倍数
+        const readPixelsRadio = pixelRatio * scale;
         const x = ((position2d.x + 1) / 2) * renderSize.x;
         const y = ((position2d.y + 1) / 2) * renderSize.y;
-        const pixels = this.five.getPixels(x - originWidth / scale / 2, y - originHeight / scale / 2, originWidth / scale, originHeight / scale, pixelRatio * scale);
-        const length = (width * height) / 2;
-        for (let index = 0; index < length; index++) {
-            const targetIndex = (height - Math.floor(index / width) - 1) * width + (index % width);
-            exchange(pixels, index * 4 + 0, targetIndex * 4 + 0);
-            exchange(pixels, index * 4 + 1, targetIndex * 4 + 1);
-            exchange(pixels, index * 4 + 2, targetIndex * 4 + 2);
-            exchange(pixels, index * 4 + 3, targetIndex * 4 + 3);
-        }
-        const imageData = context.createImageData(width, height);
+        const pixels = this.five.getPixels(x - readPixelsWidth / 2, y - readPixelsWidth / 2, readPixelsWidth, readPixelsHeight, readPixelsRadio);
+        // 最后生成的图像大小是 [width * pixelRatio, height * pixelRatio]
+        // 绘制在[width, height]的区域上
+        const imageWidth = Math.floor(width * pixelRatio);
+        const imageHeight = Math.floor(height * pixelRatio);
+        // 因为 Canvas 与 THREE Renderer Y 坐标相反，所以需要 Y 轴翻转
+        flipPixelsY(pixels, imageWidth, imageHeight);
+        const imageData = new ImageData(imageWidth, imageHeight);
         imageData.data.set(pixels);
         context.putImageData(imageData, 0, 0);
     }
+    initStyle() {
+        const canvas = this.canvas;
+        canvas.classList.add('five-plugin__magnifier');
+        canvas.style.position = 'absolute';
+        canvas.style.pointerEvents = 'all';
+        canvas.style.borderRadius = '50%';
+        canvas.style.zIndex = '99';
+        const pixelRatio = 1;
+        canvas.setAttribute('width', (this.width * pixelRatio).toString());
+        canvas.setAttribute('height', (this.height * pixelRatio).toString());
+        canvas.style.border = '2px solid rgba(255,255,255,0.20)';
+        canvas.style.width = this.width + 'px';
+        canvas.style.height = this.height + 'px';
+        canvas.style.top = this.config.initialPosition.top;
+        canvas.style.left = this.config.initialPosition.left;
+        canvas.style.transform = 'translate(0,0,100px)';
+        if (this.config.dragEnabled) {
+            this.canvas.style.cursor = 'pointer';
+        }
+    }
 }

package/libs/PanoMeasurePlugin/Modules/UIController/MainBtnController.d.ts

@@ -1,4 +1,4 @@
-import MeasureController from '../../Controller';
+import type MeasureController from '../../Controller';
 export declare class MainBtnController {
     private container;
     private measureController;

package/libs/PanoMeasurePlugin/Modules/UIController/MainBtnController.js

@@ -1,13 +1,86 @@
 import TWEEN from '@tweenjs/tween.js';
-import { mainIconStyle as mainIconStyle, mainItemStyle as mainItemStyle } from './style';
+import { mainIconStyle, mainItemStyle } from './style';
 import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween';
 import { MAIN_NORMAL_PATH, MAIN_DONE_PATH, MAIN_MOUSE_ENTER_FILL, MAIN_MOUSE_LEAVE_FILL } from './HTML';
 export class MainBtnController {
-    container;
-    measureController;
-    mainIconMaskTween;
-    mainElement;
     constructor(measureController, container) {
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mainIconMaskTween", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mainElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /* 鼠标移入时变成蓝色 */
+        Object.defineProperty(this, "onMouseEnter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { mainItem, pathDom } = this.mainElement;
+                mainItem.style.opacity = '1';
+                pathDom.setAttribute('fill', MAIN_MOUSE_ENTER_FILL);
+            }
+        });
+        /* 鼠标移出时变成灰色 */
+        Object.defineProperty(this, "onMouseLeave", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { mainItem, pathDom } = this.mainElement;
+                mainItem.style.opacity = '0.7';
+                pathDom.setAttribute('fill', MAIN_MOUSE_LEAVE_FILL);
+            }
+        });
+        Object.defineProperty(this, "onClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const mode = this.measureController.getCurrentMode();
+                mode === 'Watch' ? this.measureController.changeMode('Edit') : this.measureController.save().changeMode('Watch');
+            }
+        });
+        Object.defineProperty(this, "editedLineChangeHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (lines) => {
+                // 线的数量大于 1 时，没有状态的变化
+                if (lines.length > 1)
+                    return;
+                // 因为撤销导致的状态变更 -> 取消
+                if (lines.length === 0)
+                    return this.change2Cancel(false);
+                this.change2Done();
+            }
+        });
+        Object.defineProperty(this, "modeChangeHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                mode === 'Watch' ? this.change2Add() : this.change2Cancel();
+            }
+        });
         this.measureController = measureController;
         this.container = container;
         this.mainElement = this.getMainElement();
@@ -30,8 +103,8 @@ export class MainBtnController {
         const mainTextDom = this.container.querySelector('.fpm__main-text');
         const mainItem = this.container.querySelector('.fpm__main');
         const mainIcon = this.container.querySelector('.fpm__main-icon');
-        const pathDom = mainItem?.querySelector('.fpm__main-icon-path');
-        const maskWhiteRect = mainIcon?.querySelector('#fpm__main-icon-mask-white');
+        const pathDom = mainItem === null || mainItem === void 0 ? void 0 : mainItem.querySelector('.fpm__main-icon-path');
+        const maskWhiteRect = mainIcon === null || mainIcon === void 0 ? void 0 : mainIcon.querySelector('#fpm__main-icon-mask-white');
         if (!mainItem || !mainTextDom || !mainIcon || !pathDom || !maskWhiteRect)
             throw new Error('cannot find dom');
         return { mainTextDom, mainItem, mainIcon, pathDom, maskWhiteRect };
@@ -42,7 +115,7 @@ export class MainBtnController {
         mainIcon.style.transition = mainTextDom.innerText === '完成' ? 'none' : 'transform 300ms ease-in-out';
         mainIcon.style.transform = 'rotate(0deg)';
         mainTextDom.innerText = '添加';
-        pathDom?.setAttribute('d', MAIN_NORMAL_PATH);
+        pathDom === null || pathDom === void 0 ? void 0 : pathDom.setAttribute('d', MAIN_NORMAL_PATH);
     }
     change2Cancel(withAnime = true) {
         const { mainIcon, mainTextDom, pathDom } = this.mainElement;
@@ -54,6 +127,7 @@ export class MainBtnController {
         this.measureController.hook.on('editedLineChange', this.editedLineChangeHandler);
     }
     change2Done() {
+        var _a;
         const { mainTextDom, mainIcon, pathDom, maskWhiteRect } = this.getMainElement();
         if (mainTextDom.innerText === '完成')
             return;
@@ -62,41 +136,13 @@ export class MainBtnController {
         mainTextDom.innerText = '完成';
         pathDom.setAttribute('d', MAIN_DONE_PATH);
         pathDom.setAttribute('mask', `url(#fpm__main-icon-mask)`);
-        this.mainIconMaskTween?.dispose();
+        (_a = this.mainIconMaskTween) === null || _a === void 0 ? void 0 : _a.dispose();
         this.mainIconMaskTween = tweenProgress()
             .easing(TWEEN.Easing.Quartic.InOut)
             .onUpdate(({ progress }) => {
             maskWhiteRect.setAttribute('width', (progress * 30).toString());
         })
-            .onComplete(() => this.mainIconMaskTween?.dispose())
+            .onComplete(() => { var _a; return (_a = this.mainIconMaskTween) === null || _a === void 0 ? void 0 : _a.dispose(); })
             .play();
     }
-    /* 鼠标移入时变成蓝色 */
-    onMouseEnter = () => {
-        const { mainItem, pathDom } = this.mainElement;
-        mainItem.style.opacity = '1';
-        pathDom.setAttribute('fill', MAIN_MOUSE_ENTER_FILL);
-    };
-    /* 鼠标移出时变成灰色 */
-    onMouseLeave = () => {
-        const { mainItem, pathDom } = this.mainElement;
-        mainItem.style.opacity = '0.7';
-        pathDom.setAttribute('fill', MAIN_MOUSE_LEAVE_FILL);
-    };
-    onClick = () => {
-        const mode = this.measureController.getCurrentMode();
-        mode === 'Watch' ? this.measureController.changeMode('Edit') : this.measureController.save().changeMode('Watch');
-    };
-    editedLineChangeHandler = (lines) => {
-        // 线的数量大于 1 时，没有状态的变化
-        if (lines.length > 1)
-            return;
-        // 因为撤销导致的状态变更 -> 取消
-        if (lines.length === 0)
-            return this.change2Cancel(false);
-        this.change2Done();
-    };
-    modeChangeHandler = (mode) => {
-        mode === 'Watch' ? this.change2Add() : this.change2Cancel();
-    };
 }

package/libs/PanoMeasurePlugin/Modules/UIController/NewMainBtnController.d.ts

@@ -0,0 +1,12 @@
+import type MeasureController from '../../Controller';
+export declare class NewMainBtnController {
+    private container;
+    private measureController;
+    private mainElement;
+    constructor(measureController: MeasureController, container: Element);
+    dispose(): void;
+    private getMainElement;
+    private change2Add;
+    private change2Done;
+    private onClick;
+}

package/libs/PanoMeasurePlugin/Modules/UIController/NewMainBtnController.js

@@ -0,0 +1,98 @@
+import { newMainIconStyle, newMainItemStyle } from './style';
+export class NewMainBtnController {
+    constructor(measureController, container) {
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mainElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.mainElement.mainTextDom.innerText === '开始') {
+                    this.measureController.hook.emit('willChangeState', 'watching', 'editing');
+                    this.change2Done();
+                }
+                else {
+                    this.measureController.hook.emit('willChangeState', 'editing', 'watching');
+                    this.change2Add();
+                }
+            }
+        });
+        this.measureController = measureController;
+        this.container = container;
+        this.mainElement = this.getMainElement();
+        Object.assign(this.mainElement.mainIcon.style, newMainIconStyle);
+        Object.assign(this.mainElement.mainItem.style, newMainItemStyle);
+        this.change2Add();
+        this.mainElement.mainItem.addEventListener('click', this.onClick);
+    }
+    dispose() {
+        this.mainElement.mainItem.removeEventListener('click', this.onClick);
+    }
+    getMainElement() {
+        const mainTextDom = this.container.querySelector('.fpm__main-text');
+        const mainItem = this.container.querySelector('.fpm__main');
+        const mainIcon = this.container.querySelector('.fpm__main-icon');
+        if (!mainItem || !mainTextDom || !mainIcon)
+            throw new Error('cannot find dom');
+        return { mainTextDom, mainItem, mainIcon };
+    }
+    change2Add() {
+        const { mainIcon, mainTextDom } = this.mainElement;
+        if (mainIcon.className.includes('fpm__main__start'))
+            return;
+        if (mainIcon.className.includes('fpm__main__end')) {
+            mainIcon.style.transform = `scale(0.8)`;
+            if (mainTextDom.className.includes('fpm__main-text__show')) {
+                mainTextDom.classList.replace('fpm__main-text__show', 'fpm__main-text__hide');
+            }
+            else {
+                mainTextDom.classList.add('fpm__main-text__hide');
+            }
+            setTimeout(() => {
+                mainIcon.classList.replace('fpm__main__end', 'fpm__main__start');
+                mainIcon.style.transform = 'scale(1)';
+                mainTextDom.innerText = '开始';
+                mainTextDom.classList.replace('fpm__main-text__hide', 'fpm__main-text__show');
+            }, 200);
+        }
+    }
+    change2Done() {
+        const { mainTextDom, mainIcon } = this.mainElement;
+        if (mainTextDom.innerText === '结束')
+            return;
+        if (mainIcon.className.includes('fpm__main__end'))
+            return;
+        if (mainIcon.className.includes('fpm__main__start')) {
+            mainIcon.style.transform = `scale(0.8)`;
+            if (mainTextDom.className.includes('fpm__main-text__show')) {
+                mainTextDom.classList.replace('fpm__main-text__show', 'fpm__main-text__hide');
+            }
+            else {
+                mainTextDom.classList.add('fpm__main-text__hide');
+            }
+            setTimeout(() => {
+                mainIcon.classList.replace('fpm__main__start', 'fpm__main__end');
+                mainIcon.style.transform = 'scale(1)';
+                mainTextDom.innerText = '结束';
+                mainTextDom.classList.replace('fpm__main-text__hide', 'fpm__main-text__show');
+            }, 200);
+        }
+    }
+}

package/libs/PanoMeasurePlugin/Modules/UIController/Revoke/index.d.ts

@@ -1,4 +1,5 @@
-import MeasureController, { Mode } from '../../../Controller';
+import type { Mode } from '../../../Controller';
+import type MeasureController from '../../../Controller';
 export default class Revoke {
     private container;
     private revokeIcon;