Flujo de negocio

Un ejemplo “de negocio”: el ciclo completo de un pedido, desde que el cliente llama hasta que da su opinión, con dos bucles reales (no solo decorativos), un estado de fallo que detiene el proceso donde ocurre, y una animación de progreso que rellena el camino recorrido hasta el paso que elijas — útil para paneles de seguimiento donde quieres mostrar “hasta dónde hemos llegado” en un proceso.

Edita el código y pulsa Run▶ Run↺ Reset

Qué estás viendo

El diagrama tiene 10 pasos en el camino principal (de “Cliente llama” a “Cliente da su opinión”), más un nodo de decisión final y dos bucles señalados en naranja:

1. Control de calidad → Fabricamos producto. Si el control de calidad encuentra un defecto, el proceso no avanza a “Enviamos al cliente”: vuelve a fabricar. Es un bucle corto, dentro de producción.
2. ¿Satisfecho? → Prepara contrato. Si el cliente no queda satisfecho al final, no se termina: se vuelve a preparar el contrato desde cero. Es un bucle largo, que reabre casi todo el proceso.

Pulsa 🔁 Defecto en control de calidad o 🔁 Cliente no satisfecho para disparar cada bucle: el enlace naranja correspondiente parpadea un momento (para que veas cuál bucle se activó) y luego el progreso rebobina automáticamente hasta el paso al que se vuelve — ese paso se queda completado, porque es justo ahí donde apunta la flecha naranja; solo lo que viene después vuelve a quedar pendiente — con una explicación en el panel de abajo de qué pasó y por qué.

La leyenda de colores (pendiente / completado / fallo / bucle) está siempre visible, no solo después de interactuar.

Simular un fallo

Elige un paso en el desplegable “Fallar en:” y pulsa ❌ Simular fallo: el proceso avanza (o retrocede) hasta justo ese paso y lo pinta en rojo — se detiene ahí, nada después se colorea solo, sin importar en qué paso estabas antes de pulsar. El panel de abajo explica qué paso falló y qué queda bloqueado. Para recuperarte, sube el deslizador y pulsa ▶ Animar: el paso fallido se trata igual que cualquier otro pendiente, así que se completa (en verde) y el proceso sigue con normalidad — o pulsa ↺ Reiniciar para empezar de cero.

Cómo funciona

• El modelo tiene ciclos reales: un enlace puede volver a un nodo anterior sin que GraphoJS se queje — no exige que el grafo sea acíclico. Cada enlace es simplemente { from, to }; los de bucle llevan además un campo propio (loop: 'loopQuality' / 'loopRetry') para poder encontrarlos después con diagram.allLinks.find(...) y darles su color naranja.
• El deslizador no anima nada por sí solo: solo guarda el paso objetivo (0 a 10). El botón ▶ Animar llama a goToProgress(objetivo), que mira cuántos pasos están completados ahora mismo y avanza o retrocede desde ahí — nunca reinicia a cero. Por eso encadenar dos botones (o el deslizador y un botón de bucle) siempre continúa de forma natural desde donde estaba, en vez de dar un salto visual al principio.
• Los colores de los nodos están enlazados al modelo (new go.Binding('fill', 'fill')), pero la animación no los cambia con model.setDataProperty() — los pinta directamente en el Shape/TextBlock renderizados (node.panel.elements[0].fill = ...) y llama a diagram.invalidate(). El motivo es un efecto secundario real: cualquier cambio de propiedad a través del modelo, aunque sea puramente cosmético como un color, dispara Diagram.invalidateLinksForNode() — que fuerza a recalcular la ruta de todos los enlaces auto-enrutados, no solo los del nodo que cambió. Con esta demo animando colores varias veces por segundo, eso hacía que el enlace largo de “¿Satisfecho? → Prepara contrato” se reenrutara en cada paso, y a veces el enrutador ortogonal elegía un camino distinto que cruzaba por encima de “Control de calidad” — mezclando visualmente los dos bucles. Pintar el Shape directamente cambia el color sin tocar el modelo, así que la geometría de los enlaces nunca se invalida. Para los enlaces (su color de progreso, y el parpadeo de los bucles) pasa lo mismo por una razón distinta: no usan binding, así que basta con asignar link.stroke directamente.
• Cada botón de bucle encadena las mismas fases siempre en el mismo orden:
  1. goToProgress(pasoOrigen) — avanza o retrocede hasta el paso donde vive el bucle (p.ej. “Control de calidad”), desde el progreso actual.
  2. El enlace del bucle parpadea, para que se vea cuál se ha activado.
  3. goToProgress(pasoDestino) — deshace paso a paso hasta el paso al que se vuelve. Ese paso se queda completado (es justo donde apunta la flecha naranja); solo lo que viene después vuelve a quedar pendiente.
• currentDoneCount() cuenta cuántos pasos seguidos, desde el principio, están en verde — y se detiene en el primer paso que no lo esté, sea porque está pendiente (azul) o fallido (rojo). Por eso “Simular fallo” y “▶ Animar” funcionan juntos sin código extra: el paso fallido cuenta como “no hecho”, así que reintentar con el deslizador simplemente lo repinta en verde y continúa desde ahí, como cualquier otro paso pendiente.
• Ninguna animación se acumula: pulsar dos botones seguidos (o el mismo dos veces) invalida un token de la animación anterior antes de empezar la siguiente.