Bpmn.js?自定義描述文件使用說明

更新時間：2022年10月27日 14:46:26 作者：MiyueFE

這篇文章主要為大家介紹了Bpmn.js?自定義描述文件使用說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在使用 bpmn-js 繪制流程圖時，可能會存在需要開發(fā)者自己定義屬性或者元素的情況，為了保證符合官方定義，對官方文檔進行了漢化說明。以下說明基于個人理解，可能與真實作用有出入，希望大家指出不正確或者意義不明的地方，我好加以改正，謝謝！

說明文件配置屬性

原文見 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';
// 側(cè)邊欄
import propertiesPanelModule from 'bpmn-js-properties-panel';
// camunda 側(cè)邊欄內(nèi)容構(gòu)建器
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";
// 省略部分內(nèi)容...
// 初始化 modeler
var bpmnModeler = new BpmnModeler({
  container: canvas,
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  moddleExtensions: {
    // 使用引入的屬性解析文件
    camunda: camundaModdleDescriptor,
    self: SelfDescriptor
  }
});
// 使用與創(chuàng)建自定義屬性標簽
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" });
    // 原生擴展屬性數(shù)組
    const extensions = moddle.create("bpmn:ExtensionElements", { values: [] })
    // 開始節(jié)點插入原生屬性
    if (eventObj.element.type === "bpmn:StartEvent") {
      props.values.push(propItem);
      extensions.values.push(props);
    }
    // 任務(wù)節(jié)點插入多種屬性
    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
    });
})

結(jié)果

只截取了流程相關(guān)的部分

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