TermUI.Layout.Alignment (TermUI v0.2.0)

View Source

Flexbox-inspired alignment for positioning components within allocated space.

Alignment Model

  • Main axis: Direction of layout (X for horizontal, Y for vertical)
  • Cross axis: Perpendicular to main axis

Justify Content (Main Axis)

  • :start - Pack at beginning
  • :center - Center in space
  • :end - Pack at end
  • :space_between - Equal space between components
  • :space_around - Equal space around each component

Align Items (Cross Axis)

  • :start - Position at cross-axis start
  • :center - Center on cross-axis
  • :end - Position at cross-axis end
  • :stretch - Expand to fill cross-axis

Examples

# Apply alignment to solved rects
rects = Solver.solve_to_rects(constraints, area)
aligned = Alignment.apply(rects, area,
  direction: :horizontal,
  justify: :space_between,
  align: :center
)

# With margins
aligned = Alignment.apply_with_spacing(rects, area,
  direction: :horizontal,
  margin: %{top: 5, right: 5, bottom: 5, left: 5}
)

Summary

Types

align()
direction()
justify()
opts()
rect()
spacing()

Functions

apply(rects, area, opts \\ [])

Applies alignment to a list of rectangles within a container area.

apply_margins(rects, margins)

Applies margin to rectangles, shrinking them.

apply_padding(rect, padding)

Applies padding to a rectangle, shrinking the content area.

parse_spacing(value)

Parses spacing shorthand into a spacing map.

Types

align()

@type align() :: :start | :center | :end | :stretch

direction()

@type direction() :: :horizontal | :vertical

justify()

@type justify() :: :start | :center | :end | :space_between | :space_around

opts()

@type opts() :: [
  direction: direction(),
  justify: justify(),
  align: align(),
  align_self: [align() | nil]
]

rect()

@type rect() :: %{x: integer(), y: integer(), width: integer(), height: integer()}

spacing()

@type spacing() :: %{
  top: integer(),
  right: integer(),
  bottom: integer(),
  left: integer()
}

Functions

apply(rects, area, opts \\ [])

@spec apply([rect()], rect(), opts()) :: [rect()]

Applies alignment to a list of rectangles within a container area.

Parameters

  • rects - list of rectangles from solver
  • area - container bounding rectangle
  • opts - alignment options
    • :direction - :horizontal (default) or :vertical
    • :justify - main axis alignment (default :start)
    • :align - cross axis alignment (default :start)
    • :align_self - per-component cross axis overrides

Returns

List of aligned rectangles.

apply_margins(rects, margins)

@spec apply_margins([rect()], [spacing()] | spacing()) :: [rect()]

Applies margin to rectangles, shrinking them.

Parameters

  • rects - list of rectangles
  • margins - list of margin maps (one per rect) or single margin for all

Returns

List of rectangles with margins applied.

apply_padding(rect, padding)

@spec apply_padding(rect(), spacing()) :: rect()

Applies padding to a rectangle, shrinking the content area.

Parameters

  • rect - rectangle to pad
  • padding - padding map

Returns

Rectangle with padding applied (position adjusted, size reduced).

parse_spacing(value)

@spec parse_spacing(
  integer()
  | {integer(), integer()}
  | {integer(), integer(), integer(), integer()}
) ::
  spacing()

Parses spacing shorthand into a spacing map.

Examples

iex> Alignment.parse_spacing(10)
%{top: 10, right: 10, bottom: 10, left: 10}

iex> Alignment.parse_spacing({5, 10})
%{top: 5, right: 10, bottom: 5, left: 10}

iex> Alignment.parse_spacing({1, 2, 3, 4})
%{top: 1, right: 2, bottom: 3, left: 4}