在 mxgraph 中进行某些操作后如何有效地更新图模型？答案

【问题标题】：How to update the graph model efficiently after certain operation in mxgraph?在 mxgraph 中进行某些操作后如何有效地更新图模型？
【发布时间】：2019-09-04 18:18:08
【问题描述】：

在mxgraph中连续拖放后，单元格的父信息丢失。

连续拖放后，单元格的子项和父项未更新。

拖放是使用connect处理的，背后的逻辑很简单。移除现有的父连接并建立新的边缘与目标节点的连接。

mxConnectionHandler.prototype.connect = function(
      source,
      target,
      evt,
      dropTarget
    ) {
      var sourceParentCell = getParentCell(source);
      if (sourceParentCell !== target) {
        graph.getModel().beginUpdate();
        try {
          var edges = graph.getEdgesBetween(sourceParentCell, source);
          _.each(edges, edge => {
            graph.getModel().remove(edge);
          });
          graph.insertEdge(parent, null, '', target, source);
        } finally {
          graph.getModel().endUpdate();
        }
      }
    };
  }

这里是单元格的单击事件处理程序，它在单击时提供有关单元格的信息及其直接父单元格信息。

graph.addListener(mxEvent.CLICK, function(sender, evt) {
      var cell = evt.getProperty('cell');
      if (cell && cell.id) {
        const nodeData = hierarchialData(graph, cell);
        console.log('cellInfo => ', JSON.stringify(nodeData));
        console.log(
          'parentInfo => ',
          JSON.stringify(getParentCell(cell).value)
        );
      }
    });

上面的代码对于两次拖动都可以正常工作，后来 parentInfo 丢失并显示单元格本身作为其父级。

在 Heroku 中部署：https://express-mxgraph.herokuapp.com/

演示：

当它到达节点：20-Double click to set name，你会注意到它的 parentInfo 是相同的：20-Double click to set name 而不是22-Double click to set name，因此边缘构造非常失败。

这里出了什么问题，我是否正确更新了顶点和边？

同时加载url，你可以观察到整个图形被拖拽到鼠标移动。这也应该避免。

重现步骤：

将14-Double click to set name移动到20-Double click to set name下

点击14-Double click to set name，你会看到cellInfo为14-Double click to set name，parentInfo为20-Double click to set name，这是正确的
现在将20-Double click to set name拖到22-Double click to set name下

单击20-Double click to set name，CellInfo 和ParentInfo 都包含20-Double click to set name。 ParentInfo 实际上应该包含22-Double click to set name。
所以单元格20-Double click to set name，它的状态已经很糟糕，当您现在尝试连接18-Double click to set name 时。图断了

【问题讨论】：

能否写一些步骤来重现您的问题？
@NickAth - 我已经通过上面的 gif 进行了演示。你要我写那些步骤吗？
在 gif 中我直接看到了错误（cellInfo 是 '12' 而它应该是 '14' 对吗？）但我没有看到之前采取的步骤导致了这个结果跨度>
没错，cellInfo是特定的cell信息，14-Double click to set name的onclick，cellInfo会是14即它自己的cell id信息，还有一个parentInfo给出它的cell的值即@987654342 @
@NickAth - 也更新了问题的重现步骤

标签： javascript svg tree drag-and-drop mxgraph

【解决方案1】：

由于我找不到任何克隆参考，并且深度克隆在 jGraph 本身及其未解决的问题中存在错误，因此我设法通过单元格的参考副本并重建目标下的单元格来解决此问题。

mxConnectionHandler.prototype.connect = function(source, target) {
  const nodeData = [{"id":"12","value":"12-Double click to set name","children":[{"id":"14","value":"14-Double click to set name"}]}]
  drawNodes(graph, nodeData, target, source); // recursively
};

【讨论】：