chore: fix bugs & qol

src/terminal/Terminal.ts

@@ -6,6 +6,24 @@ import type { CursorPosition, CursorStyle } from './CursorProperties'
 
 export class Terminal {
     public static readonly Version = "0.2.2"
+    private static readonly AnsiColors = [
+        '#000000',
+        '#800000',
+        '#008000',
+        '#808000',
+        '#000080',
+        '#800080',
+        '#008080',
+        '#ffffff',
+        '#808080',
+        '#ff0000',
+        '#00ff00',
+        '#ffff00',
+        '#0000ff',
+        '#ff00ff',
+        '#00ffff',
+        '#ffffff',
+    ]
 
     private terminal: HTMLElement
     private cursor: HTMLElement
@@ -16,6 +34,9 @@ export class Terminal {
     private lineElements: HTMLElement[] = []
     private lineWrapped: boolean[] = []
     private lineStyles: Map<number, Map<number, string>> = new Map()
+    private currentForeground: string | null = null
+    private currentBackground: string | null = null
+    private currentCellStyle: string | null = null
     private scrollPending = false
     private cursorRange: Range | null = null
 
@@ -76,6 +97,7 @@ export class Terminal {
         const width = this.GetWrapWidth()
         let row = this.cursorPosition.row
         let col = this.cursorPosition.col
+        const style = this.currentCellStyle
 
         while (col >= width) {
             this.EnsureLine(row)
@@ -112,6 +134,7 @@ export class Terminal {
             }
 
             this.lines[row] = line
+            this.ApplyStyleRange(row, col, chunk.length, style)
             this.UpdateLine(row)
 
             remaining = remaining.slice(chunk.length)
@@ -157,6 +180,7 @@ export class Terminal {
         }
 
         this.lines[row] = line
+        this.ApplyStyleRange(row, col, 1, this.currentCellStyle)
         this.UpdateLine(row)
     }
 
@@ -200,6 +224,102 @@ export class Terminal {
         this.UpdateCursor()
     }
 
+    ApplyCellStyleCodes(values: number[]) {
+        const params = values.length === 0 ? [0] : values
+        let foreground = this.currentForeground
+        let background = this.currentBackground
+
+        let i = 0
+        while (i < params.length) {
+            const code = params[i]
+            if (!Number.isFinite(code)) {
+                i += 1
+                continue
+            }
+
+            if (code === 0) {
+                foreground = null
+                background = null
+                i += 1
+                continue
+            }
+
+            if (code === 39) {
+                foreground = null
+                i += 1
+                continue
+            }
+
+            if (code === 49) {
+                background = null
+                i += 1
+                continue
+            }
+
+            if (code >= 30 && code <= 37) {
+                foreground = Terminal.AnsiColors[code - 30]
+                i += 1
+                continue
+            }
+
+            if (code >= 90 && code <= 97) {
+                foreground = Terminal.AnsiColors[code - 90 + 8]
+                i += 1
+                continue
+            }
+
+            if (code >= 40 && code <= 47) {
+                background = Terminal.AnsiColors[code - 40]
+                i += 1
+                continue
+            }
+
+            if (code >= 100 && code <= 107) {
+                background = Terminal.AnsiColors[code - 100 + 8]
+                i += 1
+                continue
+            }
+
+            if (code === 38 || code === 48) {
+                const isForeground = code === 38
+                const mode = params[i + 1]
+                if (mode === 2) {
+                    const red = params[i + 2]
+                    const green = params[i + 3]
+                    const blue = params[i + 4]
+                    if (Number.isFinite(red) && Number.isFinite(green) && Number.isFinite(blue)) {
+                        const color = Terminal.ToRgbColor(red, green, blue)
+                        if (isForeground)
+                            foreground = color
+                        else
+                            background = color
+                    }
+                    i += 5
+                    continue
+                }
+
+                if (mode === 5) {
+                    const index = params[i + 2]
+                    const color = Terminal.GetAnsi256Color(index)
+                    if (color) {
+                        if (isForeground)
+                            foreground = color
+                        else
+                            background = color
+                    }
+                    i += 3
+                    continue
+                }
+            }
+
+            i += 1
+        }
+
+        this.currentForeground = foreground
+        this.currentBackground = background
+        this.UpdateCurrentStyle()
+    }
+
     InsertCell(char: string) {
         const width = this.GetWrapWidth()
         let row = this.cursorPosition.row
@@ -220,6 +340,7 @@ export class Terminal {
 
         line = line.slice(0, col) + char[0] + line.slice(col)
         this.lines[row] = line
+        this.ApplyInsertStyle(row, col, this.currentCellStyle)
         this.UpdateLine(row)
         this.ReflowFromRow(row)
     }
@@ -245,6 +366,7 @@ export class Terminal {
 
         line = line.slice(0, removeIndex) + line.slice(removeIndex + 1)
         this.lines[row] = line
+        this.ApplyRemoveStyle(row, removeIndex)
         this.UpdateLine(row)
         this.ReflowFromRow(row)
     }
@@ -514,6 +636,119 @@ export class Terminal {
             this.UpdateLine(renderRow)
     }
 
+    private UpdateCurrentStyle() {
+        const styles: string[] = []
+        if (this.currentForeground)
+            styles.push(`color: ${this.currentForeground}`)
+        if (this.currentBackground)
+            styles.push(`background-color: ${this.currentBackground}`)
+
+        this.currentCellStyle = styles.length > 0 ? styles.join('; ') : null
+    }
+
+    private ApplyStyleRange(row: number, startCol: number, length: number, style: string | null) {
+        if (!Number.isFinite(row) || !Number.isFinite(startCol) || length <= 0)
+            return
+
+        let rowStyles = this.lineStyles.get(row)
+        if (!rowStyles && !style)
+            return
+
+        if (!rowStyles) {
+            rowStyles = new Map()
+            this.lineStyles.set(row, rowStyles)
+        }
+
+        const start = Math.max(0, Math.floor(startCol))
+        const end = start + Math.max(0, Math.floor(length))
+        for (let col = start; col < end; col++) {
+            if (style)
+                rowStyles.set(col, style)
+            else
+                rowStyles.delete(col)
+        }
+
+        if (rowStyles.size === 0)
+            this.lineStyles.delete(row)
+    }
+
+    private ApplyInsertStyle(row: number, col: number, style: string | null) {
+        const rowStyles = this.lineStyles.get(row)
+        if (!rowStyles && !style)
+            return
+
+        const updated = new Map<number, string>()
+        if (rowStyles) {
+            for (const [index, cssText] of rowStyles) {
+                if (index >= col)
+                    updated.set(index + 1, cssText)
+                else
+                    updated.set(index, cssText)
+            }
+        }
+
+        if (style)
+            updated.set(col, style)
+
+        if (updated.size > 0)
+            this.lineStyles.set(row, updated)
+        else
+            this.lineStyles.delete(row)
+    }
+
+    private ApplyRemoveStyle(row: number, col: number) {
+        const rowStyles = this.lineStyles.get(row)
+        if (!rowStyles)
+            return
+
+        const updated = new Map<number, string>()
+        for (const [index, cssText] of rowStyles) {
+            if (index === col)
+                continue
+            if (index > col)
+                updated.set(index - 1, cssText)
+            else
+                updated.set(index, cssText)
+        }
+
+        if (updated.size > 0)
+            this.lineStyles.set(row, updated)
+        else
+            this.lineStyles.delete(row)
+    }
+
+    private static ToRgbColor(red: number, green: number, blue: number): string {
+        const clamp = (value: number) => Math.min(255, Math.max(0, Math.round(value)))
+        const r = clamp(red)
+        const g = clamp(green)
+        const b = clamp(blue)
+        return `rgb(${r}, ${g}, ${b})`
+    }
+
+    private static GetAnsi256Color(code: number): string | null {
+        if (!Number.isFinite(code))
+            return null
+
+        const index = Math.floor(code)
+        if (index < 0 || index > 255)
+            return null
+
+        if (index < 16)
+            return Terminal.AnsiColors[index]
+
+        if (index <= 231) {
+            const offset = index - 16
+            const r = Math.floor(offset / 36)
+            const g = Math.floor((offset % 36) / 6)
+            const b = offset % 6
+            const levels = [0, 95, 135, 175, 215, 255]
+            return `rgb(${levels[r]}, ${levels[g]}, ${levels[b]})`
+        }
+
+        const grayscale = 8 + (index - 232) * 10
+        return `rgb(${grayscale}, ${grayscale}, ${grayscale})`
+    }
+
     private GetCursorXOffset(): number {
         const row = this.cursorPosition.row
         const col = this.cursorPosition.col