Bpmn.js 自定义描述文件使用说明
MiyueFE 人气:0前言
在使用 bpmn-js 绘制流程图时，可能会存在需要开发者自己定义属性或者元素的情况，为了保证符合官方定义，对官方文档进行了汉化说明。以下说明基于个人理解，可能与真实作用有出入，希望大家指出不正确或者意义不明的地方，我好加以改正，谢谢！
说明文件配置属性
原文见 bpmn 官方仓库 bpmn-io/moddle 。
自定义说明文件demo
说明文件 SelfDescriptor.json
{
"name": "self",
"uri": "https://self",
"prefix": "se",
"xml": {
"tagAlias": "lowerCase"
},
"types": [
{
"name": "AttrOne",
"superClass": [
"Element"
],
"properties": [
{
"name": "name",
"type": "String",
"isAttr": "true"
},
{
"name": "values",
"type": "AttrOneProp",
"isMany": true
}
]
},
{
"name": "AttrOneProp",
"superClass": [
"Element"
],
"meta": {
"allowedIn": [ "*" ]
},
"properties": [
{
"name": "propName",
"type": "String",
"isAttr": true
},
{
"name": "value",
"type": "String",
"isAttr": true
}
]
},
{
"name": "AttrTwo",
"superClass": [
"Element"
],
"meta": {
"allowedIn": [ "*" ]
},
"properties": [
{
"name": "value",
"type": "String",
"isBody": true
}
]
}
]
}
使用
import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';
// 侧边栏
import propertiesPanelModule from 'bpmn-js-properties-panel';
// camunda 侧边栏内容构建器
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
// camunda 属性解析文件
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
// 自定义的属性解析文件
import SelfDescriptor from "./SelfDescriptor.json";
// 省略部分内容...
// 初始化 modeler
var bpmnModeler = new BpmnModeler({
container: canvas,
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
moddleExtensions: {
// 使用引入的属性解析文件
camunda: camundaModdleDescriptor,
self: SelfDescriptor
}
});
// 使用与创建自定义属性标签
bpmnModeler.on("element.click", function (event, eventObj) {
const moddle = bpmnModeler.get("moddle");
// 自定义属性1
const attrOne = moddle.create("se:AttrOne", { name: "testAttrOne", values: [] });
// 自定义属性子属性
const attrOneProp = moddle.create("se:AttrOneProp", {propName: "propName1", value: "propValue1"})
// 自定义属性2
const attrTwo = moddle.create("se:AttrTwo", { value: "testAttrTwo" })
// 原生属性Properties
const props = moddle.create("camunda:Properties", { values: [] });
// 原生属性Properties的子属性
const propItem = moddle.create("camunda:Property", { name: "原生子属性name", values: "原生子属性value" });
// 原生扩展属性数组
const extensions = moddle.create("bpmn:ExtensionElements", { values: [] })
// 开始节点插入原生属性
if (eventObj.element.type === "bpmn:StartEvent") {
props.values.push(propItem);
extensions.values.push(props);
}
// 任务节点插入多种属性
if (eventObj.element.type === "bpmn:Task") {
props.values.push(propItem, propItem);
attrOne.values.push(attrOneProp);
extensions.values.push(props, attrOne, attrTwo);
}
// root插入自定义属性
if (eventObj.element.type === "bpmn:Process") {
attrOne.values.push(attrOneProp, attrOneProp);
extensions.values.push(attrOne);
}
bpmnModeler.get("modeling").updateProperties(eventObj.element, {
extensionElements: extensions
});
})
结果
只截取了流程相关的部分
<bpmn2:process id="Process_1" isExecutable="false">
<bpmn2:extensionElements>
<se:attrOne name="testAttrOne">
<se:attrOneProp propName="propName1" value="propValue1" />
<se:attrOneProp propName="propName1" value="propValue1" />
</se:attrOne>
</bpmn2:extensionElements>
<bpmn2:startEvent id="StartEvent_1">
<bpmn2:extensionElements>
<camunda:properties>
<camunda:property name="原生子属性name" values="原生子属性value" />
</camunda:properties>
</bpmn2:extensionElements>
<bpmn2:outgoing>Flow_066c7c5</bpmn2:outgoing>
</bpmn2:startEvent>
<bpmn2:task id="Activity_0ghpzc3" name="1">
<bpmn2:extensionElements>
<camunda:properties>
<camunda:property name="原生子属性name" values="原生子属性value" />
<camunda:property name="原生子属性name" values="原生子属性value" />
</camunda:properties>
<se:attrOne name="testAttrOne">
<se:attrOneProp propName="propName1" value="propValue1" />
</se:attrOne>
<se:attrTwo>testAttrTwo</se:attrTwo>
</bpmn2:extensionElements>
<bpmn2:incoming>Flow_066c7c5</bpmn2:incoming>
<bpmn2:outgoing>Flow_0qmpzc7</bpmn2:outgoing>
</bpmn2:task>
<bpmn2:sequenceFlow id="Flow_066c7c5" sourceRef="StartEvent_1" targetRef="Activity_0ghpzc3" />
<bpmn2:task id="Activity_1gm4zj6" name="2">
<bpmn2:extensionElements>
<camunda:properties>
<camunda:property name="原生子属性name" values="原生子属性value" />
<camunda:property name="原生子属性name" values="原生子属性value" />
</camunda:properties>
<se:attrOne name="testAttrOne">
<se:attrOneProp propName="propName1" value="propValue1" />
</se:attrOne>
<se:attrTwo>testAttrTwo</se:attrTwo>
</bpmn2:extensionElements>
<bpmn2:incoming>Flow_0qmpzc7</bpmn2:incoming>
<bpmn2:outgoing>Flow_03hry06</bpmn2:outgoing>
</bpmn2:task>
<bpmn2:sequenceFlow id="Flow_0qmpzc7" sourceRef="Activity_0ghpzc3" targetRef="Activity_1gm4zj6" />
<bpmn2:task id="Activity_0ahhdt5" name="3">
<bpmn2:extensionElements>
<camunda:properties>
<camunda:property name="原生子属性name" values="原生子属性value" />
<camunda:property name="原生子属性name" values="原生子属性value" />
</camunda:properties>
<se:attrOne name="testAttrOne">
<se:attrOneProp propName="propName1" value="propValue1" />
</se:attrOne>
<se:attrTwo>testAttrTwo</se:attrTwo>
</bpmn2:extensionElements>
<bpmn2:incoming>Flow_03hry06</bpmn2:incoming>
<bpmn2:outgoing>Flow_1h7pp7l</bpmn2:outgoing>
</bpmn2:task>
<bpmn2:sequenceFlow id="Flow_03hry06" sourceRef="Activity_1gm4zj6" targetRef="Activity_0ahhdt5" />
<bpmn2:endEvent id="Event_1eofx2i">
<bpmn2:incoming>Flow_1h7pp7l</bpmn2:incoming>
</bpmn2:endEvent>
<bpmn2:sequenceFlow id="Flow_1h7pp7l" sourceRef="Activity_0ahhdt5" targetRef="Event_1eofx2i" />
</bpmn2:process>
后记
由于工作需要（其实不是很需要），在公司项目的基础上开源了一个基于 bpmn-js + Vue 2.x + ElementUI 的一个流程编辑器 Bpmn Process Designer
预览地址 MiyueFE blog,
加载全部内容