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

package/libs/PanoMeasurePlugin/Modules/Magnifier.js

@@ -0,0 +1,103 @@
+import { Vector2 } from 'three';
+/** 交换数组元素 */
+function exchange(array, index1, index2) {
+    const value = array[index1];
+    array[index1] = array[index2];
+    array[index2] = value;
+}
+export default class Magnifier {
+    five;
+    scale;
+    width;
+    height;
+    pixelRatio;
+    originWidth;
+    originHeight;
+    context;
+    canvas = document.createElement('canvas');
+    container;
+    constructor(five, options) {
+        if (!five.renderer)
+            throw new Error('Five Render 未初始化');
+        this.five = five;
+        const scale = options.scale;
+        const pixelRatio = five.renderer.getPixelRatio();
+        const originWidth = options.width;
+        const originHeight = options.height;
+        const width = originWidth * pixelRatio;
+        const height = originHeight * pixelRatio;
+        const magnifier = this.canvas;
+        const context = this.canvas.getContext('2d');
+        if (!context)
+            throw new Error('CANNOT CREATE CONTEXT2D');
+        this.scale = scale;
+        this.context = context;
+        this.width = width;
+        this.height = height;
+        this.originWidth = originWidth;
+        this.originHeight = originHeight;
+        this.pixelRatio = pixelRatio;
+        magnifier.classList.add('plugin-measure-magnifier');
+        magnifier.style.position = 'absolute';
+        magnifier.style.pointerEvents = 'none';
+        magnifier.style.borderRadius = '50%';
+        magnifier.style.left = -width / 2 + 'px';
+        magnifier.style.top = -height - 90 + 'px';
+        magnifier.setAttribute('width', width.toString());
+        magnifier.setAttribute('height', height.toString());
+        this.canvas.style.width = originWidth + 'px';
+        this.canvas.style.height = originHeight + 'px';
+    }
+    dispose() {
+        this.clear();
+        this.canvas.remove();
+    }
+    clear() {
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
+    appendTo(element) {
+        this.container = element;
+        element.append(this.canvas);
+    }
+    updateWithPoint(point) {
+        if (!this.five.renderer || !this.container)
+            return;
+        const { scale, pixelRatio, context, originWidth, originHeight, width, height } = this;
+        const position2d = point.clone().project(this.five.camera);
+        const left = ((position2d.x + 1) / 2) * this.container.clientWidth;
+        const right = (-(position2d.x - 1) / 2) * this.container.clientWidth;
+        const top = (-(position2d.y - 1) / 2) * this.container.clientHeight;
+        if (left < 183) {
+            this.canvas.style.top = -originHeight / 2 + 'px';
+            this.canvas.style.left = 90 + 'px';
+        }
+        else if (top < 183) {
+            this.canvas.style.top = 90 + 'px';
+            this.canvas.style.left = -originWidth / 2 + 'px';
+        }
+        else if (right < 183) {
+            this.canvas.style.top = -originHeight / 2 + 'px';
+            this.canvas.style.left = -originWidth - 90 + 'px';
+        }
+        else {
+            this.canvas.style.left = -originWidth / 2 + 'px';
+            this.canvas.style.top = -originHeight - 90 + 'px';
+        }
+        this.canvas.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
+        const renderSize = this.five.renderer.getSize(new Vector2());
+        const x = ((position2d.x + 1) / 2) * renderSize.x;
+        const y = ((position2d.y + 1) / 2) * renderSize.y;
+        const pixels = this.five.getPixels(x - originWidth / scale / 2, y - originHeight / scale / 2, originWidth / scale, originHeight / scale, pixelRatio * scale);
+        const length = (width * height) / 2;
+        for (let index = 0; index < length; index++) {
+            const targetIndex = (height - Math.floor(index / width) - 1) * width + (index % width);
+            exchange(pixels, index * 4 + 0, targetIndex * 4 + 0);
+            exchange(pixels, index * 4 + 1, targetIndex * 4 + 1);
+            exchange(pixels, index * 4 + 2, targetIndex * 4 + 2);
+            exchange(pixels, index * 4 + 3, targetIndex * 4 + 3);
+        }
+        const imageData = context.createImageData(width, height);
+        imageData.data.set(pixels);
+        context.putImageData(imageData, 0, 0);
+    }
+}

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

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

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

@@ -0,0 +1,117 @@
+export const MAIN_NORMAL_PATH = 'M31.379 15.466a1.045 1.045 0 0 1-.92 1.076l-11.276.607a1.6 1.6 0 0 0-1.512 1.511l-.599 11.113a1.045 1.045 0 0 1-.92 1.075l-.164.008a1.183 1.183 0 0 1-1.123-.975l-.016-.164-.221-10.768a1.6 1.6 0 0 0-1.567-1.567l-11.3-.231-.165-.016a1.187 1.187 0 0 1-.964-.996l-.01-.127.007-.164c.061-.496.455-.876.958-.917l.118-.003 11.112-.599a1.6 1.6 0 0 0 1.498-1.37l.014-.142.607-11.276a1.045 1.045 0 0 1 1.076-.92c.573.015 1.055.46 1.13 1.019l.009.121.221 10.766a1.6 1.6 0 0 0 1.567 1.566l11.3.234a1.181 1.181 0 0 1 1.14 1.139z';
+export const MAIN_DONE_PATH = 'M27.1772552,8.15828895 C27.8664561,7.48070421 28.5574369,7.81156875 28.8336646,8.04968716 C29.1098924,8.28780557 29.3990219,9.110014 28.8256559,9.79263351 L28.7110903,9.9165024 L13.9697229,25.1399531 C13.3288458,25.7700285 12.3239388,25.8070917 11.6402346,25.2511429 L11.5159715,25.1399531 L3.7056151,18.0063788 C3.01641417,17.3287941 3.00699739,16.2207954 3.68458213,15.5315945 C4.32230894,14.8829348 5.3413021,14.8364368 6.03356826,15.3981178 L6.15936649,15.5105615 L12.6856594,21.9049888 L27.1772552,8.15828895 Z';
+export const MAIN_MOUSE_ENTER_FILL = 'url(#fpm__main-b)';
+export const MAIN_MOUSE_LEAVE_FILL = 'url(#fpm__main-c)';
+const revokeSvg = `
+  <svg class="fpm__revoke-icon" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="47.631%" y1="55.183%" x2="2.967%" y2="86.323%" id="fpm__revoke-a">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".5" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="5.297%" y1="43.016%" x2="38.238%" y2="79.932%" id="fpm__revoke-b">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity="0" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M13.388 7.108c.552 0 1.005.42 1.06.957l.006.11v1.224c0 .921.745 1.667 1.666 1.667h7.184c5.804 0 10.509 4.616 10.509 10.309 0 5.595-4.544 10.15-10.21 10.305l-.3.004H8.924c-.917 0-1.66-.729-1.66-1.628 0-.846.658-1.541 1.5-1.62l.16-.008h14.38c3.972 0 7.191-3.158 7.191-7.053 0-3.81-3.08-6.916-6.933-7.049l-.257-.004H10.029l-.109-.005H8.212c-.245 0-.482-.085-.67-.237l-.09-.082a1.066 1.066 0 0 1-.065-1.422l.079-.086 5.175-5.077c.2-.195.468-.305.747-.305z"
+      fill="url(#fpm__revoke-a)"
+      fill-rule="nonzero"
+      stroke="url(#fpm__revoke-b)"
+      stroke-width=".5"
+    />
+  </svg>
+`;
+const exitSvg = `
+  <svg class="fpm__exit-icon width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient x1="36.288%" y1="73.736%" x2="54.242%" y2="97.166%" id="fpm__exit-a">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".5" offset="100%" />
+      </linearGradient>
+      <linearGradient x1="100%" y1="47.234%" x2="24.047%" y2="47.234%" id="fpm__exit-b">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".005" offset="99.535%" />
+        <stop stop-color="#FFF" stop-opacity="0" offset="100%" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M22 7a1.5 1.5 0 0 1 .144 2.993L22 10h-9a1.5 1.5 0 0 0-1.493 1.356l-.007.144v17a1.5 1.5 0 0 0 1.356 1.493L13 30h9a1.5 1.5 0 0 1 .144 2.993L22 33h-9a4.5 4.5 0 0 1-4.495-4.288L8.5 28.5v-17a4.5 4.5 0 0 1 4.288-4.495L13 7h9zm6.317 7.755a1 1 0 0 1 .7.286l4.856 4.764a1 1 0 0 1-.7 1.713h-5.856V21.5h-8.032a1.5 1.5 0 1 1 0-3h6.365c.92 0 1.666-.746 1.667-1.667v-1.078a1 1 0 0 1 1-1z"
+      fill="url(#fpm__exit-a)"
+      fill-rule="nonzero"
+      stroke="url(#fpm__exit-b)"
+      stroke-width=".5"
+    />
+  </svg>
+`;
+const mainSvg = `
+  <svg class="fpm__main-icon" width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <mask id="fpm__main-icon-mask">
+        <rect id="fpm__main-icon-mask-black" x="0" y="0" width="30" height="30" fill="black"></rect>
+        <rect id="fpm__main-icon-mask-white" x="0" y="0" width="0" height="30" fill="white"></rect>
+      </mask>
+      <linearGradient id="fpm__main-a" x1="25.371%" y1="0%" x2="109.587%" y2="172.268%">
+        <stop stop-color="#FFF" offset="0%" />
+        <stop stop-color="#FFF" stop-opacity=".77" offset="44.051%" />
+        <stop stop-color="#FFF" stop-opacity=".201" offset="100%" />
+      </linearGradient>
+      <radialGradient id="fpm__main-b" fx="50%" fy="50%" r="50.864%" gradientTransform="matrix(-.98302 0 0 -1 .992 1)">
+        <stop stop-color="#2D7CFF" offset="0%" />
+        <stop stop-color="#2D7CFF" stop-opacity=".3" offset="100%" />
+      </radialGradient>
+      <radialGradient id="fpm__main-c" fx="50%" fy="50%" r="50.864%" gradientTransform="matrix(-.98302 0 0 -1 .992 1)">
+        <stop stop-opacity=".4" offset="0%" />
+        <stop stop-opacity=".12" offset="100%" />
+      </radialGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <circle fill="url(#fpm__main-a)" cx="30" cy="30" r="30" />
+      <path
+        class="fpm__main-icon-path"
+        d="${MAIN_NORMAL_PATH}"
+        fill="${MAIN_MOUSE_LEAVE_FILL}"
+        fill-rule="nonzero"
+        transform="translate(14 14)"
+      />
+    </g>
+  </svg>
+`;
+export default `
+  <style>
+    .fpm__revoke {
+      opacity: 0.3;
+    }
+    
+    .fpm__revoke.enabled {
+      opacity: 0.7;
+    }
+    
+    .fpm__revoke.enabled:hover {
+      opacity: 1;
+    }
+    
+    .fpm__revoke-icon {
+      width: 40px;
+      height: 40px;
+      margin-top: 10px;
+      cursor: pointer;
+    }  
+  </style>
+  <div class="fpm_ui-bg"></div>
+  <div class="fpm_operating-space">
+    <div class="fpm__ui-item fpm__revoke">
+      ${revokeSvg}
+      <span class="fpm__text fpm__revoke-text">撤销</span>
+    </div>
+    <div class="fpm__ui-item fpm__main">
+      ${mainSvg}
+      <span class="fpm__text fpm__main-text">添加</span>
+    </div>
+    <div class="fpm__ui-item fpm__exit">
+      ${exitSvg}
+      <span class="fpm__text fpm__exit-text">退出</span>
+    </div>
+  </div>
+`;

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

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

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

@@ -0,0 +1,102 @@
+import TWEEN from '@tweenjs/tween.js';
+import { mainIconStyle as mainIconStyle, mainItemStyle as mainItemStyle } from './style';
+import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween';
+import { MAIN_NORMAL_PATH, MAIN_DONE_PATH, MAIN_MOUSE_ENTER_FILL, MAIN_MOUSE_LEAVE_FILL } from './HTML';
+export class MainBtnController {
+    container;
+    measureController;
+    mainIconMaskTween;
+    mainElement;
+    constructor(measureController, container) {
+        this.measureController = measureController;
+        this.container = container;
+        this.mainElement = this.getMainElement();
+        Object.assign(this.mainElement.mainIcon.style, mainIconStyle);
+        Object.assign(this.mainElement.mainItem.style, mainItemStyle);
+        this.change2Add();
+        this.measureController.hook.on('modeChange', this.modeChangeHandler);
+        this.mainElement.mainIcon.addEventListener('click', this.onClick);
+        this.mainElement.mainIcon.addEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.measureController.hook.off('modeChange', this.modeChangeHandler);
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        this.mainElement.mainIcon.removeEventListener('click', this.onClick);
+        this.mainElement.mainIcon.removeEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+    getMainElement() {
+        const mainTextDom = this.container.querySelector('.fpm__main-text');
+        const mainItem = this.container.querySelector('.fpm__main');
+        const mainIcon = this.container.querySelector('.fpm__main-icon');
+        const pathDom = mainItem?.querySelector('.fpm__main-icon-path');
+        const maskWhiteRect = mainIcon?.querySelector('#fpm__main-icon-mask-white');
+        if (!mainItem || !mainTextDom || !mainIcon || !pathDom || !maskWhiteRect)
+            throw new Error('cannot find dom');
+        return { mainTextDom, mainItem, mainIcon, pathDom, maskWhiteRect };
+    }
+    change2Add() {
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        mainIcon.style.transition = mainTextDom.innerText === '完成' ? 'none' : 'transform 300ms ease-in-out';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '添加';
+        pathDom?.setAttribute('d', MAIN_NORMAL_PATH);
+    }
+    change2Cancel(withAnime = true) {
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        pathDom.setAttribute('d', MAIN_NORMAL_PATH);
+        pathDom.setAttribute('mask', '');
+        mainIcon.style.transition = withAnime ? 'transform 300ms ease-in-out' : 'none';
+        mainIcon.style.transform = 'rotate(45deg)';
+        mainTextDom && (mainTextDom.innerText = '取消');
+        this.measureController.hook.on('editedLineChange', this.editedLineChangeHandler);
+    }
+    change2Done() {
+        const { mainTextDom, mainIcon, pathDom, maskWhiteRect } = this.getMainElement();
+        if (mainTextDom.innerText === '完成')
+            return;
+        mainIcon.style.transition = 'none';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '完成';
+        pathDom.setAttribute('d', MAIN_DONE_PATH);
+        pathDom.setAttribute('mask', `url(#fpm__main-icon-mask)`);
+        this.mainIconMaskTween?.dispose();
+        this.mainIconMaskTween = tweenProgress()
+            .easing(TWEEN.Easing.Quartic.InOut)
+            .onUpdate(({ progress }) => {
+            maskWhiteRect.setAttribute('width', (progress * 30).toString());
+        })
+            .onComplete(() => this.mainIconMaskTween?.dispose())
+            .play();
+    }
+    /* 鼠标移入时变成蓝色 */
+    onMouseEnter = () => {
+        const { mainItem, pathDom } = this.mainElement;
+        mainItem.style.opacity = '1';
+        pathDom.setAttribute('fill', MAIN_MOUSE_ENTER_FILL);
+    };
+    /* 鼠标移出时变成灰色 */
+    onMouseLeave = () => {
+        const { mainItem, pathDom } = this.mainElement;
+        mainItem.style.opacity = '0.7';
+        pathDom.setAttribute('fill', MAIN_MOUSE_LEAVE_FILL);
+    };
+    onClick = () => {
+        const mode = this.measureController.getCurrentMode();
+        mode === 'Watch' ? this.measureController.changeMode('Edit') : this.measureController.save().changeMode('Watch');
+    };
+    editedLineChangeHandler = (lines) => {
+        // 线的数量大于 1 时，没有状态的变化
+        if (lines.length > 1)
+            return;
+        // 因为撤销导致的状态变更 -> 取消
+        if (lines.length === 0)
+            return this.change2Cancel(false);
+        this.change2Done();
+    };
+    modeChangeHandler = (mode) => {
+        mode === 'Watch' ? this.change2Add() : this.change2Cancel();
+    };
+}

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

@@ -0,0 +1,12 @@
+import MeasureController, { Mode } from '../../../Controller';
+export default class Revoke {
+    private container;
+    private revokeIcon;
+    private revokeItem;
+    private measureController;
+    constructor(measureController: MeasureController, container: Element);
+    dispose(): void;
+    onClick: () => void;
+    onModeChange: (mode: Mode) => void;
+    handleRevoke: () => () => void;
+}

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

@@ -0,0 +1,35 @@
+export default class Revoke {
+    container;
+    revokeIcon;
+    revokeItem;
+    measureController;
+    constructor(measureController, container) {
+        this.measureController = measureController;
+        this.container = container;
+        const revokeIcon = this.container.querySelector('.fpm__revoke-icon');
+        const revokeItem = this.container.querySelector('.fpm__revoke');
+        if (!revokeIcon || !revokeItem)
+            throw new Error('不正确的选择器');
+        this.revokeIcon = revokeIcon;
+        this.revokeItem = revokeItem;
+        this.revokeIcon.addEventListener('click', this.onClick);
+        measureController.hook.on('modeChange', this.onModeChange);
+    }
+    dispose() {
+        this.revokeIcon.removeEventListener('click', this.onClick);
+        this.measureController.hook.off('modeChange', this.onModeChange);
+    }
+    onClick = () => {
+        this.measureController.revoke();
+    };
+    onModeChange = (mode) => {
+        if (mode !== 'Edit') {
+            this.revokeItem.classList.remove('enabled');
+            return;
+        }
+        this.revokeItem.classList.add('enabled');
+    };
+    handleRevoke = () => {
+        return () => { };
+    };
+}

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

@@ -0,0 +1,16 @@
+import MeasureController from '../../Controller';
+export interface UIControllerParams {
+    container: Element;
+}
+export declare class UIController {
+    private revoke?;
+    private container;
+    private mainController?;
+    private disposers;
+    private measureController;
+    constructor(measureController: MeasureController, params: UIControllerParams);
+    dispose(): void;
+    show(): this;
+    hide(): this;
+    private handleExit;
+}

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

@@ -0,0 +1,69 @@
+import htmlString from './HTML';
+import { uiWrapperStyle, operatingSpaceStyle, controllerBackgroundStyle, buttonGroupStyle, exitIconStyle, exitItemStyle, textStyle, } from './style';
+import { MainBtnController } from './MainBtnController';
+import Revoke from './Revoke';
+export class UIController {
+    revoke;
+    container;
+    mainController;
+    disposers = [];
+    measureController;
+    constructor(measureController, params) {
+        this.measureController = measureController;
+        this.container = document.createElement('div');
+        this.container.innerHTML = htmlString;
+        this.container.classList.add('fpm__ui-controller');
+        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?.style, controllerBackgroundStyle);
+        Object.assign(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() {
+        this.hide();
+        this.container.remove();
+    }
+    show() {
+        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);
+        this.disposers.push(this.handleExit());
+        return this;
+    }
+    hide() {
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, 10px)';
+        this.revoke?.dispose();
+        this.mainController?.dispose();
+        this.disposers.forEach((disposer) => disposer());
+        this.disposers = [];
+        return this;
+    }
+    handleExit = () => {
+        const exitIcon = this.container.querySelector('.fpm__exit-icon');
+        const exitItem = this.container.querySelector('.fpm__exit');
+        if (!exitItem || !exitIcon)
+            throw new Error('cannot find dom');
+        Object.assign(exitItem.style, exitItemStyle);
+        Object.assign(exitIcon?.style, exitIconStyle);
+        const onMouseEnter = () => (exitItem.style.opacity = '1');
+        const onMouseLeave = () => (exitItem.style.opacity = '0.7');
+        const handleClick = () => {
+            this.measureController.disable();
+        };
+        exitIcon.addEventListener('click', handleClick);
+        exitIcon.addEventListener('mouseenter', onMouseEnter);
+        exitIcon.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            exitIcon.removeEventListener('click', handleClick);
+            exitIcon.removeEventListener('mouseenter', onMouseEnter);
+            exitIcon.removeEventListener('mouseleave', onMouseLeave);
+        };
+    };
+}

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

@@ -0,0 +1,17 @@
+export declare const addHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png";
+export declare const addNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png";
+export declare const cancelHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png";
+export declare const cancelNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png";
+export declare const doneHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png";
+export declare const doneNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png";
+export declare const exitImage = "//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png";
+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 exitItemStyle: Partial<CSSStyleDeclaration>;
+export declare const mainIconStyle: Partial<CSSStyleDeclaration>;
+export declare const exitIconStyle: Partial<CSSStyleDeclaration>;
+export declare const textStyle: Partial<CSSStyleDeclaration>;

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

@@ -0,0 +1,78 @@
+export const addHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png';
+export const addNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png';
+export const cancelHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png';
+export const cancelNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png';
+export const doneHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png';
+export const doneNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png';
+export const exitImage = '//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png';
+export const revokeImage = '//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png';
+export const uiWrapperStyle = {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    opacity: '0',
+    transform: 'translate(0, 10px)',
+    transition: 'opacity 500ms ease-in-out, transform 500ms ease-in-out',
+};
+export const operatingSpaceStyle = {
+    position: 'absolute',
+    left: '50%',
+    bottom: '32px',
+    transform: 'translateX(-50%)',
+    width: '300px',
+    height: '89px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: '16px',
+    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',
+    bottom: '0',
+    left: '0',
+    opacity: '0.5',
+    width: '100%',
+    height: '184px',
+    background: `linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%)`,
+    zIndex: '0',
+};
+// item
+export const mainItemStyle = {
+    margin: '0 80px',
+    opacity: '0.7',
+};
+export const exitItemStyle = {
+    opacity: '0.7',
+};
+// icon
+export const mainIconStyle = {
+    width: '60px',
+    height: '60px',
+    backgroundSize: '100%',
+    cursor: 'pointer',
+};
+export const exitIconStyle = {
+    width: '40px',
+    height: '40px',
+    marginTop: '10px',
+    backgroundSize: '100%',
+    cursor: 'pointer',
+};
+// text
+export const textStyle = {
+    cursor: 'default',
+    userSelect: 'none',
+};

package/libs/PanoMeasurePlugin/index.d.ts

@@ -0,0 +1,7 @@
+import { FivePlugin } from '@realsee/five';
+import MeasureController, { MeasurePluginParameter } from './Controller';
+declare const PanoMeasurePlugin: FivePlugin<MeasurePluginParameter, PluginReturns>;
+export default PanoMeasurePlugin;
+export declare type PluginReturns = MeasureController;
+export type { PluginEvent } from './typings/event.type';
+export type { LineJson, PointJson } from './typings/data';

package/libs/PanoMeasurePlugin/index.js

@@ -0,0 +1,5 @@
+import MeasureController from './Controller';
+const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+    return new MeasureController(five, params);
+};
+export default PanoMeasurePlugin;

package/libs/PanoMeasurePlugin/typings/data.d.ts

@@ -0,0 +1,28 @@
+export interface LineCompletelyJson {
+    id: string;
+    points: PointJson[];
+}
+export interface PolylineCompletelyJson {
+    id: string;
+    points: PointJson[];
+    lines: LineCompletelyJson[];
+}
+export interface LineJson {
+    id: string;
+    points: string[];
+}
+export interface PolylineJson {
+    id: string;
+    points: string[];
+    lines: string[];
+}
+export interface PointJson {
+    id: string;
+    lines: string[];
+    position: number[];
+}
+export interface PluginData {
+    lines: LineJson[];
+    points: PointJson[];
+    polylines: PolylineJson[];
+}

package/libs/PanoMeasurePlugin/typings/data.js

@@ -0,0 +1 @@
+export {};

package/libs/PanoMeasurePlugin/typings/event.type.d.ts

@@ -0,0 +1,28 @@
+import { SubscribeEventMap } from '@realsee/five';
+import { Vector3 } from 'three';
+import { Mode } from '../Controller';
+import { LineCompletelyJson } from './data';
+interface ControllerEvent extends SubscribeEventMap {
+    /**
+     * Mode 变更
+     */
+    modeChange: (mode: Mode) => void;
+}
+interface WatchEvent extends SubscribeEventMap {
+    selectedChange: (lines: LineCompletelyJson[]) => void;
+}
+interface EditEvent {
+    /**
+     * 编辑线条变更
+     */
+    editedLineChange: (lines: LineCompletelyJson[]) => void;
+    anchorChange: (anchor: Vector3 | null) => void;
+}
+interface DragEvent extends SubscribeEventMap {
+    wantsDragLine: (event: {
+        point: string;
+        lines: string[];
+    }) => boolean;
+}
+export declare type PluginEvent = ControllerEvent & EditEvent & WatchEvent & DragEvent;
+export {};