基于mxgraph开发如何拦截REMOVE_CELLS事件阻止删除单元格？

问题根因 #

mxEvent.REMOVE_CELLS 属于后置通知类事件，触发时单元格删除逻辑已经执行完成，该事件仅用于删除完成后的状态同步，因此调用evt.consume()无法终止已经执行完的删除操作，自然无法实现前置拦截。

最优解决方案：重写removeCells方法 #

所有mxGraph的删除操作（键盘触发、右键菜单触发、代码主动调用等）最终都会调用graph.removeCells方法，直接重写该方法即可实现全场景的删除拦截，代码示例如下：

// 先备份原始删除方法
const nativeRemoveCells = graph.removeCells.bind(graph)

// 重写删除逻辑，加入自定义确认
graph.removeCells = function(cells, includeEdges) {
  // 此处替换为你的自定义确认逻辑，比如弹窗、异步确认等
  const userConfirmed = confirm('确认删除选中内容？')
  if (userConfirmed) {
    // 用户确认后调用原生方法执行实际删除
    return nativeRemoveCells(cells, includeEdges)
  }
  // 用户取消时直接返回，不执行删除操作
  return []
}

注意事项 #

• 该方案完全兼容mxGraph自带的undo/redo能力，仅当用户确认删除时才会产生历史记录，取消操作不会污染历史栈
• 如果需要做异步确认（比如自定义弹窗组件是异步的），可以把原生方法调用放在异步回调里，逻辑完全通用

内容的提问来源于stack exchange，提问作者ssantos