GoJS图表更新延迟：事务提交难题破解指南

2024-03-06 04:13:34

GoJS 图表事务提交后不更新：问题与解决方案

问题

在使用 GoJS 图表时，你是否遇到过这样的问题：当你执行搜索操作并希望高亮显示特定节点时，图表却迟迟不更新，无法移动到正确的元素位置？

事务机制

GoJS 使用事务机制管理对模型的更改。当启动一个事务时，模型处于中间状态，直到事务提交。在此期间，图表不会反映模型的更改。

异步更新

在典型的搜索功能实现中，你通常会使用 startTransaction 开始一个事务，将 IsHighlighted 属性设置为 true，然后启动另一个事务将其他节点的 IsHighlighted 属性设置为 false。这些事务都是异步的，会在稍后的时间提交。

因此，在你调用移动元素之前，图表不会更新以反映模型的更改，因为事务尚未提交。

解决方案

要解决这个问题，可以使用 commitTransaction 方法显式提交事务。这将强制图表立即更新以反映模型的更改。

修改后的搜索功能实现如下：

findNodeByName(name) {
  let foundNode = false;

  this.myDiagram.nodes.each((node) => {
    if (name && node.data.Name.toLowerCase().includes(name.toLowerCase())) {
      // Only call the model's set method if the value is changing
      if (!node.data.IsHighlighted) {
        node.diagram.startTransaction('selected');
        node.diagram.model.setDataProperty(node.data, "IsHighlighted", true);
        node.diagram.commitTransaction('selected'); // Commit the transaction immediately
      }
      foundNode = true; // Node found, no need to set to false for other nodes
    } else {
      // Only call the model's set method if the value is changing
      if (node.data.IsHighlighted) {
        node.diagram.startTransaction('selected');
        node.diagram.model.setDataProperty(node.data, "IsHighlighted", false);
        node.diagram.commitTransaction('selected'); // Commit the transaction immediately
      }
    }
  });

  return foundNode;
}