@realsee/dnalogel 2.0.0-alpha.4 → 2.0.0-alpha.7

package/libs/PanoMeasurePlugin/Modules/UIController/Revoke/index.js

@@ -0,0 +1,35 @@
+export default class Revoke {
+    container;
+    revokeIcon;
+    revokeItem;
+    measureController;
+    constructor(measureController, container) {
+        this.measureController = measureController;
+        this.container = container;
+        const revokeIcon = this.container.querySelector('.fpm__revoke-icon');
+        const revokeItem = this.container.querySelector('.fpm__revoke');
+        if (!revokeIcon || !revokeItem)
+            throw new Error('不正确的选择器');
+        this.revokeIcon = revokeIcon;
+        this.revokeItem = revokeItem;
+        this.revokeIcon.addEventListener('click', this.onClick);
+        measureController.hook.on('modeChange', this.onModeChange);
+    }
+    dispose() {
+        this.revokeIcon.removeEventListener('click', this.onClick);
+        this.measureController.hook.off('modeChange', this.onModeChange);
+    }
+    onClick = () => {
+        this.measureController.revoke();
+    };
+    onModeChange = (mode) => {
+        if (mode !== 'Edit') {
+            this.revokeItem.classList.remove('enabled');
+            return;
+        }
+        this.revokeItem.classList.add('enabled');
+    };
+    handleRevoke = () => {
+        return () => { };
+    };
+}

package/libs/PanoMeasurePlugin/Modules/UIController/index.d.ts

@@ -0,0 +1,16 @@
+import MeasureController from '../../Controller';
+export interface UIControllerParams {
+    container: Element;
+}
+export declare class UIController {
+    private revoke?;
+    private container;
+    private mainController?;
+    private disposers;
+    private measureController;
+    constructor(measureController: MeasureController, params: UIControllerParams);
+    dispose(): void;
+    show(): this;
+    hide(): this;
+    private handleExit;
+}

package/libs/PanoMeasurePlugin/Modules/UIController/index.js

@@ -0,0 +1,69 @@
+import htmlString from './HTML';
+import { uiWrapperStyle, operatingSpaceStyle, controllerBackgroundStyle, buttonGroupStyle, exitIconStyle, exitItemStyle, textStyle, } from './style';
+import { MainBtnController } from './MainBtnController';
+import Revoke from './Revoke';
+export class UIController {
+    revoke;
+    container;
+    mainController;
+    disposers = [];
+    measureController;
+    constructor(measureController, params) {
+        this.measureController = measureController;
+        this.container = document.createElement('div');
+        this.container.innerHTML = htmlString;
+        this.container.classList.add('fpm__ui-controller');
+        params.container.appendChild(this.container);
+        const textDoms = this.container.querySelectorAll('.fpm__text');
+        const UIItems = this.container.querySelectorAll('.fpm__ui-item');
+        const bgDom = this.container.querySelector('.fpm_ui-bg');
+        const operatingSpaceDom = this.container.querySelector('.fpm_operating-space');
+        Object.assign(bgDom?.style, controllerBackgroundStyle);
+        Object.assign(operatingSpaceDom?.style, operatingSpaceStyle);
+        Object.assign(this.container.style, uiWrapperStyle);
+        UIItems.forEach((item) => Object.assign(item.style, buttonGroupStyle));
+        textDoms.forEach((item) => Object.assign(item.style, textStyle));
+    }
+    dispose() {
+        this.hide();
+        this.container.remove();
+    }
+    show() {
+        this.container.style.opacity = '1';
+        this.container.style.transform = 'translate(0, 0)';
+        this.revoke = new Revoke(this.measureController, this.container);
+        this.mainController = new MainBtnController(this.measureController, this.container);
+        this.disposers.push(this.handleExit());
+        return this;
+    }
+    hide() {
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, 10px)';
+        this.revoke?.dispose();
+        this.mainController?.dispose();
+        this.disposers.forEach((disposer) => disposer());
+        this.disposers = [];
+        return this;
+    }
+    handleExit = () => {
+        const exitIcon = this.container.querySelector('.fpm__exit-icon');
+        const exitItem = this.container.querySelector('.fpm__exit');
+        if (!exitItem || !exitIcon)
+            throw new Error('cannot find dom');
+        Object.assign(exitItem.style, exitItemStyle);
+        Object.assign(exitIcon?.style, exitIconStyle);
+        const onMouseEnter = () => (exitItem.style.opacity = '1');
+        const onMouseLeave = () => (exitItem.style.opacity = '0.7');
+        const handleClick = () => {
+            this.measureController.disable();
+        };
+        exitIcon.addEventListener('click', handleClick);
+        exitIcon.addEventListener('mouseenter', onMouseEnter);
+        exitIcon.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            exitIcon.removeEventListener('click', handleClick);
+            exitIcon.removeEventListener('mouseenter', onMouseEnter);
+            exitIcon.removeEventListener('mouseleave', onMouseLeave);
+        };
+    };
+}

package/libs/PanoMeasurePlugin/Modules/UIController/style.d.ts

@@ -0,0 +1,17 @@
+export declare const addHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png";
+export declare const addNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png";
+export declare const cancelHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png";
+export declare const cancelNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png";
+export declare const doneHoverImage = "//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png";
+export declare const doneNormalImage = "//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png";
+export declare const exitImage = "//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png";
+export declare const revokeImage = "//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png";
+export declare const uiWrapperStyle: Partial<CSSStyleDeclaration>;
+export declare const operatingSpaceStyle: Partial<CSSStyleDeclaration>;
+export declare const buttonGroupStyle: Partial<CSSStyleDeclaration>;
+export declare const controllerBackgroundStyle: Partial<CSSStyleDeclaration>;
+export declare const mainItemStyle: Partial<CSSStyleDeclaration>;
+export declare const exitItemStyle: Partial<CSSStyleDeclaration>;
+export declare const mainIconStyle: Partial<CSSStyleDeclaration>;
+export declare const exitIconStyle: Partial<CSSStyleDeclaration>;
+export declare const textStyle: Partial<CSSStyleDeclaration>;

package/libs/PanoMeasurePlugin/Modules/UIController/style.js

@@ -0,0 +1,78 @@
+export const addHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png';
+export const addNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png';
+export const cancelHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png';
+export const cancelNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png';
+export const doneHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png';
+export const doneNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png';
+export const exitImage = '//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png';
+export const revokeImage = '//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png';
+export const uiWrapperStyle = {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    opacity: '0',
+    transform: 'translate(0, 10px)',
+    transition: 'opacity 500ms ease-in-out, transform 500ms ease-in-out',
+};
+export const operatingSpaceStyle = {
+    position: 'absolute',
+    left: '50%',
+    bottom: '32px',
+    transform: 'translateX(-50%)',
+    width: '300px',
+    height: '89px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    fontSize: '16px',
+    pointerEvents: 'all',
+    color: '#fff',
+    zIndex: '10',
+};
+export const buttonGroupStyle = {
+    height: '100%',
+    width: 'max-content',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+// 操作区下方的背景
+export const controllerBackgroundStyle = {
+    position: 'absolute',
+    bottom: '0',
+    left: '0',
+    opacity: '0.5',
+    width: '100%',
+    height: '184px',
+    background: `linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%)`,
+    zIndex: '0',
+};
+// item
+export const mainItemStyle = {
+    margin: '0 80px',
+    opacity: '0.7',
+};
+export const exitItemStyle = {
+    opacity: '0.7',
+};
+// icon
+export const mainIconStyle = {
+    width: '60px',
+    height: '60px',
+    backgroundSize: '100%',
+    cursor: 'pointer',
+};
+export const exitIconStyle = {
+    width: '40px',
+    height: '40px',
+    marginTop: '10px',
+    backgroundSize: '100%',
+    cursor: 'pointer',
+};
+// text
+export const textStyle = {
+    cursor: 'default',
+    userSelect: 'none',
+};

package/libs/PanoMeasurePlugin/index.d.ts

@@ -0,0 +1,7 @@
+import { FivePlugin } from '@realsee/five';
+import MeasureController, { MeasurePluginParameter } from './Controller';
+declare const PanoMeasurePlugin: FivePlugin<MeasurePluginParameter, PluginReturns>;
+export default PanoMeasurePlugin;
+export declare type PluginReturns = MeasureController;
+export type { PluginEvent } from './typings/event.type';
+export type { LineJson, PointJson } from './typings/data';

package/libs/PanoMeasurePlugin/index.js

@@ -0,0 +1,5 @@
+import MeasureController from './Controller';
+const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+    return new MeasureController(five, params);
+};
+export default PanoMeasurePlugin;

package/libs/PanoMeasurePlugin/typings/data.d.ts

@@ -0,0 +1,28 @@
+export interface LineCompletelyJson {
+    id: string;
+    points: PointJson[];
+}
+export interface PolylineCompletelyJson {
+    id: string;
+    points: PointJson[];
+    lines: LineCompletelyJson[];
+}
+export interface LineJson {
+    id: string;
+    points: string[];
+}
+export interface PolylineJson {
+    id: string;
+    points: string[];
+    lines: string[];
+}
+export interface PointJson {
+    id: string;
+    lines: string[];
+    position: number[];
+}
+export interface PluginData {
+    lines: LineJson[];
+    points: PointJson[];
+    polylines: PolylineJson[];
+}

package/libs/PanoMeasurePlugin/typings/data.js

@@ -0,0 +1 @@
+export {};

package/libs/PanoMeasurePlugin/typings/event.type.d.ts

@@ -0,0 +1,28 @@
+import { SubscribeEventMap } from '@realsee/five';
+import { Vector3 } from 'three';
+import { Mode } from '../Controller';
+import { LineCompletelyJson } from './data';
+interface ControllerEvent extends SubscribeEventMap {
+    /**
+     * Mode 变更
+     */
+    modeChange: (mode: Mode) => void;
+}
+interface WatchEvent extends SubscribeEventMap {
+    selectedChange: (lines: LineCompletelyJson[]) => void;
+}
+interface EditEvent {
+    /**
+     * 编辑线条变更
+     */
+    editedLineChange: (lines: LineCompletelyJson[]) => void;
+    anchorChange: (anchor: Vector3 | null) => void;
+}
+interface DragEvent extends SubscribeEventMap {
+    wantsDragLine: (event: {
+        point: string;
+        lines: string[];
+    }) => boolean;
+}
+export declare type PluginEvent = ControllerEvent & EditEvent & WatchEvent & DragEvent;
+export {};

package/libs/PanoMeasurePlugin/typings/event.type.js

@@ -0,0 +1 @@
+export {};

package/libs/PanoMeasurePlugin/typings/utils.type.d.ts

@@ -0,0 +1 @@
+export declare type ValueOf<T> = T[keyof T];

package/libs/PanoMeasurePlugin/typings/utils.type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import { Group } from 'three';
+export default function clearGroup(group: Group): void;

package/libs/PanoMeasurePlugin/utils/clearGroup.js

@@ -0,0 +1,3 @@
+export default function clearGroup(group) {
+    group.children.length > 0 && group.remove(...group.children);
+}

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

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

package/libs/PanoMeasurePlugin/utils/constants.js

@@ -0,0 +1,31 @@
+import { TextureLoader, Color } from 'three';
+const lineWidth = 2;
+const lightLineWidth = 4;
+const lineColor = new Color(0xffffff);
+const lightLineColor = new Color(0x2d7cff);
+const pointColor = new Color(0xffffff);
+const lightPointColor = new Color(0x2d7cff);
+const pointSize = 8;
+const lightPointSize = 16;
+const pointImage = 'data:image/png;base64,' +
+    'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg==';
+const pointTexture = new TextureLoader().load(pointImage);
+export const normalLineOpts = {
+    pointTexture,
+    pointSize,
+    lineWidth,
+    lineColor,
+    pointColor,
+    lineRenderOrder: 20,
+    pointsRenderOrder: 20,
+};
+export const dashLineOpts = Object.assign({}, normalLineOpts, { dashed: true });
+export const lightLineOpts = {
+    pointTexture,
+    pointSize: lightPointSize,
+    lineWidth: lightLineWidth,
+    lineColor: lightLineColor,
+    pointColor: lightPointColor,
+    lineRenderOrder: 10,
+    pointsRenderOrder: 10,
+};

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

@@ -0,0 +1,28 @@
+import Line from '../Model/line';
+import { Five } from '@realsee/five';
+import { Vector3 } from 'three';
+import { LineCompletelyJson, PolylineCompletelyJson } from '../typings/data';
+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,114 @@
+import { Vector2, Vector3 } from 'three';
+import isNDCPointInScreen from './isNDCPointInScreen';
+function creatContentDom() {
+    const contentDom = document.createElement('div');
+    contentDom.style.height = '24px';
+    contentDom.style.width = '62px';
+    contentDom.style.lineHeight = '24px';
+    contentDom.style.textAlign = 'center';
+    contentDom.style.transform = 'translate(-50%, -50%)';
+    contentDom.style.borderRadius = '12px';
+    contentDom.style.fontSize = '14px';
+    contentDom.style.color = '#000000';
+    contentDom.style.background = '#fff';
+    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)';
+    return containerDom;
+}
+export function creatDistanceItem(props) {
+    function handleClick() {
+        highlight();
+        props.clickCallback?.(distanceItem);
+    }
+    function highlight() {
+        if (userDistanceItem)
+            return userDistanceItem.highlight();
+        contentDom.style.border = '1px solid #538FFF';
+        contentDom.style.color = '#538FFF';
+    }
+    function unHighlight() {
+        if (userDistanceItem)
+            return userDistanceItem.unHighlight();
+        contentDom.style.border = 'none';
+        contentDom.style.color = '#000';
+    }
+    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 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;
+            const screenStartPosition = new Vector2(ndcStartPosition.x * screenWidth, ndcStartPosition.y * screenHeight);
+            const screenEndPosition = new Vector2(ndcEndPosition.x * screenWidth, ndcEndPosition.y * screenHeight);
+            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;
+        containerDom.style.transform = `translate3d(${left}px, ${top}px, 10px)`;
+        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?.element ? containerDom.appendChild(userDistanceItem.element) : containerDom.appendChild(contentDom);
+    return distanceItem;
+}

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

@@ -0,0 +1,2 @@
+import 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 { Vector2 } from 'three';
+import Point from '../Model/point';
+import { 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 Hammer from 'hammerjs';
+import { 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 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 { 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 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 {};