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

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

演示: demo

项目目录

• [build]webpack
  • build.js
  • check-versions.js
  • webpack.config.js
  • webpack.config.server.js
• [src]源码
  • [assets]资源
  • [core]核心
  • [draw]绘图
  • [features]功能
    • [anchor]锚点
    • [background]背景
    • [clipboard]剪贴板(仅支持复制粘贴)
    • [direction]流向
    • [drag]拖拽
    • [edit-name]修改名称
    • [group-panel]分组面板
    • [hand]画布拖拽
    • [hotkey]快捷键
    • [i18n]国际化
    • [record]操作记录
    • [select]选择
    • [snapline]参考线
    • [tooltip]提示
    • [xml]
  • [utils]工具
• [static]静态文件
• .babelrc
• .editorconfig
• .eslintignore
• .eslintrc.js
• .gitignore
• .postcssrc.js
• _config.yml
• package.json
• readme.md

安装

使用 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