Skip to content

Commit 38e7d84

Browse files
xlornexlorne
committed
fix FlowContext
1 parent 4f15989 commit 38e7d84

File tree

7 files changed

+143
-54
lines changed

7 files changed

+143
-54
lines changed

‎admin-pro-ui/src/components/flow/domain/FlowContext.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import FlowPanelContext from "@/components/flow/domain/FlowPanelContext";
2+
3+
class FlowContext{
4+
5+
private flowPanelContext: FlowPanelContext | null = null;
6+
7+
private constructor() {
8+
}
9+
10+
private static instance: FlowContext = new FlowContext();
11+
12+
static getInstance(){
13+
return FlowContext.instance;
14+
}
15+
16+
setFlowPanelContext(flowPanelContext: FlowPanelContext){
17+
this.flowPanelContext = flowPanelContext;
18+
}
19+
20+
getFlowPanelContext(){
21+
return this.flowPanelContext;
22+
}
23+
}
24+
25+
export default FlowContext;

‎admin-pro-ui/src/components/flow/domain/FlowPanelContext.ts

Lines changed: 75 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,13 @@ import {NodeProperties, NodeType} from "@/components/flow/types";
44
import {message} from "antd";
55
import {isEmpty} from "lodash-es";
66
import NodeData = LogicFlow.NodeData;
7+
import RegisterConfig = LogicFlow.RegisterConfig;
8+
import GraphConfigData = LogicFlow.GraphConfigData;
79

8-
10+
// 节点移动距离
911
const TRANSLATION_DISTANCE = 40
1012

13+
// 逻辑面板上下文
1114
class FlowPanelContext {
1215

1316
private readonly lfRef: React.RefObject<LogicFlow>;
@@ -16,6 +19,9 @@ class FlowPanelContext {
1619
this.lfRef = lfRef;
1720
}
1821

22+
/**
23+
* 生成uuid
24+
*/
1925
private generateUUID() {
2026
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
2127
const r = (Math.random() * 16) | 0;
@@ -24,6 +30,60 @@ class FlowPanelContext {
2430
});
2531
}
2632

33+
/**
34+
* 注册节点
35+
* @param node
36+
*/
37+
register(node: RegisterConfig) {
38+
this.lfRef.current?.register(node);
39+
}
40+
41+
/**
42+
* 渲染数据
43+
* @param data
44+
*/
45+
render(data: GraphConfigData) {
46+
this.lfRef.current?.render(data);
47+
}
48+
49+
/**
50+
* 获取节点信息
51+
* @param nodeId 节点id
52+
*/
53+
getNode(nodeId: string) {
54+
const data = this.getGraphData();
55+
if (data) {
56+
//@ts-ignore
57+
const nodes = data.nodes;
58+
const getNode = (nodeId: string) => {
59+
for (const node of nodes) {
60+
if (node.id === nodeId) {
61+
return node;
62+
}
63+
}
64+
}
65+
return getNode(nodeId);
66+
}
67+
return null;
68+
}
69+
70+
/**
71+
* 获取节点按钮
72+
* @param nodeId 节点id
73+
*/
74+
getButtons(nodeId: string) {
75+
const node = this.getNode(nodeId);
76+
if (node) {
77+
const buttons = node.properties.buttons || [];
78+
buttons.sort((a: any, b: any) => {
79+
return a.order - b.order;
80+
})
81+
return buttons;
82+
}
83+
return []
84+
}
85+
86+
2787
/**
2888
* 添加节点
2989
* @param type 节点类型
@@ -107,7 +167,7 @@ class FlowPanelContext {
107167
*/
108168
private nodeVerify = (type: NodeType) => {
109169
// @ts-ignore
110-
const nodes = this.lfRef.current?.getGraphData().nodes;
170+
const nodes = this.getGraphData().nodes;
111171
if (type === 'start-node') {
112172
for (let i = 0; i < nodes.length; i++) {
113173
if (nodes[i].type === type) {
@@ -132,44 +192,44 @@ class FlowPanelContext {
132192
* 缩放
133193
* @param flag true为放大 false为缩小
134194
*/
135-
zoom = (flag:boolean) => {
195+
zoom = (flag: boolean) => {
136196
this.lfRef.current?.zoom(flag);
137197
}
138198

139199
/**
140200
* 重置缩放
141201
*/
142-
resetZoom = ()=>{
202+
resetZoom = () => {
143203
this.lfRef.current?.resetZoom();
144204
this.lfRef.current?.resetTranslate();
145205
}
146206

147207
/**
148208
* 恢复 下一步
149209
*/
150-
redo = ()=>{
210+
redo = () => {
151211
this.lfRef.current?.redo();
152212
}
153213

154214
/**
155215
* 撤销 上一步
156216
*/
157-
undo = ()=> {
217+
undo = () => {
158218
this.lfRef.current?.undo();
159219
}
160220

161221
/**
162222
* 隐藏地图
163223
*/
164-
hiddenMap = ()=>{
224+
hiddenMap = () => {
165225
// @ts-ignore
166226
this.lfRef.current?.extension.miniMap.hide();
167227
}
168228

169229
/**
170230
* 显示地图
171231
*/
172-
showMap = ()=>{
232+
showMap = () => {
173233
const modelWidth = this.lfRef.current?.graphModel.width;
174234
// @ts-ignore
175235
this.lfRef.current?.extension.miniMap.show(modelWidth - 300, 200);
@@ -178,10 +238,16 @@ class FlowPanelContext {
178238
/**
179239
* 下载图片
180240
*/
181-
download = ()=>{
241+
download = () => {
182242
this.lfRef.current?.getSnapshot();
183243
}
184244

245+
/**
246+
* 获取流程设计的数据
247+
*/
248+
getGraphData() {
249+
return this.lfRef.current?.getGraphData();
250+
}
185251
}
186252

187253
export default FlowPanelContext;

‎admin-pro-ui/src/components/flow/index.tsx

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {EdgeType} from "@/components/flow/flow/types";
1313

1414
import "./index.scss";
1515
import FlowPanelContext from "@/components/flow/domain/FlowPanelContext";
16+
import FlowContext from "@/components/flow/domain/FlowContext";
1617

1718
export interface FlowActionType {
1819
getData: () => any;
@@ -28,8 +29,6 @@ interface FlowContextProps {
2829
flowPanelContext: FlowPanelContext;
2930
}
3031

31-
export const FlowContext = React.createContext<FlowContextProps | null>(null);
32-
3332
const Flow: React.FC<FlowProps> = (props) => {
3433

3534
// 流程图背景颜色
@@ -44,11 +43,12 @@ const Flow: React.FC<FlowProps> = (props) => {
4443
const edgeType = props.edgeType || 'polyline';
4544

4645
const flowPanelContext = new FlowPanelContext(lfRef);
46+
FlowContext.getInstance().setFlowPanelContext(flowPanelContext);
4747

4848
if (props.actionRef) {
4949
React.useImperativeHandle(props.actionRef, () => ({
5050
getData: () => {
51-
return lfRef.current?.getGraphData();
51+
return flowPanelContext.getGraphData();
5252
}
5353
}), [props]);
5454
}
@@ -102,12 +102,12 @@ const Flow: React.FC<FlowProps> = (props) => {
102102
strokeWidth: FLOW_EDGE_STROKE_WIDTH,
103103
},
104104
});
105-
lfRef.current.register(Start);
106-
lfRef.current.register(Node);
107-
lfRef.current.register(Over);
108-
lfRef.current.register(Circulate);
109105

110-
lfRef.current.render(data);
106+
flowPanelContext.register(Start);
107+
flowPanelContext.register(Node);
108+
flowPanelContext.register(Over);
109+
flowPanelContext.register(Circulate);
110+
flowPanelContext.render(data);
111111

112112
lfRef.current.on('node:add', (data) => {
113113
console.log('node:add', data);
@@ -122,16 +122,12 @@ const Flow: React.FC<FlowProps> = (props) => {
122122

123123

124124
return (
125-
<FlowContext.Provider value={{
126-
flowPanelContext: flowPanelContext
127-
}}>
128-
<div className="flow-design">
129-
<NodePanel/>
130-
<ControlPanel/>
131-
132-
<div className={"flow-view"} ref={container}/>
133-
</div>
134-
</FlowContext.Provider>
125+
<div className="flow-design">
126+
<NodePanel/>
127+
<ControlPanel/>
128+
129+
<div className={"flow-view"} ref={container}/>
130+
</div>
135131
)
136132
};
137133

‎admin-pro-ui/src/components/flow/nodes/Start/index.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -91,25 +91,25 @@ class StartModel extends HtmlNodeModel {
9191
// [0, -this.height / 2],
9292
];
9393
}
94-
9594
}
9695

96+
9797
class StartNode extends HtmlNode {
98+
9899
setHtml(rootEl: SVGForeignObjectElement) {
99100
const {properties} = this.props.model as HtmlNodeModel<StartProperties>;
100101
const div = document.createElement('div');
101-
102102
const settingVisible = properties.settingVisible !== false;
103103

104104
ReactDOM.createRoot(div).render(
105-
<StartView
106-
name={properties.name}
107-
code={properties.code}
108-
properties={properties}
109-
settingVisible={settingVisible}
110-
update={async (values) => {
111-
this.props.model.setProperties(values);
112-
}}/>,
105+
<StartView
106+
name={properties.name}
107+
code={properties.code}
108+
properties={properties}
109+
settingVisible={settingVisible}
110+
update={async (values) => {
111+
this.props.model.setProperties(values);
112+
}}/>
113113
);
114114
//需要清空
115115
rootEl.innerHTML = '';

‎admin-pro-ui/src/components/flow/nodes/panel/ButtonPanel.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import FlowUtils from "@/components/flow/utils";
1515
import ScriptModal from "@/components/flow/nodes/panel/ScriptModal";
1616
import {EyeOutlined, ReloadOutlined} from "@ant-design/icons";
1717
import {CustomButtonType} from "@/components/flow/flow/types";
18+
import FlowContext from "@/components/flow/domain/FlowContext";
1819

1920
interface ButtonPanelProps {
2021
id: string;
@@ -93,6 +94,8 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
9394

9495
const [type, setType] = React.useState<string>();
9596

97+
const flowContext = FlowContext.getInstance();
98+
9699
const columns = [
97100
{
98101
title: 'id',
@@ -166,7 +169,7 @@ const ButtonPanel: React.FC<ButtonPanelProps> = (props) => {
166169
options={false}
167170
pagination={false}
168171
request={async () => {
169-
const buttons = FlowUtils.getButtons(props.id);
172+
const buttons = flowContext?.getFlowPanelContext()?.getButtons(props.id) || [];
170173
return {
171174
data: buttons,
172175
total: buttons.length,

0 commit comments

Comments
 (0)