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

Question

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

连续拖放后，单元格的子级和父级没有得到更新。

拖放是使用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/

演示：

当它到达 node: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 as14-Double click to set name和 parentInfo as20-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。图表中断

标签： javascriptsvgtreedrag-and-dropmxgraph

Answer 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
};