debugui: draw DrawOnlyWidget without culling by its layout item

DrawOnlyWidget created a nested widget, and that widget was culled when the
bounds of its layout item did not overlap the container body. The callback
can draw outside those bounds, so they cannot tell whether the output is
visible: in a grid cell the item has the default height at the top of the
cell, and the drawing disappeared once that item scrolled out while the
cell was still visible.

Allocate the layout item as before, so that the layout does not depend on
whether the drawing is visible, and add the draw command without the
visibility check. The clip rect already limits the output to the visible
area.

Also replace the deprecated vector.DrawFilledRect with vector.FillRect.

Fixes #47

Author: Vmarcelo49

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,68 @@ 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)
+		}
+	}
+}
+
+func TestDrawOnlyWidgetInPanelInsideGridCell(t *testing.T) {
+	var d debugui.DebugUI
+	var offset int
+
+	if _, err := d.Update(func(ctx *debugui.Context) error {
+		ctx.Window("Window", image.Rect(0, 0, 300, 300), func(layout debugui.ContainerLayout) {
+			ctx.SetGridLayout(nil, []int{300})
+			ctx.GridCell(func(image.Rectangle) {
+				ctx.SetGridLayout(nil, []int{250})
+				ctx.Panel(func(panelLayout debugui.ContainerLayout) {
+					ctx.SetGridLayout(nil, []int{150})
+					ctx.DrawOnlyWidget(func(*ebiten.Image) {})
+					ctx.GridCell(func(bounds image.Rectangle) {
+						offset = bounds.Min.Y - panelLayout.BodyBounds.Min.Y
+					})
+				})
+			})
+		})
+		return nil
+	}); err != nil {
+		t.Fatal(err)
+	}
+
+	// A panel has its own layout, so DrawOnlyWidget must allocate its 150px row
+	// there: the following cell starts after the body padding, that row and one
+	// spacing. If DrawOnlyWidget allocated nothing, the cell would start at 5.
+	if want := 5 + 150 + 4; offset != want {
+		t.Errorf("the cell after DrawOnlyWidget starts at %d, want %d", offset, want)
+	}
+}

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,12 +205,19 @@ 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) {
-		_, _ = c.widget(widgetID{}, 0, nil, nil, func(bounds image.Rectangle) {
-			c.setClip(c.clipRect())
-			defer c.setClip(unclippedRect)
-			cmd := c.appendCommand(commandDraw)
-			cmd.draw.f = f
-		})
+		// The layout item is allocated as usual, so that the layout does not depend
+		// on whether the drawing is visible. The item's bounds must not be used to
+		// cull the drawing though: f can draw outside them, and the clip rect
+		// already limits the output to the visible area.
+		if _, err := c.layoutNext(); err != nil {
+			return nil, err
+		}
+
+		c.setClip(c.clipRect())
+		defer c.setClip(unclippedRect)
+
+		cmd := c.appendCommand(commandDraw)
+		cmd.draw.f = f
 		return nil, nil
 	})
 }

export_test.go

@@ -140,3 +140,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
+}