refactor(flowEditor): 重构流程编辑器节点组件
- 提取公共组件 NodeContent 用于渲染节点内容和连接端点 -重构 StartNode 和 EndNode 组件，使用新的 NodeContent 组件- 添加 convertFlowData 工具函数用于转换流程数据 - 新增 exampleFlowData 作为测试数据 - 更新 FlowEditor 组件，使用转换后的流程数据初始化节点和边master
parent
b784cb158b
commit
b9b5ec2f19
@ -0,0 +1,96 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styles from '@/pages/flowEditor/node/style/base.module.less';
|
||||||
|
import { Handle, Position } from '@xyflow/react';
|
||||||
|
|
||||||
|
|
||||||
|
interface NodeContentData {
|
||||||
|
parameters?: {
|
||||||
|
inputs?: any[];
|
||||||
|
outputs?: any[];
|
||||||
|
};
|
||||||
|
showFooter?: boolean;
|
||||||
|
type?: string;
|
||||||
|
|
||||||
|
[key: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NodeContent = ({ data }: { data: NodeContentData }) => {
|
||||||
|
const inputs = data.parameters?.inputs || [];
|
||||||
|
const outputs = data.parameters?.outputs || [];
|
||||||
|
const showFooter = data.showFooter || false;
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/*content栏*/}
|
||||||
|
<div className={styles['node-content']}>
|
||||||
|
{inputs.length > 0 && (
|
||||||
|
<div className={styles['node-inputs']}>
|
||||||
|
{inputs.map((input, index) => (
|
||||||
|
<div key={`input-${index}`} className={styles['node-input-label']}>
|
||||||
|
{input.name || `输入${index + 1}`}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{outputs.length > 0 && (
|
||||||
|
<div className={styles['node-outputs']}>
|
||||||
|
{outputs.map((output, index) => (
|
||||||
|
<div key={`output-${index}`} style={{ fontSize: '12px', padding: '2px 0' }}>
|
||||||
|
{output.name || `输出${index + 1}`}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*footer栏*/}
|
||||||
|
{showFooter && (
|
||||||
|
<div className={styles['node-footer']}>
|
||||||
|
暂定的footer
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* 默认连接端点*/}
|
||||||
|
<Handle
|
||||||
|
type={data.type === 'start' ? 'source' : 'target'}
|
||||||
|
position={data.type === 'start' ? Position.Right : Position.Left}
|
||||||
|
id={data.type === 'start' ? 'start-source' : 'end-target'}
|
||||||
|
style={{
|
||||||
|
background: '#555',
|
||||||
|
top: '40px'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/*输入参数连接端点*/}
|
||||||
|
{inputs.map((_, index) => (
|
||||||
|
<Handle
|
||||||
|
key={`input-handle-${index}`}
|
||||||
|
type="target"
|
||||||
|
position={Position.Left}
|
||||||
|
id={`input-${index}`}
|
||||||
|
style={{
|
||||||
|
background: '#555',
|
||||||
|
top: `${60 + index * 20}px`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/*输出参数连接端点*/}
|
||||||
|
{outputs.map((_, index) => (
|
||||||
|
<Handle
|
||||||
|
key={`output-handle-${index}`}
|
||||||
|
type="source"
|
||||||
|
position={Position.Right}
|
||||||
|
id={`output-${index}`}
|
||||||
|
style={{
|
||||||
|
background: '#555',
|
||||||
|
// top: `${80 + inputs.length * 20 + index * 20}px`
|
||||||
|
top: `${60 + index * 20}px`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NodeContent;
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
/**
|
||||||
|
* 将提供的数据结构转换为适用于 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 = 'BASIC';
|
||||||
|
if (nodeConfig.nodeId === 'start') {
|
||||||
|
nodeType = 'start';
|
||||||
|
}
|
||||||
|
else if (nodeConfig.nodeId === 'end') {
|
||||||
|
nodeType = 'end';
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
nodeType = nodeConfig.component.type;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 解析位置信息
|
||||||
|
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,
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('nodes, edges:', nodes, edges);
|
||||||
|
|
||||||
|
return { nodes, edges };
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue