ngskcloud
/
flow-playform-react
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(flowEditor): 优化节点拖拽功能并添加新节点类型

Browse Source
master
钟良源 5 months ago
parent e49df169a5
commit e4ff51fdb3
7 changed files with 169 additions and 99 deletions
Show Stats Download Patch File Download Diff File

14
src/pages/flowEditor/index.tsx
Unescape Escape View File

@ -66,8 +66,9 @@ const FlowEditor: React.FC = () => {
if (!reactFlowInstance) return; if (!reactFlowInstance) return;
const type = event.dataTransfer.getData('application/reactflow'); const callBack = event.dataTransfer.getData('application/reactflow');
if (typeof type === 'undefined' || !type) { const nodeData = JSON.parse(callBack);
if (typeof nodeData.nodeType === 'undefined' || !nodeData.nodeType) {
return; return;
} }
@ -77,13 +78,16 @@ const FlowEditor: React.FC = () => {
}); });
const newNode = { const newNode = {
id: `${type}-${Date.now()}`, id: `${nodeData.nodeType}-${Date.now()}`,
type, type: nodeData.nodeType,
position, position,
data: { label: `${type} node` } data: { ...nodeData.data, title: nodeData.nodeName, type: nodeData.nodeType }
}; };
console.log('newNode:', newNode);
setNodes((nds) => nds.concat(newNode)); setNodes((nds) => nds.concat(newNode));
console.log('nodes:', nodes);
}, },
[reactFlowInstance] [reactFlowInstance]
); );

1
src/pages/flowEditor/node/draggableNode/DraggableNode.tsx
Unescape Escape View File

@ -4,6 +4,7 @@ import styles from '@/pages/flowEditor/node/style/base.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent'; import NodeContent from '@/pages/flowEditor/components/nodeContent';
const DraggableNode = ({ data, id }: { data: any; id: string }) => { const DraggableNode = ({ data, id }: { data: any; id: string }) => {
console.log(data, id );
const title = data.title || '任务节点'; const title = data.title || '任务节点';
// 获取节点选中状态 - 适配React Flow v12 API // 获取节点选中状态 - 适配React Flow v12 API

46
src/pages/flowEditor/sideBar/config/localNodeData.ts
Unescape Escape View File

@ -0,0 +1,46 @@
const defaultParameters = {
apiIns: [{
name: 'start',
desc: '',
dataType: '',
defaultValue: ''
}],
apiOuts: [{
name: 'done',
desc: '',
dataType: '',
defaultValue: ''
}],
dataIns: [],
dataOuts: []
};
// 定义节点基本信息
const nodeDefinitions = [
{ nodeName: '条件选择', nodeType: 'CONDITION', nodeGroup: 'common' },
{ nodeName: '与门', nodeType: 'AND', nodeGroup: 'common' },
{ nodeName: '或门', nodeType: 'OR', nodeGroup: 'common' },
{ nodeName: '等待', nodeType: 'WAIT', nodeGroup: 'common' },
{ nodeName: '循环', nodeType: 'LOOP', nodeGroup: 'common' },
{ nodeName: '周期', nodeType: 'CYCLE', nodeGroup: 'common' },
{ nodeName: '事件接收', nodeType: 'EVENTLISTENE', nodeGroup: 'common' },
{ nodeName: '事件发送', nodeType: 'EVENTSEND', nodeGroup: 'common' },
{ nodeName: 'JSON转字符串', nodeType: 'JSON2STR', nodeGroup: 'common' },
{ nodeName: '字符串转JSON', nodeType: 'STR2JSON', nodeGroup: 'common' },
{ nodeName: 'JSON封装', nodeType: 'JSON_CONVERT', nodeGroup: 'common' },
{ nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common' },
{ nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common' },
{ nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common' },
{ nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common' },
{ nodeName: '任务节点', nodeType: 'draggable', nodeGroup: 'common' }
];
// 通过映射生成完整的节点数据数组
export const localNodeData = nodeDefinitions.map(({ nodeName, nodeType, nodeGroup }) => ({
nodeName,
nodeType,
nodeGroup,
data: {
parameters: { ...defaultParameters }
}
}));

43
src/pages/flowEditor/sideBar/sideBar.tsx
Unescape Escape View File

@ -1,39 +1,42 @@
import React from 'react'; import React from 'react';
import styles from './style/style.module.less';
import { Card } from '@arco-design/web-react'; import { Card } from '@arco-design/web-react';
import { Collapse } from '@arco-design/web-react';
import { localNodeData } from './config/localNodeData';
const onDragStart = (event: React.DragEvent, nodeType: string) => { const CollapseItem = Collapse.Item;
event.dataTransfer.setData('application/reactflow', nodeType);
const onDragStart = (event: React.DragEvent, nodeData: any) => {
event.dataTransfer.setData('application/reactflow', JSON.stringify(nodeData));
event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.effectAllowed = 'move';
}; };
const SideBar: React.FC = () => { const SideBar: React.FC = () => {
return ( return (
<div style={{ <div className={styles['side-bar-container']}>
width: 200, <div className={styles['title']}>
padding: 10,
borderRight: '1px solid #eee',
backgroundColor: '#fafafa'
}}>
<div style={{ marginBottom: 20 }}>
<h3>节点库</h3> <h3>节点库</h3>
<p>将节点拖拽到画布中</p> <p>将节点拖拽到画布中</p>
</div> </div>
<Collapse bordered={false} accordion>
<CollapseItem header="应用组件" name="1">
</CollapseItem>
<CollapseItem header="复合组件" name="2">
</CollapseItem>
<CollapseItem header="系统组件" name="3">
{localNodeData.map((item, index) => (
<Card <Card
style={{ marginBottom: 10, cursor: 'grab' }} key={index}
draggable style={{ marginBottom: 5, cursor: 'grab' }}
onDragStart={(event) => onDragStart(event, 'draggable')}
>
<div>任务节点 1</div>
</Card>
<Card
style={{ marginBottom: 10, cursor: 'grab' }}
draggable draggable
onDragStart={(event) => onDragStart(event, 'textUpdater')} onDragStart={(event) => onDragStart(event, item)}
> >
<div>文本节点</div> <div>{item.nodeName}</div>
</Card> </Card>
))}
</CollapseItem>
</Collapse>
</div> </div>
); );
}; };

16
src/pages/flowEditor/sideBar/style/style.module.less
Unescape Escape View File

@ -0,0 +1,16 @@
.side-bar-container {
width: 200px;
height: 95%;
overflow-y: auto;
padding: 10px;
border-right: 1px solid #eee;
background-color: #fafafa;
.title {
margin-bottom: 20px;
}
:global(.arco-collapse-item-content-box) {
padding: 4px 6px;
}
}

136
src/pages/flowEditor/test/exampleFlowData.ts
Unescape Escape View File

@ -2,32 +2,32 @@ export const exampleFlowData = {
'main': { 'main': {
'id': 'main', 'id': 'main',
'lineConfigs': [ 'lineConfigs': [
{ // {
'id': '606f71c3-2051-4775-92a0-835d75b9ab91', // 'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
'lineType': 'API', // 'lineType': 'API',
'next': { // 'next': {
'endpointId': 'start', // 'endpointId': 'start',
'nodeId': 'node_49' // 'nodeId': 'node_49'
}, // },
'prev': { // 'prev': {
'endpointId': 'start', // 'endpointId': 'start',
'nodeId': 'start' // 'nodeId': 'start'
}, // },
'x6': '{"vertices":[]}' // 'x6': '{"vertices":[]}'
}, // },
{ // {
'id': '480b362e-45c6-4d9f-b55c-532703ff64ec', // 'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
'lineType': 'API', // 'lineType': 'API',
'next': { // 'next': {
'endpointId': 'end', // 'endpointId': 'end',
'nodeId': 'end' // 'nodeId': 'end'
}, // },
'prev': { // 'prev': {
'endpointId': 'done', // 'endpointId': 'done',
'nodeId': 'node_49' // 'nodeId': 'node_49'
}, // },
'x6': '{"vertices":[]}' // 'x6': '{"vertices":[]}'
} // }
], ],
'name': '', 'name': '',
'nodeConfigs': [ 'nodeConfigs': [
@ -44,47 +44,47 @@ export const exampleFlowData = {
'nodeName': '', 'nodeName': '',
'x6': '{"position":{"x":-250,"y":0}}' 'x6': '{"position":{"x":-250,"y":0}}'
}, },
{ // {
'apiId': '', // 'apiId': '',
'component': { // 'component': {
'compIdentifier': 'admin_connect_test', // 'compIdentifier': 'admin_connect_test',
'compInstanceIdentifier': 'admin_connect_test', // 'compInstanceIdentifier': 'admin_connect_test',
'customDef': '', // 'customDef': '',
'type': 'BASIC' // 'type': 'BASIC'
}, // },
'dataIns': [ // 'dataIns': [
{ // {
'arrayType': null, // 'arrayType': null,
'dataType': null, // 'dataType': null,
'defaultValue': null, // 'defaultValue': null,
'desc': '', // 'desc': '',
'id': 'input' // 'id': 'input'
} // }
], // ],
'dataOfPrevNodeMap': {}, // 'dataOfPrevNodeMap': {},
'dataOuts': [ // 'dataOuts': [
{ // {
'arrayType': null, // 'arrayType': null,
'dataType': null, // 'dataType': null,
'defaultValue': null, // 'defaultValue': null,
'desc': '', // 'desc': '',
'id': 'output' // 'id': 'output'
}, // },
{ // {
'arrayType': null, // 'arrayType': null,
'dataType': 'STRING', // 'dataType': 'STRING',
'defaultValue': null, // 'defaultValue': null,
'desc': '返回数据', // 'desc': '返回数据',
'id': 'returnData' // 'id': 'returnData'
} // }
], // ],
'defaultValues': [], // 'defaultValues': [],
'description': '', // 'description': '',
'joinLines': {}, // 'joinLines': {},
'nodeId': 'node_49', // 'nodeId': 'node_49',
'nodeName': '连接test', // 'nodeName': '连接test',
'x6': '{"position":{"x":-90,"y":-60}}' // 'x6': '{"position":{"x":-90,"y":-60}}'
}, // },
{ {
'apiId': '', 'apiId': '',
'component': null, 'component': null,
@ -96,7 +96,7 @@ export const exampleFlowData = {
'joinLines': {}, 'joinLines': {},
'nodeId': 'end', 'nodeId': 'end',
'nodeName': '', 'nodeName': '',
'x6': '{"position":{"x":250,"y":25}}' 'x6': '{"position":{"x":500,"y":0}}'
} }
] ]
} }

Write Preview
Loading…
Cancel
Save