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的使用，雖然只是略微接觸，但是對它的印象已經從一開始的一臉懵逼摸不着頭腦頭皮發麻 轉換成了 厲害了，功能還挺強大。