Bubbletea and stacking styles with Lipgloss?

Getting Help Code Review
1

want to achieve: Produce colored output over other colored output, with underlying uncovered output preserved.

my attempt: bellow, where model is Bubbletea’s model interface implementation

import gloss "github.com/charmbracelet/lipgloss"

func (m model) View() string {
	diagStyle := gloss.NewStyle().
		Background(gloss.Color("#0000aa"))
	r1Style := gloss.NewStyle().
		Inherit(diagStyle).
		Foreground(gloss.Color("#ffff00"))
	r2Style := gloss.NewStyle().
		Inherit(diagStyle).
		Foreground(gloss.Color("#ff0000"))
	r3Style := gloss.NewStyle().
		Inherit(diagStyle).
		Foreground(gloss.Color("#ffffff"))
	out := diagStyle.
		Width(30).
		Height(5).
		Padding(1, 2).
		Render(
			gloss.JoinVertical(gloss.Left,
				r1Style.Render("Alice"),
				r2Style.Render("Bob"),
				r3Style.Render("Charlie"),
			),
		)
	return out
}

produces following output with artifacts:

image
image411×184 766 Bytes

How to fix it, to preserve blueish background color of underlying diagStyle? (after Alice and Bob)

2

I think it would help to analyze what happens with the ANSI codes emitted by the program. I’m pretty sure that r1Style.Render("Alice") etc. emit a reset code after the string and diagStyle only reverts the background to blue outside the box rendered by JoinVertical. I would also test what happens when you align right or center.

Anyway, how I’d try to fix it:

  • Pad the strings with spaces.
  • Use a lipgloss table instead of JoinVertical, styled with blue background and no borders.

You could also submit a lipgloss issue with this example. It is more intuitive to have transparent padding in JoinVertical, although in the light of my hypothesis above it may not be trivial to implement.

1 Like
3

Notice for anyone who landed here with similar issue:

Reason why it does not work is because Lipgloss library is 2D only.
Stacking styles over other is simply not implemented. Logic for overlapping content is absent. If you plan to create dialog over dialogs TUI then you are either on your own or rather move elsewhere..

4

Good news,

forthcoming major version 2 does finally introduce 3D logic for overlapping of styles (compositing layers):

2 Likes