mxgraph：我想添加一個按鈕來禁用/啟用圖形和工具欄

Question

我試圖通過不允許帶有以下代碼的圖形上的單元格來禁用圖形。 graph.setCellsSelectable(false); 但它不起作用，仍然可以選擇單元格，（僅禁用調整大小）

對於要禁用的工具欄，我嘗試刪除或替換 ondrag 事件，對嗎？ 理論上，我認為 mxgraph 有自己的事件處理程序用於拖動工具欄項。

mx_toolbar.appendChild(
    mxUtils.button("Disable/Enable", function() {
         document.querySelectorAll('.toolbar > button').addEventListener(function (e) {
             e.preventDefault()
             return false;
         });
    }
)

希望你的幫助。 我不介意只要它是有效的解決方案。 謝謝

Answer 1

您可以簡單地將要禁用的區域與 css 一起覆蓋，而不是刪除或修改事件處理程序。

      var toolbarContainer = document.querySelector(".toolbar");
      var overlay = document.querySelector(".toolbar-overlay")

      if (!overlay) {
        overlay = document.createElement('div')
        overlay.className = 'toolbar-overlay'
        toolbarContainer.appendChild(overlay)
      } else {        
        overlay.parentNode.removeChild(overlay)
      }

這是覆蓋div的css

.toolbar-overlay {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background: #e1e1e1;
}

• 注意：您應該確保覆蓋層 div 的父 div 必須相對定位以使這個 css 工作！