Skip to content

Commit 62312b3

Browse files
author
昔梦
committed
fix:统一配置，全局globalConfig，面板配置nodePannel，节点配置:nodeView
1 parent 709f02b commit 62312b3

File tree

12 files changed

+78
-32
lines changed

12 files changed

+78
-32
lines changed

‎docs/xflow/api.md

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,37 @@ title: API
77

88
## XFlow
99

10-
| 属性 | 描述 | 类型 | 默认值 |
10+
| 属性 | 描述 | 类型 | 默认值 |
1111
| ----------------- | ------------------------------------------ | ----------------------------------------------------------- | ------ |
1212
| initialValues | 初始的节点和边数据 | `{nodes:any[],edges:any[]}` | - | - |
1313
| layout | 节点布局的方向 | `LR \| TB` | LR | - |
1414
| widgets | 自定义组件 | `Record<string, ReactNode>` | - | - |
1515
| settings | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] | |
1616
| nodeSelector | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector` |
1717
| iconFontUrl | iconfont url，用于配置图标渲染 | `String` | |
18-
| configPanelWidth | 统一设置配置面板宽度 | `number` | 400 |
19-
| hideLineInsertBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
18+
| globalConfig | 全局的面板和节点配置 | {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview)} | |
2019

21-
### TNodeGroup
20+
## TNodePanel
21+
22+
面板相关配置
23+
24+
| 属性 | 描述 | 类型 | 默认值 |
25+
| ----- | ------------ | ------------- | ------ |
26+
| width | 设置配置面板宽度 | `string \| number` | 400 |
27+
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
28+
29+
30+
31+
## TNodeView
32+
33+
节点相关配置
34+
35+
| 属性 | 描述 | 类型 | 默认值 |
36+
| ----- | ------------ | ------------- | ------ |
37+
| hideEdgeAddBtn | 是否隐藏两个节点之间，连线上的增加节点按钮 | `boolean` | false |
38+
39+
40+
## TNodeGroup
2241

2342
节点分组配置
2443

@@ -37,15 +56,14 @@ title: API
3756
| title | 节点名称 | `string` | |
3857
| type | 节点类型 | `string` | |
3958
| hidden | 是否在配置面板中显示节点 | `boolean` | false |
40-
| hideDesc | 是否在配置面板中显示节点的描述信息 | `boolean` | false |
4159
| targetHandleHidden | 是否隐藏左侧输入连接头 | `boolean` | false |
4260
| sourceHandleHidden | 是否隐藏右侧输出连接头 | `boolean` | false |
4361
| icon | 节点的图标配置 | `{type:string;bgColor:string}` | |
4462
| iconSvg | 节点的图标配置Svg格式 | `SVGSVGElement` | |
4563
| settingSchema | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget` | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> | |
4664
| settingWidget | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
4765
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
48-
| nodeConfigPanelWidth | 单独设置节点配置面板宽度 | `string` | 400 |
66+
| nodePanel | 自定义节点的面板配置信息 | [TNodePanel](#tnodepanel) | |
4967

5068
## TNodeSelector
5169

‎docs/xflow/demo/nodeSetting/data.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ export const settings = [
99
type: 'icon-start', // icon-font
1010
bgColor: '#17B26A', // 图标背景颜色
1111
},
12-
nodeConfigPanelWidth: 500,
12+
nodePanel: {
13+
width: 600,
14+
hideDesc:false,
15+
},
1316
settingSchema: {
1417
// 自定义节点配置
1518
type: 'object',

‎docs/xflow/demo/nodeSetting/index.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,23 @@ export const Flow = () => {
1414
console.info("打印边数据", getEdges())
1515
console.info("打印视口数据", getViewport())
1616
console.info("打印画布数据", toObject())
17-
}}>打印画布数据</Button>
17+
}} style={{marginBottom:"10px"}}>打印画布数据</Button>
1818
<XFlow
1919
initialValues={{ nodes, edges }}
2020
settings={settings as any} // 节点配置
2121
nodeSelector={{
2222
showSearch: true,
2323
}}
2424
layout="LR"
25-
configPanelWidth={410}
26-
hideLineInsertBtn={true}
25+
globalConfig={{
26+
nodePanel: {
27+
width: '400px',
28+
hideDesc:true
29+
},
30+
nodeView: {
31+
hideEdgeAddBtn:true,
32+
}
33+
}}
2734
/>
2835
</>
2936
)

‎docs/xflow/schema/custom-settings.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ export default [
5959
type: 'icon-model',
6060
bgColor: '#6172F3',
6161
},
62-
hideDesc:true // 隐藏配置面板描述信息
6362
},
6463
{
6564
title: 'Prompt',

‎packages/x-flow/src/components/CustomEdge/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ export default memo((edge: any) => {
2727
targetY,
2828
});
2929

30-
const { hideLineInsertBtn } =
31-
useContext(ConfigContext);
30+
const { globalConfig } = useContext(ConfigContext);
31+
const hideEdgeAddBtn = globalConfig?.nodeView?.hideEdgeAddBtn ?? false;
3232

3333
const {
3434
nodes,
@@ -127,7 +127,7 @@ export default memo((edge: any) => {
127127
<CloseOutlined style={{ color: '#fff', fontSize: 10 }} />
128128
</div>
129129
{
130-
!hideLineInsertBtn && <NodeSelectPopover placement="right" addNode={handleAddNode}>
130+
!hideEdgeAddBtn && <NodeSelectPopover placement="right" addNode={handleAddNode}>
131131
<div className="line-icon-box">
132132
<PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
133133
</div>

‎packages/x-flow/src/components/PanelContainer/index.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
2626
const { onClose, children, nodeType, disabled, node, description, id, data } =
2727
props;
2828
// 1.获取节点配置信息
29-
const { settingMap, iconFontUrl, configPanelWidth }: any = useContext(ConfigContext);
29+
const { settingMap, iconFontUrl, globalConfig }: any = useContext(ConfigContext);
3030
const nodeSetting = settingMap[nodeType] || {};
3131
const { nodes, setNodes } = useStore(
3232
(state: any) => ({
@@ -39,7 +39,9 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
3939
const isDisabled = ['Input', 'Output'].includes(nodeType) || disabled;
4040
const [descVal, setDescVal] = useState(data?.desc);
4141
const [titleVal, setTitleVal] = useState(data?.title || nodeSetting?.title);
42-
const { hideDesc, nodeConfigPanelWidth, iconSvg } = nodeSetting;
42+
const { nodePanel, iconSvg } = nodeSetting;
43+
const hideDesc = nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
44+
4345

4446
// const description = getDescription(nodeType, props.description);
4547
const handleNodeValueChange = debounce((data: any) => {
@@ -86,7 +88,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
8688
<Drawer
8789
{...drawerVersionProps}
8890
getContainer={false}
89-
width={nodeConfigPanelWidth || configPanelWidth || 400} // 改为配置的width 节点的width > 全局的width> 默认 400
91+
width={nodePanel?.width || globalConfig?.nodePanel?.width || 400} // 改为配置的width 节点的width > 全局的width> 默认 400
9092
mask={false}
9193
onClose={onClose}
9294
headerStyle={{ paddingBottom: '12px' }}

‎packages/x-flow/src/nodes/node-common/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import { ConfigContext } from '../../models/context';
44

55
export default memo((props: any) => {
66
const { type, onClick, data } = props;
7-
const { settingMap, widgets, iconFontUrl } = useContext(ConfigContext);
7+
const { settingMap, widgets, iconFontUrl,globalConfig } = useContext(ConfigContext);
88
const nodeSetting = settingMap[type] || {};
99
const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
1010
const nodeDescription = nodeSetting?.description || '';
1111

12+
const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
13+
1214
return (
1315
<NodeContainer
1416
className='custom-node-code'
@@ -19,7 +21,7 @@ export default memo((props: any) => {
1921
bgColor: nodeSetting?.icon?.bgColor || '#F79009',
2022
}}
2123
onClick={onClick}
22-
hideDesc={nodeSetting?.hideDesc || !data?.desc}
24+
hideDesc={hideDesc}
2325
desc={data?.desc}
2426
NodeWidget={NodeWidget ? <NodeWidget data={data} /> : undefined}
2527
iconFontUrl={iconFontUrl}

‎packages/x-flow/src/nodes/node-end/index.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,12 @@ import { ConfigContext } from '../../models/context';
44

55
export default memo((props: any) => {
66
const { onClick, type, data } = props;
7-
const { settingMap,widgets, iconFontUrl } = useContext(ConfigContext);
7+
const { settingMap, widgets, iconFontUrl, globalConfig } = useContext(ConfigContext);
88
const nodeSetting = settingMap[type] || {};
99
const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
1010
const nodeDescription = nodeSetting?.description || '';
11+
const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
12+
1113

1214
return (
1315
<NodeContainer
@@ -19,7 +21,7 @@ export default memo((props: any) => {
1921
bgColor: nodeSetting?.icon?.bgColor || '#F79009',
2022
}}
2123
onClick={onClick}
22-
hideDesc={nodeSetting?.hideDesc || !data?.desc}
24+
hideDesc={hideDesc}
2325
desc={data?.desc}
2426
NodeWidget={NodeWidget ? <NodeWidget data={data} /> : undefined}
2527
iconFontUrl={iconFontUrl}

‎packages/x-flow/src/nodes/node-start/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { ConfigContext } from '../../models/context';
44

55
export default memo((props: any) => {
66
const { onClick, type, data } = props;
7-
const { settingMap, widgets, iconFontUrl } = useContext(ConfigContext);
7+
const { settingMap, widgets, iconFontUrl,globalConfig } = useContext(ConfigContext);
88
const nodeSetting = settingMap[type] || {};
99
const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
1010
const nodeDescription = nodeSetting?.description || '';
11-
11+
const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
1212

1313
return (
1414
<NodeContainer
@@ -20,7 +20,7 @@ export default memo((props: any) => {
2020
bgColor: nodeSetting?.icon?.bgColor || '#17B26A',
2121
}}
2222
onClick={onClick}
23-
hideDesc={nodeSetting?.hideDesc || !data?.desc}
23+
hideDesc={hideDesc}
2424
desc={data?.desc}
2525
NodeWidget={NodeWidget ? <NodeWidget data={data} /> : undefined}
2626
iconFontUrl={iconFontUrl}

‎packages/x-flow/src/nodes/node-switch/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,11 @@ export default memo((props: any) => {
1414
isHovered,
1515
handleAddNode,
1616
} = props;
17-
const { settingMap, widgets, iconFontUrl } = useContext(ConfigContext);
17+
const { settingMap, widgets, iconFontUrl, globalConfig } = useContext(ConfigContext);
1818
const nodeSetting = settingMap[type] || {};
1919
const NodeWidget = widgets[nodeSetting?.nodeWidget] || undefined;
2020
const nodeDescription = nodeSetting?.description || '';
21+
const hideDesc = nodeSetting?.nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
2122

2223
return (
2324
<NodeContainer
@@ -29,7 +30,7 @@ export default memo((props: any) => {
2930
bgColor: nodeSetting?.icon?.bgColor || '#06AED4',
3031
}}
3132
onClick={onClick}
32-
hideDesc={nodeSetting?.hideDesc || !data?.desc}
33+
hideDesc={hideDesc}
3334
desc={data?.desc}
3435
iconFontUrl={iconFontUrl}
3536
NodeWidget={

‎packages/x-flow/src/types.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ export interface TNodeItem {
1212
settingSchema?: Schema; // 节点的配置schema（弹窗） string为自定义组件
1313
settingWidget?: string; // 自定义组件
1414
hideDesc?: boolean;// 隐藏业务描述
15+
nodePanel?: { // 配置面板属性设置
16+
width?: string | number; // 配置面板宽度
17+
hideDesc?: boolean; // 配置面板描述
18+
}
1519
}
1620

1721
export interface TNodeGroup {
@@ -48,6 +52,15 @@ export interface FlowProps {
4852
settings?: (TNodeGroup | TNodeItem)[];
4953
nodeSelector?: TNodeSelector;
5054
iconFontUrl?: string;
55+
globalConfig?: {
56+
nodePanel?: { // 配置面板属性设置
57+
width?: string | number; // 配置面板宽度
58+
hideDesc?: boolean; // 配置面板描述
59+
},
60+
nodeView?: {
61+
hideEdgeAddBtn: boolean;// 是否隐藏两个节点之间，连线上的增加节点按钮
62+
}
63+
}
5164
}
5265

5366
export default FlowProps;

‎packages/x-flow/src/withProvider.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ConfigProvider } from 'antd';
2-
import React, { useMemo } from 'react';
2+
import React, { useEffect, useMemo } from 'react';
33
import { FlowProviderWrapper } from './components/FlowProvider';
44
import { ConfigContext } from './models/context';
55
import { TNodeGroup, TNodeItem } from './types';
@@ -26,11 +26,9 @@ export default function withProvider<T>(
2626
initialValues,
2727
layout,
2828
iconFontUrl,
29-
configPanelWidth,
30-
hideLineInsertBtn,
29+
globalConfig,
3130
...restProps
3231
} = props;
33-
3432
const settingMap = useMemo(() => {
3533
const obj: Record<string, any> = {};
3634
settings?.forEach((node: any) => {
@@ -51,14 +49,15 @@ export default function withProvider<T>(
5149
settings,
5250
settingMap,
5351
iconFontUrl,
54-
configPanelWidth,
55-
hideLineInsertBtn,
52+
globalConfig,
5653
widgets: {
5754
...defaultWidgets,
5855
...widgets,
5956
},
6057
};
6158

59+
60+
6261
return (
6362
<ConfigProvider {...configProvider}>
6463
<ConfigContext.Provider value={configContext}>

0 commit comments

Comments
 (0)