Controls

Visão geral

Controls é uma skin da Gremorie sobre o Controls de @xyflow/react. Ele fica ancorado no canto inferior esquerdo de um Canvas por padrão e expõe os botões de interação padrão: zoom in, zoom out, fit view e um toggle de trava que desabilita o pan e a interação com nós.

O chrome da Gremorie remove as bordas e sombras pesadas do xyflow em favor de uma única borda arredondada, um fundo bg-card e botões estilo ghost que assumem bg-secondary no hover. Isso mantém os controles visualmente discretos para que não compitam com o conteúdo do workflow.

Use sempre que um canvas precisar de controles de zoom (qualquer editor de grafo com leitura e escrita) ou auxílios de navegação read-only (traces de agente, visualizações de fluxo grandes).

Preview

'use client';import '@xyflow/react/dist/style.css';import { Canvas, Controls } from '@gremorie/rx-ai';import {  type Edge as FlowEdge,  type Node as FlowNode,  ReactFlowProvider,} from '@xyflow/react';const gridNodes: FlowNode[] = [  { id: '1', position: { x: 0, y: 0 }, data: { label: 'A' } },  { id: '2', position: { x: 200, y: 80 }, data: { label: 'B' } },];const gridEdges: FlowEdge[] = [{ id: 'e1-2', source: '1', target: '2' }];export function ControlsPreview() {  return (    <div className="h-[360px] w-full">      <ReactFlowProvider>        <Canvas edges={gridEdges} nodes={gridNodes}>          <Controls />        </Canvas>      </ReactFlowProvider>    </div>  );}

Anatomia

Controls   zoom · fit-view · interactivity cluster — leaf (inside Canvas)

Instalação

Requer @xyflow/react.

Uso

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

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

API

<Controls>

Encaminha todas as ControlProps de @xyflow/react. O wrapper da Gremorie apenas reestiliza - nunca sobrescreve props de comportamento.

Chrome padrão adicionado pela Gremorie: gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!. Os botões filhos são reestilizados para rounded-md, fundo transparente, estado de hover bg-secondary.

Composição

1. <Canvas> é o pai. Controls deve ser renderizado como child para que a maquinaria interna de Panel do xyflow possa posicioná-lo em relação à viewport.
2. Botões embutidos (zoom in, zoom out, fit view, trava) renderizam automaticamente com base nas props showZoom / showFitView / showInteractive.
3. Botões custom podem ser anexados via children. Use ControlButton de @xyflow/react para manter o estilo consistente.

Variações

Padrão

Inferior esquerdo, todos os quatro botões.

<Canvas nodes={nodes} edges={edges}>
  <Controls />
</Canvas>

Canvas read-only

Esconda o toggle de trava quando o canvas já é não interativo.

<Canvas nodes={nodes} edges={edges} nodesDraggable={false}>
  <Controls showInteractive={false} />
</Canvas>

Botão de controle custom

Anexe um botão de "reset" ou "auto-layout" usando o ControlButton do xyflow.

import { ControlButton } from '@xyflow/react';
import { LayoutGridIcon } from 'lucide-react';

<Canvas nodes={nodes} edges={edges}>
  <Controls>
    <ControlButton onClick={autoLayout} title="Auto-layout">
      <LayoutGridIcon className="size-4" />
    </ControlButton>
  </Controls>
</Canvas>;

Ancorado no canto superior direito

Para canvases onde o canto inferior esquerdo é reservado para outra coisa (barra de status, widget de raciocínio do agente), mova os controles.

<Canvas nodes={nodes} edges={edges}>
  <Controls position="top-right" />
</Canvas>

Acessibilidade

• Keyboard: cada controle embutido é um botão de verdade. Tab foca cada um em ordem; Enter ou Space ativa.
• Labels: o xyflow traz atributos title nos botões embutidos ("zoom in", "zoom out", "fit view", "toggle interactivity"). Para botões custom, forneça title (e idealmente aria-label) para que o chrome só com ícones seja anunciado.
• Focus visible: o estilo de hover da Gremorie (bg-secondary) não interfere no focus ring padrão do xyflow. Não remova o outline.
• Reduced motion: as animações de zoom e pan são governadas pelo xyflow e respeitam prefers-reduced-motion.

Relacionados

• Canvas - a superfície que hospeda Controls
• Panel - overlay flutuante se você precisar de um widget de canto mais flexível
• Toolbar - ações flutuantes por nó (preocupação diferente - ancorada na seleção, não no canvas)