Web 形式的 bpmn 设计器 BPD-Core

MIT
跨平台
2019-05-29
Creamtank

BPDCore v1.0 说明文档

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]背景
      • [direction]流向
      • [drag]拖拽
      • [group-panel]分组面板
      • [hotkey]快捷键
      • [i18n]国际化
      • [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'],
  ...
})

配置

参数 说明 类型 默认值
container 容器 string -
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

分组面板(group-panel)

参数 说明 类型 默认值
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
getFrontElement 获取选中元素之前的元素 element return shapeData
getFrontElements 获取选中元素之前的全部元素 element return [shapeData]
getFrontElementsByBpmn 根据类型获取选中元素之前的元素 element,bpmnName return [shapeData]
updateProperties 更新元素属性 shapeId,data 目前仅支持标题和扩展属性
updateProcessProperties 更新流程属性 data 目前仅支持标题和扩展属性
updataLineStyle 更新图形边框颜色 id, style  
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
用户任务 UserTask Task
系统任务 ServiceTask Task
排他网关 ExclusiveGateway Gateway
包容网关 InclusiveGateway Gateway
复杂网关 ComplexGateway Gateway
并行网关 ParallelGateway Gateway
调用子流程 CallActivity CallActivity
结束事件 EndEvent EndEvent
终止事件 TerminateEndEvent EndEvent
连线 SequenceFlow -

其他

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

未来

  • 画布拖拽
  • 操作记录
  • 其他快捷键
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

BPMN学习

http://demo.bpmn.io/new BPMN(Business Process Modeling Notation),业务流程建模与标注,包括这些图元如何组合成一个业务流程图(Business Process Diagram) 1)流对象(Flow Objects) ...

2016/09/12 13:54
186
0
OD使用技巧

OllyDbg 常用快捷热键 聆风听雨整理 =============================================================== 打开一个新的可执行程序 (F3) 重新运行当前调试的程序 (Ctrl+F2) 当前调试的程序 (A...

2014/02/11 16:07
47
0
Bochs调试

1:bochs虚拟机启动调试 bochsdbg -f bochsrc.bxrc 启动失败原因见bochs启动, 注:bochsdbg启动配置文件注释 display_library: sdl 启动后bash界面 linux0.00.bxrc =======================...

2016/11/25 13:29
85
0
格式化文件模版xml

格式化文件模版xml

2016/06/28 10:44
16
0
jspxcms bug表

缺少文件列表: import com.jspxcms.core.domain.QAttribute; import com.jspxcms.core.domain.QComment; import com.jspxcms.core.domain.QAttribute; import com.jspxcms.core.domain.QInfo...

2016/12/28 16:23
58
0
聊聊WebClient的LoadBalance支持

## 序 本文主要研究一下WebClient的LoadBalance支持 ## 代码实例 ### 配置 ``` @Configuration public class WebClientConfig { @Autowired private LoadBalancerExchangeFilterFunction lb...

2018/04/29 13:54
437
0
Linux core文件

1. core文件的简单介绍 在一个程序崩溃时,它一般会在指定目录下生成一个core文件。core文件仅仅是一个内存映象(同时加上调试信息),主要是用来调试的。 2. 开启或关闭core文件的生成 用以下...

2013/06/26 17:22
103
2

没有更多内容

加载失败,请刷新页面

返回顶部
顶部