@valyrianjs/terminal 0.2.1 → 0.2.3

package/src/layout.ts

@@ -1,3 +1,5 @@
+import { cloneStyleSpan, isFullFrameSpan, isFullRowSpan } from "./frame-style.js";
+import { dropTerminalCells, padEndTerminalCells, sliceTerminalCells, terminalCellWidth } from "./text.js";
 import type { CursorPosition, TerminalFrame, TerminalHitbox, TerminalStyleSpan } from "./types.js";
 
 function repeat(char: string, count: number) {
@@ -9,7 +11,7 @@ export function createFrame(lines: string[], hitboxes: TerminalHitbox[] = [], cu
 }
 
 export function getFrameWidth(frame: TerminalFrame) {
-  return frame.lines.reduce((max, line) => Math.max(max, line.length), 0);
+  return frame.lines.reduce((max, line) => Math.max(max, terminalCellWidth(line)), 0);
 }
 
 export function getFrameHeight(frame: TerminalFrame) {
@@ -29,12 +31,12 @@ export function shiftFrame(frame: TerminalFrame, dx: number, dy: number): Termin
       contentY: typeof box.contentY === "number" ? box.contentY + dy : undefined
     })),
     cursor: frame.cursor ? { x: frame.cursor.x + dx, y: frame.cursor.y + dy } : null,
-    spans: frame.spans.map((span) => ({ ...span, x1: span.x1 + dx, x2: span.x2 + dx, y: span.y + dy }))
+    spans: frame.spans.map((span) => cloneStyleSpan(span, { x1: span.x1 + dx, x2: span.x2 + dx, y: span.y + dy }))
   };
 }
 
 function normalizeLines(frame: TerminalFrame, width: number, height: number) {
-  const lines = frame.lines.map((line) => line.padEnd(width, " "));
+  const lines = frame.lines.map((line) => padEndTerminalCells(line, width));
   while (lines.length < height) {
     lines.push(repeat(" ", width));
   }
@@ -57,15 +59,15 @@ export function mergeVertical(frames: TerminalFrame[], options: { gap?: number }
 
   for (let i = 0; i < filtered.length; i += 1) {
     const frame = filtered[i];
-    const normalized = normalizeLines(frame, width, getFrameHeight(frame));
-    lines.push(...normalized);
-    const shifted = shiftFrame(frame, 0, rowOffset);
+    const normalizedFrame = fitFrame(frame, width, getFrameHeight(frame), { expandFullFrameSpans: true });
+    lines.push(...normalizedFrame.lines);
+    const shifted = shiftFrame(normalizedFrame, 0, rowOffset);
     hitboxes.push(...shifted.hitboxes);
     spans.push(...shifted.spans);
     if (!cursor && frame.cursor) {
       cursor = { x: frame.cursor.x, y: frame.cursor.y + rowOffset };
     }
-    rowOffset += normalized.length;
+    rowOffset += normalizedFrame.lines.length;
     if (i < filtered.length - 1 && gap > 0) {
       for (let j = 0; j < gap; j += 1) {
         lines.push(repeat(" ", width));
@@ -87,9 +89,8 @@ export function mergeHorizontal(frames: TerminalFrame[], options: { gap?: number
   const widths = filtered.map(getFrameWidth);
   const height = filtered.reduce((max, frame) => Math.max(max, getFrameHeight(frame)), 0);
   const normalizedFrames = filtered.map((frame, index) => ({
-    frame,
-    width: widths[index],
-    lines: normalizeLines(frame, widths[index], height)
+    frame: fitFrame(frame, widths[index], height, { expandFullFrameSpans: true }),
+    width: widths[index]
   }));
   const gapText = repeat(" ", gap);
   const lines = new Array<string>(height).fill("");
@@ -101,7 +102,7 @@ export function mergeHorizontal(frames: TerminalFrame[], options: { gap?: number
   for (let index = 0; index < normalizedFrames.length; index += 1) {
     const part = normalizedFrames[index];
     for (let row = 0; row < height; row += 1) {
-      lines[row] += part.lines[row];
+      lines[row] += part.frame.lines[row];
       if (index < normalizedFrames.length - 1) {
         lines[row] += gapText;
       }
@@ -125,20 +126,20 @@ export function padFrame(frame: TerminalFrame, padding: number) {
   }
 
   const width = getFrameWidth(frame);
-  const middle = frame.lines.map((line) => `${repeat(" ", amount)}${line.padEnd(width, " ")}${repeat(" ", amount)}`);
+  const middle = frame.lines.map((line) => `${repeat(" ", amount)}${padEndTerminalCells(line, width)}${repeat(" ", amount)}`);
   const blank = repeat(" ", width + amount * 2);
   const lines = [...new Array<string>(amount).fill(blank), ...middle, ...new Array<string>(amount).fill(blank)];
   const shifted = shiftFrame(frame, amount, amount);
   return createFrame(lines, shifted.hitboxes, frame.cursor ? { x: frame.cursor.x + amount, y: frame.cursor.y + amount } : null, shifted.spans);
 }
 
-export function fitFrame(frame: TerminalFrame, width?: number, height?: number) {
+export function fitFrame(frame: TerminalFrame, width?: number, height?: number, options: { expandFullFrameSpans?: boolean } = {}) {
   const nextWidth = Math.max(getFrameWidth(frame), Number(width || 0));
   const nextHeight = Math.max(getFrameHeight(frame), Number(height || 0));
   if (nextWidth === getFrameWidth(frame) && nextHeight === getFrameHeight(frame)) {
     return frame;
   }
-  return createFrame(normalizeLines(frame, nextWidth, nextHeight), frame.hitboxes, frame.cursor, frame.spans);
+  return constrainFrame(frame, { width: nextWidth, height: nextHeight, expandFullFrameSpans: options.expandFullFrameSpans });
 }
 
 function constraintSize(value: number | undefined, fallback: number) {
@@ -160,13 +161,13 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(max, Math.max(min, value));
 }
 
-export function constrainFrame(frame: TerminalFrame, options: { width?: number; height?: number } = {}): TerminalFrame {
+export function constrainFrame(frame: TerminalFrame, options: { width?: number; height?: number; expandFullFrameSpans?: boolean; expandFullRowSpans?: boolean } = {}): TerminalFrame {
   const width = constraintSize(options.width, getFrameWidth(frame));
   const height = constraintSize(options.height, getFrameHeight(frame));
   const lines: string[] = [];
 
   for (let row = 0; row < height; row += 1) {
-    lines.push((frame.lines[row] || "").slice(0, width).padEnd(width, " "));
+    lines.push(padEndTerminalCells(sliceTerminalCells(frame.lines[row] || "", width), width));
   }
 
   const hitboxes = frame.hitboxes
@@ -184,8 +185,26 @@ export function constrainFrame(frame: TerminalFrame, options: { width?: number;
     ? { x: frame.cursor.x, y: frame.cursor.y }
     : null;
 
+  const originalWidth = getFrameWidth(frame);
+  const originalHeight = getFrameHeight(frame);
   const spanRightEdge = width + 1;
   const spans = frame.spans.flatMap((span) => {
+    const coversCurrentFrame = options.expandFullFrameSpans === true && isFullFrameSpan(span) && span.x1 === 1 && span.x2 === originalWidth + 1;
+    if (coversCurrentFrame) {
+      if (width <= 0 || span.y < 1 || span.y > Math.min(originalHeight, height)) {
+        return [];
+      }
+      return [cloneStyleSpan(span, { x1: 1, x2: spanRightEdge })];
+    }
+
+    const coversCurrentRow = (options.expandFullFrameSpans === true || options.expandFullRowSpans === true) && isFullRowSpan(span) && span.x1 === 1 && span.x2 === originalWidth + 1;
+    if (coversCurrentRow) {
+      if (width <= 0 || span.y < 1 || span.y > Math.min(originalHeight, height)) {
+        return [];
+      }
+      return [cloneStyleSpan(span, { x1: 1, x2: spanRightEdge })];
+    }
+
     if (width <= 0 || span.y < 1 || span.y > height || span.x2 <= 1 || span.x1 >= spanRightEdge) {
       return [];
     }
@@ -196,9 +215,22 @@ export function constrainFrame(frame: TerminalFrame, options: { width?: number;
       return [];
     }
 
-    return [{ ...span, x1: clippedX1, x2: clippedX2 }];
+    return [cloneStyleSpan(span, { x1: clippedX1, x2: clippedX2 })];
   });
 
+  const fullFrameSpans = options.expandFullFrameSpans === true
+    ? frame.spans.filter((span) => isFullFrameSpan(span) && span.x1 === 1 && span.x2 === originalWidth + 1)
+    : [];
+  const firstFullFrameRow = fullFrameSpans.reduce<number | null>((first, span) => first === null ? span.y : Math.min(first, span.y), null);
+  if (firstFullFrameRow !== null) {
+    const templates = fullFrameSpans.filter((span) => span.y === firstFullFrameRow);
+    for (let y = originalHeight + 1; y <= height; y += 1) {
+      for (const template of templates) {
+        spans.push(cloneStyleSpan(template, { x1: 1, x2: spanRightEdge, y }));
+      }
+    }
+  }
+
   return createFrame(lines, hitboxes, cursor, spans);
 }
 
@@ -234,16 +266,20 @@ export function overlayFrame(base: TerminalFrame, overlay: TerminalFrame, option
 
     const baseLine = lines[baseRow];
     const start = x - 1;
-    if (start >= baseLine.length) {
+    if (start >= terminalCellWidth(baseLine)) {
       continue;
     }
 
-    const visibleWidth = Math.min(constrainedOverlay.lines[row].length, baseLine.length - start);
+    const visibleWidth = Math.min(terminalCellWidth(constrainedOverlay.lines[row]), terminalCellWidth(baseLine) - start);
     if (visibleWidth <= 0) {
       continue;
     }
 
-    lines[baseRow] = `${baseLine.slice(0, start)}${constrainedOverlay.lines[row].slice(0, visibleWidth)}${baseLine.slice(start + visibleWidth)}`;
+    const prefix = sliceTerminalCells(baseLine, start);
+    const suffix = dropTerminalCells(baseLine, start + visibleWidth);
+    const insert = sliceTerminalCells(constrainedOverlay.lines[row], visibleWidth);
+    const removedWidth = terminalCellWidth(baseLine) - terminalCellWidth(prefix) - terminalCellWidth(suffix);
+    lines[baseRow] = `${prefix}${padEndTerminalCells(insert, removedWidth)}${suffix}`;
   }
 
   const shiftedOverlay = shiftFrame(constrainedOverlay, x - 1, y - 1);
@@ -271,10 +307,7 @@ export function cropFrame(frame: TerminalFrame, offset: number, height: number)
     }));
   const spans = frame.spans
     .filter((span) => span.y > start && span.y <= start + size)
-    .map((span) => ({
-      ...span,
-      y: span.y - start
-    }));
+    .map((span) => cloneStyleSpan(span, { y: span.y - start }));
   const cursor = frame.cursor && frame.cursor.y > start && frame.cursor.y <= start + size
     ? { x: frame.cursor.x, y: frame.cursor.y - start }
     : null;

package/src/mouse.ts

@@ -79,6 +79,15 @@ export function cursorFromHitbox(hitbox: TerminalHitbox, x: number) {
   if (typeof hitbox.textStartX !== "number") {
     return 0;
   }
+
   const textLength = Number(hitbox.textLength || 0);
-  return Math.max(0, Math.min(textLength, x - hitbox.textStartX));
+  const cellOffset = Math.max(0, x - hitbox.textStartX);
+  if (Array.isArray(hitbox.textCellToStringIndex) && hitbox.textCellToStringIndex.length > 0) {
+    const index = hitbox.textCellToStringIndex[Math.min(cellOffset, hitbox.textCellToStringIndex.length - 1)];
+    if (typeof index === "number" && Number.isFinite(index)) {
+      return Math.max(0, Math.min(textLength, index));
+    }
+  }
+
+  return Math.max(0, Math.min(textLength, cellOffset));
 }