第二章: 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);
      }
   }
},