edgevoid/vue-tui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(paint): continuous backgroundColor with borders

Browse Source 
- Fill background inside border area only (not under border chars)
  so border placeLine doesn't overwrite background ANSI codes
- Pad text lines to full layout width when inheritedBg is set
  so background extends past text content to fill the row

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yunfei He
2026-05-25 11:24:36 +08:00
parent ecad937af9
commit e62c802829
1 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/runtime/src/paint/paint.ts
+18 -8
View File
@@ -195,12 +195,17 @@ function paintNode(
const w = Math.max(0, Math.floor(layout.width)); const w = Math.max(0, Math.floor(layout.width));
const h = Math.max(0, Math.floor(layout.height)); const h = Math.max(0, Math.floor(layout.height));
const bg = (node.props["backgroundColor"] as string | undefined) ?? inheritedBg; const bg = (node.props["backgroundColor"] as string | undefined) ?? inheritedBg;
if (node.props["backgroundColor"]) {
fillBackground(output, x, y, w, h, node.props["backgroundColor"], transformers);
}
if (node.props["borderStyle"]) { if (node.props["borderStyle"]) {
drawBorder(output, x, y, w, h, node.props, transformers); drawBorder(output, x, y, w, h, node.props, transformers);
} }
if (bg) {
const hasBorder = !!node.props["borderStyle"];
const bt = hasBorder && node.props["borderTop"] !== false ? 1 : 0;
const bb = hasBorder && node.props["borderBottom"] !== false ? 1 : 0;
const bl = hasBorder && node.props["borderLeft"] !== false ? 1 : 0;
const br = hasBorder && node.props["borderRight"] !== false ? 1 : 0;
fillBackground(output, x + bl, y + bt, w - bl - br, h - bt - bb, bg, transformers);
}
for (const child of node.children) paintNode(child, output, x, y, transformers, bg); for (const child of node.children) paintNode(child, output, x, y, transformers, bg);
return; return;
} }
@@ -208,11 +213,16 @@ function paintNode(
const layout = node.yoga.getComputedLayout(); const layout = node.yoga.getComputedLayout();
const bgProps: TextProps = inheritedBg ? { backgroundColor: inheritedBg } : {}; const bgProps: TextProps = inheritedBg ? { backgroundColor: inheritedBg } : {};
const text = renderTextWithInlineStyles(node, bgProps); const text = renderTextWithInlineStyles(node, bgProps);
const wrapped = wrapText( const cellWidth = Math.max(1, Math.floor(layout.width));
text, const wrapped = wrapText(text, cellWidth, node.props.wrap ?? "wrap");
Math.max(1, Math.floor(layout.width)), if (inheritedBg) {
node.props.wrap ?? "wrap", for (let i = 0; i < wrapped.length; i++) {
); const lineW = stringWidth(wrapped[i]!);
if (lineW < cellWidth) {
wrapped[i] = wrapped[i]! + applyChalk(" ".repeat(cellWidth - lineW), bgProps);
}
}
}
output.write(x0 + layout.left, y0 + layout.top, wrapped, transformers); output.write(x0 + layout.left, y0 + layout.top, wrapped, transformers);
return; return;
} }