0.0.11 • Published 2 years ago

liancheng-bpmn-react v0.0.11

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

liancheng-bpmn-react

Install

$ yarn install
$ npm run dev
$ npm run build

Options

example

编辑组件 BpmnEditor

nametyperemarkrequired
classNamestringcss 类名false
heightnumber编辑框高度,默认 600pxtrue
centerboolean是否聚焦到中心点,默认是 truefalse
valuestringxml 文件false
onRef()=>void外部按钮触发组件内行为,见下false
onClickNode(elementInfo:any,value:string) => any;点击节点触发监听事件false
onXMLChange()=>void当 xml 变化是触发false

查看组件 BpmnViewer

nametyperemarkrequired
classNamestringcss 类名false
heightnumber编辑框高度,默认 600pxtrue
centerboolean是否聚焦到中心点,默认是 truefalse
valuestringxml 文件false
onRef()=>void外部按钮触发组件内行为,见下false
onClickNode(elementInfo:any,value:string) => any;点击节点触发监听事件false
useMiniMapboolean使用小地图,默认 falsefalse
flowData'{finishedList: string[];rejectedList: string[];doingList: string[]}[]'颜色标注 id 数组false
onXMLChange()=>void当 xml 变化是触发false

onRef 支持的回调

nametyperemark
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

0.0.11

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago