feature: flow连线

src/views/svg/components/svgRect.vue

@@ -5,7 +5,9 @@
     <circle
       v-for="i in pointsAttr"
       v-bind="i"
-      :key="i.id"
+      :key="i.pos"
+      @mouseenter="pointMouseEnter(i)"
+      @mouseleave="pointMouseLeave(i)"
       @mousedown="($event) => startLine($event, i)"
     ></circle>
   </g>
@@ -21,12 +23,25 @@ import {
   computed,
 } from "vue";
 import { sticky } from "../utils/index";
-const props = defineProps(["pos", "size", "mousePos", "id", "draggingId"]);
+const props = defineProps([
+  "pos",
+  "size",
+  "mousePos",
+  "startPoint",
+  "id",
+  "draggingId",
+]);
 const boxPos = ref(props.pos);
 const boxSize = ref(props.size);
 const innerPos = ref({ x: 0, y: 0 });
 const isDraging = computed(() => props.id === props.draggingId);
-const emits = defineEmits(["startDrag", "startLine", "updatePos"]);
+const emits = defineEmits([
+  "startDrag",
+  "startLine",
+  "updatePos",
+  "endLine",
+  "cancelEndLine",
+]);
 
 const attr = computed(() => {
   return {
@@ -56,7 +71,7 @@ const outlineRectAttr = computed(() => {
 
 const pointsAttr = computed(() => [
   {
-    id: `${props.id}-top`,
+    pos: `top`,
     cx: boxPos.value.x + boxSize.value.width / 2,
     cy: boxPos.value.y,
     r: 4,
@@ -64,7 +79,7 @@ const pointsAttr = computed(() => [
     fill: "rgba(255,255,255,1)",
   },
   {
-    id: `${props.id}-right`,
+    pos: `right`,
     cx: boxPos.value.x + boxSize.value.width,
     cy: boxPos.value.y + boxSize.value.height / 2,
     r: 4,
@@ -72,7 +87,7 @@ const pointsAttr = computed(() => [
     fill: "rgba(255,255,255,1)",
   },
   {
-    id: `${props.id}-bottom`,
+    pos: `bottom`,
     cx: boxPos.value.x + boxSize.value.width / 2,
     cy: boxPos.value.y + boxSize.value.height,
     r: 4,
@@ -80,7 +95,7 @@ const pointsAttr = computed(() => [
     fill: "rgba(255,255,255,1)",
   },
   {
-    id: `${props.id}-left`,
+    pos: `left`,
     cx: boxPos.value.x,
     cy: boxPos.value.y + boxSize.value.height / 2,
     r: 4,
@@ -108,6 +123,18 @@ function startLine(e, point) {
   });
 }
 
+function pointMouseEnter(p) {
+  if (props.startPoint?.itemId !== props.id) {
+    console.log(props.startPoint);
+    emits("endLine", {
+      point: p,
+      id: props.id,
+    });
+  }
+}
+
+function pointMouseLeave() {}
+
 function setPos(pos) {
   boxPos.value = {
     x: sticky(pos.x - innerPos.value.x),

src/views/svg/index.vue

@@ -17,7 +17,9 @@
         v-bind="i"
         :draggingId="draggingId"
         :mousePos="curPos"
+        :startPoint="lineStartPoint"
         @startLine="startLine"
+        @endLine="endLine"
         @startDrag="startDrag"
         @updatePos="updatePos"
       />
@@ -39,9 +41,24 @@ const wrapSize = reactive({ width: 0, height: 0 });
 const draggingId = ref(0);
 const lineStartPoint = ref(null);
 const children = ref([
-  { id: 1, pos: { x: 10, y: 10 }, size: { width: 100, height: 100 } },
-  { id: 2, pos: { x: 20, y: 20 }, size: { width: 100, height: 100 } },
-  { id: 3, pos: { x: 30, y: 30 }, size: { width: 100, height: 100 } },
+  {
+    id: 1,
+    pos: { x: 10, y: 10 },
+    size: { width: 100, height: 100 },
+    lines: [],
+  },
+  {
+    id: 2,
+    pos: { x: 20, y: 20 },
+    size: { width: 100, height: 100 },
+    lines: [],
+  },
+  {
+    id: 3,
+    pos: { x: 30, y: 30 },
+    size: { width: 100, height: 100 },
+    lines: [],
+  },
 ]);
 
 const dashLineAttr = computed(() => {
@@ -70,7 +87,15 @@ function startDrag({ id, event }) {
 
 function startLine({ id, point }) {
   draggingId.value = 0;
-  lineStartPoint.value = point;
+  lineStartPoint.value = {
+    itemId: id,
+    ...point,
+  };
+}
+
+function endLine({ id, point }) {
+  if (lineStartPoint.value) {
+  }
 }
 
 function updatePos({ id, pos }) {