【bpmn.js 使用總結】五、自定義内容面闆 contextPad

自定義 contextPad

在 自定義 cusRenderer 的基礎上繼續修改

案例代碼在這裡取：

customContextPad

開始

自定義 contextPad

和

自定義 Palette

步驟差不多

1. 建立相關檔案

建立自定義内容面闆的相關檔案，結構如下

| -- contextPad
    |-- CustomContextPad.js
    |-- index.js
           

這裡比較友善直接去官方的 Demo 中取代碼

bpmn-js-example-custom-elements

接下來是 index.js

import CustomContextPad from './CustomContextPad'

export default {
  __init__: ['customContextPad'],
  customContextPad: ['type', CustomContextPad]
}
           

2. 引用

引入剛剛建立的檔案

export default {
  // ...
  init() {
    this.bpmnModeler = new BpmnModeler({
      additionalModules: [customContextPad]
    })
    // ...
  }
}
           

你會發現自定義内容面闆已經成功了,多出了三個面闆

3. 檢視 CustomContextPad

回到

CustomContextPad.js

,其中一段代碼，如下

'append.low-task': {
        group: 'model',
        className: 'bpmn-icon-task red',
        title: translate('Append Task with low suitability score'),
        action: {
          click: appendServiceTask(SUITABILITY_SCORE_LOW),
          dragstart: appendServiceTaskStart(SUITABILITY_SCORE_LOW)
        }
      }
           

是以我們可以通過類名來修改外觀，

建立一個

bpmn.less

檔案作為自定義樣式

bpmn.less

.bpmn-icon-task.red {
  color: red;
}
.bpmn-icon-task.yellow {
  color: yellow;
}
.bpmn-icon-task.green {
  color: green;
}
           

vue 注意引用，不要在局部樣式中引入，會無效

這裡為了友善，直接在 main.js 引入

可以發現内容面闆樣式已經更改，但是渲染還沒有效果，這裡還需要修改一下渲染方法。

修改 paletteEntries

之前已經将自定義渲染方法集中在

paletteEntries.js

中

由于在

CustomContextPad.js

定義了得分

const SUITABILITY_SCORE_HIGH = 100
const SUITABILITY_SCORE_AVERGE = 50
const SUITABILITY_SCORE_LOW = 25
           

并指派給每個元素的

businessObject.suitable

這樣我們就可以在渲染的時候判斷得分展示對應的分數

paletteEntries.js

function drawShape(parentNode, element, bpmnRenderer) {
  const shape = bpmnRenderer.drawShape(parentNode, element)
  const suitable = element.businessObject.suitable
  let color = '#52B415' // 預設顔色
  if (suitable) {
    if (suitable > 50) {
      color = 'green'
    }
    if (suitable === 50) {
      color = 'yellow'
    }
    if (suitable < 50) {
      color = 'red'
    }
  }
  if (is(element, 'bpmn:Task')) {
    const height = 80
    const width = 100
    element.width = width
    element.height = height
    const rect = drawRect(parentNode, width, height, TASK_BORDER_RADIUS, color)

    prependTo(rect, parentNode)

    svgRemove(shape)

    return shape
  }

  const rect = drawRect(parentNode, 30, 20, TASK_BORDER_RADIUS, color)

  svgAttr(rect, {
    transform: 'translate(-20, -10)'
  })

  return shape
}
           

大功告成！

最後

以上，隻是簡單舉例了如何修改自定義内容面闆。

如果去除它預設的内容，由于使用幾率比較少,可以修改它的提供器。

下一步 [自定義屬性面闆]

相關

可能對你有幫助的官方資源：

• bpmn-js-example-custom-elements

目錄：

• 基礎使用
• 了解 BPMN 内部
• 自定義 Palette
• 自定義 Palette => 指定 Palette 容器
• 自定義 Renderer
• 自定義 contextPad
• 自定義連線和箭頭的顔色
• 自定義規則
• 自定義 properties-panel
• 右上角小地圖
• 總結常用 API 🚩
• 為 Viewer 添加一些功能
• bpmn-camunda DEMO