Elements

  • During the measurement phase, a block is deconstructed into rows comprising elements and element spacers for rendering purposes.

  • Elements represent the visual components of a block, including fields, icons, connections, and corners, with their size usually determined by the element they represent.

  • Element spacers are empty spaces inserted between elements to control the spacing and visual layout of the block.

During measurement the block gets broken up into rows containing non-overlapping elements and element spacers.

Elements

Elements represent visual things on a block. Examples include elements representing:

  • Fields
  • Icons
  • Connections
  • Corners

A repeat-for block with the elements outlined

Each element is a rectangle defining the bounds of the visual thing, plus some extra data specific to each kind of element.

The bounds of the element are usually determined by some external class (that is, the thing they represent). For example, field elements represent fields, and their size is determined by the field's getSize method.

Element spacer

An element spacer is an empty space that goes between elements in a row.

A repeat-for block with the element spacers highlighted in pink

The bounds of spacers are determined by the render info during measurement. After measuring all of the elements of the block, the render info inserts spaces of its chosen size between the elements. The sizes don't have to be consistent; they are often different depending on the elements to either side of the spacer.