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

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

Q: 我為什么要寫該系列的教材? ???

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

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

求贊??求心??. 更希望能對(duì)你有一點(diǎn)幫助.

本教材所有內(nèi)容已更新至GitHub ??

請(qǐng)認(rèn)準(zhǔn)GitHub地址: bpmn-chinese-document ??????

全網(wǎng)最詳bpmn.js教材-群友問(wèn)題匯總(一)

這一章節(jié)主要是將近段時(shí)間前端bpmn.js交流群中群友提的一些問(wèn)題做一個(gè)匯總...

后面有碰到同樣問(wèn)題的小伙伴希望能幫到你們...

問(wèn)題的解答有的是群友給出的方案有些是我自己想的方案, 可能不是最優(yōu)解, 如果有更好解決辦法的小伙伴還希望能夠提出來(lái)呀 ??.

目錄

• palette左側(cè)工具欄
  • 如何給工具欄的每一項(xiàng)都加上標(biāo)題
  • palette和renderer中的圖片如何用本地圖片
  • 自定義palette中如何使用它本身的圖標(biāo)樣式
• contextPad
  • contextPad中的內(nèi)容根據(jù)元素類型不同顯示不同
• 文件
  • 如何加載本地bpmn或者xml文件
• 屬性
  • 每個(gè)元素的id是否能夠修改
• 其它
  • 如何創(chuàng)建線節(jié)點(diǎn)
  • 右下角的綠色logo能否隱去

palette左側(cè)工具欄

1. 如何給工具欄的每一項(xiàng)都加上標(biāo)題

實(shí)現(xiàn)類似于下面這張圖的效果:

image

原先我們實(shí)現(xiàn)自定義palette的時(shí)候只考慮到了顯示圖片的情況, 有一些業(yè)務(wù)場(chǎng)景可能需要將每種元素的標(biāo)題顯示出來(lái).

這里我提供了兩種解決方案:

1. 給每個(gè)類定義一個(gè)偽類, 將title寫到這個(gè)偽類里
2. 額...要UI設(shè)計(jì)師將每個(gè)title畫到每個(gè)元素圖表的下面, 也就是將title作為圖標(biāo)的一部分

這里我主要講解一下第一種實(shí)現(xiàn)方式.

首先我們知道在customPalette中是有這么一個(gè)東西的:

'append.lindaidai-task': {
    group: 'model',
    className: 'icon-custom lindaidai-task',
    title: translate('創(chuàng)建一個(gè)類型為lindaidai-task的任務(wù)節(jié)點(diǎn)'),
    action: {
        click: appendTask,
        dragstart: appendTaskStart
    }
}

主要看className.

之前我教材中的css代碼是這樣寫的:

.icon-custom {
    border-radius: 50%;
    background-size: 65%;
    background-repeat: no-repeat;
    background-position: center;
}
.icon-custom.lindaidai-task {
    position: relative;
    background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png');
}

現(xiàn)在我想在它下面加一個(gè)標(biāo)題:

.icon-custom.lindaidai-task::after {
    font-size: 12px;
    content: 'LinDaiDai'; /* 這里放的就是標(biāo)題 */
    position: absolute;
    top: 17px;
    left: 0;
}

這樣就簡(jiǎn)單的實(shí)現(xiàn)了這么一個(gè)顯示標(biāo)題的功能.

具體案例可以看這里: bpmn-vue-basic

2. palette和renderer中的圖片如何用本地圖片

palette上想要用本地圖片很簡(jiǎn)單, 因?yàn)樽远xpalette主要是依靠className, 而className肯定是寫在css文件中的, 我們只需要找到圖片對(duì)應(yīng)的相對(duì)路徑就可以了:

例如項(xiàng)目目錄為:

/src
    |- /assets
        |- rules.png
    |- css
        |- app.css

它對(duì)應(yīng)的引用:

/*app.css*/
.icon-custom.lindaidai-task {
    position: relative;
    /* background-image: url('https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png'); */
    background-image: url('../assets/rules.png');
}

我們知道自定義renderer里想要實(shí)現(xiàn)自定義效果主要是靠svgCreate方法創(chuàng)建出一個(gè)image元素然后添加到返回值中, 這個(gè)圖片的url我原先一直用的是網(wǎng)絡(luò)圖片, 那肯定沒什么問(wèn)題.

而如果你想要用一張本地圖片的話, 你開始想到的可能是這樣使用相對(duì)路徑:

// customRenderer.js
const imageConfig = {
    'url': '../../assets/rules.png',
    // 'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png',
    'attr': { x: 0, y: 0, width: 48, height: 48 }
}

const { attr, url } = imageConfig;
const customIcon = svgCreate('image', {
    ...attr,
    href: url
})

但是保存打開頁(yè)面之后發(fā)現(xiàn)不盡人意...

在這里你需要使用CommonJS的引入方式才可以, 將它轉(zhuǎn)換為base64的Data URL:

// customRenderer.js
const imageConfig = {
    'url': require('../../assets/rules.png'),
    // 'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png',
    'attr': { x: 0, y: 0, width: 48, height: 48 }
}

const { attr, url } = imageConfig;
const customIcon = svgCreate('image', {
    ...attr,
    href: url
})

保存打開頁(yè)面發(fā)現(xiàn)是可以的.

但是在這里我不推薦你使用相對(duì)路徑的方式, 因?yàn)榕渲梦募奈恢每赡茈S時(shí)會(huì)變, 一變的話相對(duì)路徑也得更這邊, 所以如果你是使用以webpack打包工具為基礎(chǔ)的腳手架的話, 我建議你配置一個(gè)alias(別名), 那樣也能方便你開發(fā).

配置alias的方式很簡(jiǎn)單, 如果你和我一樣是用vue開發(fā)項(xiàng)目的話, 請(qǐng)檢查一下你的根目錄有沒有一個(gè)叫vue.config.js的文件, 如果沒有的話, 創(chuàng)建一個(gè), 并在其中寫上:

// customRenderer.js
const path = require('path')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
    }
}

(其它框架請(qǐng)自行度娘...)

是不是看著也很簡(jiǎn)單, 和它的英文一樣, 其實(shí)也就是給某個(gè)文件夾配置一個(gè)別名.

比如我這里就是給src和src/assets配置了別名.

這樣你在代碼里寫@/views/xxx.vue就當(dāng)于寫src/views/xxx.vue.

現(xiàn)在讓我們來(lái)修改一下前面的路徑:

// customRenderer.js
const imageConfig = {
    'url': require('@assets/rules.png'),
    // 'url': require('../../assets/rules.png'),
    // 'url': 'https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/rules.png',
    'attr': { x: 0, y: 0, width: 48, height: 48 }
}

const { attr, url } = imageConfig;
const customIcon = svgCreate('image', {
    ...attr,
    href: url
})

現(xiàn)在無(wú)論你如何移動(dòng)你的customRenderer.js文件, 圖片的路徑都不會(huì)錯(cuò)了.

案例GitHub地址: bpmn-vue-custom

(該問(wèn)題解決方案來(lái)自簡(jiǎn)書網(wǎng)友 夢(mèng)想還是要有的_bfc7)

3. 自定義palette中如何使用它本身的圖標(biāo)樣式

我們之前的自定義palette一直都是使用我們自己找的一寫圖片圖標(biāo)...

而如果你某一個(gè)元素的樣式就想要它官方提供的怎么辦 ????

例如我要實(shí)現(xiàn)這樣的效果:

前兩個(gè)元素是我自定義的, 最后一個(gè)網(wǎng)關(guān)用官方提供的原始樣式, 如下圖:

image

想要做到這一點(diǎn)其實(shí)很簡(jiǎn)單, 還記得我們自定義palette的時(shí)候是依賴著一個(gè)className屬性的嗎?

你只需要將這個(gè)className設(shè)置成它官方提供的就可以了.

那有人就要問(wèn)了,這個(gè)官方原始的className我該到哪找呢 ???

image

審查元素, 找到對(duì)應(yīng)的類名, 比如這里是bpmn-icon-gateway-none

然后在將customPalette中的網(wǎng)關(guān)設(shè)置成這個(gè)className:

PaletteProvider.prototype.getPaletteEntries = function(element) {
    ...
    return {
        ...
        'create.exclusive-gateway': {
            group: 'gateway',
            className: 'bpmn-icon-gateway-none', // 重點(diǎn)是這個(gè)
            title: '創(chuàng)建一個(gè)網(wǎng)關(guān)',
            action: {
                dragstart: createGateway(),
                click: createGateway()
            }
        }
    }
}

現(xiàn)在左側(cè)的工具欄就已經(jīng)可以將原始的網(wǎng)關(guān)樣式顯示出來(lái)了.

但是有一個(gè)問(wèn)題了, 那就是此時(shí)你想要用你定義好的這個(gè)網(wǎng)關(guān)在右邊畫圖, 也就是進(jìn)入renderer階段, 如果你是完全自定義renderer的話, 控制臺(tái)可能就會(huì)報(bào)錯(cuò)了...

先讓我們來(lái)回顧一下customRenderer.js是怎么寫的:

export default function CustomRenderer(eventBus, styles, textRenderer) {
    this.drawCustomElements = function(parentNode, element) {
        if (customElements.includes(type)) { // or customConfig[type]
            // 這里是自定義的元素
        }
    }
}

CustomRenderer.prototype.drawShape = function(p, element) {
    return this.drawCustomElements(p, element)
}

如果你和我一樣是將是否是自定義的元素這個(gè)判斷放到drawCustomElements這個(gè)方法里寫的話你可能就會(huì)報(bào)錯(cuò)了...因?yàn)樗鼤?huì)告訴你找不到這個(gè)類型的渲染方式.

解決辦法是這層判斷放到CustomRenderer.prototype.drawShape里:

export default function CustomRenderer(eventBus, styles, textRenderer) {
    this.drawCustomElements = function(parentNode, element) {
        // 這里是自定義的元素
    }
}

CustomRenderer.prototype.drawShape = function(p, element) {
    if (customElements.includes(element.type)) { // 放到這里判斷
        return this.drawCustomElements(p, element)
    }
}

這樣修改之后, 在執(zhí)行drawShape方法的時(shí)候, 它就會(huì)判斷是否是自定義元素, 如果是自定義元素的話才有返回值, 否則就沒有返回值.

沒有返回值時(shí)它就會(huì)根據(jù)原始的樣式進(jìn)行渲染了.

這是因?yàn)槲覀冊(cè)谠O(shè)計(jì)自定義modeler的時(shí)候?qū)⒃嫉膍odeler也引用進(jìn)來(lái)了:

image

關(guān)于上述案例可查看: bpmn-vue-custom 中的自定義modeler那一個(gè)tab項(xiàng).

contextPad

1. contextPad中的內(nèi)容根據(jù)元素類型不同顯示不同

不同類型的節(jié)點(diǎn)出現(xiàn)的contextPad的內(nèi)容可能是不同的.
比如:

StartEvent會(huì)出現(xiàn)edit械拍、delete姻锁、Task逐工、BusinessRuleTask镇匀、ExclusiveGateway等等;

EndEvent只能出現(xiàn)edit、delete;SequenceFlow只能出現(xiàn)edit闰非、delete.

也就是說(shuō)我們需要根據(jù)節(jié)點(diǎn)類型來(lái)返回不同的contextPad.

這個(gè)其實(shí)我在《全網(wǎng)最詳bpmn.js教材-封裝組件篇》 這里面已經(jīng)提到過(guò)該如何處理了, 具體可以看那篇文章:

image

文件

1. 如何加載本地bpmn或者xml文件

在http篇那一章節(jié), 我向大家演示的是通過(guò)一個(gè)遠(yuǎn)程的文件鏈接(可能是后臺(tái)傳遞過(guò)來(lái)的), 然后通過(guò)axios解析獲取的文件, 從而得到xml的字符串再調(diào)用importXML方法顯示出圖形.

那么如何加載一個(gè)本地的bpmn文件或者xml文件呢.

方案一: 使用raw-loader

我首先想到的是通過(guò)xml-loader解析這兩類文件, 但是不知道能不能成, 于是試了試.

(項(xiàng)目案例基于: bpmn-vue-custom)

首先在項(xiàng)目中安裝xml-loader:

$ npm i --save-dev xml-loader

然后配置一下vue.config.js這個(gè)文件(這個(gè)文件在上面??palette和renderer中的圖片如何用本地圖片已經(jīng)提到過(guò)了, 沒有的話就在根目錄創(chuàng)建一個(gè))

vue.config.js:

const path = require('path')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .end()
        config.module // 主要是看這部分
            .rule('xml-loader')
            .test(/.(bpmn|xml)$/)
            .use('xml-loader')
            .loader('xml-loader')
            .end()
    }
}

這里的意思就是以bpmn或者xml為后綴的文件會(huì)被xml-loader處理.

現(xiàn)在讓我們?cè)?code>custom-renderer.vue這個(gè)頁(yè)面中來(lái)試試:

<script>
    const bpmnXml = require('../mock/diagram.bpmn')
    
    console.log(bpmnXml)
</script>

打印出來(lái)的bpmnXml卻是一個(gè)對(duì)象, 而不是字符串:

image

而且使用importXML想要轉(zhuǎn)換這個(gè)對(duì)象顯然是不行的.

這可怎么辦呢...

image

等等, 既然importXML解析只需要一個(gè)字符串的話, 讓我想到了前幾天剛學(xué)到的raw-loader, 它可以獲取txt中的文本內(nèi)容, 那是不是也能獲取bpmn和xml呢 ????

說(shuō)干就干, 繼續(xù)安裝raw-loader:

$ npm i --save-dev raw-loader

然后修改vue.config.js:

const path = require('path')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('@assets', resolve('src/assets'))
            .end()
        config.module // 將xml-loader替換成raw-loader
            .rule('raw-loader')
            .test(/.(bpmn|xml)$/)
            .use('raw-loader')
            .loader('raw-loader')
            .end()
    }
}

修改完之后記得重啟項(xiàng)目...

然后讓我們來(lái)看看效果:

<script>
    const bpmnXml = require('../mock/diagram.bpmn')
    
    console.log(bpmnXml)
    console.log(typeof bpmnXml) // object
    console.log(bpmnXml.default)
</script>

此時(shí)打印出來(lái)的雖然也是個(gè)對(duì)象, 但是里面有個(gè)default屬性, 它存儲(chǔ)的就是xml字符串

image

所以我們?nèi)?code>default屬性就可以了:

this.bpmnModeler.importXML(bpmnXml.default, err => {
    if (err) {
        
    } else {
        // 這里是成功之后的回調(diào), 可以在這里做一系列事情
        this.success()
    }
})

不知道是不是版本的原因, 有些通過(guò)raw-loader轉(zhuǎn)換的bpmn文件就直接是字符串, 而不是這個(gè)對(duì)象, 大家在使用的時(shí)候注意一下.

注意??:

關(guān)于上面vue.config.js是vue-cli3中webpack的配置, 如果你的項(xiàng)目的構(gòu)建方式是使用原始webpack的話, 它就相當(dāng)于webpack.config.js中的:

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /.(bpmn|xml)$/,
                use: 'raw-loader'
            }
        ]
    }
}

其它打包方式我這里就不說(shuō)了.

方案二: 使用new FileReader()

這個(gè)方案是群里的群友火蓮提出來(lái)的, 他已經(jīng)實(shí)現(xiàn)了, 我就沒去試了, 不過(guò)應(yīng)該是可以的.

image

image

var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(oFREvent){
    var xmlDoc = oFREvent.target.result;
    openDiagram(xmlDoc);
}

屬性

1. 每個(gè)元素的id是否能夠修改

其實(shí)每個(gè)元素的id也是一個(gè)屬性而已, 但是它并不會(huì)隨著元素類型的改變而改變, 也就是說(shuō)正常情況下它是不會(huì)變動(dòng)的.

不過(guò)既然它是一個(gè)屬性, 那么我們就能通過(guò)modeling.updateProperties()修改它:

const properties = { id: 'id0001' } 
const { modeler, element } = this
const modeling = modeler.get('modeling')
modeling.updateProperties(element, properties)

其它

1. 如何創(chuàng)建線節(jié)點(diǎn)

創(chuàng)建線節(jié)點(diǎn)在《全網(wǎng)最詳bpmn.js教材-封裝組件篇》 這里面也提到過(guò)該如何處理, 具體可以看那篇文章.

2. 右下角的綠色logo能否隱去

關(guān)于右下角logo能否隱去這個(gè)問(wèn)題, 群里產(chǎn)生了激烈的討論, 因?yàn)榇蠹叶寂鲁怨偎厩謾?quán)...

用官網(wǎng)的話來(lái)說(shuō)就是不能:

image

不過(guò)群友zaw也提供了一種解決方案??:

找到那個(gè)類名, 然后樣式設(shè)置 display : none.

我認(rèn)為你能不隱就不要隱去了吧, 雖然人家這東西是開源的, 但是也說(shuō)了不要去掉, 就遵從作者的意愿吧(就像我在這里求大家一鍵三連一樣: 點(diǎn)贊, 收藏, Star 呀 哈哈哈...)

后語(yǔ)

全部教材目錄: 《全網(wǎng)最詳bpmn.js教材》

GitHub教材地址: bpmn-chinese-document 求Star ?? 求Fork ??...

疫情四溢, 足不出戶, 霖呆呆從大年初二到今天就只出過(guò)一次門 ??...

不知道你們那邊情況怎么樣, 反正我家后面300米處的那戶人家夫妻倆已經(jīng)被感染隔離起來(lái)了...

所以我們小鎮(zhèn)也被全面封鎖了, 還不知道啥時(shí)候能返深...

不過(guò)在家呆著挺好的, 難得有和家人相處的機(jī)會(huì), 要好好珍惜呀, 而且能趁著假期惡補(bǔ)一下自己薄弱的知識(shí)點(diǎn)就很好, 哈哈??.

喜歡霖呆呆的小伙還希望可以關(guān)注霖呆呆的公眾號(hào) LinDaiDai

你的鼓勵(lì)就是我持續(xù)創(chuàng)作的主要?jiǎng)恿???.

相關(guān)推薦:

《前面系列-this/apply/call問(wèn)點(diǎn)(假期一起來(lái)學(xué)習(xí)吧, 武漢加油!!!)》

《JavaScript進(jìn)階-執(zhí)行上下文(理解執(zhí)行上下文一篇就夠了)》

《霖呆呆你來(lái)說(shuō)說(shuō)瀏覽器緩存吧》

《怎樣讓后臺(tái)小哥哥快速對(duì)接你的前端頁(yè)面》