He estado tratando de crear un elemento de entrada simple para buscar ID y centrarme en vértices específicos, como se muestra a continuación:
Y el código parece estar funcionando con este método simple:
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; }El problema comienza después de la primera búsqueda, donde mi pantalla superior izquierda se enfoca en el vértice deseado, pero a partir de ahí estoy habilitado para desplazarme hacia arriba o hacia la izquierda.
Pantalla después de la búsqueda
Además, si me desplazo antes de buscar algo, parece que mi graph.view.translate no se actualiza a mi posición actual, por lo tanto, cuando busco un vértice, se enfoca en una ubicación diferente en lugar del vértice esperado.
¿Hay algún método de MxGraph Library que me esté faltando? Probé graph.getView().setTranslate(translate) y graph.panGraph(translate) pero el comportamiento es el mismo.
Gracias de antemano
Entonces, encontré una solución para este problema, pero no de la manera más conveniente.
Por lo que entendí, las barras de desplazamiento nativas y la panorámica de mxGraph son enfoques diferentes para el movimiento de la pantalla, cuando se desplaza, no necesariamente está actualizando su posición de mxGraph, pero cuando se desplaza con la biblioteca de mxGraph, está arrastrando todas las celdas a lo largo de la pantalla, en lugar de "desplazarse" hacia ellos.
Deshabilité la opción de desplazamiento panorámico de mxGraph y simplemente usé el método nativo de javascript scrollTo, como se muestra a continuación, espero que ayude.
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' }); }* El flowMap.findNodeByIdOrName en la última imagen y el findById (id) en la publicación de la pregunta son mis propios métodos para buscar en mi matriz de vértices.