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

feat(flowEditor): 为节点添加图标并优化相关功能

Browse Source 
-为不同类型的节点添加相应的图标- 实现节点图标自动设置功能
- 更新节点数据配置，增加 REST 调用节点
- 优化流程编辑器界面和功能
master
钟良源 5 months ago
parent 41c1cb5c07
commit 3510a2d011
5 changed files with 124 additions and 69 deletions
Show Stats Download Patch File Download Diff File

0
src/pages/flowEditor/components/nodeWrapper.tsx
Unescape Escape View File

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

@ -66,6 +66,7 @@ const FlowEditor: React.FC = () => {
event.preventDefault();
if (!reactFlowInstance) return;
console.log("1");
const callBack = event.dataTransfer.getData('application/reactflow');
const nodeData = JSON.parse(callBack);

56
src/pages/flowEditor/node/localNode/LocalNode.tsx
Unescape Escape View File

@ -2,6 +2,60 @@ import React from 'react';
import { useStore } from '@xyflow/react';
import styles from '@/pages/flowEditor/node/style/base.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContent';
import DynamicIcon from '@/components/DynamicIcon';
const setIcon = (nodeType: string) => {
let type = 'IconApps';
switch (nodeType) {
case 'CONDITION':
type = 'IconBranch';
break;
case 'AND':
type = 'IconShareAlt';
break;
case 'OR':
type = 'IconPause';
break;
case 'WAIT':
type = 'IconClockCircle';
break;
case 'LOOP':
type = 'IconSync';
break;
case 'CYCLE':
type = 'IconSchedule';
break;
case 'EVENTLISTENE':
type = 'IconImport';
break;
case 'EVENTSEND':
type = 'IconExport';
break;
case 'JSON2STR':
type = 'IconCodeBlock';
break;
case 'STR2JSON':
type = 'IconCodeSquare';
break;
case 'JSONCONVERT':
type = 'IconTranslate';
break;
case 'RESULT':
type = 'IconInteraction';
break;
case 'IMAGE':
type = 'IconImage';
break;
case 'CODE':
type = 'IconCode';
break;
case 'REST':
type = 'IconCloudDownload';
break;
}
return <DynamicIcon type={type} style={{ fontSize: '16px', marginRight: '5px' }} />;
};
const LocalNode = ({ data, id }: { data: any; id: string }) => {
const title = data.title || '系统组件';
@ -14,9 +68,9 @@ const LocalNode = ({ data, id }: { data: any; id: string }) => {
return (
<div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
<div className={styles['node-header']} style={{ backgroundColor: '#1890ff' }}>
{setIcon(data.type)}
{title}
</div>
<NodeContent data={data} />
</div>
);

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

@ -31,7 +31,7 @@ const nodeDefinitions = [
{ nodeName: '结果展示', nodeType: 'RESULT', nodeGroup: 'common', icon: 'IconInteraction' },
{ nodeName: '图片展示', nodeType: 'IMAGE', nodeGroup: 'common', icon: 'IconImage' },
{ nodeName: '代码编辑器', nodeType: 'CODE', nodeGroup: 'common', icon: 'IconCode' },
{ nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' }
{ nodeName: 'REST调用', nodeType: 'REST', nodeGroup: 'common', icon: 'IconCloudDownload' },
];
// 通过映射生成完整的节点数据数组

134
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,

Write Preview
Loading…
Cancel
Save