@realsee/dnalogel 2.0.0-alpha.29 → 2.0.0-alpha.30

package/libs/PanoMeasurePlugin/Modules/Magnifier.js

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

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

@@ -1,5 +1,5 @@
 import TWEEN from '@tweenjs/tween.js';
-import { mainIconStyle as mainIconStyle, mainItemStyle as mainItemStyle } from './style';
+import { mainIconStyle, mainItemStyle } from './style';
 import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween';
 import { MAIN_NORMAL_PATH, MAIN_DONE_PATH, MAIN_MOUSE_ENTER_FILL, MAIN_MOUSE_LEAVE_FILL } from './HTML';
 export class MainBtnController {

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

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

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

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

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

@@ -1,13 +1,17 @@
 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;

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

@@ -1,9 +1,12 @@
 import htmlString from './HTML';
+import mobileHTMLString from './mobileHTML';
 import { uiWrapperStyle, operatingSpaceStyle, controllerBackgroundStyle, buttonGroupStyle, exitIconStyle, exitItemStyle, textStyle, } from './style';
 import { MainBtnController } from './MainBtnController';
+import { NewMainBtnController } from './NewMainBtnController';
 import Revoke from './Revoke';
 export class UIController {
     constructor(measureController, params) {
+        var _a, _b;
         Object.defineProperty(this, "revoke", {
             enumerable: true,
             configurable: true,
@@ -34,6 +37,12 @@ export class UIController {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "mode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "handleExit", {
             enumerable: true,
             configurable: true,
@@ -43,8 +52,10 @@ export class UIController {
                 const exitItem = this.container.querySelector('.fpm__exit');
                 if (!exitItem || !exitIcon)
                     throw new Error('cannot find dom');
-                Object.assign(exitItem.style, exitItemStyle);
-                Object.assign(exitIcon === null || exitIcon === void 0 ? void 0 : exitIcon.style, exitIconStyle);
+                if (this.mode === 'pc') {
+                    Object.assign(exitItem.style, exitItemStyle);
+                    Object.assign(exitIcon === null || exitIcon === void 0 ? void 0 : exitIcon.style, exitIconStyle);
+                }
                 const onMouseEnter = () => (exitItem.style.opacity = '1');
                 const onMouseLeave = () => (exitItem.style.opacity = '0.7');
                 const handleClick = () => {
@@ -61,9 +72,10 @@ export class UIController {
             }
         });
         this.measureController = measureController;
+        this.mode = ((_a = params.openParams) === null || _a === void 0 ? void 0 : _a.isMobile) ? 'mobile' : 'pc';
         this.container = document.createElement('div');
-        this.container.innerHTML = htmlString;
-        this.container.classList.add('fpm__ui-controller');
+        this.container.innerHTML = ((_b = params.openParams) === null || _b === void 0 ? void 0 : _b.isMobile) ? mobileHTMLString : htmlString;
+        this.container.classList.add('fpm__ui-controller', this.mode);
         params.container.appendChild(this.container);
         const textDoms = this.container.querySelectorAll('.fpm__text');
         const UIItems = this.container.querySelectorAll('.fpm__ui-item');
@@ -83,8 +95,13 @@ export class UIController {
         this.container.style.display = 'block';
         this.container.style.opacity = '1';
         this.container.style.transform = 'translate(0, 0)';
-        this.revoke = new Revoke(this.measureController, this.container);
-        this.mainController = new MainBtnController(this.measureController, this.container);
+        if (this.mode === 'pc') {
+            this.revoke = new Revoke(this.measureController, this.container);
+            this.mainController = new MainBtnController(this.measureController, this.container);
+        }
+        else {
+            this.mainController = new NewMainBtnController(this.measureController, this.container);
+        }
         this.disposers.push(this.handleExit());
         return this;
     }
@@ -93,7 +110,7 @@ export class UIController {
         this.container.style.display = 'none';
         this.container.style.opacity = '0';
         this.container.style.transform = 'translate(0, 10px)';
-        (_a = this.revoke) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.mode === 'pc' && ((_a = this.revoke) === null || _a === void 0 ? void 0 : _a.dispose());
         (_b = this.mainController) === null || _b === void 0 ? void 0 : _b.dispose();
         this.disposers.forEach((disposer) => disposer());
         this.disposers = [];

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

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

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

@@ -0,0 +1,80 @@
+const startIconImage = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTUuMyUiIHk9Ii01LjMlIiB3aWR0aD0iMTEwLjUlIiBoZWlnaHQ9IjExMC41JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwLjUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48ZmlsdGVyIHg9Ii0xMS40JSIgeT0iLTExLjQlIiB3aWR0aD0iMTIyLjklIiBoZWlnaHQ9IjEyMi45JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19jIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dCbHVySW5uZXIxIi8+PGZlT2Zmc2V0IGluPSJzaGFkb3dCbHVySW5uZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldElubmVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93T2Zmc2V0SW5uZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIgcmVzdWx0PSJzaGFkb3dJbm5lcklubmVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4zIDAiIGluPSJzaGFkb3dJbm5lcklubmVyMSIvPjwvZmlsdGVyPjxmaWx0ZXIgeD0iLTEyNi42JSIgeT0iLTMzNy41JSIgd2lkdGg9IjM1My4xJSIgaGVpZ2h0PSI3NzUlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2UiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE2IiBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmlsdGVyPjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9IjAlIiBpZD0icHJlZml4X19kIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii43IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjI2LjQzMiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iODIuMzA1JSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjQiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJwcmVmaXhfX2YiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjA1IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIuMiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzNiIgY3k9IjM2IiByPSIyOC40NDQiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcHJlZml4X19jKSIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSJ1cmwoI3ByZWZpeF9fZCkiIHN0cm9rZS13aWR0aD0iLjQiIGZpbGwtb3BhY2l0eT0iLjI0MSIgZmlsbD0iI0ZGRiIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGN4PSIzNiIgY3k9IjM2IiByPSIyOC4yNDQiLz48ZWxsaXBzZSBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNTk2IiBmaWx0ZXI9InVybCgjcHJlZml4X19lKSIgY3g9IjM2IiBjeT0iMzYiIHJ4PSIxOC45NjMiIHJ5PSI3LjExMSIvPjxwYXRoIGQ9Ik0zNiAwQzE2LjExOCAwIDAgMTYuMTE4IDAgMzZzMTYuMTE4IDM2IDM2IDM2IDM2LTE2LjExOCAzNi0zNlM1NS44ODIgMCAzNiAwem0wIDQuNDQ0YzE3LjQyOCAwIDMxLjU1NiAxNC4xMjggMzEuNTU2IDMxLjU1NlM1My40MjggNjcuNTU2IDM2IDY3LjU1NiA0LjQ0NCA1My40MjggNC40NDQgMzYgMTguNTcyIDQuNDQ0IDM2IDQuNDQ0eiIgZmlsbD0idXJsKCNwcmVmaXhfX2YpIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+`;
+const endIconImage = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIxNS41MSUiIHkxPSIxMi40OTclIiB4Mj0iODUuMjY1JSIgeTI9Ijg2LjE0MyUiIGlkPSJwcmVmaXhfX2IiPjxzdG9wIHN0b3AtY29sb3I9IiM5NUFFRkYiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjM4NkZGIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9IjAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjOTlBRUZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjI2LjQzMiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iODIuMzA1JSIvPjxzdG9wIHN0b3AtY29sb3I9IiM5OUFFRkYiIHN0b3Atb3BhY2l0eT0iLjQiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJwcmVmaXhfX2QiPjxzdG9wIHN0b3AtY29sb3I9IiM4Nzk3RDIiIHN0b3Atb3BhY2l0eT0iLjA1IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzYyNzdDNyIgc3RvcC1vcGFjaXR5PSIuMiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIHg9Ii02My4zJSIgeT0iLTE2OC44JSIgd2lkdGg9IjIyNi42JSIgaGVpZ2h0PSI0MzcuNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InByZWZpeF9fYyI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iOCIgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0idXJsKCNwcmVmaXhfX2EpIiBzdHJva2Utd2lkdGg9Ii40IiBmaWxsPSJ1cmwoI3ByZWZpeF9fYikiIG9wYWNpdHk9Ii43IiBjeD0iMzYiIGN5PSIzNiIgcj0iMjguMjQ0Ii8+PGVsbGlwc2UgZmlsbD0iIzdDOTBEQSIgb3BhY2l0eT0iLjU5NiIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYykiIGN4PSIzNiIgY3k9IjM2IiByeD0iMTguOTYzIiByeT0iNy4xMTEiLz48cGF0aCBkPSJNMzYgMEMxNi4xMTggMCAwIDE2LjExOCAwIDM2czE2LjExOCAzNiAzNiAzNiAzNi0xNi4xMTggMzYtMzZTNTUuODgyIDAgMzYgMHptMCA0LjQ0NGMxNy40MjggMCAzMS41NTYgMTQuMTI4IDMxLjU1NiAzMS41NTZTNTMuNDI4IDY3LjU1NiAzNiA2Ny41NTYgNC40NDQgNTMuNDI4IDQuNDQ0IDM2IDE4LjU3MiA0LjQ0NCAzNiA0LjQ0NHoiIGZpbGw9InVybCgjcHJlZml4X19kKSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvc3ZnPg==`;
+const exitIconSvg = `
+  <svg class="fpm__exit-icon width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="86.3016741%" id="radialGradient-1">
+        <stop stop-color="#FFFFFF" offset="0%"></stop>
+        <stop stop-color="#FFFFFF" stop-opacity="0.3" offset="100%"></stop>
+      </radialGradient>
+      <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="70.7106781%" id="radialGradient-2">
+        <stop stop-color="#FFFFFF" offset="0%"></stop>
+        <stop stop-color="#FFFFFF" stop-opacity="0" offset="100%"></stop>
+      </radialGradient>
+    </defs>
+      <g fill="url(#radialGradient-1)" fill-rule="nonzero" stroke="url(#radialGradient-2)" stroke-width="0.2">
+        <path d="M19.1859205,4.10000004 C19.3691554,4.09993923 19.5526088,4.16602323 19.6925352,4.29904206 C19.8171021,4.41745965 19.8858582,4.56899486 19.8980316,4.7239943 C19.9103475,4.88080848 19.8647874,5.04088037 19.7661957,5.16777131 L19.7661957,5.16777131 L14.3769795,11.1697063 C14.1649599,11.4058657 14.0589501,11.7029328 14.0589501,12 C14.0589501,12.2970672 14.1649599,12.5941343 14.3769795,12.8302937 L14.3769795,12.8302937 L19.6928862,18.7509889 C19.8173649,18.8694879 19.8860087,19.0210672 19.8980683,19.1760728 C19.9102693,19.3328965 19.8645908,19.4929392 19.7701664,19.6153111 C19.6099275,19.772809 19.4324896,19.8610254 19.2586274,19.8856752 C19.0810547,19.910851 18.9081905,19.8692156 18.765363,19.7704965 L18.765363,19.7704965 L11.9999322,13.2904645 L5.32508998,19.6962598 C5.16077108,19.8156635 4.99335965,19.8785989 4.83451361,19.8898888 C4.67442082,19.9012674 4.52389835,19.8596921 4.3968979,19.7731206 C4.23619359,19.588506 4.14871527,19.4164558 4.12392544,19.2589757 C4.09801173,19.094356 4.14341261,18.9485987 4.23380428,18.8322287 L4.23380428,18.8322287 L9.62302046,12.8302937 C9.81773049,12.6134147 9.92302682,12.3451662 9.93892926,12.0727274 C9.95499717,11.7974536 9.87975312,11.5179151 9.70614397,11.2737767 L9.70614397,11.2737767 L4.31595492,5.25860214 C4.17860663,5.08857057 4.11166276,4.9104714 4.11172409,4.7432513 C4.11178577,4.57506821 4.18051603,4.41972395 4.30746483,4.29904206 C4.43371817,4.17902131 4.59543385,4.11349344 4.76041858,4.10187732 L4.76041858,4.10187732 L12.0000677,10.7085251 L18.6794563,4.29937602 C18.8192839,4.16626546 19.0026873,4.10006086 19.1859205,4.10000004 Z" id="形状结合"></path>
+      </g>
+  </svg>
+`;
+export default `
+  <style>
+  .mobile .fpm__exit {
+    position: absolute;
+    top: 53px;
+    left: 16px;
+    width: 24px;
+    height: 24px;
+    z-index: 10;
+    pointer-events: all;
+  }
+  .mobile .fpm__exit-icon {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+  .fpm_operating--mobile {
+    padding-bottom: 23px;
+  }
+  .fpm__main-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 !important;
+  }
+  .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__exit">
+    ${exitIconSvg}
+  </div>
+  <div class="fpm_ui-bg"></div>
+  <div class="fpm_operating-space fpm_operating--mobile">
+    <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>
+`;

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

@@ -11,7 +11,9 @@ export declare const operatingSpaceStyle: Partial<CSSStyleDeclaration>;
 export declare const buttonGroupStyle: Partial<CSSStyleDeclaration>;
 export declare const controllerBackgroundStyle: Partial<CSSStyleDeclaration>;
 export declare const mainItemStyle: Partial<CSSStyleDeclaration>;
+export declare const newMainItemStyle: Partial<CSSStyleDeclaration>;
 export declare const exitItemStyle: Partial<CSSStyleDeclaration>;
 export declare const mainIconStyle: Partial<CSSStyleDeclaration>;
+export declare const newMainIconStyle: Partial<CSSStyleDeclaration>;
 export declare const exitIconStyle: Partial<CSSStyleDeclaration>;
 export declare const textStyle: Partial<CSSStyleDeclaration>;