Todos los componentes (244)

Editor de flujos

Gestión · WorkflowBuilder

Qué es y cuándo usarlo

Un editor de flujos de nodos y conexiones: añadir pasos, moverlos, conectar una salida con una entrada y ver los problemas del flujo.

Cuándo usarlo

Automatizaciones («cuando entra un pedido, comprueba el stock y emite la factura»), procesos de aprobación, integraciones.
types son los tipos de paso, cada uno con sus inputs y outputs. Un puerto con kind solo se conecta con otro del mismo tipo; una entrada required tiene que tener algo conectado; una entrada multiple admite varias conexiones.
Los nodos se mueven arrastrando la cabecera o con las flechas (Mayúsculas para saltos grandes), se renombran con F2 o su botón y se borran con Supr. Se conecta pulsando una salida y después una entrada.
El lienzo se desplaza arrastrando el fondo y se acerca con los botones o con Control y la rueda; «Ordenar» los coloca por capas según las flechas.
acyclic (por defecto) no deja cerrar círculos. runState pinta el estado de cada nodo en una ejecución.

Cuándo no

Un proceso lineal de pocos pasos: Steps o Wizard.
El editor no ejecuta nada: entrega el flujo por onChange y la ejecución es cosa del servidor.

Teclado: todo lo del lienzo se puede hacer también desde el panel de la derecha: la lista de conexiones (con su botón de quitar) y el formulario de conectar con dos desplegables.

Accesibilidad: cada nodo es un grupo con nombre, cada puerto un botón que dice de qué nodo es, los problemas del flujo van escritos y cada cambio se anuncia.

Aspecto fino: variables --amset-flow-line (las conexiones) y --amset-flow-dot (la rejilla de puntos del fondo).

Cómo se ve

Tipo de nodo

Arrastra un nodo o muévelo con las flechas. Pulsa una salida y después una entrada para conectarlas. Supr borra el nodo elegido.

<WorkflowBuilder
  label="Qué pasa cuando entra un pedido"
  types={tipos}
  value={flujo}
  onChange={setFlujo}
  acyclic
  height="22rem"
  runState={{ n1: "done", n2: "running" }}
/>

Props

Se importa con import { WorkflowBuilder } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que flujo es («Alta de un cliente»). Obligatorio.
`onChange`obligatoria	`(value: Workflow) => void`	—
`types`obligatoria	`readonly WorkflowNodeType[]`	Los tipos de nodo que se pueden poner, con sus entradas y salidas.
`value`obligatoria	`Workflow`	—
`acyclic`	`boolean`	No dejar cerrar circulos. Por defecto, si.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`height`	`string`	El alto del lienzo. Por defecto, 32 rem.
`readOnly`	`boolean`	Se ve y se recorre, pero no cambia.
`runState`	`Readonly<Record<string, NodeRunState>>`	El estado de cada nodo en una ejecucion (en marcha, hecho, con error), para seguirla sobre el lienzo.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: