@realsee/dnalogel 2.0.0-alpha.4 → 2.0.0-alpha.7

package/libs/PanoMeasurePlugin/Controller/EditController.js

@@ -0,0 +1,216 @@
+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 {
+    type = 'edit';
+    model = new Model({ userDistanceItemCreator: this.userDistanceItemCreator });
+    pressPoint;
+    hasAppendDashed = false;
+    hasAppendMouseGroup = false;
+    fiveElement;
+    /** 上一个端点位置 */
+    lastPoint = null;
+    /** 鼠标点到上一个端点连接的虚线 */
+    dashed;
+    hammer;
+    /** 根据 intersection 更新放大镜和吸附点 */
+    onIntersectionUpdate = throttle((intersection, mesh) => {
+        if (this.hasAppendMouseGroup === false) {
+            this.group.add(this.mouseGroup);
+            this.magnifier.appendTo(this.container);
+            this.hasAppendMouseGroup = true;
+        }
+        const position = this.updateMouseGroup(intersection, mesh).position;
+        this.pressPoint?.position.copy(position);
+        this.updateDashed();
+        requestAnimationFrame(() => this.magnifier.updateWithPoint(this.mouseGroup.position));
+        this.five.needsRender = true;
+    }, 20);
+    constructor(params) {
+        super(params);
+        // ==================== 虚线 ====================
+        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
+        this.fiveElement?.addEventListener('mouseleave', this.onMouseLeave);
+        // ==================== 其他 ====================
+        this.hook.emit('anchorChange', null);
+        this.five.refresh();
+    }
+    dispose() {
+        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
+        this.hammer?.destroy();
+        // fiveElement
+        this.fiveElement?.removeEventListener('mouseleave', this.onMouseLeave);
+        this.magnifier.dispose();
+        this.dashed.distanceItem.remove();
+        this.five.needsRender = true;
+    }
+    getEditingLines() {
+        return this.model.lines;
+    }
+    /** 撤销编辑 */
+    revoke = () => {
+        // ============ 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;
+    };
+    onMouseLeave = () => {
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+        this.hasAppendMouseGroup = false;
+        if (this.lastPoint) {
+            this.mouseGroup.position.copy(this.lastPoint.position);
+            this.updateDashed();
+        }
+    };
+    /** 编辑线条发生改变时通知外部 */
+    onLineChanged = () => {
+        this.hook.emit('editedLineChange', this.model.lines.map((line) => line.toCompletelyJson()));
+    };
+    onPress = (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. 如果有长按点，把长按点位置更新为当前位置
+     */
+    onPan = (e) => {
+        if (!this.pressPoint)
+            return;
+        const [intersection] = getIntersectionFromEvent(this.five, e);
+        if (!intersection || !intersection.face)
+            return;
+        this.onIntersectionUpdate(intersection);
+    };
+    onPanEnd = (e) => {
+        if (!this.pressPoint)
+            return;
+        this.onTap(e);
+    };
+    /**
+     * 1. 如果存在上一个点，需要绘制当前点到上一个点的连线
+     * 2. 把上一个点的位置更新为当前点的位置
+     * 3. 清除 mouseGroup 和 magnifier
+     */
+    onTap = (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);
+    };
+    onWantsTapGesture = () => false;
+    /** 编辑时取消走点 */
+    onWantsToMoveToPano = () => false;
+    /** 存在长按点时不能移动全景 */
+    onWantsPanGesture = () => (this.pressPoint ? false : undefined);
+    /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+    onCameraUpdate = () => {
+        this.updateDistanceUI();
+        this.dashed.distanceItem.update(this.five);
+    };
+    /** 更新虚线 */
+    updateDashed = () => {
+        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);
+    };
+}

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

@@ -0,0 +1,12 @@
+import MeasureController from '.';
+import { 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,44 @@
+/** 快捷键控制器 */
+export class ShortcutKeyController {
+    five;
+    measureController;
+    constructor(measureController, five) {
+        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');
+    }
+    onKeyDown = (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();
+    };
+    onMouseDown = (e) => {
+        // 鼠标右键取消
+        if (e.button !== 2)
+            return;
+        e.preventDefault();
+        this.escape();
+    };
+}

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

@@ -0,0 +1,25 @@
+import 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;
+}

package/libs/PanoMeasurePlugin/Controller/WatchController.js

@@ -0,0 +1,223 @@
+import Hammer from 'hammerjs';
+import DeleteDom from '../Modules/DeleteDom';
+import isNDCPointInScreen from '../utils/isNDCPointInScreen';
+import BaseController from './BaseController';
+import { Raycaster, Vector2 } from 'three';
+import { closestPointOnLine } from '../utils/math';
+import { findClosestPoint } from '../utils/findClosestPoint';
+import { findAssociatedLines } from '../utils/findAssociatedLines';
+import { getPointFromHammerEvent } from '../utils/getPointFromHammerEvent';
+export default class WatchController extends BaseController {
+    type = 'watch';
+    deleteDom;
+    highlightedLines = [];
+    fiveElement;
+    editPointState;
+    hammer;
+    constructor(params) {
+        super(params);
+        this.deleteDom = new DeleteDom(this.five, { onClick: this.deleteDomClickCallback }).appendTo(this.container);
+        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) {
+            this.fiveElement = fiveElement;
+            const hammer = new Hammer(fiveElement);
+            this.hammer = hammer;
+            hammer.on('pan', this.onPan);
+            hammer.on('panstart', this.onPanStart);
+            hammer.on('panend', this.onPanEnd);
+        }
+        this.model.hook.on('lineRemoved', this.lineRemoved);
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsTapGesture', this.wantsTapGesture);
+        this.five.on('wantsPanGesture', this.wantsPanGesture);
+        this.five.needsRender = true;
+    }
+    dispose() {
+        super.dispose();
+        this.deleteDom.dispose();
+        this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        this.five.off('wantsPanGesture', this.wantsPanGesture);
+        this.five.off('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', []);
+        this.hammer?.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.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;
+    }
+    onPanStart = (e) => {
+        if (this.model.points.length === 0 || !this.fiveElement)
+            return;
+        const mouse = getPointFromHammerEvent(e).point;
+        const closestPoint = findClosestPoint(this.five, this.model.points, mouse, 20)?.point;
+        if (!closestPoint) {
+            this.editPointState = undefined;
+            return;
+        }
+        const editPointState = {
+            point: closestPoint,
+            associatedLines: findAssociatedLines(closestPoint.lines[0]),
+        };
+        const cancelDragLine = this.hook.emit('wantsDragLine', {
+            point: closestPoint.id,
+            lines: editPointState.associatedLines.map(({ id }) => id),
+        });
+        if (cancelDragLine)
+            return;
+        this.editPointState = editPointState;
+        this.magnifier.appendTo(this.container);
+        this.group.add(this.mouseGroup);
+    };
+    onPanEnd = () => {
+        if (!this.editPointState)
+            return;
+        // 把拖动的线从虚线转换为实线
+        this.editPointState.point.lines.forEach((line) => line.mesh.setMaterial({ dashed: false }));
+        // 还原选中态
+        this.highlightLines(this.editPointState.associatedLines);
+        this.editPointState = undefined;
+        this.magnifier.dispose();
+        this.group.remove(this.mouseGroup);
+    };
+    onPan = (e) => {
+        if (!this.editPointState || !this.fiveElement)
+            return;
+        const mouse = getPointFromHammerEvent(e).ndcPoint;
+        const raycaster = new Raycaster();
+        raycaster.setFromCamera(mouse, this.five.camera);
+        const [intersection] = this.five.model.intersectRaycaster(raycaster);
+        if (!intersection)
+            return;
+        this.onIntersectionUpdate(intersection);
+    };
+    onIntersectionUpdate = (intersection, mesh) => {
+        if (!this.editPointState)
+            return;
+        // 拖动过程中清除选中态
+        this.clearHighlightLines();
+        // 把拖动点相关的线变成虚线 & 改变相关线的位置
+        this.editPointState.point.position.copy(intersection.point);
+        this.editPointState.point.lines.forEach((line) => {
+            line.mesh.setPoints(line.points[0].position.clone(), line.points[1].position.clone());
+            line.lightMesh.setPoints(line.points[0].position.clone(), line.points[1].position.clone());
+            line.mesh.setMaterial({ dashed: true });
+        });
+        this.updateDistanceUI();
+        this.magnifier.updateWithPoint(intersection.point);
+        this.mouseGroup.position.copy(intersection.point);
+        if (mesh) {
+            this.mouseGroup.quaternion.copy(mesh.quaternion);
+        }
+        else if (intersection.face) {
+            const face = intersection.face.normal;
+            const positionVector = face.clone().multiplyScalar(0.05);
+            const position = intersection.point.clone().add(positionVector);
+            const lookAtVector = position.clone().add(positionVector);
+            this.mouseGroup.lookAt(lookAtVector);
+        }
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', this.editPointState.associatedLines.map((line) => line.toCompletelyJson()));
+    };
+    wantsPanGesture = () => {
+        if (this.editPointState)
+            return false;
+    };
+    wantsTapGesture = (raycaster) => {
+        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;
+    };
+    chooseLine = (line) => {
+        const highlightLines = findAssociatedLines(line);
+        this.highlightLines(highlightLines);
+        this.five.needsRender = true;
+        this.hook.emit('selectedChange', highlightLines.map((line) => line.toCompletelyJson()));
+    };
+    highlightLines(lines) {
+        this.clearHighlightLines();
+        this.highlightedLines = lines;
+        this.deleteDom.setLines(lines).updatePosition().show();
+        lines.forEach((line) => this.highlightLine(line));
+    }
+    lineRemoved = (line) => {
+        this.removeLine(line);
+        // TODO: 这个逻辑不太好，改进一下
+        this.hook.emit('selectedChange', this.model.lines.filter((line) => line.selected).map((line) => line.toCompletelyJson()));
+    };
+    onCameraUpdate = () => {
+        this.updateDistanceUI();
+        this.highlightedLines.length > 0 && this.deleteDom.updatePosition();
+    };
+    deleteDomClickCallback = () => {
+        const firstLine = this.highlightedLines[0];
+        // TODO: 优化折线的删除逻辑
+        firstLine
+            .getPolyline()
+            .lines.slice()
+            .reverse()
+            .forEach((line) => this.model.removeLine(line));
+        this.highlightedLines = [];
+        // this.clearHighlightLines()
+        // this.highlightedLines.forEach((line) => this.model.removeLine(line))
+        this.deleteDom.setLines([]).hide();
+    };
+}

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

@@ -0,0 +1,61 @@
+import { PluginData } from '../typings/data';
+import { Five, Subscribe } from '@realsee/five';
+import { PluginEvent } from '../typings/event.type';
+import { UserDistanceItem } from '../utils/distanceDom';
+export declare type Mode = 'Watch' | 'Edit';
+export interface MeasurePluginParameter {
+    useUIController?: boolean;
+    useGuideController?: boolean;
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export default class MeasureController {
+    hasOpen: boolean;
+    hook: Subscribe<PluginEvent>;
+    private five;
+    private model;
+    private group;
+    private magnifier;
+    private fiveHelper;
+    private useUIController?;
+    private params;
+    private useGuideController?;
+    private container;
+    private shortcutKeyController?;
+    private controller;
+    private controllerParams;
+    constructor(five: Five, params: MeasurePluginParameter);
+    appendTo(parent: HTMLElement): void;
+    dispose(): void;
+    /** 加载数据
+     * @description 数据加载时会覆盖当前已保存的数据
+     * @description 如果当前正在编辑中，会自动退出并保存编辑
+     */
+    load(data: PluginData): void;
+    /** 插件功能入口
+     * @description 会隐藏鼠标的默认聚焦环
+     * @description 会隐藏当前 VR 内的点位展示
+     */
+    enable(): void;
+    /** 关闭插件功能
+     * @description 清除标尺线条
+     * @description 还原点位展示和默认鼠标 UI
+     */
+    disable(): void;
+    getCurrentMode: () => Mode | null;
+    /** 变更场景
+     * @description 如果从编辑场景改变到观看场景，不会自动保存，默认丢弃所有改动
+     */
+    changeMode: (mode: Mode) => void;
+    /** 撤销编辑 */
+    revoke(): void;
+    removeLineByID(lineID: string): void;
+    /**
+     * 高亮当前线段
+     */
+    highlightLine(lineID: string): boolean;
+    clearHighlightLines(): boolean;
+    /** 保存编辑 */
+    save(): this;
+    /** 把当前以保存的数据转换成 JSON 对象 */
+    toJson(): PluginData;
+}