Help needed with text display and library usage in general

[mabasic]

Hello, first of thank you for building this library. I would literally abandon the whole TUI in my application if it wasn't for this library.

After successfully running the example, I have found myself searching the source code for more example usage because I do not understand how the components fit together.

I want to display figlet (https://deno.land/x/deno_figlet@1.0.0) text in the center of the screen (multi line), with text above and bellow that text.

Something like this:

#something 2:30h [T] (single line)
Some text here (single line)
More text here with some info (single line)

figlet (multi line)
figlet (multi line)
figlet (multi line)

And have that all centered in the middle of the screen, with the text being centered. Something like a box centered in the middle of the terminal and then text inside that box not centered (single lines) and figlet should be centered. I don't know if that makes sense.

Is this possible to do?

[mabasic]

Ok, I think I got the placement correct. First I define a grid with 9 elements, and only use the center/center element. Then inside that I place a VerticalLayout with 8 elements: 1 text, 1 text, 1 text, 2 blanks, 3 for figlet.

And now the placement is correct, but the multi line string is broken. It starts good, then it breaks to the left of the terminal in row bellow, and then it goes back to first row of the multi line text but to the right.

Is there a way to display multiline strings so that they span rows?

[Im-Beast]

Hi, could you please show the code and screenshot showing the broken text?

[mabasic]

    new Text({
      parent: tui,
      text: "Multi line\nstring\nthat goes places",
      theme: {
        base: colors.magenta,
      },
      rectangle: rows.element("figlet-1").value,
      zIndex: 0,
    });

    const rows = new VerticalLayout({
      pattern: [
        "first-row",
        "second-row",
        "third-row",
        "blank-row-1",
        "blank-row-1",
        "figlet-1",
        "figlet-1",
        "figlet-1",
      ],
      gapX: 0,
      gapY: 0,
      rectangle: grid.element("mc"),
    });

    const grid = new GridLayout({
      pattern: [
        ["tl", "tc", "tr"],
        ["ml", "mc", "mr"],
        ["bl", "bc", "br"],
      ],
      gapX: 0,
      gapY: 0,
      rectangle: tui.rectangle,
    });

[Im-Beast]

You can achieve the same thing with some maths and use of Computed, e.g.:

const figlet = `\
    ____                                 ______    _              __         __ 
   / __ \\  ___    ____   ____           / ____/   (_)   ____ _   / /  ___   / /_
  / / / / / _ \\  / __ \\ / __ \\ ______  / /_      / /   / __ \`/  / /  / _ \\ / __/
 / /_/ / /  __/ / / / // /_/ //_____/ / __/     / /   / /_/ /  / /  /  __// /_  
/_____/  \\___/ /_/ /_/ \\____/        /_/       /_/    \\__, /  /_/   \\___/ \\__/  
                                                     /____/                     
`;

new Label({
  parent: tui,
  rectangle: new Computed(() => {
    const tuiRectangle = tui.rectangle.value;
    const figletWidth = textWidth(figlet.slice(0, figlet.indexOf("\n")));

    return {
      column: Math.round(tuiRectangle.width / 2 - figletWidth / 2),
      row: Math.round(tuiRectangle.height / 2 - 7),
    };
  }),
  theme: {
    base: crayon.red,
  },
  text: `Some other
random and multiline
text`,
  zIndex: 0,
});

new Label({
  parent: tui,
  theme: {
    base: crayon.bgBlue.bold.rgb(255, 255, 255),
  },
  text: figlet,
  rectangle: new Computed(() => {
    const tuiRectangle = tui.rectangle.value;
    const figletWidth = textWidth(figlet.slice(0, figlet.indexOf("\n")));

    return {
      column: Math.round(tuiRectangle.width / 2 - figletWidth / 2),
      row: Math.round(tuiRectangle.height / 2 - 3),
    };
  }),
  zIndex: 0,
});

new Label({
  parent: tui,
  rectangle: new Computed(() => {
    const tuiRectangle = tui.rectangle.value;
    const figletWidth = textWidth(figlet.slice(0, figlet.indexOf("\n")));

    return {
      column: Math.round(tuiRectangle.width / 2 - figletWidth / 2),
      row: Math.round(tuiRectangle.height / 2 + 4),
    };
  }),
  theme: {
    base: crayon.yellow,
  },
  text: `Some other
random and multiline
text`,
  zIndex: 0,
});

This essentially computes the middle and center position of the figlet.
Then for the labels above and below we're doing the same, just with offsets from that center position.

Tui's biggest pain right now is layouts.
I'm working currently on Tui 3.0, which should basically eliminate all the main pain points of Tui.
However it's still a long-ish way to go

[Im-Beast]

How do I make it scale when the terminal window scales? Is there an option to redraw everything when terminal window size changes? For example if I snap the terminal window to the right side of the screen or upper right.

What do you mean by scale?
Text size cannot be changed automatically by terminal, you'd need to do it manually.
If you mean readjusting positions/sizes whenever window size changes – Tui it should do it automatically.

[mabasic]

I have just updated to Tui 2.1.9 and now I can use signals inside Compute. I figured it out that the code was bugging if I was using a signal value inside the compute section.

Also now, It would seem that If I dynamically calculate figletWidth inside Compute, the render preserves some artifacts. Almost like it keeps old text from the previous figlet

I mean position/size whenever window size changes. Currently I get this:

This is the initial render:

[Im-Beast]

I'd really appreciate if you could open an issue with a reproduction.
I won't be able to play with it for a little while.
Most likely I'll look into it on Wednesday, sorry for that.

[mabasic]

It's as if the old text is being kept in the background and the new text is overwriting the old text.

[mabasic]

No problem, I'll try to fiddle with this a bit more and if I can't figure it out I'll create a new issue. Thank you for your assistance.