指定 Palette 容器

開始之前需要瞭解一下自定義 Palette

開始

1. 去除預設工具欄

 // 去除預設工具欄
      const modules = BpmnModeler.prototype._modules
      const index = modules.findIndex(it => it.paletteProvider)
      modules.splice(index, 1)

      this.bpmnModeler = new BpmnModeler({..})

2. 宣告容器

<div ref="palette"></div>

<div class="canvas" ref="canvas"></div>

const canvas = this.$refs.canvas
const palette = this.$refs.palette
// 建模
this.bpmnModeler = new BpmnModeler({
  // 主要容器
  container: canvas,
  // 工具欄容器
  paletteContainer: palette

  // ...
})

3. 讓 bpmn 使用指定的容器

CustomPalette.js

// 注入需要的資料，其中有指定的容器
Palette.$inject = [
  'eventBus',
  'canvas',
  'elementFactory',
  'create',
  'config.paletteContainer', // canvas 容器
  'config.paletteEntries' // palette 容器
]

// 拿到容器
function Palette(
  // ...
  paletteContainer,
  paletteEntries
) {
  this._entries = paletteEntries
  this._paletteContainer = paletteContainer
  // ..
}

// 使用指定的容器
Palette.prototype._init = function() {
  // ...
  // var parentContainer = this._getParentContainer()
  // 獲取傳入的工具欄容器
  var container = (this._container = this._paletteContainer)
  // 未找到 使用預設
  if (!container) {
    container = this._container = domify(Palette.HTML_MARKUP)
  } else {
    // 為傳入的工具欄容器 建立子元素
    addClasses(container, 'custom-palette')
    const entries = domQuery('.custom-palette-entries', container)
    const toggle = domQuery('.custom-palette-toggle', container)

    if (!entries) {
      container.appendChild(
        domify('<div class="custom-palette-entries"></div>')
      )
    }
    if (!toggle) {
      container.appendChild(domify('<div class="custom-palette-toggle"></div>'))
    }
  }
  // parentContainer.appendChild(container) // 這句會將 palette 加入 canvas
  // ...
}

Palette.HTML_MARKUP =
  '<div class="custom-palette">' +
  '<div class="custom-palette-entries"></div>' +
  '<div class="custom-palette-toggle"></div>' +
  '</div>'

其中容器的樣式隨便寫，我修改成了 custom-palette 這個類名，需要自己去修改 css
這裡我為了簡單，直接找到 原始碼 css 直接全域性替換 成我的類名修改後的 diagram-js.less

強烈建議拿官方原始碼直接改 Palette.js

以下是原始碼，是短短的兩句，可以對比一下

Palette.prototype._init = function() {
  // ...

  var container = (this._container = domify(Palette.HTML_MARKUP))
  parentContainer.appendChild(container)

  // ...
}

最後

程式碼 CustomPalette.js

建議直接取官方程式碼修改，安全又保險！:Palette.js

完整目錄： ? 點選這裡