Como o tldraw calcula bounding boxes de forma rápida

O texto do blog do tldraw parte de uma pergunta simples: como responder rápido a consultas espaciais num canvas infinito (o que foi clicado, o que está visível, qual área cerca uma seleção). A resposta são bounding boxes alinhadas aos eixos (AABB). Como as bordas ficam sempre horizontais e verticais, checar sobreposição de duas caixas exige só quatro comparações entre bordas, sem projeções com produto escalar (o teorema do eixo separador, que seria mais caro).

Para shapes rotacionadas, o tldraw pega os vértices da bounding box da shape no sistema de coordenadas local, transforma para o espaço da página e usa Box.FromPoints para achar os valores mínimo e máximo de x e y. No exemplo do texto, um retângulo de 100×50px rotacionado 45° gera uma caixa de cerca de 106×106px. Com shapes dentro de frames rotacionados, cada transform (posição, rotação, escala) vira uma matriz, e a transform de página é composta recursivamente subindo pelos pais. Para a seleção, o tldraw usa dois tipos de bounds: AABB para viewport culling e uma caixa rotacionada na UI, que permite redimensionar ao longo da orientação real. Se as shapes têm rotações diferentes, cai para a caixa alinhada aos eixos. A caixa rotacionada é calculada desfazendo a rotação dos pontos, achando a AABB nesse espaço e rotacionando a posição de volta.

Toda AABB é aproximação, e o próprio texto admite o custo: às vezes checa-se uma shape que não foi clicada ou renderiza-se uma que mal aparece na borda. Esses falsos positivos são filtrados numa segunda passada, com geometria exata, reservada a casos como hit-testing de perto.

Para quem mexe com canvas, editores gráficos ou qualquer UI com muitos elementos, a leitura prática é: use um filtro barato e aproximado primeiro, e deixe a matemática exata para os poucos candidatos que sobrarem. Aceitar falsos positivos baratos costuma render mais do que perseguir precisão em toda consulta.