Bpmn.js中⽂⽂档（⼀）
Bpmn.js 中⽂⽂档(⼀)
由于⼯作需要（其实不是很需要），在公司项⽬的基础上开源了⼀个基于 bpmn-js + Vue 2.x + ElementUI 的⼀个流程编辑器 , 预览地址 , 欢迎 fork 和 star。
⼀. 引⼊Bpmn.js并初始化建模器
/* 基于vue2.x，省略了template模板与部分data */
import BpmnModeler from"bpmn-js/lib/Modeler"
export default{
methods:{
initModeler(){
this.bpmnModeler =new BpmnModeler({
container: ElementById("bpmn-container")
})
}
},
mounted(){
this.initModeler();
}
}
进⼊到源⽂件Modeler.js，可以到创建Modeler建模器的时候需的参数。
this.bpmnModeler = new BpmnModeler(options: Options）;
interface Options {
container: DomElement; // 渲染容器
width：string | number；// 查看器宽度
height: string | number； // 查看器⾼度
moddleExtensions： object；// 需要⽤的扩展包
modules：<didi.Module>[]; // ⾃定义且需要覆盖默认扩展包的模块列表
additionalModules: <didi.Module>[]; // ⾃定义且与默认扩展包⼀起使⽤的模块列表
}
初始化完成之后，在控制台打印this.bpmnModeler，可以发现BpmnModeler类继承了多个基础类。
Modeler
-> BaseModeler
-> BaseViewer
-> Diagram
-
> Object
Bpmn.js提供的默认扩展包名称，可以在this.bpmnModeler.proto._modules内到，⼀共开放了32个扩展包。扩展包名称可以
在this.bpmnModeler.injector._providers内，包名即键名。
需要调⽤这些扩展包时，可以使⽤如下⽅式：
const xxxModule = ("xxx"); // xxx代表扩展包名称
Modeler实例化之后可直接调⽤的⽅法：
/**
* 返回name对应的模块实例
* @param { string } name 模块名
* @param { boolean } strict 启⽤严格模式。false：缺少的模块解析为null返回；true：抛出异常
*/
(name, strict);
// 创建空⽩流程图
// 内部调⽤了importXML⽅法，读取内部的默认xml字符串
ateDiagram();
// 将图形dom挂载到⽬标节点
this.bpmnModeler.attachTo(parentNode);
// 清空
this.bpmnModeler.clear()
// 销毁
this.bpmnModeler.destroy()
// 脱离dom
this.bpmnModeler.detach()
// 获取流程定义
Definitions()
// 获取扩展功能模块列表
Modules()
/**
* 导⼊解析的定义并呈现BPMN 2.0图。完成后，查看器将结果报告回给提供的回调函数（错误，警告）
* @param { ModdleElement<Definitions> } definitions 模块名
* @param { ModdleElement<BPMNDiagram>|string } [bpmnDiagram] 要呈现的BPMN图或图的ID（如果未提供，将呈现第⼀个） */
this.bpmnModeler.importDefinitions(definitions, bpmnDiagram)
/**
* 导⼊xml（字符串形式），返回导⼊结果
* 后续会取消传⼊回调函数的⽅式
* 推荐使⽤async/await或者链式调⽤
* @param { string } xml 流程图xml字符串
* @param { Promise } callback 回调函数，出错时返回{ warnings，err }
*/
this.bpmnModeler.importXML(xml, callback)
// 注销事件
this.bpmnModeler.off(eventName, callback)
// 注册事件监听，同名将删除以前的，privorty可不传，程序会⾃动替换回调函数
(eventName, priority, callback, target)
// em。。。不了解
this.bpmnModeler.open()
// 保存为svg⽂件，与importXML⽅法⼀样，后续会取消传⼊callback的⽅式
this.bpmnModeler.saveSVG(callback)
// 保存为xml⽂件，与importXML⽅法⼀样，后续会取消传⼊callback的⽅式
this.bpmnModeler.saveXML(callback)
⼆. 基础功能
使⽤过程中，常⽤的组件主要包含：palette 左侧元素栏、 contentPad 元素操作块、 propertiesPanel右侧元素属性编辑栏。
1. palette 与 contentPad
这两个组件在实例化建模器的时候已经渲染到了页⾯上，只需要引⼊对应的样式⽂件即可。
import"bpmn-js/dist/assets/diagram-js.css";
import"bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
import"bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
2. propertiesPanel
使⽤这个组件需要在实例化建模器时修改配置项，并引⼊对应样式⽂件
import"bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";// 右边⼯具栏样式
import propertiesPanelModule from"bpmn-js-properties-panel";
import propertiesProviderModule from"bpmn-js-properties-panel/lib/provider/camunda";
export default{
methods:{width的意思中文翻译
initModeler(){
this.bpmnModeler =new BpmnModeler({
container: ElementById("bpmn-container"),
propertiesPanel:{
parent:"#attrs-panel"
},
additionalModules:[ propertiesPanelModule, propertiesProviderModule ]
})
}
},
mounted(){
this.initModeler();
}
}
3.
在之前，可以在github或者码云上到很多⼤佬的翻译⽂件，将翻译⽂件下载下载保存到本地。
// 1. 创建翻译⽂件 zh.js（命名随意），导出英⽂关键字对应的中⽂翻译
export default{
"Append EndEvent":"追加结束事件",
"Append Gateway":"追加⽹关",
"Append Task":"追加任务",
"Append Intermediate/Boundary Event":"追加中间抛出事件/边界事件",
...
}
// 2. 建⽴翻译模块⽅法customTranslate.js
import translations from"./zh";
export default function customTranslate(template, replacements){
replacements = replacements ||{};
// Translate
template = translations[template]|| template;
// Replace
place(/{([^}]+)}/g,function(_, key){
let str = replacements[key];
if(
translations[replacements[key]]!==null&&
translations[replacements[key]]!=="undefined"
){
// eslint-disable-next-line no-mixed-spaces-and-tabs
str = translations[replacements[key]];
// eslint-disable-next-line no-mixed-spaces-and-tabs
}
return str ||"{"+ key +"}";
});
}
// 3. 在实例化建模器时以⾃定义模块的⽅式传⼊参数
import customTranslate from"./pugins/customTranslate";
export default{
methods:{
initModeler(){
this.bpmnModeler =new BpmnModeler({
container: ElementById("bpmn-container"),
additionalModules:[
{ translate:["value", customTranslate]}
]
})
}
}
}
翻译⽂件来⾃码云，但是忘记了作者的信息了，如果作者发现请您联系我更改或者删除4. 其他功能（⾮⾃定义的功能模块配置项）
添加键盘快捷键：
this.bpmnModeler =new BpmnModeler({
container: ElementById("bpmn-container"),
keyboard:{
bindTo: document // 或者window，注意与外部表单的键盘监听事件是否冲突
}
});
三. 事件
Bpmn.js 提供了EventBus事件总线模块来管理监听事件，并预设了244个事件。
下⾯的元素对象指包含element元素的对象，其他属性不定（部分事件返回的对象也不包含element）。
“ - ” 短横线表⽰暂时没有到何时触发该事件
以下事件均可使⽤(eventName, callback)或者(eventName, callback)的形式注册。
// 通过事件总线发出的事件
interface InternalEvent {
type:string;// 发⽣的事件名称，但是很快会被置为undefined
element: Shape | Connection;
elements: Element[];
shape: Shape;
context: object;// 有点复杂，有兴趣的朋友可以研究
gfx?: SVGElement;
svg?: SVGElement;
viewport?: SVGElement;
viewbox?: Viewbox;
pad?: object;// 见 Element.pad
}
interface Element {
element: Shape | Connection;
gfx?: SVGElement;
pad?:{
id:string;
html: DOMElement;
position:{ right:number; top:number};
scale:{ max:number; min:number};
show: object |null;
type:string;// ⼀般是"context-pad"
}
}
interface Elements {
elements:Array<Shape | Connection>
}
interface Canvas {
svg?: SVGElement;
viewport?: SVGElement;
}
interface Viewbox {
viewbox:{
height:number;
width:number;
x:number;
y:number;
inter: object;// 包含x,y,width,height的⼀个对象
outer: object;// 包含x,y,width,height的⼀个对象
scale:number;// 当前缩放⽐例（⼩数）
}
}
序
号
事件名说明callback参数
0“diagram.destroy”流程编辑器销毁event:InternalEvent
1“render.shape”调⽤GraphicsFactory.drawShape时触发，开
始渲染形状
2“tion”
调⽤GraphicsFactory.drawConnection时触

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。