前言

Q: bpmn.js是什么? ???

bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器, 使得畫(huà)流程圖的功能在前端來(lái)完成.

Q: 我為什么要寫(xiě)該系列的教材? ???

因?yàn)楣緲I(yè)務(wù)的需要因而要在項(xiàng)目中使用到bpmn.js,但是由于bpmn.js的開(kāi)發(fā)者是國(guó)外友人, 因此國(guó)內(nèi)對(duì)這方面的教材很少, 也沒(méi)有詳細(xì)的文檔. 所以很多使用方式很多坑都得自己去找.在將其琢磨完之后, 決定寫(xiě)一系列關(guān)于它的教材來(lái)幫助更多bpmn.js的使用者或者是期于找到一種好的繪制流程圖的開(kāi)發(fā)者. 同時(shí)也是自己對(duì)其的一種鞏固.

由于是系列的文章, 所以更新的可能會(huì)比較頻繁, 您要是無(wú)意間刷到了且不是您所需要的還請(qǐng)諒解??.

求贊??, 求Start ??, 求Fork ??, 希望能對(duì)你有一點(diǎn)小小的幫助.

所有教材的github地址: 《bpmn-chinese-document》

Properties-panel篇(上)

大家在了解了前一篇properties的內(nèi)容后, 應(yīng)該對(duì)屬性有了一個(gè)大概的認(rèn)識(shí)吧.

這一章節(jié)讓我們來(lái)說(shuō)說(shuō)properties-panel ??...

其實(shí)在前面的《全網(wǎng)最詳bpmn.js教材-基礎(chǔ)篇》中已經(jīng)提到了怎樣使用properties-panel, 不過(guò)那里只是簡(jiǎn)單的教了大家如何引用而沒(méi)有細(xì)說(shuō), 現(xiàn)在就讓我來(lái)詳細(xì)為大家講解一下它具體的使用方法。

通過(guò)這一章節(jié)的閱讀你可以學(xué)習(xí)到:

• Properties-panel的基本使用
• 擴(kuò)展使用Properties-panel

Properties-panel的基本使用

properties-panel本質(zhì)上是bpmn.js的一個(gè)擴(kuò)展, 它實(shí)現(xiàn)了BPMN 2.0建模器队贱，使你可以通過(guò)屬性面板編輯與執(zhí)行相關(guān)的屬性。

官方的一個(gè)截圖:

image.png

1. 安裝properties-panel

在之前的文章中有很多內(nèi)容沒(méi)有介紹清楚, 在這一章中我會(huì)仔細(xì)的介紹.

首先是安裝上.

如果你想要使用它的話, 得自己安裝一下:

$ npm install --save bpmn-js-properties-panel

同樣的記得在項(xiàng)目中引入樣式:

import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右邊工具欄樣式

使用上, 得在html代碼中提供一個(gè)標(biāo)簽作為盛放它的容器:

<div id="js-properties-panel" class="panel"></div>

之后, 在構(gòu)建BpmnModeler的時(shí)候添加上它:

 // 這里引入的是右側(cè)屬性欄這個(gè)框
import propertiesPanelModule from 'bpmn-js-properties-panel'
// 而這個(gè)引入的是右側(cè)屬性欄里的內(nèi)容
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'

const bpmnModeler = new BpmnModeler({
    //添加控制板
  propertiesPanel: {
        parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ]
})

在之前的文章中我沒(méi)有弄清楚propertiesPanelModule和propertiesProviderModule的作用, 導(dǎo)致將左側(cè)工具欄和右側(cè)屬性的引用方式寫(xiě)錯(cuò)了, 現(xiàn)在已經(jīng)在<全網(wǎng)最詳bpmn.js教材-基礎(chǔ)篇>中更正了...抱歉...

2. 安裝camunda-bpmn-moddle

還有一點(diǎn), 如果你想使用Camunda BPM來(lái)執(zhí)行相關(guān)屬性的話, 也得安裝一個(gè)叫camunda-bpmn-moddle的擴(kuò)展:

$ npm install --save camunda-bpmn-moddle

將其添加到項(xiàng)目中:

 // 右側(cè)屬性欄
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
 // 一個(gè)描述的json
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda'

const bpmnModeler = new BpmnModeler({
    //添加控制板
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule
  ],
  moddleExtensions: {
    //如果要在屬性面板中維護(hù)camunda：XXX屬性傻昙，則需要此 
    camunda: camundaModdleDescriptor
  }
})

(Camunda BPM是一個(gè)用于工作流執(zhí)行引擎和工作流自動(dòng)化的解決方案, 在這里就不展開(kāi)說(shuō)了)

而camunda-bpmn-moddle的作用就是告訴使用者camunda:XXX擴(kuò)展屬性冲秽。

說(shuō)了這個(gè)咱也聽(tīng)不懂啊, 來(lái)說(shuō)點(diǎn)具體的吧, 比如你已經(jīng)安裝并已經(jīng)在項(xiàng)目上使用了properties-panel之后, 打開(kāi)頁(yè)面, 隨便選擇一個(gè)節(jié)點(diǎn)(就拿開(kāi)始節(jié)點(diǎn)來(lái)說(shuō)吧), 會(huì)出現(xiàn)四個(gè)選項(xiàng)卡(tab)能讓你修改屬性, 如果你沒(méi)有安裝camunda并引用camundaModdleDescriptor的話, 使用后面三個(gè)功能, 控制臺(tái)就會(huì)報(bào)錯(cuò)了:

image.png

它會(huì)告訴你unknown type <camunda:FormData>...

因?yàn)槠鋵?shí)你查看camunda-bpmn-moddle/resources/camunda的源碼就會(huì)發(fā)現(xiàn), 這其實(shí)就是一個(gè)json文件, 里面存放的就是對(duì)各個(gè)屬性的描述. 我們?cè)诤竺孀远xproperties-panel的時(shí)候也會(huì)需要編寫(xiě)這樣的一個(gè)json文件, 待會(huì)你就知道了.

3. 實(shí)際使用效果

OK...讓我們來(lái)實(shí)際使用看看它們有什么效果.

為了方便查看, 我給bpmnModeler綁定一個(gè)commandStack.changed事件, 在圖形每次改變的時(shí)候?qū)⒆钚碌?code>xml打印出來(lái).

(關(guān)于事件綁定的部分可以看<全網(wǎng)最詳bpmn.js教材-事件篇>)

之后還是點(diǎn)擊開(kāi)始節(jié)點(diǎn), 并修改一些屬性. 結(jié)果發(fā)現(xiàn)你修改的屬性竟然同步更新到了xml上面:

image.png

Good Body! 你是不是想到了什么?!

沒(méi)錯(cuò)! 和上一篇文章的updateProperties方法是不是很像呢, 都是能夠更新屬性到xml上.

擴(kuò)展使用Properties-panel

與palette, contextPad等自定義方式一樣, Properties-panel也可以在默認(rèn)的基礎(chǔ)上進(jìn)行修改, 它允許你加上一些自定義的屬性.

不過(guò)官方把它叫做Properties Panel Extension, 好像更專(zhuān)業(yè)一些...不過(guò)無(wú)所謂了, 你知道是那個(gè)意思就行了.

官方這里也提供了一個(gè)例子: properties-panel-extension

我其實(shí)也是跟著官方的這個(gè)例子來(lái)探索它是怎么使用的.

首先讓我們來(lái)明確一點(diǎn), 還記得我們?cè)谑褂迷?code>properties-panel的時(shí)候, 引入了兩個(gè)東西嗎?

// 這里引入的是右側(cè)屬性欄這個(gè)框
import propertiesPanelModule from 'bpmn-js-properties-panel'
// 而這個(gè)引入的是右側(cè)屬性欄里的內(nèi)容
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'

additionalModules: [
  propertiesPanelModule,
  propertiesProviderModule
]

我研究了一下, 如果你不引入第一個(gè)只引入第二個(gè)的話, 屬性欄就出不來(lái)了.

而如果你只引入第一個(gè)不引入第二個(gè)的話, 就會(huì)報(bào)錯(cuò)...

我理解一下大概是這樣意思:

• 第一個(gè)propertiesPanelModule表示的是屬性欄這個(gè)框, 就是告訴別人這里要有個(gè)屬性欄;
• 第二個(gè)propertiesProviderModule表示的是屬性欄里的內(nèi)容, 也就是點(diǎn)擊不同的element該顯示什么內(nèi)容.

看到這, 你是不是有了點(diǎn)思路呢? 嘻嘻??...

既然這樣的話, 我們只需要重寫(xiě)propertiesProviderModule就可以了, 不要引入官方提供的(也就是從bpmn-js-properties-panel/lib/provider/camunda引入的), 而是自定義一個(gè)propertiesProviderModule來(lái)顯示自己想要的內(nèi)容.

1. 前期準(zhǔn)備

properties-panel的內(nèi)容可能有點(diǎn)多, 我就另外創(chuàng)建了一個(gè)項(xiàng)目來(lái)做案例分析.

項(xiàng)目還是用vue來(lái)編寫(xiě), 不過(guò)其實(shí)你只要有點(diǎn)基礎(chǔ)都能看得懂.

先讓我們來(lái)看看要實(shí)現(xiàn)的效果:

image.png

• 點(diǎn)擊開(kāi)始節(jié)點(diǎn)的時(shí)候, 右側(cè)的屬性欄中有General和權(quán)限兩個(gè)選項(xiàng)卡(tab);
• 權(quán)限這個(gè)選項(xiàng)卡中有一個(gè)組, 名為 編輯權(quán)限;
• 編輯權(quán)限下會(huì)有一個(gè)屬性, 名為 標(biāo)題, 它是一個(gè)輸入框;
• 修改該開(kāi)始節(jié)點(diǎn)的信息, 能將屬性關(guān)聯(lián)到xml中

讓我們?cè)?code>components文件夾下創(chuàng)建一個(gè)properties-panel-extension文件夾, 這里用來(lái)放我們要自定義的屬性?xún)?nèi)容.

然后在properties-panel-extension下再新建一個(gè)descriptors和provider文件夾.

• descriptors是用來(lái)放一些描述的json文件
• provider放你要自定義的選項(xiàng)卡(tab)

由于General是它原本就有的一個(gè)選項(xiàng)卡, 所以我們可以不用管它, 現(xiàn)在我們想要自定義的是一個(gè)名叫“權(quán)限”的選項(xiàng)卡, 所以我在provider文件夾下又創(chuàng)建了一個(gè)authority文件夾, 里面用來(lái)放我們選項(xiàng)卡的內(nèi)容...

之后一頓操作, 讓目錄變成了這樣:

image.png

AuthorityPropertiesProvider.js這個(gè)文件就是來(lái)編寫(xiě)權(quán)限這個(gè)選項(xiàng)卡的, 它是我們需要編寫(xiě)的主要文件.

parts這個(gè)文件夾就是來(lái)放各個(gè)組下的子元素, 比如這里的“標(biāo)題”, 我給它取名為TitleProps.

2. provider返回值介紹

如果你看到上面那么多的文件感覺(jué)眼花繚亂的話, 請(qǐng)不必慌張??, 這是正常的反應(yīng)...

所以為了后面更好的講解, 我決定先來(lái)介紹一下provider的返回值與頁(yè)面的結(jié)構(gòu)是如何對(duì)應(yīng)上的.

image.png

通過(guò)上面??的圖, 我們可以看出來(lái):

1. 每個(gè)provider下都會(huì)有一個(gè)tabs數(shù)組(一個(gè)tab就是一個(gè)選項(xiàng)卡)
2. 每個(gè)tab下都會(huì)有一個(gè)groups數(shù)組(一個(gè)group就是一個(gè)組)
3. 每個(gè)group下都會(huì)有一堆props, 它們可能是輸入框, 也可能是下拉框

OK...現(xiàn)在是不是好理解多了??...

所以我們只需要在AuthorityPropertiesProvider.js中返回一個(gè)這樣的結(jié)構(gòu)就可以了:

/*-選項(xiàng)卡
  |
  -組
   |
   -屬性*/
return [
    { // 選項(xiàng)卡
        id: 'general',
        groups: [] // 組
    },
    { // 選項(xiàng)卡
        id: 'authority',
        groups: [
            { // 組
                id: 'edit-authority', // 組id
                entries: [
                    { // 單個(gè)props
                        id: 'title',
                        description : '權(quán)限的標(biāo)題',
                        label : '標(biāo)題',
                        modelProperty : 'title'
                    }
                ]
            }
        ]
    }
]

3. 編寫(xiě)AuthorityPropertiesProvider.js代碼

編寫(xiě)的順序我打算從上往下一層一層的講.

所以先來(lái)看看AuthorityPropertiesProvider.js總體是要返回什么.

// AuthorityPropertiesProvider.js

import inherits from 'inherits';
// 引入自帶的PropertiesActivator,  因?yàn)槲覀円玫剿鼇?lái)處理eventBus
import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';

export default function AuthorityPropertiesProvider(
    eventBus, bpmnFactory, canvas, // 這里是要用到什么就引入什么
    elementRegistry, translate
) {
    PropertiesActivator.call(this, eventBus);
    
    this.getTabs = function (element) {
        var generalTab = {};
        var authorityTab = {};
        return [
            generalTab,
            authorityTab
        ];
    }
}

inherits(AuthorityPropertiesProvider, PropertiesActivator);

這樣看, 結(jié)構(gòu)是不是也很清晰呢? ??

我們其實(shí)就是要重寫(xiě)里面的getTabs方法, 返回我們需要的tab.

每個(gè)tab都有固定的屬性:

var authorityTab = {
        id: 'authority',
        label: '權(quán)限',
        groups: createAuthorityTabGroups(element)
    };

你必須得準(zhǔn)守以上命名規(guī)則來(lái)寫(xiě)哈??...

編寫(xiě)createAuthorityTabGroups函數(shù)代碼

在確定了tab之后, 我們需要告訴它里面有哪些組, 這時(shí)候就可以創(chuàng)建一個(gè)createAuthorityTabGroups函數(shù)來(lái)返回想要的組.

// AuthorityPropertiesProvider.js

import TitleProps from './parts/TitleProps';

function createAuthorityTabGroups(element) {
    var editAuthorityGroup = {
        id: 'edit-authority',
        label: '編輯權(quán)限',
        entries: [] // 屬性集合
    }
    // 每個(gè)屬性都有自己的props方法
    TitleProps(editAuthorityGroup, element);
    // OtherProps1(editAuthorityGroup, element);
    // OtherProps2(editAuthorityGroup, element);
    
    return [
        editAuthorityGroup
    ];
}

比如上面??我就返回了一個(gè)編輯權(quán)限的組.

而各個(gè)屬性是放到組的entries字段下的...

咿呀, 這里怎么沒(méi)看到給entries數(shù)組添加屬性呢?

但是下面好像有一個(gè)TitleProps呀, 這個(gè)是干嘛的???

看著有點(diǎn)像用來(lái)添加屬性的...

編寫(xiě)TitleProps.js代碼

是的, 由于屬性可能會(huì)被多處用到, 所以我將它單獨(dú)提了出來(lái), 放到了parts這個(gè)文件夾下, 后面就可以往里面不停的加屬性了.

這個(gè)屬性的方法有點(diǎn)特別, 它接收兩個(gè)參數(shù):

• 一個(gè)組
• 當(dāng)前element

因?yàn)橥粋€(gè)屬性可能存在于不同的組里, 所以可以傳入一個(gè)組.

另外可能要通過(guò)元素的類(lèi)型來(lái)做各種判斷, 所以可以傳入當(dāng)前元素.

// /parts/TitleProps.js
import entryFactory from 'bpmn-js-properties-panel/lib/factory/EntryFactory';

import { is } from 'bpmn-js/lib/util/ModelUtil';

export default function(group, element) {
  if (is(element, 'bpmn:StartEvent')) { // 可以在這里做類(lèi)型判斷
    group.entries.push(entryFactory.textField({
      id : 'title',
      description : '權(quán)限的標(biāo)題',
      label : '標(biāo)題',
      modelProperty : 'title'
    }));
  }
}

啊??, 原來(lái)entries是在每一個(gè)Props里添加屬性的啊??...

在push方法里, 你得告訴它是要添加一個(gè)什么類(lèi)型的Props.

主要就是通過(guò)entryFactory, 例如這里就是返回一個(gè)text類(lèi)型的輸入框.

有時(shí)候你想要的不僅僅是輸入框怎么辦???

沒(méi)關(guān)系, entryFactory本身為你提供了很多類(lèi)型.

Ctrl + 左鍵查看entryFactory的源碼, 你可以發(fā)現(xiàn)有很多類(lèi)型:

image.png

OK...

至此, 我們的自定義authorityTab權(quán)限選項(xiàng)卡就寫(xiě)完了 ??!

你如果想添加其它的選項(xiàng)卡用上面??的方式就可以了...

編寫(xiě)generalTab代碼

上面??的權(quán)限選項(xiàng)卡是我們自定義的一些內(nèi)容, 如果你想要使用官方提供的一些tab和屬性怎么辦呢?

generalTab就為你演示了該如何做...

首先同樣的, generalTab需要長(zhǎng)成這樣:

var generalTab = {
    id: 'general',
    label: 'General',
    groups: createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate)
};

我們看到createGeneralTabGroups好像傳遞了很多參數(shù)進(jìn)去, 那是因?yàn)槲覀円诶锩嬗玫剿鼈? 而這些參數(shù)在構(gòu)造AuthorityPropertiesProvider函數(shù)的時(shí)候就引入進(jìn)來(lái)的...

來(lái)看看createGeneralTabGroups是如何編寫(xiě)的:

// AuthorityPropertiesProvider.js

import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
import linkProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps';
import eventProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps';
import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';

function createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate) {

    var generalGroup = {
        id: 'general',
        label: 'General',
        entries: []
    };
    idProps(generalGroup, element, translate);
    nameProps(generalGroup, element, bpmnFactory, canvas, translate);
    processProps(generalGroup, element, translate);

    var detailsGroup = {
        id: 'details',
        label: 'Details',
        entries: []
    };
    linkProps(detailsGroup, element, translate);
    eventProps(detailsGroup, element, bpmnFactory, elementRegistry, translate);

    var documentationGroup = {
        id: 'documentation',
        label: 'Documentation',
        entries: []
    };

    documentationProps(documentationGroup, element, bpmnFactory, translate);

    return [
        generalGroup,
        detailsGroup,
        documentationGroup
    ];
}

在general中, 導(dǎo)出了三個(gè)組, 而每個(gè)組中的Props都是bpmn-js-properties-panel/lib/provider/bpmn/parts這個(gè)文件夾中拿的...

同樣的, 你查找它的源碼, 也能發(fā)現(xiàn)很多其它的Props, 你需要什么, 直接取來(lái)用就可以了[狗頭].

AuthorityPropertiesProvider.js完整代碼

額, 要不還是貼下完整的代碼?

其實(shí)也不多, 91行:

import inherits from 'inherits';

import PropertiesActivator from 'bpmn-js-properties-panel/lib/PropertiesActivator';


import idProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/IdProps';
import nameProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/NameProps';
import processProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/ProcessProps';
import linkProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/LinkProps';
import eventProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/EventProps';
import documentationProps from 'bpmn-js-properties-panel/lib/provider/bpmn/parts/DocumentationProps';

import TitleProps from './parts/TitleProps';

function createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate) {

    var generalGroup = {
        id: 'general',
        label: 'General',
        entries: []
    };
    idProps(generalGroup, element, translate);
    nameProps(generalGroup, element, bpmnFactory, canvas, translate);
    processProps(generalGroup, element, translate);

    var detailsGroup = {
        id: 'details',
        label: 'Details',
        entries: []
    };
    linkProps(detailsGroup, element, translate);
    eventProps(detailsGroup, element, bpmnFactory, elementRegistry, translate);

    var documentationGroup = {
        id: 'documentation',
        label: 'Documentation',
        entries: []
    };

    documentationProps(documentationGroup, element, bpmnFactory, translate);

    return [
        generalGroup,
        detailsGroup,
        documentationGroup
    ];
}

function createAuthorityTabGroups(element) {
    var editAuthorityGroup = {
        id: 'edit-authority',
        label: '編輯權(quán)限',
        entries: []
    }

    // 每個(gè)屬性都有自己的props方法
    TitleProps(editAuthorityGroup, element);
    // OtherProps1(editAuthorityGroup, element);
    // OtherProps2(editAuthorityGroup, element);

    return [
        editAuthorityGroup
    ];
}

export default function AuthorityPropertiesProvider(
    eventBus, bpmnFactory, canvas, // 這里是要用到什么就引入什么
    elementRegistry, translate
) {
    PropertiesActivator.call(this, eventBus);

    this.getTabs = function(element) {
        var generalTab = {
            id: 'general',
            label: 'General',
            groups: createGeneralTabGroups(element, bpmnFactory, canvas, elementRegistry, translate)
        };

        var authorityTab = {
            id: 'authority',
            label: '權(quán)限',
            groups: createAuthorityTabGroups(element)
        };
        return [
            generalTab,
            authorityTab
        ];
    }
}

inherits(AuthorityPropertiesProvider, PropertiesActivator);

經(jīng)過(guò)我們的拆分, 感覺(jué)異常簡(jiǎn)單有木有 ?? !

(沒(méi)錯(cuò), 霖呆呆就是這么一個(gè)簡(jiǎn)單善良如白紙一般的男子??...)

4. 編寫(xiě)authority.json代碼

OK...其實(shí)到了這里就接近尾聲了, 但是其實(shí)還有非常關(guān)鍵的一步要做...

剛剛我們自定義了一個(gè)叫做權(quán)限的選項(xiàng)卡, 還有一個(gè)叫title的屬性, 并且還指定了只有StartEvent中出現(xiàn), 那么此時(shí)我們還得在一個(gè)叫authority.json的文件中做一些說(shuō)明.

(之所以取名為authority.json, 是因?yàn)槲姨砑拥倪x項(xiàng)卡叫權(quán)限, 這個(gè)命名隨便你自己)

它長(zhǎng)成這樣:

{
    "name": "Authority",
    "prefix": "authority",
    "uri": "http://authority",
    "xml": {
      "tagAlias": "lowerCase"
    },
    "associations": [],
    "types": [
      {
        "name": "LinDaiDaiStartEvent",
        "extends": [
          "bpmn:StartEvent"
        ],
        "properties": [
          {
            "name": "title",
            "isAttr": true,
            "type": "String"
          }
        ]
      }
    ]
  }

在這個(gè)描述文件中, 我們定義了一個(gè)新類(lèi)型LinDaiDaiStartEvent, 該類(lèi)型擴(kuò)展了該類(lèi)型bpmn:StartEvent并向其添加“title”屬性作為屬性。

注?: 有必要在描述符中定義要擴(kuò)展的元素。如果希望該屬性對(duì)所有bpmn元素均有效玉吁，則可以擴(kuò)展bpmn:BaseElement?

例如??這樣:

...
{
  "name": "LinDaiDaiStartEvent",
  "extends": [
    "bpmn:BaseElement"
  ],
  ...
}

5. 導(dǎo)出并使用AuthorityPropertiesProvider

經(jīng)過(guò)一輪翻云覆雨(C + V)的操作, 終于將大頭給寫(xiě)完了...

下面讓我們來(lái)看看怎么用它...

在/provider/authority文件夾下創(chuàng)建一個(gè)index.js用于導(dǎo)出:

import AuthorityPropertiesProvider from './AuthorityPropertiesProvider';

export default {
  __init__: [ 'propertiesProvider' ],
  propertiesProvider: [ 'type', AuthorityPropertiesProvider ]
};

看著很眼熟啊, 哈哈??... 和contextPad什么的好像...

用于演示, 我在項(xiàng)目中創(chuàng)建了一個(gè)properties-panel-extension.vue, 并在其中引用上bpmn.js和我們的剛剛編寫(xiě)好的authority.

<template>
  <div class="containers" ref="content">
    <div class="canvas" ref="canvas"></div>
    <div id="js-properties-panel" class="panel"></div>
  </div>
</template>
<script>
// 原有的 properties-panel 這個(gè)框
import propertiesPanelModule from 'bpmn-js-properties-panel'
// 自定義的 properties-panel內(nèi)容
import propertiesProviderModule from './properties-panel-extension/provider/authority';
// 引入描述文件
import authorityModdleDescriptor from './properties-panel-extension/descriptors/authority'

...
additionalModules: [
  // 右邊的工具欄(固定引入)
  propertiesPanelModule,
  // 自定義右邊工作欄的內(nèi)容
  propertiesProviderModule
],
moddleExtensions: {
  // camunda: camundaModdleDescriptor,
  authority: authorityModdleDescriptor
}
...
</script>

看到這里, 相信你對(duì)properties-panel又有了一個(gè)新的認(rèn)識(shí)...

恭喜你??????

霖呆呆很是欣慰...

后語(yǔ)

上面??教材案例的代碼地址: LinDaiDai/bpmn-vue-properties-panel

還有幾天過(guò)年了??...霖呆呆有個(gè)小小的愿望, 就是在年前能破200的粉絲...

卑微博主在線懇求關(guān)注...哈哈哈??

(看著好心酸)

系列全部目錄請(qǐng)查看此處: 《全網(wǎng)最詳bpmn.js教材目錄》

最后, 如果你也對(duì)bpmn.js 感興趣可以進(jìn)我們的bpmn.js交流群??????, 共同學(xué)習(xí), 共同進(jìn)步.

關(guān)注霖呆呆的公眾號(hào)：LinDaiDai 選擇“其它”菜單中的“bpmn.js群”即可??.