MxGraph - 解决通过mxgraph外部添加进mxgraph的mxCell不能立马被删除的问题

连着两个项目使用mxGraph来集成画流程图的功能，被这个东西折腾的够呛。
突然又遇到mxGraph相关的问题，搞了一上午没解决掉，突然找到解决方法，记录一下过程。

背景

项目中集成了mxGraph，可以把项目中的一些代表步骤的 activity 通过 拖拽 或者 点击 的方法添加进mxGraph的画布中（项目中的activity => mxGraph中的mxCell）。

如下图：左边是项目中的工具栏，右边是mxGraph的画布

问题

添加 -> 选中 -> 删除失败 -> 点击画布 -> 选中 -> 删除成功

新建mxGraph工程，从项目的工具栏中添加一个 activity（mxCell） 到 mxGraph的画布中，此时通过delete键或者退格键删除这个新添加的mxCell，发现删除事件并没有被触发。此时点击一下画布，重新选中该mxCell，按delete键或者退格键， 删除成功。

过程

这个现象可以看出，如果在添加后想办法自动点击一下画布应该就可以解决问题，于是就用各种办法去实现用代码对画布容器的点击，但是均以失败告终。

一上午时间过去了…

换个思路，这个过程也像是 画布失去焦点 -> 删除失败 -> 获得焦点 -> 删除成功。

失去焦点，获取焦点，焦点 焦点 焦点 焦焦焦！！！！

突然想到项目代码中有一句这样的代码

  // 解决不能聚焦问题（无法监听按键），参考 https://jgraph.github.io/mxgraph/docs/known-issues.html#Focus
  graph.container.setAttribute('tabindex', '-1');
  graph.container.focus();

这块代码在新建mxGraph工程的过程中出现，看样子是让mxGraph的画布容器获取焦点的操作，赶紧复制过来用起来！

结果

幸福来得太突然，困扰了一上午 尝试各种方法都没有解决的问题就这两行代码解决掉了。

结论

反思一下， 还是对mxGraph的不熟悉，完全不知道还有它还有获取焦点和失去焦点一说。

经过两个项目对mxGraph的使用，虽然只是略微接触，但是对它的印象已经从一开始的一脸懵逼摸不着头脑头皮发麻 转换成了 厉害了，功能还挺强大。