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

package/libs/src/PanoMeasurePlugin/Controller/MixedController.js

@@ -0,0 +1,337 @@
+import { Model } from '../Model';
+import Line from '../Model/line';
+import Point from '../Model/point';
+import BaseController from './BaseController';
+import DeleteDom from '../Modules/DeleteDom';
+import { findAssociatedLines } from '../utils/findAssociatedLines';
+import { Vector2 } from 'three';
+import isNDCPointInScreen from '../utils/isNDCPointInScreen';
+import { closestPointOnLine } from '../utils/math';
+export default class MixedController extends BaseController {
+    constructor(params) {
+        super(params);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'watching'
+        });
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Model({ userDistanceItemCreator: this.userDistanceItemCreator })
+        });
+        Object.defineProperty(this, "hasAppendDashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "fiveElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mobileStartPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "mobileNowPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "highlightedLines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "deleteDom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 圆环点到上一个端点连接的虚线 */
+        Object.defineProperty(this, "dashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 编辑线条发生改变时通知外部 */
+        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, "onWantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (raycaster) => {
+                if (this.state === 'editing')
+                    return false;
+                const [target] = this.five.model.intersectRaycaster(raycaster);
+                if (!target)
+                    return;
+                const camera = this.five.camera;
+                const ndcTarget = target.point.clone().project(camera);
+                const screenWidth = this.container.clientWidth;
+                const screenHeight = this.container.clientHeight;
+                const targetScreenPosition = new Vector2(ndcTarget.x * screenWidth, ndcTarget.y * screenHeight);
+                // 把线的端点全部映射到屏幕上，过滤掉不在视野内的线，同时乘以屏幕宽 & 高
+                const screenLines = this.model.lines
+                    .map((line) => {
+                    const [startPoint, endPoint] = line.points;
+                    const ndcStartPoint = startPoint.position.clone().project(camera);
+                    const ndcEndPoint = endPoint.position.clone().project(camera);
+                    if (!isNDCPointInScreen(ndcStartPoint) && !isNDCPointInScreen(ndcEndPoint))
+                        return null;
+                    const startScreenPosition = new Vector2(ndcStartPoint.x * screenWidth, ndcStartPoint.y * screenHeight);
+                    const endScreenPosition = new Vector2(ndcEndPoint.x * screenWidth, ndcEndPoint.y * screenHeight);
+                    return { id: line.id, points: [startScreenPosition, endScreenPosition] };
+                })
+                    .filter((line) => !!line);
+                if (screenLines.length === 0)
+                    return;
+                // 找这些线距离鼠标点击位置最近的线
+                const distanceLines = screenLines
+                    .map((line) => {
+                    const closestPoint = closestPointOnLine(targetScreenPosition, line.points);
+                    return { id: line.id, distance: closestPoint.distanceTo(targetScreenPosition) };
+                })
+                    .sort((a, b) => a.distance - b.distance);
+                const closestScreenLine = distanceLines[0];
+                if (closestScreenLine.distance > 20)
+                    return;
+                const closestLine = this.model.lines.find(({ id }) => id === closestScreenLine.id);
+                if (!closestLine)
+                    return;
+                this.chooseLine(closestLine);
+                return false;
+            }
+        });
+        /** 编辑时取消走点,watch时可以走 */
+        Object.defineProperty(this, "onWantsToMoveToPano", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => this.state === 'watching'
+        });
+        /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+        Object.defineProperty(this, "onCameraUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.updateDistanceUI();
+                this.dashed.distanceItem.update(this.five);
+            }
+        });
+        /** mobile态时更新虚线 */
+        Object.defineProperty(this, "updateMobileDashed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (!this.mobileStartPoint || !this.mobileNowPoint)
+                    return;
+                this.dashed.points[0].position.copy(this.mobileStartPoint.position);
+                this.dashed.points[1].position.copy(this.mobileNowPoint.position);
+                this.dashed.mesh.setPoints(this.mobileStartPoint.position, this.mobileNowPoint.position);
+                this.dashed.distanceItem.update(this.five);
+            }
+        });
+        /** mobile态时更新放大镜 */
+        Object.defineProperty(this, "updateMagnifier", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (point) => {
+                if (this.magnifier.visible === false) {
+                    this.magnifier.appendTo(this.container);
+                }
+                requestAnimationFrame(() => this.magnifier.renderWithPoint(point.position));
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "onGetStartPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (point) => {
+                this.mobileStartPoint = point;
+            }
+        });
+        Object.defineProperty(this, "onGetEndPoint", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (point) => {
+                const endPoint = this.mobileNowPoint;
+                this.removeLine(this.dashed);
+                this.hasAppendDashed = false;
+                if (this.mobileStartPoint && endPoint) {
+                    const line = new Line(this.mobileStartPoint, endPoint, this.model);
+                    line.distanceItem.appendTo(this.container);
+                    line.distanceItem.update(this.five);
+                    line.hook.on('selected', this.chooseLine);
+                    this.group.add(line.mesh);
+                    this.model.addLine(line);
+                }
+                this.mobileStartPoint = null;
+                this.mobileNowPoint = null;
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "onNowPointChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (point) => {
+                if (this.state === 'watching') {
+                    this.mobileNowPoint = point;
+                    this.updateMagnifier(point);
+                    return;
+                }
+                if (!this.hasAppendDashed) {
+                    this.dashed.distanceItem.appendTo(this.container);
+                    this.group.add(this.dashed.mesh);
+                    this.hasAppendDashed = true;
+                }
+                this.five.needsRender = true;
+                this.mobileNowPoint = point;
+                this.updateMobileDashed();
+                this.updateMagnifier(point);
+                this.five.needsRender = true;
+            }
+        });
+        Object.defineProperty(this, "onWillChangeState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (state, newState) => {
+                this.state = newState;
+                if (this.state === 'watching') {
+                    this.five.helperVisible = true;
+                }
+                else {
+                    // 隐藏点位和鼠标聚焦环
+                    this.five.helperVisible = false;
+                }
+            }
+        });
+        Object.defineProperty(this, "chooseLine", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (line) => {
+                const highlightLines = findAssociatedLines(line);
+                this.highlightLines(highlightLines);
+                this.five.needsRender = true;
+                this.hook.emit('selectedChange', highlightLines.map((line) => line.toCompletelyJson()));
+            }
+        });
+        Object.defineProperty(this, "deleteDomClickCallback", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.highlightedLines.forEach((line) => {
+                    this.removeLine(line);
+                    this.model.removeLine(line);
+                });
+                this.highlightedLines = [];
+                this.deleteDom.setLines([]).hide();
+            }
+        });
+        Object.defineProperty(this, "cancelDeleteClickCallback", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.clearHighlightLines();
+            }
+        });
+        this.deleteDom = new DeleteDom(this.five, {
+            onClick: this.deleteDomClickCallback,
+            cancelDelete: this.cancelDeleteClickCallback,
+        }).appendTo(this.container);
+        // ==================== 虚线 ====================
+        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
+        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
+        this.dashed.mesh.name = 'dashLine';
+        // ==================== 事件监听 ====================
+        // five
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsTapGesture', this.onWantsTapGesture);
+        this.five.on('wantsToMoveToPano', this.onWantsToMoveToPano);
+        // model
+        this.model.hook.on('lineAdded', this.onLineChanged);
+        this.model.hook.on('lineRemoved', this.onLineChanged);
+        // ==================== 其他 ====================
+        this.hook.on('getStartPoint', this.onGetStartPoint);
+        this.hook.on('getEndPoint', this.onGetEndPoint);
+        this.hook.on('nowPointChange', this.onNowPointChange);
+        this.hook.on('willChangeState', this.onWillChangeState);
+        this.five.refresh();
+    }
+    dispose() {
+        super.dispose();
+        this.group.remove(this.mouseGroup, this.dashed.mesh);
+        // ==================== 解除事件监听 ====================
+        // five
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsTapGesture', this.onWantsTapGesture);
+        this.five.off('wantsToMoveToPano', this.onWantsToMoveToPano);
+        // model
+        this.model.hook.off('lineAdded', this.onLineChanged);
+        this.model.hook.off('lineRemoved', this.onLineChanged);
+        this.hook.off('getStartPoint', this.onGetStartPoint);
+        this.hook.off('getEndPoint', this.onGetEndPoint);
+        this.hook.off('nowPointChange', this.onNowPointChange);
+        this.hook.off('willChangeState', this.onWillChangeState);
+        this.hook.emit('selectedChange', []);
+        this.dashed.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    highlightLine(line) {
+        if (line.selected)
+            return;
+        line.selected = true;
+        this.group.add(line.lightMesh);
+        line.distanceItem.highlight();
+        this.five.needsRender = true;
+    }
+    clearHighlightLines() {
+        if (this.group.children.length === 0)
+            return;
+        this.deleteDom.setLines([]).hide();
+        this.model.lines.forEach((line) => {
+            line.selected = false;
+            line.distanceItem.unHighlight();
+            this.group.remove(line.lightMesh);
+        });
+        this.highlightedLines = [];
+        this.five.needsRender = true;
+    }
+    getEditingLines() {
+        return this.model.lines;
+    }
+    highlightLines(lines) {
+        this.clearHighlightLines();
+        this.highlightedLines = lines;
+        this.deleteDom.setLines(lines).updatePosition().show();
+        lines.forEach((line) => this.highlightLine(line));
+    }
+}

package/libs/src/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/src/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/src/PanoMeasurePlugin/Controller/ViewController.d.ts

@@ -0,0 +1,16 @@
+import type Line from '../Model/line';
+import BaseController, { IControllerParams } from './BaseController';
+export default class ViewController extends BaseController {
+    type: string;
+    private highlightedLines;
+    private hammer?;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    highlightLine(line: Line): void;
+    clearHighlightLines(): void;
+    private wantsTapGesture;
+    private chooseLine;
+    private highlightLines;
+    private lineRemoved;
+    private onCameraUpdate;
+}

package/libs/src/PanoMeasurePlugin/Controller/ViewController.js

@@ -0,0 +1,160 @@
+import Hammer from 'hammerjs';
+import { Vector2 } from 'three';
+import { closestPointOnLine } from '../utils/math';
+import isNDCPointInScreen from '../utils/isNDCPointInScreen';
+import { findAssociatedLines } from '../utils/findAssociatedLines';
+import BaseController from './BaseController';
+export default class ViewController extends BaseController {
+    constructor(params) {
+        super(params);
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'view'
+        });
+        Object.defineProperty(this, "highlightedLines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (raycaster) => {
+                // 不存在线
+                if (this.model.lines.length === 0)
+                    return;
+                const [target] = this.five.model.intersectRaycaster(raycaster);
+                // 点击射线与模型没有交点
+                if (!target)
+                    return;
+                const camera = this.five.camera;
+                const ndcTarget = target.point.clone().project(camera);
+                const screenWidth = this.container.clientWidth;
+                const screenHeight = this.container.clientHeight;
+                const targetScreenPosition = new Vector2(ndcTarget.x * screenWidth, ndcTarget.y * screenHeight);
+                // 把线的端点全部映射到屏幕上，过滤掉不在视野内的线，同时乘以屏幕宽 & 高
+                const screenLines = this.model.lines
+                    .map((line) => {
+                    const [startPoint, endPoint] = line.points;
+                    const ndcStartPoint = startPoint.position.clone().project(camera);
+                    const ndcEndPoint = endPoint.position.clone().project(camera);
+                    if (!isNDCPointInScreen(ndcStartPoint) && !isNDCPointInScreen(ndcEndPoint))
+                        return null;
+                    const startScreenPosition = new Vector2(ndcStartPoint.x * screenWidth, ndcStartPoint.y * screenHeight);
+                    const endScreenPosition = new Vector2(ndcEndPoint.x * screenWidth, ndcEndPoint.y * screenHeight);
+                    return { id: line.id, points: [startScreenPosition, endScreenPosition] };
+                })
+                    .filter((line) => !!line);
+                if (screenLines.length === 0)
+                    return;
+                // 找这些线距离鼠标点击位置最近的线
+                const distanceLines = screenLines
+                    .map((line) => {
+                    const closestPoint = closestPointOnLine(targetScreenPosition, line.points);
+                    return { id: line.id, distance: closestPoint.distanceTo(targetScreenPosition) };
+                })
+                    .sort((a, b) => a.distance - b.distance);
+                const closestScreenLine = distanceLines[0];
+                const closestLine = closestScreenLine.distance > 20
+                    ? undefined
+                    : this.model.lines.find(({ id }) => id === closestScreenLine.id);
+                if (this.highlightedLines.length > 0 && !closestLine) {
+                    this.clearHighlightLines();
+                    return false;
+                }
+                if (closestLine) {
+                    this.chooseLine(closestLine);
+                    return false;
+                }
+            }
+        });
+        Object.defineProperty(this, "chooseLine", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (line) => {
+                const highlightLines = findAssociatedLines(line);
+                this.highlightLines(highlightLines);
+                this.five.needsRender = true;
+                this.hook.emit('selectedChange', highlightLines.map((line) => line.toCompletelyJson()));
+            }
+        });
+        Object.defineProperty(this, "lineRemoved", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (line) => {
+                this.removeLine(line);
+                // TODO: 这个逻辑不太好，改进一下
+                this.hook.emit('selectedChange', this.model.lines.filter((line) => line.selected).map((line) => line.toCompletelyJson()));
+            }
+        });
+        Object.defineProperty(this, "onCameraUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.updateDistanceUI();
+            }
+        });
+        this.model.lines.forEach((line) => {
+            line.distanceItem.appendTo(this.container);
+            line.distanceItem.update(this.five);
+            line.hook.on('selected', this.chooseLine);
+            this.group.add(line.mesh);
+        });
+        const fiveElement = this.five.getElement();
+        if (fiveElement) {
+            const hammer = new Hammer(fiveElement);
+            this.hammer = hammer;
+        }
+        this.model.hook.on('lineRemoved', this.lineRemoved);
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+    }
+    dispose() {
+        var _a;
+        super.dispose();
+        this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', []);
+        (_a = this.hammer) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    highlightLine(line) {
+        if (line.selected)
+            return;
+        line.selected = true;
+        this.group.add(line.lightMesh);
+        line.distanceItem.highlight();
+        this.five.needsRender = true;
+    }
+    clearHighlightLines() {
+        if (this.group.children.length === 0)
+            return;
+        this.model.lines.forEach((line) => {
+            line.selected = false;
+            line.distanceItem.unHighlight();
+            this.group.remove(line.lightMesh);
+        });
+        this.highlightedLines = [];
+        this.five.needsRender = true;
+    }
+    highlightLines(lines) {
+        this.clearHighlightLines();
+        this.highlightedLines = lines;
+        lines.forEach((line) => this.highlightLine(line));
+    }
+}

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

@@ -0,0 +1,26 @@
+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;
+    private cancelDeleteClickCallback;
+}