全網最詳bpmn.js教材-Color篇

前言

👣

Q: bpmn.js是什麼? 🤔️

」

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

👣

Q: 我爲何要寫該系列的教材? 🤔️

」

由於公司業務的須要於是要在項目中使用到bpmn.js,可是因爲bpmn.js的開發者是國外友人, 所以國內對這方面的教材不多, 也沒有詳細的文檔. 因此不少使用方式不少坑都得本身去找.在將其琢磨完以後, 決定寫一系列關於它的教材來幫助更多bpmn.js的使用者或者是期於找到一種好的繪製流程圖的開發者. 同時也是本身對其的一種鞏固.

首先先說明一點吧，bpmn.js主要是爲畫工做流作規則引擎用的，因此若是您的工做中並不涉及到這一塊的話能夠不用浪費時間閱讀本篇文章。固然若是您爲此感興趣的話能夠移步bpmn-chinese-document看看它的介紹，若是你對它不感興趣對我感興趣的話能夠移步個人我的博客niubility-coding-js (好慘沒一個Star)😄。

因爲是系列的文章, 因此更新的可能會比較頻繁, 您要是無心間刷到了且不是您所須要的還請諒解😊.

求贊👍求心❤️. 更但願能對你有一點小小的幫助.

完整目錄及GitHub地址：bpmn-chinese-document

Color篇

好久沒寫bpmn.js系列的教材了...😄，寫起來仍是感受挺親切的。

這篇文章主要是介紹一下在bpmn.js中修改節點顏色的各類場景和方式，算是bpmn.js交流羣羣裏的一個熱門問點吧。另外文章中我會以幾個經常使用類型的節點做爲案例來進行講解，好比StartEvent、Task、EndEvent這幾種類型，其它類型的修改和案例中的大同小異，還請自行擴展。

由於我一直相信授人予魚不如授人予漁，這纔是一篇教程真正能帶給你的東西。咱們在實際開發中確定會遇到各類各樣不一樣的需求，不可能每篇教程都能恰好符合你的業務要求，因此我能作的只是保證你能有必定的bpmn.js使用基礎並在此基礎上有本身的思考。

好了話很少說咯，來看看，經過閱讀你能夠學習到：

• 修改 palette左側工具欄中的節點顏色
• 修改 renderer渲染在頁面上的節點顏色
• 修改 contextPad上的節點顏色
• 在渲染完成以後用戶手動觸發修改節點顏色

來幾張張效果圖看看：

(這狗血的畫質...)

由於內容很少，因此就沒有另起一個案例項目。

如下全部案例都整理在bpmn-properties-panel裏面。Color篇的展現主要是在custom-color這個頁面下，代碼是放在components/custom-color.vue中。

修改palette左側工具欄中的節點顏色

左側工具欄修改節點顏色很簡單，只須要找到對應節點的類名在css中修改就能夠了。

例如我修改了案例中的開始節點。

1. 找到開始節點的類名

2. 在一個全局樣式中修改它

若是你和我同樣不想要全部的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;
}
複製代碼

3. 將自定義的樣式引入到 main.js中

最後一步就是要把咱們自定義的樣式引入到main.js裏，這裏有一個要注意的就是自定義的樣式要放在bpmn.js自帶的樣式下面：

main.js

import Vue from 'vue'

import 'bpmn-js/dist/assets/diagram-js.css' // 左邊工具欄以及編輯節點的樣式
import './styles/bpmn-custom-color.css' // 自定義樣式
複製代碼

如今保存打開頁面就能夠看到效果了。

不過這個只能修改圖像邊框的顏色，由於這個圖像本質就是一個icon字體，因此能夠用color這個屬性來控制字體的顏色。而字體顏色的範圍是由這個icon圖像自己決定的，也就是說若是這個字體它自己就是個圓環，那color也就只能修改它的圓邊框；若是這個字體自己就是個完整的圓，那color確定也就能修改整個圓了。

修改renderer渲染在頁面上的節點顏色

光有左側工具欄的修改還不夠，最主要的是要渲染的時候能修改成本身想要的顏色。

例如你的需求多是在進行初始化的時候，就須要根據節點的類型來將節點修改成不一樣的顏色。

好比StartEvent修改成紅色，Task修改成藍色等等。

這時候咱們須要用到以前在自定義renderer篇中提到過的「在默認的Renderer基礎上修改」。對renderer不懂的小夥伴必定要先閱讀自定義renderer篇才行。

在此我假設你已經徹底瞭解了renderer。

那麼咱們知道一個元素可否成功在頁面上渲染，關鍵的代碼就是在CustomRenderer中重寫drawShape這個方法。

而這個方法其實依賴的是這段代碼：

//CustomRenderer.js

drawShape(parentNode, element) {
    let shape = this.bpmnRenderer.drawShape(parentNode, element)
    return shape
}
複製代碼

也就是說是靠this.bpmnRenderer.drawShape這個方法將element對象轉換爲一個svg形式的節點。

最開始個人想法是在轉換以前使用modeling.setColor方法來修改element的相應樣式：

//CustomRenderer.js

drawShape(parentNode, element) {
  modeling.setColor(element, {
     fill: null,
     stroke: color
    })
    let shape = this.bpmnRenderer.drawShape(parentNode, element)
    return shape
}
複製代碼

但這種方式失敗了，打開控制檯報了一堆的紅色錯誤，大體就是進入了死循環，瀏覽器爆棧了。

想了一下其實也好理解，renderer的做用本就是將element進行渲染，可是在這個階段你又用setColor去修改element的這個屬性，那這樣確定就會形成遞歸循環渲染，因此這種作法被我否認了。

以後我想了一下，使用drawShape方法產生的東西會是什麼呢？帶着好奇我把生成的shape打印出來看了一下，發現他就是一個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方法專門用來處理節點顏色的問題，核心代碼就這麼些：

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']
複製代碼

這個寫前端的可能都知道，主要是怕後臺人員不瞭解因此提一嘴。

如今保存刷新頁面後就能夠看到效果了 😊：

修改contextPad上的節點顏色

contextPad上的節點顏色，事實上和修改palette是同樣的。由於它們共用了一個className。所以若是你改了palette上的樣式，contextPad上的也會被修改。

在渲染完成以後用戶手動觸發修改節點顏色

這個功能的主要做用是說，在渲染成功以後，可能須要用戶手動去修改某個節點的顏色。

額...這其實在全網最詳bpmn.js教材-poperties-panel篇(下)中也說到過了吧，核心方法就是用使用modeling.setColor()方法去修改。

const modeling = this.modeler.get('modeling')
modeling.setColor(element, {
  fill: 'blue',
  stroke: 'red'
})
複製代碼

在此再也不重複說了 😁。

另外我在官網也發現了有關於colors的案例，它主要是能配合xml標籤上的屬性來進行相應顏色的修改，有興趣的小夥伴能夠看一下：

bpmn-js colors

bpmn-js-task-priorities

後語

從2019年12月10日最開始寫此教材到如今已經四個月了，bpmn.js交流羣也從最開始的3,4我的擴展到了如今的200人，仍是挺欣慰的。

也很感謝羣裏的一些小夥伴能熱心的爲新來的小夥伴解答問題提供幫助，我在此代接受過幫助的小夥伴謝謝你們！

不過也但願能有更多的小夥伴能積極的參與到bpmn-chinese-document的項目中來，也算是爲國內bpmn.js的社區貢獻一份力吧💪。

最後還請能給bpmn-chinese-document一個Star🌟，編寫整理都不易，感謝🙏。

喜歡霖呆呆的小夥還但願能夠關注霖呆呆的公衆號 LinDaiDai 或者掃一掃下面的二維碼👇👇👇.

我會不定時的更新一些前端方面的知識內容以及本身的原創文章🎉

你的鼓勵就是我持續創做的主要動力 😊.

本文使用 mdnice 排版