liancheng-bpmn-react

Install

``bash
$ yarn install
`

`bash
$ npm run dev
$ npm run build
`

Options

$3

#### 编辑组件 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 (


保存



``

暴露的事件类型汇总

| 序号 | 事件名 | 说明 | 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