debugui: fix DrawOnlyWidget rendering in scrolled grid cells

DrawOnlyWidget created a nested widget even when it was called inside a
layout callback such as GridCell's. That nested widget got the bounds of
a new layout item (the default height) instead of the cell bounds, so it
was culled as soon as that item scrolled out of the container body, even
though the cell was still visible.

Skip creating the nested widget while a layout callback is running and
just add the draw command: the current clip rect already limits the
drawing to the visible area. Save and restore the layout callback state
so that a nested GridCell does not clear it for the enclosing callback.

Also replace the deprecated vector.DrawFilledRect with vector.FillRect,
and test the clip rect instead of the container body bounds for the
widget visibility check, consistent with how the drawing is clipped.

Fixes #47

Author: Vmarcelo49

context.go

@@ -58,6 +58,9 @@ type Context struct {
 	segStack    []segmenter.Segmenter
 	segStackIdx int
 
+	// inLayoutCallback is true during a widget layout callback to block nested widgets.
+	inLayoutCallback bool
+
 	err error
 }
 

debugui_test.go

@@ -9,6 +9,7 @@ import (
 	"testing"
 
 	"github.com/ebitengine/debugui"
+	"github.com/hajimehoshi/ebiten/v2"
 )
 
 func TestMultipleIDPartFromCallersInForLoop(t *testing.T) {
@@ -138,3 +139,37 @@ func TestUnusedContainer(t *testing.T) {
 		t.Errorf("got: %v, want: %v", got, want)
 	}
 }
+
+func TestDrawOnlyWidgetInGridCellDuringScroll(t *testing.T) {
+	var d debugui.DebugUI
+	const cellCount = 5
+
+	update := func(scroll int) int {
+		t.Helper()
+		if _, err := d.Update(func(ctx *debugui.Context) error {
+			ctx.Window("Window", image.Rect(0, 0, 300, 300), func(layout debugui.ContainerLayout) {
+				ctx.Text("test")
+				ctx.SetGridLayout(nil, []int{150})
+				ctx.Loop(cellCount, func(i int) {
+					ctx.GridCell(func(bounds image.Rectangle) {
+						ctx.DrawOnlyWidget(func(screen *ebiten.Image) {})
+					})
+				})
+				ctx.SetScroll(image.Pt(0, scroll))
+			})
+			return nil
+		}); err != nil {
+			t.Fatal(err)
+		}
+		return d.DrawCommandCount()
+	}
+
+	update(0)
+	for _, scroll := range []int{0, 60, 100, 200, 300, 450} {
+		update(scroll)
+		got := update(scroll)
+		if got != cellCount {
+			t.Errorf("scroll=%d: %d draw commands, want %d", scroll, got, cellCount)
+		}
+	}
+}

draw.go

@@ -106,7 +106,7 @@ func (c *Context) draw(screen *ebiten.Image) {
 	for cmd := range c.commands() {
 		switch cmd.typ {
 		case commandRect:
-			vector.DrawFilledRect(
+			vector.FillRect(
 				target,
 				float32(cmd.rect.rect.Min.X*scale),
 				float32(cmd.rect.rect.Min.Y*scale),
@@ -205,6 +205,17 @@ func (c *Context) drawIcon(icon icon, rect image.Rectangle, color color.Color) {
 // DrawOnlyWidget adds a widget that only draws the given function without user interaction.
 func (c *Context) DrawOnlyWidget(f func(screen *ebiten.Image)) {
 	_ = c.wrapEventHandlerAndError(func() (EventHandler, error) {
+		// Creating a nested widget here would use the bounds of a new layout item,
+		// which do not represent the area f draws in. Add the draw command directly
+		// and let the clip rect limit the drawing instead.
+		if c.inLayoutCallback {
+			c.setClip(c.clipRect())
+			defer c.setClip(unclippedRect)
+			cmd := c.appendCommand(commandDraw)
+			cmd.draw.f = f
+			return nil, nil
+		}
+
 		_, _ = c.widget(widgetID{}, 0, nil, nil, func(bounds image.Rectangle) {
 			c.setClip(c.clipRect())
 			defer c.setClip(unclippedRect)

export_test.go

@@ -89,3 +89,13 @@ func TextIndexFromX(str string, x int) int {
 func TextWidth(str string) int {
 	return textWidth(str)
 }
+
+func (d *DebugUI) DrawCommandCount() int {
+	n := 0
+	for cmd := range d.ctx.commands() {
+		if cmd.typ == commandDraw {
+			n++
+		}
+	}
+	return n
+}

widget.go

@@ -139,7 +139,10 @@ func (c *Context) widget(id widgetID, opt option, layout func(bounds image.Recta
 				err = err2
 			}
 		}()
+		wasInLayoutCallback := c.inLayoutCallback
+		c.inLayoutCallback = true
 		layout(bounds)
+		c.inLayoutCallback = wasInLayoutCallback
 	}
 
 	wasFocused := c.handleInputForWidget(id, bounds, opt)
@@ -148,7 +151,7 @@ func (c *Context) widget(id widgetID, opt option, layout func(bounds image.Recta
 		e = handleInput(bounds, wasFocused)
 	}
 	// Handling input is still needed even if the widget is out of bounds, especially for Header.
-	if !c.currentContainer().layout.BodyBounds.Overlaps(bounds) {
+	if !c.clipRect().Overlaps(bounds) {
 		return e, nil
 	}