前言
Q: bpmn.js是什么? ???
bpmn.js是一個BPMN2.0渲染工具包和web建模器, 使得畫流程圖的功能在前端來完成.
Q: 我為什么要寫該系列的教材? ???
因為公司業(yè)務(wù)的需要因而要在項目中使用到bpmn.js,但是由于bpmn.js的開發(fā)者是國外友人, 因此國內(nèi)對這方面的教材很少, 也沒有詳細的文檔. 所以很多使用方式很多坑都得自己去找.在將其琢磨完之后, 決定寫一系列關(guān)于它的教材來幫助更多bpmn.js的使用者或者是期于找到一種好的繪制流程圖的開發(fā)者. 同時也是自己對其的一種鞏固.
首先先說明一點吧铐伴，bpmn.js主要是為畫工作流做規(guī)則引擎用的痕鳍，所以如果您的工作中并不涉及到這一塊的話可以不用浪費時間閱讀本篇文章。當(dāng)然如果您為此感興趣的話可以移步bpmn-chinese-document看看它的介紹，如果你對它不感興趣對我感興趣的話可以移步我的個人博客niubility-coding-js (好慘沒一個Star)??渐白。
由于是系列的文章, 所以更新的可能會比較頻繁, 您要是無意間刷到了且不是您所需要的還請諒解??.
求贊??求心??. 更希望能對你有一點小小的幫助.
完整目錄及GitHub地址：bpmn-chinese-document
Color篇
很久沒寫bpmn.js系列的教材了...??，寫起來還是感覺挺親切的墓毒。
這篇文章主要是介紹一下在bpmn.js中修改節(jié)點顏色的各種場景和方式动羽，算是bpmn.js交流群群里的一個熱門問點吧。另外文章中我會以幾個常用類型的節(jié)點作為案例來進行講解镣典，比如StartEvent兔毙、Task、EndEvent這幾種類型兄春，其它類型的修改和案例中的大同小異澎剥，還請自行擴展。
因為我一直相信授人予魚不如授人予漁赶舆，這才是一篇教程真正能帶給你的東西哑姚。我們在實際開發(fā)中肯定會遇到各種各樣不同的需求祭饭，不可能每篇教程都能剛好符合你的業(yè)務(wù)要求，所以我能做的只是保證你能有一定的bpmn.js使用基礎(chǔ)并在此基礎(chǔ)上有自己的思考叙量。
好了話不多說咯倡蝙，來看看，通過閱讀你可以學(xué)習(xí)到：
- 修改
palette左側(cè)工具欄中的節(jié)點顏色 - 修改
renderer渲染在頁面上的節(jié)點顏色 - 修改
contextPad上的節(jié)點顏色 - 在渲染完成之后用戶手動觸發(fā)修改節(jié)點顏色
來幾張張效果圖看看：
(這狗血的畫質(zhì)...)
因為內(nèi)容不多绞佩，所以就沒有另起一個案例項目寺鸥。
以下所有案例都整理在bpmn-properties-panel里面。Color篇的展示主要是在custom-color這個頁面下品山，代碼是放在components/custom-color.vue中胆建。
修改palette左側(cè)工具欄中的節(jié)點顏色
左側(cè)工具欄修改節(jié)點顏色很簡單，只需要找到對應(yīng)節(jié)點的類名在css中修改就可以了谆奥。
例如我修改了案例中的開始節(jié)點眼坏。
- 找到開始節(jié)點的類名
- 在一個全局樣式中修改它
如果你和我一樣不想要所有的palette都被修改顏色，可以指定某一個頁面下進行修改酸些，方式是給你生成bpmn圖的容器添加一個類名：
custom-color.vue
<div class="containers bpmn-color" ref="content">
<div class="canvas" ref="canvas"></div>
</div>
例如我這里只修改custom-color頁面中的palette
給它加上bpmn-color這個類名宰译。
然后在全局的/styles/bpmn-custom-color.css中修改類的樣式：
.bpmn-color .bpmn-icon-start-event-none:before {
color: #12c2e9;
}
.bpmn-color .bpmn-icon-task:before {
color: #c471ed;
}
.bpmn-color .bpmn-icon-end-event-none:before {
color: #f64f59;
}
- 將自定義的樣式引入到
main.js中
最后一步就是要把我們自定義的樣式引入到main.js里，這里有一個要注意的就是自定義的樣式要放在bpmn.js自帶的樣式下面：
main.js
import Vue from 'vue'
import 'bpmn-js/dist/assets/diagram-js.css' // 左邊工具欄以及編輯節(jié)點的樣式
import './styles/bpmn-custom-color.css' // 自定義樣式
現(xiàn)在保存打開頁面就可以看到效果了魄懂。
不過這個只能修改圖像邊框的顏色沿侈，因為這個圖像本質(zhì)就是一個icon字體，所以可以用color這個屬性來控制字體的顏色市栗。而字體顏色的范圍是由這個icon圖像本身決定的缀拭，也就是說如果這個字體它本身就是個圓環(huán)，那color也就只能修改它的圓邊框填帽；如果這個字體本身就是個完整的圓蛛淋，那color肯定也就能修改整個圓了。
修改renderer渲染在頁面上的節(jié)點顏色
光有左側(cè)工具欄的修改還不夠篡腌，最主要的是要渲染的時候能修改為自己想要的顏色褐荷。
例如你的需求可能是在進行初始化的時候，就需要根據(jù)節(jié)點的類型來將節(jié)點修改為不同的顏色嘹悼。
比如StartEvent修改為紅色叛甫，Task修改為藍色等等。
這時候我們需要用到之前在自定義renderer篇中提到過的「在默認的Renderer基礎(chǔ)上修改」杨伙。對renderer不懂的小伙伴一定要先閱讀自定義renderer篇才行其监。
在此我假設(shè)你已經(jīng)完全了解了renderer。
那么我們知道一個元素能否成功在頁面上渲染限匣，關(guān)鍵的代碼就是在CustomRenderer中重寫drawShape這個方法抖苦。
而這個方法其實依賴的是這段代碼：
//CustomRenderer.js
drawShape(parentNode, element) {
let shape = this.bpmnRenderer.drawShape(parentNode, element)
return shape
}
也就是說是靠this.bpmnRenderer.drawShape這個方法將element對象轉(zhuǎn)換為一個svg形式的節(jié)點。
最開始我的想法是在轉(zhuǎn)換之前使用modeling.setColor方法來修改element的相應(yīng)樣式：
//CustomRenderer.js
drawShape(parentNode, element) {
modeling.setColor(element, {
fill: null,
stroke: color
})
let shape = this.bpmnRenderer.drawShape(parentNode, element)
return shape
}
但這種方式失敗了，打開控制臺報了一堆的紅色錯誤睛约，大致就是進入了死循環(huán)鼎俘，瀏覽器爆棧了哲身。
想了一下其實也好理解辩涝，renderer的作用本就是將element進行渲染，但是在這個階段你又用setColor去修改element的這個屬性勘天，那這樣肯定就會造成遞歸循環(huán)渲染怔揩，所以這種做法被我否定了。
之后我想了一下脯丝，使用drawShape方法產(chǎn)生的東西會是什么呢商膊？帶著好奇我把生成的shape打印出來看了一下，發(fā)現(xiàn)他就是一個DOM元素：
// StartEvent
<circle cx="18" cy="18" r="18" style="stroke: black; stroke-width: 2px; fill: rgb(18, 194, 233); fill-opacity: 0.95;"></circle>
// TaskEvent
<rect x="0" y="0" width="100" height="80" rx="10" ry="10" style="stroke: rgb(196, 113, 237); stroke-width: 2px; fill: white; fill-opacity: 0.95;"></rect>
既然是DOM元素那可就簡單了宠进，只需要用修改DOM元素樣式的方法來處理就可以了晕拆。
所以其實你可以這樣做：
//CustomRenderer.js
drawShape(parentNode, element) {
let shape = this.bpmnRenderer.drawShape(parentNode, element)
shape.style.setProperty('fill', 'red')
return shape
}
在生成shape之后使用style.setProperty方法修改想要修改的屬性就可以了。
在一個shape中材蹬，主要是有這么幾種屬性可以供我們修改：
-
fill：元素的填充色 -
stroke：元素的邊框顏色 -
strokenWidth：元素邊框的寬度
為了方便管理和配置我在CustomRenderer.js中定義了一個配置想实幕，另外封裝了一個setShapeProperties方法專門用來處理節(jié)點顏色的問題，核心代碼就這么些：
const propertiesConfig = {
'bpmn:StartEvent': {
fill: '#12c2e9'
},
'bpmn:Task': {
stroke: '#c471ed',
strokeWidth: 2,
},
'bpmn:EndEvent': {
stroke: '#f64f59',
fill: '#f64f59'
}
}
export default class CustomRenderer extends BaseRenderer {
drawShape(parentNode, element) {
let shape = this.bpmnRenderer.drawShape(parentNode, element)
setShapeProperties(shape, element)
return shape
}
}
function setShapeProperties (shape, element) {
const type = element.type // 獲取到的類型
if (propertiesConfig[type]) {
const properties = propertiesConfig[type]
Object.keys(properties).forEach(prop => {
shape.style.setProperty(prop, properties[prop])
})
}
}
通過PropertiesConfig[type]判斷有沒有要自定義的元素堤器，有的話就走if判斷里昆庇。
Object.keys() 方法其實就是獲取某個對象下的所有屬性名稱，比如：
var obj = { a: 1, b: 2 }
console.log(Object.keys(obj)) // ['a', 'b']
這個寫前端的可能都知道闸溃，主要是怕后臺人員不了解所以提一嘴整吆。
現(xiàn)在保存刷新頁面后就可以看到效果了 ??：
修改contextPad上的節(jié)點顏色
contextPad上的節(jié)點顏色，事實上和修改palette是一樣的辉川。因為它們共用了一個className表蝙。因此如果你改了palette上的樣式，contextPad上的也會被修改乓旗。
在渲染完成之后用戶手動觸發(fā)修改節(jié)點顏色
這個功能的主要作用是說府蛇，在渲染成功之后，可能需要用戶手動去修改某個節(jié)點的顏色寸齐。
額...這其實在全網(wǎng)最詳bpmn.js教材-poperties-panel篇(下)中也說到過了吧欲诺，核心方法就是用使用modeling.setColor()方法去修改。
const modeling = this.modeler.get('modeling')
modeling.setColor(element, {
fill: 'blue',
stroke: 'red'
})
在此不再重復(fù)說了 ??渺鹦。
另外我在官網(wǎng)也發(fā)現(xiàn)了有關(guān)于colors的案例扰法，它主要是能配合xml標(biāo)簽上的屬性來進行相應(yīng)顏色的修改，有興趣的小伙伴可以看一下：
后語
從2019年12月10日最開始寫此教材到現(xiàn)在已經(jīng)四個月了毅厚，bpmn.js交流群也從最開始的3,4個人擴展到了現(xiàn)在的200人塞颁，還是挺欣慰的。
也很感謝群里的一些小伙伴能熱心的為新來的小伙伴解答問題提供幫助，我在此代接受過幫助的小伙伴謝謝大家祠锣！
不過也希望能有更多的小伙伴能積極的參與到bpmn-chinese-document的項目中來酷窥，也算是為國內(nèi)bpmn.js的社區(qū)貢獻一份力吧??。
最后還請能給bpmn-chinese-document一個Star??伴网，編寫整理都不易蓬推，感謝??。
喜歡霖呆呆的小伙還希望可以關(guān)注霖呆呆的公眾號 LinDaiDai 或者掃一掃下面的二維碼??????.
我會不定時的更新一些前端方面的知識內(nèi)容以及自己的原創(chuàng)文章??
你的鼓勵就是我持續(xù)創(chuàng)作的主要動力 ??.
