Skip to main content

Module background

Module background 

Source
Expand description

Box background-fill rendering — port of ink’s render-background.ts.

Paints a box node’s backgroundColor as a rectangle FILL over the CONTENT area (the region inside any border cells), row by row. The M1/M2 port only colorized Text spans, so an oversized box (padding, or a sized box larger than its text) left its non-text cells unfilled, diverging from ink which paints the whole content rectangle.

§Source (render-background.ts:5-50)

if (!node.style.backgroundColor) return;
const width  = node.yogaNode!.getComputedWidth();
const height = node.yogaNode!.getComputedHeight();
const leftBorderWidth    = node.style.borderStyle && node.style.borderLeft   !== false ? 1 : 0;
const rightBorderWidth   = node.style.borderStyle && node.style.borderRight  !== false ? 1 : 0;
const topBorderHeight    = node.style.borderStyle && node.style.borderTop    !== false ? 1 : 0;
const bottomBorderHeight = node.style.borderStyle && node.style.borderBottom !== false ? 1 : 0;
const contentWidth  = width  - leftBorderWidth - rightBorderWidth;
const contentHeight = height - topBorderHeight - bottomBorderHeight;
if (!(contentWidth > 0 && contentHeight > 0)) return;
const backgroundLine = colorize(' '.repeat(contentWidth), node.style.backgroundColor, 'background');
for (let row = 0; row < contentHeight; row++) {
  output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, {transformers: []});
}

§Border insets — shared formula

The per-edge inset (borderStyle present && border{Edge} !== false ? 1 : 0) is byte-identical to Style::border_edges / render_border’s edge-show logic (border.rs:187-190). Computing it inline here keeps the 1:1 mapping to the ink source visible; both reduce to the same predicate.

§Ordering (render-node-to-output.ts:163-164)

ink calls renderBackground THEN renderBorder; the walk mirrors that. The fill covers the content area inside borders and the border draws the edges — disjoint regions — but background-before-border is the defensive order: a last-writer-wins grid lets the border correct any off-by-one inset. Children (Text) recurse AFTER both, so for a content-sized box the text fully overwrites the fill and the frame is unchanged; the fill is visible only in padding / oversized cells.

Functions§

render_background
Draw a box node’s backgroundColor rectangle FILL into grid.