Flow Studio

Por qué existe esto

El trabajo de backend es fácil de enseñar con números. El de interfaz no: aparece en si un arrastre se siente pegado al cursor, si una arista sigue al nodo, si deshacer devuelve las cosas exactamente donde estaban.

Las partes difíciles

Pan y zoom. El lienzo mantiene una única matriz de transformación; la posición del puntero se convierte al espacio del lienzo una sola vez, en el borde del sistema: nada por debajo de eso tiene que saber de zoom.

Conexiones que se portan bien. Las aristas se reenrutan conforme los nodos se mueven, y una conexión en curso encaja en un puerto válido, no en el píxel más cercano.

Deshacer/rehacer. Cada mutación es un par invertido; rehacer es ejecutar el par en el otro sentido: la pieza que la mayoría de los editores falla de forma sutil.

Estado optimista. La edición no espera al servidor: el lienzo es la verdad, un indicador muestra cuánto va por detrás el guardado, y un conflicto de versión se convierte en una elección, con las dos versiones descritas.

Ejecución que se puede mirar. Ejecutar un flujo hace un POST al servicio .NET, que recorre el grafo y se narra a sí mismo como Server-Sent Events numerados: los nodos se activan cuando su paso empieza, no cuando termina, y cada conexión muestra el payload que la cruzó. Los mismos eventos están disponibles por polling en las redes donde el stream no llega a abrirse.

Una segunda puerta. Un editor de nodos es casi el peor caso para la tecnología asistiva. El lienzo es totalmente operable con teclado, conexiones incluidas, y a su lado el mismo grafo existe como lista: seleccionar, conectar, borrar, con botones normales.

Por qué Vue aquí

El resto de este portafolio es React. Este es Vue 3 y Nuxt, a propósito: el modelo de reactividad encaja con un lienzo de muchos nodos pequeños que cambian de forma independiente, y prefiero enseñar dos frameworks que afirmar familiaridad con ambos.