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

package/libs/PanoMeasurePlugin/Modules/DeleteDom/_Assets/delete.svg.js

@@ -1,15 +1,12 @@
-const svg = `<svg class="fpm__delete-icon" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <linearGradient x1="21.443%" y1="100%" x2="67.281%" y2="6.672%" id="a">
-      <stop stop-color="#FFFCFC" stop-opacity=".6" offset="0%" />
-      <stop stop-color="#FFF" offset="100%" />
-    </linearGradient>
-  </defs>
-  <path
-    d="M14.932 3.545a.75.75 0 0 1 .102 1.494l-.102.006H13.83l-.979 8.813a2.05 2.05 0 0 1-1.882 1.818l-.155.006H4.868a2.05 2.05 0 0 1-2.037-1.824l-.98-8.813H.75a.75.75 0 0 1-.102-1.493l.102-.007h14.182zm-2.611 1.5H3.36l.961 8.648a.55.55 0 0 0 .369.46l.087.021.091.008h5.946a.55.55 0 0 0 .546-.49l.961-8.647zM10.795 0a.75.75 0 0 1 .102 1.493l-.102.007H4.886A.75.75 0 0 1 4.785.007L4.886 0h5.91z"
-    transform="translate(2.16 2.16)"
-    fill="url(#a)"
-    fill-rule="nonzero"
-  />
-</svg>`;
+const svg = `
+<svg class="fpm__delete-icon" width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="22.185491%" y1="100%" x2="66.8316686%" y2="6.67239121%" id="linearGradient-1">
+            <stop stop-color="#FFFCFC" stop-opacity="0.6" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>   
+     <path fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(2.16 2.16)" d="M11.2979686,2.71818182 C11.611378,2.71818182 11.8654465,2.97561809 11.8654465,3.29318182 C11.8654465,3.58428191 11.6519584,3.82485822 11.374972,3.86293275 L11.2979686,3.86818182 L10.464,3.868 L9.7236795,10.6246222 C9.64153248,11.3737453 9.04854423,11.9512142 8.32013277,12.0165596 L8.18206028,12.0227273 L3.68338622,12.0227273 C2.89302127,12.0227273 2.22904821,11.4205655 2.141767,10.6246222 L2.141767,10.6246222 L1.4,3.868 L0.567477876,3.86818182 C0.254068499,3.86818182 0,3.61074555 0,3.29318182 C0,3.00208173 0.213488114,2.76150541 0.49047449,2.72343089 L0.567477876,2.71818182 L11.2979686,2.71818182 Z M9.322,3.868 L2.542,3.868 L3.26978106,10.4976259 C3.28762252,10.6603274 3.39528004,10.7928487 3.53932022,10.8467307 L3.61412483,10.866894 L3.68338622,10.8727273 L8.18206028,10.8727273 C8.39410941,10.8727273 8.57224853,10.7111717 8.59566544,10.4976259 L8.59566544,10.4976259 L9.322,3.868 Z M8.16824216,0 C8.48165153,0 8.73572003,0.257436269 8.73572003,0.575 C8.73572003,0.866100087 8.52223192,1.1066764 8.24524554,1.14475093 L8.16824216,1.15 L3.69720434,1.15 C3.38379497,1.15 3.12972647,0.892563731 3.12972647,0.575 C3.12972647,0.283899913 3.34321458,0.0433235966 3.62020096,0.00524907226 L3.69720434,0 L8.16824216,0 Z"></path>                 
+</svg>
+`;
 export default svg;

package/libs/PanoMeasurePlugin/Modules/DeleteDom/_Assets/delete_bg.png.d.ts

@@ -1,2 +1,2 @@
-declare const image = "data:image/png;base64,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";
+declare const image = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIxMC43MDYlIiB5MT0iNDIuNzQ0JSIgeDI9Ijg5LjA2NCUiIHkyPSI1Ny4yMDglIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii4zMDgiIG9mZnNldD0iNDkuNTY5JSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iLS4yNSIgeT0iLS4yNSIgd2lkdGg9IjU3LjUiIGhlaWdodD0iMjMuNSIgcng9IjExLjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIiBmaWxsPSIjMkMyQzJDIiBzdHJva2U9InVybCgjcHJlZml4X19hKSIgc3Ryb2tlLXdpZHRoPSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9Ii4zMDMiLz48L3N2Zz4=";
 export default image;

package/libs/PanoMeasurePlugin/Modules/DeleteDom/_Assets/delete_bg.png.js

@@ -1,2 +1,2 @@
-const image = `data:image/png;base64,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`;
+const image = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTciIGhlaWdodD0iMjUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSIxMC43MDYlIiB5MT0iNDIuNzQ0JSIgeDI9Ijg5LjA2NCUiIHkyPSI1Ny4yMDglIiBpZD0icHJlZml4X19hIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii4zMDgiIG9mZnNldD0iNDkuNTY5JSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iLS4yNSIgeT0iLS4yNSIgd2lkdGg9IjU3LjUiIGhlaWdodD0iMjMuNSIgcng9IjExLjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIiBmaWxsPSIjMkMyQzJDIiBzdHJva2U9InVybCgjcHJlZml4X19hKSIgc3Ryb2tlLXdpZHRoPSIuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBmaWxsLW9wYWNpdHk9Ii4zMDMiLz48L3N2Zz4=`;
 export default image;

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

@@ -6,10 +6,13 @@ export default class DeleteDom {
     private lines;
     private points;
     private onClick;
+    private cancelDelete;
     private content;
     private container;
+    private masking;
     constructor(five: Five, opts?: {
         onClick?: (e: MouseEvent) => void;
+        cancelDelete?: (e: MouseEvent) => void;
     });
     dispose(): void;
     appendTo(element: Element): this;

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

@@ -33,6 +33,12 @@ export default class DeleteDom {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "cancelDelete", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "content", {
             enumerable: true,
             configurable: true,
@@ -45,6 +51,12 @@ export default class DeleteDom {
             writable: true,
             value: document.createElement('div')
         });
+        Object.defineProperty(this, "masking", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
         Object.defineProperty(this, "onMouseEnter", {
             enumerable: true,
             configurable: true,
@@ -63,26 +75,29 @@ export default class DeleteDom {
         });
         this.five = five;
         this.onClick = (opts === null || opts === void 0 ? void 0 : opts.onClick) || (() => void 0);
+        this.cancelDelete = (opts === null || opts === void 0 ? void 0 : opts.cancelDelete) || (() => void 0);
         // container
         this.container.classList.add('fpm__delete');
         this.container.style.opacity = '0';
         this.container.style.position = 'absolute';
         this.container.style.left = '0';
-        this.container.style.top = '0';
+        this.container.style.top = '10px';
         this.container.style.transform = `translate3d(0, 0, 10px)`;
         this.container.style.pointerEvents = `none`;
+        this.container.style.transition = 'top 200ms ease, opacity 200ms ease';
+        this.container.style.zIndex = '99';
         // content
         this.content.classList.add('fpm__delete-content');
-        this.content.style.width = '67px';
-        this.content.style.height = '31px';
+        this.content.style.width = '62px';
+        this.content.style.height = '26px';
         this.content.style.display = 'flex';
         this.content.style.alignItems = 'center';
         this.content.style.justifyContent = 'center';
         this.content.style.transform = 'translate(-50%, -50%)';
         this.content.style.color = '#fff';
-        this.content.style.fontSize = '14px';
-        this.content.style.lineHeight = '31px';
-        this.content.style.borderRadius = '15px';
+        this.content.style.fontSize = '12px';
+        this.content.style.lineHeight = '17px';
+        this.content.style.borderRadius = '11px';
         this.content.style.backgroundSize = '100% 100%';
         this.content.style.cursor = 'pointer';
         this.content.style.userSelect = 'none';
@@ -94,22 +109,30 @@ export default class DeleteDom {
         this.container.append(this.content);
         const deleteSvgDom = this.content.querySelector('.fpm__delete-icon');
         if (deleteSvgDom) {
-            deleteSvgDom.style.width = '20px';
-            deleteSvgDom.style.height = '20px';
-            deleteSvgDom.style.marginRight = '2px';
+            deleteSvgDom.style.width = '16px';
+            deleteSvgDom.style.height = '17px';
+            deleteSvgDom.style.marginRight = '1px';
         }
         this.content.addEventListener('click', this.onClick);
         this.content.addEventListener('mouseenter', this.onMouseEnter);
         this.content.addEventListener('mouseleave', this.onMouseLeave);
+        // masking
+        this.masking.setAttribute('style', 'position: absolute;top: 0;left: 0;bottom: 0;right: 0;pointer-events: none;');
+        this.masking.addEventListener('click', this.cancelDelete);
+        this.masking.addEventListener('touchstart', this.cancelDelete);
     }
     dispose() {
         this.content.removeEventListener('click', this.onClick);
         this.content.removeEventListener('mouseenter', this.onMouseEnter);
         this.content.removeEventListener('mouseleave', this.onMouseLeave);
         this.container.remove();
+        this.masking.removeEventListener('click', this.cancelDelete);
+        this.masking.removeEventListener('touchstart', this.cancelDelete);
+        this.masking.remove();
     }
     appendTo(element) {
         element.append(this.container);
+        element.append(this.masking);
         return this;
     }
     setLines(lines) {
@@ -133,20 +156,34 @@ export default class DeleteDom {
             return this;
         const centerScreenX = ((centerX + 1) / 2) * wrapper.clientWidth;
         const maxScreenY = (-(maxY - 1) / 2) * wrapper.clientHeight;
-        const x = centerScreenX;
-        const y = maxScreenY - 34;
+        let x = centerScreenX;
+        let y = maxScreenY - 34;
+        // 只有一条线时且斜率大时删除按钮位于右侧
+        if (this.lines.length === 1 && points.length === 2) {
+            const k = (yArray[1] - yArray[0]) / (xArray[1] - xArray[0]);
+            const centerY = (yArray[1] + yArray[0]) / 2;
+            const centerScreenY = (-(centerY - 1) / 2) * wrapper.clientHeight;
+            if (Math.abs(k) > 0.4) {
+                x = centerScreenX + 57;
+                y = centerScreenY;
+            }
+        }
         this.container.style.transform = `translate3d(${x}px, ${y}px, 10px)`;
         return this.show();
     }
     hide() {
         this.visible = false;
+        this.masking.style.pointerEvents = 'none';
         this.container.style.opacity = '0';
+        this.container.style.top = '10px';
         this.container.style.pointerEvents = 'none';
         return this;
     }
     show() {
         this.visible = true;
+        this.masking.style.pointerEvents = 'auto';
         this.container.style.opacity = '1';
+        this.container.style.top = '0';
         this.container.style.pointerEvents = 'auto';
         return this;
     }

package/libs/PanoMeasurePlugin/Modules/Magnifier.d.ts

@@ -1,24 +1,59 @@
 import type { Five } from '@realsee/five';
-import { Vector3 } from 'three';
-export interface MagnifierOptions {
-    width: number;
-    height: number;
-    scale: number;
+import Hammer from 'hammerjs';
+import * as THREE from 'three';
+import { Subscribe, SubscribeEventMap } from '@realsee/five';
+interface MagnifierEvent extends SubscribeEventMap {
+    wantsPanGesture: (data: {
+        deltaX: number;
+        deltaY: number;
+        srcEvent: typeof Hammer['Input'];
+    }) => boolean;
+}
+/** 放大镜配置参数 */
+export interface MagnifierParameter {
+    width?: number;
+    height?: number;
+    scale?: number;
+    /** 允许拖动放大镜 */
+    dragEnabled?: boolean;
+    /** renderWithPoint 时，是否应该自动更新放大镜的位置 */
+    autoFixPCPosition?: boolean;
+    /** 放大镜初始位置应该设置在容器的哪个位置 */
+    initialPosition?: {
+        left: string;
+        top: string;
+    };
 }
 export default class Magnifier {
+    width: number;
+    height: number;
+    visible: boolean;
+    hooks: Subscribe<MagnifierEvent>;
+    contentDom: HTMLCanvasElement;
     private five;
     private scale;
-    private width;
-    private height;
-    private pixelRatio;
-    private originWidth;
-    private originHeight;
-    private context;
+    private wrapper?;
+    private config;
+    private offset;
     private canvas;
-    private container?;
-    constructor(five: Five, options: MagnifierOptions);
+    private context;
+    private renderCenter;
+    private lastPanEvent?;
+    private hammer?;
+    constructor(five: Five, options: MagnifierParameter);
     dispose(): void;
+    /** 移除放大镜 DOM */
+    remove(): void;
+    /** 清除放大镜渲染内容 */
     clear(): void;
+    /** 把放大镜放到某一个容器中 */
     appendTo(element: Element): void;
-    updateWithPoint(point: Vector3): void;
+    /** 放大传入点位周围的内容 */
+    renderWithPoint(point: THREE.Vector3): void;
+    private autoFixPCPosition;
+    private render;
+    private initStyle;
+    private onPan;
+    private onPanEnd;
 }
+export {};

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 {