@realsee/dnalogel 0.1.7-alpha.1 → 0.1.7-alpha.10

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

@@ -0,0 +1,123 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UIController = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.for-each.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _HTML = _interopRequireDefault(require("./HTML"));
+
+var _style = require("./style");
+
+var _MainBtnController = require("./MainBtnController");
+
+var _Revoke = _interopRequireDefault(require("./Revoke"));
+
+var UIController = /*#__PURE__*/function () {
+  function UIController(measureController, params) {
+    var _this = this;
+
+    (0, _classCallCheck2["default"])(this, UIController);
+    (0, _defineProperty2["default"])(this, "disposers", []);
+    (0, _defineProperty2["default"])(this, "handleExit", function () {
+      var exitIcon = _this.container.querySelector('.fpm__exit-icon');
+
+      var exitItem = _this.container.querySelector('.fpm__exit');
+
+      if (!exitItem || !exitIcon) throw new Error('cannot find dom');
+      Object.assign(exitItem.style, _style.exitItemStyle);
+      Object.assign(exitIcon === null || exitIcon === void 0 ? void 0 : exitIcon.style, _style.exitIconStyle);
+
+      var onMouseEnter = function onMouseEnter() {
+        return exitItem.style.opacity = '1';
+      };
+
+      var onMouseLeave = function onMouseLeave() {
+        return exitItem.style.opacity = '0.7';
+      };
+
+      var handleClick = function handleClick() {
+        _this.measureController.close();
+      };
+
+      exitIcon.addEventListener('click', handleClick);
+      exitIcon.addEventListener('mouseenter', onMouseEnter);
+      exitIcon.addEventListener('mouseleave', onMouseLeave);
+      return function () {
+        exitIcon.removeEventListener('click', handleClick);
+        exitIcon.removeEventListener('mouseenter', onMouseEnter);
+        exitIcon.removeEventListener('mouseleave', onMouseLeave);
+      };
+    });
+    this.measureController = measureController;
+    this.container = document.createElement('div');
+    this.container.innerHTML = _HTML["default"];
+    this.container.classList.add('fpm__ui-controller');
+    params.container.appendChild(this.container);
+    var textDoms = this.container.querySelectorAll('.fpm__text');
+    var UIItems = this.container.querySelectorAll('.fpm__ui-item');
+    var bgDom = this.container.querySelector('.fpm_ui-bg');
+    var operatingSpaceDom = this.container.querySelector('.fpm_operating-space');
+    Object.assign(bgDom === null || bgDom === void 0 ? void 0 : bgDom.style, _style.controllerBackgroundStyle);
+    Object.assign(operatingSpaceDom === null || operatingSpaceDom === void 0 ? void 0 : operatingSpaceDom.style, _style.operatingSpaceStyle);
+    Object.assign(this.container.style, _style.uiWrapperStyle);
+    UIItems.forEach(function (item) {
+      return Object.assign(item.style, _style.buttonGroupStyle);
+    });
+    textDoms.forEach(function (item) {
+      return Object.assign(item.style, _style.textStyle);
+    });
+  }
+
+  (0, _createClass2["default"])(UIController, [{
+    key: "dispose",
+    value: function dispose() {
+      this.hide();
+      this.container.remove();
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      this.container.style.opacity = '1';
+      this.container.style.transform = 'translate(0, 0)';
+      this.revoke = new _Revoke["default"](this.measureController, this.container);
+      this.mainController = new _MainBtnController.MainBtnController(this.measureController, this.container);
+      this.disposers.push(this.handleExit());
+      return this;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      var _this$revoke, _this$mainController;
+
+      this.container.style.opacity = '0';
+      this.container.style.transform = 'translate(0, 10px)';
+      (_this$revoke = this.revoke) === null || _this$revoke === void 0 ? void 0 : _this$revoke.dispose();
+      (_this$mainController = this.mainController) === null || _this$mainController === void 0 ? void 0 : _this$mainController.dispose();
+      this.disposers.forEach(function (disposer) {
+        return disposer();
+      });
+      this.disposers = [];
+      return this;
+    }
+  }]);
+  return UIController;
+}();
+
+exports.UIController = UIController;

package/plugins/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/plugins/PanoMeasurePlugin/Modules/UIController/style.js

@@ -0,0 +1,103 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.uiWrapperStyle = exports.textStyle = exports.revokeImage = exports.operatingSpaceStyle = exports.mainItemStyle = exports.mainIconStyle = exports.exitItemStyle = exports.exitImage = exports.exitIconStyle = exports.doneNormalImage = exports.doneHoverImage = exports.controllerBackgroundStyle = exports.cancelNormalImage = exports.cancelHoverImage = exports.buttonGroupStyle = exports.addNormalImage = exports.addHoverImage = void 0;
+var addHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/add-hover.944fffad.png';
+exports.addHoverImage = addHoverImage;
+var addNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/add-normal.39e967e9.png';
+exports.addNormalImage = addNormalImage;
+var cancelHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/canale-hover.74b37e24.png';
+exports.cancelHoverImage = cancelHoverImage;
+var cancelNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/cancle-normal.77bb326c.png';
+exports.cancelNormalImage = cancelNormalImage;
+var doneHoverImage = '//vrlab-static.ljcdn.com/release/web/measure/done-hover.9e09438b.png';
+exports.doneHoverImage = doneHoverImage;
+var doneNormalImage = '//vrlab-static.ljcdn.com/release/web/measure/done-normal.4fcddd73.png';
+exports.doneNormalImage = doneNormalImage;
+var exitImage = '//vrlab-static.ljcdn.com/release/web/measure/exit.6693ad51.png';
+exports.exitImage = exitImage;
+var revokeImage = '//vrlab-static.ljcdn.com/release/web/measure/revoke.3e424843.png';
+exports.revokeImage = revokeImage;
+var 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'
+};
+exports.uiWrapperStyle = uiWrapperStyle;
+var 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'
+};
+exports.operatingSpaceStyle = operatingSpaceStyle;
+var buttonGroupStyle = {
+  height: '100%',
+  width: 'max-content',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+}; // 操作区下方的背景
+
+exports.buttonGroupStyle = buttonGroupStyle;
+var 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
+
+exports.controllerBackgroundStyle = controllerBackgroundStyle;
+var mainItemStyle = {
+  margin: '0 80px',
+  opacity: '0.7'
+};
+exports.mainItemStyle = mainItemStyle;
+var exitItemStyle = {
+  opacity: '0.7'
+}; // icon
+
+exports.exitItemStyle = exitItemStyle;
+var mainIconStyle = {
+  width: '60px',
+  height: '60px',
+  backgroundSize: '100%',
+  cursor: 'pointer'
+};
+exports.mainIconStyle = mainIconStyle;
+var exitIconStyle = {
+  width: '40px',
+  height: '40px',
+  marginTop: '10px',
+  backgroundSize: '100%',
+  cursor: 'pointer'
+}; // text
+
+exports.exitIconStyle = exitIconStyle;
+var textStyle = {
+  cursor: 'default',
+  userSelect: 'none'
+};
+exports.textStyle = textStyle;

package/plugins/PanoMeasurePlugin/index.d.ts

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

package/plugins/PanoMeasurePlugin/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _Controller = _interopRequireDefault(require("./Controller"));
+
+var MeasurePlugin = function MeasurePlugin(five, params) {
+  return new _Controller["default"](five, params);
+};
+
+var _default = MeasurePlugin; // 类型导出
+
+exports["default"] = _default;

package/plugins/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/plugins/PanoMeasurePlugin/typings/data.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/plugins/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/plugins/PanoMeasurePlugin/typings/event.type.js

@@ -0,0 +1,7 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

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

@@ -0,0 +1,7 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

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

package/plugins/PanoMeasurePlugin/utils/clearGroup.js

@@ -0,0 +1,16 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = clearGroup;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+function clearGroup(group) {
+  group.children.length > 0 && group.remove.apply(group, (0, _toConsumableArray2["default"])(group.children));
+}

package/plugins/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/plugins/PanoMeasurePlugin/utils/constants.js

@@ -0,0 +1,47 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normalLineOpts = exports.lightLineOpts = exports.dashLineOpts = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _three = require("three");
+
+var lineWidth = 2;
+var lightLineWidth = 4;
+var lineColor = new _three.Color(0xffffff);
+var lightLineColor = new _three.Color(0x2d7cff);
+var pointColor = new _three.Color(0xffffff);
+var lightPointColor = new _three.Color(0x2d7cff);
+var pointSize = 8;
+var lightPointSize = 16;
+var pointImage = 'data:image/png;base64,' + 'iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAD////////////////////////////////////////PIev5AAAACnRSTlMAG/Py2baba05un7UgfgAAAHJJREFUKM9joBpgLHVSCRdA4metAoJlCJHmVWBgAeNzroKCCVCBLpjACqgJVjCBxRBT2FbBQQJYQAohsBAsUIUQWA4WiEIILAULeCEEloAFtBACizAEMLRgGIphLabDMJ2O6TlM72MGECIIMQIZIxqoBQCPvpJ/e9FaAAAAAABJRU5ErkJggg==';
+var pointTexture = new _three.TextureLoader().load(pointImage);
+var normalLineOpts = {
+  pointTexture: pointTexture,
+  pointSize: pointSize,
+  lineWidth: lineWidth,
+  lineColor: lineColor,
+  pointColor: pointColor,
+  lineRenderOrder: 20,
+  pointsRenderOrder: 20
+};
+exports.normalLineOpts = normalLineOpts;
+var dashLineOpts = Object.assign({}, normalLineOpts, {
+  dashed: true
+});
+exports.dashLineOpts = dashLineOpts;
+var lightLineOpts = {
+  pointTexture: pointTexture,
+  pointSize: lightPointSize,
+  lineWidth: lightLineWidth,
+  lineColor: lightLineColor,
+  pointColor: lightPointColor,
+  lineRenderOrder: 10,
+  pointsRenderOrder: 10
+};
+exports.lightLineOpts = lightLineOpts;

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

@@ -0,0 +1,147 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.creatDistanceItem = creatDistanceItem;
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.number.to-fixed.js");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _three = require("three");
+
+var _isNDCPointInScreen = _interopRequireDefault(require("./isNDCPointInScreen"));
+
+function creatContentDom() {
+  var 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) {
+  var 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;
+}
+
+function creatDistanceItem(props) {
+  function handleClick() {
+    var _props$clickCallback;
+
+    highlight();
+    (_props$clickCallback = props.clickCallback) === null || _props$clickCallback === void 0 ? void 0 : _props$clickCallback.call(props, 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) {
+    var fiveElement = five.getElement();
+    if (!fiveElement) return;
+    var screenWidth = fiveElement.clientWidth;
+    var screenHeight = fiveElement.clientHeight;
+    if (line.points.length < 2) return;
+
+    var _line$points = (0, _slicedToArray2["default"])(line.points, 2),
+        startPoint = _line$points[0],
+        endPoint = _line$points[1];
+
+    var ndcStartPosition = startPoint.position.clone().project(five.camera);
+    var ndcEndPosition = endPoint.position.clone().project(five.camera);
+    var ndcDomPosition = ndcStartPosition.clone().lerp(ndcEndPosition, 0.5);
+
+    var visible = function () {
+      // 对于超过近平面和远平面的点，计算会有问题
+      if (Math.abs(ndcStartPosition.z) > 1 || Math.abs(ndcEndPosition.z) > 1) return false;
+      if (!(0, _isNDCPointInScreen["default"])(ndcStartPosition) && !(0, _isNDCPointInScreen["default"])(ndcEndPosition)) return false;
+      if (!(0, _isNDCPointInScreen["default"])(ndcDomPosition)) return false;
+      var screenStartPosition = new _three.Vector2(ndcStartPosition.x * screenWidth, ndcStartPosition.y * screenHeight);
+      var screenEndPosition = new _three.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
+
+
+    var left = (ndcDomPosition.x + 1) / 2 * screenWidth;
+    var top = -(ndcDomPosition.y - 1) / 2 * screenHeight;
+    containerDom.style.transform = "translate3d(".concat(left, "px, ").concat(top, "px, 10px)");
+    containerDom.style.opacity = '1';
+    containerDom.style.pointerEvents = 'all';
+
+    if (userDistanceItem) {
+      userDistanceItem.update({
+        line: line.toCompletelyJson(),
+        polyline: line.getPolyline().toCompletelyJson()
+      });
+    }
+
+    var 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();
+  }
+
+  var line = props.line;
+  var lineID = line.id;
+  var contentDom = creatContentDom();
+  var containerDom = createContainerDom(line);
+  var userDistanceItem = props.userDistanceItem;
+  var ndcPosition = new _three.Vector3(0, 0, 0);
+  var distanceItem = {
+    lineID: lineID,
+    ndcPosition: ndcPosition,
+    update: update,
+    appendTo: appendTo,
+    remove: remove,
+    highlight: highlight,
+    unHighlight: unHighlight
+  };
+  userDistanceItem !== null && userDistanceItem !== void 0 && userDistanceItem.element ? containerDom.appendChild(userDistanceItem.element) : containerDom.appendChild(contentDom);
+  return distanceItem;
+}

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

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

package/plugins/PanoMeasurePlugin/utils/findAssociatedLines.js

@@ -0,0 +1,37 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findAssociatedLines = findAssociatedLines;
+
+require("core-js/modules/es.array.find.js");
+
+require("core-js/modules/es.array.find-index.js");
+
+require("core-js/modules/es.array.concat.js");
+
+function findAssociatedLines(line) {
+  // 找跟这个线段相邻的线
+  var mergeNextLine = function mergeNextLine(point, nextIndex, target) {
+    var nextLine = point.lines.find(function (line) {
+      var pointIndex = line.points.findIndex(function (_ref) {
+        var id = _ref.id;
+        return id === point.id;
+      });
+      if (pointIndex === nextIndex) return false;
+      return true;
+    });
+    if (!nextLine) return target;
+    var nextPoint = nextLine.points[nextIndex];
+    if (!nextPoint) return target;
+    return mergeNextLine(nextPoint, nextIndex, target.concat(nextLine));
+  };
+
+  var rightLines = mergeNextLine(line.points[0], 1, []);
+  var leftLines = mergeNextLine(line.points[0], 0, []);
+  var lines = rightLines.concat(leftLines);
+  return lines;
+}

package/plugins/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;
+} | null;