Compositor clips layers positioned away from the origin when no root layer spans the viewport

[vaidik-bajpai]

While experimenting with the new Layer/Compositor API, I came across what might be an edge case in the compositor's rendering logic, although I'm not sure whether it's actually a bug or simply the intended behavior.

I noticed that if I create a single layer positioned away from the origin—for example at (40, 0) with a width of 80—and pass it directly to NewCompositor, only part of the layer is rendered. However, if I wrap that exact same layer inside another "root" layer that spans the viewport, it renders correctly without any clipping. The only difference between the two cases is the presence of the enclosing parent layer.

After looking through the compositor implementation, my current understanding is that the compositor computes the canvas size using c.bounds.Dx() and c.bounds.Dy(). For a layer whose bounds are (40,0)-(120,...), the resulting canvas width is 80, which is mathematically correct, but the layer is still drawn at an absolute X position of 40. Since the canvas itself begins at (0,0), the right portion of the layer appears to be clipped. Wrapping the layer in a full-screen parent causes the compositor bounds to begin at (0,0), making the canvas large enough for the translated child and avoiding the issue entirely.

I've put together a small Bubble Tea example that demonstrates both behaviors. Pressing one renders the offset layer directly (which appears clipped), while pressing two wraps it in a root layer (which renders as expected). The child layer is identical in both cases.

Before opening an issue, I wanted to check whether this is an implementation bug or whether the compositor is intentionally designed around the assumption that the root layer always starts at the origin. If it's the latter, perhaps this behavior should be documented. If not, I'd be happy to open an issue with the reproduction example.

package main

import (
	"log"

	tea "charm.land/bubbletea/v2"
	"charm.land/lipgloss/v2"
	uv "github.com/charmbracelet/ultraviolet"
)

const (
	// The red box is rendered with an X offset from the origin.
	offset = 40
	width  = 80
)

// Rendering mode used for demonstrating the behavior.
type Mode int

const (
	// Render the offset layer directly inside the compositor.
	// This is the behavior that appears to clip the layer.
	Direct Mode = iota

	// Wrap the offset layer inside a full-screen parent layer
	// before passing it to the compositor.
	Wrapped
)

type Model struct {
	screenSize uv.Rectangle
	rightBox   uv.Rectangle

	mode  Mode
	debug bool
}

func NewModel() Model {
	return Model{}
}

func (m Model) Init() tea.Cmd {
	return nil
}

func (m Model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
	switch msg := msg.(type) {

	case tea.KeyPressMsg:
		switch msg.String() {

		// Render the offset layer directly.
		case "1":
			m.mode = Direct

		// Render the offset layer wrapped in a full-screen layer.
		// Also toggles a blue border around the parent layer to make
		// the hierarchy easier to visualize.
		case "2":
			m.debug = !m.debug
			m.mode = Wrapped

		case "ctrl+c":
			return m, tea.Quit
		}

	case tea.WindowSizeMsg:
		// Store the terminal dimensions.
		m.screenSize = uv.Rect(0, 0, msg.Width, msg.Height)

		// The layer begins at X=40 but is only 80 cells wide.
		// This is the scenario being tested.
		m.rightBox = uv.Rect(offset, 0, min(width, msg.Width), msg.Height)
	}

	return m, nil
}

func (m Model) View() tea.View {
	// Create the red box that will be rendered at an offset.
	rightBox := lipgloss.NewStyle().
		Width(m.rightBox.Dx()).
		Height(m.rightBox.Dy()).
		Border(lipgloss.NormalBorder()).
		BorderForeground(lipgloss.BrightRed)

	// Position the layer away from the origin.
	rightBoxLayer := lipgloss.NewLayer(
		rightBox.Render("offset layer"),
	).X(m.rightBox.Min.X).Y(m.rightBox.Min.Y)

	var comp *lipgloss.Compositor

	switch m.mode {

	case Direct:
		// The compositor only receives the offset layer.
		//
		// Expected:
		//   The entire red box should render beginning at X=40.
		//
		// Observed:
		//   The right side of the box is clipped.
		comp = lipgloss.NewCompositor(rightBoxLayer)

	case Wrapped:
		// Create a parent layer that spans the entire viewport.
		screenBox := lipgloss.NewStyle().
			Width(m.screenSize.Dx()).
			Height(m.screenSize.Dy())

		// Optional visualization of the parent layer.
		if m.debug {
			screenBox = screenBox.
				Border(lipgloss.NormalBorder()).
				BorderForeground(lipgloss.BrightBlue)
		}

		// Mount the offset layer as a child of the full-screen layer.
		screenLayer := lipgloss.NewLayer(
			screenBox.Render("full-screen parent layer"),
			rightBoxLayer,
		)

		// The exact same offset layer now renders correctly.
		comp = lipgloss.NewCompositor(screenLayer)
	}

	v := tea.NewView(comp.Render())
	v.AltScreen = true
	return v
}

func main() {
	model := NewModel()

	prog := tea.NewProgram(model)

	if _, err := prog.Run(); err != nil {
		log.Fatalf("program stopped: %v", err)
	}
}