Estoy usando cytoscape para crear dinámicamente una visualización de red y tengo problemas para configurar el diseño correctamente. Ocasionalmente, se crea una colección de nodos y se adjunta a un node principal. Luego llamo a la siguiente función para diseñar los nuevos nodos y centrar el gráfico en ese padre:

 static DoLayout(node) { setTimeout(() => { cy.layout({ name: 'cose', fit: false, nodeRepulsion: function (node) { return 99999; }, componentSpacing: 100, padding: 100, randomize: false, animate: 'end', animationEasing: 'ease-in-out', animationDuration: 350, stop: () => { setTimeout(() => { cy.zoom(.8) cy.center(node); }, 100); } }) .run(); }, 50); }

Y aquí está el problema:

¿Existe la posibilidad de que estas tres acciones de diseño , centro y zoom sucedan al mismo tiempo? O suavemente?

Editar: ( fit: true, )

Establecer fit en true , como lo sugiere canbax , resuelve el problema de 'parpadeo' que se muestra en el gif. Sin embargo, todavía no produce una transición suave (¿animación?) Al hacer zoom y centrar. Además, no quiero que el gráfico se aleje por completo, luego se acerque y se centre.