bpmnjs元素删除事件

<div class="article-content">
  <h2>深入解析bpmnjs元素删除事件：从原理到实践</h2>
  <p>作为流程建模的核心工具，bpmn.js的<strong>元素删除事件</strong>是开发者必须掌握的关键机制，本文将系统讲解删除事件的触发原理、监听方式以及实际应用场景，帮助您构建更健壮的BPMN流程编辑器。</p>
  <div class="highlight-box">
    <h3>核心概念速览</h3>
    <ul>
      <li><strong>事件类型：</strong>删除操作触发<code>shape.remove</code>或<code>connection.remove</code>事件</li>
      <li><strong>事件阶段：</strong>分为<em>预删除（before）</em>和<em>已删除（after）</em>两个阶段</li>
      <li><strong>事件对象：</strong>包含element（元素）、oldParent（原父级）等关键属性</li>
    </ul>
  </div>
  <h3>一、监听删除事件的三种方式</h3>
  <h4>1. 通过EventBus直接监听</h4>
  <pre><code class="language-javascript">eventBus.on('shape.remove', function(event) {
  const { element, oldParent } = event;
  console.log('删除元素:', element.id);
});</code></pre>
  <h4>2. 使用Modeling API的删除钩子</h4>
  <pre><code class="language-javascript">modeling.removeShape(shape, {
  beforeRemove: (context) => {
    // 删除前确认
    return confirm('确定删除该节点?');
  },
  afterRemove: (context) => {
    // 删除后记录日志
    auditLog(context.element);
  }
});</code></pre>
  <h4>3. 借助BPMN模块扩展（推荐）</h4>
  <pre><code class="language-javascript">export default class DeleteTracker {
  constructor(eventBus) {
    eventBus.on(['shape.remove', 'connection.remove'], this.logDeletion);
  }
  logDeletion(event) {
    // 实现删除审计逻辑
  }
}</code></pre>
  <h3>二、典型应用场景</h3>
  <div class="case-scenario">
    <h4>场景1：删除关联元素</h4>
    <p>当删除<em>任务节点</em>时自动清理关联的<em>数据对象</em>：</p>
    <pre><code class="language-javascript">eventBus.on('shape.remove', (event) => {
  const associations = elementRegistry.filter(
    el => el.businessObject.sourceRef === event.element.businessObject
  );
  associations.forEach(assoc => modeling.removeShape(assoc));
});</code></pre>
  </div>
  <div class="case-scenario">
    <h4>场景2：删除权限控制</h4>
    <p>基于RBAC实现细粒度删除控制：</p>
    <pre><code class="language-javascript">eventBus.on('elements.delete', function(context) {
  const canDelete = context.elements.every(
    el => permissions.can('delete', el.type)
  );
  if (!canDelete) throw new Error('无权删除该元素类型');
});</code></pre>
  </div>
  <h3>三、性能优化建议</h3>
  <ol>
    <li>批量删除时使用<code>elements.delete</code>代替单元素事件</li>
    <li>高频操作场景考虑<code>eventBus.off</code>临时解除监听</li>
    <li>复杂校验逻辑使用Web Worker处理</li>
  </ol>
  <div class="warning-note">
    <p>️ 重要提示：删除网关节点时需特别注意后续流的自动处理，建议结合<code>bpmnRules</code>模块进行合规性检查</p>
  </div>
  <h3>四、调试技巧</h3>
  <p>通过以下命令查看完整事件流：</p>
  <pre><code class="language-javascript">// 启用调试模式
bpmnJS.on('import.done', () => {
  eventBus.on('*', function(event) {
    console.debug(event.type, event);
  });
});</code></pre>
  <div class="reference-section">
    <h4>参考资料</h4>
    <ul>
      <li>bpmn.io官方文档 - EventBus章节</li>
      <li>BPMN 2.0规范 - 元素生命周期定义</li>
      <li>GitHub案例 - bpmn-js-delete-behavior扩展</li>
    </ul>
  </div>
</div>
<style>
  .article-content {
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  h2, h3, h4 {
    color: #2c3e50;
    margin-top: 1.5em;
  }
  pre {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    overflow-x: auto;
  }
  code {
    font-family: 'SFMono-Regular', Consolas, monospace;
  }
  .highlight-box {
    background: #f0f7ff;
    border-left: 4px solid #3498db;
    padding: 15px;
    margin: 20px 0;
  }
  .case-scenario {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    margin: 15px 0;
    border-radius: 4px;
  }
  .warning-note {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 12px;
    margin: 20px 0;
  }
  .reference-section {
    margin-top: 40px;
    font-size: 0.9em;
    color: #7f8c8d;
  }
</style>