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

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -45,7 +45,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (235:2) {#if itemLabelItem.visible}
+// (234:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
@@ -89,7 +89,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (234:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (233:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let if_block_anchor;
@@ -324,8 +324,6 @@ function instance($$self, $$props, $$invalidate) {
 	};
 
 	const getFormatedItemLabels = (five, labels) => {
-		console.log(labels);
-
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
 			// 不在绑定点位则直接不可见

package/libs/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/libs/PanoMeasurePlugin/Controller/ViewController.js

@@ -0,0 +1,160 @@
+import Hammer from 'hammerjs';
+import { Vector2 } from 'three';
+import { closestPointOnLine } from '../utils/math';
+import isNDCPointInScreen from '../utils/isNDCPointInScreen';
+import { findAssociatedLines } from '../utils/findAssociatedLines';
+import BaseController from './BaseController';
+export default 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 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];
+                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(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));
+    }
+}

package/libs/PanoMeasurePlugin/Controller/WatchController.js

@@ -280,6 +280,7 @@ export default 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);

package/libs/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/libs/PanoMeasurePlugin/Controller/index.js

@@ -1,6 +1,7 @@
 import Magnifier from '../Modules/Magnifier';
 import FiveHelper from '../Modules/FiveHelper';
 import EditController from './EditController';
+import ViewController from './ViewController';
 import WatchController from './WatchController';
 import MixedController from './MixedController';
 import { Group } from 'three';
@@ -136,6 +137,7 @@ export default 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/libs/PanoMeasurePlugin/Model/line.js

@@ -1,8 +1,8 @@
 import uuid from '../../shared-utils/uuid';
 import { Polyline } from './polyline';
-import { creatLineMesh } from '../utils/line';
+import { createLineMesh } from '../utils/line';
 import { Subscribe } from '@realsee/five';
-import { creatDistanceItem } from '../utils/distanceDom';
+import { createDistanceItem } from '../utils/distanceDom';
 export default class Line {
     constructor(point, anotherPoint, model) {
         Object.defineProperty(this, "id", {
@@ -71,9 +71,9 @@ export default class Line {
             throw new Error('无效的线段, 一个点无法构成线段');
         this.hook = new 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

package/libs/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/libs/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/libs/PanoMeasurePlugin/utils/distanceDom.js

@@ -1,6 +1,6 @@
 import { Vector2, Vector3 } from 'three';
 import isNDCPointInScreen from './isNDCPointInScreen';
-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';
@@ -28,7 +28,7 @@ function createContainerDom(line) {
     containerDom.style.transformOrigin = 'left top';
     return containerDom;
 }
-export function creatDistanceItem(props) {
+export function createDistanceItem(props) {
     function handleClick() {
         var _a;
         // 线被选中时才高亮，外部手动触发高亮
@@ -102,7 +102,7 @@ export 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 Vector3(0, 0, 0);

package/libs/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 {};

package/libs/PanoMeasurePlugin/utils/line.js

@@ -1,7 +1,7 @@
 import { Line as FiveLine } from '@realsee/five/line';
 import { lightLineOpts, normalLineOpts } from './constants';
 import { Color } from 'three';
-export function creatLine(start, end, opts) {
+export 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 Color(0xffffff);
@@ -24,10 +24,10 @@ export function creatLine(start, end, opts) {
         pointMaterial.map = opts.pointTexture;
     return line;
 }
-export function creatLineMesh(line, type) {
+export 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;
 }

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.39",
+  "version": "2.0.0-alpha.41",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",
@@ -30,7 +30,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@realsee/five": "5.0.0-alpha.138",
+    "@realsee/five": "5.0.0-alpha.141",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-typescript": "^8.3.2",