@realsee/dnalogel 2.21.0-dev.7 → 2.21.0-dev.8

package/libs/PanoMeasurePlugin/Controller/EditController.js

@@ -1,23 +1,26 @@
-var y = Object.defineProperty;
-var C = (p, a, t) => a in p ? y(p, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : p[a] = t;
-var s = (p, a, t) => (C(p, typeof a != "symbol" ? a + "" : a, t), t);
-import k from "../Model/line.js";
-import c from "../Model/point.js";
-import { throttle as S } from "../../shared-utils/throttle.js";
-import L from "./BaseController.js";
-import { Polyline as f } from "../Model/polyline.js";
-import u from "../Model/area.js";
-import v from "../utils/isIntersecting.js";
-import { PointSelector as A } from "../../shared-utils/three/PointSelector.js";
+var U = Object.defineProperty;
+var H = (m, c, e) => c in m ? U(m, c, { enumerable: !0, configurable: !0, writable: !0, value: e }) : m[c] = e;
+var o = (m, c, e) => (H(m, typeof c != "symbol" ? c + "" : c, e), e);
+import b from "../Model/line.js";
+import S from "../Model/point.js";
+import { throttle as j } from "../../shared-utils/throttle.js";
+import x from "./BaseController.js";
+import { Polyline as k } from "../Model/polyline.js";
+import T from "../Model/area.js";
+import w from "../utils/isIntersecting.js";
+import { PointSelector as G } from "../../shared-utils/three/PointSelector.js";
+import B from "../Modules/DeleteDom/index.js";
+import { findAssociatedLines as V } from "../utils/findAssociatedLines.js";
+import { Vector2 as y } from "three";
+import I from "../utils/isNDCPointInScreen.js";
+import { closestPointOnLine as $ } from "../utils/math.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/removeArrayItem.js";
 import "../utils/ironbox.js";
 import "../Model/polygon.js";
@@ -58,111 +61,62 @@ import "../../shared-utils/animationFrame/index.js";
 import "../../shared-utils/isTouchDevice.js";
 import "../../shared-utils/getIntersectionFromEvent.js";
 import "../../shared-utils/getPointFromHammerEvent.js";
-const l = () => !1;
-class Ee extends L {
-  constructor(t) {
-    var e;
-    super(t);
-    s(this, "type", "edit");
-    s(this, "polyline");
-    s(this, "area");
-    s(this, "hasAppendDashed", !1);
-    s(this, "fiveElement");
+import "../Modules/DeleteDom/_Assets/delete.svg.js";
+import "../Modules/DeleteDom/_Assets/delete_bg.png.js";
+import "../Modules/DeleteDom/_Assets/delete_hover_bg.png.js";
+const E = () => !1;
+class Xe extends x {
+  constructor(e) {
+    var t;
+    super(e);
+    o(this, "type", "edit");
+    o(this, "polyline");
+    o(this, "area");
+    o(this, "hasAppendDashed", !1);
+    // private deleteDom: DeleteDom
+    o(this, "fiveElement");
     /** 上一个端点位置 */
-    s(this, "lastPoint", null);
-    s(this, "pointSelector");
+    o(this, "lastPoint", null);
+    o(this, "pointSelector");
+    o(this, "deleteDom");
     /** 根据 intersection 更新放大镜和吸附点 */
-    s(this, "onIntersectionUpdate", S(() => this.updateDashed(), 20));
+    o(this, "onIntersectionUpdate", j(() => this.updateDashed(), 20));
     /** 撤销编辑 */
-    s(this, "revoke", () => {
+    o(this, "revoke", () => {
       this.currentMeasureType === "area" ? this.revokeArea() : this.currentMeasureType === "line" && this.revokeLine();
     });
     /**
      * @description: 测面积的撤销功能
      */
-    s(this, "revokeArea", () => {
+    o(this, "revokeArea", () => {
       if (this.area.points.length !== 0) {
         if (this.area.popPoint(), this.area.points.length === 0) {
           this.lastPoint = null, this.hasAppendDashed = !1, this.dashed.remove(), this.five.needsRender = !0, this.hook.emit("revoke", { isEmpty: !0 });
           return;
         } else
-          this.lastPoint = new c(this.area.points[this.area.points.length - 1]), this.updateDashed();
+          this.lastPoint = new S(this.area.points[this.area.points.length - 1]), this.updateDashed();
         this.five.needsRender = !0;
       }
     });
     /**
      * @description: 测距的撤销功能
      */
-    s(this, "revokeLine", (t) => {
-      const e = t || this.polyline;
-      if (e.lines.length === 0 && this.lastPoint) {
+    o(this, "revokeLine", (e) => {
+      const t = e || this.polyline;
+      if (t.lines.length === 0 && this.lastPoint) {
         this.lastPoint = null, this.hasAppendDashed = !1, this.dashed.remove(), this.hook.emit("anchorChange", null), this.hook.emit("editedDashedLineChange", null), this.five.needsRender = !0;
         return;
       }
-      if (e.lines.length === 0 && !this.lastPoint || !this.lastPoint)
+      if (t.lines.length === 0 && !this.lastPoint || !this.lastPoint)
         return;
-      const i = e.lines[e.lines.length - 1], o = i.findAnotherPoint(this.lastPoint);
-      o && (this.lastPoint = o, this.hook.emit("anchorChange", o.position), this.group.remove(i.mesh), e.removeLine(i), i.distanceItem.remove(), this.updateDashed(), this.five.needsRender = !0);
+      const i = t.lines[t.lines.length - 1], s = i.findAnotherPoint(this.lastPoint);
+      s && (this.lastPoint = s, this.hook.emit("anchorChange", s.position), this.group.remove(i.mesh), t.removeLine(i), i.distanceItem.remove(), this.updateDashed(), this.five.needsRender = !0);
     });
-    // private wantsTapGesture = (raycaster): false => {
-    //   if (this.editParams.pointSelectorMode === 'cursor') return false // 鼠标选点的话点击动作为选点，所有没有下面的点击删除动作
-    //   // =================================    这是选择面的逻辑      =================================
-    //   const intersections = this.model.areas
-    //     .map((area) => raycaster.intersectObject(area.polygon, true)[0]) // 获取所有的交点
-    //     .sort((a, b) => a.distance - b.distance) // 按照距离排序
-    //   const intersectionObject = intersections[0]?.object.parent
-    //   if (intersectionObject.isPolygonMesh) {
-    //     const area = this.model.areas.find((area) => area.polygon === intersectionObject)
-    //     if (area) {
-    //       const { x, y } = intersections[0].point.clone().project(this.five.camera)
-    //       const left = `${((x + 1) / 2) * 100}%`
-    //       const top = `${((-y + 1) / 2) * 100}%`
-    //       this.chooseArea(area, { left, top })
-    //     }
-    //   }
-    //   return false
-    //   // // ================================= 这后面是之前的选择线的逻辑 =================================
-    //   // const [target] = this.five.model.intersectRaycaster(raycaster)
-    //   // if (!target) return
-    //   // const camera = this.five.camera
-    //   // const ndcTarget = target.point.clone().project(camera)
-    //   // const screenWidth = this.container.clientWidth
-    //   // const screenHeight = this.container.clientHeight
-    //   // const targetScreenPosition = new Vector2(ndcTarget.x * screenWidth, ndcTarget.y * screenHeight)
-    //   // // 把线的端点全部映射到屏幕上，过滤掉不在视野内的线，同时乘以屏幕宽 & 高
-    //   // const screenLines = this.model
-    //   //   .getAllLines()
-    //   //   .map((line) => {
-    //   //     const [startPoint, endPoint] = line.points
-    //   //     const ndcStartPoint = startPoint.position.clone().project(camera)
-    //   //     const ndcEndPoint = endPoint.position.clone().project(camera)
-    //   //     if (!isNDCPointInScreen(ndcStartPoint) && !isNDCPointInScreen(ndcEndPoint)) return null
-    //   //     const startScreenPosition = new Vector2(ndcStartPoint.x * screenWidth, ndcStartPoint.y * screenHeight)
-    //   //     const endScreenPosition = new Vector2(ndcEndPoint.x * screenWidth, ndcEndPoint.y * screenHeight)
-    //   //     return { id: line.id, points: [startScreenPosition, endScreenPosition] }
-    //   //   })
-    //   //   .filter((line) => !!line) as { id: string; points: Vector2[] }[]
-    //   // if (screenLines.length === 0) return
-    //   // // 找这些线距离鼠标点击位置最近的线
-    //   // const distanceLines = screenLines
-    //   //   .map((line) => {
-    //   //     const closestPoint = closestPointOnLine(targetScreenPosition, line.points)
-    //   //     return { id: line.id, distance: closestPoint.distanceTo(targetScreenPosition) }
-    //   //   })
-    //   //   .sort((a, b) => a.distance - b.distance)
-    //   // const closestScreenLine = distanceLines[0]
-    //   // if (closestScreenLine.distance > 20) return
-    //   // const closestLine = this.model.getAllLines().find(({ id }) => id === closestScreenLine.id)
-    //   // if (!closestLine) return
-    //   // this.chooseLine(closestLine)
-    //   // return false
-    // }
-    s(this, "onMouseLeave", () => {
-      var t;
-      this.lastPoint && ((t = this.pointSelector.position) == null || t.point.copy(this.lastPoint.position), this.updateDashed()), this.area.hideArea();
+    o(this, "onMouseLeave", () => {
+      this.dashed.hide(), this.perpendicularDashed.hide(), this.area.hideArea();
     });
     /** 编辑线条发生改变时通知外部 */
-    s(this, "onLineChanged", () => {
+    o(this, "onLineChanged", () => {
       this.hook.emit("editedPolylineChange", this.polyline);
     });
     /**
@@ -170,74 +124,140 @@ class Ee extends L {
      * 2. 把上一个点的位置更新为当前点的位置
      * 3. 清除 pointSelector
      */
-    s(this, "onSelect", () => {
-      var o, h, d, m;
+    o(this, "onSelect", () => {
+      var s, h, d, p;
       this.hasAppendDashed || (this.dashed.distanceItem.appendTo(this.container), this.group.add(this.dashed.mesh), this.currentMeasureType === "area" && this.group.add(this.perpendicularDashed.mesh)), this.hasAppendDashed = !0;
-      const t = (() => {
-        var n, r;
+      const e = (() => {
+        var n, a;
         if (this.currentMeasureType === "area")
           return this.area.projectPoint((n = this.pointSelector.position) == null ? void 0 : n.point);
         if (this.currentMeasureType === "line")
-          return (r = this.pointSelector.position) == null ? void 0 : r.point;
+          return (a = this.pointSelector.position) == null ? void 0 : a.point;
       })();
-      if (!t)
+      if (!e)
         return;
-      const e = new c(t), i = this.lastPoint;
-      if (this.lastPoint = e, this.currentMeasureType === "line") {
-        if (e && i) {
-          const r = new k(i, e, this.model);
-          r.distanceItem.setCanSelect(!1), r.distanceItem.appendTo(this.container), this.polyline.addLine(r), this.group.add(r.mesh), r.distanceItem.update(this.five);
+      const t = new S(e), i = this.lastPoint;
+      if (this.lastPoint = t, this.currentMeasureType === "line") {
+        if (t && i) {
+          const a = new b(i, t, this.model);
+          a.distanceItem.setCanSelect(!1), a.distanceItem.appendTo(this.container), this.polyline.addLine(a), this.group.add(a.mesh), a.distanceItem.update(this.five);
         }
-        const n = (h = (o = this.editParams) == null ? void 0 : o.autoEndConfig) == null ? void 0 : h.line;
+        const n = (h = (s = this.editParams) == null ? void 0 : s.autoEndConfig) == null ? void 0 : h.line;
         typeof n == "number" && (this.polyline.getPointLength() >= n ? this.complete() : this.polyline.getPointLength() === n - 1 && this.hook.emit("readyComplete"));
       } else if (this.currentMeasureType === "area") {
-        this.area.addPoints(e.position);
-        const n = (m = (d = this.editParams) == null ? void 0 : d.autoEndConfig) == null ? void 0 : m.area;
+        this.area.addPoints(t.position);
+        const n = (p = (d = this.editParams) == null ? void 0 : d.autoEndConfig) == null ? void 0 : p.area;
         typeof n == "number" && (this.area.points.length >= n ? this.complete() : this.area.points.length === n - 1 && this.hook.emit("readyComplete"));
       }
-      this.updateDashed(), this.five.needsRender = !0, this.hook.emit("anchorChange", e.position);
+      this.updateDashed(), this.five.needsRender = !0, this.hook.emit("anchorChange", t.position);
     });
     /** 移动全景时更新 distanceItem 在屏幕上的位置 */
-    s(this, "onCameraUpdate", () => {
+    o(this, "onCameraUpdate", () => {
       this.updateDistanceUI();
     });
     /** 更新虚线 */
-    s(this, "updateDashed", () => {
+    o(this, "updateDashed", () => {
       var i;
       if (!this.lastPoint)
         return;
-      const t = this.lastPoint.position, e = (() => {
-        var o, h;
+      const e = this.lastPoint.position, t = (() => {
+        var s, h;
         if (this.currentMeasureType === "area")
-          return this.area.projectPoint((o = this.pointSelector.position) == null ? void 0 : o.point);
+          return this.area.projectPoint((s = this.pointSelector.position) == null ? void 0 : s.point);
         if (this.currentMeasureType === "line")
           return (h = this.pointSelector.position) == null ? void 0 : h.point;
       })();
-      if (this.dashed.setPoints(t, e), this.dashed.distanceItem.update(this.five), this.hook.emit("editedDashedLineChange", this.dashed), this.currentMeasureType === "area")
+      if (!t) {
+        this.dashed.hide();
+        return;
+      }
+      if (this.dashed.setPoints(e, t), this.dashed.distanceItem.update(this.five), this.dashed.show(), this.hook.emit("editedDashedLineChange", this.dashed), this.currentMeasureType === "area")
         if (this.area.areaItem.setCanSelect(!1), this.area.points.length >= 2) {
-          const o = this.area.polyline.lines.map((n) => ({ start: n.points[0].position, end: n.points[1].position })), h = v({ start: t, end: e }, o), d = v({ start: e, end: this.area.points[0] }, o);
+          const s = this.area.polyline.lines.map((n) => ({ start: n.points[0].position, end: n.points[1].position })), h = w({ start: e, end: t }, s), d = w({ start: t, end: this.area.points[0] }, s);
           if (h || d)
             this.area.hideArea(), this.hook.emit("allowAddPointStateChange", "forbid");
           else {
             this.area.showArea();
-            const n = [...this.area.points, e];
+            const n = [...this.area.points, t];
             this.area.polygon.updatePoints(n), this.area.areaItem.updateArea(this.five);
-            const r = (i = this.pointSelector.position) == null ? void 0 : i.point;
-            if (!r) {
+            const a = (i = this.pointSelector.position) == null ? void 0 : i.point;
+            if (!a) {
               this.perpendicularDashed.hide();
               return;
             }
-            const g = r, P = e;
+            const g = a, P = t;
             this.perpendicularDashed.setPoints(g, P), this.perpendicularDashed.show(), this.hook.emit("allowAddPointStateChange", "allow");
           }
         } else
           this.area.hideArea(), this.perpendicularDashed.hide();
       this.five.needsRender = !0;
     });
-    this.pointSelector = new A(this.five, {
+    // 下面一堆高亮相关
+    o(this, "wantsTapGesture", (e) => {
+      var C, D;
+      if (this.editParams.pointSelectorMode === "cursor" || this.lastPoint)
+        return !1;
+      const t = this.model.areas.map((r) => e.intersectObject(r.polygon, !0)[0]).sort((r, l) => r.distance - l.distance), i = (D = (C = t[0]) == null ? void 0 : C.object) == null ? void 0 : D.parent;
+      if (i != null && i.isPolygonMesh) {
+        const r = this.model.areas.find((l) => l.polygon === i);
+        if (r) {
+          const { x: l, y: v } = t[0].point.clone().project(this.five.camera), f = `${(l + 1) / 2 * 100}%`, u = `${(-v + 1) / 2 * 100}%`;
+          return this.chooseArea(r, { left: f, top: u }), !1;
+        }
+      }
+      const [s] = this.five.model.intersectRaycaster(e);
+      if (!s)
+        return;
+      const h = this.five.camera, d = s.point.clone().project(h), p = this.container.clientWidth, n = this.container.clientHeight, a = new y(d.x * p, d.y * n), g = this.model.getAllLines().map((r) => {
+        const [l, v] = r.points, f = l.position.clone().project(h), u = v.position.clone().project(h);
+        if (!I(f) && !I(u))
+          return null;
+        const M = new y(f.x * p, f.y * n), R = new y(u.x * p, u.y * n);
+        return { id: r.id, points: [M, R] };
+      }).filter((r) => !!r);
+      if (g.length === 0)
+        return;
+      const L = g.map((r) => {
+        const l = $(a, r.points);
+        return { id: r.id, distance: l.distanceTo(a) };
+      }).sort((r, l) => r.distance - l.distance)[0];
+      if (L.distance > 20)
+        return;
+      const A = this.model.getAllLines().find(({ id: r }) => r === L.id);
+      if (A)
+        return this.chooseLine(A), !1;
+    });
+    o(this, "chooseLine", (e) => {
+      const t = V(e);
+      this.deleteDom.setTarget(t).setLines(t).updatePosition().show(), this.highlightLines(t), this.hook.emit("selectedChange", t);
+    });
+    o(this, "chooseArea", (e, t) => {
+      this.deleteDom.setTarget(e).updatePosition(t.left, `calc(${t.top} - 1.5rem)`).show(), this.highlightArea(e);
+    });
+    o(this, "deleteArea", (e) => {
+      this.unHighlightArea(e), e.dispose(), this.deleteDom.hide();
+    });
+    o(this, "deleteLine", (e) => {
+      const t = e[0], i = this.model.getPolylineByLine(t);
+      i && (this.model.removePolyline(i), this.deleteDom.setLines([]).hide());
+    });
+    this.fiveElement = this.five.getElement(), this.deleteDom = new B(this.five, {
+      i18n: this.config.i18n,
+      onClick: (i, s) => {
+        var p;
+        const h = s.type === "area", d = Array.isArray(s) && ((p = s[0]) == null ? void 0 : p.type) === "line";
+        h && this.deleteArea(s), d && this.deleteLine(s);
+      },
+      cancel: (i) => {
+        var d;
+        this.deleteDom.hide();
+        const s = i.type === "area", h = Array.isArray(i) && ((d = i[0]) == null ? void 0 : d.type) === "line";
+        s && this.unHighlightArea(i), h && this.unHighlightLines(i);
+      }
+    }).appendTo(this.container), this.pointSelector = new G(this.five, {
       mode: this.editParams.pointSelectorMode,
       pointSelectorHelperParams: { magnifierParams: this.magnifierParams }
-    }), this.pointSelector.enable(), this.polyline = new f({ model: this.model }), this.area = new u(void 0, {
+    }), this.pointSelector.enable(), this.polyline = new k({ model: this.model }), this.area = new T(void 0, {
       five: this.five,
       model: this.model,
       meshContainer: this.group,
@@ -245,16 +265,16 @@ class Ee extends L {
     }), this.model.addPolyline(this.polyline), this.model.addArea(this.area), this.model.getAllLines().forEach((i) => {
       i.distanceItem.appendTo(this.container), i.distanceItem.update(this.five), i.distanceItem.setCanSelect(!0), this.group.add(i.mesh);
     }), this.model.getAllAreas().forEach((i) => {
-      i.areaItem.appendTo(this.container), i.areaItem.updateDomPosition(this.five), i.areaItem.setCanSelect(!0), this.group.add(i.polygon), i.polyline.lines.forEach((o) => {
-        o.distanceItem.appendTo(this.container), o.distanceItem.update(this.five), this.group.add(o.mesh);
+      i.areaItem.appendTo(this.container), i.areaItem.updateDomPosition(this.five), i.areaItem.setCanSelect(!0), this.group.add(i.polygon), i.polyline.lines.forEach((s) => {
+        s.distanceItem.appendTo(this.container), s.distanceItem.update(this.five), this.group.add(s.mesh);
       });
-    }), this.five.on("cameraUpdate", this.onCameraUpdate), this.five.on("wantsTapGesture", l), this.five.on("wantsToMoveToPano", l), this.pointSelector.hook.on("intersectionUpdate", this.onIntersectionUpdate), this.pointSelector.hook.on("select", this.onSelect), this.polyline.hook.on("lineAdded", this.onLineChanged), this.polyline.hook.on("lineRemoved", this.onLineChanged), this.five.helperVisible = !1, (e = this.fiveElement) == null || e.addEventListener("mouseleave", this.onMouseLeave), this.hook.emit("anchorChange", null), this.hook.emit("editedDashedLineChange", null), this.five.refresh();
+    }), this.five.on("cameraUpdate", this.onCameraUpdate), this.five.on("wantsTapGesture", this.wantsTapGesture), this.five.on("wantsToMoveToPano", E), this.pointSelector.hook.on("intersectionUpdate", this.onIntersectionUpdate), this.pointSelector.hook.on("select", this.onSelect), this.polyline.hook.on("lineAdded", this.onLineChanged), this.polyline.hook.on("lineRemoved", this.onLineChanged), this.five.helperVisible = !1, (t = this.fiveElement) == null || t.addEventListener("mouseleave", this.onMouseLeave), this.hook.emit("anchorChange", null), this.hook.emit("editedDashedLineChange", null), this.five.refresh();
   }
   dispose() {
-    var t;
-    super.dispose(), this.model.areas.forEach((e) => {
-      (e.points.length < 2 || e.polygon.isBlank) && this.model.removeArea(e);
-    }), this.five.helperVisible = !0, this.pointSelector.disable(), this.dashed.remove(), this.perpendicularDashed.remove(), this.five.off("cameraUpdate", this.onCameraUpdate), this.five.off("wantsTapGesture", l), this.five.off("wantsToMoveToPano", l), this.pointSelector.hook.off("intersectionUpdate", this.onIntersectionUpdate), this.pointSelector.hook.off("select", this.onSelect), this.polyline.hook.off("lineAdded", this.onLineChanged), this.polyline.hook.off("lineRemoved", this.onLineChanged), (t = this.fiveElement) == null || t.removeEventListener("mouseleave", this.onMouseLeave), this.magnifier.dispose(), this.dashed.distanceItem.remove(), this.five.needsRender = !0;
+    var e;
+    super.dispose(), this.model.areas.forEach((t) => {
+      (t.points.length < 2 || t.polygon.isBlank) && this.model.removeArea(t);
+    }), this.five.helperVisible = !0, this.pointSelector.disable(), this.dashed.remove(), this.perpendicularDashed.remove(), this.five.off("cameraUpdate", this.onCameraUpdate), this.five.off("wantsTapGesture", this.wantsTapGesture), this.five.off("wantsToMoveToPano", E), this.pointSelector.hook.off("intersectionUpdate", this.onIntersectionUpdate), this.pointSelector.hook.off("select", this.onSelect), this.polyline.hook.off("lineAdded", this.onLineChanged), this.polyline.hook.off("lineRemoved", this.onLineChanged), (e = this.fiveElement) == null || e.removeEventListener("mouseleave", this.onMouseLeave), this.magnifier.dispose(), this.dashed.distanceItem.remove(), this.five.needsRender = !0;
   }
   getEditingLines() {
     return this.polyline.lines;
@@ -263,9 +283,26 @@ class Ee extends L {
     this.onSelect();
   }
   complete() {
-    this.hook.emit("complete"), this.currentMeasureType === "area" ? (this.area = new u(void 0, { five: this.five, model: this.model, meshContainer: this.group, domContainer: this.container }), this.model.addArea(this.area)) : this.currentMeasureType === "line" && (this.polyline = new f({ model: this.model }), this.model.addPolyline(this.polyline)), this.lastPoint = void 0;
+    this.hook.emit("complete"), this.currentMeasureType === "area" ? (this.area.complete(), this.area = new T(void 0, { five: this.five, model: this.model, meshContainer: this.group, domContainer: this.container }), this.model.addArea(this.area)) : this.currentMeasureType === "line" && (this.polyline = new k({ model: this.model }), this.model.addPolyline(this.polyline)), this.dashed.hide(), this.perpendicularDashed.hide(), this.lastPoint = void 0;
+  }
+  highlightArea(e) {
+    this.highlightLines(e.polyline.lines), this.five.needsRender = !0;
+  }
+  unHighlightArea(e) {
+    this.unHighlightLines(e.polyline.lines), this.five.needsRender = !0;
+  }
+  highlightLines(e) {
+    e.forEach((t) => this.highlightLine(t));
+  }
+  unHighlightLines(e) {
+    e.forEach((t) => {
+      t.selected = !1, t.distanceItem.unHighlight(), this.group.remove(t.lightMesh), this.five.needsRender = !0;
+    });
+  }
+  highlightLine(e) {
+    e.selected || (e.selected = !0, this.group.add(e.lightMesh), e.distanceItem.highlight(), this.five.needsRender = !0);
   }
 }
 export {
-  Ee as default
+  Xe as default
 };

package/libs/PanoMeasurePlugin/Controller/MixedController.js

@@ -1,7 +1,7 @@
 var b = Object.defineProperty;
-var D = (n, s, e) => s in n ? b(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
-var t = (n, s, e) => (D(n, typeof s != "symbol" ? s + "" : s, e), e);
-import { Model as S } from "../Model/index.js";
+var S = (n, s, e) => s in n ? b(n, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[s] = e;
+var t = (n, s, e) => (S(n, typeof s != "symbol" ? s + "" : s, e), e);
+import { Model as D } from "../Model/index.js";
 import y from "../Model/line.js";
 import T from "./BaseController.js";
 import M from "../Modules/DeleteDom/index.js";
@@ -119,10 +119,10 @@ class le extends T {
     t(this, "cancelDeleteClickCallback", () => {
       this.clearHighlightLines();
     });
-    this.model = new S(this.config), this.polyline = new L({ model: this.model }), this.rangePieceController = new E(e), this.deleteDom = new M(this.five, {
+    this.model = new D(this.config), this.polyline = new L({ model: this.model }), this.rangePieceController = new E(e), this.deleteDom = new M(this.five, {
       i18n: this.config.i18n,
       onClick: this.deleteDomClickCallback,
-      cancelDelete: this.cancelDeleteClickCallback
+      cancel: this.cancelDeleteClickCallback
     }).appendTo(this.container), this.five.on("cameraUpdate", this.onCameraUpdate), this.five.on("wantsTapGesture", this.onWantsTapGesture), this.five.on("wantsToMoveToPano", this.onWantsToMoveToPano), this.five.helperVisible = !1, this.hook.emit("editedDashedLineChange", null), this.hook.on("getStartPoint", this.onGetStartPoint), this.hook.on("getEndPoint", this.onGetEndPoint), this.hook.on("nowPointChange", this.onNowPointChange), this.hook.on("willChangeState", this.onWillChangeState), this.five.refresh();
   }
   dispose() {

package/libs/PanoMeasurePlugin/Controller/WatchController.d.ts

@@ -14,9 +14,9 @@ export default class WatchController extends BaseController {
     highlightLine(line: Line): void;
     clearHighlightLines(): void;
     private highlightArea;
+    private unHighlightArea;
     private highlightLines;
     private unHighlightLines;
-    private unHighlightArea;
     private onPanStart;
     private onPanEnd;
     private onPan;

package/libs/PanoMeasurePlugin/Controller/WatchController.js

@@ -8,8 +8,8 @@ import G from "./BaseController.js";
 import { Raycaster as T, Vector2 as u } from "three";
 import { closestPointOnLine as U } from "../utils/math.js";
 import { findClosestPoint as b } from "../utils/findClosestPoint.js";
-import { findAssociatedLines as D } from "../utils/findAssociatedLines.js";
-import { getPointFromHammerEvent as w } from "../../shared-utils/getPointFromHammerEvent.js";
+import { findAssociatedLines as w } from "../utils/findAssociatedLines.js";
+import { getPointFromHammerEvent as D } from "../../shared-utils/getPointFromHammerEvent.js";
 import j from "../Model/area.js";
 import x from "../Model/polygon.js";
 import "../Modules/DeleteDom/_Assets/delete.svg.js";
@@ -50,14 +50,14 @@ class Pe extends G {
       var a;
       if (this.model.getAllLines().length === 0 || !this.fiveElement)
         return;
-      const i = w(e).point, t = (a = b(this.five, this.model.getAllPoints(), i, 20)) == null ? void 0 : a.point;
+      const i = D(e).point, t = (a = b(this.five, this.model.getAllPoints(), i, 20)) == null ? void 0 : a.point;
       if (!t) {
         this.editPointState = void 0;
         return;
       }
       const n = {
         point: t,
-        associatedLines: D(t.lines[0])
+        associatedLines: w(t.lines[0])
       };
       this.hook.emit("wantsDragLine", {
         point: t.id,
@@ -70,7 +70,7 @@ class Pe extends G {
     s(this, "onPan", (e) => {
       if (!this.editPointState || !this.fiveElement)
         return;
-      const i = w(e).ndcPoint, t = new T();
+      const i = D(e).ndcPoint, t = new T();
       t.setFromCamera(i, this.five.camera);
       const [n] = this.five.model.intersectRaycaster(t);
       n && this.onIntersectionUpdate(n);
@@ -129,14 +129,14 @@ class Pe extends G {
     });
     s(this, "chooseLine", (e) => {
       this.choose = "line";
-      const i = D(e);
+      const i = w(e);
       this.deleteDom.setLines(i).updatePosition().show(), this.highlightLines(i), this.five.needsRender = !0, this.hook.emit(
         "selectedChange",
         i.map((t) => t)
       );
     });
     s(this, "chooseArea", (e, i) => {
-      this.choose = e, this.deleteDom.updatePosition(i.left, `calc(${i.top} - 20px)`).show(), this.highlightArea(e);
+      this.deleteDom.setTarget(e).updatePosition(i.left, `calc(${i.top} - 20px)`).show(), this.highlightArea(e);
     });
     s(this, "polylineRemoved", (e) => {
       e.lines.forEach((i) => this.removeLine(i)), this.hook.emit(
@@ -162,7 +162,7 @@ class Pe extends G {
       onClick: () => {
         this.choose === "line" ? this.deleteLine() : this.choose instanceof j && this.deleteArea(this.choose);
       },
-      cancelDelete: this.cancelDeleteClickCallback
+      cancel: this.cancelDeleteClickCallback
     }).appendTo(this.container), this.model.getAllLines().forEach((t) => {
       t.distanceItem.appendTo(this.container), t.distanceItem.update(this.five), t.hook.on("selected", this.chooseLine), t.distanceItem.setCanSelect(!0), this.group.add(t.mesh);
     }), this.model.getAllAreas().forEach((t) => {
@@ -191,19 +191,20 @@ class Pe extends G {
   highlightArea(e) {
     this.unHighlightLines(), this.unHighlightArea(), this.highlightLines(e.polyline.lines), this.five.needsRender = !0;
   }
+  unHighlightArea(e) {
+    const i = e != null ? e : this.highlightedArea;
+    i && (this.unHighlightLines(i.polyline.lines), this.five.needsRender = !0);
+  }
   highlightLines(e) {
     this.unHighlightLines(), this.highlightedLines = e, e.forEach((i) => this.highlightLine(i));
   }
   unHighlightLines(e) {
+    this.unHighlightArea();
     const i = e != null ? e : this.highlightedLines;
     i && i.forEach((t) => {
       t.selected = !1, t.distanceItem.unHighlight(), this.group.remove(t.lightMesh), this.five.needsRender = !0;
     });
   }
-  unHighlightArea(e) {
-    const i = e != null ? e : this.highlightedArea;
-    i && (this.unHighlightLines(i.polyline.lines), this.five.needsRender = !0);
-  }
 }
 export {
   Pe as default

package/libs/PanoMeasurePlugin/Controller/index.js

@@ -83,10 +83,10 @@ 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 "../utils/findClosestPoint.js";
 import "../utils/ndc2Screen.js";
-import "../utils/findAssociatedLines.js";
 import "../Modules/rangePiece/index.js";
 import "../../shared-utils/noop.js";
 import "../utils/calculateThreeMouse.js";
@@ -163,7 +163,7 @@ class kt {
     });
     var l, n, u, d, f, g, y, M, C;
     this.five = e, this.params = t, this.config = D(t, ["openParams", "magnifierParams"]), this.model = new x(this.config), this.fiveHelper = new k(e), this.isMobile = (n = (l = t == null ? void 0 : t.openParams) == null ? void 0 : l.isMobile) != null ? n : !1, this.magnifier = new B(e, (u = t.magnifierParams) != null ? u : { width: 190, height: 190, scale: 2 }), this.allowMeasureType = Array.from(new Set((f = (d = t.editParams) == null ? void 0 : d.allowMeasureType) != null ? f : ["line"])), this.currentMeasureType = (g = this.allowMeasureType[0]) != null ? g : "line", this.group = new U(), this.group.name = "plugin-measure-group", this.container.classList.add("five-plugin-measure-container"), this.container.style.position = "absolute", this.container.style.left = "0", this.container.style.top = "0", this.container.style.pointerEvents = "none", this.container.style.width = "100%", this.container.style.height = "100%", this.container.style.opacity = "0";
-    const o = ((M = (y = t.editParams) == null ? void 0 : y.pointSelectorMode) != null ? M : W) ? "fixed" : "cursor", r = (C = this.params.openParams) != null ? C : {};
+    const o = (M = (y = t.editParams) == null ? void 0 : y.pointSelectorMode) != null ? M : W ? "fixed" : "cursor", r = (C = this.params.openParams) != null ? C : {};
     if (this.params.useUIController !== !1) {
       const p = h({ container: this.container, openParams: r, pointSelectorMode: o }, b(this.params.useUIController));
       this.useUIController = new S(this, p);

package/libs/PanoMeasurePlugin/Model/area.d.ts

@@ -18,6 +18,7 @@ export default class Area {
     id: string;
     selected: boolean;
     text?: string;
+    readonly type = "area";
     readonly lightMesh: FiveLine;
     readonly areaItem: AreaItem;
     readonly hook: Subscribe<AreaHook>;
@@ -43,8 +44,14 @@ export default class Area {
         five?: Five;
     });
     addPoints(point: THREE.Vector3): void;
+    /**
+     * @description: 移除最后一个添加的点
+     */
     popPoint(): void;
-    refresh(): void;
+    /**
+     * @description: 自动补全多边形的各个边
+     */
+    complete(): void;
     hideArea(): void;
     showArea(): void;
     /**