terminal-png 0.1.6 → 0.1.8

package/dist/svg-renderer.js

@@ -1,4 +1,5 @@
 import { FONT_FACE_CSS } from "./font.js";
+const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
 const ANSI_16_PALETTE = [
     "#282a2e",
     "#D74E6F",
@@ -117,7 +118,6 @@ function measureLines(lines) {
     return Math.max(...lines.map((line) => displayWidth(line.map((run) => run.text).join("")) * CHARACTER_WIDTH), 0);
 }
 function displayWidth(text, startColumn = 0) {
-    const segmenter = new Intl.Segmenter();
     let column = startColumn;
     for (const { segment } of segmenter.segment(text)) {
         if (segment === "\t") {
@@ -165,13 +165,38 @@ function renderLines(lines, textStartX, textStartY, lineHeightPx) {
     return lines
         .map((line, index) => {
         const y = formatNumber(textStartY + (index * lineHeightPx));
+        let column = 0;
         if (line.length === 0) {
             return `<text x="${formatNumber(textStartX)}" y="${y}" xml:space="preserve"/>`;
         }
         return [
             renderBackgrounds(line, textStartX, textStartY + (index * lineHeightPx) - lineHeightPx, lineHeightPx),
             `<text x="${formatNumber(textStartX)}" y="${y}" xml:space="preserve">`,
-            line.map(renderRun).join(""),
+            line.flatMap((run) => {
+                const spans = [];
+                let text = "";
+                let start = column;
+                for (const { segment } of segmenter.segment(run.text)) {
+                    const width = displayWidth(segment, column);
+                    if (width !== 1 || Array.from(segment).length !== 1) {
+                        if (text.length > 0)
+                            spans.push(renderRun({ ...run, text }, textStartX + start * CHARACTER_WIDTH));
+                        text = "";
+                        if (segment !== "\t" && width > 0) {
+                            spans.push(renderRun({ ...run, text: segment }, textStartX + column * CHARACTER_WIDTH));
+                        }
+                        column += width;
+                        start = column;
+                    }
+                    else {
+                        text += segment;
+                        column += 1;
+                    }
+                }
+                if (text.length > 0)
+                    spans.push(renderRun({ ...run, text }, textStartX + start * CHARACTER_WIDTH));
+                return spans;
+            }).join(""),
             "</text>"
         ].join("");
     })
@@ -190,7 +215,7 @@ function renderBackgrounds(line, startX, y, height) {
     }
     return rectangles.join("");
 }
-function renderRun(run) {
+function renderRun(run, x) {
     const attributes = ['xml:space="preserve"'];
     const color = resolveForegroundColor(run);
     const textDecorations = [];
@@ -216,6 +241,8 @@ function renderRun(run) {
         attributes.push('opacity="0.7"');
     }
     const text = run.conceal ? " ".repeat(displayWidth(run.text)) : run.text;
+    const positions = [...segmenter.segment(run.text)].map((_, index) => formatNumber(x + index * CHARACTER_WIDTH));
+    attributes.push(`x="${positions.join(" ")}"`);
     return `<tspan ${attributes.join(" ")}>${escapeXmlText(text)}</tspan>`;
 }
 function renderWindowControls() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminal-png",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "license": "MIT",
   "description": "Render PNG images from ANSI terminal output.",
   "type": "module",