Antes de começar a criar um renderizador personalizado, é útil entender os diferentes componentes que compõem um renderizador e como um bloco é dividido em linhas e elementos.
Componentes do renderizador
Um renderizador é criado com vários componentes diferentes. Cada componente tem um job exclusivo para maximizar a reutilização e a extensibilidade do código.
Renderizador
O renderizador é uma classe de fábrica que agrupa todos os outros componentes.
Provedor constante
O provedor de constante é uma coleção de números e formas usados por todos os outros componentes, bem como por campos integrados.
Informações de renderização
As informações de renderização decidem como um bloco será disposto com base na definição e, em seguida, cria uma coleção de medições e dados sobre o bloco que a gaveta usa para criar caminhos SVG.
Objeto de caminho
O objeto de caminho contém os elementos SVG que residem no DOM e compõem o bloco.
Gaveta
A gaveta, como em "one-que-desenha", cria caminhos SVG com base nas informações de renderização e os aplica ao objeto de caminho.
Bloquear mensuráveis
Um mensurável é um retângulo que representa uma região de um bloco. As mensuráveis são o que as informações de renderização usam para definir o layout do bloco.
Algumas medidas também incluem dados extras, como o elemento visual que estão representando, ou métodos auxiliares que as informações de renderização podem usar para descobrir como dispor o bloco.
Diferentes renderizadores podem criar mensuráveis personalizados para alterar esses dados ou métodos auxiliares.
Linhas
Uma linha é uma coleção horizontal de elementos e espaçadores de elementos.
Espaçadores de linha
Um espaçador de linha é um espaço vertical vazio entre duas linhas.
Elementos
Um elemento representa um elemento visual em um bloco. Isso inclui campos, ícones, conexões etc.
Espaçadores de elementos
Um espaçador de elementos é um espaço vazio que vai entre os elementos de uma linha.
