@realsee/dnalogel 2.0.0-alpha.7 → 2.0.0-beta.36

package/libs/PanoMeasurePlugin/Controller/WatchController.js

@@ -8,15 +8,252 @@ 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);
+        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);
@@ -39,6 +276,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 +285,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 +307,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.d.ts

@@ -1,29 +1,33 @@
-import { PluginData } from '../typings/data';
+import type { OpenParameter, PluginData } from '../typings/data';
+import type { PanoMeasurePluginEvent } from '../typings/event.type';
+import type { UserDistanceItem } from '../utils/distanceDom';
+import Magnifier, { MagnifierParameter } from '../Modules/Magnifier';
 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 {
+export declare type Mode = 'Watch' | 'Edit' | 'Mixed';
+export interface PanoMeasureParameterType {
+    openParams?: OpenParameter;
+    magnifierParams?: MagnifierParameter;
     useUIController?: boolean;
     useGuideController?: boolean;
     userDistanceItemCreator?: () => UserDistanceItem;
 }
 export default class MeasureController {
     hasOpen: boolean;
-    hook: Subscribe<PluginEvent>;
+    hook: Subscribe<PanoMeasurePluginEvent>;
+    magnifier: Magnifier;
     private five;
     private model;
     private group;
-    private magnifier;
     private fiveHelper;
     private useUIController?;
     private params;
     private useGuideController?;
+    private rangePieceController?;
     private container;
     private shortcutKeyController?;
     private controller;
     private controllerParams;
-    constructor(five: Five, params: MeasurePluginParameter);
+    constructor(five: Five, params: PanoMeasureParameterType);
     appendTo(parent: HTMLElement): void;
     dispose(): void;
     /** 加载数据
@@ -45,7 +49,7 @@ export default class MeasureController {
     /** 变更场景
      * @description 如果从编辑场景改变到观看场景，不会自动保存，默认丢弃所有改动
      */
-    changeMode: (mode: Mode) => void;
+    changeMode: (mode: Mode) => Error;
     /** 撤销编辑 */
     revoke(): void;
     removeLineByID(lineID: string): void;
@@ -58,4 +62,9 @@ export default class MeasureController {
     save(): this;
     /** 把当前以保存的数据转换成 JSON 对象 */
     toJson(): PluginData;
+    /**
+     * @description 改变插件的模式（pc端模式或移动端模式）
+     * @param isMobile true为移动端模式，false为pc端
+     */
+    changeIsMobile(isMobile: boolean): void;
 }