feat: .

src/core/components/line/attach-view.ts

@@ -9,8 +9,8 @@ import {
 import { LineData } from ".";
 import { getJoinLine, getLinePoints } from "./attach-server";
 import { MathUtils, Vector2 } from "three";
-import { computed, reactive, ref, Ref } from "vue";
-import { flatPositions, rangMod } from "@/utils/shared";
+import { computed, reactive, ref, Ref, watch, watchEffect } from "vue";
+import { flatPositions, mergeFuns, rangMod } from "@/utils/shared";
 
 const eloCacle = new WeakMap<LineData, string[]>();
 export const extendLinesOverlap = (
@@ -31,7 +31,7 @@ export const extendLinesOverlap = (
 
   type ELine = LineData["lines"][0] & { points: LineData["points"] };
   const minAngle = MathUtils.degToRad(20);
-  const getExtendPolygon = (line1: ELine, line2: ELine) => {
+  const getExtendPolygons = (line1: ELine, line2: ELine) => {
     const v1 = lineVector(line1.points);
     const v2 = lineVector(line2.points);
     const vv1 = verticalVector(v1);
@@ -66,23 +66,42 @@ export const extendLinesOverlap = (
     ];
   };
 
-  const points = [line1.a, line1.b].map(
-    (id) => data.points.find((item) => item.id === id)!
-  );
+  type ResultJoin = ReturnType<typeof getExtendPolygons>;
+  const joins = ref<ResultJoin[]>([]);
 
-  const joins: Ref<ReturnType<typeof getExtendPolygon>[]> = ref([]);
-  const groupPoints = [[...points], [...points].reverse()];
-  for (let i = 0; i < groupPoints.length; i++) {
-    const points = groupPoints[i];
-    const joinLines = getJoinLine(data, line1, points[1].id);
+  const updateJoins = (points: LineData["points"]) => {
 
-    for (let j = 0; j < joinLines.length; j++) {
-      const key = [points[0].id, points[1].id, joinLines[j].points[1].id];
-      if (!has(key)) {
+    
+    watch(getJoinLine(data, line1, points[1].id), (joinLines, _, onCleanup) => {
+      for (let j = 0; j < joinLines.length; j++) {
+        const key = [points[0].id, points[1].id, joinLines[j].points[1].id];
+        if (has(key)) continue;
         set(key);
-        joins.value.push(getExtendPolygon({ ...line1, points }, joinLines[i]))
+        const polygons = getExtendPolygons({ ...line1, points }, joinLines[j]);
+        joins.value.push(polygons);
+        onCleanup(() => {
+          const ndx = joins.value.indexOf(polygons);
+          ~ndx && joins.value.splice(ndx, 1);
+        });
       }
-    }
-  }
+    });
+  };
+
+  const stopWatch = watch(
+    () => (line1.a + line1.b + data.lines.includes(line1) ? "exixts" : ""),
+    () => {
+      if (!data.lines.includes(line1)) {
+        return stopWatch();
+      }
+
+      const points = [line1.a, line1.b].map(
+        (id) => data.points.find((item) => item.id === id)!
+      );
+      const groupPoints = [[...points], [...points].reverse()];
+      updateJoins(groupPoints[0]);
+      updateJoins(groupPoints[1]);
+    },
+    { immediate: true }
+  );
   return joins;
 };