Рефакторинг ф-ций для работы с цветами

src/colors.ts

@@ -1,31 +1,32 @@
-import { byteToRatio, round } from "./math";
+import { BYTE_MAX, byteToRatio, round, clamp } from "./math";
 
-type Color = { r: number; g: number; b: number };
+type RGB = { r: number; g: number; b: number };
 type HSL = { h: number; s: number; l: number };
-type RgbProcessingFunc<T> = (r: number, g: number, b: number) => T;
+type ColorProcessingFunc<T> = (r: number, g: number, b: number) => T;
 
-const hexToRgb = (hex: string) => {
+const DEGREES_IN_CIRCLE = 360;
+const PERCENT_FACTOR = 100;
+
+const hexToRgb = (hex: string): RGB => {
   const h = hex.replace("#", "");
-  return [
+  return {
-    parseInt(h.slice(0, 2), 16),
+    r: parseInt(h.slice(0, 2), 16),
-    parseInt(h.slice(2, 4), 16),
+    g: parseInt(h.slice(2, 4), 16),
-    parseInt(h.slice(4, 6), 16),
+    b: parseInt(h.slice(4, 6), 16),
-  ];
+  };
 };
 
-const rgbToHex: RgbProcessingFunc<string> = (r, g, b) =>
+const rgbToHex: ColorProcessingFunc<string> = (r, g, b) =>
   "#" + [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
 
-const rgbToRatios: RgbProcessingFunc<Color> = (rIN, gIN, bIN) => ({
+const rgbToRatios: ColorProcessingFunc<RGB> = (rIN, gIN, bIN) => ({
   r: byteToRatio(rIN),
   g: byteToRatio(gIN),
   b: byteToRatio(bIN),
 });
 
-const rgbToHsl: RgbProcessingFunc<HSL> = (rIN, gIN, bIN) => {
+const rgbToHsl: ColorProcessingFunc<HSL> = (rIN, gIN, bIN) => {
   const HUE_SEGMENTS = 6;
-  const DEGREES_IN_CIRCLE = 360;
-  const PERCENT_FACTOR = 100;
 
   const { r, g, b } = rgbToRatios(rIN, gIN, bIN);
   const max = Math.max(r, g, b);
@@ -60,62 +61,55 @@ const rgbToHsl: RgbProcessingFunc<HSL> = (rIN, gIN, bIN) => {
   };
 };
 
-export const hslToRgb = (h: number, s: number, l: number) => {
+/**
-  s /= 100;
+ * Конвертация HSL -> RGB
-  l /= 100;
+ * Возвращает объект {r,g,b} с целыми 0..255.
-  const c = (1 - Math.abs(2 * l - 1)) * s;
+ */
-  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+export const hslToRgb: ColorProcessingFunc<RGB> = (h, s, l) => {
-  const m = l - c / 2;
+  // Нормализация
-  let r = 0,
+  const hue = ((h % DEGREES_IN_CIRCLE) + DEGREES_IN_CIRCLE) % DEGREES_IN_CIRCLE;
-    g = 0,
+  const sat = clamp(s / PERCENT_FACTOR);
-    b = 0;
+  const light = clamp(l / PERCENT_FACTOR);
-  if (h < 60) {
+
-    r = c;
+  const c = (1 - Math.abs(2 * light - 1)) * sat;
-    g = x;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
-    b = 0;
+  const m = light - c / 2;
-  } else if (h < 120) {
+
-    r = x;
+  const sector = Math.floor(hue / 60) | 0;
-    g = c;
+
-    b = 0;
+  // Пары (v1,v2) соответствуют комбинациям c,x,0 в порядке r,g,b
-  } else if (h < 180) {
+  // Используем массив, чтобы избежать ветвлений
-    r = 0;
+  const table: Array<[number, number, number]> = [
-    g = c;
+    [c, x, 0], // 0..60
-    b = x;
+    [x, c, 0], // 60..120
-  } else if (h < 240) {
+    [0, c, x], // 120..180
-    r = 0;
+    [0, x, c], // 180..240
-    g = x;
+    [x, 0, c], // 240..300
-    b = c;
+    [c, 0, x], // 300..360
-  } else if (h < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  return [
-    Math.round((r + m) * 255),
-    Math.round((g + m) * 255),
-    Math.round((b + m) * 255),
   ];
+
+  const [rp, gp, bp] = table[sector];
+
+  const r = round(clamp(rp + m, 0, 1) * BYTE_MAX);
+  const g = round(clamp(gp + m, 0, 1) * BYTE_MAX);
+  const b = round(clamp(bp + m, 0, 1) * BYTE_MAX);
+
+  return { r, g, b };
 };
 
 export const hslToHex = (h: number, s: number, l: number) => {
-  const [r, g, b] = hslToRgb(h, s, l);
+  const { r, g, b } = hslToRgb(h, s, l);
   return rgbToHex(r, g, b);
 };
 
 const hexToHsl = (hex: string) => {
-  const [r, g, b] = hexToRgb(hex);
+  const { r, g, b } = hexToRgb(hex);
   return rgbToHsl(r, g, b);
 };
 
-export const clamp = (v: number, a = 0, b = 100) => Math.min(Math.max(v, a), b);
-
 // luminance & contrast
 export const luminance = (hex: string) => {
-  const [r, g, b] = hexToRgb(hex).map((v) => {
+  const [r, g, b] = Array.from(Object.values(hexToRgb(hex))).map((v) => {
     v /= 255;
     return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
   });

src/math.ts

@@ -16,4 +16,6 @@ const round = (v: number, digits = ROUND_PRECISION) => {
   return Math.round(v * factor) / factor;
 };
 
-export { byteToRatio, round };
+const clamp = (v: number, a = 0, b = 1) => Math.min(b, Math.max(a, v));
+
+export { byteToRatio, round, clamp, BYTE_MAX };