Bpmn.js 提供了EventBus事件总线模块来管理监听事件，并预设了许多事件
// 通过事件总线发出的事件
interface InternalEvent {
type: string; // 发生的事件名称，但是很快会被置为undefined
element: Shape | Connection;
elements: Element[];
shape: Shape;
context: object; // 有点复杂，有兴趣的朋友可以研究
gfx?: SVGElement;
svg?: SVGElement;
viewport?: SVGElement;
viewbox?: Viewbox;
}
interface Element {
element: Shape | Connection;
gfx?: SVGElement;
}
interface Elements {
elements: Array<Shape | Connection>
}
interface Canvas {
svg?: SVGElement;
viewport?: SVGElement;
}
interface Viewbox {
viewbox: {
height: number;
width: number;
x: number;
y: number;
inter: object; // 包含x,y,width,height的一个对象
outer: object; // 包含x,y,width,height的一个对象
scale: number; // 当前缩放比例（小数）
}
}以下事件均可使用this.bpmnModeler.on(eventName, callback)或者eventBus.on(eventName, callback)的形式注册
序号 | 事件 | 说明 | 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 |
评论区