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

package/libs/PanoMeasurePlugin/Controller/WatchController.js

@@ -0,0 +1,305 @@
+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 {
+    constructor(params) {
+        super(params);
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'watch'
+        });
+        Object.defineProperty(this, "deleteDom", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "highlightedLines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "fiveElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "editPointState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onPanStart", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (e) => {
+                var _a;
+                if (this.model.points.length === 0 || !this.fiveElement)
+                    return;
+                const mouse = getPointFromHammerEvent(e).point;
+                const closestPoint = (_a = findClosestPoint(this.five, this.model.points, mouse, 20)) === null || _a === void 0 ? void 0 : _a.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);
+            }
+        });
+        Object.defineProperty(this, "onPanEnd", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                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);
+            }
+        });
+        Object.defineProperty(this, "onPan", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (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);
+            }
+        });
+        Object.defineProperty(this, "onIntersectionUpdate", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (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()));
+            }
+        });
+        Object.defineProperty(this, "wantsPanGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.editPointState)
+                    return false;
+            }
+        });
+        Object.defineProperty(this, "wantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (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;
+            }
+        });
+        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.highlightedLines.length > 0 && this.deleteDom.updatePosition();
+            }
+        });
+        Object.defineProperty(this, "deleteDomClickCallback", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                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();
+            }
+        });
+        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() {
+        var _a;
+        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', []);
+        (_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.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;
+    }
+    highlightLines(lines) {
+        this.clearHighlightLines();
+        this.highlightedLines = lines;
+        this.deleteDom.setLines(lines).updatePosition().show();
+        lines.forEach((line) => this.highlightLine(line));
+    }
+}

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

@@ -0,0 +1,61 @@
+import type { PluginData } from '../typings/data';
+import type { PluginEvent } from '../typings/event.type';
+import type { UserDistanceItem } from '../utils/distanceDom';
+import { Five, Subscribe } from '@realsee/five';
+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,265 @@
+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 {
+    constructor(five, params) {
+        Object.defineProperty(this, "hasOpen", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "hook", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "model", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "group", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "magnifier", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "fiveHelper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "useUIController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "params", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "useGuideController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
+        Object.defineProperty(this, "shortcutKeyController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "controller", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "controllerParams", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "getCurrentMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                if (this.controller instanceof EditController)
+                    return 'Edit';
+                if (this.controller instanceof WatchController)
+                    return 'Watch';
+                return null;
+            }
+        });
+        /** 变更场景
+         * @description 如果从编辑场景改变到观看场景，不会自动保存，默认丢弃所有改动
+         */
+        Object.defineProperty(this, "changeMode", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                var _a;
+                if (!this.hasOpen)
+                    return;
+                if (this.getCurrentMode() === mode)
+                    return;
+                (_a = this.controller) === null || _a === void 0 ? void 0 : _a.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);
+            }
+        });
+        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.opacity = '0';
+        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() {
+        var _a, _b;
+        this.disable();
+        (_a = this.useUIController) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.magnifier) === null || _b === void 0 ? void 0 : _b.dispose();
+        this.five.needsRender = true;
+    }
+    /** 加载数据
+     * @description 数据加载时会覆盖当前已保存的数据
+     * @description 如果当前正在编辑中，会自动退出并保存编辑
+     */
+    load(data) {
+        this.model.parse(data);
+        this.save();
+    }
+    /** 插件功能入口
+     * @description 会隐藏鼠标的默认聚焦环
+     * @description 会隐藏当前 VR 内的点位展示
+     */
+    enable() {
+        var _a, _b;
+        if (this.hasOpen)
+            return;
+        this.hasOpen = true;
+        this.five.scene.add(this.group);
+        // 修改透明度
+        this.container.style.opacity = '1';
+        // 隐藏点位和鼠标聚焦环
+        this.five.helperVisible = false;
+        this.controller = new WatchController(this.controllerParams);
+        (_a = this.useUIController) === null || _a === void 0 ? void 0 : _a.show();
+        (_b = this.useGuideController) === null || _b === void 0 ? void 0 : _b.show();
+        this.shortcutKeyController = new ShortcutKeyController(this, this.five);
+        this.hook.emit('enable', true);
+    }
+    /** 关闭插件功能
+     * @description 清除标尺线条
+     * @description 还原点位展示和默认鼠标 UI
+     */
+    disable() {
+        var _a, _b, _c, _d;
+        this.hasOpen = false;
+        // 修改透明度
+        this.container.style.opacity = '0';
+        // 展示点位和鼠标聚焦环
+        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.hide();
+        (_c = this.useGuideController) === null || _c === void 0 ? void 0 : _c.hide();
+        (_d = this.shortcutKeyController) === null || _d === void 0 ? void 0 : _d.dispose();
+        this.controller = null;
+        this.five.helperVisible = true;
+        this.five.scene.remove(this.group);
+        this.five.needsRender = true;
+        this.hook.emit('disable', true);
+    }
+    /** 撤销编辑 */
+    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 type { PluginData } from '../typings/data';
+import type { UserDistanceItem } from '../utils/distanceDom';
+import Line from './line';
+import Point from './point';
+import { Subscribe, SubscribeEventMap } from '@realsee/five';
+import { Polyline } from './polyline';
+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 {};