debugui: add (*Context).IDScope

Author: hajimehoshi

container.go

@@ -77,8 +77,14 @@ func (c *Context) Window(title string, rect image.Rectangle, f func(layout Conta
 }
 
 func (c *Context) window(title string, bounds image.Rectangle, opt option, f func(layout ContainerLayout)) (err error) {
-	id := c.idFromString(title, emptyControlID)
+	id := c.idFromString(title)
+	c.idScopeFromControlID(id, func() {
+		err = c.doWindow(title, bounds, opt, id, f)
+	})
+	return
+}
 
+func (c *Context) doWindow(title string, bounds image.Rectangle, opt option, id controlID, f func(layout ContainerLayout)) (err error) {
 	cnt := c.container(id, opt)
 	if cnt == nil || !cnt.open {
 		return nil
@@ -130,7 +136,7 @@ func (c *Context) window(title string, bounds image.Rectangle, opt option, f fun
 
 		// do title text
 		if (^opt & optionNoTitle) != 0 {
-			id := c.idFromString("title", id)
+			id := c.idFromString("title")
 			r := image.Rect(tr.Min.X+tr.Dy()-c.style().padding, tr.Min.Y, tr.Max.X, tr.Max.Y)
 			c.updateControl(id, r, opt)
 			c.drawControlText(title, r, colorTitleText, opt)
@@ -142,7 +148,7 @@ func (c *Context) window(title string, bounds image.Rectangle, opt option, f fun
 
 		// do `collapse` button
 		if (^opt & optionNoClose) != 0 {
-			id := c.idFromString("collapse", id)
+			id := c.idFromString("collapse")
 			r := image.Rect(tr.Min.X, tr.Min.Y, tr.Min.X+tr.Dy(), tr.Max.Y)
 			icon := iconExpanded
 			if collapsed {
@@ -160,7 +166,7 @@ func (c *Context) window(title string, bounds image.Rectangle, opt option, f fun
 		return nil
 	}
 
-	if err := c.pushContainerBodyLayout(cnt, body, opt, id); err != nil {
+	if err := c.pushContainerBodyLayout(cnt, body, opt); err != nil {
 		return err
 	}
 	defer func() {
@@ -172,7 +178,7 @@ func (c *Context) window(title string, bounds image.Rectangle, opt option, f fun
 	// do `resize` handle
 	if (^opt & optionNoResize) != 0 {
 		sz := c.style().titleHeight
-		id := c.idFromString("resize", id)
+		id := c.idFromString("resize")
 		r := image.Rect(bounds.Max.X-sz, bounds.Max.Y-sz, bounds.Max.X, bounds.Max.Y)
 		c.updateControl(id, r, opt)
 		if id == c.focus && ebiten.IsMouseButtonPressed(ebiten.MouseButtonLeft) {
@@ -207,7 +213,7 @@ func (c *Context) window(title string, bounds image.Rectangle, opt option, f fun
 
 func (c *Context) OpenPopup(name string) {
 	c.wrapError(func() error {
-		id := c.idFromString(name, emptyControlID)
+		id := c.idFromString(name)
 		cnt := c.container(id, 0)
 		// set as hover root so popup isn't closed in begin_window_ex()
 		c.nextHoverRoot = cnt
@@ -226,7 +232,7 @@ func (c *Context) OpenPopup(name string) {
 
 func (c *Context) ClosePopup(name string) {
 	c.wrapError(func() error {
-		id := c.idFromString(name, emptyControlID)
+		id := c.idFromString(name)
 		cnt := c.container(id, 0)
 		cnt.open = false
 		return nil

context.go

@@ -20,6 +20,7 @@ type Context struct {
 	numberEditBuf string
 	numberEdit    controlID
 
+	idStack        []controlID
 	commandList    []*command
 	rootList       []*container
 	containerStack []*container

control.go

@@ -7,7 +7,6 @@ import (
 	"fmt"
 	"image"
 	"math"
-	"strings"
 	"unsafe"
 
 	"github.com/hajimehoshi/ebiten/v2"
@@ -18,8 +17,6 @@ type controlID string
 
 const emptyControlID controlID = ""
 
-const idSeparator = "\x00"
-
 type option int
 
 const (
@@ -107,11 +104,11 @@ func (c *Context) updateControl(id controlID, bounds image.Rectangle, opt option
 	return
 }
 
-func (c *Context) Control(idStr string, f func(bounds image.Rectangle) bool) bool {
+func (c *Context) Control(f func(bounds image.Rectangle) bool) bool {
 	pc := caller()
 	var res bool
 	c.wrapError(func() error {
-		id := c.idFromCaller(pc, idStr)
+		id := c.idFromCaller(pc)
 		var err error
 		res, err = c.control(id, 0, func(bounds image.Rectangle, wasFocused bool) (bool, error) {
 			return f(bounds), nil
@@ -179,8 +176,7 @@ func (c *Context) Text(text string) {
 }
 
 func (c *Context) button(label string, opt option, callerPC uintptr) (controlID, bool, error) {
-	label, idStr, _ := strings.Cut(label, idSeparator)
-	id := c.idFromCaller(callerPC, idStr)
+	id := c.idFromCaller(callerPC)
 	res, err := c.control(id, opt, func(bounds image.Rectangle, wasFocused bool) (bool, error) {
 		var res bool
 		// handle click
@@ -330,8 +326,7 @@ func (c *Context) sliderF(value *float64, low, high, step float64, digits int, o
 }
 
 func (c *Context) header(label string, isTreeNode bool, opt option, callerPC uintptr, f func() error) error {
-	label, idStr, _ := strings.Cut(label, idSeparator)
-	id := c.idFromCaller(callerPC, idStr)
+	id := c.idFromCaller(callerPC)
 	c.SetGridLayout(nil, nil)
 
 	var expanded bool
@@ -404,7 +399,7 @@ func (c *Context) treeNode(label string, opt option, callerPC uintptr, f func())
 }
 
 // x = x, y = y, w = w, h = h
-func (c *Context) scrollbarVertical(cnt *container, b image.Rectangle, cs image.Point, containerID controlID) {
+func (c *Context) scrollbarVertical(cnt *container, b image.Rectangle, cs image.Point) {
 	maxscroll := cs.Y - b.Dy()
 	if maxscroll > 0 && b.Dy() > 0 {
 		// get sizing / positioning
@@ -413,7 +408,7 @@ func (c *Context) scrollbarVertical(cnt *container, b image.Rectangle, cs image.
 		base.Max.X = base.Min.X + c.style().scrollbarSize
 
 		// handle input
-		id := c.idFromString("scrollbar-y", containerID)
+		id := c.idFromString("scrollbar-y")
 		c.updateControl(id, base, 0)
 		if c.focus == id && ebiten.IsMouseButtonPressed(ebiten.MouseButtonLeft) {
 			cnt.layout.ScrollOffset.Y += c.mouseDelta().Y * cs.Y / base.Dy()
@@ -439,7 +434,7 @@ func (c *Context) scrollbarVertical(cnt *container, b image.Rectangle, cs image.
 }
 
 // x = y, y = x, w = h, h = w
-func (c *Context) scrollbarHorizontal(cnt *container, b image.Rectangle, cs image.Point, containerID controlID) {
+func (c *Context) scrollbarHorizontal(cnt *container, b image.Rectangle, cs image.Point) {
 	maxscroll := cs.X - b.Dx()
 	if maxscroll > 0 && b.Dx() > 0 {
 		// get sizing / positioning
@@ -448,7 +443,7 @@ func (c *Context) scrollbarHorizontal(cnt *container, b image.Rectangle, cs imag
 		base.Max.Y = base.Min.Y + c.style().scrollbarSize
 
 		// handle input
-		id := c.idFromString("scrollbar-x", containerID)
+		id := c.idFromString("scrollbar-x")
 		c.updateControl(id, base, 0)
 		if c.focus == id && ebiten.IsMouseButtonPressed(ebiten.MouseButtonLeft) {
 			cnt.layout.ScrollOffset.X += c.mouseDelta().X * cs.X / base.Dx()
@@ -474,15 +469,15 @@ func (c *Context) scrollbarHorizontal(cnt *container, b image.Rectangle, cs imag
 }
 
 // if `swap` is true, X = Y, Y = X, W = H, H = W
-func (c *Context) scrollbar(cnt *container, b image.Rectangle, cs image.Point, swap bool, containerID controlID) {
+func (c *Context) scrollbar(cnt *container, b image.Rectangle, cs image.Point, swap bool) {
 	if swap {
-		c.scrollbarHorizontal(cnt, b, cs, containerID)
+		c.scrollbarHorizontal(cnt, b, cs)
 	} else {
-		c.scrollbarVertical(cnt, b, cs, containerID)
+		c.scrollbarVertical(cnt, b, cs)
 	}
 }
 
-func (c *Context) scrollbars(cnt *container, body image.Rectangle, containerID controlID) image.Rectangle {
+func (c *Context) scrollbars(cnt *container, body image.Rectangle) image.Rectangle {
 	sz := c.style().scrollbarSize
 	cs := cnt.layout.ContentSize
 	cs.X += c.style().padding * 2
@@ -497,15 +492,15 @@ func (c *Context) scrollbars(cnt *container, body image.Rectangle, containerID c
 	}
 	// to create a horizontal or vertical scrollbar almost-identical code is
 	// used; only the references to `x|y` `w|h` need to be switched
-	c.scrollbar(cnt, body, cs, false, containerID)
-	c.scrollbar(cnt, body, cs, true, containerID)
+	c.scrollbar(cnt, body, cs, false)
+	c.scrollbar(cnt, body, cs, true)
 	c.popClipRect()
 	return body
 }
 
-func (c *Context) pushContainerBodyLayout(cnt *container, body image.Rectangle, opt option, containerID controlID) error {
+func (c *Context) pushContainerBodyLayout(cnt *container, body image.Rectangle, opt option) error {
 	if (^opt & optionNoScroll) != 0 {
-		body = c.scrollbars(cnt, body, containerID)
+		body = c.scrollbars(cnt, body)
 	}
 	if err := c.pushLayout(body.Inset(c.style().padding), cnt.layout.ScrollOffset, opt&optionAutoSize != 0); err != nil {
 		return err

example/ui.go

@@ -120,7 +120,7 @@ func (g *Game) testWindow(ctx *debugui.Context) {
 				ctx.Text("Blue:")
 				ctx.Slider(&g.bg[2], 0, 255, 1)
 			})
-			ctx.Control("", func(bounds image.Rectangle) bool {
+			ctx.Control(func(bounds image.Rectangle) bool {
 				ctx.DrawControl(func(screen *ebiten.Image) {
 					scale := ctx.Scale()
 					vector.DrawFilledRect(
@@ -193,9 +193,11 @@ func (g *Game) buttonWindows(ctx *debugui.Context) {
 	ctx.Window("Button Windows", image.Rect(350, 300, 650, 500), func(layout debugui.ContainerLayout) {
 		ctx.SetGridLayout([]int{-1, -1, -1, -1}, nil)
 		for i := 0; i < 100; i++ {
-			if ctx.Button("Button\x00" + fmt.Sprintf("%d", i)) {
-				g.writeLog(fmt.Sprintf("Pressed button %d in Button Window", i))
-			}
+			ctx.IDScope(fmt.Sprintf("%d", i), func() {
+				if ctx.Button("Button") {
+					g.writeLog(fmt.Sprintf("Pressed button %d in Button Window", i))
+				}
+			})
 		}
 	})
 }

helpers.go

@@ -5,11 +5,8 @@ package debugui
 
 import (
 	"errors"
-	"fmt"
-	"runtime"
 	"slices"
 	"sort"
-	"unsafe"
 
 	"github.com/hajimehoshi/ebiten/v2"
 	"github.com/hajimehoshi/ebiten/v2/inpututil"
@@ -19,34 +16,6 @@ func clamp[T int | float64](x, a, b T) T {
 	return min(b, max(a, x))
 }
 
-// caller returns a program counter of the caller.
-func caller() uintptr {
-	pc, _, _, ok := runtime.Caller(2)
-	if !ok {
-		return 0
-	}
-	return pc
-}
-
-func (c *Context) idFromPointer(pointer unsafe.Pointer) controlID {
-	return controlID(fmt.Sprintf("pointer:%p", pointer))
-}
-
-func (c *Context) idFromString(str string, parentID controlID) controlID {
-	if parentID != emptyControlID {
-		return controlID(fmt.Sprintf("string:%q:%s", str, parentID))
-	}
-	return controlID(fmt.Sprintf("string:%q", str))
-}
-
-// idFromCaller returns a hash value based on the caller's file and line number.
-func (c *Context) idFromCaller(callerPC uintptr, str string) controlID {
-	if len(str) > 0 {
-		return controlID(fmt.Sprintf("caller:%d:%q", callerPC, str))
-	}
-	return controlID(fmt.Sprintf("caller:%d", callerPC))
-}
-
 func (c *Context) bringToFront(cnt *container) {
 	c.lastZIndex++
 	cnt.zIndex = c.lastZIndex
@@ -92,14 +61,17 @@ func (c *Context) begin() {
 
 func (c *Context) end() error {
 	// check stacks
+	if len(c.idStack) > 0 {
+		return errors.New("debugui: id stack must be empty")
+	}
 	if len(c.containerStack) > 0 {
-		return errors.New("debugui: container stack not empty")
+		return errors.New("debugui: container stack must be empty")
 	}
 	if len(c.clipStack) > 0 {
-		return errors.New("debugui: clip stack not empty")
+		return errors.New("debugui: clip stack must be empty")
 	}
 	if len(c.layoutStack) > 0 {
-		return errors.New("debugui: layout stack not empty")
+		return errors.New("debugui: layout stack must be empty")
 	}
 
 	// handle scroll input

id.go

@@ -0,0 +1,76 @@
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-FileCopyrightText: 2025 The Ebitengine Authors
+
+package debugui
+
+import (
+	"fmt"
+	"runtime"
+	"slices"
+	"unsafe"
+)
+
+// caller returns a program counter of the caller.
+func caller() uintptr {
+	pc, _, _, ok := runtime.Caller(2)
+	if !ok {
+		return 0
+	}
+	return pc
+}
+
+// IDScope creates a new scope for control IDs.
+// IDScope creates a unique scope based on the caller's position and the given name string.
+//
+// IDScope is useful when you want to create multiple controls at the same position e.g. in a for loop.
+func (c *Context) IDScope(name string, f func()) {
+	pc := caller()
+	c.idStack = append(c.idStack, c.idFromCaller(pc))
+	c.idStack = append(c.idStack, c.idFromString(name))
+	defer func() {
+		c.idStack = slices.Delete(c.idStack, len(c.idStack)-2, len(c.idStack))
+	}()
+	f()
+}
+
+func (c *Context) idScopeFromControlID(controlID controlID, f func()) {
+	c.idStack = append(c.idStack, controlID)
+	defer func() {
+		c.idStack = slices.Delete(c.idStack, len(c.idStack)-1, len(c.idStack))
+	}()
+	f()
+}
+
+func (c *Context) idFromPointer(pointer unsafe.Pointer) controlID {
+	return controlID(fmt.Sprintf("pointer:%p", pointer))
+}
+
+func (c *Context) idScopeToControlID() controlID {
+	var newID controlID
+	for _, id := range c.idStack {
+		if len(newID) > 0 {
+			newID += ":"
+		}
+		newID += id
+	}
+	return newID
+}
+
+func (c *Context) idFromString(str string) controlID {
+	newID := c.idScopeToControlID()
+	if len(newID) > 0 {
+		newID += ":"
+	}
+	newID += controlID(fmt.Sprintf("string:%q", str))
+	return newID
+}
+
+// idFromCaller returns a hash value based on the caller's file and line number.
+func (c *Context) idFromCaller(callerPC uintptr) controlID {
+	newID := c.idScopeToControlID()
+	if len(newID) > 0 {
+		newID += ":"
+	}
+	newID += controlID(fmt.Sprintf("caller:%d", callerPC))
+	return newID
+}

panel.go

@@ -13,8 +13,14 @@ func (c *Context) Panel(name string, f func(layout ContainerLayout)) {
 }
 
 func (c *Context) panel(name string, opt option, f func(layout ContainerLayout)) (err error) {
-	id := c.idFromString(name, emptyControlID)
+	id := c.idFromString(name)
+	c.idScopeFromControlID(id, func() {
+		err = c.doPanel(opt, id, f)
+	})
+	return
+}
 
+func (c *Context) doPanel(opt option, id controlID, f func(layout ContainerLayout)) (err error) {
 	cnt := c.container(id, opt)
 	l, err := c.layoutNext()
 	if err != nil {
@@ -28,7 +34,7 @@ func (c *Context) panel(name string, opt option, f func(layout ContainerLayout))
 	c.pushContainer(cnt)
 	defer c.popContainer()
 
-	if err := c.pushContainerBodyLayout(cnt, cnt.layout.Bounds, opt, id); err != nil {
+	if err := c.pushContainerBodyLayout(cnt, cnt.layout.Bounds, opt); err != nil {
 		return err
 	}
 	defer func() {