liancheng-bpmn-react

Install

$ yarn install

$ npm run dev
$ npm run build

Options

example

编辑组件 BpmnEditor

name	type	remark	required
className	string	css 类名	false
height	number	编辑框高度，默认 600px	true
center	boolean	是否聚焦到中心点，默认是 true	false
value	string	xml 文件	false
onRef	()=>void	外部按钮触发组件内行为，见下	false
onClickNode	(elementInfo:any,value:string) => any;	点击节点触发监听事件	false
onXMLChange	()=>void	当 xml 变化是触发	false

---

查看组件 BpmnViewer

name	type	remark	required
className	string	css 类名	false
height	number	编辑框高度，默认 600px	true
center	boolean	是否聚焦到中心点，默认是 true	false
value	string	xml 文件	false
onRef	()=>void	外部按钮触发组件内行为，见下	false
onClickNode	(elementInfo:any,value:string) => any;	点击节点触发监听事件	false
useMiniMap	boolean	使用小地图，默认 false	false
flowData	'{finishedList: string[];rejectedList: string[];doingList: string[]}[]'	颜色标注 id 数组	false
onXMLChange	()=>void	当 xml 变化是触发	false

---

onRef 支持的回调

name	type	remark
onExport	()=>any	用来导出 xml
onReset	()=>any	重置

实际使用例子

import { Button } from 'antd';
import { BpmnEditor, BpmnViewer } from 'liancheng-bpmn-react';
import React, { useRef, useState } from 'react';

import './index.less';


export default () => {
  const [value, setValue] = useState('');

  const childRef = useRef();
  const onSaveBtn = async () => {
    childRef?.current?.onReset();
    const xmlValue: string = await childRef?.current?.onExport();
  };

  const onClickNode = (data: any) => {
    console.log('节点点击事件监听', data);
  };
  return (
    <PageContainer back>
      <Button onClick={onSaveBtn} type={'primary'}>
        保存
      </Button>
      <div className={'box'}>
        <div className={'box-bpmnBox'}>
          <BpmnEditor
            onClickNode={onClickNode}
            onRef={childRef}
            value={xml}
            height={600}
            center
          />
        </div>

        <div className={'box-pannel'}>1</div>
      </div>
      <Button onClick={onSaveBtn}>保存</Button>
      <div>
        <BpmnViewer
          onClickNode={onClickNode}
          onRef={childRef}
          value={xml}
          height={600}
          center
        />
      </div>
    </PageContainer>
  );
};

暴露的事件类型汇总

序号	事件名	说明	callback 参数
0	"diagram.destroy"	流程编辑器销毁	event:InternalEvent
1	"render.shape"	-
2	"render.connection"	-
3	"render.getShapePath"	-
4	"render.getConnectionPath"	-
5	"diagram.init"	指示画布已准备好在其上进行绘制
6	"shape.added"	已更新到 xml 内，触发渲染方法，返回值为插入的新元素	event:InternalEvent, element: Element
7	"connection.added"	已更新到 xml 内，触发渲染方法，返回值为插入的新元素	event:InternalEvent, element: Element
8	"shape.removed"	形状移除完成，返回值为被移除元素	event:InternalEvent, element: Element
9	"connection.removed"	连线移除完成，返回值为被移除元素
10	"elements.changed"	元素发生改变并更改完成	event: InternalEvent, element: Elements
11	"diagram.clear"	流程编辑器元素及画布已清空	event:InternalEvent
12	"canvas.destroy"	画布销毁	event:InternalEvent
13	"canvas.init"	画布初始化完成
14	"shape.changed"	形状属性更新，返回当前元素	event:InternalEvent, element: Element
15	"connection.changed"	连线属性更新，返回当前元素	event:InternalEvent, element: Element
16	"interactionEvents.createHit"
17	"interactionEvents.updateHit"
18	"shape.remove"	形状被选中移除，返回被移除的元素对象	event:InternalEvent, element: Element
19	"connection.remove"	连线被选中移除	event:InternalEvent, element: Element
20	"element.hover"	鼠标移动到元素上，返回鼠标位置处元素对象	event:InternalEvent, element: Element
21	"element.out"	鼠标移出元素，返回鼠标最近移入的元素对象	event:InternalEvent, element: Element
22	"selection.changed"	选中元素变化时，返回新选中的元素对象	event:InternalEvent, element: Element
23	"create.end"	从 palette 中新建的元素创建完成（不清楚为什么有两个相同的参数）	event:InternalEvent, event:InternalEvent
24	"connect.end"	从 palette 中或者从选中节点中新建的连线元素创建完成（不清楚为什么有两个相同的参数）	event:InternalEvent, event:InternalEvent
25	"shape.move.end"	形状元素移动结束后	event:InternalEvent, element: Element
26	"element.click"	元素单击事件	event:InternalEvent, element: Element
27	"canvas.viewbox.changing"	视图缩放过程中	event:InternalEvent
28	"canvas.viewbox.changed"	视图缩放完成	event:InternalEvent, viewbox: Viewbox
29	"element.changed"	元素发生改变时触发，返回发生改变的元素	event:InternalEvent, element: Element
30	"element.marker.update"
31	"attach"
32	"detach"
33	"editorActions.init"
34	"keyboard.keydown"	键盘按键按下
35	"element.mousedown"	鼠标在元素上按下时触发	event:InternalEvent, element: Element
36	"commandStack.connection.start.canExecute"
37	"commandStack.connection.create.canExecute"
38	"commandStack.connection.reconnect.canExecute"
39	"commandStack.connection.updateWaypoints.canExecute"
40	"commandStack.shape.resize.canExecute"
41	"commandStack.elements.create.canExecute"
42	"commandStack.elements.move.canExecute"
43	"commandStack.shape.create.canExecute"
44	"commandStack.shape.attach.canExecute"
45	"commandStack.element.copy.canExecute"
46	"shape.move.start"	形状开始移动	event:InternalEvent, element: Element
47	"shape.move.move"
48	"elements.delete"	元素被删除
49	"tool-manager.update"
50	"i18n.changed"
51	"drag.move"
52	"contextPad.create"
53	"palette.create"
54	"autoPlace.end"
55	"autoPlace"
56	"drag.start"
57	"drag.init"
58	"drag.cleanup"
59	"commandStack.shape.create.postExecuted"
60	"commandStack.elements.move.postExecuted"
61	"commandStack.shape.toggleCollapse.postExecuted"
62	"commandStack.shape.resize.postExecuted"
63	"commandStack.element.autoResize.canExecute"
64	"bendpoint.move.hover"
65	"bendpoint.move.out"
66	"bendpoint.move.cleanup"
67	"bendpoint.move.end"
68	"connectionSegment.move.start"
69	"connectionSegment.move.move"
70	"connectionSegment.move.hover"
71	"connectionSegment.move.out"
72	"connectionSegment.move.cleanup"
73	"connectionSegment.move.cancel"
74	"connectionSegment.move.end"
75	"element.mousemove"
76	"element.updateId"
77	"bendpoint.move.move"
78	"bendpoint.move.start"
79	"bendpoint.move.cancel"
80	"connect.move"
81	"connect.hover"
82	"connect.out"
83	"connect.cleanup"
84	"create.move"
85	"create.hover"
86	"create.out"
87	"create.cleanup"
88	"create.init"
89	"copyPaste.copyElement"
90	"copyPaste.pasteElements"
91	"moddleCopy.canCopyProperties"
92	"moddleCopy.canCopyProperty"
93	"moddleCopy.canSetCopiedProperty"
94	"copyPaste.pasteElement"
95	"popupMenu.getProviders.bpmn-replace"
96	"contextPad.getProviders"
97	"resize.move"
98	"resize.end"
99	"commandStack.shape.resize.preExecute"
100	"spaceTool.move"
101	"spaceTool.end"
102	"create.start"
103	"commandStack.connection.create.postExecuted"
104	"commandStack.connection.layout.postExecuted"
105	"shape.move.init"
106	"resize.start"
107	"resize.cleanup"
108	"directEditing.activate"
109	"directEditing.resize"
110	"directEditing.complete"
111	"directEditing.cancel"
112	"commandStack.connection.updateWaypoints.postExecuted"
113	"commandStack.label.create.postExecuted"
114	"commandStack.elements.create.postExecuted"
115	"commandStack.shape.append.preExecute"
116	"commandStack.shape.move.postExecute"
117	"commandStack.elements.move.preExecute"
118	"commandStack.connection.create.postExecute"
119	"commandStack.connection.reconnect.postExecute"
120	"commandStack.shape.create.executed"
121	"commandStack.shape.create.reverted"
122	"commandStack.shape.create.preExecute"
123	"shape.move.hover"
124	"global-connect.hover"
125	"global-connect.out"
126	"global-connect.end"
127	"global-connect.cleanup"
128	"connect.start"
129	"commandStack.shape.create.execute"
130	"commandStack.shape.create.revert"
131	"commandStack.shape.create.postExecute"
132	"commandStack.elements.create.preExecute"
133	"commandStack.elements.create.revert"
134	"commandStack.elements.create.postExecute"
135	"commandStack.connection.layout.executed"
136	"commandStack.connection.create.executed"
137	"commandStack.connection.layout.reverted"
138	"commandStack.shape.move.executed"
139	"commandStack.shape.delete.executed"
140	"commandStack.connection.move.executed"
141	"commandStack.connection.delete.executed"
142	"commandStack.shape.move.reverted"
143	"commandStack.shape.delete.reverted"
144	"commandStack.connection.create.reverted"
145	"commandStack.connection.move.reverted"
146	"commandStack.connection.delete.reverted"
147	"commandStack.canvas.updateRoot.executed"
148	"commandStack.canvas.updateRoot.reverted"
149	"commandStack.shape.resize.executed"
150	"commandStack.shape.resize.reverted"
151	"commandStack.connection.reconnect.executed"
152	"commandStack.connection.reconnect.reverted"
153	"commandStack.connection.updateWaypoints.executed"
154	"commandStack.connection.updateWaypoints.reverted"
155	"commandStack.element.updateAttachment.executed"
156	"commandStack.element.updateAttachment.reverted"
157	"commandStack.shape.delete.postExecute"
158	"commandStack.canvas.updateRoot.postExecute"
159	"spaceTool.selection.init"
160	"spaceTool.selection.ended"
161	"spaceTool.selection.canceled"
162	"spaceTool.ended"
163	"spaceTool.canceled"
164	"spaceTool.selection.end"
165	"commandStack.shape.delete.postExecuted"
166	"commandStack.connection.create.preExecuted"
167	"commandStack.shape.replace.preExecuted"
168	"bpmnElement.added"
169	"commandStack.element.updateProperties.postExecute"
170	"commandStack.label.create.postExecute"
171	"commandStack.connection.layout.postExecute"
172	"commandStack.connection.updateWaypoints.postExecute"
173	"commandStack.shape.replace.postExecute"
174	"commandStack.shape.resize.postExecute"
175	"shape.move.rejected"
176	"create.rejected"
177	"elements.paste.rejected"
178	"commandStack.shape.delete.preExecute"
179	"commandStack.connection.reconnect.preExecute"
180	"commandStack.element.updateProperties.postExecuted"
181	"commandStack.shape.replace.postExecuted"
182	"commandStack.shape.toggleCollapse.executed"
183	"commandStack.shape.toggleCollapse.reverted"
184	"spaceTool.getMinDimensions"
185	"commandStack.connection.delete.preExecute"
186	"commandStack.canvas.updateRoot.preExecute"
187	"commandStack.spaceTool.preExecute"
188	"commandStack.lane.add.preExecute"
189	"commandStack.lane.resize.preExecute"
190	"commandStack.lane.split.preExecute"
191	"commandStack.elements.delete.preExecute"
192	"commandStack.shape.move.preExecute"
193	"commandStack.spaceTool.postExecuted"
194	"commandStack.lane.add.postExecuted"
195	"commandStack.lane.resize.postExecuted"
196	"commandStack.lane.split.postExecuted"
197	"commandStack.elements.delete.postExecuted"
198	"commandStack.shape.move.postExecuted"
199	"saveXML.start"
200	"commandStack.connection.create.preExecute"
201	"commandStack.connection.move.preExecute"
202	"shape.move.out"
203	"shape.move.cleanup"
204	"commandStack.elements.move.preExecuted"
205	"commandStack.shape.delete.execute"
206	"commandStack.shape.delete.revert"
207	"spaceTool.selection.start"
208	"spaceTool.selection.move"
209	"spaceTool.selection.cleanup"
210	"spaceTool.cleanup"
211	"lasso.selection.init"
212	"lasso.selection.ended"
213	"lasso.selection.canceled"
214	"lasso.ended"
215	"lasso.canceled"
216	"lasso.selection.end"
217	"lasso.end"
218	"lasso.start"
219	"lasso.move"
220	"lasso.cleanup"
221	"hand.init"
222	"hand.ended"
223	"hand.canceled"
224	"hand.move.ended"
225	"hand.move.canceled"
226	"hand.end"
227	"hand.move.move"
228	"hand.move.end"
229	"global-connect.init"
230	"global-connect.ended"
231	"global-connect.canceled"
232	"global-connect.drag.ended"
233	"global-connect.drag.canceled"
234	"palette.getProviders"
235	"propertiesPanel.isEntryVisible"
236	"propertiesPanel.isPropertyEditable"
237	"root.added"
238	"propertiesPanel.changed"
239	"propertiesPanel.resized"
240	"elementTemplates.changed"
241	"canvas.resized"
242	"import.parse.complete"	读取模型（xml）完成
243	"commandStack.changed"	发生任意可撤销/恢复操作时触发，可用来实时更新 xml

LICENSE

MIT