fix: ellipsing nowrap text, cropping of elements in layouts

This commit fixes text not being properly ellipsed when wrapping is disabled.
Now the `text/overflow.nt.ts` test passes.

Additionally fixes:
 - issue where layout blocks cutting of parts of their children would render an ellipse
 - cases where cutting of element would leave out a gap

Author: Im-Beast

deno.lock

@@ -12,6 +12,7 @@ const color = () => crayon.bgHsl(((++h) * 40) % 360, 60, 40);
 const style = new Style({
   string: crayon.bgMagenta,
   text: {
+    overflow: "ellipsis",
     horizontalAlign: "center",
   },
   padding: { all: 1 },
@@ -50,7 +51,7 @@ export function render() {
         { width: calc("50% - 1"), gap: 2, string: crayon.bgLightBlack, x: "50%" },
         style.create(
           "Nice 🔥\n（╯°□°）╯︵┻━┻\ndevanagari आआॠऋॲपॉ\nﾊﾊﾊThis text should get wrapped because widthəəə is explicit as日本verylongstringthaəə💩twillwrapnomatterwhat\nwowə\nلعربيةا",
-          { string: color() },
+          { height: 15, string: color() },
         ),
         new HorizontalBlock(
           { gap: 2, string: color(), y: "50%" },

examples/demo.ts

@@ -135,7 +135,7 @@ export class HorizontalBlock extends LayoutBlock {
       for (let i = 0; i < this.computedHeight; ++i) {
         this.lines[i] ??= "";
         const line = child.lines[i - offsetY] ?? emptyLine;
-        this.lines[i] += gapString + cropEnd(line, freeSpace) + "\x1b[0m";
+        this.lines[i] += gapString + cropEnd(line, freeSpace, " ") + "\x1b[0m";
       }
       this.#occupiedWidth += freeSpace;
     }
@@ -147,7 +147,7 @@ export class HorizontalBlock extends LayoutBlock {
       const croppedLineWidth = this.computedWidth + this.computedX;
 
       for (let i = 0; i < this.lines.length; ++i) {
-        const paddedLine = cropStart(this.lines[i], croppedLineWidth) + padRight;
+        const paddedLine = cropStart(this.lines[i], croppedLineWidth, " ") + padRight;
         this.lines[i] = this.string ? this.string(paddedLine) : paddedLine;
       }
       return;

src/layout/horizontal_block.ts

@@ -108,15 +108,16 @@ export class OverlayBlock extends LayoutBlock {
       const fgLine = fg.lines[fgLinePos];
 
       if (computedX < 0) {
-        const line = cropStart(fgLine, fgWidth + computedX) + cropStart(bgLine, bgWidth - fgWidth - computedX);
+        const line = cropStart(fgLine, fgWidth + computedX, " ") +
+          cropStart(bgLine, bgWidth - fgWidth - computedX, " ");
         this.lines.push(string ? string(line) : line);
       } else if (fgWidth === bgWidth) {
         this.lines.push(fgLine);
       } else {
         // TODO: Just inlining insert and using computedWidths instead of recalculating them
         //       is an easy way to improve perf, but maybe @tui/strings should add a way to
         //       set widths if they are known instead
-        const line = insert(bgLine, fgLine, computedX, true);
+        const line = insert(bgLine, fgLine, computedX, true, " ");
 
         this.lines.push(string ? string(line) : line);
       }

src/layout/overlay_block.ts

@@ -127,7 +127,7 @@ export class VerticalBlock extends LayoutBlock {
         const croppedLineWidth = child.computedWidth + computedX;
 
         for (let i = 0; i < childLinesInBounds; ++i) {
-          const line = cropStart(child.lines[i], croppedLineWidth);
+          const line = cropStart(child.lines[i], croppedLineWidth, " ");
           const paddedLine = line + padRight;
           this.lines.push(this.string ? this.string(paddedLine) : paddedLine);
         }
@@ -148,7 +148,7 @@ export class VerticalBlock extends LayoutBlock {
     } else if (child.computedWidth > this.computedWidth) {
       for (let i = 0; i < childLinesInBounds; ++i) {
         const line = child.lines[i];
-        const croppedLine = cropEnd(line, this.computedWidth);
+        const croppedLine = cropEnd(line, this.computedWidth, " ");
         this.lines.push(this.string ? this.string(croppedLine) : croppedLine);
       }
     } else {

src/layout/vertical_block.ts

@@ -19,14 +19,17 @@ export function resizeLineHorizontally(
   { ellipsisString, overflow }: NormalizedTextDefinition,
 ): string {
   const lineWidth = textWidth(line);
-  if (lineWidth < desiredWidth) {
+  if (lineWidth <= desiredWidth) {
     return line;
   }
 
   switch (overflow) {
     case "clip":
-      return cropEnd(line, desiredWidth, "");
-    case "ellipsis":
-      return cropEnd(line, desiredWidth, ellipsisString);
+      return cropEnd(line, desiredWidth, " ");
+    case "ellipsis": {
+      const ellipsisWidth = textWidth(ellipsisString);
+      const cropped = cropEnd(line, desiredWidth, ellipsisString);
+      return cropped.slice(0, -ellipsisWidth) + ellipsisString;
+    }
   }
 }