BPD-Core是web形式的bpmn设计器，BPD-Core仅提供建模和渲染，不提供相应页面
演示:demo
项目目录[build]webpackbuild.jscheck-versions.jswebpack.config.jswebpack.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.ymlpackage.jsonreadme.md安装使用npm安装
npminstallbpd-core--save引入importBPDCorefrom'bpd-core'import'bpd-core/dist/css/bpd-core.css';初始化newBPDCore({container:'#canvas',readonly:true,extensions:{t:Extension},filter:['ServiceTask'],...})配置参数说明类型默认值container容器string-readonly只读booleanfalseextensions扩展属性(参考extensions.js){key:json}-filter需要过滤的节点类型[bpmnName][]local国际化"zh_CN"|"zh_TW"|"en_US"zh_CNbpmnStyle节点样式{bpmnName:{}}-shapeStyle特定节点样式[{nodeId,fillStyle}]-config功能配置{}-功能配置锚点(anchor)参数说明类型默认值size尺寸number8color颜色string#ec5343背景(background)参数说明类型默认值show显示booleantruesize网关间距number15分组面板(group-panel)参数说明类型默认值width图形画布宽度number30height图形画布高度number30选择(select)参数说明类型默认值color选中颜色string#ec5343onSelected选中方法function(shapeData)-API名称说明参数备注init初始化设计器callback回调函数destroy销毁设计器 createShape创建图形event,callback{bpmnName:节点名称},回调函数getAllElement获取全部元素-return[shapeData]getRootElement获取根元素-returnprocessDatagetFrontElement获取选中元素之前的元素elementreturnshapeDatagetFrontElements获取选中元素之前的全部元素elementreturn[shapeData]getFrontElementsByBpmn根据类型获取选中元素之前的元素element,bpmnNamereturn[shapeData]updateProperties更新元素属性shapeId,data目前仅支持标题和扩展属性updateProcessProperties更新流程属性data目前仅支持标题和扩展属性updataLineStyle更新图形边框颜色id,style destroy销毁设计器--importBpmn导入解析xml文件xml,callback回调函数exportBpmn导出xmlcallback回调函数数据结构(shapeData){//节点类型"bpmnName":"StartEvent",//扩展属性"extensions":[{"name":"t:test1","value":"测试1"}],//分组类型"groupName":"StartEvent",//id"id":"obj_1n567qa",//"name":"test"}支持节点名称bpmnNamegroupName开始事件StartEventStartEvent用户任务UserTaskTask系统任务ServiceTaskTask排他网关ExclusiveGatewayGateway包容网关InclusiveGatewayGateway复杂网关ComplexGatewayGateway并行网关ParallelGatewayGateway调用子流程CallActivityCallActivity结束事件EndEventEndEvent终止事件TerminateEndEventEndEvent连线SequenceFlow-其他详细demo代码参考static/index.html
未来画布拖拽操作记录其他快捷键
评论