【bpmn.js 使用总结】七、指定 Palette 容器

指定 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

---

目录：

• 基础使用
• 了解 BPMN 内部
• 自定义 Palette
• 自定义 Palette => 指定 Palette 容器
• 自定义 Renderer
• 自定义 contextPad
• 自定义连线和箭头的颜色
• 自定义规则
• 自定义 properties-panel
• 右上角小地图
• 总结常用 API 🚩
• 为 Viewer 添加一些功能
• bpmn-camunda DEMO