@realsee/dnalogel 2.0.0-alpha.3 → 2.0.0-alpha.31-beta

package/libs/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/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 type 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,148 @@
+import TWEEN from '@tweenjs/tween.js';
+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 {
+    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();
+        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 === 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 };
+    }
+    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 === null || pathDom === void 0 ? void 0 : 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() {
+        var _a;
+        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)`);
+        (_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(() => { var _a; return (_a = this.mainIconMaskTween) === null || _a === void 0 ? void 0 : _a.dispose(); })
+            .play();
+    }
+}

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;
+}