@realsee/dnalogel 2.0.0-alpha.35 → 2.0.0-alpha.36

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

@@ -1,7 +1,4 @@
-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)';
+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>
@@ -45,73 +42,87 @@ const exitSvg = `
     />
   </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__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.7;
-    }
-    
+      opacity: 0.85;
+    }    
     .fpm__revoke.enabled:hover {
       opacity: 1;
     }
     
     .fpm__revoke-icon {
-      width: 40px;
-      height: 40px;
-      margin-top: 10px;
+      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__ui-item fpm__revoke">
-      ${revokeSvg}
-      <span class="fpm__text fpm__revoke-text">撤销</span>
+    <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__ui-item fpm__main">
-      ${mainSvg}
-      <span class="fpm__text fpm__main-text">添加</span>
+    <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__ui-item fpm__exit">
-      ${exitSvg}
-      <span class="fpm__text fpm__exit-text">退出</span>
+    <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/PanoMeasurePlugin/Modules/UIController/MainBtnController.d.ts

@@ -2,17 +2,14 @@ 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

@@ -1,7 +1,4 @@
-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", {
@@ -16,38 +13,30 @@ export class MainBtnController {
             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;
+                const { mainItem } = 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);
+                const { mainItem } = this.mainElement;
+                mainItem.style.opacity = '0.85';
             }
         });
         Object.defineProperty(this, "onClick", {
@@ -59,26 +48,12 @@ export class MainBtnController {
                 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();
+                mode === 'Watch' ? this.change2Add() : this.change2Done();
             }
         });
         this.measureController = measureController;
@@ -88,61 +63,64 @@ export class MainBtnController {
         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);
+        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.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);
+        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');
-        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)
+        if (!mainItem || !mainTextDom || !mainIcon)
             throw new Error('cannot find dom');
-        return { mainTextDom, mainItem, mainIcon, pathDom, maskWhiteRect };
+        return { mainTextDom, mainItem, mainIcon };
     }
     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);
+        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() {
-        var _a;
-        const { mainTextDom, mainIcon, pathDom, maskWhiteRect } = this.getMainElement();
-        if (mainTextDom.innerText === '完成')
+        const { mainTextDom, mainIcon } = this.getMainElement();
+        if (mainTextDom.innerText === '结束')
+            return;
+        if (mainIcon.className.includes('fpm__main__end'))
             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();
+        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/Revoke/index.js

@@ -37,11 +37,14 @@ export default class Revoke {
             configurable: true,
             writable: true,
             value: (mode) => {
-                if (mode !== 'Edit') {
+                if (mode !== 'Edit' && this.revokeItem.className.includes('enabled')) {
                     this.revokeItem.classList.remove('enabled');
                     return;
                 }
-                this.revokeItem.classList.add('enabled');
+                // 开始测量标记一个点后才能撤销
+                this.measureController.hook.on('anchorChange', (anchor) => {
+                    anchor && this.revokeItem.classList.add('enabled');
+                });
             }
         });
         Object.defineProperty(this, "handleRevoke", {
@@ -60,11 +63,11 @@ export default class Revoke {
             throw new Error('不正确的选择器');
         this.revokeIcon = revokeIcon;
         this.revokeItem = revokeItem;
-        this.revokeIcon.addEventListener('click', this.onClick);
+        this.revokeItem.addEventListener('click', this.onClick);
         measureController.hook.on('modeChange', this.onModeChange);
     }
     dispose() {
-        this.revokeIcon.removeEventListener('click', this.onClick);
+        this.revokeItem.removeEventListener('click', this.onClick);
         this.measureController.hook.off('modeChange', this.onModeChange);
     }
 }

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

@@ -1,8 +1,8 @@
 import htmlString from './HTML';
 import mobileHTMLString from './mobileHTML';
-import { uiWrapperStyle, operatingSpaceStyle, controllerBackgroundStyle, buttonGroupStyle, exitIconStyle, exitItemStyle, textStyle, } from './style';
+import { uiWrapperStyle, operatingSpaceStyle, controllerBackgroundStyle, exitIconStyle, exitItemStyle, textStyle, } from './style';
 import { MainBtnController } from './MainBtnController';
-import { NewMainBtnController } from './NewMainBtnController';
+import { mobileMainBtnController } from './mobileMainBtnController';
 import Revoke from './Revoke';
 export class UIController {
     constructor(measureController, params) {
@@ -57,17 +57,17 @@ export class UIController {
                     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 onMouseLeave = () => (exitItem.style.opacity = '0.85');
                 const handleClick = () => {
                     this.measureController.disable();
                 };
-                exitIcon.addEventListener('click', handleClick);
-                exitIcon.addEventListener('mouseenter', onMouseEnter);
-                exitIcon.addEventListener('mouseleave', onMouseLeave);
+                exitItem.addEventListener('click', handleClick);
+                exitItem.addEventListener('mouseenter', onMouseEnter);
+                exitItem.addEventListener('mouseleave', onMouseLeave);
                 return () => {
-                    exitIcon.removeEventListener('click', handleClick);
-                    exitIcon.removeEventListener('mouseenter', onMouseEnter);
-                    exitIcon.removeEventListener('mouseleave', onMouseLeave);
+                    exitItem.removeEventListener('click', handleClick);
+                    exitItem.removeEventListener('mouseenter', onMouseEnter);
+                    exitItem.removeEventListener('mouseleave', onMouseLeave);
                 };
             }
         });
@@ -78,13 +78,11 @@ export class UIController {
         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');
         const bgDom = this.container.querySelector('.fpm_ui-bg');
         const operatingSpaceDom = this.container.querySelector('.fpm_operating-space');
         Object.assign(bgDom === null || bgDom === void 0 ? void 0 : bgDom.style, controllerBackgroundStyle);
         Object.assign(operatingSpaceDom === null || operatingSpaceDom === void 0 ? void 0 : operatingSpaceDom.style, operatingSpaceStyle);
         Object.assign(this.container.style, uiWrapperStyle);
-        UIItems.forEach((item) => Object.assign(item.style, buttonGroupStyle));
         textDoms.forEach((item) => Object.assign(item.style, textStyle));
     }
     dispose() {
@@ -100,7 +98,7 @@ export class UIController {
             this.mainController = new MainBtnController(this.measureController, this.container);
         }
         else {
-            this.mainController = new NewMainBtnController(this.measureController, this.container);
+            this.mainController = new mobileMainBtnController(this.measureController, this.container);
         }
         this.disposers.push(this.handleExit());
         return this;

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

@@ -1,2 +1,4 @@
+export declare const startIconImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTUuMyUiIHk9Ii01LjMlIiB3aWR0aD0iMTEwLjUlIiBoZWlnaHQ9IjExMC41JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwLjUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48ZmlsdGVyIHg9Ii0xMS40JSIgeT0iLTExLjQlIiB3aWR0aD0iMTIyLjklIiBoZWlnaHQ9IjEyMi45JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19jIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dCbHVySW5uZXIxIi8+PGZlT2Zmc2V0IGluPSJzaGFkb3dCbHVySW5uZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldElubmVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93T2Zmc2V0SW5uZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIgcmVzdWx0PSJzaGFkb3dJbm5lcklubmVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4zIDAiIGluPSJzaGFkb3dJbm5lcklubmVyMSIvPjwvZmlsdGVyPjxmaWx0ZXIgeD0iLTEyNi42JSIgeT0iLTMzNy41JSIgd2lkdGg9IjM1My4xJSIgaGVpZ2h0PSI3NzUlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2UiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE2IiBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmlsdGVyPjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9IjAlIiBpZD0icHJlZml4X19kIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii43IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjI2LjQzMiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iODIuMzA1JSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjQiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJwcmVmaXhfX2YiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjA1IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIuMiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzNiIgY3k9IjM2IiByPSIyOC40NDQiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcHJlZml4X19jKSIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSJ1cmwoI3ByZWZpeF9fZCkiIHN0cm9rZS13aWR0aD0iLjQiIGZpbGwtb3BhY2l0eT0iLjI0MSIgZmlsbD0iI0ZGRiIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGN4PSIzNiIgY3k9IjM2IiByPSIyOC4yNDQiLz48ZWxsaXBzZSBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNTk2IiBmaWx0ZXI9InVybCgjcHJlZml4X19lKSIgY3g9IjM2IiBjeT0iMzYiIHJ4PSIxOC45NjMiIHJ5PSI3LjExMSIvPjxwYXRoIGQ9Ik0zNiAwQzE2LjExOCAwIDAgMTYuMTE4IDAgMzZzMTYuMTE4IDM2IDM2IDM2IDM2LTE2LjExOCAzNi0zNlM1NS44ODIgMCAzNiAwem0wIDQuNDQ0YzE3LjQyOCAwIDMxLjU1NiAxNC4xMjggMzEuNTU2IDMxLjU1NlM1My40MjggNjcuNTU2IDM2IDY3LjU1NiA0LjQ0NCA1My40MjggNC40NDQgMzYgMTguNTcyIDQuNDQ0IDM2IDQuNDQ0eiIgZmlsbD0idXJsKCNwcmVmaXhfX2YpIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+";
+export declare const endIconImage = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIxNS41MSUiIHkxPSIxMi40OTclIiB4Mj0iODUuMjY1JSIgeTI9Ijg2LjE0MyUiIGlkPSJwcmVmaXhfX2IiPjxzdG9wIHN0b3AtY29sb3I9IiM5NUFFRkYiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjNjM4NkZGIiBvZmZzZXQ9IjEwMCUiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9IjAlIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjOTlBRUZGIiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjI2LjQzMiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iODIuMzA1JSIvPjxzdG9wIHN0b3AtY29sb3I9IiM5OUFFRkYiIHN0b3Atb3BhY2l0eT0iLjQiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJwcmVmaXhfX2QiPjxzdG9wIHN0b3AtY29sb3I9IiM4Nzk3RDIiIHN0b3Atb3BhY2l0eT0iLjA1IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzYyNzdDNyIgc3RvcC1vcGFjaXR5PSIuMiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIHg9Ii02My4zJSIgeT0iLTE2OC44JSIgd2lkdGg9IjIyNi42JSIgaGVpZ2h0PSI0MzcuNSUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9InByZWZpeF9fYyI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iOCIgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48Y2lyY2xlIHN0cm9rZT0idXJsKCNwcmVmaXhfX2EpIiBzdHJva2Utd2lkdGg9Ii40IiBmaWxsPSJ1cmwoI3ByZWZpeF9fYikiIG9wYWNpdHk9Ii43IiBjeD0iMzYiIGN5PSIzNiIgcj0iMjguMjQ0Ii8+PGVsbGlwc2UgZmlsbD0iIzdDOTBEQSIgb3BhY2l0eT0iLjU5NiIgZmlsdGVyPSJ1cmwoI3ByZWZpeF9fYykiIGN4PSIzNiIgY3k9IjM2IiByeD0iMTguOTYzIiByeT0iNy4xMTEiLz48cGF0aCBkPSJNMzYgMEMxNi4xMTggMCAwIDE2LjExOCAwIDM2czE2LjExOCAzNiAzNiAzNiAzNi0xNi4xMTggMzYtMzZTNTUuODgyIDAgMzYgMHptMCA0LjQ0NGMxNy40MjggMCAzMS41NTYgMTQuMTI4IDMxLjU1NiAzMS41NTZTNTMuNDI4IDY3LjU1NiAzNiA2Ny41NTYgNC40NDQgNTMuNDI4IDQuNDQ0IDM2IDE4LjU3MiA0LjQ0NCAzNiA0LjQ0NHoiIGZpbGw9InVybCgjcHJlZml4X19kKSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9nPjwvc3ZnPg==";
 declare const _default: string;
 export default _default;

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

@@ -1,5 +1,5 @@
-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==`;
+export const startIconImage = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxmaWx0ZXIgeD0iLTUuMyUiIHk9Ii01LjMlIiB3aWR0aD0iMTEwLjUlIiBoZWlnaHQ9IjExMC41JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19hIj48ZmVPZmZzZXQgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93Qmx1ck91dGVyMSIgaW4yPSJTb3VyY2VBbHBoYSIgb3BlcmF0b3I9Im91dCIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwLjUgMCIgaW49InNoYWRvd0JsdXJPdXRlcjEiLz48L2ZpbHRlcj48ZmlsdGVyIHg9Ii0xMS40JSIgeT0iLTExLjQlIiB3aWR0aD0iMTIyLjklIiBoZWlnaHQ9IjEyMi45JSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0icHJlZml4X19jIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI0LjUiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dCbHVySW5uZXIxIi8+PGZlT2Zmc2V0IGluPSJzaGFkb3dCbHVySW5uZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldElubmVyMSIvPjxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93T2Zmc2V0SW5uZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIgcmVzdWx0PSJzaGFkb3dJbm5lcklubmVyMSIvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDEgMCAwIDAgMC4zIDAiIGluPSJzaGFkb3dJbm5lcklubmVyMSIvPjwvZmlsdGVyPjxmaWx0ZXIgeD0iLTEyNi42JSIgeT0iLTMzNy41JSIgd2lkdGg9IjM1My4xJSIgaGVpZ2h0PSI3NzUlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJwcmVmaXhfX2UiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjE2IiBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmlsdGVyPjxsaW5lYXJHcmFkaWVudCB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9IjAlIiBpZD0icHJlZml4X19kIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii43IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIwIiBvZmZzZXQ9IjI2LjQzMiUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iODIuMzA1JSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjQiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJwcmVmaXhfX2YiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjA1IiBvZmZzZXQ9IjAlIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0ZGRiIgc3RvcC1vcGFjaXR5PSIuMiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48Y2lyY2xlIGlkPSJwcmVmaXhfX2IiIGN4PSIzNiIgY3k9IjM2IiByPSIyOC40NDQiLz48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjcHJlZml4X19jKSIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjxjaXJjbGUgc3Ryb2tlPSJ1cmwoI3ByZWZpeF9fZCkiIHN0cm9rZS13aWR0aD0iLjQiIGZpbGwtb3BhY2l0eT0iLjI0MSIgZmlsbD0iI0ZGRiIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIGN4PSIzNiIgY3k9IjM2IiByPSIyOC4yNDQiLz48ZWxsaXBzZSBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNTk2IiBmaWx0ZXI9InVybCgjcHJlZml4X19lKSIgY3g9IjM2IiBjeT0iMzYiIHJ4PSIxOC45NjMiIHJ5PSI3LjExMSIvPjxwYXRoIGQ9Ik0zNiAwQzE2LjExOCAwIDAgMTYuMTE4IDAgMzZzMTYuMTE4IDM2IDM2IDM2IDM2LTE2LjExOCAzNi0zNlM1NS44ODIgMCAzNiAwem0wIDQuNDQ0YzE3LjQyOCAwIDMxLjU1NiAxNC4xMjggMzEuNTU2IDMxLjU1NlM1My40MjggNjcuNTU2IDM2IDY3LjU1NiA0LjQ0NCA1My40MjggNC40NDQgMzYgMTguNTcyIDQuNDQ0IDM2IDQuNDQ0eiIgZmlsbD0idXJsKCNwcmVmaXhfX2YpIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L2c+PC9zdmc+`;
+export 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>

package/libs/PanoMeasurePlugin/Modules/UIController/{NewMainBtnController.d.ts → mobileMainBtnController.d.ts}

@@ -1,5 +1,5 @@
 import type MeasureController from '../../Controller';
-export declare class NewMainBtnController {
+export declare class mobileMainBtnController {
     private container;
     private measureController;
     private mainElement;

package/libs/PanoMeasurePlugin/Modules/UIController/{NewMainBtnController.js → mobileMainBtnController.js}

@@ -1,5 +1,5 @@
-import { newMainIconStyle, newMainItemStyle } from './style';
-export class NewMainBtnController {
+import { mainIconStyle, mainItemStyle } from './style';
+export class mobileMainBtnController {
     constructor(measureController, container) {
         Object.defineProperty(this, "container", {
             enumerable: true,
@@ -37,8 +37,8 @@ export class NewMainBtnController {
         this.measureController = measureController;
         this.container = container;
         this.mainElement = this.getMainElement();
-        Object.assign(this.mainElement.mainIcon.style, newMainIconStyle);
-        Object.assign(this.mainElement.mainItem.style, newMainItemStyle);
+        Object.assign(this.mainElement.mainIcon.style, mainIconStyle);
+        Object.assign(this.mainElement.mainItem.style, mainItemStyle);
         this.change2Add();
         this.mainElement.mainItem.addEventListener('click', this.onClick);
     }

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

@@ -8,12 +8,9 @@ export declare const exitImage = "//vrlab-static.ljcdn.com/release/web/measure/e
 export declare const revokeImage = "//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png";
 export declare const uiWrapperStyle: Partial<CSSStyleDeclaration>;
 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>;

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

@@ -25,19 +25,12 @@ export const operatingSpaceStyle = {
     height: '89px',
     display: 'flex',
     justifyContent: 'space-between',
-    fontSize: '16px',
+    alignItems: 'center',
+    fontSize: '14px',
     pointerEvents: 'all',
     color: '#fff',
     zIndex: '10',
 };
-export const buttonGroupStyle = {
-    height: '100%',
-    width: 'max-content',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-};
 // 操作区下方的背景
 export const controllerBackgroundStyle = {
     position: 'absolute',
@@ -51,23 +44,13 @@ export const controllerBackgroundStyle = {
 };
 // item
 export const mainItemStyle = {
-    margin: '0 80px',
-    opacity: '0.7',
-};
-export const newMainItemStyle = {
-    margin: '0 80px',
+    margin: '0 64px',
 };
 export const exitItemStyle = {
-    opacity: '0.7',
+    opacity: '0.85',
 };
 // icon
 export const mainIconStyle = {
-    width: '60px',
-    height: '60px',
-    backgroundSize: '100%',
-    cursor: 'pointer',
-};
-export const newMainIconStyle = {
     width: '72px',
     height: '72px',
     backgroundSize: '100%',
@@ -75,9 +58,9 @@ export const newMainIconStyle = {
     transition: 'all 200ms ease-in-out',
 };
 export const exitIconStyle = {
-    width: '40px',
-    height: '40px',
-    marginTop: '10px',
+    width: '24px',
+    height: '24px',
+    marginRight: '4px',
     backgroundSize: '100%',
     cursor: 'pointer',
 };