diff --git a/ui/examples/01_basic/basic.go b/ui/examples/01_basic/basic.go index 72c1393..8b8f2f6 100644 --- a/ui/examples/01_basic/basic.go +++ b/ui/examples/01_basic/basic.go @@ -28,23 +28,40 @@ func run() error { } defer plus.Destroy() - var view = &ui.StackPanel{ContainerBase: ui.ContainerBase{ - ControlBase: ui.ControlBase{Background: color.White}, - Children: []ui.Control{ + var stretch = func(content ui.Control, margin float32) ui.Control { + return ui.BuildSpacing(content, func(s *ui.Spacing) { + 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.Margin(ui.BuildIconButton(plus, "Icon", func(b *ui.Button) { b.Type = ui.ButtonTypeIcon }), 8), - ui.Margin(ui.BuildIconButton(plus, "Outlined", func(b *ui.Button) { b.Type = ui.ButtonTypeOutlined }), 8), - ui.Margin(ui.BuildIconButton(plus, "Text", func(b *ui.Button) { b.Type = ui.ButtonTypeText }), 8), + ui.BuildStackPanel(ui.OrientationHorizontal, func(p *ui.StackPanel) { + p.Children = []ui.Control{ + stretch(ui.BuildIconButton(plus, "Contained", func(b *ui.Button) { b.Type = ui.ButtonTypeContained }), 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) } diff --git a/ui/textbox.go b/ui/textbox.go new file mode 100644 index 0000000..f2e370c --- /dev/null +++ b/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) + } + }) +}