@realsee/dnalogel 2.1.0-alpha.15 → 2.1.0-alpha.17

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

@@ -1,190 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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 {};