Change icon on dropdown

button.go

@@ -89,23 +89,23 @@ func (this *Button) applyLayout () {
 }
 
 func (this *Button) handleKeyDown (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
+	if !isClickingKey(key) { return false }
-	return true
-}
-
-func (this *Button) handleKeyUp (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
 	this.on.click.Broadcast()
 	return true
 }
 
+func (this *Button) handleKeyUp (key input.Key, numberPad bool) bool {
+	if !isClickingKey(key) { return false }
+	return true
+}
+
 func (this *Button) handleButtonDown (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	return true
 }
 
 func (this *Button) handleButtonUp (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	if this.Window().MousePosition().In(this.Bounds()) {
 		this.on.click.Broadcast()
 	}

checkbox.go

@@ -54,23 +54,23 @@ func (this *Checkbox) OnValueChange (callback func ()) event.Cookie {
 }
 
 func (this *Checkbox) handleKeyDown (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
+	if !isClickingKey(key) { return false }
 	this.Toggle()
 	return true
 }
 
 func (this *Checkbox) handleKeyUp (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false}
+	if !isClickingKey(key) { return false}
 	return true
 }
 
 func (this *Checkbox) handleButtonDown (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	return true
 }
 
 func (this *Checkbox) handleButtonUp (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	if this.Window().MousePosition().In(this.Bounds()) {
 		this.Toggle()
 	}

colorpicker.go

@@ -65,6 +65,7 @@ func (this *HSVAColorPicker) SetValue (value color.Color) {
 	this.value = internal.HSVAModel.Convert(value).(internal.HSVA)
 	this.hueSlider.SetValue(this.value.H)
 	this.alphaSlider.SetValue(float64(this.value.A) / 0xFFFF)
+	this.pickerMap.Invalidate()
 }
 
 // OnValueChange specifies a function to be called when the user changes the

dropdown.go

@@ -30,9 +30,7 @@ func NewDropdown (items ...string) *Dropdown {
 	dropdown.SetRole(tomo.R("objects", "Dropdown"))
 	dropdown.SetAttr(tomo.ALayout(layouts.Row { true, false }))
 	dropdown.Add(dropdown.label)
-	// TODO: replace IconValueDecrement with a drop-down expand icon once
+	dropdown.Add(NewIcon(tomo.IconListChoose, tomo.IconSizeSmall))
-	// we get that
-	dropdown.Add(NewIcon(tomo.IconValueDecrement, tomo.IconSizeSmall))
 	
 	dropdown.SetItems(items...)
 	if len(items) > 0 {
@@ -66,6 +64,17 @@ func (this *Dropdown) SetItems (items ...string) {
 	this.items = items
 }
 
+// Choose creates a menu that allows the user to pick a value.
+func (this *Dropdown) Choose () {
+	if this.menu != nil {
+		this.menu.Close()
+	}
+	menu, err := NewAnchoredMenu(this, this.itemList()...)
+	if err != nil { return }
+	this.menu = menu
+	menu.SetVisible(true)
+}
+
 func (this *Dropdown) itemList () []tomo.Object {
 	items := make([]tomo.Object, len(this.items))
 	for index, value := range this.items {
@@ -80,36 +89,26 @@ func (this *Dropdown) itemList () []tomo.Object {
 	return items
 }
 
-func (this *Dropdown) showMenu () {
-	if this.menu != nil {
-		this.menu.Close()
-	}
-	menu, err := NewAnchoredMenu(this, this.itemList()...)
-	if err != nil { return }
-	this.menu = menu
-	menu.SetVisible(true)
-}
-
 func (this *Dropdown) handleKeyDown (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
+	if !isClickingKey(key) { return false }
+	this.Choose()
 	return true
 }
 
 func (this *Dropdown) handleKeyUp (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
+	if !isClickingKey(key) { return false }
-	this.showMenu()
 	return true
 }
 
 func (this *Dropdown) handleButtonDown (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	return true
 }
 
 func (this *Dropdown) handleButtonUp (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	if this.Window().MousePosition().In(this.Bounds()) {
-		this.showMenu()
+		this.Choose()
 	}
 	return true
 }

go.mod

@@ -2,4 +2,4 @@ module git.tebibyte.media/tomo/objects
 
 go 1.20
 
-require git.tebibyte.media/tomo/tomo v0.45.0
+require git.tebibyte.media/tomo/tomo v0.46.1

go.sum

@@ -1,2 +1,2 @@
-git.tebibyte.media/tomo/tomo v0.45.0 h1:fQH0WIPidW275hOq9dE6R7p064xG1RGx2QU68Avlr84=
+git.tebibyte.media/tomo/tomo v0.46.1 h1:/8fT6I9l4TK529zokrThbNDHGRvUsNgif1Zs++0PBSQ=
-git.tebibyte.media/tomo/tomo v0.45.0/go.mod h1:WrtilgKB1y8O2Yu7X4mYcRiqOlPR8NuUnoA/ynkQWrs=
+git.tebibyte.media/tomo/tomo v0.46.1/go.mod h1:WrtilgKB1y8O2Yu7X4mYcRiqOlPR8NuUnoA/ynkQWrs=

input.go

@@ -0,0 +1,19 @@
+package objects
+
+import "git.tebibyte.media/tomo/tomo/input"
+
+func isClickingKey (key input.Key) bool {
+	return key == input.KeyEnter || key == input.Key(' ')
+}
+
+func isConfirmationKey (key input.Key) bool {
+	return key == input.KeyEnter
+}
+
+func isClickingButton (button input.Button) bool {
+	return button == input.ButtonLeft
+}
+
+func isMenuButton (button input.Button) bool {
+	return button == input.ButtonLeft
+}

internal/color.go

@@ -1,5 +1,6 @@
 package internal
 
+import "fmt"
 import "image/color"
 
 // HSV represents a color with hue, saturation, and value components. Each
@@ -173,3 +174,58 @@ func rgbToHSV (r, g, b uint32) HSV {
 	
 	return hsv
 }
+
+// FormatNRGBA formats an NRGBA value into a hex string.
+func FormatNRGBA (nrgba color.NRGBA) string {
+	return fmt.Sprintf("%02X%02X%02X%02X", nrgba.R, nrgba.G, nrgba.B, nrgba.A)
+}
+
+// ParseNRGBA parses an NRGBA value from a hex string. It can be of the format:
+//   - RGB
+//   - RGBA
+//   - RRGGBB
+//   - RRGGBBAA
+// If none of these are specified, this function will return an opaque black
+// color. Hex digits may either be upper case or lower case.
+func ParseNRGBA (str string) color.NRGBA {
+	runes := []rune(str)
+	c := color.NRGBA { A: 255 }
+	switch len(runes) {
+	case 3:
+		c.R = fillOctet(hexDigit(runes[0]))
+		c.G = fillOctet(hexDigit(runes[1]))
+		c.B = fillOctet(hexDigit(runes[2]))
+	case 4:
+		c.R = fillOctet(hexDigit(runes[0]))
+		c.G = fillOctet(hexDigit(runes[1]))
+		c.B = fillOctet(hexDigit(runes[2]))
+		c.A = fillOctet(hexDigit(runes[3]))
+	case 6:
+		c.R = hexOctet(runes[0], runes[1])
+		c.G = hexOctet(runes[2], runes[3])
+		c.B = hexOctet(runes[4], runes[5])
+	case 8:
+		c.R = hexOctet(runes[0], runes[1])
+		c.G = hexOctet(runes[2], runes[3])
+		c.B = hexOctet(runes[4], runes[5])
+		c.A = hexOctet(runes[6], runes[7])
+	}
+	return c
+}
+
+func hexDigit (r rune) uint8 {
+	switch {
+	case r >= '0' && r <= '9': return uint8(r - '0')
+	case r >= 'A' && r <= 'F': return uint8(r - 'A') + 10
+	case r >= 'a' && r <= 'f': return uint8(r - 'a') + 10
+	default: return 0
+	}
+}
+
+func fillOctet (low uint8) uint8 {
+	return low << 4 | low
+}
+
+func hexOctet (high, low rune) uint8 {
+	return hexDigit(high) << 4 | hexDigit(low)
+}

labelcheckbox.go

@@ -55,12 +55,12 @@ func (this *LabelCheckbox) OnValueChange (callback func ()) event.Cookie {
 }
 
 func (this *LabelCheckbox) handleButtonDown (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	return true
 }
 
 func (this *LabelCheckbox) handleButtonUp (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	if this.Window().MousePosition().In(this.Bounds()) {
 		this.checkbox.SetFocused(true)
 		this.checkbox.Toggle()

swatch.go

@@ -8,6 +8,7 @@ import "git.tebibyte.media/tomo/tomo/input"
 import "git.tebibyte.media/tomo/tomo/event"
 import "git.tebibyte.media/tomo/tomo/canvas"
 import "git.tebibyte.media/tomo/objects/layouts"
+import "git.tebibyte.media/tomo/objects/internal"
 
 // Swatch displays a color, allowing the user to edit it by clicking on it.
 type Swatch struct {
@@ -91,26 +92,38 @@ func (this *Swatch) Choose () {
 	
 	committed := false
 	
-	colorPicker := NewHSVAColorPicker(this.Value())
+	colorPicker  := NewHSVAColorPicker(this.Value())
-	colorPicker.OnValueChange(func () {
-		this.userSetValue(colorPicker.Value())
-	})
-	
-	hexInput := NewTextInput("TODO")
-	
 	colorMemory  := this.value
+	hexInput     := NewTextInput("")
+	hexInput.SetFocused(true)
 	cancelButton := NewButton("Cancel")
 	cancelButton.SetIcon(tomo.IconDialogCancel)
+	okButton     := NewButton("OK")
+	okButton.SetIcon(tomo.IconDialogOkay)
+	
+	updateHexInput := func () {
+		nrgba := color.NRGBAModel.Convert(colorPicker.Value()).(color.NRGBA)
+		hexInput.SetValue(internal.FormatNRGBA(nrgba))
+	}
+	updateHexInput()
+	commit := func () {
+		committed = true
+		window.Close()
+	}
+	colorPicker.OnValueChange(func () {
+		this.userSetValue(colorPicker.Value())
+		updateHexInput()
+	})
+	hexInput.OnConfirm(commit)
+	hexInput.OnValueChange(func () {
+		nrgba := internal.ParseNRGBA(hexInput.Value())
+		this.userSetValue(nrgba)
+		colorPicker.SetValue(nrgba)
+	})
 	cancelButton.OnClick(func () {
 		window.Close()
 	})
-	okButton := NewButton("OK")
+	okButton.OnClick(commit)
-	okButton.SetFocused(true)
-	okButton.SetIcon(tomo.IconDialogOkay)
-	okButton.OnClick(func () {
-		committed = true
-		window.Close()
-	})
 	
 	controlRow := NewInnerContainer (
 		layouts.ContractHorizontal,
@@ -158,23 +171,23 @@ func (this *Swatch) userSetValue (value color.Color) {
 }
 
 func (this *Swatch) handleKeyDown (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
+	if !isClickingKey(key) { return false }
-	return true
-}
-
-func (this *Swatch) handleKeyUp (key input.Key, numberPad bool) bool {
-	if key != input.KeyEnter && key != input.Key(' ') { return false }
 	this.Choose()
 	return true
 }
 
+func (this *Swatch) handleKeyUp (key input.Key, numberPad bool) bool {
+	if !isClickingKey(key) { return false }
+	return true
+}
+
 func (this *Swatch) handleButtonDown (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	return true
 }
 
 func (this *Swatch) handleButtonUp (button input.Button) bool {
-	if button != input.ButtonLeft { return false }
+	if !isClickingButton(button) { return false }
 	if this.Window().MousePosition().In(this.Bounds()) {
 		this.Choose()
 	}

textinput.go

@@ -87,7 +87,7 @@ func (this *TextInput) handleKeyDown (key input.Key, numpad bool) bool {
 	} ()
 
 	switch {
-	case key == input.KeyEnter:
+	case isConfirmationKey(key):
 		this.on.confirm.Broadcast()
 		return true
 	case key == input.KeyBackspace:
@@ -98,11 +98,7 @@ func (this *TextInput) handleKeyDown (key input.Key, numpad bool) bool {
 		this.text, dot = text.Delete(this.text, dot, word)
 		changed = true
 		return true
-	case key == input.Key('a') && modifiers.Control:
+	case key.Printable() && !modifiers.Control:
-		dot.Start = 0
-		dot.End   = len(this.text)
-		return true
-	case key.Printable():
 		this.text, dot = text.Type(this.text, dot, rune(key))
 		changed = true
 		return true
@@ -114,15 +110,13 @@ func (this *TextInput) handleKeyDown (key input.Key, numpad bool) bool {
 func (this *TextInput) handleKeyUp (key input.Key, numpad bool) bool {
 	modifiers := this.Window().Modifiers()
 	switch {
-	case key == input.KeyEnter:
+	case isConfirmationKey(key):
 		return true
 	case key == input.KeyBackspace:
 		return true
 	case key == input.KeyDelete:
 		return true
-	case key == input.Key('a') && modifiers.Control:
+	case key.Printable() && !modifiers.Control:
-		return true
-	case key.Printable():
 		return true
 	default:
 		return false