@@ -32,7 +37,7 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
)}
- {outputs.length > 0 && (
+ {outputs.length > 0 && !isEndNode && (
{outputs.map((output, index) => (
@@ -50,45 +55,78 @@ const NodeContent = ({ data }: { data: NodeContentData }) => {
)}
- {/* 默认连接端点*/}
-
+ {/* 流程传输(开始/结束)只在一侧显示端点 */}
+ {isSpecialNode ? (
+ <>
+
- {/*输入参数连接端点*/}
- {inputs.map((_, index) => (
-
- ))}
+ {/* 为流程传输的参数也添加句柄 */}
+ {isStartNode && outputs.map((_, index) => (
+
+ ))}
- {/*输出参数连接端点*/}
- {outputs.map((_, index) => (
-
- ))}
+ {isEndNode && inputs.map((_, index) => (
+
+ ))}
+ >
+ ) : (
+ /* 普通节点可以在两侧显示多个端点 */
+ <>
+ {/* 输入参数连接端点 */}
+ {inputs.map((_, index) => (
+
+ ))}
+
+ {/* 输出参数连接端点 */}
+ {outputs.map((_, index) => (
+
+ ))}
+ >
+ )}
>
);
};
diff --git a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
index d1a2a8e..09c9ae7 100644
--- a/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
+++ b/src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
@@ -1,28 +1,17 @@
import React from 'react';
import { Handle, Position } from '@xyflow/react';
+import styles from '@/pages/flowEditor/node/style/base.module.less';
+import NodeContent from '@/pages/flowEditor/components/nodeContent';
const DraggableNode = ({ data }: { data: any }) => {
+ const title = data.title || '任务节点';
return (
-
-
{data.label || '任务节点'}
-
-
+
);
};
diff --git a/src/pages/flowEditor/utils/convertFlowData.ts b/src/pages/flowEditor/utils/convertFlowData.ts
new file mode 100644
index 0000000..7501f4b
--- /dev/null
+++ b/src/pages/flowEditor/utils/convertFlowData.ts
@@ -0,0 +1,81 @@
+/**
+ * 将提供的数据结构转换为适用于 flow editor 的 nodes 和 edges
+ * @param flowData - 原始数据结构
+ * @returns 包含 nodes 和 edges 的对象
+ */
+export const convertFlowData = (flowData: any) => {
+ const nodes: any[] = [];
+ const edges: any[] = [];
+
+ // 处理节点配置
+ const nodeConfigs = flowData.main?.nodeConfigs || [];
+ for (const nodeConfig of nodeConfigs) {
+ // 确定节点类型
+ let nodeType = 'draggable';
+ if (nodeConfig.nodeId === 'start') {
+ nodeType = 'start';
+ } else if (nodeConfig.nodeId === 'end') {
+ nodeType = 'end';
+ }
+
+ // 解析位置信息
+ let position = { x: 0, y: 0 };
+ try {
+ const x6Data = JSON.parse(nodeConfig.x6);
+ position = x6Data.position || { x: 0, y: 0 };
+ } catch (e) {
+ console.warn('Failed to parse position for node:', nodeConfig.nodeId);
+ }
+
+ // 构造节点数据
+ const node: any = {
+ id: nodeConfig.nodeId,
+ type: nodeType,
+ position,
+ data: {
+ title: nodeConfig.nodeName || nodeConfig.nodeId,
+ type: nodeType, // 添加节点类型到data中,供NodeContent使用
+ parameters: {
+ inputs: nodeConfig.dataIns?.map((input: any) => ({
+ name: input.id,
+ desc: input.desc,
+ dataType: input.dataType,
+ defaultValue: input.defaultValue
+ })) || [],
+ outputs: nodeConfig.dataOuts?.map((output: any) => ({
+ name: output.id,
+ desc: output.desc,
+ dataType: output.dataType,
+ defaultValue: output.defaultValue
+ })) || []
+ }
+ }
+ };
+
+ // 如果是机械臂节点,添加组件标识信息
+ if (nodeConfig.component) {
+ node.data.component = {
+ compIdentifier: nodeConfig.component.compIdentifier,
+ compInstanceIdentifier: nodeConfig.component.compInstanceIdentifier
+ };
+ }
+
+ nodes.push(node);
+ }
+
+ // 处理连线配置
+ const lineConfigs = flowData.main?.lineConfigs || [];
+ for (const lineConfig of lineConfigs) {
+ const edge: any = {
+ id: lineConfig.id,
+ source: lineConfig.prev.nodeId,
+ target: lineConfig.next.nodeId,
+ sourceHandle: lineConfig.prev.endpointId,
+ targetHandle: lineConfig.next.endpointId
+ };
+
+ edges.push(edge);
+ }
+
+ return { nodes, edges };
+};
\ No newline at end of file
diff --git a/src/utils/convertFlowData.ts b/src/utils/convertFlowData.ts
index 821a766..7c3d69d 100644
--- a/src/utils/convertFlowData.ts
+++ b/src/utils/convertFlowData.ts
@@ -52,7 +52,7 @@ export const convertFlowData = (flowData: any) => {
defaultValue: output.defaultValue
})) || []
},
- type: nodeType,
+ type: nodeType
}
};