Edge

Visão geral

Edge é um objeto namespace que entrega dois componentes de edge production-ready para workflows do xyflow:

• Edge.Temporary - um path simple-bezier tracejado tingido com var(--color-ring). Use-o para representar conexões em curso ou especulativas que ainda não foram confirmadas.
• Edge.Animated - um path bezier padrão com um pequeno círculo na cor primary que anima ao longo dele via <animateMotion>. Use-o para representar fluxo de dados ao vivo entre nós (streaming de tokens, traces de observabilidade, passagem de mensagens entre agentes).

Ambas as variantes são componentes React que seguem o contrato EdgeProps do xyflow. Você os registra no Canvas através da prop edgeTypes e depois os referencia por chave ao construir os dados do edge.

Preview

'use client';import '@xyflow/react/dist/style.css';import { Canvas, Edge } from '@gremorie/rx-ai';import {  type Edge as FlowEdge,  type EdgeTypes,  type Node as FlowNode,  ReactFlowProvider,} from '@xyflow/react';const edgeTypes: EdgeTypes = {  temporary: Edge.Temporary,  animated: Edge.Animated,};const edgeNodes: FlowNode[] = [  { id: 'a', position: { x: 0, y: 60 }, data: { label: 'Source' } },  { id: 'b', position: { x: 280, y: 0 }, data: { label: 'Target A' } },  { id: 'c', position: { x: 280, y: 140 }, data: { label: 'Target B' } },];const edgeEdges: FlowEdge[] = [  { id: 'a-b', source: 'a', target: 'b', type: 'animated' },  { id: 'a-c', source: 'a', target: 'c', type: 'temporary' },];export function EdgePreview() {  return (    <div className="h-[360px] w-full">      <ReactFlowProvider>        <Canvas edgeTypes={edgeTypes} edges={edgeEdges} nodes={edgeNodes} />      </ReactFlowProvider>    </div>  );}

Anatomia

Edge                  custom React Flow edge
├─ Edge.Temporary     dashed provisional edge
└─ Edge.Animated      solid edge with a traveling dot

Instalação

Requer @xyflow/react.

Uso

import { Canvas, Edge } from "@gremorie/rx-ai";

const edgeTypes = {
temporary: Edge.Temporary,
animated: Edge.Animated,
};

const edges = [
{ id: "e1", source: "1", target: "2", type: "animated" },
{ id: "e2", source: "2", target: "3", type: "temporary" },
];

export function Workflow() {
  return (
    <Canvas nodes={nodes} edges={edges} edgeTypes={edgeTypes}>
      {/* ... */}
    </Canvas>
  );
}

API

Edge.Temporary

Um edge simple-bezier tracejado. Renderiza BaseEdge com stroke-1 stroke-ring e strokeDasharray: "5, 5".

Aceita as EdgeProps padrão de @xyflow/react:

Você não chama essas props por conta própria - o xyflow as encaminha automaticamente.

Edge.Animated

Um edge bezier com um círculo (fill="var(--primary)", r="4") animando ao longo do path via <animateMotion> (loop de 2 segundos). Resolve as coordenadas reais do handle lendo dados de InternalNode para que a animação alinhe com os handles renderizados mesmo após a movimentação do nó.

Retorna null se o nó de origem ou de destino ainda não tiver hidratado através de useInternalNode.

Aceita as EdgeProps padrão:

Helpers internos:

• getHandleCoordsByPosition(node, position) - resolve as coordenadas absolutas do handle a partir de node.internals.
• getEdgeParams(source, target) - calcula os pontos de origem e destino usando Position.Right -> Position.Left.

A variante Animated é hardcoded para uma direção de fluxo da esquerda para a direita (origem à direita de um nó, destino à esquerda do próximo).

Composição

1. <Canvas> detém o registro edgeTypes. Passe Edge.Temporary e Edge.Animated indexados por qualquer nome que você queira usar nos dados do edge.
2. Os dados do edge carregam type: "temporary" ou type: "animated" (ou sua chave custom) por edge. O xyflow escolhe o componente correspondente.
3. Overrides de estilo fluem pela prop style em cada entrada de edge, ou via CSS mirando .react-flow__edge[data-id="..."].

Variações

Conexão especulativa

Mostre um Edge.Temporary tracejado enquanto o usuário ainda está configurando a conexão, depois troque para um edge sólido assim que confirmado.

const edges = [{ id: 'draft-1', source: 'a', target: 'b', type: 'temporary' }];

Fluxo de mensagens de agente ao vivo

Use Edge.Animated para visualizar mensagens fluindo entre agentes em um grafo multi-agente.

const edges = [
  { id: 'trace-1', source: 'planner', target: 'tools', type: 'animated' },
  { id: 'trace-2', source: 'tools', target: 'synthesizer', type: 'animated' },
];

Misture com edges padrão do xyflow

Os tipos de edge embutidos do xyflow continuam registrados. Combine-os com as variantes da Gremorie para ter variedade.

const edgeTypes = {
  temporary: Edge.Temporary,
  animated: Edge.Animated,
  // built-ins: "default", "straight", "step", "smoothstep", "simplebezier"
};

Acessibilidade

• Paridade ponteiro / teclado: o xyflow permite selecionar edges com clique e suporta deleção por teclado (Backspace / Delete) quando o edge tem foco. Ambas as variantes são elementos SVG de verdade, então o foco funciona.

• Reduced motion: Edge.Animated usa <animateMotion> do SVG. Envolva com CSS para desabilitar a animação para usuários que preferem reduced motion:

  @media (prefers-reduced-motion: reduce) {
    .react-flow__edge animateMotion {
      display: none;
    }
  }

• Contraste de cor: var(--color-ring) (traço do Temporary) e var(--primary) (ponto do Animated) devem atingir 3:1 para UI não textual. Os tokens da Gremorie cumprem isso em ambos os temas - reverifique se você trocar para uma paleta custom.

• Screen readers: por padrão, os edges não carregam nome acessível. Se a relação importa para usuários de tecnologia assistiva, forneça aria-label no Canvas que os envolve ou use a config de aria-labels do xyflow.

Relacionados

• Canvas - a superfície que hospeda edges via edgeTypes
• Connection - a linha de arraste em progresso mostrada antes de um edge ser confirmado
• Node - a origem e o destino de todo edge