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