bpmn 前端动态添加工具栏节点到process 中

要在 BPMN 前端动态添加工具栏节点到 process 中，可以使用 bpmn-js 框架和原生 JavaScript。

以下是一个简单的示例：

// 获取 BPMN 模型实例
var bpmnModeler = new BpmnModeler({
  container: '#canvas'
});

// 获取工具栏容器
var toolbarContainer = document.querySelector('#toolbar');

// 创建新的工具栏节点
var customElement = document.createElement('div');
customElement.innerHTML = '<button id="custom-button">Custom Button</button>';
toolbarContainer.appendChild(customElement);

// 获取新创建的按钮
var customButton = document.getElementById('custom-button');

// 添加点击事件
customButton.addEventListener('click', function() {
  // 在 process 中添加新的节点
  var modeling = bpmnModeler.get('modeling');
  modeling.createShape({
    type: 'bpmn:Task',
    x: 100,
    y: 100
  });
});

在这个示例中，我们首先获取了 BPMN 模型实例，并获取了工具栏容器。接着，我们创建了一个新的工具栏节点，并将其添加到工具栏容器中。然后，我们获取了新创建的按钮，并添加了一个点击事件。在点击事件中，我们使用模型实例的 `modeling` 对象，在 process 中添加了一个新的节点。

当然，这只是一个简单的示例，你可以根据自己的需求修改和扩展它。