Skip to content

Commit e0cc62e

Browse files
lhbxslhbxs
authored
Merge pull request #1608 from alibaba/xflow
Xflow
2 parents 8e4062d + fe183b7 commit e0cc62e

File tree

17 files changed

+236
-221
lines changed

17 files changed

+236
-221
lines changed

‎docs/xflow/api.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,9 @@ title: API
101101
| settingWidgetProps | 用于向`settingWidget`自定义组件中传递自定义参数 | `object` | |
102102
| nodeWidget | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。 | `string` | |
103103
| nodePanel | 自定义节点的面板配置信息 | [TNodePanel](#tnodepanel) | |
104-
| switchExtra | 条件节几点属性配置 | [TSwitchExtra](#tswitchextra) | |
104+
| switchExtra | 条件节点属性配置 | [TSwitchExtra](#tswitchextra) | |
105+
| parallelExtra | 并行节点属性配置 | [TParallelExtra](#tparallelextra) | |
106+
105107

106108

107109
## TNodeSelector
@@ -119,3 +121,9 @@ title: API
119121
| valueKey | 自定义节点 value 的字段 | `string` | |
120122
| titleKey | 自定义节点 title 的字段 | `string` | |
121123

124+
## TParallelExtra
125+
126+
| 属性 | 描述 | 类型 | 默认值 |
127+
| -------- | -------------------------------- | --------- | ------ |
128+
| valueKey | 自定义节点 value 的字段 | `string` | |
129+
| titleKey | 自定义节点 title 的字段 | `string` | |

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"@babel/plugin-transform-react-jsx": "^7.19.0",
4949
"@babel/preset-env": "7.16.11",
5050
"@babel/preset-react": "7.16.7",
51+
"@codemirror/lang-json": "^6.0.1",
5152
"@jest/types": "^27.5.1",
5253
"@monaco-editor/react": "^4.4.6",
5354
"@testing-library/jest-dom": "^5.16.4",
@@ -57,6 +58,7 @@
5758
"@types/enzyme-adapter-react-16": "^1.0.6",
5859
"@types/jest": "^27.0.3",
5960
"@types/lodash-es": "^4.17.6",
61+
"@uiw/react-codemirror": "^4.23.7",
6062
"@umijs/plugin-esbuild": "1.x",
6163
"@umijs/preset-react": "1.x",
6264
"@umijs/test": "^3.0.5",

‎packages/x-flow/package.json

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,9 @@
4646
},
4747
"dependencies": {
4848
"@ant-design/icons": "^4.0.2",
49+
"@codemirror/lang-json": "^6.0.1",
4950
"@dagrejs/dagre": "^1.1.3",
51+
"@uiw/react-codemirror": "^4.23.7",
5052
"@xyflow/react": "^12.3.2",
5153
"ahooks": "^3.7.5",
5254
"classnames": "^2.3.1",
@@ -56,11 +58,7 @@
5658
"tinycolor2": "^1.6.0",
5759
"use-context-selector": "^1.4.1",
5860
"zundo": "^2.1.0",
59-
"zustand": "^4.5.4",
60-
"@monaco-editor/react": "^4.6.0",
61-
"monaco-editor-webpack-plugin": "^4.1.1",
62-
"react-monaco-editor": "^0.44.0",
63-
"react-simple-code-editor": "^0.11.0"
61+
"zustand": "^4.5.4"
6462
},
6563
"devDependencies": {
6664
"deep-equal": "^2.0.3",

‎packages/x-flow/src/components/CustomNode/index.less

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@
1717
padding: 0 2px;
1818
border-radius: 4px;
1919
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05);
20+
opacity: 0;
21+
transition: all .5s;
22+
}
23+
&:hover{
24+
.xflow-node-actions-container{
25+
opacity: 1;
26+
}
2027
}
2128
.react-flow__handle {
2229
width: 30px;

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

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ export default memo((props: any) => {
1919
const { widgets, settingMap, globalConfig, onMenuItemClick, antdVersion,readOnly } =
2020
useContext(ConfigContext);
2121
const deletable = globalConfig?.edge?.deletable ?? true;
22-
const disabledCopy = settingMap[type]?.disabledCopy ?? false
23-
const disabledDelete = settingMap[type]?.disabledDelete ?? false
22+
const disabledCopy = settingMap[type]?.disabledCopy ?? false;
23+
const disabledDelete = settingMap[type]?.disabledDelete ?? false;
24+
const switchExtra = settingMap[type]?.switchExtra || {};
2425
// const isConnectableStart = globalConfig?.handle?.isConnectableStart ?? true;
2526
// const isConnectableEnd = globalConfig?.handle?.isConnectableEnd ?? true;
2627

@@ -160,36 +161,46 @@ export default memo((props: any) => {
160161
}
161162
});
162163
}
163-
return [
164-
...list,
165-
{
166-
label: `粘贴到第${list.length + 1}个出口`,
167-
key: 'paste-' + (list.length + 1),
168-
id: id,
169-
index: list.length + 1,
170-
sourcehandle: 'id_else',
171-
},
172-
];
164+
const defaultElse = switchExtra?.hideElse
165+
? []
166+
: [
167+
{
168+
label: `粘贴到第${list.length + 1}个出口`,
169+
key: 'paste-' + (list.length + 1),
170+
id: id,
171+
index: list.length + 1,
172+
sourcehandle: 'id_else',
173+
},
174+
];
175+
return [...list, ...defaultElse];
173176
}
174177
return [
175178
{
176179
label: '粘贴',
177180
key: 'paste',
178181
},
179182
];
180-
}, [type,data]);
183+
}, [type, data]);
181184

182185
// 节点状态处理
183186
const statusObj = transformNodeStatus(globalConfig?.nodeView?.status || []);
184187
const nodeBorderColor = statusObj[status]?.color;
185188

186189
const menu = (
187190
<Menu onClick={itemClick}>
188-
<Menu.Item key={'copy'} disabled={disabledCopy}>复制</Menu.Item>
191+
<Menu.Item key={'copy'} disabled={disabledCopy}>
192+
复制
193+
</Menu.Item>
189194
{menuItem.map((r: any) => {
190-
return <Menu.Item {...r} key={r.key}>{r.label}</Menu.Item>;
195+
return (
196+
<Menu.Item {...r} key={r.key}>
197+
{r.label}
198+
</Menu.Item>
199+
);
191200
})}
192-
<Menu.Item key={'delete'} danger={true} disabled={disabledDelete}>删除</Menu.Item>
201+
<Menu.Item key={'delete'} danger={true} disabled={disabledDelete}>
202+
删除
203+
</Menu.Item>
193204
</Menu>
194205
);
195206

@@ -201,14 +212,14 @@ export default memo((props: any) => {
201212
{
202213
label: '复制',
203214
key: 'copy',
204-
disabled:disabledCopy
215+
disabled: disabledCopy,
205216
},
206217
...menuItem,
207218
{
208219
label: '删除',
209220
key: 'delete',
210221
danger: true,
211-
disabled:disabledDelete
222+
disabled: disabledDelete,
212223
},
213224
],
214225
onClick: itemClick,
@@ -240,15 +251,17 @@ export default memo((props: any) => {
240251
// isConnectableEnd={isConnectableEnd}
241252
/>
242253
)}
243-
{selected && (
244-
<Dropdown disabled={readOnly} {...dropdownVersionProps} trigger={['click', 'contextMenu']}>
245-
<div className="xflow-node-actions-container">
246-
<MoreOutlined
247-
style={{ transform: 'rotateZ(90deg)', fontSize: '20px' }}
248-
></MoreOutlined>
249-
</div>
250-
</Dropdown>
251-
)}
254+
<Dropdown
255+
disabled={readOnly}
256+
{...dropdownVersionProps}
257+
//trigger={['click', 'contextMenu']}
258+
>
259+
<div className="xflow-node-actions-container">
260+
<MoreOutlined
261+
style={{ transform: 'rotateZ(90deg)', fontSize: '20px' }}
262+
></MoreOutlined>
263+
</div>
264+
</Dropdown>
252265
<NodeWidget
253266
id={id}
254267
type={type}
@@ -276,3 +289,4 @@ export default memo((props: any) => {
276289
</div>
277290
);
278291
});
292+

‎packages/x-flow/src/components/NodeLogPanel/components/CodePanel.tsx

Lines changed: 24 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,28 @@
11
import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
2-
import Editor from '@monaco-editor/react';
2+
import { json } from '@codemirror/lang-json';
3+
import { EditorView } from '@codemirror/view';
4+
import CodeMirror from '@uiw/react-codemirror';
35
import { Typography } from 'antd';
46
import { isString } from 'lodash';
5-
import React, { memo, useRef, useState } from 'react';
6-
7-
const DEFAULT_THEME = {
8-
base: 'vs',
9-
inherit: true,
10-
rules: [],
11-
colors: {
12-
'editor.background': '#F2F4F7',
13-
},
14-
};
7+
import React, { memo, useState } from 'react';
158

169
export default memo((props: any) => {
1710
const { codeData } = props;
1811
const [isCopy, setIsCopy] = useState(false);
19-
const editorRef = useRef<any>(null);
2012
const isRenderTitle = isString(codeData?.title);
2113

22-
const handleEditorDidMount = (editor: any, monaco: any) => {
23-
editorRef.current = editor;
24-
monaco.editor.defineTheme('default-theme', DEFAULT_THEME);
25-
26-
monaco.editor.defineTheme('blur-theme', {
27-
base: 'vs',
28-
inherit: true,
29-
rules: [],
30-
colors: {
31-
'editor.background': '#F2F4F7',
32-
},
33-
});
34-
35-
monaco.editor.defineTheme('focus-theme', {
36-
base: 'vs',
37-
inherit: true,
38-
rules: [],
39-
colors: {
40-
'editor.background': '#ffffff',
41-
},
42-
});
43-
44-
monaco.editor.setTheme('default-theme');
45-
};
46-
4714
const copyCode = () => {
48-
if (editorRef.current) {
49-
const code = editorRef.current.getValue();
50-
navigator.clipboard
51-
.writeText(code)
52-
.then(() => {
53-
setIsCopy(true);
54-
setTimeout(() => {
55-
setIsCopy(false);
56-
}, 1000);
57-
})
58-
.catch(err => {
59-
console.error('Failed to copy: ', err);
60-
});
61-
}
15+
navigator.clipboard
16+
.writeText(codeData?.code)
17+
.then(() => {
18+
setIsCopy(true);
19+
setTimeout(() => {
20+
setIsCopy(false);
21+
}, 1000);
22+
})
23+
.catch(err => {
24+
console.error('Failed to copy: ', err);
25+
});
6226
};
6327

6428
return (
@@ -91,23 +55,16 @@ export default memo((props: any) => {
9155
<CopyOutlined className="log-code-copy" onClick={copyCode} />
9256
)}
9357
</div>
94-
<Editor
95-
className="log-code-editor"
96-
language={'json'}
97-
theme={'default-theme'}
58+
<CodeMirror
9859
value={codeData?.code}
99-
options={{
100-
readOnly: true,
101-
domReadOnly: true,
102-
quickSuggestions: false,
103-
minimap: { enabled: false },
104-
// wordWrap: 'on',
105-
// unicodeHighlight: {
106-
// ambiguousCharacters: false,
107-
// },
108-
}}
109-
onMount={handleEditorDidMount}
110-
// loading={''}
60+
className="log-code-editor"
61+
extensions={[json(), EditorView.lineWrapping]}
62+
height="172px"
63+
minHeight="172px"
64+
width="100%"
65+
theme="none"
66+
readOnly={true}
67+
editable={false}
11168
/>
11269
</div>
11370
);

‎packages/x-flow/src/components/NodeLogPanel/index.less

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,10 @@
8686
.log-code-editor {
8787
height: 172px;
8888
border-radius: 6px;
89+
.cm-focused{
90+
outline: none;
91+
}
92+
8993
}
9094
}
9195

@@ -115,8 +119,10 @@
115119
align-items: center;
116120

117121
.track-icon-box {
118-
width: 20px;
119-
height: 20px;
122+
width: 24px;
123+
height: 24px;
124+
min-height: 24px;
125+
min-width: 24px;
120126
border-radius: 6px;
121127
display: flex;
122128
align-items: center;

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
109109
<Drawer
110110
{...drawerVersionProps}
111111
getContainer={false}
112+
key={id}
112113
width={nodePanel?.width || globalConfig?.nodePanel?.width || 400} // 改为配置的width 节点的width > 全局的width> 默认 400
113114
mask={false}
114115
onClose={onClose}
@@ -134,8 +135,8 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
134135
/>
135136
)}
136137
</span>
137-
{isDisabled ? (
138-
<span style={{ marginLeft: '11px' }}>{nodeSetting?.title}</span>
138+
{isDisabled || readOnly ? (
139+
<span style={{ marginLeft: '11px' }}>{titleVal}</span>
139140
) : (
140141
<Input
141142
style={{ width: '100%' }}
@@ -166,7 +167,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
166167
</div>
167168
{!hideDesc && (
168169
<div className="desc-box">
169-
{isDisabled ? (
170+
{isDisabled ? (
170171
description
171172
) : (
172173
<Input.TextArea
@@ -177,7 +178,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
177178
setDescVal(e.target.value);
178179
handleNodeValueChange({ desc: e.target.value });
179180
}}
180-
disabled={readOnly}
181+
disabled={readOnly}
181182
/>
182183
)}
183184
</div>

0 commit comments

Comments
 (0)