Selaa lähdekoodia

连接点修改为时钟方位

lichunyang 2 viikkoa sitten
vanhempi
säilyke
13c6136c36
2 muutettua tiedostoa jossa 78 lisäystä ja 29 poistoa
  1. 22 1
      src/views/model/vueflow/defaultnode.vue
  2. 56 28
      src/views/model/vueflow/index.vue

+ 22 - 1
src/views/model/vueflow/defaultnode.vue

@@ -33,6 +33,27 @@ const getHandlePositions = () => {
   if (!ptsite) return [] // 如果 ptsite 为空,返回空数组
   return ptsite.split("/").filter(pos => !isNaN(parseInt(pos))) // 过滤有效点位(数字)
 }
+
+const getHandlePosition = (point) => {
+  const pos = parseInt(point);
+  switch (pos) {
+    case 0:
+      return Position.Top;
+    case 3:
+      return Position.Right;
+    case 6:
+      return Position.Bottom;
+    case 9:
+      return Position.Left;
+    default:
+      // 对于其他角度,可以近似选择最近的标准方位
+      if (pos >= 1 && pos <= 2) return Position.Right;
+      if (pos >= 4 && pos <= 5) return Position.Right;
+      if (pos >= 7 && pos <= 8) return Position.Left;
+      if (pos >= 10 && pos <= 11) return Position.Left;
+      return Position.Right; // 默认值(防止无效值)
+  }
+};
 onMounted(() => {
 });
 </script>
@@ -49,7 +70,7 @@ onMounted(() => {
       :key="`source-${pos}`"
       :id="`source-${pos}`"
       type="source"
-      :position="Position.Custom"
+      :position="getHandlePosition(pos)"
       :style="getHandleStyles(pos)"
       class="custom-handle"
     />

+ 56 - 28
src/views/model/vueflow/index.vue

@@ -470,6 +470,7 @@ let lineType = ref("default")
 
 onConnect(async (connection) => {
   console.log("线连接", connection)
+
   if (connection.source === connection.target) {
     console.warn("禁止节点自连")
     return
@@ -483,16 +484,10 @@ onConnect(async (connection) => {
     return
   }
 
-  // 验证 Handle ID 格式(source-${point} 或 source-${direction})
-  const validHandleRegex = /^source-(\d+|[a-z]+)$/
-  if (!validHandleRegex.test(connection.sourceHandle) || !validHandleRegex.test(connection.targetHandle)) {
-    console.warn("无效的 Handle ID:", connection.sourceHandle, connection.targetHandle)
-    return
-  }
-
   const hasDuplicateEdge = edges.value.some(
     (edge) =>
-      (edge.source === connection.source && edge.target === connection.target) ||
+      (edge.source === connection.source &&
+        edge.target === connection.target) ||
       (edge.source === connection.target && edge.target === connection.source)
   )
 
@@ -502,17 +497,23 @@ onConnect(async (connection) => {
   }
 
   const isDuplicate = edges.value.some((edge1) => {
+    // edge1: source -> 中间节点
     if (
       edge1.source === connection.source ||
       edge1.target === connection.source
     ) {
       const middleNodeId =
         edge1.source === connection.source ? edge1.target : edge1.source
+
+      // 确保 middleNode 是中间组件(comId === '3')
       const middleNode = vueFlowRef.value.getNode(middleNodeId)
       if (!middleNode || middleNode.data.comId !== "3") return false
+
+      // 查找是否还有另一条边连接 middleNode <-> target
       return edges.value.some(
         (edge2) =>
-          (edge2.source === middleNodeId && edge2.target === connection.target) ||
+          (edge2.source === middleNodeId &&
+            edge2.target === connection.target) ||
           (edge2.target === middleNodeId && edge2.source === connection.target)
       )
     }
@@ -524,14 +525,19 @@ onConnect(async (connection) => {
     return
   }
 
+  // 是否需要中间节点
   const isCom3 = sourceNode.data.comId === "3" || targetNode.data.comId === "3"
 
   if (isCom3) {
+    //(comID == 3)
     const edgeId = `${lineType.value}-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}`
     connection.id = edgeId
     connection.type = "smoothstep"
     connection.color = linecolor.value
     connection.style = { strokeWidth: linewidth.value, stroke: linecolor.value }
+    // connection.markerEnd = lineType.value === 'data'
+    //   ? { type: MarkerType.ArrowClosed, width: 6, height: 6, color: linecolor.value }
+    //   : MarkerType.ArrowClosed;
 
     const sameEdge = edges.value.find((edge) => edge.id === edgeId)
     if (sameEdge) {
@@ -542,9 +548,13 @@ onConnect(async (connection) => {
     seledge.value = null
 
     const pcId1 =
-      sourceNode.data.comId === "3" ? targetNode.data.pcId : sourceNode.data.pcId
+      sourceNode.data.comId === "3"
+        ? targetNode.data.pcId
+        : sourceNode.data.pcId
     const npcId =
-      sourceNode.data.comId === "3" ? sourceNode.data.pcId : targetNode.data.pcId
+      sourceNode.data.comId === "3"
+        ? sourceNode.data.pcId
+        : targetNode.data.pcId
 
     try {
       const { pccId1 } = await createEdge(pid.value, 0, npcId, pcId1)
@@ -558,7 +568,8 @@ onConnect(async (connection) => {
       console.error("保存流程失败:", error)
     }
   } else {
-    const pointNodeId = `point-${connection.source}-${connection.target}`
+    // 添加 point-only 中间节点
+    const pointNodeId = `point-${connection.source}-${connection.target}}`
     const sourceCenterX = sourceNode.position.x + 60 / 2
     const sourceCenterY = sourceNode.position.y + 58 / 2
     const targetCenterX = targetNode.position.x + 60 / 2
@@ -567,15 +578,31 @@ onConnect(async (connection) => {
     const midX = (sourceCenterX + targetCenterX) / 2
     const midY = (sourceCenterY + targetCenterY) / 2
 
-    // 使用 source 和 target 的点位方向
-    const sourceHandlePoint = connection.sourceHandle.replace("source-", "")
-    const targetHandlePoint = connection.targetHandle.replace("source-", "")
-    const sourceDirection = getDirectionFromPoint(sourceHandlePoint)
-    const targetDirection = getDirectionFromPoint(targetHandlePoint)
-
-    // point-only 节点的 Handle 使用对侧方向(source 到 point)和服务方向(point 到 target)
-    const pointTargetHandle = `source-${getOppositeDirection(sourceHandlePoint)}`
-    const pointSourceHandle = `source-${getDirectionFromPoint(targetHandlePoint)}`
+    // 计算 sourceNode 和 targetNode 相对于 pointNode 的位置
+    const dxSource = sourceNode.position.x - midX
+    const dySource = sourceNode.position.y - midY
+    const dxTarget = targetNode.position.x - midX
+    const dyTarget = targetNode.position.y - midY
+
+    // 判断 sourceNode 的主要方向(水平 or 垂直)
+    const isSourceHorizontal = Math.abs(dxSource) > Math.abs(dySource)
+    const sourceDirection = isSourceHorizontal
+      ? dxSource < 0
+        ? "left"
+        : "right"
+      : dySource < 0
+      ? "top"
+      : "bottom"
+
+    // 判断 targetNode 的主要方向
+    const isTargetHorizontal = Math.abs(dxTarget) > Math.abs(dyTarget)
+    const targetDirection = isTargetHorizontal
+      ? dxTarget < 0
+        ? "left"
+        : "right"
+      : dyTarget < 0
+      ? "top"
+      : "bottom"
 
     nodes.value.push({
       id: pointNodeId,
@@ -585,12 +612,14 @@ onConnect(async (connection) => {
         comId: "3",
         label: "节点",
         image: node,
-        imageIdentify: "66"
+        imageIdentify: "point-only"
       }
     })
 
     try {
+      // 创建 comID 为 3 的中间组件
       const { pcId: npcId, ser, idCode } = await createCom3(pid.value)
+
       const pointNode = nodes.value.find((n) => n.id === pointNodeId)
       updateNode(pointNodeId, (node) => ({
         ...node,
@@ -602,23 +631,25 @@ onConnect(async (connection) => {
       }))
       updateNodeInternals(pointNodeId)
 
+      // edge1: source -> pointNode
       const edgeId1 = `${lineType.value}-${connection.source}-${connection.sourceHandle}-${pointNodeId}`
       const edge1 = {
         id: edgeId1,
         source: connection.source,
         sourceHandle: connection.sourceHandle,
         target: pointNodeId,
-        targetHandle: pointTargetHandle,
+        targetHandle: `source-${sourceDirection}`,
         type: "smoothstep",
         color: linecolor.value,
         style: { strokeWidth: linewidth.value, stroke: linecolor.value }
       }
 
+      // edge2: pointNode -> target
       const edgeId2 = `${lineType.value}-${pointNodeId}-${connection.targetHandle}-${connection.target}`
       const edge2 = {
         id: edgeId2,
         source: pointNodeId,
-        sourceHandle: pointSourceHandle,
+        sourceHandle: `source-${targetDirection}`, // 使用计算的方向
         target: connection.target,
         targetHandle: connection.targetHandle,
         type: "smoothstep",
@@ -626,11 +657,9 @@ onConnect(async (connection) => {
         style: { strokeWidth: linewidth.value, stroke: linecolor.value }
       }
 
-      console.log("Edge1:", { id: edgeId1, sourceHandle: connection.sourceHandle, targetHandle: pointTargetHandle })
-      console.log("Edge2:", { id: edgeId2, sourceHandle: pointSourceHandle, targetHandle: connection.targetHandle })
-
       addEdges([edge1, edge2])
 
+      // 保存后端 edge 数据(分别对应两条边)
       const { pccId1, pccId2 } = await createEdge(
         pid.value,
         0,
@@ -659,7 +688,6 @@ onConnect(async (connection) => {
 
   saveproject()
 })
-
 // 将点位转换为方向(与 defaultnode.vue 的角度映射一致)
 function getDirectionFromPoint(point) {
   if (!isNaN(parseInt(point))) {