@realsee/dnalogel 2.0.0-alpha.40 → 2.0.0-alpha.41

package/dist/PanoMeasurePlugin/Controller/ViewController.d.ts

@@ -0,0 +1,16 @@
+import type Line from '../Model/line';
+import BaseController, { IControllerParams } from './BaseController';
+export default class ViewController extends BaseController {
+    type: string;
+    private highlightedLines;
+    private hammer?;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    highlightLine(line: Line): void;
+    clearHighlightLines(): void;
+    private wantsTapGesture;
+    private chooseLine;
+    private highlightLines;
+    private lineRemoved;
+    private onCameraUpdate;
+}

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

@@ -3,7 +3,7 @@ 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';
-export declare type Mode = 'Watch' | 'Edit' | 'Mixed';
+export declare type Mode = 'Watch' | 'Edit' | 'Mixed' | 'View';
 export interface PanoMeasureParameterType {
     openParams?: OpenParameter;
     magnifierParams?: MagnifierParameter;

package/dist/PanoMeasurePlugin/index.js

@@ -463,7 +463,7 @@ const lightLineOpts = {
     pointsRenderOrder: 10,
 };
 
-function creatLine(start, end, opts) {
+function createLine(start, end, opts) {
     var _a, _b, _c, _d, _e;
     const lineWidth = (_a = opts === null || opts === void 0 ? void 0 : opts.lineWidth) !== null && _a !== void 0 ? _a : 2;
     const lineColor = (_b = opts === null || opts === void 0 ? void 0 : opts.lineColor) !== null && _b !== void 0 ? _b : new THREE.Color(0xffffff);
@@ -486,10 +486,10 @@ function creatLine(start, end, opts) {
         pointMaterial.map = opts.pointTexture;
     return line$1;
 }
-function creatLineMesh(line, type) {
+function createLineMesh(line, type) {
     const [point, anotherPoint] = line.points;
     const opts = type === 'light' ? lightLineOpts : normalLineOpts;
-    const fiveLine = creatLine(point.position, anotherPoint.position, opts);
+    const fiveLine = createLine(point.position, anotherPoint.position, opts);
     fiveLine.name = 'normalLine_' + line.id;
     return fiveLine;
 }
@@ -501,7 +501,7 @@ function isNDCPointInScreen(ndcPoint) {
     return true;
 }
 
-function creatContentDom() {
+function createContentDom() {
     const contentDom = document.createElement('div');
     contentDom.setAttribute('style', `backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);`);
     contentDom.style.padding = '3px 6px';
@@ -529,7 +529,7 @@ function createContainerDom(line) {
     containerDom.style.transformOrigin = 'left top';
     return containerDom;
 }
-function creatDistanceItem(props) {
+function createDistanceItem(props) {
     function handleClick() {
         var _a;
         // 线被选中时才高亮，外部手动触发高亮
@@ -603,7 +603,7 @@ function creatDistanceItem(props) {
     }
     const { line } = props;
     const lineID = line.id;
-    const contentDom = creatContentDom();
+    const contentDom = createContentDom();
     const containerDom = createContainerDom(line);
     const userDistanceItem = props.userDistanceItem;
     const ndcPosition = new THREE.Vector3(0, 0, 0);
@@ -688,9 +688,9 @@ class Line {
             throw new Error('无效的线段, 一个点无法构成线段');
         this.hook = new five.Subscribe();
         this.points = [point, anotherPoint];
-        this.mesh = creatLineMesh(this, 'normal');
-        this.lightMesh = creatLineMesh(this, 'light');
-        this.distanceItem = creatDistanceItem({
+        this.mesh = createLineMesh(this, 'normal');
+        this.lightMesh = createLineMesh(this, 'light');
+        this.distanceItem = createDistanceItem({
             line: this,
             clickCallback: () => this.hook.emit('selected', this),
             userDistanceItem: this.model.params.userDistanceItemCreator
@@ -1422,6 +1422,227 @@ class EditController extends BaseController {
     }
 }
 
+/**
+ * 获取一点对于线段上最近的一点，
+ * 如果可以是过直线垂线的垂足，不行的话取线段的两端
+ * @param point
+ * @param linePoints
+ * @return
+ */
+function closestPointOnLine(point, linePoints) {
+    const tA = point.x - linePoints[0].x;
+    const tB = point.y - linePoints[0].y;
+    const tC = linePoints[1].x - linePoints[0].x;
+    const tD = linePoints[1].y - linePoints[0].y;
+    // 设线段为 AB 线段，线段外一点为 P
+    // tDot = AP 向量与 AB 向量乘积，tLenSq 为 |AB|平方。
+    // tParam 是 AP 向量在 AB 向量投影向量 AC 与 AB 向量的比。
+    const tDot = tA * tC + tB * tD;
+    const tLenSq = tC * tC + tD * tD;
+    const tParam = tDot / tLenSq;
+    let tXx, tYy;
+    if (tParam < 0 || samePointAt(linePoints[0], linePoints[1])) {
+        tXx = linePoints[0].x;
+        tYy = linePoints[0].y;
+    }
+    else if (tParam > 1) {
+        tXx = linePoints[1].x;
+        tYy = linePoints[1].y;
+    }
+    else {
+        tXx = linePoints[0].x + tParam * tC;
+        tYy = linePoints[0].y + tParam * tD;
+    }
+    return new THREE.Vector2(tXx, tYy);
+}
+/**
+ * 检查两个点是否位置相同
+ * point: { x: number, y: number }
+ * @param  point1
+ * @param  point2
+ * @return
+ */
+function samePointAt(point1, point2) {
+    return point1.x === point2.x && point1.y === point2.y;
+}
+
+function findAssociatedLines(line) {
+    // 找跟这个线段相邻的线
+    const mergeNextLine = (point, nextIndex, target) => {
+        const nextLine = point.lines.find((line) => {
+            const pointIndex = line.points.findIndex(({ id }) => id === point.id);
+            if (pointIndex === nextIndex)
+                return false;
+            return true;
+        });
+        if (!nextLine)
+            return target;
+        const nextPoint = nextLine.points[nextIndex];
+        if (!nextPoint)
+            return target;
+        return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
+    };
+    const rightLines = mergeNextLine(line.points[0], 1, []);
+    const leftLines = mergeNextLine(line.points[0], 0, []);
+    const lines = rightLines.concat(leftLines);
+    return lines;
+}
+
+class ViewController extends BaseController {
+    constructor(params) {
+        super(params);
+        Object.defineProperty(this, "type", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'view'
+        });
+        Object.defineProperty(this, "highlightedLines", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "hammer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (raycaster) => {
+                // 不存在线
+                if (this.model.lines.length === 0)
+                    return;
+                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 THREE.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 THREE.Vector2(ndcStartPoint.x * screenWidth, ndcStartPoint.y * screenHeight);
+                    const endScreenPosition = new THREE.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];
+                const closestLine = closestScreenLine.distance > 20
+                    ? undefined
+                    : this.model.lines.find(({ id }) => id === closestScreenLine.id);
+                if (this.highlightedLines.length > 0 && !closestLine) {
+                    this.clearHighlightLines();
+                    return false;
+                }
+                if (closestLine) {
+                    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.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) {
+            const hammer = new Hammer__default["default"](fiveElement);
+            this.hammer = hammer;
+        }
+        this.model.hook.on('lineRemoved', this.lineRemoved);
+        this.five.on('cameraUpdate', this.onCameraUpdate);
+        this.five.on('wantsTapGesture', this.wantsTapGesture);
+        this.five.needsRender = true;
+    }
+    dispose() {
+        var _a;
+        super.dispose();
+        this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.five.off('cameraUpdate', this.onCameraUpdate);
+        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.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;
+        lines.forEach((line) => this.highlightLine(line));
+    }
+}
+
 const svg = `
 <svg class="fpm__delete-icon" width="16px" height="17px" viewBox="0 0 16 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <defs>
@@ -1626,50 +1847,6 @@ class DeleteDom {
     }
 }
 
-/**
- * 获取一点对于线段上最近的一点，
- * 如果可以是过直线垂线的垂足，不行的话取线段的两端
- * @param point
- * @param linePoints
- * @return
- */
-function closestPointOnLine(point, linePoints) {
-    const tA = point.x - linePoints[0].x;
-    const tB = point.y - linePoints[0].y;
-    const tC = linePoints[1].x - linePoints[0].x;
-    const tD = linePoints[1].y - linePoints[0].y;
-    // 设线段为 AB 线段，线段外一点为 P
-    // tDot = AP 向量与 AB 向量乘积，tLenSq 为 |AB|平方。
-    // tParam 是 AP 向量在 AB 向量投影向量 AC 与 AB 向量的比。
-    const tDot = tA * tC + tB * tD;
-    const tLenSq = tC * tC + tD * tD;
-    const tParam = tDot / tLenSq;
-    let tXx, tYy;
-    if (tParam < 0 || samePointAt(linePoints[0], linePoints[1])) {
-        tXx = linePoints[0].x;
-        tYy = linePoints[0].y;
-    }
-    else if (tParam > 1) {
-        tXx = linePoints[1].x;
-        tYy = linePoints[1].y;
-    }
-    else {
-        tXx = linePoints[0].x + tParam * tC;
-        tYy = linePoints[0].y + tParam * tD;
-    }
-    return new THREE.Vector2(tXx, tYy);
-}
-/**
- * 检查两个点是否位置相同
- * point: { x: number, y: number }
- * @param  point1
- * @param  point2
- * @return
- */
-function samePointAt(point1, point2) {
-    return point1.x === point2.x && point1.y === point2.y;
-}
-
 function ndc2Screen(ndcPosition, containerSize) {
     const left = ((ndcPosition.x + 1) / 2) * containerSize.width;
     const top = (-(ndcPosition.y - 1) / 2) * containerSize.height;
@@ -1702,28 +1879,6 @@ function findClosestPoint(five, points, tapPoint, maxDistance) {
     return ndcPoints[0];
 }
 
-function findAssociatedLines(line) {
-    // 找跟这个线段相邻的线
-    const mergeNextLine = (point, nextIndex, target) => {
-        const nextLine = point.lines.find((line) => {
-            const pointIndex = line.points.findIndex(({ id }) => id === point.id);
-            if (pointIndex === nextIndex)
-                return false;
-            return true;
-        });
-        if (!nextLine)
-            return target;
-        const nextPoint = nextLine.points[nextIndex];
-        if (!nextPoint)
-            return target;
-        return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
-    };
-    const rightLines = mergeNextLine(line.points[0], 1, []);
-    const leftLines = mergeNextLine(line.points[0], 0, []);
-    const lines = rightLines.concat(leftLines);
-    return lines;
-}
-
 class WatchController extends BaseController {
     constructor(params) {
         super(params);
@@ -1997,6 +2152,7 @@ class WatchController extends BaseController {
         super.dispose();
         this.deleteDom.dispose();
         this.model.hook.off('lineRemoved', this.lineRemoved);
+        this.model.lines.forEach((line) => line.hook.off('selected', this.chooseLine));
         this.five.off('cameraUpdate', this.onCameraUpdate);
         this.five.off('wantsPanGesture', this.wantsPanGesture);
         this.five.off('wantsTapGesture', this.wantsTapGesture);
@@ -3785,6 +3941,7 @@ class MeasureController {
                     return new Error('不支持切换的Mode');
                 (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
                 const controllerMap = {
+                    View: ViewController,
                     Watch: WatchController,
                     Edit: EditController,
                 };

package/dist/PanoMeasurePlugin/utils/constants.d.ts

@@ -1,4 +1,4 @@
-import type { ICreatLineOpts } from './line';
-export declare const normalLineOpts: ICreatLineOpts;
-export declare const dashLineOpts: ICreatLineOpts;
-export declare const lightLineOpts: ICreatLineOpts;
+import type { ICreateLineOpts } from './line';
+export declare const normalLineOpts: ICreateLineOpts;
+export declare const dashLineOpts: ICreateLineOpts;
+export declare const lightLineOpts: ICreateLineOpts;

package/dist/PanoMeasurePlugin/utils/distanceDom.d.ts

@@ -2,7 +2,7 @@ import type Line from '../Model/line';
 import type { Five } from '@realsee/five';
 import type { LineCompletelyJson, PolylineCompletelyJson } from '../typings/data';
 import { Vector3 } from 'three';
-export declare type DistanceItem = ReturnType<typeof creatDistanceItem>;
+export declare type DistanceItem = ReturnType<typeof createDistanceItem>;
 export interface UserDistanceItem {
     element: Element;
     highlight: () => void;
@@ -17,7 +17,7 @@ export interface IDistanceItemProps {
     userDistanceItem?: UserDistanceItem;
     clickCallback?: (item: DistanceItem) => unknown;
 }
-export declare function creatDistanceItem(props: IDistanceItemProps): {
+export declare function createDistanceItem(props: IDistanceItemProps): {
     lineID: string;
     ndcPosition: Vector3;
     update: (five: Five) => void;

package/dist/PanoMeasurePlugin/utils/line.d.ts

@@ -2,7 +2,7 @@ import type Line from '../Model/line';
 import { Line as FiveLine } from '@realsee/five/line';
 import { Color, Texture, Vector3 } from 'three';
 declare type ISetMaterialOpts = Parameters<FiveLine['setMaterial']>[0];
-export interface ICreatLineOpts extends ISetMaterialOpts {
+export interface ICreateLineOpts extends ISetMaterialOpts {
     hasPoint?: boolean;
     pointSize?: number;
     lineWidth?: number;
@@ -12,6 +12,6 @@ export interface ICreatLineOpts extends ISetMaterialOpts {
     lineColor?: Color | string | number;
     pointColor?: Color | string | number;
 }
-export declare function creatLine(start: Vector3, end: Vector3, opts?: ICreatLineOpts): FiveLine;
-export declare function creatLineMesh(line: Line, type: 'normal' | 'light'): FiveLine;
+export declare function createLine(start: Vector3, end: Vector3, opts?: ICreateLineOpts): FiveLine;
+export declare function createLineMesh(line: Line, type: 'normal' | 'light'): FiveLine;
 export {};