@realsee/dnalogel 2.0.0-alpha.12 → 2.0.0-alpha.13

package/libs/PanoMeasurePlugin/Controller/WatchController.js

@@ -8,14 +8,240 @@ 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);
+        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);
@@ -39,6 +265,7 @@ export default class WatchController extends BaseController {
         this.five.needsRender = true;
     }
     dispose() {
+        var _a;
         super.dispose();
         this.deleteDom.dispose();
         this.model.hook.off('lineRemoved', this.lineRemoved);
@@ -47,7 +274,7 @@ export default class WatchController extends BaseController {
         this.five.off('wantsTapGesture', this.wantsTapGesture);
         this.five.needsRender = true;
         this.hook.emit('selectedChange', []);
-        this.hammer?.destroy();
+        (_a = this.hammer) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     highlightLine(line) {
         if (line.selected)
@@ -69,155 +296,10 @@ export default class WatchController extends BaseController {
         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.js

@@ -10,21 +10,127 @@ 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) {
+        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 });
@@ -62,9 +168,10 @@ export default class MeasureController {
         parent.append(this.container);
     }
     dispose() {
+        var _a, _b;
         this.disable();
-        this.useUIController?.dispose();
-        this.magnifier?.dispose();
+        (_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;
     }
     /** 加载数据
@@ -80,6 +187,7 @@ export default class MeasureController {
      * @description 会隐藏当前 VR 内的点位展示
      */
     enable() {
+        var _a, _b;
         if (this.hasOpen)
             return;
         this.hasOpen = true;
@@ -87,8 +195,8 @@ export default class MeasureController {
         // 隐藏点位和鼠标聚焦环
         this.five.helperVisible = false;
         this.controller = new WatchController(this.controllerParams);
-        this.useUIController?.show();
-        this.useGuideController?.show();
+        (_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);
     }
@@ -97,43 +205,19 @@ export default class MeasureController {
      * @description 还原点位展示和默认鼠标 UI
      */
     disable() {
+        var _a, _b, _c, _d;
         this.hasOpen = false;
         // 展示点位和鼠标聚焦环
-        this.controller?.dispose();
-        this.useUIController?.hide();
-        this.useGuideController?.hide();
-        this.shortcutKeyController?.dispose();
+        (_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);
     }
-    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))

package/libs/PanoMeasurePlugin/Model/index.js

@@ -4,12 +4,37 @@ 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) {
+        Object.defineProperty(this, "lines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "points", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "params", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "polylines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "hook", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
         this.params = params;
     }
     addLine(line) {