@realsee/dnalogel 2.0.0-alpha.1 → 2.0.0-alpha.10

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;
+}

package/libs/PanoMeasurePlugin/Controller/index.js

@@ -0,0 +1,176 @@
+import Magnifier from '../Modules/Magnifier';
+import FiveHelper from '../Modules/FiveHelper';
+import EditController from './EditController';
+import WatchController from './WatchController';
+import { Group } from 'three';
+import { Model } from '../Model';
+import { Subscribe } from '@realsee/five';
+import { getMouseGroup } from '../utils/mouseGroup';
+import { UIController } from '../Modules/UIController';
+import { GuideController } from '../Modules/GuideController';
+import { ShortcutKeyController } from './ShortcutKeyController';
+export default class MeasureController {
+    hasOpen = false;
+    hook = new Subscribe();
+    five;
+    model;
+    group;
+    magnifier;
+    fiveHelper;
+    useUIController;
+    params;
+    useGuideController;
+    container = document.createElement('div');
+    shortcutKeyController;
+    controller = null;
+    controllerParams;
+    constructor(five, params) {
+        this.five = five;
+        this.params = params;
+        this.model = new Model({ userDistanceItemCreator: this.params.userDistanceItemCreator });
+        this.fiveHelper = new FiveHelper(five);
+        // magnifier
+        const magnifierSize = 190;
+        const magnifierScale = 2;
+        this.magnifier = new Magnifier(five, { scale: magnifierScale, width: magnifierSize, height: magnifierSize });
+        // ==================== Group ====================
+        this.group = new Group();
+        this.group.name = 'plugin-measure-group';
+        this.container.classList.add('five-plugin-measure-container');
+        this.container.style.position = 'relative';
+        this.container.style.pointerEvents = 'none';
+        this.container.style.width = '100%';
+        this.container.style.height = '100%';
+        this.container.style.background = 'rgba(0, 0, 0, 0.15)';
+        this.controllerParams = {
+            five: this.five,
+            hook: this.hook,
+            group: this.group,
+            model: this.model,
+            magnifier: this.magnifier,
+            container: this.container,
+            fiveHelper: this.fiveHelper,
+            mouseGroup: getMouseGroup(),
+            userDistanceItemCreator: this.params.userDistanceItemCreator,
+        };
+        if (this.params.useUIController !== false)
+            this.useUIController = new UIController(this, this.controllerParams);
+        if (this.params.useUIController !== false)
+            this.useGuideController = new GuideController(this, this.controllerParams);
+    }
+    appendTo(parent) {
+        parent.append(this.container);
+    }
+    dispose() {
+        this.disable();
+        this.useUIController?.dispose();
+        this.magnifier?.dispose();
+        this.five.needsRender = true;
+    }
+    /** 加载数据
+     * @description 数据加载时会覆盖当前已保存的数据
+     * @description 如果当前正在编辑中，会自动退出并保存编辑
+     */
+    load(data) {
+        this.model.parse(data);
+        this.save();
+    }
+    /** 插件功能入口
+     * @description 会隐藏鼠标的默认聚焦环
+     * @description 会隐藏当前 VR 内的点位展示
+     */
+    enable() {
+        if (this.hasOpen)
+            return;
+        this.hasOpen = true;
+        this.five.scene.add(this.group);
+        // 隐藏点位和鼠标聚焦环
+        this.five.helperVisible = false;
+        this.controller = new WatchController(this.controllerParams);
+        this.useUIController?.show();
+        this.useGuideController?.show();
+        this.shortcutKeyController = new ShortcutKeyController(this, this.five);
+        this.hook.emit('enable', true);
+    }
+    /** 关闭插件功能
+     * @description 清除标尺线条
+     * @description 还原点位展示和默认鼠标 UI
+     */
+    disable() {
+        this.hasOpen = false;
+        // 展示点位和鼠标聚焦环
+        this.controller?.dispose();
+        this.useUIController?.hide();
+        this.useGuideController?.hide();
+        this.shortcutKeyController?.dispose();
+        this.controller = null;
+        this.five.helperVisible = true;
+        this.five.scene.remove(this.group);
+        this.five.needsRender = true;
+        this.hook.emit('disable', true);
+    }
+    getCurrentMode = () => {
+        if (this.controller instanceof EditController)
+            return 'Edit';
+        if (this.controller instanceof WatchController)
+            return 'Watch';
+        return null;
+    };
+    /** 变更场景
+     * @description 如果从编辑场景改变到观看场景，不会自动保存，默认丢弃所有改动
+     */
+    changeMode = (mode) => {
+        if (!this.hasOpen)
+            return;
+        if (this.getCurrentMode() === mode)
+            return;
+        this.controller?.dispose();
+        const controllerMap = {
+            Watch: WatchController,
+            Edit: EditController,
+        };
+        if (!controllerMap[mode])
+            throw new Error('不存在的 Mode');
+        this.controller = new controllerMap[mode](this.controllerParams);
+        this.hook.emit('modeChange', mode);
+    };
+    /** 撤销编辑 */
+    revoke() {
+        if (!(this.controller instanceof EditController))
+            return;
+        this.controller.revoke();
+        return;
+    }
+    removeLineByID(lineID) {
+        this.model.removeLineByID(lineID);
+    }
+    /**
+     * 高亮当前线段
+     */
+    highlightLine(lineID) {
+        if (this.getCurrentMode() !== 'Watch')
+            return false;
+        const line = this.model.getLineByID(lineID);
+        if (!line)
+            return false;
+        this.controller.highlightLine(line);
+        return true;
+    }
+    clearHighlightLines() {
+        if (this.getCurrentMode() !== 'Watch')
+            return false;
+        this.controller.clearHighlightLines();
+        return true;
+    }
+    /** 保存编辑 */
+    save() {
+        if (!(this.controller instanceof EditController))
+            return this;
+        this.model.mergeModel(this.controller.model);
+        return this;
+    }
+    /** 把当前以保存的数据转换成 JSON 对象 */
+    toJson() {
+        return this.model.toJson();
+    }
+}

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

@@ -0,0 +1,38 @@
+import Line from './line';
+import Point from './point';
+import { Subscribe, SubscribeEventMap } from '@realsee/five';
+import { PluginData } from '../typings/data';
+import { Polyline } from './polyline';
+import { UserDistanceItem } from '../utils/distanceDom';
+interface IModelEvent extends SubscribeEventMap {
+    /** 新增线条
+     * @param line 被创建的线条
+     */
+    lineAdded: (line: Line) => void;
+    /** 删除线条
+     * @param lines 被删除的线条数组
+     */
+    lineRemoved: (lines: Line) => void;
+}
+export interface ModelParams {
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export declare class Model {
+    readonly lines: Line[];
+    readonly points: Point[];
+    readonly params: ModelParams;
+    readonly polylines: Polyline[];
+    readonly hook: Subscribe<IModelEvent>;
+    constructor(params: ModelParams);
+    addLine(line: Line): this;
+    removeLineByID(lineID: string): void;
+    removeLine(line: Line): this;
+    mergeModel(model: Model): void;
+    includes(item: Point | Line): boolean;
+    getPointByID(id: string): Point;
+    getLineByID(id: string): Line;
+    getClosestPoint(): void;
+    parse(data: PluginData): this;
+    toJson(): PluginData;
+}
+export {};

package/libs/PanoMeasurePlugin/Model/index.js

@@ -0,0 +1,114 @@
+import Line from './line';
+import Point from './point';
+import { Subscribe } from '@realsee/five';
+import removeArrayItem from '../../shared-utils/removeArrayItem';
+import { Polyline } from './polyline';
+export class Model {
+    lines = [];
+    points = [];
+    params;
+    polylines = [];
+    hook = new Subscribe();
+    constructor(params) {
+        this.params = params;
+    }
+    addLine(line) {
+        const [startPoint, endPoint] = line.points;
+        if (!startPoint || !endPoint)
+            return this;
+        if (!this.includes(startPoint))
+            this.points.push(startPoint);
+        if (!this.includes(endPoint))
+            this.points.push(endPoint);
+        this.lines.push(line);
+        const lastPolyline = this.polylines.find((polyline) => !!polyline.getNext(line));
+        if (lastPolyline) {
+            lastPolyline.push(line);
+        }
+        else {
+            const polyline = new Polyline();
+            polyline.push(line);
+            this.polylines.push(polyline);
+        }
+        this.hook.emit('lineAdded', line);
+    }
+    removeLineByID(lineID) {
+        const line = this.getLineByID(lineID);
+        if (line)
+            this.removeLine(line);
+    }
+    removeLine(line) {
+        // handle polyline
+        const polyline = this.polylines.find((polyline) => polyline.lines.includes(line));
+        if (polyline) {
+            if (polyline.lines.slice(-1)[0] !== line)
+                throw new Error('不能从中间删除线段');
+            polyline.pop();
+            if (polyline.lines.length === 0)
+                removeArrayItem(polyline, this.polylines);
+        }
+        const [point, anotherPoint] = line.points;
+        if (point.lines.length === 0)
+            removeArrayItem(point, this.points);
+        if (anotherPoint.lines.length === 0)
+            removeArrayItem(anotherPoint, this.points);
+        removeArrayItem(line, this.lines);
+        line.clear();
+        this.hook.emit('lineRemoved', line);
+        return this;
+    }
+    mergeModel(model) {
+        model.lines.forEach((line) => this.addLine(line));
+    }
+    includes(item) {
+        if (item.type === 'point') {
+            return this.points.find(({ id }) => id === item.id) !== undefined;
+        }
+        else if (item.type === 'line') {
+            return this.lines.find(({ id }) => id === item.id) !== undefined;
+        }
+    }
+    getPointByID(id) {
+        return this.points.find(({ id: _id }) => _id === id);
+    }
+    getLineByID(id) {
+        return this.lines.find(({ id: _id }) => _id === id);
+    }
+    getClosestPoint() { }
+    parse(data) {
+        const points = data.points.map(({ id, position }) => {
+            const point = new Point(position);
+            point.id = id;
+            return point;
+        });
+        const lines = data.lines.map((data) => {
+            const [pointID, anotherPointID] = data.points;
+            const point = this.getPointByID.call({ points }, pointID);
+            const anotherPoint = this.getPointByID.call({ points }, anotherPointID);
+            if (!point || !anotherPoint)
+                throw new Error('线上的点不存在');
+            const line = new Line(point, anotherPoint, this);
+            line.id = data.id;
+            return line;
+        });
+        const polylines = data.polylines.map((polylineJson) => {
+            const polyline = new Polyline();
+            polylineJson.lines.forEach((lineID) => {
+                const line = lines.find(({ id }) => id === lineID);
+                line && polyline.push(line);
+            });
+            return polyline;
+        });
+        this.points.splice(0, this.points.length, ...points);
+        this.lines.splice(0, this.lines.length, ...lines);
+        this.polylines.splice(0, this.polylines.length, ...polylines);
+        return this;
+    }
+    toJson() {
+        return {
+            points: this.points.map((point) => point.toJson()),
+            lines: this.lines.map((line) => line.toJson()),
+            polylines: this.polylines.map((polyline) => polyline.toJson()).filter((polylines) => polylines.lines.length > 0),
+        };
+    }
+}

package/libs/PanoMeasurePlugin/Model/line.d.ts

@@ -0,0 +1,30 @@
+import { Model } from '.';
+import Point from './point';
+import { LineJson } from '..';
+import { Polyline } from './polyline';
+import { LineCompletelyJson } from '../typings/data';
+import { Line as FiveLine } from '@realsee/five/line';
+import { Subscribe, SubscribeEventMap } from '@realsee/five';
+import { DistanceItem } from '../utils/distanceDom';
+export interface ILineHook extends SubscribeEventMap {
+    selected: (line: Line) => void;
+}
+export default class Line {
+    id: string;
+    selected: boolean;
+    readonly type = "line";
+    readonly model: Model;
+    readonly mesh: FiveLine;
+    readonly points: Point[];
+    readonly lightMesh: FiveLine;
+    readonly hook: Subscribe<ILineHook>;
+    readonly distanceItem: DistanceItem;
+    private polyline?;
+    constructor(point: Point, anotherPoint: Point, model: Model);
+    clear(): void;
+    getPolyline(): Polyline;
+    findAnotherPoint(point: Point): Point;
+    toJson(): LineJson;
+    toCompletelyJson(): LineCompletelyJson;
+    clone(): Line;
+}