mirror of
https://github.com/vsariola/sointu.git
synced 2026-02-14 12:13:20 -05:00
feat(tracker): enum-style values and menus to choose one option
This commit is contained in:
5684185+vsariola@users.noreply.github.com
parent
ca4b87d43d
commit
4bb5df9c87
@ -5,23 +5,30 @@ import (
|
||||
"image/color"
|
||||
|
||||
"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"
|
||||
"github.com/vsariola/sointu/tracker"
|
||||
)
|
||||
|
||||
type (
|
||||
// MenuState is the part of the menu that needs to be retained between frames.
|
||||
MenuState struct {
|
||||
visible bool
|
||||
tags []bool
|
||||
hover int
|
||||
hoverOk bool
|
||||
list layout.List
|
||||
scrollBar ScrollBar
|
||||
|
||||
tag bool
|
||||
visible bool
|
||||
|
||||
itemTmp []menuItem
|
||||
}
|
||||
|
||||
// MenuStyle is the style for a menu that is stored in the theme.yml.
|
||||
@ -34,139 +41,267 @@ type (
|
||||
Height unit.Dp
|
||||
}
|
||||
|
||||
// ActionMenuItem is a menu item that has an icon, text, shortcut and an action.
|
||||
ActionMenuItem struct {
|
||||
Icon []byte
|
||||
Text string
|
||||
Shortcut string
|
||||
Action tracker.Action
|
||||
}
|
||||
|
||||
// MenuWidget has a Layout method to display a menu
|
||||
MenuWidget struct {
|
||||
Theme *Theme
|
||||
State *MenuState
|
||||
Style *MenuStyle
|
||||
}
|
||||
|
||||
// MenuButton displayes a button with text that opens a menu when clicked.
|
||||
MenuButton struct {
|
||||
Theme *Theme
|
||||
Title string
|
||||
Style *ButtonStyle
|
||||
Clickable *Clickable
|
||||
MenuState *MenuState
|
||||
Width unit.Dp
|
||||
State *MenuState
|
||||
Style *MenuStyle
|
||||
PopupStyle *PopupStyle
|
||||
}
|
||||
)
|
||||
|
||||
func Menu(th *Theme, state *MenuState) MenuWidget {
|
||||
return MenuWidget{
|
||||
Theme: th,
|
||||
State: state,
|
||||
Style: &th.Menu.Main,
|
||||
func Menu(state *MenuState) MenuWidget { return MenuWidget{State: state} }
|
||||
func (w MenuWidget) WithStyle(style *MenuStyle) MenuWidget { w.Style = style; return w }
|
||||
func (w MenuWidget) WithPopupStyle(style *PopupStyle) MenuWidget { w.PopupStyle = style; return w }
|
||||
|
||||
func (ms *MenuState) Tags(level int, yield TagYieldFunc) bool {
|
||||
if ms.visible {
|
||||
return yield(level, &ms.tag)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
func MenuItem(act tracker.Action, text, shortcut string, icon []byte) ActionMenuItem {
|
||||
return ActionMenuItem{
|
||||
// MenuChild describes one or more menu items; if MenuChild is an Action or
|
||||
// Bool, it's one item per child, but Ints are treated as enumerations and
|
||||
// create one item per different possible values of the int.
|
||||
type MenuChild struct {
|
||||
Icon []byte
|
||||
Text string
|
||||
Shortcut string
|
||||
|
||||
kind menuChildKind
|
||||
action tracker.Action
|
||||
bool tracker.Bool
|
||||
int tracker.Int
|
||||
widget layout.Widget // these should be passive separators and such
|
||||
}
|
||||
|
||||
type menuChildKind int
|
||||
|
||||
const (
|
||||
menuChildAction menuChildKind = iota
|
||||
menuChildBool
|
||||
menuChildInt
|
||||
menuChildList
|
||||
menuChildDivider
|
||||
)
|
||||
|
||||
func ActionMenuChild(act tracker.Action, text, shortcut string, icon []byte) MenuChild {
|
||||
return MenuChild{
|
||||
Icon: icon,
|
||||
Text: text,
|
||||
Shortcut: shortcut,
|
||||
Action: act,
|
||||
|
||||
kind: menuChildAction,
|
||||
action: act,
|
||||
}
|
||||
}
|
||||
|
||||
func MenuBtn(th *Theme, ms *MenuState, cl *Clickable, title string) MenuButton {
|
||||
return MenuButton{
|
||||
Theme: th,
|
||||
Title: title,
|
||||
Clickable: cl,
|
||||
MenuState: ms,
|
||||
Style: &th.Button.Menu,
|
||||
func BoolMenuChild(b tracker.Bool, text, shortcut string, icon []byte) MenuChild {
|
||||
return MenuChild{
|
||||
Icon: icon,
|
||||
Text: text,
|
||||
Shortcut: shortcut,
|
||||
|
||||
kind: menuChildBool,
|
||||
bool: b,
|
||||
}
|
||||
}
|
||||
|
||||
func (m *MenuWidget) Layout(gtx C, items ...ActionMenuItem) D {
|
||||
func IntMenuChild(i tracker.Int, icon []byte) MenuChild {
|
||||
return MenuChild{
|
||||
Icon: icon,
|
||||
kind: menuChildInt,
|
||||
int: i,
|
||||
}
|
||||
}
|
||||
|
||||
func DividerMenuChild() MenuChild { return MenuChild{kind: menuChildDivider} }
|
||||
|
||||
// Layout the menu with the given items
|
||||
func (m MenuWidget) Layout(gtx C, children ...MenuChild) D {
|
||||
t := TrackerFromContext(gtx)
|
||||
if m.Style == nil {
|
||||
m.Style = &t.Theme.Menu.Main
|
||||
}
|
||||
// unfortunately, there was no way to include items into the MenuWidget
|
||||
// without causing heap escapes, so they are passed as a parameter to the Layout
|
||||
m.update(gtx, items...)
|
||||
popup := Popup(m.Theme, &m.State.visible)
|
||||
popup.Style = &m.Theme.Popup.Menu
|
||||
return popup.Layout(gtx, func(gtx C) D {
|
||||
m.State.itemTmp = m.State.itemTmp[:0]
|
||||
for i, c := range children {
|
||||
switch c.kind {
|
||||
case menuChildAction:
|
||||
m.State.itemTmp = append(m.State.itemTmp, menuItem{childIndex: i, icon: c.Icon, text: c.Text, shortcut: c.Shortcut, enabled: c.enabled()})
|
||||
case menuChildBool:
|
||||
mi := menuItem{childIndex: i, text: c.Text, shortcut: c.Shortcut, enabled: c.enabled()}
|
||||
if c.bool.Value() {
|
||||
mi.icon = c.Icon
|
||||
}
|
||||
m.State.itemTmp = append(m.State.itemTmp, mi)
|
||||
case menuChildInt:
|
||||
for v := c.int.Range().Min; v <= c.int.Range().Max; v++ {
|
||||
mi := menuItem{childIndex: i, text: c.int.StringOf(v), value: v, enabled: c.enabled()}
|
||||
if c.int.Value() == v {
|
||||
mi.icon = c.Icon
|
||||
}
|
||||
if v == c.int.Range().Min {
|
||||
mi.shortcut = c.Shortcut
|
||||
}
|
||||
m.State.itemTmp = append(m.State.itemTmp, mi)
|
||||
}
|
||||
case menuChildDivider:
|
||||
m.State.itemTmp = append(m.State.itemTmp, menuItem{childIndex: i, divider: true})
|
||||
}
|
||||
}
|
||||
m.update(gtx, children, m.State.itemTmp)
|
||||
listItem := func(gtx C, i int) D {
|
||||
item := m.State.itemTmp[i]
|
||||
if widget := children[item.childIndex].widget; widget != nil {
|
||||
return widget(gtx)
|
||||
}
|
||||
var icon *widget.Icon
|
||||
if item.icon != nil {
|
||||
icon = t.Theme.Icon(item.icon)
|
||||
}
|
||||
iconColor := m.Style.Text.Color
|
||||
iconInset := layout.Inset{Left: unit.Dp(12), Right: unit.Dp(6)}
|
||||
textLabel := Label(t.Theme, &m.Style.Text, item.text)
|
||||
shortcutLabel := Label(t.Theme, &m.Style.Shortcut, item.shortcut)
|
||||
if !item.enabled {
|
||||
iconColor = m.Style.Disabled
|
||||
textLabel.Color = m.Style.Disabled
|
||||
shortcutLabel.Color = m.Style.Disabled
|
||||
}
|
||||
shortcutInset := layout.Inset{Left: unit.Dp(12), Right: unit.Dp(12), Bottom: unit.Dp(2), Top: unit.Dp(2)}
|
||||
fg := func(gtx C) D {
|
||||
if item.divider {
|
||||
d := Divider{Thickness: 1, Axis: layout.Horizontal, Margin: 5}
|
||||
return d.Layout(gtx)
|
||||
}
|
||||
return layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx,
|
||||
layout.Rigid(func(gtx C) D {
|
||||
return iconInset.Layout(gtx, func(gtx C) D {
|
||||
if icon == nil {
|
||||
return D{}
|
||||
}
|
||||
p := gtx.Dp(unit.Dp(m.Style.Text.TextSize))
|
||||
gtx.Constraints.Min = image.Pt(p, p)
|
||||
return icon.Layout(gtx, iconColor)
|
||||
})
|
||||
}),
|
||||
layout.Rigid(textLabel.Layout),
|
||||
layout.Flexed(1, func(gtx C) D { return D{Size: image.Pt(gtx.Constraints.Max.X, 1)} }),
|
||||
layout.Rigid(func(gtx C) D {
|
||||
return shortcutInset.Layout(gtx, shortcutLabel.Layout)
|
||||
}),
|
||||
)
|
||||
}
|
||||
bg := func(gtx C) D {
|
||||
rect := clip.Rect{Max: image.Pt(gtx.Constraints.Min.X, gtx.Constraints.Min.Y)}
|
||||
if item.enabled && m.State.hoverOk && m.State.hover == i {
|
||||
paint.FillShape(gtx.Ops, m.Style.Hover, rect.Op())
|
||||
}
|
||||
if item.enabled {
|
||||
area := rect.Push(gtx.Ops)
|
||||
event.Op(gtx.Ops, &m.State.tags[i])
|
||||
area.Pop()
|
||||
}
|
||||
return D{Size: rect.Max}
|
||||
}
|
||||
return layout.Background{}.Layout(gtx, bg, fg)
|
||||
}
|
||||
menuList := func(gtx C) D {
|
||||
gtx.Constraints.Max.X = gtx.Dp(m.Style.Width)
|
||||
gtx.Constraints.Max.Y = gtx.Dp(m.Style.Height)
|
||||
r := clip.Rect(image.Rect(0, 0, gtx.Constraints.Max.X, gtx.Constraints.Max.Y)).Push(gtx.Ops)
|
||||
event.Op(gtx.Ops, &m.State.tag)
|
||||
r.Pop()
|
||||
m.State.list.Axis = layout.Vertical
|
||||
m.State.scrollBar.Axis = layout.Vertical
|
||||
return layout.Stack{Alignment: layout.SE}.Layout(gtx,
|
||||
layout.Expanded(func(gtx C) D { return m.State.list.Layout(gtx, len(m.State.itemTmp), listItem) }),
|
||||
layout.Expanded(func(gtx C) D {
|
||||
return m.State.list.Layout(gtx, len(items), func(gtx C, i int) D {
|
||||
defer op.Offset(image.Point{}).Push(gtx.Ops).Pop()
|
||||
var macro op.MacroOp
|
||||
item := &items[i]
|
||||
if i == m.State.hover-1 && item.Action.Enabled() {
|
||||
macro = op.Record(gtx.Ops)
|
||||
}
|
||||
icon := m.Theme.Icon(item.Icon)
|
||||
iconColor := m.Style.Text.Color
|
||||
iconInset := layout.Inset{Left: unit.Dp(12), Right: unit.Dp(6)}
|
||||
textLabel := Label(m.Theme, &m.Style.Text, item.Text)
|
||||
shortcutLabel := Label(m.Theme, &m.Style.Shortcut, item.Shortcut)
|
||||
if !item.Action.Enabled() {
|
||||
iconColor = m.Style.Disabled
|
||||
textLabel.Color = m.Style.Disabled
|
||||
shortcutLabel.Color = m.Style.Disabled
|
||||
}
|
||||
shortcutInset := layout.Inset{Left: unit.Dp(12), Right: unit.Dp(12), Bottom: unit.Dp(2), Top: unit.Dp(2)}
|
||||
dims := layout.Flex{Axis: layout.Horizontal, Alignment: layout.Middle}.Layout(gtx,
|
||||
layout.Rigid(func(gtx C) D {
|
||||
return iconInset.Layout(gtx, func(gtx C) D {
|
||||
p := gtx.Dp(unit.Dp(m.Style.Text.TextSize))
|
||||
gtx.Constraints.Min = image.Pt(p, p)
|
||||
return icon.Layout(gtx, iconColor)
|
||||
})
|
||||
}),
|
||||
layout.Rigid(textLabel.Layout),
|
||||
layout.Flexed(1, func(gtx C) D { return D{Size: image.Pt(gtx.Constraints.Max.X, 1)} }),
|
||||
layout.Rigid(func(gtx C) D {
|
||||
return shortcutInset.Layout(gtx, shortcutLabel.Layout)
|
||||
}),
|
||||
)
|
||||
if i == m.State.hover-1 && item.Action.Enabled() {
|
||||
recording := macro.Stop()
|
||||
paint.FillShape(gtx.Ops, m.Style.Hover, clip.Rect{
|
||||
Max: image.Pt(dims.Size.X, dims.Size.Y),
|
||||
}.Op())
|
||||
recording.Add(gtx.Ops)
|
||||
}
|
||||
if item.Action.Enabled() {
|
||||
rect := image.Rect(0, 0, dims.Size.X, dims.Size.Y)
|
||||
area := clip.Rect(rect).Push(gtx.Ops)
|
||||
event.Op(gtx.Ops, &m.State.tags[i])
|
||||
area.Pop()
|
||||
}
|
||||
return dims
|
||||
})
|
||||
}),
|
||||
layout.Expanded(func(gtx C) D {
|
||||
return m.State.scrollBar.Layout(gtx, &m.Theme.ScrollBar, len(items), &m.State.list.Position)
|
||||
return m.State.scrollBar.Layout(gtx, &t.Theme.ScrollBar, len(m.State.itemTmp), &m.State.list.Position)
|
||||
}),
|
||||
)
|
||||
})
|
||||
}
|
||||
popup := Popup(t.Theme, &m.State.visible).WithStyle(m.PopupStyle)
|
||||
return popup.Layout(gtx, menuList)
|
||||
|
||||
}
|
||||
|
||||
func (m *MenuWidget) update(gtx C, items ...ActionMenuItem) {
|
||||
for i, item := range items {
|
||||
type menuItem struct {
|
||||
childIndex int
|
||||
value int
|
||||
icon []byte
|
||||
text, shortcut string
|
||||
enabled bool
|
||||
divider bool
|
||||
}
|
||||
|
||||
func (m *MenuWidget) update(gtx C, children []MenuChild, items []menuItem) {
|
||||
// handle keyboard events for the menu
|
||||
for {
|
||||
ev, ok := gtx.Event(
|
||||
key.FocusFilter{Target: &m.State.tag},
|
||||
key.Filter{Focus: &m.State.tag, Name: key.NameUpArrow},
|
||||
key.Filter{Focus: &m.State.tag, Name: key.NameDownArrow},
|
||||
key.Filter{Focus: &m.State.tag, Name: key.NameEnter},
|
||||
key.Filter{Focus: &m.State.tag, Name: key.NameReturn},
|
||||
)
|
||||
if !ok {
|
||||
break
|
||||
}
|
||||
switch e := ev.(type) {
|
||||
case key.Event:
|
||||
if e.State != key.Press {
|
||||
continue
|
||||
}
|
||||
switch e.Name {
|
||||
case key.NameUpArrow:
|
||||
if !m.State.hoverOk {
|
||||
m.State.hover = 0 // if nothing is selected, select the first item before starting to move backwards
|
||||
}
|
||||
for i := 1; i < len(items); i++ {
|
||||
idx := (m.State.hover - i + len(items)) % len(items)
|
||||
child := &children[items[idx].childIndex]
|
||||
if child.enabled() {
|
||||
m.State.hover = idx
|
||||
m.State.hoverOk = true
|
||||
break
|
||||
}
|
||||
}
|
||||
case key.NameDownArrow:
|
||||
if !m.State.hoverOk {
|
||||
m.State.hover = len(items) - 1 // if nothing is selected, select the last item before starting to move backwards
|
||||
}
|
||||
for i := 1; i < len(items); i++ {
|
||||
idx := (m.State.hover + i) % len(items)
|
||||
child := &children[items[idx].childIndex]
|
||||
if child.enabled() {
|
||||
m.State.hover = idx
|
||||
m.State.hoverOk = true
|
||||
break
|
||||
}
|
||||
}
|
||||
case key.NameEnter, key.NameReturn:
|
||||
if m.State.hoverOk && m.State.hover >= 0 && m.State.hover < len(items) {
|
||||
m.activateItem(items[m.State.hover], children)
|
||||
}
|
||||
}
|
||||
case key.FocusEvent:
|
||||
if !m.State.hoverOk {
|
||||
m.State.hover = 0
|
||||
}
|
||||
m.State.hoverOk = e.Focus
|
||||
}
|
||||
}
|
||||
for i := range items {
|
||||
// make sure we have a tag for every item
|
||||
for len(m.State.tags) <= i {
|
||||
m.State.tags = append(m.State.tags, false)
|
||||
}
|
||||
// handle pointer events for this item
|
||||
for {
|
||||
ev, ok := gtx.Event(pointer.Filter{
|
||||
Target: &m.State.tags[i],
|
||||
Kinds: pointer.Press | pointer.Enter | pointer.Leave,
|
||||
})
|
||||
ev, ok := gtx.Event(pointer.Filter{Target: &m.State.tags[i], Kinds: pointer.Press | pointer.Enter | pointer.Leave})
|
||||
if !ok {
|
||||
break
|
||||
}
|
||||
@ -176,27 +311,112 @@ func (m *MenuWidget) update(gtx C, items ...ActionMenuItem) {
|
||||
}
|
||||
switch e.Kind {
|
||||
case pointer.Press:
|
||||
item.Action.Do()
|
||||
m.State.visible = false
|
||||
m.activateItem(items[i], children)
|
||||
case pointer.Enter:
|
||||
m.State.hover = i + 1
|
||||
m.State.hover = i
|
||||
m.State.hoverOk = true
|
||||
if !gtx.Focused(&m.State.tag) {
|
||||
gtx.Execute(key.FocusCmd{Tag: &m.State.tag})
|
||||
}
|
||||
case pointer.Leave:
|
||||
if m.State.hover == i+1 {
|
||||
m.State.hover = 0
|
||||
if m.State.hover == i {
|
||||
m.State.hoverOk = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func (mb MenuButton) Layout(gtx C, items ...ActionMenuItem) D {
|
||||
func (m *MenuWidget) activateItem(item menuItem, children []MenuChild) {
|
||||
if item.childIndex < 0 || item.childIndex >= len(children) {
|
||||
return
|
||||
}
|
||||
child := &children[item.childIndex]
|
||||
if !child.enabled() {
|
||||
return
|
||||
}
|
||||
switch child.kind {
|
||||
case menuChildAction:
|
||||
child.action.Do()
|
||||
case menuChildBool:
|
||||
child.bool.Toggle()
|
||||
case menuChildInt:
|
||||
child.int.SetValue(item.value)
|
||||
}
|
||||
m.State.visible = false
|
||||
}
|
||||
|
||||
func (c *MenuChild) enabled() bool {
|
||||
switch c.kind {
|
||||
case menuChildAction:
|
||||
return c.action.Enabled()
|
||||
case menuChildBool:
|
||||
return c.bool.Enabled()
|
||||
case menuChildDivider:
|
||||
return false // the dividers are passive separators
|
||||
default:
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
// MenuButton displays a button with text that opens a menu when clicked.
|
||||
type MenuButton struct {
|
||||
Title string
|
||||
BtnStyle *ButtonStyle
|
||||
MenuStyle *MenuStyle
|
||||
PopupStyle *PopupStyle
|
||||
Clickable *Clickable
|
||||
MenuState *MenuState
|
||||
Width unit.Dp
|
||||
}
|
||||
|
||||
func MenuBtn(ms *MenuState, cl *Clickable, title string) MenuButton {
|
||||
return MenuButton{MenuState: ms, Clickable: cl, Title: title}
|
||||
}
|
||||
|
||||
func (mb MenuButton) WithBtnStyle(style *ButtonStyle) MenuButton { mb.BtnStyle = style; return mb }
|
||||
func (mb MenuButton) WithMenuStyle(style *MenuStyle) MenuButton { mb.MenuStyle = style; return mb }
|
||||
func (mb MenuButton) WithPopupStyle(style *PopupStyle) MenuButton { mb.PopupStyle = style; return mb }
|
||||
|
||||
func (mb MenuButton) Layout(gtx C, children ...MenuChild) D {
|
||||
for mb.Clickable.Clicked(gtx) {
|
||||
mb.MenuState.visible = true
|
||||
gtx.Execute(key.FocusCmd{Tag: &mb.MenuState.tag})
|
||||
}
|
||||
btn := Btn(mb.Theme, mb.Style, mb.Clickable, mb.Title, "")
|
||||
t := TrackerFromContext(gtx)
|
||||
if mb.BtnStyle == nil {
|
||||
mb.BtnStyle = &t.Theme.Button.Menu
|
||||
}
|
||||
if mb.PopupStyle == nil {
|
||||
mb.PopupStyle = &t.Theme.Popup.Menu
|
||||
}
|
||||
btn := Btn(t.Theme, mb.BtnStyle, mb.Clickable, mb.Title, "")
|
||||
dims := btn.Layout(gtx)
|
||||
defer op.Offset(image.Pt(0, dims.Size.Y)).Push(gtx.Ops).Pop()
|
||||
m := Menu(mb.Theme, mb.MenuState)
|
||||
m.Layout(gtx, items...)
|
||||
if mb.MenuState.visible {
|
||||
defer op.Offset(image.Pt(0, dims.Size.Y)).Push(gtx.Ops).Pop()
|
||||
m := Menu(mb.MenuState).WithPopupStyle(mb.PopupStyle)
|
||||
m.Layout(gtx, children...)
|
||||
}
|
||||
return dims
|
||||
}
|
||||
|
||||
type Divider struct {
|
||||
Thickness unit.Dp
|
||||
Axis layout.Axis
|
||||
Margin unit.Dp
|
||||
}
|
||||
|
||||
func (d *Divider) Layout(gtx C) D {
|
||||
thicknessPx := max(gtx.Dp(d.Thickness), 1)
|
||||
if d.Axis == layout.Horizontal {
|
||||
return layout.Inset{Top: d.Margin, Bottom: d.Margin}.Layout(gtx, func(gtx C) D {
|
||||
paint.FillShape(gtx.Ops, color.NRGBA{255, 255, 255, 12}, clip.Rect(image.Rect(0, 0, gtx.Constraints.Max.X, thicknessPx)).Op())
|
||||
return D{Size: image.Pt(gtx.Constraints.Max.X, thicknessPx)}
|
||||
})
|
||||
} else {
|
||||
return layout.Inset{Left: d.Margin, Right: d.Margin}.Layout(gtx, func(gtx C) D {
|
||||
paint.FillShape(gtx.Ops, color.NRGBA{255, 255, 255, 12}, clip.Rect(image.Rect(0, 0, thicknessPx, gtx.Constraints.Max.X)).Op())
|
||||
return D{Size: image.Pt(thicknessPx, gtx.Constraints.Max.X)}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user