@realsee/dnalogel 2.0.0-alpha.44 → 2.0.0-alpha.45

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

@@ -1,110 +0,0 @@
-export class GuideController {
-    constructor(measureController, params) {
-        Object.defineProperty(this, "measureController", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "textDom", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: document.createElement('span')
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: document.createElement('div')
-        });
-        Object.defineProperty(this, "hasAnchor", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "onModelChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (mode) => {
-                if (mode === 'Watch') {
-                    this.textDom.innerText = ``;
-                    return;
-                }
-                this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
-            }
-        });
-        Object.defineProperty(this, "anchorChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (anchor) => {
-                if (!this.hasAnchor && !!anchor) {
-                    this.hasAnchor = true;
-                    this.textDom.innerText = `选择下一个测量点，Esc或单击鼠标右键取消选择`;
-                }
-                else if (!anchor) {
-                    this.hasAnchor = false;
-                    this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
-                }
-            }
-        });
-        Object.defineProperty(this, "onEditedLineChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (lines) => {
-                if (lines.length === 1) {
-                    this.textDom.innerText = `可以连续选择测量点，或点击下方“结束”按钮完成测量（Esc取消，Command+S保存）`;
-                }
-            }
-        });
-        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);
-    }
-}

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

@@ -1,278 +0,0 @@
-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.js

@@ -1,128 +0,0 @@
-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.js

@@ -1,126 +0,0 @@
-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);
-        }
-    }
-}