第二章: bpmn自定义工具栏palette

文章目录

• • 1. 工具栏整体样式修改
  • 2. 工具栏节点样式自定义

1. 工具栏整体样式修改

上一篇文章有所介绍，可以自行查看源码（diagram-js/lib/features/palette/palette.js）

Palette.prototype._update = function() {
  ...
  // 遍历节点，自定义class展示
  forEach(entries, function(entry, id) {
    var grouping = entry.group || 'default';
    var container = domQuery('[data-group=' + grouping + ']', entriesContainer);
    if (!container) {
      container = domify('<div class="group" data-group="' + grouping + '"></div>');
      entriesContainer.appendChild(container);
    }

    var html = entry.html || (
      entry.separator ?
        '<hr class="separator" />' :
        '<div class="entry" draggable="true"></div>');
    var control = domify(html);
    container.appendChild(control);

    if (!entry.separator) {
      domAttr(control, 'data-action', id);
	  // 节点有标题时，展示节点标题，可以通过控制栏查看生成效果（主要修改部分）
      if (entry.title) {
        domAttr(control, 'title', entry.title);
        control.innerHTML = `<span class='djs-palette-title'>${entry.title}</span>`
      }
      if (entry.className) {
        addClasses(control, entry.className);
      }
      if (entry.imageUrl) {
        control.appendChild(domify('<img src="' + entry.imageUrl + '">'));
      }
    }
  });
  ...
};
           

2. 工具栏节点样式自定义

1. 通过F12控制栏查看节点，可以看出工具栏展示节点都是DOM元素，可以通过css来修改展示效果。
2. 从代码可以得知，className是可以实现自定义的（getPaletteEntries）

'hand-tool': {
   group: 'tools',
   className: 'bpmn-icon-hand-tool',	// 自定义class
   show: '移动',
   title: translate('移动'),
   action: {
      click: function(event) {
        handTool.activateHand(event);
      }
   }
},