mxgraph中的某些操作后如何有效地更新图形模型？

Question

在mxgraph中连续拖放后，cell的parentInfo丢失

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

Drag and Drop is handled using connect, the logic behind is simple. Removing the existing parent connection and establishing new edge connection with target node.

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，因此边缘构建失败得很惨。

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

同样onload 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 时，它已经处于糟糕状态。图表中断

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

mxgraph中的某些操作后如何有效地更新图形模型？

How to update the graph model efficiently after certain operation in mxgraph?

javascript

tree

svg

drag-and-drop

mxgraph

重现步骤：