@realsee/dnalogel 2.0.0-alpha.9 → 2.0.0

package/libs/PanoMeasurePlugin/Modules/Magnifier.js

@@ -1,103 +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 {
-    five;
-    scale;
-    width;
-    height;
-    pixelRatio;
-    originWidth;
-    originHeight;
-    context;
-    canvas = document.createElement('canvas');
-    container;
     constructor(five, options) {
+        var _a, _b, _c;
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "visible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
+        Object.defineProperty(this, "contentDom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('canvas')
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "scale", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "offset", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { x: 0, y: 0 }
+        });
+        Object.defineProperty(this, "canvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.contentDom
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "renderCenter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new THREE.Vector3()
+        });
+        Object.defineProperty(this, "lastPanEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onPan", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                var _a, _b, _c, _d;
+                if (!this.wrapper)
+                    return;
+                const lastDeltaX = (_b = (_a = this.lastPanEvent) === null || _a === void 0 ? void 0 : _a.deltaX) !== null && _b !== void 0 ? _b : 0;
+                const lastDeltaY = (_d = (_c = this.lastPanEvent) === null || _c === void 0 ? void 0 : _c.deltaY) !== null && _d !== void 0 ? _d : 0;
+                const deltaX = event.deltaX - lastDeltaX;
+                const deltaY = event.deltaY - lastDeltaY;
+                this.lastPanEvent = event;
+                const prevented = this.hooks.emit('wantsPanGesture', { srcEvent: event, deltaX, deltaY });
+                if (prevented)
+                    return;
+                const translateX = this.offset.x + deltaX;
+                const translateY = this.offset.y + deltaY;
+                this.contentDom.style.boxShadow = '0 2px 30px 0 rgba(0,0,0,0.20)';
+                this.canvas.style.transform = `translate3d(${translateX}px, ${translateY}px, 100px)`;
+                this.offset = { x: translateX, y: translateY };
+            }
+        });
+        Object.defineProperty(this, "onPanEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (event) => {
+                this.lastPanEvent = undefined;
+                this.contentDom.style.boxShadow = 'none';
+            }
+        });
         if (!five.renderer)
             throw new Error('Five Render 未初始化');
         this.five = five;
-        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;
+    }
+    /** 放大传入点位周围的内容 */
+    renderWithPoint(point) {
+        if (!this.wrapper)
+            return;
+        this.renderCenter = point;
+        this.render();
+        if (this.config.autoFixPCPosition)
+            this.autoFixPCPosition();
     }
-    updateWithPoint(point) {
-        if (!this.five.renderer || !this.container)
+    autoFixPCPosition() {
+        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;
+        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/HTML.d.ts

@@ -1,6 +1,2 @@
-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

@@ -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

@@ -1,18 +1,15 @@
-import MeasureController from '../../Controller';
+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;
 }