|
@@ -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))) {
|