@realsee/dnalogel 2.21.1 → 2.22.0-dev.1

package/libs/PanoMeasurePlugin/Modules/GuideController.js

@@ -1,52 +1,54 @@
-var o = Object.defineProperty;
-var a = (n, t, e) => t in n ? o(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var i = (n, t, e) => (a(n, typeof t != "symbol" ? t + "" : t, e), e);
-class r {
+var s = Object.defineProperty;
+var r = (i, t, e) => t in i ? s(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
+var o = (i, t, e) => (r(i, typeof t != "symbol" ? t + "" : t, e), e);
+import { objectAssignDeepExports as p } from "../../vendor/object-assign-deep/objectAssignDeep.js";
+import l from "../Components/Tip.js";
+import "../../vendor/svelte/internal/index.js";
+import "../../vendor/svelte/transition/index.js";
+import "../../vendor/svelte/easing/index.js";
+const n = {
+  line: {
+    start: "选择一个合适的位置开始测量，点击【结束】或【鼠标右键】结束测量"
+  },
+  area: {
+    start: "选择一个合适的位置开始绘制平面",
+    close: "选择3个点后将闭合平面，点击【结束】或【鼠标右键】将自动闭合"
+  }
+}, c = {
+  line: {
+    start: ""
+  },
+  area: {
+    start: "",
+    close: "选择3个点后将闭合平面，点击结束自动闭合"
+  }
+};
+class u {
   constructor(t, e) {
-    i(this, "measureController");
-    i(this, "textDom", document.createElement("span"));
-    i(this, "container", document.createElement("div"));
-    i(this, "hasAnchor", !1);
-    /** 是否曾经切换到 Watch 模式过 */
-    i(this, "hasChangedToWatch", !1);
-    i(this, "_params");
-    i(this, "onModelChange", (t) => {
-      var e;
-      if (t === "View") {
-        this.hide();
-        return;
-      }
-      if (t === "Watch") {
-        this.hasChangedToWatch ? (this.textDom.innerText = "", this.hide()) : (this.show(), this.hasChangedToWatch = !0);
-        return;
+    o(this, "tipSvelteDom");
+    this.tipSvelteDom = new l({
+      target: e.container,
+      props: {
+        measureController: t,
+        tips: p({}, e.pointSelectorMode === "fixed" ? c : n, e.tips),
+        visible: !0,
+        tipStyle: e.tipStyle
       }
-      t === "Edit" && (this.textDom.innerText = (e = this._params.firstPointTip) != null ? e : "请选择第一个测量点，Esc或单击鼠标右键可取消选择", this.show());
     });
-    i(this, "anchorChange", (t) => {
-      var e, s;
-      !this.hasAnchor && t ? (this.hasAnchor = !0, this.textDom.innerText = (e = this._params.nextPointTip) != null ? e : "选择下一个测量点，Esc或单击鼠标右键取消选择") : t || (this.hasAnchor = !1, this.textDom.innerText = (s = this._params.firstPointTip) != null ? s : "请选择第一个测量点，Esc或单击鼠标右键可取消选择");
-    });
-    i(this, "onEditedLineChange", (t) => {
-      var e;
-      t.lines.length === 1 && (this.textDom.innerText = (e = this._params.endTip) != null ? e : "可以连续选择测量点，或点击下方“结束”按钮完成测量（Esc取消，Command+S保存）");
-    });
-    this._params = e, this.initDom(), e.container.append(this.container), this.measureController = t, t.hook.on("modeChange", this.onModelChange), t.hook.on("anchorChange", this.anchorChange), t.hook.on("editedPolylineChange", this.onEditedLineChange);
   }
   dispose() {
-    this.hide(), this.container.remove();
+    var t;
+    (t = this.tipSvelteDom) == null || t.$destroy();
   }
   show() {
-    return this.container.style.opacity = "1", this.container.style.transform = "translate(0, 0)", this;
+    var t;
+    return (t = this.tipSvelteDom) == null || t.$set({ visible: !0 }), this;
   }
   hide() {
-    return this.container.style.opacity = "0", this.container.style.transform = "translate(0, -10px)", this.measureController.hook.off("modeChange", this.onModelChange), this.measureController.hook.off("anchorChange", this.anchorChange), this.measureController.hook.off("editedPolylineChange", this.onEditedLineChange), this;
-  }
-  initDom() {
-    var s;
-    const t = this.container, e = this.textDom;
-    t.classList.add("fpm__guide-container"), t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.width = "100%", t.style.height = "110px", t.style.display = "flex", t.style.alignItems = "center", t.style.justifyContent = "center", t.style.transform = "translate(0, -10px)", t.style.background = "linear-gradient(180deg, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.00) 100%)", t.style.transition = "opacity 500ms ease-in-out, transform 500ms ease-in-out", t.style.opacity = "0", e.classList.add("fpm__guide-text"), e.style.color = "#fff", e.style.fontSize = "20px", e.innerText = (s = this._params.startTip) != null ? s : "点击下方“开始”按钮开始测距", t.appendChild(e);
+    var t;
+    return (t = this.tipSvelteDom) == null || t.$set({ visible: !1 }), this;
   }
 }
 export {
-  r as GuideController
+  u as GuideController
 };

package/libs/PanoMeasurePlugin/Modules/Magnifier.d.ts

@@ -3,7 +3,7 @@ import Hammer from 'hammerjs';
 import * as THREE from 'three';
 import { Subscribe, type SubscribeEventMap } from '@realsee/five';
 interface MagnifierEvent extends SubscribeEventMap {
-    wantsPanGesture: (event: typeof Hammer['Input']) => boolean;
+    wantsPanGesture: (event: (typeof Hammer)['Input']) => boolean;
 }
 /** 放大镜配置参数 */
 export interface MagnifierParameter {

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

@@ -1,13 +1,19 @@
 import type MeasureController from '../../Controller';
+export type UIMode = 'pc' | 'mobile';
 export interface UIControllerParams {
-    container: Element;
-    mode?: 'pc' | 'mobile';
+    container?: Element;
+    mode?: UIMode;
+    pointSelectorMode?: 'fixed' | 'cursor';
+    useNewUI?: boolean;
+    /**
+     * @description: 是否展示退出按钮
+     */
+    showExit?: boolean;
     startButtonText?: string;
     endButtonText?: string;
     revokeButtonText?: string;
     exitButtonText?: string;
 }
-export type UIMode = 'pc' | 'mobile';
 export declare class UIController {
     private revoke?;
     private container;
@@ -15,6 +21,7 @@ export declare class UIController {
     private disposers;
     private measureController;
     private mode;
+    private svelteDom?;
     private _params;
     constructor(measureController: MeasureController, params: UIControllerParams);
     dispose(): void;

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

@@ -1,53 +1,139 @@
-var c = Object.defineProperty;
-var h = (i, t, e) => t in i ? c(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var s = (i, t, e) => (h(i, typeof t != "symbol" ? t + "" : t, e), e);
-import m from "./HTML.js";
-import p from "./mobileHTML.js";
-import { controllerBackgroundStyle as d, operatingSpaceStyle as y, uiWrapperStyle as u, textStyle as f, exitItemStyle as v, exitIconStyle as C } from "./style.js";
-import { MainBtnController as _ } from "./MainBtnController.js";
-import { MobileMainBtnController as b } from "./mobileMainBtnController.js";
-import E from "./Revoke/index.js";
-class w {
-  constructor(t, e) {
-    s(this, "revoke");
-    s(this, "container");
-    s(this, "mainController");
-    s(this, "disposers", []);
-    s(this, "measureController");
-    s(this, "mode");
-    s(this, "_params");
-    s(this, "handleExit", () => {
-      const t = this.container.querySelector(".fpm__exit-icon"), e = this.container.querySelector(".fpm__exit");
-      if (!e || !t)
+var a = Object.defineProperty;
+var h = (i, o, t) => o in i ? a(i, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[o] = t;
+var e = (i, o, t) => (h(i, typeof o != "symbol" ? o + "" : o, t), t);
+import d from "./HTML.js";
+import u from "./mobileHTML.js";
+import { controllerBackgroundStyle as y, operatingSpaceStyle as f, uiWrapperStyle as v, textStyle as C, exitItemStyle as E, exitIconStyle as x } from "./style.js";
+import { MainBtnController as S } from "./MainBtnController.js";
+import { MobileMainBtnController as g } from "./mobileMainBtnController.js";
+import w from "./Revoke/index.js";
+import _ from "../../Components/Controller0.js";
+import b from "../../Components/Controller1.js";
+import "../../../vendor/svelte/internal/index.js";
+import "../../Components/Common/Switcher0.js";
+import "../../Components/Common/Exit.js";
+import "../../Controller/EditController.js";
+import "../../Model/line.js";
+import "../../../shared-utils/uuid.js";
+import "../../utils/line.js";
+import "@realsee/five/line";
+import "../../utils/constants.js";
+import "three";
+import "@realsee/five";
+import "../../utils/dom/distanceItem.js";
+import "../../utils/dom/base.js";
+import "../../utils/isNDCPointInScreen.js";
+import "../../../shared-utils/three/centerPoint.js";
+import "../../Model/point.js";
+import "../../../shared-utils/removeArrayItem.js";
+import "../../../shared-utils/throttle.js";
+import "../../Controller/BaseController.js";
+import "../../utils/ironbox.js";
+import "../../Model/polyline.js";
+import "../../Model/area.js";
+import "../../Model/polygon.js";
+import "../../../shared-utils/three/IObject3D.js";
+import "../../utils/generatePolygonGeometry.js";
+import "earcut";
+import "../../utils/dom/areaDom.js";
+import "../../utils/geometryUtil.js";
+import "../../utils/isIntersecting.js";
+import "../../../shared-utils/three/PointSelector.js";
+import "../../../shared-utils/three/PointSelectorHelper.js";
+import "../../../shared-utils/three/Magnifier.js";
+import "hammerjs";
+import "../../../shared-utils/three/PointHelper.js";
+import "../../../shared-utils/three/Assets/index.js";
+import "../../../shared-utils/three/PointDomHelper.js";
+import "../../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../rangePiece/html.js";
+import "../../../CSS3DRenderPlugin/index.js";
+import "../../../CSS3DRenderPlugin/Controller.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../../../CSS3DRenderPlugin/utils/even.js";
+import "../../../shared-utils/Subscribe.js";
+import "../../../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../../../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
+import "../../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import "../../../shared-utils/absoluteUrl.js";
+import "../../../shared-utils/animationFrame/BetterTween.js";
+import "../../../shared-utils/animationFrame/index.js";
+import "../../../shared-utils/isTouchDevice.js";
+import "../../../shared-utils/getIntersectionFromEvent.js";
+import "../../../shared-utils/getPointFromHammerEvent.js";
+import "../../../shared-utils/three/getIntersect.js";
+import "../DeleteDom/index.js";
+import "../DeleteDom/_Assets/delete.svg.js";
+import "../DeleteDom/_Assets/delete_bg.png.js";
+import "../DeleteDom/_Assets/delete_hover_bg.png.js";
+import "../../utils/findAssociatedLines.js";
+import "../../utils/math.js";
+import "../../Components/Common/icons/index.js";
+import "../../Components/Common/Switcher1.js";
+import "../../Components/Common/CircleButton.js";
+import "../../../vendor/svelte/transition/index.js";
+import "../../../vendor/svelte/easing/index.js";
+class Zt {
+  constructor(o, t) {
+    e(this, "revoke");
+    e(this, "container");
+    e(this, "mainController");
+    e(this, "disposers", []);
+    e(this, "measureController");
+    e(this, "mode");
+    e(this, "svelteDom");
+    e(this, "_params");
+    e(this, "handleExit", () => {
+      const o = this.container.querySelector(".fpm__exit-icon"), t = this.container.querySelector(".fpm__exit");
+      if (!t || !o)
         throw new Error("cannot find dom");
-      this.mode === "pc" && (Object.assign(e.style, v), Object.assign(t == null ? void 0 : t.style, C));
-      const o = () => {
-        e.style.opacity = "1";
-      }, r = () => {
-        e.style.opacity = "0.85";
+      this.mode === "pc" && (Object.assign(t.style, E), Object.assign(o == null ? void 0 : o.style, x));
+      const r = () => {
+        t.style.opacity = "1";
+      }, s = () => {
+        t.style.opacity = "0.85";
       }, n = () => {
         this.measureController.disable();
       };
-      return e.addEventListener("click", n), e.addEventListener("mouseenter", o), e.addEventListener("mouseleave", r), () => {
-        e.removeEventListener("click", n), e.removeEventListener("mouseenter", o), e.removeEventListener("mouseleave", r);
+      return t.addEventListener("click", n), t.addEventListener("mouseenter", r), t.addEventListener("mouseleave", s), () => {
+        t.removeEventListener("click", n), t.removeEventListener("mouseenter", r), t.removeEventListener("mouseleave", s);
       };
     });
-    var a;
-    this._params = e, this.measureController = t, this.mode = (a = e.mode) != null ? a : "pc", this.container = document.createElement("div"), this.container.innerHTML = this.mode === "mobile" ? p : m, this.container.classList.add("fpm__ui-controller", this.mode), this.container.style.background = "rgba(0, 0, 0, 0.15)", e.container.appendChild(this.container);
-    const o = this.container.querySelectorAll(".fpm__text"), r = this.container.querySelector(".fpm_ui-bg"), n = this.container.querySelector(".fpm_operating-space");
-    Object.assign(r == null ? void 0 : r.style, d), Object.assign(n == null ? void 0 : n.style, y), Object.assign(this.container.style, u), o.forEach((l) => Object.assign(l.style, f));
+    var s, n;
+    this._params = t, this.measureController = o, this.mode = (s = t.mode) != null ? s : "pc", this.container = document.createElement("div"), this.container.innerHTML = this.mode === "mobile" ? u : d, this.container.classList.add("fpm__ui-controller", this.mode), this.container.style.background = "rgba(0, 0, 0, 0.15)";
+    const r = (n = t.useNewUI) != null ? n : !1;
+    if (r && (t.pointSelectorMode === "cursor" ? this.svelteDom = new _({
+      target: t.container,
+      props: { measureController: this.measureController, showExit: t.showExit }
+    }) : t.pointSelectorMode === "fixed" && (this.svelteDom = new b({
+      target: t.container,
+      props: { measureController: this.measureController, showExit: t.showExit }
+    }))), !r) {
+      t.container.appendChild(this.container);
+      const l = this.container.querySelectorAll(".fpm__text"), m = this.container.querySelector(".fpm_ui-bg"), p = this.container.querySelector(".fpm_operating-space");
+      Object.assign(m == null ? void 0 : m.style, y), Object.assign(p == null ? void 0 : p.style, f), Object.assign(this.container.style, v), l.forEach((c) => Object.assign(c.style, C));
+    }
   }
   dispose() {
-    this.hide(), this.container.remove();
+    var o;
+    this.hide(), (o = this.svelteDom) == null || o.$destroy(), this.container.remove();
   }
   show() {
-    return this.container.style.display = "block", this.container.style.opacity = "1", this.container.style.transform = "translate(0, 0)", this.mode === "pc" ? (this.revoke = new E(this.measureController, this.container), this.mainController = new _(this.measureController, this.container, this._params)) : this.mainController = new b(this.measureController, this.container, this._params), this.disposers.push(this.handleExit()), this;
+    return this.container.style.display = "block", this.container.style.opacity = "1", this.container.style.transform = "translate(0, 0)", this.mode === "pc" ? (this.revoke = new w(this.measureController, this.container), this.mainController = new S(this.measureController, this.container, this._params)) : this.mainController = new g(this.measureController, this.container, this._params), this.disposers.push(this.handleExit()), this;
   }
   hide() {
-    var t, e;
-    return this.container.style.display = "none", this.container.style.opacity = "0", this.container.style.transform = "translate(0, 10px)", this.mode === "pc" && ((t = this.revoke) == null || t.dispose()), (e = this.mainController) == null || e.dispose(), this.disposers.forEach((o) => o()), this.disposers = [], this;
+    var o, t;
+    return this.container.style.display = "none", this.container.style.opacity = "0", this.container.style.transform = "translate(0, 10px)", this.mode === "pc" && ((o = this.revoke) == null || o.dispose()), (t = this.mainController) == null || t.dispose(), this.disposers.forEach((r) => r()), this.disposers = [], this;
   }
 }
 export {
-  w as UIController
+  Zt as UIController
 };

package/libs/PanoMeasurePlugin/index.js

@@ -1,40 +1,76 @@
 import t from "./Controller/index.js";
-import { default as $ } from "./Modules/Magnifier.js";
-import { Model as ro } from "./Model/index.js";
-import { default as io } from "./Model/point.js";
-import { default as po } from "./Model/line.js";
-import { Polyline as ao } from "./Model/polyline.js";
+import { default as Xo } from "./Modules/Magnifier.js";
+import { Model as Zo } from "./Model/index.js";
+import { default as $o } from "./Model/point.js";
+import { default as rr } from "./Model/line.js";
+import { Polyline as ir } from "./Model/polyline.js";
 import "./Controller/EditController.js";
-import "hammerjs";
 import "../shared-utils/throttle.js";
 import "./Controller/BaseController.js";
+import "three";
 import "./utils/ironbox.js";
 import "../shared-utils/uuid.js";
 import "./utils/line.js";
 import "@realsee/five/line";
 import "./utils/constants.js";
-import "three";
 import "@realsee/five";
-import "./utils/distanceDom.js";
+import "./utils/dom/distanceItem.js";
+import "./utils/dom/base.js";
 import "./utils/isNDCPointInScreen.js";
+import "../shared-utils/three/centerPoint.js";
 import "../shared-utils/removeArrayItem.js";
-import "./utils/getIntersectionFromEvent.js";
-import "./utils/getPointFromHammerEvent.js";
-import "./Controller/ViewController.js";
-import "./Controller/WatchController.js";
+import "./Model/area.js";
+import "./Model/polygon.js";
+import "../shared-utils/three/IObject3D.js";
+import "./utils/generatePolygonGeometry.js";
+import "earcut";
+import "./utils/dom/areaDom.js";
+import "./utils/geometryUtil.js";
+import "./utils/isIntersecting.js";
+import "../shared-utils/three/PointSelector.js";
+import "../shared-utils/three/PointSelectorHelper.js";
+import "../shared-utils/three/Magnifier.js";
+import "hammerjs";
+import "../shared-utils/three/PointHelper.js";
+import "../shared-utils/three/Assets/index.js";
+import "../shared-utils/three/PointDomHelper.js";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "./Modules/rangePiece/html.js";
+import "../CSS3DRenderPlugin/index.js";
+import "../CSS3DRenderPlugin/Controller.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../CSS3DRenderPlugin/utils/even.js";
+import "../shared-utils/Subscribe.js";
+import "../CSS3DRenderPlugin/utils/positionToVector3.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../CSS3DRenderPlugin/utils/waitFiveModelLoaded.js";
+import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import "../shared-utils/absoluteUrl.js";
+import "../shared-utils/animationFrame/BetterTween.js";
+import "../shared-utils/animationFrame/index.js";
+import "../shared-utils/isTouchDevice.js";
+import "../shared-utils/getIntersectionFromEvent.js";
+import "../shared-utils/getPointFromHammerEvent.js";
+import "../shared-utils/three/getIntersect.js";
 import "./Modules/DeleteDom/index.js";
 import "./Modules/DeleteDom/_Assets/delete.svg.js";
 import "./Modules/DeleteDom/_Assets/delete_bg.png.js";
 import "./Modules/DeleteDom/_Assets/delete_hover_bg.png.js";
+import "./utils/findAssociatedLines.js";
 import "./utils/math.js";
+import "./Controller/ViewController.js";
+import "./Controller/WatchController.js";
 import "./utils/findClosestPoint.js";
 import "./utils/ndc2Screen.js";
-import "./utils/findAssociatedLines.js";
 import "./Controller/MixedController.js";
 import "./Modules/rangePiece/index.js";
-import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "./Modules/rangePiece/html.js";
-import "../shared-utils/animationFrame/index.js";
 import "../shared-utils/noop.js";
 import "./utils/calculateThreeMouse.js";
 import "./utils/mouseGroup.js";
@@ -47,17 +83,30 @@ import "./Modules/UIController/style.js";
 import "./Modules/UIController/MainBtnController.js";
 import "./Modules/UIController/mobileMainBtnController.js";
 import "./Modules/UIController/Revoke/index.js";
+import "./Components/Controller0.js";
+import "../vendor/svelte/internal/index.js";
+import "./Components/Common/Switcher0.js";
+import "./Components/Common/Exit.js";
+import "./Components/Common/icons/index.js";
+import "./Components/Controller1.js";
+import "./Components/Common/Switcher1.js";
+import "./Components/Common/CircleButton.js";
+import "../vendor/svelte/transition/index.js";
+import "../vendor/svelte/easing/index.js";
 import "./Modules/GuideController.js";
+import "../vendor/object-assign-deep/objectAssignDeep.js";
+import "./Components/Tip.js";
 import "./Controller/ShortcutKeyController.js";
-const Y = function(o, r) {
+import "../shared-utils/safeObj.js";
+const Uo = function(o, r) {
   return new t(o, r);
 };
 export {
-  $ as Magnifier,
-  Y as PanoMeasurePlugin,
-  po as PanoMeasurePluginLine,
-  ro as PanoMeasurePluginModel,
-  io as PanoMeasurePluginPoint,
-  ao as PanoMeasurePluginPolyline,
-  Y as default
+  Xo as Magnifier,
+  Uo as PanoMeasurePlugin,
+  rr as PanoMeasurePluginLine,
+  Zo as PanoMeasurePluginModel,
+  $o as PanoMeasurePluginPoint,
+  ir as PanoMeasurePluginPolyline,
+  Uo as default
 };

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

@@ -21,6 +21,30 @@ export interface OpenParameter {
     isMobile?: boolean;
     crossHairParameter?: CrossHairParameter;
 }
+/** 长度达到一定值时，自动结束线段，null 的话不自动结束 */
+export interface autoEndConfig {
+    line?: number | null;
+    area?: number | null;
+}
+export type MeasureType = 'line' | 'area';
+export type PointSelectorMode = 'fixed' | 'cursor';
+export interface EditParameter {
+    /**
+     * @description 选择测量插件的模式
+     * @default ['line']
+     * @example
+     * ['line']: 传统的测距
+     * ['area']: 新增的测面积功能
+     * ['line', 'area']: 同时开启测距和测面积功能
+     */
+    allowMeasureType?: Array<MeasureType>;
+    /**
+     * @description: 选点的两种模式, 'fixed' 为固定选点为屏幕中心点，拖动five画布来选点，'mouse' 为跟随鼠标移动
+     * @default: 'fixed'
+     */
+    pointSelectorMode?: PointSelectorMode;
+    autoEndConfig?: autoEndConfig;
+}
 export interface CrossHairParameter {
     useNormalVector?: boolean;
     ballColor?: number;

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

@@ -4,6 +4,7 @@ import type { State } from '../Controller/MixedController';
 import type Line from '../Model/line';
 import type Point from '../Model/point';
 import type { Polyline } from '../Model/polyline';
+import type { MeasureType } from './data';
 type ControllerEvent = {
     enable: (userAction: boolean) => void;
     disable: (userAction: boolean) => void;
@@ -16,13 +17,26 @@ type WatchEvent = {
     selectedChange: (lines: Line[]) => void;
 };
 type EditEvent = {
-    /**
-     * 编辑线条变更
-     */
+    /** 编辑线条变更 */
     editedPolylineChange: (polyline: Polyline) => void;
     /** 编辑中的虚线变更 */
     editedDashedLineChange: (line: Line | null) => void;
     anchorChange: (anchor: Vector3 | null) => void;
+    /** 测量类型变更 */
+    measureTypeChange: (measureTpe: MeasureType) => void;
+    revoke: (params: {
+        isEmpty: boolean;
+    }) => void;
+    /** 点一下按钮就可以完成，如：测距中，差最后一次打点就可以完成线段；测面积中，当前点吸附到了多边形的开始点上，点一下就可以闭合多边形 */
+    readyComplete: () => void;
+    /** 点击了撤销或者其他原因导致刚刚的 readyComplete 失效 */
+    notReadyComplete: () => void;
+    /** 选点 */
+    pointsChange: (points: any[]) => void;
+    /** 一条线段或者一个面积编辑完成 */
+    complete: () => void;
+    /** 测量面积时，是否可以打点的状态是会一直变的 */
+    allowAddPointStateChange: (state: 'allow' | 'forbid') => void;
 };
 type DragEvent = {
     wantsDragLine: (event: {

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

@@ -1,5 +1,5 @@
 import type { Config as BaseConfig } from '../../base/BasePlugin';
-import type { UserDistanceItem } from '../utils/distanceDom';
+import type { UserDistanceItem } from '../utils/dom/distanceItem';
 export interface Config extends BaseConfig {
     userDistanceItemCreator?: undefined | (() => UserDistanceItem);
     /** 展示 distance DOM 时，使用的转换函数

package/libs/PanoMeasurePlugin/utils/dom/areaDom.d.ts

@@ -0,0 +1,22 @@
+import type { ItemDomParams } from './base';
+import { ItemDom } from './base';
+import type { Five } from '@realsee/five';
+import type { BufferGeometry } from 'three';
+import type Area from '../../Model/area';
+interface AreaItemParams extends ItemDomParams {
+    area: Area;
+}
+export declare class AreaItem extends ItemDom {
+    protected params: AreaItemParams;
+    private area;
+    constructor(params: AreaItemParams);
+    /**
+     * @description: dom 依赖的多边形的顶点的位置更新时，更新 dom 的位置和面积
+     */
+    updateArea(five: Five, _geometry?: BufferGeometry): void;
+    updateAreaText(area: number, config?: {
+        unit?: string;
+        fix?: number;
+    }): void;
+}
+export {};

package/libs/PanoMeasurePlugin/utils/dom/areaDom.js

@@ -0,0 +1,50 @@
+var p = Object.defineProperty, l = Object.defineProperties;
+var x = Object.getOwnPropertyDescriptors;
+var c = Object.getOwnPropertySymbols;
+var D = Object.prototype.hasOwnProperty, y = Object.prototype.propertyIsEnumerable;
+var s = (o, e, t) => e in o ? p(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t, a = (o, e) => {
+  for (var t in e || (e = {}))
+    D.call(e, t) && s(o, t, e[t]);
+  if (c)
+    for (var t of c(e))
+      y.call(e, t) && s(o, t, e[t]);
+  return o;
+}, d = (o, e) => l(o, x(e));
+var u = (o, e, t) => (s(o, typeof e != "symbol" ? e + "" : e, t), t);
+import { ItemDom as I } from "./base.js";
+import { getGeometryInfo as A } from "../geometryUtil.js";
+import "../isNDCPointInScreen.js";
+import "three";
+import "../../../shared-utils/three/centerPoint.js";
+class f extends I {
+  constructor(t) {
+    t.containerStyle = d(a({}, t.containerStyle), {
+      zIndex: "1"
+    }), t.contentStyle = d(a({}, t.contentStyle), {
+      background: "#6386FF",
+      borderRadius: "2px"
+    });
+    super(t);
+    u(this, "area");
+    this.area = t.area, this.containerDom.appendChild(this.contentDom);
+  }
+  /**
+   * @description: dom 依赖的多边形的顶点的位置更新时，更新 dom 的位置和面积
+   */
+  updateArea(t, n) {
+    const r = n != null ? n : this.area.polygon.geometry, i = A(r);
+    if (!i) {
+      this.ndcPosition = null, this.updateDomPosition(t);
+      return;
+    }
+    const { area: h, center: m } = i;
+    this.ndcPosition = m, this.updateDomPosition(t), this.updateAreaText(h);
+  }
+  updateAreaText(t, n) {
+    const { unit: r = "m²", fix: i = 2 } = n != null ? n : {};
+    this.contentDom.innerText = `${t.toFixed(i)}${r}`;
+  }
+}
+export {
+  f as AreaItem
+};

package/libs/PanoMeasurePlugin/utils/dom/base.d.ts

@@ -0,0 +1,29 @@
+import type { Vector3 } from 'three';
+import type { Five } from '@realsee/five';
+export interface ItemDomParams {
+    clickCallback?: (event: MouseEvent, item: ItemDom) => unknown;
+    containerStyle?: Partial<CSSStyleDeclaration>;
+    contentStyle?: Partial<CSSStyleDeclaration>;
+}
+export declare abstract class ItemDom {
+    ndcPosition: Vector3 | null;
+    protected contentDom: HTMLElement;
+    protected containerDom: HTMLElement;
+    protected params: ItemDomParams;
+    protected canSelected: boolean;
+    constructor(params: ItemDomParams);
+    handleClick: (e: MouseEvent) => void;
+    setCanSelect(canSelect: boolean): void;
+    highlight(): void;
+    unHighlight(): void;
+    appendTo(container: Element): void;
+    remove(): void;
+    show(): void;
+    hide(): void;
+    tempHide(): void;
+    tempShow(): void;
+    /**
+     * @description: camera update 的时候，更新dom的位置
+     */
+    updateDomPosition(five: Five): void;
+}