He intentado diferentes formas de implementar esta belleza, pero parece que no funciona. Mi problema es que cuando presiono el botón, quiero cambiar el diseño del gráfico, lo cual sucede y me alegro por ello, pero también quiero que mi gráfico esté centrado (encajar) en la pantalla. El primer clic del botón cambia la dirección, pero no se ajusta a la instancia. Para ajustar la instancia, necesito presionar el botón por segunda vez. ¿Supongo que tiene que ver con JS asíncrono o? Este es mi código:

 const onChangeTreeLayout = useCallback( (treeLayoutDirection) => { const layoutedElements = getLayoutedGraphElements( elements, treeLayoutDirection, setTreeLayoutDirection ); setElements(layoutedElements); }, [elements] );

Luego, cómo obtengo la instancia y la desencadeno a continuación: Nota: no puedo usar el gancho useReactFlow() ya que decidimos no migrar a una versión más nueva. Pero useZoomPanHelper hace su trabajo de todos modos.

 const reactFlowInstance = useZoomPanHelper(); <button onClick={() => { onChangeTreeLayout('TB'); reactFlowInstance.fitView(); }} > Horizontal Layout </button>

También intenté poner la función .fitView() dentro de onChangeTreeLayout pero obtengo el mismo comportamiento.