@realsee/dnalogel 2.0.0-alpha.41 → 2.0.0-alpha.44

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

@@ -0,0 +1,190 @@
+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 {
+    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 === 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 = '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 = '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 = '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';
+        this.content.style.backgroundImage = `url(${deleteBg})`;
+        this.content.innerHTML = `
+      ${deleteSvg}
+      <span>删除</span>
+    `;
+        this.container.append(this.content);
+        const deleteSvgDom = this.content.querySelector('.fpm__delete-icon');
+        if (deleteSvgDom) {
+            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) {
+        this.lines = lines;
+        this.points = Array.from(new Set(this.lines.map((line) => [line.points[0], line.points[1]]).flat(1)));
+        return this;
+    }
+    updatePosition() {
+        if (this.lines.length === 0)
+            return this;
+        const points = this.points.map((point) => point.position);
+        const ndcPoints = points.map((point) => point.clone().project(this.five.camera));
+        if (ndcPoints.some((ndcPoint) => Math.abs(ndcPoint.z) > 1))
+            return this.hide();
+        const xArray = ndcPoints.map((point) => point.x);
+        const yArray = ndcPoints.map((point) => point.y);
+        const centerX = (Math.min(...xArray) + Math.max(...xArray)) / 2;
+        const maxY = Math.max(...yArray);
+        const wrapper = this.container.parentElement;
+        if (!wrapper)
+            return this;
+        const centerScreenX = ((centerX + 1) / 2) * wrapper.clientWidth;
+        const maxScreenY = (-(maxY - 1) / 2) * wrapper.clientHeight;
+        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/src/PanoMeasurePlugin/Modules/FiveHelper.d.ts

@@ -0,0 +1,11 @@
+import type { Five, Intersection } from '@realsee/five';
+import { Line3, Vector3 } from 'three';
+export default class FiveHelper {
+    edges: Line3[];
+    private five;
+    constructor(five: Five);
+    dispose(): void;
+    getAdsorbentPoint(intersection: Intersection): Vector3 | null;
+    /** 模型加载后获取折线 */
+    private onModelLoaded;
+}

package/libs/src/PanoMeasurePlugin/Modules/FiveHelper.js

@@ -0,0 +1,48 @@
+import { Vector3 } from 'three';
+export default class FiveHelper {
+    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);
+    }
+    dispose() { }
+    getAdsorbentPoint(intersection) {
+        if (this.edges.length === 0)
+            return null;
+        let distance = Infinity;
+        let closestPoint;
+        this.edges.forEach((line) => {
+            const _closestPoint = line.closestPointToPoint(intersection.point, true, new Vector3());
+            const _distance = _closestPoint.distanceTo(intersection.point);
+            if (_distance < distance) {
+                closestPoint = _closestPoint;
+                distance = _distance;
+            }
+        });
+        if (distance > 0.1)
+            return null;
+        return closestPoint || null;
+    }
+}

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

@@ -0,0 +1,18 @@
+import type MeasureController from '../Controller';
+export interface GuideControllerParams {
+    container: Element;
+}
+export declare class GuideController {
+    private measureController;
+    private textDom;
+    private container;
+    private hasAnchor;
+    constructor(measureController: MeasureController, params: GuideControllerParams);
+    dispose(): void;
+    show(): this;
+    hide(): this;
+    private initDom;
+    private onModelChange;
+    private anchorChange;
+    private onEditedLineChange;
+}

package/libs/src/PanoMeasurePlugin/Modules/GuideController.js

@@ -0,0 +1,110 @@
+export class GuideController {
+    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;
+        measureController.hook.on('modeChange', this.onModelChange);
+        measureController.hook.on('anchorChange', this.anchorChange);
+        measureController.hook.on('editedLineChange', this.onEditedLineChange);
+    }
+    dispose() {
+        this.hide();
+        this.container.remove();
+    }
+    show() {
+        this.container.style.opacity = '1';
+        this.container.style.transform = 'translate(0, 0)';
+        return this;
+    }
+    hide() {
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, -10px)';
+        this.measureController.hook.off('modeChange', this.onModelChange);
+        this.measureController.hook.off('anchorChange', this.anchorChange);
+        this.measureController.hook.off('editedLineChange', this.onEditedLineChange);
+        return this;
+    }
+    initDom() {
+        const container = this.container;
+        const textDom = this.textDom;
+        container.classList.add('fpm__guide-container');
+        container.style.position = 'absolute';
+        container.style.top = '0px';
+        container.style.left = '0px';
+        container.style.width = '100%';
+        container.style.height = '110px';
+        container.style.display = 'flex';
+        container.style.alignItems = 'center';
+        container.style.justifyContent = 'center';
+        container.style.transform = 'translate(0, -10px)';
+        container.style.background = `linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.00) 100%)`;
+        container.style.transition = 'opacity 500ms ease-in-out, transform 500ms ease-in-out';
+        container.style.opacity = '0';
+        textDom.classList.add('fpm__guide-text');
+        textDom.style.color = '#fff';
+        textDom.style.fontSize = '20px';
+        textDom.innerText = `点击下方“开始”按钮开始测距`;
+        container.appendChild(textDom);
+    }
+}

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

@@ -0,0 +1,59 @@
+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 wrapper?;
+    private config;
+    private offset;
+    private canvas;
+    private context;
+    private renderCenter;
+    private lastPanEvent?;
+    private hammer?;
+    constructor(five: Five, options: MagnifierParameter);
+    dispose(): void;
+    /** 移除放大镜 DOM */
+    remove(): void;
+    /** 清除放大镜渲染内容 */
+    clear(): void;
+    /** 把放大镜放到某一个容器中 */
+    appendTo(element: Element): void;
+    /** 放大传入点位周围的内容 */
+    renderWithPoint(point: THREE.Vector3): void;
+    private autoFixPCPosition;
+    private render;
+    private initStyle;
+    private onPan;
+    private onPanEnd;
+}
+export {};