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

package/libs/src/PanoMeasurePlugin/Modules/Magnifier.js

@@ -0,0 +1,278 @@
+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 {
+    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;
+        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.context = context;
+        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.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();
+    }
+    autoFixPCPosition() {
+        if (!this.wrapper)
+            return;
+        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 = -height / 2 + 'px';
+            this.canvas.style.left = 90 + 'px';
+        }
+        else if (top < 183) {
+            this.canvas.style.top = 90 + 'px';
+            this.canvas.style.left = -width / 2 + 'px';
+        }
+        else if (right < 183) {
+            this.canvas.style.top = -height / 2 + 'px';
+            this.canvas.style.left = -width - 90 + 'px';
+        }
+        else {
+            this.canvas.style.left = -width / 2 + 'px';
+            this.canvas.style.top = -height - 90 + 'px';
+        }
+        this.canvas.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
+        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 - 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/src/PanoMeasurePlugin/Modules/UIController/HTML.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/libs/src/PanoMeasurePlugin/Modules/UIController/HTML.js

@@ -0,0 +1,128 @@
+import { endIconImage, startIconImage } from "./mobileHTML";
+const revokeSvg = `
+  <svg class="fpm__revoke-icon" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="47.631%" y1="55.183%" x2="2.967%" y2="86.323%" id="fpm__revoke-a">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".5" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="5.297%" y1="43.016%" x2="38.238%" y2="79.932%" id="fpm__revoke-b">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity="0" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M13.388 7.108c.552 0 1.005.42 1.06.957l.006.11v1.224c0 .921.745 1.667 1.666 1.667h7.184c5.804 0 10.509 4.616 10.509 10.309 0 5.595-4.544 10.15-10.21 10.305l-.3.004H8.924c-.917 0-1.66-.729-1.66-1.628 0-.846.658-1.541 1.5-1.62l.16-.008h14.38c3.972 0 7.191-3.158 7.191-7.053 0-3.81-3.08-6.916-6.933-7.049l-.257-.004H10.029l-.109-.005H8.212c-.245 0-.482-.085-.67-.237l-.09-.082a1.066 1.066 0 0 1-.065-1.422l.079-.086 5.175-5.077c.2-.195.468-.305.747-.305z"
+      fill="url(#fpm__revoke-a)"
+      fill-rule="nonzero"
+      stroke="url(#fpm__revoke-b)"
+      stroke-width=".5"
+    />
+  </svg>
+`;
+const exitSvg = `
+  <svg class="fpm__exit-icon width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="36.288%" y1="73.736%" x2="54.242%" y2="97.166%" id="fpm__exit-a">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".5" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="100%" y1="47.234%" x2="24.047%" y2="47.234%" id="fpm__exit-b">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".005" offset="99.535%" />
+        <stop stop-color="#FFF" stop-opacity="0" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M22 7a1.5 1.5 0 0 1 .144 2.993L22 10h-9a1.5 1.5 0 0 0-1.493 1.356l-.007.144v17a1.5 1.5 0 0 0 1.356 1.493L13 30h9a1.5 1.5 0 0 1 .144 2.993L22 33h-9a4.5 4.5 0 0 1-4.495-4.288L8.5 28.5v-17a4.5 4.5 0 0 1 4.288-4.495L13 7h9zm6.317 7.755a1 1 0 0 1 .7.286l4.856 4.764a1 1 0 0 1-.7 1.713h-5.856V21.5h-8.032a1.5 1.5 0 1 1 0-3h6.365c.92 0 1.666-.746 1.667-1.667v-1.078a1 1 0 0 1 1-1z"
+      fill="url(#fpm__exit-a)"
+      fill-rule="nonzero"
+      stroke="url(#fpm__exit-b)"
+      stroke-width=".5"
+    />
+  </svg>
+`;
+export default `
+  <style>
+    .fpm__other-btn {
+      height: 40px;
+      width: 88px;
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 20px;
+      overflow: hidden;    
+    }
+
+    .fpm__other-content {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .fpm__revoke {
+      opacity: 0.3;
+    }  
+    .fpm__revoke.enabled {
+      opacity: 0.85;
+    }    
+    .fpm__revoke.enabled:hover {
+      opacity: 1;
+    }
+    
+    .fpm__revoke-icon {
+      width: 24px;
+      height: 24px;
+      margin-right: 4px;
+      cursor: pointer;
+    }
+    
+    .fpm__main-btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .fpm__main-btn-text {
+      position: absolute;
+      font-weight: 500;
+      font-size: 14px;
+      color: #FFFFFF;
+      text-align: center;
+      text-shadow: 0 2px 8px rgba(0,0,0,0.50);
+      transition: all 200ms ease-in-out;
+    }
+    .fpm__main-text__hide {
+      transform: scale(0.8) translateY(4px);
+      opacity: 0;
+    }
+    .fpm__main-text__show {
+      transform: scale(1) translateY(0);
+      opacity: 1;
+    }
+    .fpm__main__start {
+      background-image: url(${startIconImage});
+    }
+    .fpm__main__end {
+      background-image: url(${endIconImage});
+    }
+    
+  </style>
+  <div class="fpm_ui-bg"></div>
+  <div class="fpm_operating-space">
+    <div class="fpm__other-btn">
+      <div class="fpm__other-content fpm__revoke">
+        ${revokeSvg}
+        <span class="fpm__text fpm__revoke-text">撤销</span>
+      </div>
+    </div>
+    <div class="fpm__main fpm__main-btn">
+      <div class="fpm__main-icon fpm__main__start"></div>
+      <div class="fpm__main-text fpm__main-btn-text">开始</div>
+    </div>
+    <div class="fpm__other-btn">
+      <div class="fpm__other-content fpm__exit">
+        ${exitSvg}
+        <span class="fpm__text fpm__exit-text">退出</span>
+      </div>
+    </div>
+  </div>
+`;

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

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

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

@@ -0,0 +1,126 @@
+import { mainIconStyle, mainItemStyle } from './style';
+export class MainBtnController {
+    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, "onMouseEnter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { mainItem } = this.mainElement;
+                mainItem.style.opacity = '1';
+            }
+        });
+        /* 鼠标移出时 */
+        Object.defineProperty(this, "onMouseLeave", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { mainItem } = this.mainElement;
+                mainItem.style.opacity = '0.85';
+            }
+        });
+        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, "modeChangeHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                mode === 'Watch' ? this.change2Add() : this.change2Done();
+            }
+        });
+        this.measureController = measureController;
+        this.container = container;
+        this.mainElement = this.getMainElement();
+        Object.assign(this.mainElement.mainIcon.style, mainIconStyle);
+        Object.assign(this.mainElement.mainItem.style, mainItemStyle);
+        this.change2Add();
+        this.measureController.hook.on('modeChange', this.modeChangeHandler);
+        this.mainElement.mainItem.addEventListener('click', this.onClick);
+        this.mainElement.mainItem.addEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainItem.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.measureController.hook.off('modeChange', this.modeChangeHandler);
+        this.mainElement.mainItem.removeEventListener('click', this.onClick);
+        this.mainElement.mainItem.removeEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainItem.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+    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.getMainElement();
+        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/src/PanoMeasurePlugin/Modules/UIController/Revoke/index.d.ts

@@ -0,0 +1,13 @@
+import type { Mode } from '../../../Controller';
+import type MeasureController from '../../../Controller';
+export default class Revoke {
+    private container;
+    private revokeIcon;
+    private revokeItem;
+    private measureController;
+    constructor(measureController: MeasureController, container: Element);
+    dispose(): void;
+    onClick: () => void;
+    onModeChange: (mode: Mode) => void;
+    handleRevoke: () => () => void;
+}

package/libs/src/PanoMeasurePlugin/Modules/UIController/Revoke/index.js

@@ -0,0 +1,73 @@
+export default class Revoke {
+    constructor(measureController, container) {
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "revokeIcon", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "revokeItem", {
+            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, "onClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.measureController.revoke();
+            }
+        });
+        Object.defineProperty(this, "onModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                if (mode !== 'Edit' && this.revokeItem.className.includes('enabled')) {
+                    this.revokeItem.classList.remove('enabled');
+                    return;
+                }
+                // 开始测量标记一个点后才能撤销
+                this.measureController.hook.on('anchorChange', (anchor) => {
+                    anchor && this.revokeItem.classList.add('enabled');
+                });
+            }
+        });
+        Object.defineProperty(this, "handleRevoke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return () => { };
+            }
+        });
+        this.measureController = measureController;
+        this.container = container;
+        const revokeIcon = this.container.querySelector('.fpm__revoke-icon');
+        const revokeItem = this.container.querySelector('.fpm__revoke');
+        if (!revokeIcon || !revokeItem)
+            throw new Error('不正确的选择器');
+        this.revokeIcon = revokeIcon;
+        this.revokeItem = revokeItem;
+        this.revokeItem.addEventListener('click', this.onClick);
+        measureController.hook.on('modeChange', this.onModeChange);
+    }
+    dispose() {
+        this.revokeItem.removeEventListener('click', this.onClick);
+        this.measureController.hook.off('modeChange', this.onModeChange);
+    }
+}

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

@@ -0,0 +1,20 @@
+import type MeasureController from '../../Controller';
+import type { OpenParameter } from '../../typings/data';
+export interface UIControllerParams {
+    container: Element;
+    openParams?: OpenParameter;
+}
+export declare type UIMode = 'pc' | 'mobile';
+export declare class UIController {
+    private revoke?;
+    private container;
+    private mainController?;
+    private disposers;
+    private measureController;
+    private mode;
+    constructor(measureController: MeasureController, params: UIControllerParams);
+    dispose(): void;
+    show(): this;
+    hide(): this;
+    private handleExit;
+}