BPDCore v1.1.0-beta.5 使用文档

BPD-Core 是 web 形式的 bpmn 设计器，BPD-Core 仅提供建模和渲染， 不提供相应页面

npm npm

演示: demo

项目目录

安装

使用 npm 安装

npm install bpd-core --save

引入

import BPDCore from 'bpd-core'
import 'bpd-core/dist/css/bpd-core.css';

初始化

new BPDCore({
  container: '#canvas',
  readonly: true,
  extensions: {
      t: Extension
  },
  filter: ['ServiceTask'],
  ...
})

键盘操作

操作 说明
Ctrl+Z 撤销
Ctrl+Y 重做
Ctrl+C 复制
Ctrl+V 粘贴

配置

参数 说明 类型 默认值
container 容器 string -
definition 流程定义(xml) string default
readonly 只读 boolean false
extensions 扩展属性(参考 extensions.js) { key: json } -
filter 需要过滤的节点类型 [bpmnName] []
local 国际化 “zh_CN”|”zh_TW”|”en_US” zh_CN
bpmnStyle 节点样式 {bpmnName: {}} -
shapeStyle 特定节点样式 [{nodeId, fillStyle}] -
config 功能配置 {} -

功能配置

锚点(anchor)

参数 说明 类型 默认值
size 尺寸 number 8
color 颜色 string #ec5343

背景(background)

参数 说明 类型 默认值
show 显示 boolean true
size 网关间距 number 15

剪贴板(clipboard)

参数 说明 类型 默认值
filter 节点类型黑名单 array[bpmnName] []
suffix 粘贴名称后缀 string ’’

修改名称(editName)

参数 说明 类型 默认值
borderColor 文本框边框颜色 string #999999
onEdited 编辑完成回调事件 function(shapeData) -

分组面板(groupPanel)

参数 说明 类型 默认值
width 图形画布宽度 number 30
height 图形画布高度 number 30

选择(select)

参数 说明 类型 默认值
color 选中颜色 string #ec5343
onSelected 选中方法 function(shapeData) -

API

名称 说明 参数 备注
init 初始化设计器 callback 回调函数
destroy 销毁设计器 - -
createShape 创建图形 event,callback {bpmnName: 节点名称},回调函数
getAllElement 获取全部元素 - return [shapeData]
getRootElement 获取根元素 - return processData
getCurrentElements 获取当前选中元素 - return [shapeData]
getFrontElement 获取选中元素之前的元素 element return shapeData
getFrontElements 获取选中元素之前的全部元素 element return [shapeData]
getFrontElementsByBpmn 根据类型获取选中元素之前的元素 element,bpmnName return [shapeData]
handleClipboardEvent 触发剪贴板事件 ‘copy’ || ‘paste’ -
updateProperties 更新元素属性 shapeId,data 目前仅支持标题和扩展属性
updateProcessProperties 更新流程属性 data 目前仅支持标题和扩展属性
updataLineStyle 更新图形边框颜色 id, style -
activateSelect 激活选择模式 - -
destroy 销毁设计器 - -
importBpmn 导入解析 xml 文件 xml,callback 回调函数
exportBpmn 导出 xml callback 回调函数

数据结构(shapeData)

{
  // 节点类型
  "bpmnName": "StartEvent",
  // 扩展属性
  "extensions": [
    {
      "name": "t:test1",
      "value": "测试1"
    }
  ],
  // 分组类型
  "groupName": "StartEvent",
  // id
  "id": "obj_1n567qa",
  //
  "name": "test"
}

节点类型

开始事件

名称 bpmnName groupName
开始事件 StartEvent StartEvent
名称 shapeName 支持
开始事件 startEvent true
消息开始事件 messageStartEvent  
定时开始事件 timerStartEvent  
升级开始事件 escalationStartEvent  
错误开始事件 errorStartEvent  
条件开始事件 conditionalStartEvent  
补偿开始事件 compensationStartEvent  
信号开始事件 signalStartEvent  
多重开始事件 multipleStartEvent  
并行开始事件 parallelStartEvent  

其他

名称 bpmnName groupName
用户任务 UserTask Task
系统任务 ServiceTask Task
排他网关 ExclusiveGateway Gateway
包容网关 InclusiveGateway Gateway
复杂网关 ComplexGateway Gateway
并行网关 ParallelGateway Gateway
调用子流程 CallActivity CallActivity
结束事件 EndEvent EndEvent
终止事件 TerminateEndEvent EndEvent
连线 SequenceFlow -

其他

详细 demo 代码参考 static/index.html

未来

鸣谢

moddle-xml

processon