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 工作！