Shapes e layout

Line, Rect (com cantos opcionais), Circle e Spacer

Shapes e layout#

Elementos geométricos e de layout para compor o visual do relatório.

Line#

Linha entre dois pontos. Suporta linha sólida ou tracejada/pontilhada.

{
  "type": "line",
  "id": "separator",
  "x": 40,
  "y": 50,
  "x2": 555,
  "y2": 50,
  "strokeWidth": 1,
  "color": "cccccc",
  "strokeDashed": false,
  "strokeDashGap": 4.0
}

Propriedade	Tipo	Padrão	Descrição
`x2`	`double`	—	Posição X final
`y2`	`double`	—	Posição Y final
`zIndex`	`int`	`0`	Ordem de empilhamento
`strokeWidth`	`double`	`1.0`	Espessura
`color`	`string`	`"000000"`	Cor (hex)
`strokeDashed`	`bool`	`false`	Linha tracejada/pontilhada
`strokeDashGap`	`double`	`4.0`	Tamanho do espaço entre traços

O tipo `divider` foi removido. Use `line` horizontal para o mesmo efeito: ```json { "type": "line", "id": "div1", "x": 40, "y": 30, "x2": 540, "y2": 30, "strokeWidth": 1 } ```

Rect#

Retângulo com preenchimento e borda. Suporta cantos retos ou arredondados via propriedade borderRadius. Pode conter elementos filhos.

{
  "type": "rect",
  "id": "bg_box",
  "x": 30,
  "y": 5,
  "width": 500,
  "height": 50,
  "fill": "f0f4ff",
  "hasBorder": true,
  "borderColor": "1976d2",
  "borderWidth": 1,
  "children": [
    { "type": "text", "id": "inner_text", "x": 10, "y": 15, "content": "Dentro do retângulo" }
  ]
}

Exemplo com cantos arredondados (card):

{
  "type": "rect",
  "id": "card",
  "x": 30,
  "y": 10,
  "width": 250,
  "height": 80,
  "borderRadius": 12,
  "fill": "ffffff",
  "hasBorder": true,
  "borderColor": "e0e0e0"
}

Propriedade	Tipo	Padrão	Descrição
`width`	`double`	—	Largura
`height`	`double`	—	Altura
`borderRadius`	`double`	`0.0`	Raio dos cantos. `0` = cantos retos
`zIndex`	`int`	`0`	Ordem de empilhamento (use `-1` para backgrounds)
`fill`	`string`	`"ffffff"`	Cor de preenchimento
`hasBorder`	`bool`	`true`	Exibir borda
`borderColor`	`string`	`"000000"`	Cor da borda
`borderWidth`	`double`	`1.0`	Espessura da borda
`borderDashed`	`bool`	`false`	Borda tracejada
`borderDashGap`	`double`	`4.0`	Espaçamento do tracejado
`children`	`array`	`null`	Elementos posicionados dentro do retângulo

Circle#

Círculo ou elipse.

{
  "type": "circle",
  "id": "dot",
  "x": 100,
  "y": 20,
  "radius": 15,
  "fill": "4caf50",
  "hasBorder": false
}

Propriedade	Tipo	Padrão	Descrição
`radius`	`double`	—	Raio do círculo
`width`	`double`	`null`	Para elipse: largura
`height`	`double`	`null`	Para elipse: altura
`zIndex`	`int`	`0`	Ordem de empilhamento
`fill`	`string`	`"ffffff"`	Cor de preenchimento
`hasBorder`	`bool`	`true`	Exibir borda
`borderColor`	`string`	`"000000"`	Cor da borda
`borderWidth`	`double`	`1.0`	Espessura da borda
`borderDashed`	`bool`	`false`	Borda tracejada
`borderDashGap`	`double`	`4.0`	Espaçamento do tracejado

Se width e height forem fornecidos, renderiza uma elipse.

Spacer#

Espaço vazio. Não renderiza nada visualmente, mas ocupa espaço no layout.

{
  "type": "spacer",
  "id": "sp1",
  "x": 0,
  "y": 0,
  "width": 100,
  "height": 20
}

Propriedade	Tipo
`width`	`double`
`height`	`double`
`zIndex`	`int`