unify frontend and backend

Author: HesterG

modules/util/color.go

@@ -21,20 +21,23 @@ func getLuminanceRGB(channel float64) float64 {
 }
 
 // Get color as RGB values in 0..255 range from the hex color string (with or without #)
-// TODO: support return of rgba
 func HexToRBGColor(colorString string) (float64, float64, float64) {
 	hexString := colorString
 	if strings.HasPrefix(colorString, "#") {
-		hexString = hexString[1:]
+		hexString = colorString[1:]
 	}
-	// only support transfer of rgb and rrggbb
-	// if not in this format, use default values 0, 0, 0
-	if len(hexString) != 3 && len(hexString) != 6 {
+	// only support transfer of rgb, rgba, rrggbb and rrggbbaa
+	// if not in these formats, use default values 0, 0, 0
+	fmt.Println(hexString)
+	if len(hexString) != 3 && len(hexString) != 4 && len(hexString) != 6 && len(hexString) != 8 {
 		return 0, 0, 0
 	}
-	if len(hexString) == 3 {
+	if len(hexString) == 3 || len(hexString) == 4 {
 		hexString = fmt.Sprintf("%c%c%c%c%c%c", hexString[0], hexString[0], hexString[1], hexString[1], hexString[2], hexString[2])
 	}
+	if len(hexString) == 8 {
+		hexString = hexString[0:6]
+	}
 	color, err := strconv.ParseUint(hexString, 16, 64)
 	if err != nil {
 		return 0, 0, 0

modules/util/color_test.go

@@ -18,13 +18,12 @@ func Test_HexToRBGColor(t *testing.T) {
 		{"2b8685", 43, 134, 133},
 		{"1e1", 17, 238, 17},
 		{"#1e1", 17, 238, 17},
-		{"3bb6", 0, 0, 0},
-		{"3bb64", 0, 0, 0},
-		{"#7e716c", 126, 113, 108},
-		{"#1e11", 0, 0, 0},
-		{"#3bb64", 0, 0, 0},
-		{"#2e2", 34, 238, 34},
-		{"2e2", 34, 238, 34},
+		{"1e16", 17, 238, 17},
+		{"3bb6b3", 59, 182, 179},
+		{"#3bb6b399", 59, 182, 179},
+		{"#0", 0, 0, 0},
+		{"#00000", 0, 0, 0},
+		{"#1234567", 0, 0, 0},
 	}
 	for n, c := range cases {
 		r, g, b := HexToRBGColor(c.colorString)

web_src/js/utils/color.js

@@ -13,34 +13,25 @@ function getLuminance(r, g, b) {
   return 0.2126 * R + 0.7152 * G + 0.0722 * B;
 }
 
-const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16);
-
-function getAlphafloat(alpha) {
-  if (alpha !== undefined) {
-    return alpha / 255;
-  }
-  return 1;
-}
-
-const re = /.{1,2}/g;
 // Get color as RGB values in 0..255 range from the hex color string (with or without #)
-export function hexToRGBColor(backgroundColorStr, ignoreAlpha = true) {
+export function hexToRGBColor(backgroundColorStr) {
   let backgroundColor = backgroundColorStr;
   if (backgroundColorStr[0] === '#') {
     backgroundColor = backgroundColorStr.substring(1);
   }
-  // only support transfer of rgb, rgba, rrggbb, and rrggbbaa
-  // if not in this format, use default values 0, 0, 0 or 0, 0, 0, 1
+  // only support transfer of rgb, rgba, rrggbb and rrggbbaa
+  // if not in these formats, use default values 0, 0, 0
   if (![3, 4, 6, 8].includes(backgroundColor.length)) {
-    return ignoreAlpha ? [0, 0, 0] : [0, 0, 0, 1];
+    return [0, 0, 0];
+  }
+  if ([3, 4].includes(backgroundColor.length)) {
+    const [r, g, b] = backgroundColor;
+    backgroundColor = `${r}${r}${g}${g}${b}${b}`;
   }
-  // chunkSize is number of digits that should be grouped together to form a RGBA channel
-  const chunkSize = Math.floor(backgroundColor.length / 3);
-  // hexArr is array of [r, g, b] or [r, g, b, a], a could be undefined
-  // and will be processed in getAlphafloat if ignoreAlpha is false
-  const hexArr = chunkSize === 1 ? backgroundColor.split('') : backgroundColor.match(re);
-  const [r, g, b, a] = hexArr.map(convertHexUnitTo256);
-  return ignoreAlpha ? [r, g, b] : [r, g, b, getAlphafloat(a)];
+  const r = parseInt(backgroundColor.substring(0, 2), 16);
+  const g = parseInt(backgroundColor.substring(2, 4), 16);
+  const b = parseInt(backgroundColor.substring(4, 6), 16);
+  return [r, g, b];
 }
 
 // Reference from: https://firsching.ch/github_labels.html

web_src/js/utils/color.test.js

@@ -5,18 +5,12 @@ test('hexToRGBColor', () => {
   expect(hexToRGBColor('2b8685')).toEqual([43, 134, 133]);
   expect(hexToRGBColor('1e1')).toEqual([17, 238, 17]);
   expect(hexToRGBColor('#1e1')).toEqual([17, 238, 17]);
-  expect(hexToRGBColor('#1e1', false)).toEqual([17, 238, 17, 1]);
   expect(hexToRGBColor('1e16')).toEqual([17, 238, 17]);
-  expect(hexToRGBColor('1e16', false)).toEqual([17, 238, 17, 0.4]);
-  expect(hexToRGBColor('#1e16', false)).toEqual([17, 238, 17, 0.4]);
   expect(hexToRGBColor('3bb6b3')).toEqual([59, 182, 179]);
-  expect(hexToRGBColor('3bb6b399', false)).toEqual([59, 182, 179, 0.6]);
   expect(hexToRGBColor('#3bb6b399')).toEqual([59, 182, 179]);
-  expect(hexToRGBColor('#807070', false)).toEqual([128, 112, 112, 1]);
   expect(hexToRGBColor('#0')).toEqual([0, 0, 0]);
-  expect(hexToRGBColor('#00', false)).toEqual([0, 0, 0, 1]);
   expect(hexToRGBColor('#00000')).toEqual([0, 0, 0]);
-  expect(hexToRGBColor('#0000000', false)).toEqual([0, 0, 0, 1]);
+  expect(hexToRGBColor('#1234567')).toEqual([0, 0, 0]);
 });
 
 test('useLightTextOnBackground', () => {