I've been trying to make a simple input element to search for id's and focus on specific vertexes, as shown below:
And the code seems to be working with this simple method:
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;
}
The problem starts after the first search, where my top left screen focuses on the desired vertex but from there on I'm enabled to scroll up or left.
Also, if I scroll before searching for anything, it seems that my graph.view.translate doesn't update to my current position, so, when I search for a vertex it focuses on a different location instead of the expected vertex.
Is there any method from MxGraph Library that I'm missing? I've tried graph.getView().setTranslate(translate) and graph.panGraph(translate) but the behaviour is the same.
Thank you in advance
So, I found a solution for this problem but not in the most convenient way.
For what I understood, the native scrollbars and the mxGraph panning are different approaches to the display movement, when you scroll you aren't necessarily updating your mxGraph position but when you pan with the mxGraph library you are dragging all the cells along the screen, instead of "scrolling" to them.
I disabled the mxGraph panning option and simply used the javascript native method scrollTo, as show below, I hope it helps.
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'
});
}
*The flowMap.findNodeByIdOrName on the last image and the findById(id) on the question post are my own methods to search on my array of vertexes.