273 lines
8.0 KiB
TypeScript
273 lines
8.0 KiB
TypeScript
/**
|
|
* Converts ANSI-escaped terminal text to SVG format
|
|
* Supports basic ANSI color codes (foreground colors)
|
|
*/
|
|
|
|
import { escapeXml } from './xml.js'
|
|
|
|
export type AnsiColor = {
|
|
r: number
|
|
g: number
|
|
b: number
|
|
}
|
|
|
|
// Default terminal color palette (similar to most terminals)
|
|
const ANSI_COLORS: Record<number, AnsiColor> = {
|
|
30: { r: 0, g: 0, b: 0 }, // black
|
|
31: { r: 205, g: 49, b: 49 }, // red
|
|
32: { r: 13, g: 188, b: 121 }, // green
|
|
33: { r: 229, g: 229, b: 16 }, // yellow
|
|
34: { r: 36, g: 114, b: 200 }, // blue
|
|
35: { r: 188, g: 63, b: 188 }, // magenta
|
|
36: { r: 17, g: 168, b: 205 }, // cyan
|
|
37: { r: 229, g: 229, b: 229 }, // white
|
|
// Bright colors
|
|
90: { r: 102, g: 102, b: 102 }, // bright black (gray)
|
|
91: { r: 241, g: 76, b: 76 }, // bright red
|
|
92: { r: 35, g: 209, b: 139 }, // bright green
|
|
93: { r: 245, g: 245, b: 67 }, // bright yellow
|
|
94: { r: 59, g: 142, b: 234 }, // bright blue
|
|
95: { r: 214, g: 112, b: 214 }, // bright magenta
|
|
96: { r: 41, g: 184, b: 219 }, // bright cyan
|
|
97: { r: 255, g: 255, b: 255 }, // bright white
|
|
}
|
|
|
|
export const DEFAULT_FG: AnsiColor = { r: 229, g: 229, b: 229 } // light gray
|
|
export const DEFAULT_BG: AnsiColor = { r: 30, g: 30, b: 30 } // dark gray
|
|
|
|
export type TextSpan = {
|
|
text: string
|
|
color: AnsiColor
|
|
bold: boolean
|
|
}
|
|
|
|
export type ParsedLine = TextSpan[]
|
|
|
|
/**
|
|
* Parse ANSI escape sequences from text
|
|
* Supports:
|
|
* - Basic colors (30-37, 90-97)
|
|
* - 256-color mode (38;5;n)
|
|
* - 24-bit true color (38;2;r;g;b)
|
|
*/
|
|
export function parseAnsi(text: string): ParsedLine[] {
|
|
const lines: ParsedLine[] = []
|
|
const rawLines = text.split('\n')
|
|
|
|
for (const line of rawLines) {
|
|
const spans: TextSpan[] = []
|
|
let currentColor = DEFAULT_FG
|
|
let bold = false
|
|
let i = 0
|
|
|
|
while (i < line.length) {
|
|
// Check for ANSI escape sequence
|
|
if (line[i] === '\x1b' && line[i + 1] === '[') {
|
|
// Find the end of the escape sequence
|
|
let j = i + 2
|
|
while (j < line.length && !/[A-Za-z]/.test(line[j]!)) {
|
|
j++
|
|
}
|
|
|
|
if (line[j] === 'm') {
|
|
// Color/style code
|
|
const codes = line
|
|
.slice(i + 2, j)
|
|
.split(';')
|
|
.map(Number)
|
|
|
|
let k = 0
|
|
while (k < codes.length) {
|
|
const code = codes[k]!
|
|
if (code === 0) {
|
|
// Reset
|
|
currentColor = DEFAULT_FG
|
|
bold = false
|
|
} else if (code === 1) {
|
|
bold = true
|
|
} else if (code >= 30 && code <= 37) {
|
|
currentColor = ANSI_COLORS[code] || DEFAULT_FG
|
|
} else if (code >= 90 && code <= 97) {
|
|
currentColor = ANSI_COLORS[code] || DEFAULT_FG
|
|
} else if (code === 39) {
|
|
currentColor = DEFAULT_FG
|
|
} else if (code === 38) {
|
|
// Extended color - check next code
|
|
if (codes[k + 1] === 5 && codes[k + 2] !== undefined) {
|
|
// 256-color mode: 38;5;n
|
|
const colorIndex = codes[k + 2]!
|
|
currentColor = get256Color(colorIndex)
|
|
k += 2
|
|
} else if (
|
|
codes[k + 1] === 2 &&
|
|
codes[k + 2] !== undefined &&
|
|
codes[k + 3] !== undefined &&
|
|
codes[k + 4] !== undefined
|
|
) {
|
|
// 24-bit true color: 38;2;r;g;b
|
|
currentColor = {
|
|
r: codes[k + 2]!,
|
|
g: codes[k + 3]!,
|
|
b: codes[k + 4]!,
|
|
}
|
|
k += 4
|
|
}
|
|
}
|
|
k++
|
|
}
|
|
}
|
|
|
|
i = j + 1
|
|
continue
|
|
}
|
|
|
|
// Regular character - find extent of same-styled text
|
|
const textStart = i
|
|
while (i < line.length && line[i] !== '\x1b') {
|
|
i++
|
|
}
|
|
|
|
const spanText = line.slice(textStart, i)
|
|
if (spanText) {
|
|
spans.push({ text: spanText, color: currentColor, bold })
|
|
}
|
|
}
|
|
|
|
// Add empty span if line is empty (to preserve line)
|
|
if (spans.length === 0) {
|
|
spans.push({ text: '', color: DEFAULT_FG, bold: false })
|
|
}
|
|
|
|
lines.push(spans)
|
|
}
|
|
|
|
return lines
|
|
}
|
|
|
|
/**
|
|
* Get color from 256-color palette
|
|
*/
|
|
function get256Color(index: number): AnsiColor {
|
|
// Standard colors (0-15)
|
|
if (index < 16) {
|
|
const standardColors: AnsiColor[] = [
|
|
{ r: 0, g: 0, b: 0 }, // 0 black
|
|
{ r: 128, g: 0, b: 0 }, // 1 red
|
|
{ r: 0, g: 128, b: 0 }, // 2 green
|
|
{ r: 128, g: 128, b: 0 }, // 3 yellow
|
|
{ r: 0, g: 0, b: 128 }, // 4 blue
|
|
{ r: 128, g: 0, b: 128 }, // 5 magenta
|
|
{ r: 0, g: 128, b: 128 }, // 6 cyan
|
|
{ r: 192, g: 192, b: 192 }, // 7 white
|
|
{ r: 128, g: 128, b: 128 }, // 8 bright black
|
|
{ r: 255, g: 0, b: 0 }, // 9 bright red
|
|
{ r: 0, g: 255, b: 0 }, // 10 bright green
|
|
{ r: 255, g: 255, b: 0 }, // 11 bright yellow
|
|
{ r: 0, g: 0, b: 255 }, // 12 bright blue
|
|
{ r: 255, g: 0, b: 255 }, // 13 bright magenta
|
|
{ r: 0, g: 255, b: 255 }, // 14 bright cyan
|
|
{ r: 255, g: 255, b: 255 }, // 15 bright white
|
|
]
|
|
return standardColors[index] || DEFAULT_FG
|
|
}
|
|
|
|
// 216 color cube (16-231)
|
|
if (index < 232) {
|
|
const i = index - 16
|
|
const r = Math.floor(i / 36)
|
|
const g = Math.floor((i % 36) / 6)
|
|
const b = i % 6
|
|
return {
|
|
r: r === 0 ? 0 : 55 + r * 40,
|
|
g: g === 0 ? 0 : 55 + g * 40,
|
|
b: b === 0 ? 0 : 55 + b * 40,
|
|
}
|
|
}
|
|
|
|
// Grayscale (232-255)
|
|
const gray = (index - 232) * 10 + 8
|
|
return { r: gray, g: gray, b: gray }
|
|
}
|
|
|
|
export type AnsiToSvgOptions = {
|
|
fontFamily?: string
|
|
fontSize?: number
|
|
lineHeight?: number
|
|
paddingX?: number
|
|
paddingY?: number
|
|
backgroundColor?: string
|
|
borderRadius?: number
|
|
}
|
|
|
|
/**
|
|
* Convert ANSI text to SVG
|
|
* Uses <tspan> elements within a single <text> per line so the renderer
|
|
* handles character spacing natively (no manual charWidth calculation)
|
|
*/
|
|
export function ansiToSvg(
|
|
ansiText: string,
|
|
options: AnsiToSvgOptions = {},
|
|
): string {
|
|
const {
|
|
fontFamily = 'Menlo, Monaco, monospace',
|
|
fontSize = 14,
|
|
lineHeight = 22,
|
|
paddingX = 24,
|
|
paddingY = 24,
|
|
backgroundColor = `rgb(${DEFAULT_BG.r}, ${DEFAULT_BG.g}, ${DEFAULT_BG.b})`,
|
|
borderRadius = 8,
|
|
} = options
|
|
|
|
const lines = parseAnsi(ansiText)
|
|
|
|
// Trim trailing empty lines
|
|
while (
|
|
lines.length > 0 &&
|
|
lines[lines.length - 1]!.every(span => span.text.trim() === '')
|
|
) {
|
|
lines.pop()
|
|
}
|
|
|
|
// Estimate width based on max line length (for SVG dimensions only)
|
|
// For monospace fonts, character width is roughly 0.6 * fontSize
|
|
const charWidthEstimate = fontSize * 0.6
|
|
const maxLineLength = Math.max(
|
|
...lines.map(spans => spans.reduce((acc, s) => acc + s.text.length, 0)),
|
|
)
|
|
const width = Math.ceil(maxLineLength * charWidthEstimate + paddingX * 2)
|
|
const height = lines.length * lineHeight + paddingY * 2
|
|
|
|
// Build SVG - use tspan elements so renderer handles character positioning
|
|
let svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">\n`
|
|
svg += ` <rect width="100%" height="100%" fill="${backgroundColor}" rx="${borderRadius}" ry="${borderRadius}"/>\n`
|
|
svg += ` <style>\n`
|
|
svg += ` text { font-family: ${fontFamily}; font-size: ${fontSize}px; white-space: pre; }\n`
|
|
svg += ` .b { font-weight: bold; }\n`
|
|
svg += ` </style>\n`
|
|
|
|
for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
|
|
const spans = lines[lineIndex]!
|
|
const y =
|
|
paddingY + (lineIndex + 1) * lineHeight - (lineHeight - fontSize) / 2
|
|
|
|
// Build a single <text> element with <tspan> children for each colored segment
|
|
// xml:space="preserve" prevents SVG from collapsing whitespace
|
|
svg += ` <text x="${paddingX}" y="${y}" xml:space="preserve">`
|
|
|
|
for (const span of spans) {
|
|
if (!span.text) continue
|
|
|
|
const colorStr = `rgb(${span.color.r}, ${span.color.g}, ${span.color.b})`
|
|
const boldClass = span.bold ? ' class="b"' : ''
|
|
|
|
svg += `<tspan fill="${colorStr}"${boldClass}>${escapeXml(span.text)}</tspan>`
|
|
}
|
|
|
|
svg += `</text>\n`
|
|
}
|
|
|
|
svg += `</svg>`
|
|
|
|
return svg
|
|
}
|