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;
const type = event.dataTransfer.getData('application/reactflow');
if (typeof type === 'undefined' || !type) {
const callBack = event.dataTransfer.getData('application/reactflow');
const nodeData = JSON.parse(callBack);
if (typeof nodeData.nodeType === 'undefined' || !nodeData.nodeType) {
return;
}
@ -77,13 +78,16 @@ const FlowEditor: React.FC = () => {
});
const newNode = {
id: `${type}-${Date.now()}`,
type,
id: `${nodeData.nodeType}-${Date.now()}`,
type: nodeData.nodeType,
position,
data: { label: `${type} node` }
data: { ...nodeData.data, title: nodeData.nodeName, type: nodeData.nodeType }
};
console.log('newNode:', newNode);
setNodes((nds) => nds.concat(newNode));
console.log('nodes:', nodes);
},
[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';
const DraggableNode = ({ data, id }: { data: any; id: string }) => {
console.log(data, id );
const title = data.title || '任务节点';
// 获取节点选中状态 - 适配React Flow v12 API

4
src/pages/flowEditor/node/startNode/StartNode.tsx
Unescape Escape View File

@ -18,9 +18,9 @@ interface StartNodeData {
const StartNode = ({ data, id }: { data: StartNodeData; id: string }) => {
const title = data.title || '开始';
// 获取节点选中状态 - 适配React Flow v12 API
const isSelected = useStore((state) =>
const isSelected = useStore((state) =>
state.nodeLookup.get(id)?.selected || false
);

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 }
}
}));

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

@ -1,39 +1,42 @@
import React from 'react';
import styles from './style/style.module.less';
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) => {
event.dataTransfer.setData('application/reactflow', nodeType);
const CollapseItem = Collapse.Item;
const onDragStart = (event: React.DragEvent, nodeData: any) => {
event.dataTransfer.setData('application/reactflow', JSON.stringify(nodeData));
event.dataTransfer.effectAllowed = 'move';
};
const SideBar: React.FC = () => {
return (
<div style={{
width: 200,
padding: 10,
borderRight: '1px solid #eee',
backgroundColor: '#fafafa'
}}>
<div style={{ marginBottom: 20 }}>
<div className={styles['side-bar-container']}>
<div className={styles['title']}>
<h3>节点库</h3>
<p>将节点拖拽到画布中</p>
</div>
<Card
style={{ marginBottom: 10, cursor: 'grab' }}
draggable
onDragStart={(event) => onDragStart(event, 'draggable')}
>
<div>任务节点 1</div>
</Card>
<Card
style={{ marginBottom: 10, cursor: 'grab' }}
draggable
onDragStart={(event) => onDragStart(event, 'textUpdater')}
>
<div>文本节点</div>
</Card>
<Collapse bordered={false} accordion>
<CollapseItem header="应用组件" name="1">
</CollapseItem>
<CollapseItem header="复合组件" name="2">
</CollapseItem>
<CollapseItem header="系统组件" name="3">
{localNodeData.map((item, index) => (
<Card
key={index}
style={{ marginBottom: 5, cursor: 'grab' }}
draggable
onDragStart={(event) => onDragStart(event, item)}
>
<div>{item.nodeName}</div>
</Card>
))}
</CollapseItem>
</Collapse>
</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': {
'id': 'main',
'lineConfigs': [
{
'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
'lineType': 'API',
'next': {
'endpointId': 'start',
'nodeId': 'node_49'
},
'prev': {
'endpointId': 'start',
'nodeId': 'start'
},
'x6': '{"vertices":[]}'
},
{
'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
'lineType': 'API',
'next': {
'endpointId': 'end',
'nodeId': 'end'
},
'prev': {
'endpointId': 'done',
'nodeId': 'node_49'
},
'x6': '{"vertices":[]}'
}
// {
// 'id': '606f71c3-2051-4775-92a0-835d75b9ab91',
// 'lineType': 'API',
// 'next': {
// 'endpointId': 'start',
// 'nodeId': 'node_49'
// },
// 'prev': {
// 'endpointId': 'start',
// 'nodeId': 'start'
// },
// 'x6': '{"vertices":[]}'
// },
// {
// 'id': '480b362e-45c6-4d9f-b55c-532703ff64ec',
// 'lineType': 'API',
// 'next': {
// 'endpointId': 'end',
// 'nodeId': 'end'
// },
// 'prev': {
// 'endpointId': 'done',
// 'nodeId': 'node_49'
// },
// 'x6': '{"vertices":[]}'
// }
],
'name': '',
'nodeConfigs': [
@ -44,47 +44,47 @@ export const exampleFlowData = {
'nodeName': '',
'x6': '{"position":{"x":-250,"y":0}}'
},
{
'apiId': '',
'component': {
'compIdentifier': 'admin_connect_test',
'compInstanceIdentifier': 'admin_connect_test',
'customDef': '',
'type': 'BASIC'
},
'dataIns': [
{
'arrayType': null,
'dataType': null,
'defaultValue': null,
'desc': '',
'id': 'input'
}
],
'dataOfPrevNodeMap': {},
'dataOuts': [
{
'arrayType': null,
'dataType': null,
'defaultValue': null,
'desc': '',
'id': 'output'
},
{
'arrayType': null,
'dataType': 'STRING',
'defaultValue': null,
'desc': '返回数据',
'id': 'returnData'
}
],
'defaultValues': [],
'description': '',
'joinLines': {},
'nodeId': 'node_49',
'nodeName': '连接test',
'x6': '{"position":{"x":-90,"y":-60}}'
},
// {
// 'apiId': '',
// 'component': {
// 'compIdentifier': 'admin_connect_test',
// 'compInstanceIdentifier': 'admin_connect_test',
// 'customDef': '',
// 'type': 'BASIC'
// },
// 'dataIns': [
// {
// 'arrayType': null,
// 'dataType': null,
// 'defaultValue': null,
// 'desc': '',
// 'id': 'input'
// }
// ],
// 'dataOfPrevNodeMap': {},
// 'dataOuts': [
// {
// 'arrayType': null,
// 'dataType': null,
// 'defaultValue': null,
// 'desc': '',
// 'id': 'output'
// },
// {
// 'arrayType': null,
// 'dataType': 'STRING',
// 'defaultValue': null,
// 'desc': '返回数据',
// 'id': 'returnData'
// }
// ],
// 'defaultValues': [],
// 'description': '',
// 'joinLines': {},
// 'nodeId': 'node_49',
// 'nodeName': '连接test',
// 'x6': '{"position":{"x":-90,"y":-60}}'
// },
{
'apiId': '',
'component': null,
@ -96,7 +96,7 @@ export const exampleFlowData = {
'joinLines': {},
'nodeId': 'end',
'nodeName': '',
'x6': '{"position":{"x":250,"y":25}}'
'x6': '{"position":{"x":500,"y":0}}'
}
]
}

Write Preview
Loading…
Cancel
Save