@realsee/dnalogel 2.0.0-alpha.2 → 2.0.0-alpha.20

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

@@ -0,0 +1,148 @@
+import TWEEN from '@tweenjs/tween.js';
+import { mainIconStyle as mainIconStyle, mainItemStyle as mainItemStyle } from './style';
+import { tweenProgress } from '../../../shared-utils/animationFrame/BetterTween';
+import { MAIN_NORMAL_PATH, MAIN_DONE_PATH, MAIN_MOUSE_ENTER_FILL, MAIN_MOUSE_LEAVE_FILL } from './HTML';
+export class MainBtnController {
+    constructor(measureController, container) {
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mainIconMaskTween", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mainElement", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /* 鼠标移入时变成蓝色 */
+        Object.defineProperty(this, "onMouseEnter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { mainItem, pathDom } = this.mainElement;
+                mainItem.style.opacity = '1';
+                pathDom.setAttribute('fill', MAIN_MOUSE_ENTER_FILL);
+            }
+        });
+        /* 鼠标移出时变成灰色 */
+        Object.defineProperty(this, "onMouseLeave", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { mainItem, pathDom } = this.mainElement;
+                mainItem.style.opacity = '0.7';
+                pathDom.setAttribute('fill', MAIN_MOUSE_LEAVE_FILL);
+            }
+        });
+        Object.defineProperty(this, "onClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const mode = this.measureController.getCurrentMode();
+                mode === 'Watch' ? this.measureController.changeMode('Edit') : this.measureController.save().changeMode('Watch');
+            }
+        });
+        Object.defineProperty(this, "editedLineChangeHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (lines) => {
+                // 线的数量大于 1 时，没有状态的变化
+                if (lines.length > 1)
+                    return;
+                // 因为撤销导致的状态变更 -> 取消
+                if (lines.length === 0)
+                    return this.change2Cancel(false);
+                this.change2Done();
+            }
+        });
+        Object.defineProperty(this, "modeChangeHandler", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                mode === 'Watch' ? this.change2Add() : this.change2Cancel();
+            }
+        });
+        this.measureController = measureController;
+        this.container = container;
+        this.mainElement = this.getMainElement();
+        Object.assign(this.mainElement.mainIcon.style, mainIconStyle);
+        Object.assign(this.mainElement.mainItem.style, mainItemStyle);
+        this.change2Add();
+        this.measureController.hook.on('modeChange', this.modeChangeHandler);
+        this.mainElement.mainIcon.addEventListener('click', this.onClick);
+        this.mainElement.mainIcon.addEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.addEventListener('mouseleave', this.onMouseLeave);
+    }
+    dispose() {
+        this.measureController.hook.off('modeChange', this.modeChangeHandler);
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        this.mainElement.mainIcon.removeEventListener('click', this.onClick);
+        this.mainElement.mainIcon.removeEventListener('mouseenter', this.onMouseEnter);
+        this.mainElement.mainIcon.removeEventListener('mouseleave', this.onMouseLeave);
+    }
+    getMainElement() {
+        const mainTextDom = this.container.querySelector('.fpm__main-text');
+        const mainItem = this.container.querySelector('.fpm__main');
+        const mainIcon = this.container.querySelector('.fpm__main-icon');
+        const pathDom = mainItem === null || mainItem === void 0 ? void 0 : mainItem.querySelector('.fpm__main-icon-path');
+        const maskWhiteRect = mainIcon === null || mainIcon === void 0 ? void 0 : mainIcon.querySelector('#fpm__main-icon-mask-white');
+        if (!mainItem || !mainTextDom || !mainIcon || !pathDom || !maskWhiteRect)
+            throw new Error('cannot find dom');
+        return { mainTextDom, mainItem, mainIcon, pathDom, maskWhiteRect };
+    }
+    change2Add() {
+        this.measureController.hook.off('editedLineChange', this.editedLineChangeHandler);
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        mainIcon.style.transition = mainTextDom.innerText === '完成' ? 'none' : 'transform 300ms ease-in-out';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '添加';
+        pathDom === null || pathDom === void 0 ? void 0 : pathDom.setAttribute('d', MAIN_NORMAL_PATH);
+    }
+    change2Cancel(withAnime = true) {
+        const { mainIcon, mainTextDom, pathDom } = this.mainElement;
+        pathDom.setAttribute('d', MAIN_NORMAL_PATH);
+        pathDom.setAttribute('mask', '');
+        mainIcon.style.transition = withAnime ? 'transform 300ms ease-in-out' : 'none';
+        mainIcon.style.transform = 'rotate(45deg)';
+        mainTextDom && (mainTextDom.innerText = '取消');
+        this.measureController.hook.on('editedLineChange', this.editedLineChangeHandler);
+    }
+    change2Done() {
+        var _a;
+        const { mainTextDom, mainIcon, pathDom, maskWhiteRect } = this.getMainElement();
+        if (mainTextDom.innerText === '完成')
+            return;
+        mainIcon.style.transition = 'none';
+        mainIcon.style.transform = 'rotate(0deg)';
+        mainTextDom.innerText = '完成';
+        pathDom.setAttribute('d', MAIN_DONE_PATH);
+        pathDom.setAttribute('mask', `url(#fpm__main-icon-mask)`);
+        (_a = this.mainIconMaskTween) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.mainIconMaskTween = tweenProgress()
+            .easing(TWEEN.Easing.Quartic.InOut)
+            .onUpdate(({ progress }) => {
+            maskWhiteRect.setAttribute('width', (progress * 30).toString());
+        })
+            .onComplete(() => { var _a; return (_a = this.mainIconMaskTween) === null || _a === void 0 ? void 0 : _a.dispose(); })
+            .play();
+    }
+}

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

@@ -0,0 +1,13 @@
+import type { Mode } from '../../../Controller';
+import type MeasureController from '../../../Controller';
+export default class Revoke {
+    private container;
+    private revokeIcon;
+    private revokeItem;
+    private measureController;
+    constructor(measureController: MeasureController, container: Element);
+    dispose(): void;
+    onClick: () => void;
+    onModeChange: (mode: Mode) => void;
+    handleRevoke: () => () => void;
+}

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

@@ -0,0 +1,70 @@
+export default class Revoke {
+    constructor(measureController, container) {
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "revokeIcon", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "revokeItem", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.measureController.revoke();
+            }
+        });
+        Object.defineProperty(this, "onModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                if (mode !== 'Edit') {
+                    this.revokeItem.classList.remove('enabled');
+                    return;
+                }
+                this.revokeItem.classList.add('enabled');
+            }
+        });
+        Object.defineProperty(this, "handleRevoke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                return () => { };
+            }
+        });
+        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);
+    }
+}

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

@@ -0,0 +1,16 @@
+import type 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,102 @@
+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 {
+    constructor(measureController, params) {
+        Object.defineProperty(this, "revoke", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "mainController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "disposers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "measureController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "handleExit", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                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 === null || exitIcon === void 0 ? void 0 : 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);
+                };
+            }
+        });
+        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 === null || bgDom === void 0 ? void 0 : bgDom.style, controllerBackgroundStyle);
+        Object.assign(operatingSpaceDom === null || operatingSpaceDom === void 0 ? void 0 : 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.display = 'block';
+        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() {
+        var _a, _b;
+        this.container.style.display = 'none';
+        this.container.style.opacity = '0';
+        this.container.style.transform = 'translate(0, 10px)';
+        (_a = this.revoke) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.mainController) === null || _b === void 0 ? void 0 : _b.dispose();
+        this.disposers.forEach((disposer) => disposer());
+        this.disposers = [];
+        return this;
+    }
+}

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 type { 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 type { SubscribeEventMap } from '@realsee/five';
+import type { Vector3 } from 'three';
+import type { Mode } from '../Controller';
+import type { 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 type { 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 type { 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 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;
+};