diff --git a/src/pages/flowEditor/index.tsx b/src/pages/flowEditor/index.tsx index 19fb7fd..7a08c13 100644 --- a/src/pages/flowEditor/index.tsx +++ b/src/pages/flowEditor/index.tsx @@ -10,29 +10,16 @@ import { Edge, ReactFlowProvider, useReactFlow, - NodeTypes, EdgeTypes, SelectionMode } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; -import TextUpdaterNode from './node/textUpdateNode/TextUpdaterNode'; -import StartNode from './node/startNode/StartNode'; -import EndNode from './node/endNode/EndNode'; -import DraggableNode from './node/draggableNode/DraggableNode'; -import BasicNode from './node/basicNode/BasicNode'; +import { nodeTypes } from './node'; import SideBar from './sideBar/sideBar'; import { convertFlowData } from '@/utils/convertFlowData'; -import { exampleFlowData, mineList } from '@/pages/flowEditor/test/exampleFlowData'; +import { exampleFlowData } from '@/pages/flowEditor/test/exampleFlowData'; import CustomEdge from './components/customEdge'; -const nodeTypes: NodeTypes = { - textUpdater: TextUpdaterNode, - start: StartNode, - end: EndNode, - draggable: DraggableNode, - BASIC: BasicNode -}; - const edgeTypes: EdgeTypes = { custom: CustomEdge }; diff --git a/src/pages/flowEditor/node/index.tsx b/src/pages/flowEditor/node/index.tsx new file mode 100644 index 0000000..3f7b15f --- /dev/null +++ b/src/pages/flowEditor/node/index.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { NodeTypes } from '@xyflow/react'; +import TextUpdaterNode from './textUpdateNode/TextUpdaterNode'; +import StartNode from './startNode/StartNode'; +import EndNode from './endNode/EndNode'; +import DraggableNode from './draggableNode/DraggableNode'; +import BasicNode from './basicNode/BasicNode'; + +// 定义所有可用的节点类型 +export const nodeTypes: NodeTypes = { + textUpdater: TextUpdaterNode, + start: StartNode, + end: EndNode, + draggable: DraggableNode, + BASIC: BasicNode +}; + +// 节点类型映射,用于创建节点时的类型查找 +export const nodeTypeMap: Record = { + 'textUpdater': 'textUpdater', + 'start': 'start', + 'end': 'end', + 'draggable': 'draggable', + 'basic': 'BASIC' +}; + +// 节点显示名称映射 +export const nodeTypeNameMap: Record = { + 'textUpdater': '文本更新节点', + 'start': '开始节点', + 'end': '结束节点', + 'draggable': '任务节点', + 'basic': '基础节点' +}; + +// 注册新节点类型的函数 +export const registerNodeType = ( + type: string, + component: React.ComponentType, + displayName?: string +) => { + // 在nodeTypes中注册节点组件 + (nodeTypes as any)[type] = component; + + // 在nodeTypeMap中添加类型映射 + nodeTypeMap[type] = type; + + // 在nodeTypeNameMap中添加显示名称 + nodeTypeNameMap[type] = displayName || type; +}; + +export default { + nodeTypes, + nodeTypeMap, + nodeTypeNameMap, + registerNodeType +}; \ No newline at end of file