Swatch accepts hex input

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

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)
+}

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 {
@@ -92,25 +93,37 @@ func (this *Swatch) Choose () {
 	committed := false
 	
 	colorPicker  := NewHSVAColorPicker(this.Value())
-	colorPicker.OnValueChange(func () {
-		this.userSetValue(colorPicker.Value())
-	})
-	
-	hexInput := NewTextInput("TODO")
-	
 	colorMemory  := this.value
+	hexInput     := NewTextInput("TODO")
+	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.SetFocused(true)
-	okButton.SetIcon(tomo.IconDialogOkay)
-	okButton.OnClick(func () {
-		committed = true
-		window.Close()
-	})
+	okButton.OnClick(commit)
 	
 	controlRow := NewInnerContainer (
 		layouts.ContractHorizontal,