Positioning of multiple components

[colececil]

Hello - I'm having a hard time figuring out from the documentation how to position multiple components/elements within the terminal. More specifically, I'm trying to create a background component in my Bubble Tea / Lip Gloss app, which should show up behind everything else rendered with Lip Gloss. I'm also trying to figure out how to position other components in relation to each other.

Here's a simplified example... Assume we have a 10x6 terminal, with the following components to be rendered using Lip Gloss:

1. Background component. This displays a dot in every cell of the terminal, like so:

..........
..........
..........
..........
..........
..........

2. Image component. This is a 4x4 "image" that should be centered both horizontally and vertically. If displayed in the terminal by itself, it would look like so:

          
          
    /\    
    \/     
          
          

3. Text component. This is just a text string that says "Hello!". It should be centered horizontally, and it should be placed vertically in relation to other components.

---

In the final layout, all three components should be rendered, with the text component after the image component. So it should look like so:

..........
..........
..../\....
....\/....
..Hello!..
..........

How would I go about doing this using Lip Gloss?

[Gaurav-Gosain]

Here is my (perhaps not the most optimal?) solution.

package main

import (
	"fmt"
	"os"
	"strings"

	"github.com/charmbracelet/lipgloss"
	"golang.org/x/term"
)

var (
	docStyle = lipgloss.NewStyle()
	subtle   = lipgloss.AdaptiveColor{Light: "#D9DCCF", Dark: "#383838"}
)

func main() {
	width, height, _ := term.GetSize(int(os.Stdout.Fd())) // gets the width and height of the terminal

	// our string builder which will save the final string to render
	doc := strings.Builder{}

	// replace the text and image per your requirements.
	text := lipgloss.NewStyle().Width(50).Align(lipgloss.Center).Render("Hello!")
	image := "/\\\n\\/"
	ui := lipgloss.JoinVertical(lipgloss.Center, image, text)

	backgroundDot := docStyle.Copy().Foreground(subtle).Render(".")

	screen := lipgloss.Place(width, height,
		lipgloss.Center, lipgloss.Center,
		strings.ReplaceAll(ui, " ", backgroundDot), // we fill in the whitespace with dots to blend into the bg!
		lipgloss.WithWhitespaceChars("."),
		lipgloss.WithWhitespaceForeground(subtle),
	)

	doc.WriteString(screen + "\n\n")

	if width > 0 {
		docStyle = docStyle.MaxWidth(width)
	}

	fmt.Println(docStyle.Render(doc.String()))
}

[colececil]

Thank you for the detailed response! Very kind of you to go to the trouble of writing a program that produces the exact example I gave. 🙂

I think this does help me better understand how to position multiple components within the terminal view in Lip Gloss. I'm realizing I think maybe I took the CSS metaphor too far in my understanding of the library. It seems that, rather than applying styles to a "document" as a whole, it's more like you're building a "document" from the bottom up, styling it as you go along. I think that revelation will help me be more effective in knowing how to create various and complex layouts.

Regarding the background part, I think I still have some questions around that. What you did works for a situation where every background character is the same, but it wouldn't work for a more complex background component, with different characters in different positions. (For my current project, I'm working toward a background component with its own logic that creates an animation.)

In addition, calling strings.ReplaceAll seems to me like more of a procedural approach, while a "CSS-like" approach (as Lip Gloss is designed to be) would be more declarative in nature. Thinking about this more, I suppose this would be sort of an "intersection" function, and maybe Lip Gloss just doesn't support that. I suppose I could solve this problem by writing my own "intersection" function, now that I think I understand how to compose things in Lip Gloss a little better. So I think this gives me a path to move forward.

Thanks again for helping me understand and think though this!

[Gaurav-Gosain]

Glad I could help. Totally get where you are coming from, took me a while to wrap my head around this new "paradigm" if you will, of styling. Its basically just rendering out strings with escape sequences to a terminal and that is exactly what makes it beautiful.

but it wouldn't work for a more complex background component, with different characters in different positions.

Ok, so I do not completely understand what you are trying to achieve but if I had to suggest a solution from the limited context I have from this message, I would suggest trying to think of it as a 2d array a.k.a. a matrix of pixels.

type Pixel struct {
	backgroundChar string
	foregroundChar string
	hasForeground  bool
}

So this is how I would approach this, you break down your background string initially into [][]Pixel and then whenever you have to redraw an image you can do some basic math to figure out where the "foreground" text (the text you are trying to render) would go and mark those pixels as foreground pixels (i.e. setting the hasForeground and foregroundChar properties of those pixels in the matrix). And finally to render out the resulting string you could just loop over the matrix and keep appending a fg/bg character based on the flag and finally render it out.

I hope that helps.

[colececil]

I just found out about #65, and the pull request there is exactly what I need for overlaying the main UI on top of the background. Hopefully they can get that merged soon, as it would be an extremely useful feature to have in Lip Gloss.

Apart from that bit of information, the replies here from @Gaurav-Gosain helped answer other parts of my question - thank you! I'm going to go ahead and mark this as resolved.