@realsee/dnalogel 2.0.0-alpha.2 → 2.0.0-alpha.20

package/libs/PanoMeasurePlugin/Controller/EditController.js

@@ -0,0 +1,329 @@
+import Hammer from 'hammerjs';
+import { Model } from '../Model';
+import Line from '../Model/line';
+import Point from '../Model/point';
+import throttle from '../../shared-utils/throttle';
+import BaseController from './BaseController';
+import { getIntersectionFromEvent } from '../utils/getIntersectionFromEvent';
+export default class EditController extends BaseController {
+    constructor(params) {
+        var _a;
+        super(params);
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'edit'
+        });
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
+        });
+        Object.defineProperty(this, "pressPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hasAppendDashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "hasAppendMouseGroup", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "fiveElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 上一个端点位置 */
+        Object.defineProperty(this, "lastPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        /** 鼠标点到上一个端点连接的虚线 */
+        Object.defineProperty(this, "dashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 根据 intersection 更新放大镜和吸附点 */
+        Object.defineProperty(this, "onIntersectionUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: throttle((intersection, mesh) => {
+                var _a;
+                if (this.hasAppendMouseGroup === false) {
+                    this.group.add(this.mouseGroup);
+                    this.magnifier.appendTo(this.container);
+                    this.hasAppendMouseGroup = true;
+                }
+                const position = this.updateMouseGroup(intersection, mesh).position;
+                (_a = this.pressPoint) === null || _a === void 0 ? void 0 : _a.position.copy(position);
+                this.updateDashed();
+                requestAnimationFrame(() => this.magnifier.updateWithPoint(this.mouseGroup.position));
+                this.five.needsRender = true;
+            }, 20)
+        });
+        /** 撤销编辑 */
+        Object.defineProperty(this, "revoke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                // ============ revoke points ============
+                // 如果当前没有虚线，只有起始点，需要删除起始点，重置起始状态。并删除虚线实例
+                if (this.model.lines.length === 0 && this.lastPoint) {
+                    this.lastPoint = null;
+                    this.hasAppendDashed = false;
+                    this.dashed.distanceItem.remove();
+                    this.group.remove(this.dashed.mesh);
+                    this.hook.emit('anchorChange', null);
+                    this.five.needsRender = true;
+                    return;
+                }
+                if (this.model.lines.length === 0 && !this.lastPoint)
+                    return;
+                if (!this.lastPoint)
+                    return;
+                const revokedLine = this.model.lines[this.model.lines.length - 1];
+                const lastPoint = revokedLine.findAnotherPoint(this.lastPoint);
+                if (!lastPoint)
+                    return;
+                this.lastPoint = lastPoint;
+                this.hook.emit('anchorChange', lastPoint.position);
+                // ============ revoke lines ============
+                this.group.remove(revokedLine.mesh);
+                this.model.removeLine(revokedLine);
+                // ============ revoke mouse group ============
+                this.hasAppendMouseGroup = false;
+                this.mouseGroup.position.copy(this.lastPoint.position);
+                this.group.remove(this.mouseGroup);
+                // ============ revoke lineDistance ============
+                revokedLine.distanceItem.remove();
+                // ============ revoke dashed ============
+                this.updateDashed();
+                // ============ revoke magnifier ============
+                this.magnifier.dispose();
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "onMouseLeave", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.magnifier.dispose();
+                this.group.remove(this.mouseGroup);
+                this.hasAppendMouseGroup = false;
+                if (this.lastPoint) {
+                    this.mouseGroup.position.copy(this.lastPoint.position);
+                    this.updateDashed();
+                }
+            }
+        });
+        /** 编辑线条发生改变时通知外部 */
+        Object.defineProperty(this, "onLineChanged", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.hook.emit('editedLineChange', this.model.lines.map((line) => line.toCompletelyJson()));
+            }
+        });
+        Object.defineProperty(this, "onPress", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                const [intersection] = getIntersectionFromEvent(this.five, e);
+                if (!intersection || !intersection.face)
+                    return;
+                const nowPoint = new Point(intersection.point);
+                this.pressPoint = nowPoint;
+                this.onIntersectionUpdate(intersection);
+            }
+        });
+        /**
+         * 1. 如果之前没有长按行为「即没有长按点时」-> 滑动全景
+         * 2. 如果有长按点，把长按点位置更新为当前位置
+         */
+        Object.defineProperty(this, "onPan", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (!this.pressPoint)
+                    return;
+                const [intersection] = getIntersectionFromEvent(this.five, e);
+                if (!intersection || !intersection.face)
+                    return;
+                this.onIntersectionUpdate(intersection);
+            }
+        });
+        Object.defineProperty(this, "onPanEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (!this.pressPoint)
+                    return;
+                this.onTap(e);
+            }
+        });
+        /**
+         * 1. 如果存在上一个点，需要绘制当前点到上一个点的连线
+         * 2. 把上一个点的位置更新为当前点的位置
+         * 3. 清除 mouseGroup 和 magnifier
+         */
+        Object.defineProperty(this, "onTap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                if (!this.hasAppendDashed) {
+                    this.dashed.distanceItem.appendTo(this.container);
+                    this.group.add(this.dashed.mesh);
+                }
+                this.hasAppendDashed = true;
+                const [intersection] = getIntersectionFromEvent(this.five, e);
+                this.updateMouseGroup(intersection);
+                const nowPoint = new Point(this.mouseGroup.position);
+                const lastPoint = this.lastPoint;
+                if (nowPoint)
+                    this.lastPoint = nowPoint;
+                if (nowPoint && lastPoint) {
+                    const line = new Line(lastPoint, nowPoint, this.model);
+                    line.distanceItem.appendTo(this.container);
+                    this.model.addLine(line);
+                    this.group.add(line.mesh);
+                    line.distanceItem.update(this.five);
+                }
+                this.pressPoint = undefined;
+                this.hasAppendMouseGroup = false;
+                this.magnifier.dispose();
+                this.group.remove(this.mouseGroup);
+                this.updateDashed();
+                this.five.needsRender = true;
+                this.hook.emit('anchorChange', nowPoint.position);
+            }
+        });
+        Object.defineProperty(this, "onWantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => false
+        });
+        /** 编辑时取消走点 */
+        Object.defineProperty(this, "onWantsToMoveToPano", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => false
+        });
+        /** 存在长按点时不能移动全景 */
+        Object.defineProperty(this, "onWantsPanGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => (this.pressPoint ? false : undefined)
+        });
+        /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+        Object.defineProperty(this, "onCameraUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.updateDistanceUI();
+                this.dashed.distanceItem.update(this.five);
+            }
+        });
+        /** 更新虚线 */
+        Object.defineProperty(this, "updateDashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.lastPoint)
+                    return;
+                this.dashed.points[0].position.copy(this.lastPoint.position);
+                this.dashed.points[1].position.copy(this.mouseGroup.position);
+                this.dashed.mesh.setPoints(this.lastPoint.position, this.mouseGroup.position);
+                this.dashed.distanceItem.update(this.five);
+            }
+        });
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        // ==================== 事件监听 ====================
+        // five
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsPanGesture', this.onWantsPanGesture);
+        this.five.on('wantsTapGesture', this.onWantsTapGesture);
+        this.five.on('wantsToMoveToPano', this.onWantsToMoveToPano);
+        this.five.on('intersectionOnModelUpdate', this.onIntersectionUpdate);
+        // model
+        this.model.hook.on('lineAdded', this.onLineChanged);
+        this.model.hook.on('lineRemoved', this.onLineChanged);
+        // hammer
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            this.fiveElement = fiveElement;
+            const hammer = new Hammer(fiveElement);
+            this.hammer = hammer;
+            hammer.on('tap', this.onTap);
+            hammer.on('pan', this.onPan);
+            hammer.on('press', this.onPress);
+            hammer.on('panend', this.onPanEnd);
+        }
+        // fiveElement
+        (_a = this.fiveElement) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseleave', this.onMouseLeave);
+        // ==================== 其他 ====================
+        this.hook.emit('anchorChange', null);
+        this.five.refresh();
+    }
+    dispose() {
+        var _a, _b;
+        super.dispose();
+        this.group.remove(this.mouseGroup, this.dashed.mesh);
+        // ==================== 解除事件监听 ====================
+        // five
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsPanGesture', this.onWantsPanGesture);
+        this.five.off('wantsTapGesture', this.onWantsTapGesture);
+        this.five.off('wantsToMoveToPano', this.onWantsToMoveToPano);
+        this.five.off('intersectionOnModelUpdate', this.onIntersectionUpdate);
+        // model
+        this.model.hook.off('lineAdded', this.onLineChanged);
+        this.model.hook.off('lineRemoved', this.onLineChanged);
+        // hammer
+        (_a = this.hammer) === null || _a === void 0 ? void 0 : _a.destroy();
+        // fiveElement
+        (_b = this.fiveElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.onMouseLeave);
+        this.magnifier.dispose();
+        this.dashed.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    getEditingLines() {
+        return this.model.lines;
+    }
+}

package/libs/PanoMeasurePlugin/Controller/ShortcutKeyController.d.ts

@@ -0,0 +1,12 @@
+import type MeasureController from '.';
+import type { Five } from '@realsee/five';
+/** 快捷键控制器 */
+export declare class ShortcutKeyController {
+    five: Five;
+    measureController: MeasureController;
+    constructor(measureController: MeasureController, five: Five);
+    dispose(): void;
+    private escape;
+    private onKeyDown;
+    private onMouseDown;
+}

package/libs/PanoMeasurePlugin/Controller/ShortcutKeyController.js

@@ -0,0 +1,64 @@
+/** 快捷键控制器 */
+export class ShortcutKeyController {
+    constructor(measureController, five) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onKeyDown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                // Command + S -> 保存 & 更改场景
+                if (e.metaKey && e.code === 'KeyS') {
+                    this.measureController.save().changeMode('Watch');
+                    e.preventDefault();
+                    return;
+                }
+                // Escape -> 切换到观察模式 / 如果已经在观察模式，退出功能
+                if (e.code === 'Escape')
+                    return this.escape();
+            }
+        });
+        Object.defineProperty(this, "onMouseDown", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                // 鼠标右键取消
+                if (e.button !== 2)
+                    return;
+                e.preventDefault();
+                this.escape();
+            }
+        });
+        this.five = five;
+        this.measureController = measureController;
+        const fiveElement = this.five.getElement();
+        if (!fiveElement)
+            return;
+        document.body.addEventListener('keydown', this.onKeyDown);
+        fiveElement.addEventListener('mousedown', this.onMouseDown);
+    }
+    dispose() {
+        const fiveElement = this.five.getElement();
+        if (!fiveElement)
+            return;
+        document.body.removeEventListener('keydown', this.onKeyDown);
+        fiveElement.removeEventListener('mousedown', this.onMouseDown);
+    }
+    escape() {
+        if (this.measureController.getCurrentMode() === 'Watch')
+            return this.measureController.disable();
+        return this.measureController.changeMode('Watch');
+    }
+}

package/libs/PanoMeasurePlugin/Controller/WatchController.d.ts

@@ -0,0 +1,25 @@
+import type Line from '../Model/line';
+import BaseController, { IControllerParams } from './BaseController';
+export default class WatchController extends BaseController {
+    type: string;
+    private deleteDom;
+    private highlightedLines;
+    private fiveElement?;
+    private editPointState?;
+    private hammer?;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    highlightLine(line: Line): void;
+    clearHighlightLines(): void;
+    private onPanStart;
+    private onPanEnd;
+    private onPan;
+    private onIntersectionUpdate;
+    private wantsPanGesture;
+    private wantsTapGesture;
+    private chooseLine;
+    private highlightLines;
+    private lineRemoved;
+    private onCameraUpdate;
+    private deleteDomClickCallback;
+}