@realsee/dnalogel 2.0.0-alpha.44 → 2.0.0-alpha.45

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

@@ -1,64 +0,0 @@
-/** 快捷键控制器 */
-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/WatchController.js

@@ -1,316 +0,0 @@
-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.remove();
-                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.renderWithPoint(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();
-            }
-        });
-        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.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/src/PanoMeasurePlugin/Controller/index.js

@@ -1,306 +0,0 @@
-import Magnifier from '../Modules/Magnifier';
-import FiveHelper from '../Modules/FiveHelper';
-import EditController from './EditController';
-import WatchController from './WatchController';
-import MixedController from './MixedController';
-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';
-import RangePieceController from '../Modules/rangePiece';
-export default class MeasureController {
-    constructor(five, params) {
-        var _a, _b;
-        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, "magnifier", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        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, "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, "rangePieceController", {
-            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';
-                if (this.controller instanceof MixedController)
-                    return 'Mixed';
-                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;
-                // 不支持Mixed模式与其他模式切换
-                if (this.getCurrentMode() === 'Mixed' || mode === 'Mixed')
-                    return new Error('不支持切换的Mode');
-                (_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
-        this.magnifier = new Magnifier(five, (_a = params.magnifierParams) !== null && _a !== void 0 ? _a : { width: 190, height: 190, scale: 2 });
-        // ==================== Group ====================
-        this.group = new Group();
-        this.group.name = 'plugin-measure-group';
-        this.container.classList.add('five-plugin-measure-container');
-        this.container.style.position = 'absolute';
-        this.container.style.left = '0';
-        this.container.style.top = '0';
-        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)';
-        const openParams = (_b = this.params.openParams) !== null && _b !== void 0 ? _b : {};
-        this.controllerParams = {
-            five: this.five,
-            hook: this.hook,
-            group: this.group,
-            model: this.model,
-            magnifier: this.magnifier,
-            container: this.container,
-            fiveHelper: this.fiveHelper,
-            openParams,
-            mouseGroup: getMouseGroup(Object.assign({}, openParams.crossHairParameter)),
-            userDistanceItemCreator: this.params.userDistanceItemCreator,
-        };
-        if (this.params.useUIController !== false)
-            this.useUIController = new UIController(this, this.controllerParams);
-        if (this.params.useGuideController !== false)
-            this.useGuideController = new GuideController(this, this.controllerParams);
-    }
-    appendTo(parent) {
-        // const intersect = new IntersectController(this.five)
-        // intersect.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, _c;
-        if (this.hasOpen)
-            return;
-        this.hasOpen = true;
-        this.five.scene.add(this.group);
-        // 修改透明度
-        this.container.style.opacity = '1';
-        if ((_a = this.params.openParams) === null || _a === void 0 ? void 0 : _a.isMobile) {
-            this.controller = new MixedController(this.controllerParams);
-            this.rangePieceController = new RangePieceController(this.controllerParams);
-        }
-        else {
-            // 隐藏点位和鼠标聚焦环
-            this.five.helperVisible = false;
-            this.controller = new WatchController(this.controllerParams);
-        }
-        (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.show();
-        (_c = this.useGuideController) === null || _c === void 0 ? void 0 : _c.show();
-        this.shortcutKeyController = new ShortcutKeyController(this, this.five);
-        this.hook.emit('enable', true);
-    }
-    /** 关闭插件功能
-     * @description 清除标尺线条
-     * @description 还原点位展示和默认鼠标 UI
-     */
-    disable() {
-        var _a, _b, _c, _d, _e;
-        this.hasOpen = false;
-        // 修改透明度
-        this.container.style.opacity = '0';
-        // 展示点位和鼠标聚焦环
-        (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
-        (_b = this.rangePieceController) === null || _b === void 0 ? void 0 : _b.dispose();
-        (_c = this.useUIController) === null || _c === void 0 ? void 0 : _c.hide();
-        (_d = this.useGuideController) === null || _d === void 0 ? void 0 : _d.hide();
-        (_e = this.shortcutKeyController) === null || _e === void 0 ? void 0 : _e.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();
-    }
-    /**
-     * @description 改变插件的模式（pc端模式或移动端模式）
-     * @param isMobile true为移动端模式，false为pc端
-     */
-    changeIsMobile(isMobile) {
-        var _a, _b;
-        if (((_a = this.controllerParams.openParams) === null || _a === void 0 ? void 0 : _a.isMobile) === undefined) {
-            this.controllerParams.openParams.isMobile = isMobile;
-        }
-        if (this.controllerParams.openParams.isMobile === isMobile)
-            return;
-        this.controllerParams.openParams.isMobile = isMobile;
-        if (this.params.useUIController !== false)
-            (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.dispose();
-        this.useUIController = new UIController(this, this.controllerParams);
-    }
-}