A biblioetca X6 é uma ferramenta JavaScript para renderização gráfica baseada em SVG e HTML, amplamente utilizada na criação de interfaces de diagramação interativas. Seu sistema de conexão entre nós, gerenciado por arestas, é crucial para aplicações que exigem relações dinâmicas entre elementos. Este guia explora o funcionamento interno das pontas de conexão, oferecendo técnicas para manipulação precisa.

Conceitos Essenciais das Pontas de Conexão

Em X6, uma aresta (edge) representa a ligação entre dois nós (nodes), e as pontas (endpoints) são os pontos específicos onde a aresta se conecta ao nó. O módulo connection-point no diretório src/registry/connection-point/ implementa diversas estratégias de cálculo, como baseadas em bounding boxes ou âncoras, definindo como as arestas interagem com os nós.

Implementação Interna da Movimentação de Pontas

O posicionamento das pontas é recalculado dinamicamente durante a interação do usuário. No arquivo src/registry/connection-point/main.ts, o registro de estratégias gerencia diferentes lógicas de cálculo. Por exemplo, a estratégia de bbox, em src/registry/connection-point/bbox.ts, determina a posição ideal baseada nos limites do nó e direção da aresta.

O fluxo de eventos, tratado em src/graph/events.ts, orquestra as ações de arrasto. Eventos como edge:mouseover e edge:drag acionam funções que atualizam as coordenadas das pontas em tempo real, garantindo ressponsividade.

Técnicas Avançadas para Controle Granular

Definição de Estratégias Personalizadas

Desenvolvedores podem registrar funções de cálculo customizadas parra atender requisitos específicos. Utilizando o método ConnectionPoint.register, é possível definir lógicas que consideram atributos adicionais dos nós ou arestas.

import { ConnectionPoint } from '@antv/x6'

// Registrar uma estratégia de ponto de conexão personalizada
ConnectionPoint.register('minhaEstrategia', (parametros) => {
  const { noConectado, arestaAtual, tipoConexao } = parametros
  // Lógica para calcular coordenadas baseada em condições específicas
  const posX = noConectado.position().x + 10
  const posY = noConectado.position().y - 5
  // Retornar as coordenadas calculadas
  return { x: posX, y: posY }
})

Este exemplo demonstra como ajustar o cálculo para considerar deslocamentos personalizados, mantendo a flexibilidade do sistema.

Utilização de Portas para Conexões Restritas

Para restringir conexões a locais específicos, o sistema de portas (ports) permite definir pontos de ancoragem nos nós. As configurações de portas são especificadas na propriedade ports ao criar um nó, controlando posição, estilo e grupos.

graph.addNode({
  shape: 'ellipse',
  x: 150,
  y: 200,
  width: 100,
  height: 50,
  ports: {
    groups: {
      entrada: {
        position: 'top',
        attrs: {
          circle: {
            r: 4,
            fill: '#3498db',
            stroke: '#2c3e50'
          }
        }
      },
      saida: {
        position: 'bottom',
        attrs: {
          circle: {
            r: 4,
            fill: '#e74c3c',
            stroke: '#2c3e50'
          }
        }
      }
    },
    items: [
      { group: 'entrada', id: 'portA' },
      { group: 'saida', id: 'portB' }
    ]
  }
})

Este código configura um nó com portas de entrada e saída, garantindo que as arestas se conectem apenas nesses pontos definidos.

Aplicação de Restrições de Movimento

Para limitar a movimentação das pontas, X6 oferece mecanismos de restrição através de configurações como edgeConstraints, definidas em src/graph/options.ts. Essas restrições podem confinar o arrasto a áreas específicas ou a nós de determinados tipos, promovendo aderência a regras de design.

Solução de Problemas Comuns

Se a movimentação das pontas parecer lenta, considere ativar a renderização virtual implementada em src/graph/virtual-render.ts, que otimiza o desempenho ao renderizar apenas elementos visíveis. Para imprecisões no cálculo de posições ao usar estratégias personalizadas, verifique se as transformações de coordenadas, como rotação ou escala, estão sendo tratadas corretamente usando utilitários de geometria disponíveis em src/geometry/util.ts.

Explorar os exemplos no diretório examples/ do projeto X6 pode fornecer insights adicionais sobre implementações práticas e boas práticas.