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

package/libs/PanoMeasurePlugin/Modules/DeleteDom/index.js

@@ -0,0 +1,108 @@
+import deleteSvg from './_Assets/delete.svg';
+import deleteBg from './_Assets/delete_bg.png';
+import deleteHoverBg from './_Assets/delete_hover_bg.png';
+export default class DeleteDom {
+    visible = false;
+    five;
+    lines = [];
+    points = [];
+    onClick;
+    content = document.createElement('div');
+    container = document.createElement('div');
+    constructor(five, opts) {
+        this.five = five;
+        this.onClick = opts?.onClick || (() => void 0);
+        // container
+        this.container.classList.add('fpm__delete');
+        this.container.style.opacity = '0';
+        this.container.style.position = 'absolute';
+        this.container.style.left = '0';
+        this.container.style.top = '0';
+        this.container.style.transform = `translate3d(0, 0, 10px)`;
+        this.container.style.pointerEvents = `none`;
+        // content
+        this.content.classList.add('fpm__delete-content');
+        this.content.style.width = '67px';
+        this.content.style.height = '31px';
+        this.content.style.display = 'flex';
+        this.content.style.alignItems = 'center';
+        this.content.style.justifyContent = 'center';
+        this.content.style.transform = 'translate(-50%, -50%)';
+        this.content.style.color = '#fff';
+        this.content.style.fontSize = '14px';
+        this.content.style.lineHeight = '31px';
+        this.content.style.borderRadius = '15px';
+        this.content.style.backgroundSize = '100% 100%';
+        this.content.style.cursor = 'pointer';
+        this.content.style.userSelect = 'none';
+        this.content.style.backgroundImage = `url(${deleteBg})`;
+        this.content.innerHTML = `
+      ${deleteSvg}
+      <span>删除</span>
+    `;
+        this.container.append(this.content);
+        const deleteSvgDom = this.content.querySelector('.fpm__delete-icon');
+        if (deleteSvgDom) {
+            deleteSvgDom.style.width = '20px';
+            deleteSvgDom.style.height = '20px';
+            deleteSvgDom.style.marginRight = '2px';
+        }
+        this.content.addEventListener('click', this.onClick);
+        this.content.addEventListener('mouseenter', this.onMouseEnter);
+        this.content.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.content.removeEventListener('click', this.onClick);
+        this.content.removeEventListener('mouseenter', this.onMouseEnter);
+        this.content.removeEventListener('mouseleave', this.onMouseLeave);
+        this.container.remove();
+    }
+    appendTo(element) {
+        element.append(this.container);
+        return this;
+    }
+    setLines(lines) {
+        this.lines = lines;
+        this.points = Array.from(new Set(this.lines.map((line) => [line.points[0], line.points[1]]).flat(1)));
+        return this;
+    }
+    updatePosition() {
+        if (this.lines.length === 0)
+            return this;
+        const points = this.points.map((point) => point.position);
+        const ndcPoints = points.map((point) => point.clone().project(this.five.camera));
+        if (ndcPoints.some((ndcPoint) => Math.abs(ndcPoint.z) > 1))
+            return this.hide();
+        const xArray = ndcPoints.map((point) => point.x);
+        const yArray = ndcPoints.map((point) => point.y);
+        const centerX = (Math.min(...xArray) + Math.max(...xArray)) / 2;
+        const maxY = Math.max(...yArray);
+        const wrapper = this.container.parentElement;
+        if (!wrapper)
+            return this;
+        const centerScreenX = ((centerX + 1) / 2) * wrapper.clientWidth;
+        const maxScreenY = (-(maxY - 1) / 2) * wrapper.clientHeight;
+        const x = centerScreenX;
+        const y = maxScreenY - 34;
+        this.container.style.transform = `translate3d(${x}px, ${y}px, 10px)`;
+        return this.show();
+    }
+    hide() {
+        this.visible = false;
+        this.container.style.opacity = '0';
+        this.container.style.pointerEvents = 'none';
+        return this;
+    }
+    show() {
+        this.visible = true;
+        this.container.style.opacity = '1';
+        this.container.style.pointerEvents = 'auto';
+        return this;
+    }
+    onMouseEnter = () => {
+        this.content.style.backgroundImage = `url(${deleteHoverBg})`;
+    };
+    onMouseLeave = () => {
+        this.content.style.backgroundImage = `url(${deleteBg})`;
+    };
+}

package/libs/PanoMeasurePlugin/Modules/FiveHelper.d.ts

@@ -0,0 +1,11 @@
+import { Line3, Vector3 } from 'three';
+import { Five, Intersection } from '@realsee/five';
+export default class FiveHelper {
+    edges: Line3[];
+    private five;
+    constructor(five: Five);
+    dispose(): void;
+    getAdsorbentPoint(intersection: Intersection): Vector3 | null;
+    /** 模型加载后获取折线 */
+    private onModelLoaded;
+}

package/libs/PanoMeasurePlugin/Modules/FiveHelper.js

@@ -0,0 +1,33 @@
+import { Vector3 } from 'three';
+export default class FiveHelper {
+    edges = [];
+    five;
+    constructor(five) {
+        this.five = five;
+        this.five.model.loaded ? this.onModelLoaded() : this.five.on('modelLoaded', this.onModelLoaded);
+    }
+    dispose() { }
+    getAdsorbentPoint(intersection) {
+        if (this.edges.length === 0)
+            return null;
+        let distance = Infinity;
+        let closestPoint;
+        this.edges.forEach((line) => {
+            const _closestPoint = line.closestPointToPoint(intersection.point, true, new Vector3());
+            const _distance = _closestPoint.distanceTo(intersection.point);
+            if (_distance < distance) {
+                closestPoint = _closestPoint;
+                distance = _distance;
+            }
+        });
+        if (distance > 0.1)
+            return null;
+        return closestPoint || null;
+    }
+    /** 模型加载后获取折线 */
+    onModelLoaded = () => {
+        if (!this.five.model)
+            return;
+        this.edges = this.five.model.getEdges();
+    };
+}

package/libs/PanoMeasurePlugin/Modules/GuideController.d.ts

@@ -0,0 +1,18 @@
+import MeasureController from '../Controller';
+export interface GuideControllerParams {
+    container: Element;
+}
+export declare class GuideController {
+    private measureController;
+    private textDom;
+    private container;
+    private hasAnchor;
+    constructor(measureController: MeasureController, params: GuideControllerParams);
+    dispose(): void;
+    show(): this;
+    hide(): this;
+    private initDom;
+    private onModelChange;
+    private anchorChange;
+    private onEditedLineChange;
+}

package/libs/PanoMeasurePlugin/Modules/GuideController.js

@@ -0,0 +1,75 @@
+export class GuideController {
+    measureController;
+    textDom = document.createElement('span');
+    container = document.createElement('div');
+    hasAnchor = false;
+    constructor(measureController, params) {
+        this.initDom();
+        params.container.append(this.container);
+        this.measureController = measureController;
+        measureController.hook.on('modeChange', this.onModelChange);
+        measureController.hook.on('anchorChange', this.anchorChange);
+        measureController.hook.on('editedLineChange', this.onEditedLineChange);
+    }
+    dispose() {
+        this.hide();
+        this.container.remove();
+    }
+    show() {
+        this.container.style.opacity = '1';
+        this.container.style.transform = 'translate(0, 0)';
+        return this;
+    }
+    hide() {
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, -10px)';
+        this.measureController.hook.off('modeChange', this.onModelChange);
+        this.measureController.hook.off('anchorChange', this.anchorChange);
+        this.measureController.hook.off('editedLineChange', this.onEditedLineChange);
+        return this;
+    }
+    initDom() {
+        const container = this.container;
+        const textDom = this.textDom;
+        container.classList.add('fpm__guide-container');
+        container.style.position = 'absolute';
+        container.style.top = '0px';
+        container.style.left = '0px';
+        container.style.width = '100%';
+        container.style.height = '110px';
+        container.style.display = 'flex';
+        container.style.alignItems = 'center';
+        container.style.justifyContent = 'center';
+        container.style.transform = 'translate(0, -10px)';
+        container.style.background = `linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.00) 100%)`;
+        container.style.transition = 'opacity 500ms ease-in-out, transform 500ms ease-in-out';
+        container.style.opacity = '0';
+        textDom.classList.add('fpm__guide-text');
+        textDom.style.color = '#fff';
+        textDom.style.fontSize = '20px';
+        textDom.innerText = `点击下方“添加”开始测距`;
+        container.appendChild(textDom);
+    }
+    onModelChange = (mode) => {
+        if (mode === 'Watch') {
+            this.textDom.innerText = ``;
+            return;
+        }
+        this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
+    };
+    anchorChange = (anchor) => {
+        if (!this.hasAnchor && !!anchor) {
+            this.hasAnchor = true;
+            this.textDom.innerText = `选择下一个测量点，Esc或单击鼠标右键取消选择`;
+        }
+        else if (!anchor) {
+            this.hasAnchor = false;
+            this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
+        }
+    };
+    onEditedLineChange = (lines) => {
+        if (lines.length === 1) {
+            this.textDom.innerText = `可以连续选择测量点，或点击下方“完成”结束测量（Esc取消，Command+S保存）`;
+        }
+    };
+}

package/libs/PanoMeasurePlugin/Modules/Magnifier.d.ts

@@ -0,0 +1,24 @@
+import { Five } from '@realsee/five';
+import { Vector3 } from 'three';
+export interface MagnifierOptions {
+    width: number;
+    height: number;
+    scale: number;
+}
+export default class Magnifier {
+    private five;
+    private scale;
+    private width;
+    private height;
+    private pixelRatio;
+    private originWidth;
+    private originHeight;
+    private context;
+    private canvas;
+    private container?;
+    constructor(five: Five, options: MagnifierOptions);
+    dispose(): void;
+    clear(): void;
+    appendTo(element: Element): void;
+    updateWithPoint(point: Vector3): void;
+}

package/libs/PanoMeasurePlugin/Modules/Magnifier.js

@@ -0,0 +1,103 @@
+import { Vector2 } from 'three';
+/** 交换数组元素 */
+function exchange(array, index1, index2) {
+    const value = array[index1];
+    array[index1] = array[index2];
+    array[index2] = value;
+}
+export default class Magnifier {
+    five;
+    scale;
+    width;
+    height;
+    pixelRatio;
+    originWidth;
+    originHeight;
+    context;
+    canvas = document.createElement('canvas');
+    container;
+    constructor(five, options) {
+        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;
+        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';
+    }
+    dispose() {
+        this.clear();
+        this.canvas.remove();
+    }
+    clear() {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    appendTo(element) {
+        this.container = element;
+        element.append(this.canvas);
+    }
+    updateWithPoint(point) {
+        if (!this.five.renderer || !this.container)
+            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;
+        if (left < 183) {
+            this.canvas.style.top = -originHeight / 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';
+        }
+        else if (right < 183) {
+            this.canvas.style.top = -originHeight / 2 + 'px';
+            this.canvas.style.left = -originWidth - 90 + 'px';
+        }
+        else {
+            this.canvas.style.left = -originWidth / 2 + 'px';
+            this.canvas.style.top = -originHeight - 90 + 'px';
+        }
+        this.canvas.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
+        const renderSize = this.five.renderer.getSize(new Vector2());
+        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);
+        imageData.data.set(pixels);
+        context.putImageData(imageData, 0, 0);
+    }
+}

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

@@ -0,0 +1,6 @@
+export declare const MAIN_NORMAL_PATH = "M31.379 15.466a1.045 1.045 0 0 1-.92 1.076l-11.276.607a1.6 1.6 0 0 0-1.512 1.511l-.599 11.113a1.045 1.045 0 0 1-.92 1.075l-.164.008a1.183 1.183 0 0 1-1.123-.975l-.016-.164-.221-10.768a1.6 1.6 0 0 0-1.567-1.567l-11.3-.231-.165-.016a1.187 1.187 0 0 1-.964-.996l-.01-.127.007-.164c.061-.496.455-.876.958-.917l.118-.003 11.112-.599a1.6 1.6 0 0 0 1.498-1.37l.014-.142.607-11.276a1.045 1.045 0 0 1 1.076-.92c.573.015 1.055.46 1.13 1.019l.009.121.221 10.766a1.6 1.6 0 0 0 1.567 1.566l11.3.234a1.181 1.181 0 0 1 1.14 1.139z";
+export declare const MAIN_DONE_PATH = "M27.1772552,8.15828895 C27.8664561,7.48070421 28.5574369,7.81156875 28.8336646,8.04968716 C29.1098924,8.28780557 29.3990219,9.110014 28.8256559,9.79263351 L28.7110903,9.9165024 L13.9697229,25.1399531 C13.3288458,25.7700285 12.3239388,25.8070917 11.6402346,25.2511429 L11.5159715,25.1399531 L3.7056151,18.0063788 C3.01641417,17.3287941 3.00699739,16.2207954 3.68458213,15.5315945 C4.32230894,14.8829348 5.3413021,14.8364368 6.03356826,15.3981178 L6.15936649,15.5105615 L12.6856594,21.9049888 L27.1772552,8.15828895 Z";
+export declare const MAIN_MOUSE_ENTER_FILL = "url(#fpm__main-b)";
+export declare const MAIN_MOUSE_LEAVE_FILL = "url(#fpm__main-c)";
+declare const _default: string;
+export default _default;

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

@@ -0,0 +1,117 @@
+export const MAIN_NORMAL_PATH = 'M31.379 15.466a1.045 1.045 0 0 1-.92 1.076l-11.276.607a1.6 1.6 0 0 0-1.512 1.511l-.599 11.113a1.045 1.045 0 0 1-.92 1.075l-.164.008a1.183 1.183 0 0 1-1.123-.975l-.016-.164-.221-10.768a1.6 1.6 0 0 0-1.567-1.567l-11.3-.231-.165-.016a1.187 1.187 0 0 1-.964-.996l-.01-.127.007-.164c.061-.496.455-.876.958-.917l.118-.003 11.112-.599a1.6 1.6 0 0 0 1.498-1.37l.014-.142.607-11.276a1.045 1.045 0 0 1 1.076-.92c.573.015 1.055.46 1.13 1.019l.009.121.221 10.766a1.6 1.6 0 0 0 1.567 1.566l11.3.234a1.181 1.181 0 0 1 1.14 1.139z';
+export const MAIN_DONE_PATH = 'M27.1772552,8.15828895 C27.8664561,7.48070421 28.5574369,7.81156875 28.8336646,8.04968716 C29.1098924,8.28780557 29.3990219,9.110014 28.8256559,9.79263351 L28.7110903,9.9165024 L13.9697229,25.1399531 C13.3288458,25.7700285 12.3239388,25.8070917 11.6402346,25.2511429 L11.5159715,25.1399531 L3.7056151,18.0063788 C3.01641417,17.3287941 3.00699739,16.2207954 3.68458213,15.5315945 C4.32230894,14.8829348 5.3413021,14.8364368 6.03356826,15.3981178 L6.15936649,15.5105615 L12.6856594,21.9049888 L27.1772552,8.15828895 Z';
+export const MAIN_MOUSE_ENTER_FILL = 'url(#fpm__main-b)';
+export const MAIN_MOUSE_LEAVE_FILL = 'url(#fpm__main-c)';
+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>
+`;
+const mainSvg = `
+  <svg class="fpm__main-icon" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <mask id="fpm__main-icon-mask">
+        <rect id="fpm__main-icon-mask-black" x="0" y="0" width="30" height="30" fill="black"></rect>
+        <rect id="fpm__main-icon-mask-white" x="0" y="0" width="0" height="30" fill="white"></rect>
+      </mask>
+      <linearGradient id="fpm__main-a" x1="25.371%" y1="0%" x2="109.587%" y2="172.268%">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".77" offset="44.051%" />
+        <stop stop-color="#FFF" stop-opacity=".201" offset="100%" />
+      </linearGradient>
+      <radialGradient id="fpm__main-b" fx="50%" fy="50%" r="50.864%" gradientTransform="matrix(-.98302 0 0 -1 .992 1)">
+        <stop stop-color="#2D7CFF" offset="0%" />
+        <stop stop-color="#2D7CFF" stop-opacity=".3" offset="100%" />
+      </radialGradient>
+      <radialGradient id="fpm__main-c" fx="50%" fy="50%" r="50.864%" gradientTransform="matrix(-.98302 0 0 -1 .992 1)">
+        <stop stop-opacity=".4" offset="0%" />
+        <stop stop-opacity=".12" offset="100%" />
+      </radialGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <circle fill="url(#fpm__main-a)" cx="30" cy="30" r="30" />
+      <path
+        class="fpm__main-icon-path"
+        d="${MAIN_NORMAL_PATH}"
+        fill="${MAIN_MOUSE_LEAVE_FILL}"
+        fill-rule="nonzero"
+        transform="translate(14 14)"
+      />
+    </g>
+  </svg>
+`;
+export default `
+  <style>
+    .fpm__revoke {
+      opacity: 0.3;
+    }
+    
+    .fpm__revoke.enabled {
+      opacity: 0.7;
+    }
+    
+    .fpm__revoke.enabled:hover {
+      opacity: 1;
+    }
+    
+    .fpm__revoke-icon {
+      width: 40px;
+      height: 40px;
+      margin-top: 10px;
+      cursor: pointer;
+    }  
+  </style>
+  <div class="fpm_ui-bg"></div>
+  <div class="fpm_operating-space">
+    <div class="fpm__ui-item fpm__revoke">
+      ${revokeSvg}
+      <span class="fpm__text fpm__revoke-text">撤销</span>
+    </div>
+    <div class="fpm__ui-item fpm__main">
+      ${mainSvg}
+      <span class="fpm__text fpm__main-text">添加</span>
+    </div>
+    <div class="fpm__ui-item fpm__exit">
+      ${exitSvg}
+      <span class="fpm__text fpm__exit-text">退出</span>
+    </div>
+  </div>
+`;

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

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

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

@@ -0,0 +1,102 @@
+import TWEEN from '@tweenjs/tween.js';
+import { mainIconStyle as mainIconStyle, mainItemStyle as 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) {
+        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.mainIcon.addEventListener('click', this.onClick);
+        this.mainElement.mainIcon.addEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.measureController.hook.off('modeChange', this.modeChangeHandler);
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        this.mainElement.mainIcon.removeEventListener('click', this.onClick);
+        this.mainElement.mainIcon.removeEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.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');
+        const pathDom = mainItem?.querySelector('.fpm__main-icon-path');
+        const maskWhiteRect = 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 };
+    }
+    change2Add() {
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        mainIcon.style.transition = mainTextDom.innerText === '完成' ? 'none' : 'transform 300ms ease-in-out';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '添加';
+        pathDom?.setAttribute('d', MAIN_NORMAL_PATH);
+    }
+    change2Cancel(withAnime = true) {
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        pathDom.setAttribute('d', MAIN_NORMAL_PATH);
+        pathDom.setAttribute('mask', '');
+        mainIcon.style.transition = withAnime ? 'transform 300ms ease-in-out' : 'none';
+        mainIcon.style.transform = 'rotate(45deg)';
+        mainTextDom && (mainTextDom.innerText = '取消');
+        this.measureController.hook.on('editedLineChange', this.editedLineChangeHandler);
+    }
+    change2Done() {
+        const { mainTextDom, mainIcon, pathDom, maskWhiteRect } = this.getMainElement();
+        if (mainTextDom.innerText === '完成')
+            return;
+        mainIcon.style.transition = 'none';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '完成';
+        pathDom.setAttribute('d', MAIN_DONE_PATH);
+        pathDom.setAttribute('mask', `url(#fpm__main-icon-mask)`);
+        this.mainIconMaskTween?.dispose();
+        this.mainIconMaskTween = tweenProgress()
+            .easing(TWEEN.Easing.Quartic.InOut)
+            .onUpdate(({ progress }) => {
+            maskWhiteRect.setAttribute('width', (progress * 30).toString());
+        })
+            .onComplete(() => this.mainIconMaskTween?.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/Revoke/index.d.ts

@@ -0,0 +1,12 @@
+import MeasureController, { Mode } 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;
+}