MxGraph：无法搜索和聚焦单元格

Question

我一直在尝试制作一个简单的输入元素来搜索 id 并关注特定的顶点，如下所示：

Screen before Searching

并且代码似乎使用了这个简单的方法：

function searchForNode() {
    const id = document.getElementById("input-search-id").value;
    const { vertex } = findById(id);

    const point = new mxPoint(-(vertex.geometry.x), -(vertex.geometry.y));
    graph.view.translate = point;
}

第一次搜索后问题开始出现，我的左上角屏幕聚焦在所需的顶点，但从那里我可以向上或向左滚动。

Screen after Searching

此外，如果我在搜索任何内容之前滚动，我的 graph.view.translate 似乎不会更新到我的当前位置，因此，当我搜索一个顶点时，它会关注不同的位置而不是预期的顶点。

MxGraph 库中是否有任何我遗漏的方法？我试过 graph.getView().setTranslate(translate) 和 graph.panGraph(translate) 但行为是一样的。

提前致谢

Answer 1

所以，我找到了解决这个问题的方法，但不是最方便的方法。

据我了解，本机滚动条和 mxGraph 平移是显示移动的不同方法，当您滚动时，您不一定会更新 mxGraph 位置，但是当您使用 mxGraph 库平移时，您将拖动所有沿着屏幕的单元格，而不是“滚动”到它们。

我禁用了 mxGraph 平移选项，只是使用了 javascript 本机方法 scrollTo，如下所示，希望对您有所帮助。

function searchForNode() {
  const inputValue = document.getElementById("input-search-id").value;
  const { vertex } = flowMap.findNodeByIdOrName(inputValue);
  if( !vertex ) return null;
  
  window.scrollTo({
    top: vertex.geometry.y - MARGIN_TO_CENTER,
    left: vertex.geometry.x - MARGIN_TO_CENTER,
    behavior: 'smooth'
  });
}

*最后一张图片上的 flowMap.findNodeByIdOrName 和问题 post 上的 findById(id) 是我自己搜索顶点数组的方法。

MxGraph：无法搜索和聚焦单元格

MxGraph: Can't Search and Focus on cells

javascript

mxgraph