@realsee/dnalogel 2.0.0-alpha.7 → 2.0.0-beta.36

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

@@ -1,15 +1,18 @@
-import Line from '../../Model/line';
-import { Five } from '@realsee/five';
+import type Line from '../../Model/line';
+import type { Five } from '@realsee/five';
 export default class DeleteDom {
     visible: boolean;
     private five;
     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

@@ -2,36 +2,102 @@ import deleteSvg from './_Assets/delete.svg';
 import deleteBg from './_Assets/delete_bg.png';
 import deleteHoverBg from './_Assets/delete_hover_bg.png';
 export default class DeleteDom {
-    visible = false;
-    five;
-    lines = [];
-    points = [];
-    onClick;
-    content = document.createElement('div');
-    container = document.createElement('div');
     constructor(five, opts) {
+        Object.defineProperty(this, "visible", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "lines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "points", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "onClick", {
+            enumerable: true,
+            configurable: true,
+            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,
+            writable: true,
+            value: document.createElement('div')
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            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,
+            writable: true,
+            value: () => {
+                this.content.style.backgroundImage = `url(${deleteHoverBg})`;
+            }
+        });
+        Object.defineProperty(this, "onMouseLeave", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.content.style.backgroundImage = `url(${deleteBg})`;
+            }
+        });
         this.five = five;
-        this.onClick = opts?.onClick || (() => void 0);
+        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';
@@ -43,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) {
@@ -82,27 +156,35 @@ 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;
     }
-    onMouseEnter = () => {
-        this.content.style.backgroundImage = `url(${deleteHoverBg})`;
-    };
-    onMouseLeave = () => {
-        this.content.style.backgroundImage = `url(${deleteBg})`;
-    };
 }

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

@@ -1,5 +1,5 @@
+import type { Five, Intersection } from '@realsee/five';
 import { Line3, Vector3 } from 'three';
-import { Five, Intersection } from '@realsee/five';
 export default class FiveHelper {
     edges: Line3[];
     private five;

package/libs/PanoMeasurePlugin/Modules/FiveHelper.js

@@ -1,8 +1,29 @@
 import { Vector3 } from 'three';
 export default class FiveHelper {
-    edges = [];
-    five;
     constructor(five) {
+        Object.defineProperty(this, "edges", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 模型加载后获取折线 */
+        Object.defineProperty(this, "onModelLoaded", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.five.model)
+                    return;
+                this.edges = this.five.model.getEdges();
+            }
+        });
         this.five = five;
         this.five.model.loaded ? this.onModelLoaded() : this.five.on('modelLoaded', this.onModelLoaded);
     }
@@ -24,10 +45,4 @@ export default class FiveHelper {
             return null;
         return closestPoint || null;
     }
-    /** 模型加载后获取折线 */
-    onModelLoaded = () => {
-        if (!this.five.model)
-            return;
-        this.edges = this.five.model.getEdges();
-    };
 }

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

@@ -1,4 +1,4 @@
-import MeasureController from '../Controller';
+import type MeasureController from '../Controller';
 export interface GuideControllerParams {
     container: Element;
 }

package/libs/PanoMeasurePlugin/Modules/GuideController.js

@@ -1,9 +1,66 @@
 export class GuideController {
-    measureController;
-    textDom = document.createElement('span');
-    container = document.createElement('div');
-    hasAnchor = false;
     constructor(measureController, params) {
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "textDom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('span')
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
+        Object.defineProperty(this, "hasAnchor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "onModelChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                if (mode === 'Watch') {
+                    this.textDom.innerText = ``;
+                    return;
+                }
+                this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
+            }
+        });
+        Object.defineProperty(this, "anchorChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (anchor) => {
+                if (!this.hasAnchor && !!anchor) {
+                    this.hasAnchor = true;
+                    this.textDom.innerText = `选择下一个测量点，Esc或单击鼠标右键取消选择`;
+                }
+                else if (!anchor) {
+                    this.hasAnchor = false;
+                    this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
+                }
+            }
+        });
+        Object.defineProperty(this, "onEditedLineChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (lines) => {
+                if (lines.length === 1) {
+                    this.textDom.innerText = `可以连续选择测量点，或点击下方“完成”结束测量（Esc取消，Command+S保存）`;
+                }
+            }
+        });
         this.initDom();
         params.container.append(this.container);
         this.measureController = measureController;
@@ -50,26 +107,4 @@ export class GuideController {
         textDom.innerText = `点击下方“添加”开始测距`;
         container.appendChild(textDom);
     }
-    onModelChange = (mode) => {
-        if (mode === 'Watch') {
-            this.textDom.innerText = ``;
-            return;
-        }
-        this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
-    };
-    anchorChange = (anchor) => {
-        if (!this.hasAnchor && !!anchor) {
-            this.hasAnchor = true;
-            this.textDom.innerText = `选择下一个测量点，Esc或单击鼠标右键取消选择`;
-        }
-        else if (!anchor) {
-            this.hasAnchor = false;
-            this.textDom.innerText = `请选择第一个测量点，Esc或单击鼠标右键可取消选择`;
-        }
-    };
-    onEditedLineChange = (lines) => {
-        if (lines.length === 1) {
-            this.textDom.innerText = `可以连续选择测量点，或点击下方“完成”结束测量（Esc取消，Command+S保存）`;
-        }
-    };
 }

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

@@ -1,24 +1,59 @@
-import { Five } from '@realsee/five';
-import { Vector3 } from 'three';
-export interface MagnifierOptions {
-    width: number;
-    height: number;
-    scale: number;
+import type { Five } from '@realsee/five';
+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 {};