selectlist.go

package main

import (
	"image"
	"image/color"

	"gioui.org/f32"
	"gioui.org/font"
	"gioui.org/io/event"
	"gioui.org/io/key"
	"gioui.org/io/pointer"
	"gioui.org/layout"
	"gioui.org/op"
	"gioui.org/op/clip"
	"gioui.org/op/paint"
	"gioui.org/unit"
	"gioui.org/widget"
	"gioui.org/widget/material"
)

// NewVerticalSelectList creates a new select list with the specified item height.
func NewVerticalSelectList(itemHeight unit.Dp) SelectList {
	return SelectList{
		List: widget.List{
			List: layout.List{
				Axis: layout.Vertical,
			},
		},
		ItemHeight: itemHeight,
		Selected:   -1,
		Hovered:    -1,
	}
}

// SelectList draws a list where items can be selected.
type SelectList struct {
	widget.List

	Selected int
	Hovered  int

	ItemHeight unit.Dp
}

// Layout draws the list.
func (list *SelectList) Layout(th *Theme, gtx layout.Context, length int, element layout.ListElement) layout.Dimensions {
	return FocusBorder(th, gtx.Focused(list)).Layout(gtx, func(gtx layout.Context) layout.Dimensions {
		size := gtx.Constraints.Max
		gtx.Constraints = layout.Exact(size)
		defer clip.Rect{Max: size}.Push(gtx.Ops).Pop()

		event.Op(gtx.Ops, list)

		changed := false
		grabbed := false

		itemHeight := gtx.Metric.Dp(list.ItemHeight)
		if itemHeight == 0 {
			itemHeight = gtx.Metric.Sp(th.TextSize)
		}

		pointerClicked := false
		pointerHovered := false
		pointerPosition := f32.Point{}
		for {
			ev, ok := gtx.Event(
				key.FocusFilter{Target: list},
				key.Filter{Focus: list, Name: key.NameUpArrow},
				key.Filter{Focus: list, Name: key.NameDownArrow},
				key.Filter{Focus: list, Name: key.NameHome},
				key.Filter{Focus: list, Name: key.NameEnd},
				key.Filter{Focus: list, Name: key.NamePageUp},
				key.Filter{Focus: list, Name: key.NamePageDown},
				pointer.Filter{
					Target: list,
					Kinds:  pointer.Press | pointer.Move,
				},
			)
			if !ok {
				break
			}

			switch ev := ev.(type) {
			case key.Event:
				if ev.State == key.Press {
					offset := 0
					switch ev.Name {
					case key.NameHome:
						offset = -length
					case key.NameEnd:
						offset = length
					case key.NameUpArrow:
						offset = -1
					case key.NameDownArrow:
						offset = 1
					case key.NamePageUp:
						offset = -list.List.Position.Count
					case key.NamePageDown:
						offset = list.List.Position.Count
					}

					if offset != 0 {
						target := list.Selected + offset
						if target < 0 {
							target = 0
						}
						if target >= length {
							target = length - 1
						}
						if list.Selected != target {
							list.Selected = target
							changed = true
						}
					}

					if !gtx.Focused(list) {
						gtx.Execute(op.InvalidateCmd{})
					}
				}

			case pointer.Event:
				switch ev.Kind {
				case pointer.Press:
					if !gtx.Focused(list) && !grabbed {
						grabbed = true
						gtx.Execute(key.FocusCmd{Tag: list})
					}
					pointerClicked = true
					pointerPosition = ev.Position
				case pointer.Move:
					pointerHovered = true
					pointerPosition = ev.Position
				case pointer.Cancel:
					list.Hovered = -1
				}
			}
		}

		if pointerClicked || pointerHovered {
			clientClickY := list.Position.First*itemHeight + list.Position.Offset + int(pointerPosition.Y)
			target := clientClickY / itemHeight
			if 0 <= target && target < length {
				if pointerClicked && list.Selected != target {
					list.Selected = target
					changed = true
				}
				if pointerHovered && list.Hovered != target {
					list.Hovered = target
				}
			}
		}

		if changed {
			pos := &list.List.Position
			switch {
			case list.Selected < pos.First+1:
				list.List.Position = layout.Position{First: list.Selected - 1}
			case pos.First+pos.Count-1 <= list.Selected:
				list.List.Position = layout.Position{First: list.Selected - pos.Count + 2}
			}
		}

		style := material.List(th.Theme, &list.List)
		style.AnchorStrategy = material.Overlay
		return style.Layout(gtx, length,
			func(gtx layout.Context, index int) layout.Dimensions {
				gtx.Constraints = layout.Exact(image.Point{
					X: gtx.Constraints.Max.X,
					Y: itemHeight,
				})
				return element(gtx, index)
			})
	})
}

// ListItemStyle holds styling for a list item based on selection/hover state.
type ListItemStyle struct {
	Background color.NRGBA
	Foreground color.NRGBA
	Weight     font.Weight
}

// LayoutItem draws the standard item chrome (clip, background fill, inset)
// and calls w to draw the item content. The ListItemStyle is passed so content
// can use the appropriate foreground color and weight.
func (list *SelectList) LayoutItem(th *Theme, gtx layout.Context, index int, w func(gtx layout.Context, style ListItemStyle) layout.Dimensions) layout.Dimensions {
	defer clip.Rect{Max: gtx.Constraints.Max}.Push(gtx.Ops).Pop()
	style := list.ItemStyle(th, gtx, index)
	if style.Background != (color.NRGBA{}) {
		paint.Fill(gtx.Ops, style.Background)
	}
	inset := layout.Inset{Top: 1, Bottom: 1, Left: 4, Right: 4}
	return inset.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
		return w(gtx, style)
	})
}

// ItemStyle returns the style for the item at the given index.
func (list *SelectList) ItemStyle(th *Theme, gtx layout.Context, index int) ListItemStyle {
	s := ListItemStyle{
		Foreground: th.Fg,
		Weight:     font.Normal,
	}
	switch {
	case list.Selected == index:
		if gtx.Focused(list) {
			s.Background = th.ContrastBg
			s.Foreground = th.ContrastFg
		}
		s.Weight = font.Bold
	case list.Hovered == index:
		s.Background = th.ContrastBg
		s.Background.A /= 4
	}
	return s
}