bpmn.js Event 事件列表
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 |
内容来源于：https://github.com/miyuesc/blog/issues/20 ，感谢作者整理
