Flow Studio

Por que isto existe

Trabalho de backend é fácil de mostrar com números. Trabalho de interface não: aparece em se o arrasto parece grudado no cursor, se a aresta acompanha o nó, se o desfazer devolve as coisas exatamente para onde estavam.

As partes difíceis

Pan e zoom. O canvas mantém uma matriz de transformação única; a posição do ponteiro é convertida para o espaço do canvas uma vez, na borda do sistema — nada abaixo disso precisa saber de zoom.

Conexões que se comportam. As arestas se reroteiam conforme os nós se movem, e uma conexão em andamento se encaixa numa porta válida, não no pixel mais próximo.

Desfazer/refazer. Toda mutação é um par invertido; refazer é rodar o par ao contrário — a peça que a maioria dos editores erra de um jeito sutil.

Estado otimista. A edição não espera o servidor: o canvas é a verdade, um indicador mostra o atraso do save, e um conflito de versão vira uma escolha, com as duas versões descritas.

Execução que dá para assistir. Rodar um fluxo dispara um POST no serviço .NET, que percorre o grafo e se narra como Server-Sent Events numerados — os nós acendem quando o passo começa, não quando termina, e cada conexão mostra o payload que passou por ela. Os mesmos eventos ficam disponíveis por polling nas redes onde o stream não abre.

Uma segunda porta. Um editor de nós é quase o pior caso para tecnologia assistiva. O canvas é totalmente operável por teclado, conexões incluídas, e ao lado dele o mesmo grafo existe como lista — selecionar, conectar, apagar, como botões comuns.

Por que Vue aqui

O resto deste portfólio é React. Este é Vue 3 e Nuxt, de propósito: o modelo de reatividade cai bem num canvas com muitos nós pequenos mudando de forma independente, e prefiro mostrar dois frameworks a alegar familiaridade com os dois.