@realsee/dnalogel 2.0.0-alpha.3 → 2.0.0-alpha.31-beta

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

@@ -0,0 +1,28 @@
+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 interface UserDistanceItem {
+    element: Element;
+    highlight: () => void;
+    unHighlight: () => void;
+    update: (params: {
+        line: LineCompletelyJson;
+        polyline: PolylineCompletelyJson;
+    }) => void;
+}
+export interface IDistanceItemProps {
+    line: Line;
+    userDistanceItem?: UserDistanceItem;
+    clickCallback?: (item: DistanceItem) => unknown;
+}
+export declare function creatDistanceItem(props: IDistanceItemProps): {
+    lineID: string;
+    ndcPosition: Vector3;
+    update: (five: Five) => void;
+    appendTo: (container: Element) => void;
+    remove: () => void;
+    highlight: () => void;
+    unHighlight: () => void;
+};

package/libs/PanoMeasurePlugin/utils/distanceDom.js

@@ -0,0 +1,120 @@
+import { Vector2, Vector3 } from 'three';
+import isNDCPointInScreen from './isNDCPointInScreen';
+function creatContentDom() {
+    const contentDom = document.createElement('div');
+    contentDom.setAttribute('style', `backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);`);
+    contentDom.style.padding = '3px 6px';
+    contentDom.style.lineHeight = '1';
+    contentDom.style.textAlign = 'center';
+    contentDom.style.transform = 'translate(-50%, -50%)';
+    contentDom.style.borderRadius = '100px';
+    contentDom.style.fontSize = '14px';
+    contentDom.style.color = '#fff';
+    contentDom.style.background = 'rgba(195,195,195,0.70)';
+    contentDom.style.border = '0.5px solid rgba(255,255,255,0.6)';
+    contentDom.style.pointerEvents = 'all';
+    contentDom.style.cursor = 'pointer';
+    return contentDom;
+}
+function createContainerDom(line) {
+    const containerDom = document.createElement('div');
+    containerDom.id = 'distance_' + line.id;
+    containerDom.classList.add('five-plugin-measure__distance');
+    containerDom.style.opacity = '0';
+    containerDom.style.position = 'absolute';
+    containerDom.style.left = '0';
+    containerDom.style.top = '0';
+    containerDom.style.transform = 'translate3d(0, 0, 0)';
+    containerDom.style.transformOrigin = 'left top';
+    return containerDom;
+}
+export function creatDistanceItem(props) {
+    function handleClick() {
+        var _a;
+        // 线被选中时才高亮，外部手动触发高亮
+        // highlight()
+        (_a = props.clickCallback) === null || _a === void 0 ? void 0 : _a.call(props, distanceItem);
+    }
+    function highlight() {
+        if (userDistanceItem)
+            return userDistanceItem.highlight();
+        contentDom.style.border = '0.5px solid #95AEFF';
+        contentDom.style.background = 'linear-gradient(90deg, #95AEFF 0%, #6386FF 100%)';
+    }
+    function unHighlight() {
+        if (userDistanceItem)
+            return userDistanceItem.unHighlight();
+        contentDom.style.border = '0.5px solid rgba(255,255,255,0.6)';
+        contentDom.style.background = 'rgba(195,195,195,0.70)';
+    }
+    function update(five) {
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return;
+        const screenWidth = fiveElement.clientWidth;
+        const screenHeight = fiveElement.clientHeight;
+        if (line.points.length < 2)
+            return;
+        const [startPoint, endPoint] = line.points;
+        const ndcStartPosition = startPoint.position.clone().project(five.camera);
+        const ndcEndPosition = endPoint.position.clone().project(five.camera);
+        const ndcDomPosition = ndcStartPosition.clone().lerp(ndcEndPosition, 0.5);
+        const screenStartPosition = new Vector2(ndcStartPosition.x * screenWidth, ndcStartPosition.y * screenHeight);
+        const screenEndPosition = new Vector2(ndcEndPosition.x * screenWidth, ndcEndPosition.y * screenHeight);
+        const visible = (() => {
+            // 对于超过近平面和远平面的点，计算会有问题
+            if (Math.abs(ndcStartPosition.z) > 1 || Math.abs(ndcEndPosition.z) > 1)
+                return false;
+            if (!isNDCPointInScreen(ndcStartPosition) && !isNDCPointInScreen(ndcEndPosition))
+                return false;
+            if (!isNDCPointInScreen(ndcDomPosition))
+                return false;
+            if (screenStartPosition.distanceTo(screenEndPosition) < 20)
+                return false;
+            return true;
+        })();
+        if (visible === false) {
+            containerDom.style.opacity = '0';
+            containerDom.style.pointerEvents = 'none';
+            return;
+        }
+        // 更新 UI
+        const left = ((ndcDomPosition.x + 1) / 2) * screenWidth;
+        const top = (-(ndcDomPosition.y - 1) / 2) * screenHeight;
+        const rad = Math.atan((screenStartPosition.y - screenEndPosition.y) / (screenStartPosition.x - screenEndPosition.x));
+        const deg = -(rad * 180) / Math.PI;
+        containerDom.style.transform = `translate(${left}px, ${top}px) rotate(${deg}deg)`;
+        containerDom.style.opacity = '1';
+        containerDom.style.pointerEvents = 'all';
+        if (userDistanceItem) {
+            userDistanceItem.update({ line: line.toCompletelyJson(), polyline: line.getPolyline().toCompletelyJson() });
+        }
+        const distanceString = startPoint.position.clone().distanceTo(endPoint.position).toFixed(2) + 'm';
+        contentDom.innerText !== distanceString && (contentDom.innerText = distanceString);
+    }
+    function appendTo(container) {
+        container.appendChild(containerDom);
+        containerDom.addEventListener('click', handleClick);
+    }
+    function remove() {
+        contentDom.removeEventListener('click', handleClick);
+        containerDom.remove();
+    }
+    const { line } = props;
+    const lineID = line.id;
+    const contentDom = creatContentDom();
+    const containerDom = createContainerDom(line);
+    const userDistanceItem = props.userDistanceItem;
+    const ndcPosition = new Vector3(0, 0, 0);
+    const distanceItem = {
+        lineID,
+        ndcPosition,
+        update,
+        appendTo,
+        remove,
+        highlight: highlight,
+        unHighlight: unHighlight,
+    };
+    (userDistanceItem === null || userDistanceItem === void 0 ? void 0 : userDistanceItem.element) ? containerDom.appendChild(userDistanceItem.element) : containerDom.appendChild(contentDom);
+    return distanceItem;
+}

package/libs/PanoMeasurePlugin/utils/findAssociatedLines.d.ts

@@ -0,0 +1,2 @@
+import type Line from '../Model/line';
+export declare function findAssociatedLines(line: Line): Line[];

package/libs/PanoMeasurePlugin/utils/findAssociatedLines.js

@@ -0,0 +1,21 @@
+export 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;
+}

package/libs/PanoMeasurePlugin/utils/findClosestPoint.d.ts

@@ -0,0 +1,10 @@
+import type { Vector2 } from 'three';
+import type Point from '../Model/point';
+import type { Five } from '@realsee/five';
+/**
+ * @param tapPoint 注意这里的坐标是相对于 FiveElement 的
+ */
+export declare function findClosestPoint(five: Five, points: Point[], tapPoint: Vector2, maxDistance?: number): {
+    distance: number;
+    point: Point;
+};

package/libs/PanoMeasurePlugin/utils/findClosestPoint.js

@@ -0,0 +1,27 @@
+import ndc2Screen from './ndc2Screen';
+import isNDCPointInScreen from './isNDCPointInScreen';
+/**
+ * @param tapPoint 注意这里的坐标是相对于 FiveElement 的
+ */
+// eslint-disable-next-line max-params
+export function findClosestPoint(five, points, tapPoint, maxDistance) {
+    const container = five.getElement();
+    if (!container)
+        return null;
+    if (points.length === 0)
+        return null;
+    const containerSize = { width: container.clientWidth, height: container.clientHeight };
+    const ndcPoints = points
+        .map((point) => {
+        const ndcPosition = point.position.clone().project(five.camera);
+        if (!isNDCPointInScreen(ndcPosition))
+            return { distance: Infinity, point };
+        const screenPosition = ndc2Screen(ndcPosition, containerSize);
+        const distance = screenPosition.distanceTo(tapPoint);
+        return { distance, point };
+    })
+        .sort((a, b) => a.distance - b.distance);
+    if (typeof maxDistance === 'number' && ndcPoints[0].distance > maxDistance)
+        return null;
+    return ndcPoints[0];
+}

package/libs/PanoMeasurePlugin/utils/getIntersectionFromEvent.d.ts

@@ -0,0 +1,4 @@
+import type Hammer from 'hammerjs';
+import type { Five, Intersection } from '@realsee/five';
+/** 通过鼠标事件或者触摸事件，获取当前点击屏幕关联的射线与模型的交点 */
+export declare function getIntersectionFromEvent(five: Five, event: typeof Hammer['Input']): Intersection[];

package/libs/PanoMeasurePlugin/utils/getIntersectionFromEvent.js

@@ -0,0 +1,9 @@
+import { Raycaster } from 'three';
+import { getPointFromHammerEvent } from './getPointFromHammerEvent';
+/** 通过鼠标事件或者触摸事件，获取当前点击屏幕关联的射线与模型的交点 */
+export function getIntersectionFromEvent(five, event) {
+    const mouse = getPointFromHammerEvent(event).ndcPoint;
+    const raycaster = new Raycaster();
+    raycaster.setFromCamera(mouse, five.camera);
+    return five.model.intersectRaycaster(raycaster);
+}

package/libs/PanoMeasurePlugin/utils/getPointFromHammerEvent.d.ts

@@ -0,0 +1,10 @@
+import type Hammer from 'hammerjs';
+import { Vector2 } from 'three';
+/**
+ * 从 Hammer 事件中获取操作的点在交互 DOM 中的位置
+ * @ignore TODO: make a suitable name
+ */
+export declare function getPointFromHammerEvent(event: typeof Hammer['Input']): {
+    point: Vector2;
+    ndcPoint: Vector2;
+};

package/libs/PanoMeasurePlugin/utils/getPointFromHammerEvent.js

@@ -0,0 +1,14 @@
+import { Vector2 } from 'three';
+/**
+ * 从 Hammer 事件中获取操作的点在交互 DOM 中的位置
+ * @ignore TODO: make a suitable name
+ */
+export function getPointFromHammerEvent(event) {
+    // clientX 与 clientY 是相对 document 的，需要转换成相对于 target 的坐标
+    const { x: clientX, y: clientY } = event.center;
+    const { clientWidth, clientHeight } = event.target;
+    const clientRect = event.target.getBoundingClientRect();
+    const position = new Vector2(clientX, clientY).sub(new Vector2(clientRect.left, clientRect.top));
+    const mouse = new Vector2((position.x / clientWidth) * 2 - 1, -(position.y / clientHeight) * 2 + 1);
+    return { point: position, ndcPoint: mouse };
+}

package/libs/PanoMeasurePlugin/utils/ironbox.d.ts

@@ -0,0 +1 @@
+export declare const preventDefault: (e: Event) => void;

package/libs/PanoMeasurePlugin/utils/ironbox.js

@@ -0,0 +1 @@
+export const preventDefault = (e) => e.preventDefault();

package/libs/PanoMeasurePlugin/utils/isNDCPointInScreen.d.ts

@@ -0,0 +1,2 @@
+import type { Vector3 } from 'three';
+export default function isNDCPointInScreen(ndcPoint: Vector3): boolean;

package/libs/PanoMeasurePlugin/utils/isNDCPointInScreen.js

@@ -0,0 +1,6 @@
+export default function isNDCPointInScreen(ndcPoint) {
+    const { x, y, z } = ndcPoint;
+    if (Math.abs(x) > 1 || Math.abs(y) > 1 || Math.abs(z) > 1)
+        return false;
+    return true;
+}

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

@@ -0,0 +1,17 @@
+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 {
+    hasPoint?: boolean;
+    pointSize?: number;
+    lineWidth?: number;
+    pointTexture?: Texture;
+    lineRenderOrder?: number;
+    pointsRenderOrder?: number;
+    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 {};

package/libs/PanoMeasurePlugin/utils/line.js

@@ -0,0 +1,33 @@
+import { Line as FiveLine } from '@realsee/five/line';
+import { lightLineOpts, normalLineOpts } from './constants';
+import { Color } from 'three';
+export function creatLine(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);
+    const pointSize = (_c = opts === null || opts === void 0 ? void 0 : opts.pointSize) !== null && _c !== void 0 ? _c : 5;
+    const lineRenderOrder = (_d = opts === null || opts === void 0 ? void 0 : opts.lineRenderOrder) !== null && _d !== void 0 ? _d : 10;
+    const pointsRenderOrder = (_e = opts === null || opts === void 0 ? void 0 : opts.lineRenderOrder) !== null && _e !== void 0 ? _e : 20;
+    const line = new FiveLine(start, end);
+    // set line
+    line.setMaterial({ linewidth: lineWidth, color: lineColor });
+    line.line.material.depthTest = false;
+    line.line.material.transparent = true;
+    line.line.renderOrder = lineRenderOrder;
+    // set point
+    line.points.renderOrder = pointsRenderOrder;
+    const pointMaterial = line.points.material;
+    pointMaterial.depthTest = false;
+    pointMaterial.size = pointSize;
+    (opts === null || opts === void 0 ? void 0 : opts.pointColor) && pointMaterial.color.set(opts.pointColor).convertSRGBToLinear();
+    if (opts === null || opts === void 0 ? void 0 : opts.pointTexture)
+        pointMaterial.map = opts.pointTexture;
+    return line;
+}
+export function creatLineMesh(line, type) {
+    const [point, anotherPoint] = line.points;
+    const opts = type === 'light' ? lightLineOpts : normalLineOpts;
+    const fiveLine = creatLine(point.position, anotherPoint.position, opts);
+    fiveLine.name = 'normalLine_' + line.id;
+    return fiveLine;
+}

package/libs/PanoMeasurePlugin/utils/math.d.ts

@@ -0,0 +1,17 @@
+import { Vector2 } from 'three';
+/**
+ * 获取一点对于线段上最近的一点，
+ * 如果可以是过直线垂线的垂足，不行的话取线段的两端
+ * @param point
+ * @param linePoints
+ * @return
+ */
+export declare function closestPointOnLine(point: Vector2, linePoints: Vector2[]): Vector2;
+/**
+ * 检查两个点是否位置相同
+ * point: { x: number, y: number }
+ * @param  point1
+ * @param  point2
+ * @return
+ */
+export declare function samePointAt(point1: Vector2, point2: Vector2): boolean;

package/libs/PanoMeasurePlugin/utils/math.js

@@ -0,0 +1,44 @@
+import { Vector2 } from 'three';
+/**
+ * 获取一点对于线段上最近的一点，
+ * 如果可以是过直线垂线的垂足，不行的话取线段的两端
+ * @param point
+ * @param linePoints
+ * @return
+ */
+export 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 Vector2(tXx, tYy);
+}
+/**
+ * 检查两个点是否位置相同
+ * point: { x: number, y: number }
+ * @param  point1
+ * @param  point2
+ * @return
+ */
+export function samePointAt(point1, point2) {
+    return point1.x === point2.x && point1.y === point2.y;
+}

package/libs/PanoMeasurePlugin/utils/mouseGroup.d.ts

@@ -0,0 +1,2 @@
+import { Group } from 'three';
+export declare function getMouseGroup(): Group;

package/libs/PanoMeasurePlugin/utils/mouseGroup.js

@@ -0,0 +1,21 @@
+import { CurvePath, DoubleSide, Group, LineCurve3, Mesh, MeshBasicMaterial, PlaneGeometry, SphereGeometry, sRGBEncoding, TextureLoader, TubeGeometry, Vector3, } from 'three';
+const planTextureUrl = `data:image/png;base64,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`;
+export function getMouseGroup() {
+    const group = new Group();
+    const planGeometry = new PlaneGeometry(0.3, 0.3);
+    const planTexture = new TextureLoader().load(planTextureUrl);
+    planTexture.encoding = sRGBEncoding;
+    const planMaterial = new MeshBasicMaterial({ map: planTexture, transparent: true, depthTest: false });
+    const planMesh = new Mesh(planGeometry, planMaterial);
+    const zPath = new CurvePath();
+    zPath.add(new LineCurve3(new Vector3(0, 0, 0), new Vector3(0, 0, 0.1)));
+    const zGeometry = new TubeGeometry(zPath, 8, 0.004);
+    const zMaterial = new MeshBasicMaterial({ color: 0x33f1ef, depthTest: false, transparent: true, side: DoubleSide });
+    const zMesh = new Mesh(zGeometry, zMaterial);
+    const ballGeometry = new SphereGeometry(0.01, 20, 20);
+    const ballMesh = new Mesh(ballGeometry, zMaterial);
+    ballMesh.position.set(0, 0, 0.1);
+    group.name = 'mouse-current';
+    group.add(planMesh);
+    return group;
+}

package/libs/PanoMeasurePlugin/utils/ndc2Screen.d.ts

@@ -0,0 +1,5 @@
+import { Vector2, Vector3 } from 'three';
+export default function ndc2Screen(ndcPosition: Vector3, containerSize: {
+    width: number;
+    height: number;
+}): Vector2;

package/libs/PanoMeasurePlugin/utils/ndc2Screen.js

@@ -0,0 +1,6 @@
+import { Vector2 } from 'three';
+export default function ndc2Screen(ndcPosition, containerSize) {
+    const left = ((ndcPosition.x + 1) / 2) * containerSize.width;
+    const top = (-(ndcPosition.y - 1) / 2) * containerSize.height;
+    return new Vector2(left, top);
+}

package/libs/PanoRulerPlugin/Plugin.d.ts

@@ -0,0 +1,31 @@
+import type { FivePlugin } from '@realsee/five';
+import type { RoomInfo, RoomRules } from './typings';
+export interface PanoRulerPluginOptions {
+    distanceText?: (distance: number) => string;
+    className?: string;
+}
+interface PanoRulerPluginPluginState {
+    enable: boolean;
+    loaded: boolean;
+    options: PanoRulerPluginOptions;
+}
+export interface PanoRulerPluginParameterType {
+    roomInfo?: RoomInfo;
+    roomRules?: RoomRules;
+    options?: PanoRulerPluginOptions;
+}
+export interface PanoRulerPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (roomInfo?: RoomInfo, roomRules?: RoomRules, options?: PanoRulerPluginOptions) => Promise<boolean>;
+    state: PanoRulerPluginPluginState;
+}
+/**
+ * 全景标尺插件
+ */
+export declare const PanoRulerPlugin: FivePlugin<PanoRulerPluginParameterType, PanoRulerPluginExportType>;
+export declare const panoRulerPluginServerParams: {
+    name: string;
+    version: number;
+};
+export default PanoRulerPlugin;