bpmn.js 操作教程：编辑和删除节点

1. 安装 bpmn.js

要使用 bpmn.js，首先需要将其安装到您的项目中。您可以通过以下方式安装 bpmn.js：

npm install bpmn-js

安装完成后，您就可以在您的项目中使用 bpmn.js 了。

2. 创建 bpmn.js 实例

要创建 bpmn.js 实例，您需要使用以下代码：

const bpmnJS = new BpmnJS();

这将创建一个 bpmn.js 实例，您可以将其用于创建和操作 BPMN 2.0 模型。

3. 加载 BPMN 2.0 模型

要加载 BPMN 2.0 模型，您可以使用以下代码：

bpmnJS.importXML(xml);

其中，xml 是 BPMN 2.0 模型的 XML 字符串。

4. 编辑节点

要编辑节点，您可以使用以下代码：

const element = bpmnJS.get('elementId');

// 编辑节点的属性
element.businessObject.name = 'New Name';

// 更新节点的图形
bpmnJS.getGraphics('elementId').attr({ x: 100, y: 200 });

其中，elementId 是要编辑的节点的 ID。

5. 删除节点

要删除节点，您可以使用以下代码：

bpmnJS.remove('elementId');

其中，elementId 是要删除的节点的 ID。

6. 保存 BPMN 2.0 模型

要保存 BPMN 2.0 模型，您可以使用以下代码：

bpmnJS.exportXML(function(err, xml) {
  // 保存 XML 字符串到文件中
});

其中，xml 是 BPMN 2.0 模型的 XML 字符串。

7. 渲染 BPMN 2.0 模型

要渲染 BPMN 2.0 模型，您可以使用以下代码：

bpmnJS.render();

这将在页面上渲染 BPMN 2.0 模型。

8. 操作节点

要操作节点，您可以使用以下代码：

// 选择节点
const element = bpmnJS.get('elementId');

// 移动节点
bpmnJS.getGraphics('elementId').attr({ x: 100, y: 200 });

// 调整节点的大小
bpmnJS.getGraphics('elementId').attr({ width: 200, height: 100 });

// 删除节点
bpmnJS.remove('elementId');

其中，elementId 是要操作的节点的 ID。

9. 事件处理

您可以为 bpmn.js 注册事件处理程序，以便在发生特定事件时执行某些操作。例如，您可以注册一个事件处理程序，以便在节点被选择时执行某些操作。

bpmnJS.on('element.click', function(e) {
  // 当节点被点击时执行某些操作
});

其中，element.click 是要注册的事件，function(e) 是要执行的操作。