feature: 辅助线

src/views/svg/components/bar.vue

@@ -22,7 +22,6 @@
 </template>
 
 <script setup>
-import { defineEmits } from "vue";
 const emits = defineEmits(["createRect", "createNode"]);
 
 function createNode(e, config) {

src/views/svg/components/helpLine.vue

@@ -0,0 +1,62 @@
+<template>
+  <g>
+    <line v-if="match.matched" v-bind="match.attr" class="dash-line"></line>
+  </g>
+</template>
+
+<script setup>
+import { watch, computed } from "vue";
+import { countPointByPos } from "../utils/index";
+const props = defineProps(["lines", "curNode", "wrapSize"]);
+
+const curNodePoints = computed(() => {
+  return props.curNode
+    ? [
+        countPointByPos("top", props.curNode.pos, props.curNode.size),
+        countPointByPos("right", props.curNode.pos, props.curNode.size),
+        countPointByPos("left", props.curNode.pos, props.curNode.size),
+        countPointByPos("bottom", props.curNode.pos, props.curNode.size),
+      ]
+    : [];
+});
+
+const match = computed(() => {
+  let res = {
+    matched: false,
+    attr: null,
+  };
+  props.lines.forEach((l) => {
+    if (!res.matched) {
+      curNodePoints.value.forEach((p) => {
+        if (p.cx === l.cx && res.matched === false) {
+          res.matched = true;
+          res.attr = {
+            x1: p.cx,
+            y1: 0,
+            x2: p.cx,
+            y2: props.wrapSize.height,
+          };
+        }
+        if (p.cy === l.cy && res.matched === false) {
+          res.matched = true;
+          res.attr = {
+            x1: 0,
+            y1: p.cy,
+            x2: props.wrapSize.width,
+            y2: p.cy,
+          };
+        }
+      });
+    }
+  });
+  return res;
+});
+</script>
+
+<style lang="less" scoped>
+.dash-line {
+  stroke: #666;
+  stroke-dasharray: 3 4;
+  stroke-width: 1;
+}
+</style>

src/views/svg/components/svgCircle.vue

@@ -20,7 +20,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 import { useFlowItem } from "./item.mixin";
 const props = defineProps([
   "pos",

src/views/svg/components/svgLines.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from "vue";
+import { computed } from "vue";
 import { countPointByPos } from "../utils/index";
 const props = defineProps(["nodes", "lines"]);
 

src/views/svg/components/svgRect.vue

@@ -20,7 +20,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 import { useFlowItem } from "./item.mixin";
 const props = defineProps([
   "pos",

src/views/svg/components/svgRhombic.vue

@@ -20,7 +20,6 @@
 </template>
 
 <script setup>
-import { defineProps } from "vue";
 import { useFlowItem } from "./item.mixin";
 const props = defineProps([
   "pos",

src/views/svg/index.vue

@@ -25,9 +25,14 @@
           @endLine="endLine"
           @cancelEndLine="cancelEndLine"
           @startDrag="startDrag"
-        ></component>
+        />
       </template>
       <line v-if="lineStartPoint" v-bind="dashLineAttr" class="dash-line" />
+      <HelpLine
+        :lines="helpLines"
+        :curNode="curNode"
+        :wrapSize="wrapSize"
+      ></HelpLine>
     </svg>
   </div>
 </template>
@@ -38,6 +43,7 @@ import SvgRect from "./components/svgRect.vue";
 import SvgCircle from "./components/svgCircle.vue";
 import SvgRhombic from "./components/svgRhombic.vue";
 import SvgLines from "./components/svgLines.vue";
+import HelpLine from "./components/helpLine.vue";
 import Bar from "./components/bar.vue";
 import {
   findFromArray,
@@ -57,30 +63,45 @@ const isDragging = ref(false);
 const lineStartPoint = ref(null);
 const lineEndPoint = ref(null);
 const lines = reactive([
-  // { start: { targetId: 1, pos: "right" }, end: { targetId: 2, pos: "left" } },
-  // { start: { targetId: 2, pos: "right" }, end: { targetId: 3, pos: "left" } },
+  { start: { targetId: 1, pos: "right" }, end: { targetId: 2, pos: "left" } },
+  { start: { targetId: 2, pos: "right" }, end: { targetId: 3, pos: "left" } },
 ]);
 const nodes = ref([
-  // {
-  //   id: 1,
-  //   pos: { x: 200, y: 200 },
-  //   type: "rect",
-  //   size: { width: 100, height: 100 },
-  // },
-  // {
-  //   id: 2,
-  //   type: "rhombic",
-  //   pos: { x: 350, y: 210 },
-  //   size: { width: 120, height: 80 },
-  // },
-  // {
-  //   id: 3,
-  //   pos: { x: 550, y: 220 },
-  //   type: "circle",
-  //   size: { width: 60, height: 60 },
-  // },
+  {
+    id: 1,
+    pos: { x: 200, y: 200 },
+    type: "rect",
+    size: { width: 100, height: 100 },
+  },
+  {
+    id: 2,
+    type: "rhombic",
+    pos: { x: 350, y: 210 },
+    size: { width: 120, height: 80 },
+  },
+  {
+    id: 3,
+    pos: { x: 550, y: 220 },
+    type: "circle",
+    size: { width: 60, height: 60 },
+  },
 ]);
 
+const helpLines = computed(() => {
+  const lines = [];
+  nodes.value.forEach((node) => {
+    if (node.id !== curNodeId.value) {
+      lines.push(
+        countPointByPos("left", node.pos, node.size),
+        countPointByPos("top", node.pos, node.size),
+        countPointByPos("right", node.pos, node.size),
+        countPointByPos("bottom", node.pos, node.size)
+      );
+    }
+  });
+  return lines;
+});
+
 const curNode = computed(() => {
   return curNodeId.value !== 0
     ? nodes.value.find((i) => i.id === curNodeId.value)