diff --git a/src/hooks/useFlowCallbacks.ts b/src/hooks/useFlowCallbacks.ts
index 5006a19..9139cf4 100644
--- a/src/hooks/useFlowCallbacks.ts
+++ b/src/hooks/useFlowCallbacks.ts
@@ -121,8 +121,8 @@ export const useFlowCallbacks = (
}
// 获取源节点和目标节点的参数信息
- const sourceParams = sourceNode.data?.parameters || {};
- const targetParams = targetNode.data?.parameters || {};
+ const sourceParams: any = sourceNode.data?.parameters || {};
+ const targetParams: any = targetNode.data?.parameters || {};
// 获取源handle和目标handle的类型 (api或data)
const sourceHandleType = getHandleType(params.sourceHandle, sourceParams);
@@ -142,7 +142,52 @@ export const useFlowCallbacks = (
// 如果验证通过,创建连接
setEdges((edgesSnapshot: Edge[]) => {
- const newEdges = addEdge({ ...params, type: 'custom' }, edgesSnapshot);
+ // 创建带有事件信息的连接
+ const edgeParams = { ...params, type: 'custom' };
+
+ // 检查源节点和目标节点是否都有事件信息
+ const sourceApi = (sourceParams.apiOuts || []).find((api: any) =>
+ api.name === params.sourceHandle || api.id === params.sourceHandle);
+ const targetApi = (targetParams.apiIns || []).find((api: any) =>
+ api.name === params.targetHandle || api.id === params.targetHandle);
+
+ // 如果源节点有事件topic信息
+ if (sourceApi && sourceApi.topic) {
+ // 如果目标节点的topic是**empty**或没有topic,则使用源节点的事件信息
+ if (!targetApi || !targetApi.topic || targetApi.topic.includes('**empty**')) {
+ edgeParams.data = {
+ displayData: {
+ name: sourceApi.name,
+ eventId: sourceApi.eventId,
+ topic: sourceApi.topic
+ }
+ };
+ }
+ // 如果两个节点都有非empty的topic,则以源节点为准
+ else if (sourceApi.topic && targetApi.topic &&
+ !sourceApi.topic.includes('**empty**') &&
+ !targetApi.topic.includes('**empty**')) {
+ edgeParams.data = {
+ displayData: {
+ name: sourceApi.name,
+ eventId: sourceApi.eventId,
+ topic: sourceApi.topic
+ }
+ };
+ }
+ }
+ // 如果源节点没有事件信息,但目标节点有
+ else if (targetApi && targetApi.topic && !targetApi.topic.includes('**empty**')) {
+ edgeParams.data = {
+ displayData: {
+ name: targetApi.name,
+ eventId: targetApi.eventId,
+ topic: targetApi.topic
+ }
+ };
+ }
+
+ const newEdges = addEdge(edgeParams, edgesSnapshot);
// 连接建立后记录历史
setTimeout(() => {
diff --git a/src/pages/flowEditor/components/customConnectionLine.tsx b/src/pages/flowEditor/components/customConnectionLine.tsx
index ba43697..cb9638b 100644
--- a/src/pages/flowEditor/components/customConnectionLine.tsx
+++ b/src/pages/flowEditor/components/customConnectionLine.tsx
@@ -1,10 +1,23 @@
-import React, { useEffect } from 'react';
+import React from 'react';
import { getBezierPath } from '@xyflow/react';
const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => {
- useEffect(() => {
- console.log('fromNode', fromNode);
- }, [fromNode]);
+ // 查找源节点的事件信息
+ let eventData = null;
+ if (fromNode && fromNode.data) {
+ const params = fromNode.data.parameters || {};
+ const apiOuts = params.apiOuts || [];
+
+ // 查找匹配的输出API
+ for (const api of apiOuts) {
+ // 这里假设fromNode存在selectedHandle属性,表示当前拖拽的句柄
+ if (api.name || api.id) {
+ eventData = api;
+ break;
+ }
+ }
+ }
+
const [path] = getBezierPath({
sourceX: fromX,
sourceY: fromY,
@@ -22,10 +35,10 @@ const CustomConnectionLine = ({ fromNode, fromX, fromY, toX, toY }) => {
className="animated-stroke"
fill="none"
/>
- {/*TODO 临时定义,后续等接口字段。 存在事件信息的时候才展示连接提示*/}
- {fromNode.data.eventData && (
+ {/* 当存在事件信息的时候展示连接提示 */}
+ {eventData && eventData.topic && !eventData.topic.includes('**empty**') && (
- 正在连接...
+ {`连接事件: ${eventData.name}`}
)}
diff --git a/src/pages/flowEditor/components/customEdge.tsx b/src/pages/flowEditor/components/customEdge.tsx
index 6975803..f4f8154 100644
--- a/src/pages/flowEditor/components/customEdge.tsx
+++ b/src/pages/flowEditor/components/customEdge.tsx
@@ -84,6 +84,27 @@ const DataDisplayEdge: React.FC = ({
const handleSelect = (option) => {
setSelectedValue(option.label);
setIsOpen(false);
+
+ // 查找所有具有相同事件ID和连接点的边并同步更新
+ setEdges(eds => eds.map((edge: any) => {
+ // 检查边是否有displayData且与当前选择的事件匹配
+ if (edge.data?.displayData &&
+ edge.data.displayData.eventId === displayData.eventId &&
+ edge.data.displayData.topic === displayData.topic) {
+ return {
+ ...edge,
+ data: {
+ ...edge.data,
+ displayData: {
+ ...edge.data.displayData,
+ name: option.label,
+ topic: option.value
+ }
+ }
+ };
+ }
+ return edge;
+ }));
};
return (
@@ -169,7 +190,7 @@ const DataDisplayEdge: React.FC = ({
)}
- {hovered && Object.keys(displayData).length === 0 && (
+ {hovered && Object.keys(displayData).length === 0 && Object.keys(displayData).length === 0 && (
handleEdgeAddNode(e)}
/>
diff --git a/src/pages/flowEditor/components/nodeContentApp.tsx b/src/pages/flowEditor/components/nodeContentApp.tsx
index 8ee00fb..de5834c 100644
--- a/src/pages/flowEditor/components/nodeContentApp.tsx
+++ b/src/pages/flowEditor/components/nodeContentApp.tsx
@@ -240,7 +240,6 @@ const useEventGroups = (component: any) => {
};
});
}
- console.log('groups:', groups);
return groups;
} catch (e) {
console.error('解析customDef时出错:', e);