Added TextBox.

Updated basic example.

ui/examples/01_basic/basic.go

@@ -28,23 +28,40 @@ func run() error {
 	}
 	defer plus.Destroy()
 
-	var view = &ui.StackPanel{ContainerBase: ui.ContainerBase{
+	var stretch = func(content ui.Control, margin float32) ui.Control {
-		ControlBase: ui.ControlBase{Background: color.White},
+		return ui.BuildSpacing(content, func(s *ui.Spacing) {
-		Children: []ui.Control{
+			s.Width = ui.Infinite()
+			s.Margin.Left = ui.Fixed(margin)
+			s.Margin.Top = ui.Fixed(margin)
+			s.Margin.Right = ui.Fixed(margin)
+			s.Margin.Bottom = ui.Fixed(margin)
+		})
+	}
+
+	var view = ui.BuildStackPanel(ui.OrientationVertical, func(p *ui.StackPanel) {
+		p.Background = color.White
+		p.Children = []ui.Control{
 			&ui.Label{Text: "Hello, world!"},
-			ui.Margin(ui.BuildIconButton(plus, "Contained", func(b *ui.Button) { b.Type = ui.ButtonTypeContained }), 8),
+			ui.BuildStackPanel(ui.OrientationHorizontal, func(p *ui.StackPanel) {
-			ui.Margin(ui.BuildIconButton(plus, "Icon", func(b *ui.Button) { b.Type = ui.ButtonTypeIcon }), 8),
+				p.Children = []ui.Control{
-			ui.Margin(ui.BuildIconButton(plus, "Outlined", func(b *ui.Button) { b.Type = ui.ButtonTypeOutlined }), 8),
+					stretch(ui.BuildIconButton(plus, "Contained", func(b *ui.Button) { b.Type = ui.ButtonTypeContained }), 8),
-			ui.Margin(ui.BuildIconButton(plus, "Text", func(b *ui.Button) { b.Type = ui.ButtonTypeText }), 8),
+					stretch(ui.BuildIconButton(plus, "Icon", func(b *ui.Button) { b.Type = ui.ButtonTypeIcon }), 8),
+					stretch(ui.BuildIconButton(plus, "Outlined", func(b *ui.Button) { b.Type = ui.ButtonTypeOutlined }), 8),
+					stretch(ui.BuildIconButton(plus, "Text", func(b *ui.Button) { b.Type = ui.ButtonTypeText }), 8),
+				}
+			}),
 			ui.Margin(ui.BuildButton("Quit", func(b *ui.Button) {
 				b.OnClick(func(ctx ui.Context, _ ui.Control, _ geom.PointF32, _ ui.MouseButton) {
 					ctx.Quit()
 				})
 			}), 8),
 			ui.Stretch(&ui.Label{Text: "Content"}),
+			ui.StretchWidth(ui.BuildTextBox(func(b *ui.TextBox) {
+				b.Text = "Type here..."
+			})),
 			&ui.Label{Text: "Status"},
-		},
+		}
-	}}
+	})
 
 	return ui.RunWait(render, ui.DefaultStyle(), view, true)
 }

ui/textbox.go

@@ -0,0 +1,246 @@
+package ui
+
+import (
+	"fmt"
+	"image/color"
+	"time"
+	"unicode"
+
+	"opslag.de/schobers/geom"
+)
+
+type TextSelection struct {
+	Caret int
+	Start int
+	End   int
+}
+
+func (s *TextSelection) SetSelectionToCaret() {
+	s.Start = s.Caret
+	s.End = s.Caret
+}
+
+func (s *TextSelection) MoveCaret(delta int) {
+	s.Caret = s.Caret + delta
+}
+
+func (s TextSelection) HasSelection() bool {
+	return s.Start != s.End
+}
+
+type TextBox struct {
+	ControlBase
+
+	box   BufferControl
+	blink time.Time
+
+	BorderWidth *Length
+	Focus       bool
+	Text        string
+	Selection   TextSelection
+}
+
+func BuildTextBox(fn func(*TextBox)) *TextBox {
+	var b = &TextBox{}
+	if fn != nil {
+		fn(b)
+	}
+	return b
+}
+
+func (b *TextBox) borderWidth() float32 {
+	return b.BorderWidth.Zero(2)
+}
+
+func (b *TextBox) pad(ctx Context) float32 {
+	return ctx.Style().Dimensions.TextPadding + b.borderWidth()
+}
+
+func (b *TextBox) Arrange(ctx Context, bounds geom.RectangleF32, offset geom.PointF32) {
+	b.ControlBase.Arrange(ctx, bounds, offset)
+	b.box.Arrange(ctx, bounds.Inset(b.pad(ctx)), offset)
+}
+
+func (b *TextBox) DesiredSize(ctx Context) geom.PointF32 {
+	var fontName = b.FontName(ctx)
+	var font = ctx.Renderer().Font(fontName)
+	var width = font.WidthOf(b.Text)
+	var height = font.Height()
+	var pad = b.pad(ctx)
+	return geom.PtF32(width+pad*2, height+pad*2)
+}
+
+func (b *TextBox) mousePosToCaretPos(ctx Context, e MouseEvent) int {
+	p := b.mousePos(e)
+	offset := p.X - b.box.bounds.Min.X
+	f := ctx.Renderer().Font(b.FontName(ctx))
+	var carets = [3]int{0, 0, len(b.Text)}
+	var offsets = [3]float32{0, 0, f.WidthOf(b.Text)}
+	var updateCenter = func() {
+		var c = (carets[0] + carets[2]) / 2
+		carets[1] = c
+		offsets[1] = f.WidthOf(b.Text[:c])
+	}
+	updateCenter()
+	for (carets[2] - carets[0]) > 1 {
+		if offset > offsets[1] {
+			carets[0] = carets[1]
+			offsets[0] = offsets[1]
+			updateCenter()
+		} else {
+			carets[2] = carets[1]
+			offsets[2] = offsets[1]
+			updateCenter()
+		}
+	}
+	if geom.Abs32(offsets[0]-offset) < geom.Abs32(offsets[2]-offset) {
+		return carets[0]
+	}
+	return carets[2]
+}
+
+func (b *TextBox) cut() string {
+	start, end := b.selectionRange()
+	if end == 0 {
+		return ""
+	}
+	cut := b.Text[start:end]
+	b.Text = b.Text[:start] + b.Text[end:]
+	b.Selection.Caret = start
+	b.Selection.SetSelectionToCaret()
+	return cut
+}
+
+func (b *TextBox) selection() string {
+	start, end := b.selectionRange()
+	if end == 0 {
+		return ""
+	}
+	return b.Text[start:end]
+}
+
+func (b *TextBox) selectionRange() (int, int) {
+	start, end := b.Selection.Start, b.Selection.End
+	if start == end {
+		return 0, 0
+	}
+	if start > end {
+		start, end = end, start
+	}
+	return start, end
+}
+
+func (b *TextBox) Handle(ctx Context, e Event) {
+	b.ControlBase.Handle(ctx, e)
+	b.box.Handle(ctx, e)
+	switch e := e.(type) {
+	case *MouseButtonDownEvent:
+		if b.over {
+			b.Focus = true
+			b.Selection.Caret = b.mousePosToCaretPos(ctx, e.MouseEvent)
+			b.Selection.SetSelectionToCaret()
+			b.blink = time.Now()
+		} else {
+			b.Focus = false
+		}
+	case *MouseMoveEvent:
+		if b.Focus && b.pressed && b.over {
+			b.Selection.Caret = b.mousePosToCaretPos(ctx, e.MouseEvent)
+			b.Selection.End = b.Selection.Caret
+		}
+	case *KeyPressEvent:
+		if b.Focus {
+			switch {
+			case e.Key == KeyDelete:
+				if b.Selection.HasSelection() {
+					b.cut()
+				} else {
+					caret := b.Selection.Caret
+					if caret < len(b.Text) {
+						b.Text = b.Text[:caret] + b.Text[caret+1:]
+					}
+				}
+			case e.Key == KeyBackspace:
+				if b.Selection.HasSelection() {
+					b.cut()
+				} else {
+					caret := b.Selection.Caret
+					if caret > 0 {
+						b.Text = b.Text[:caret-1] + b.Text[caret:]
+						b.Selection.Caret = caret - 1
+					}
+				}
+			case e.Key == KeyLeft:
+				if b.Selection.Caret > 0 {
+					b.Selection.MoveCaret(-1)
+					if e.Modifiers&KeyModifierShift == KeyModifierShift {
+						b.Selection.End = b.Selection.Caret
+					} else {
+						b.Selection.SetSelectionToCaret()
+					}
+				}
+			case e.Key == KeyRight:
+				if b.Selection.Caret < len(b.Text) {
+					b.Selection.MoveCaret(1)
+					if e.Modifiers&KeyModifierShift == KeyModifierShift {
+						b.Selection.End = b.Selection.Caret
+					} else {
+						b.Selection.SetSelectionToCaret()
+					}
+				}
+			case !unicode.IsControl(e.Character):
+				if e.Modifiers == KeyModifiersNone {
+					b.cut()
+					caret := b.Selection.Caret
+					b.Text = fmt.Sprintf("%s%c%s", b.Text[:caret], e.Character, b.Text[caret:])
+					b.Selection.Caret = caret + 1
+				} else if e.Modifiers&KeyModifierControl == KeyModifierControl {
+					switch e.Character {
+					case 'a':
+						b.Selection.Start = 0
+						b.Selection.End = len(b.Text)
+						b.Selection.Caret = b.Selection.End
+					case 'c':
+						DefaultClipboard.WriteText(b.selection())
+					case 'v':
+						text, err := DefaultClipboard.ReadText()
+						if err == nil {
+							b.cut()
+							caret := b.Selection.Caret
+							b.Text = b.Text[:caret] + text + b.Text[caret:]
+							b.Selection.Caret = caret + len(text)
+						}
+					case 'x':
+						DefaultClipboard.WriteText(b.cut())
+					}
+				}
+			}
+		}
+	}
+	ctx.Animate()
+}
+
+func (b *TextBox) Render(ctx Context) {
+	b.RenderBackground(ctx)
+	c := b.FontColor(ctx)
+	f := b.FontName(ctx)
+	style := ctx.Style()
+	borderWidth := b.borderWidth()
+	ctx.Renderer().Rectangle(b.bounds.Inset(.5*borderWidth), style.Palette.Primary, borderWidth)
+	var caretWidth float32 = 1
+	b.box.RenderFn(ctx, func(_ Context, size geom.PointF32) {
+		var renderer = ctx.Renderer()
+		renderer.Clear(color.Transparent)
+		if b.Selection.Start != b.Selection.End {
+			left, right := renderer.Font(f).WidthOf(b.Text[:b.Selection.Start]), renderer.Font(f).WidthOf(b.Text[:b.Selection.End])
+			renderer.FillRectangle(geom.RectF32(left, 0, right, size.Y), style.Palette.PrimaryLight)
+		}
+		renderer.Text(geom.ZeroPtF32, f, c, b.Text)
+		const interval = 500 * time.Millisecond
+		if b.Focus && (time.Since(b.blink)/interval)%2 == 0 {
+			var w = renderer.Font(f).WidthOf(b.Text[:b.Selection.Caret])
+			var caret = w + .5*caretWidth
+			renderer.Rectangle(geom.RectF32(caret, 0, caret, size.Y), c, caretWidth)
+		}
+	})
+}