@formicoidea/labre-core 0.23.0 → 0.23.2

package/src/_pkgs/affine-components/color-picker/utils.ts

@@ -1,368 +1,368 @@
-// https://www.w3.org/TR/css-color-4/
-
-import type { Color, ColorScheme } from '../../affine-model/index.js';
-import clamp from 'lodash-es/clamp';
-
-import { COLORS, FIRST_COLOR } from './consts.js';
-import type {
-  Hsv,
-  Hsva,
-  ModeType,
-  PickColorType,
-  Point,
-  Rgb,
-  Rgba,
-} from './types.js';
-
-export const defaultPoint = (x = 0, y = 0): Point => ({ x, y });
-
-export const defaultHsva = (): Hsva => ({ ...rgbToHsv(FIRST_COLOR), a: 1 });
-
-export function linearGradientAt(t: number): Rgb {
-  if (t < 0) return COLORS[0][0];
-  if (t > 1) return COLORS[COLORS.length - 1][0];
-
-  let low = 0;
-  let high = COLORS.length;
-  while (low < high) {
-    const mid = Math.floor((low + high) / 2);
-    const color = COLORS[mid];
-    if (color[1] < t) {
-      low = mid + 1;
-    } else {
-      high = mid;
-    }
-  }
-
-  if (low === 0) {
-    low = 1;
-  }
-
-  const [rgb0, s0] = COLORS[low - 1];
-  const [rgb1, s1] = COLORS[low];
-  t = (t - s0) / (s1 - s0);
-
-  const [r, g, b] = [
-    lerp(rgb0.r, rgb1.r, t),
-    lerp(rgb0.g, rgb1.g, t),
-    lerp(rgb0.b, rgb1.b, t),
-  ];
-
-  return { r, g, b };
-}
-
-const lerp = (a: number, b: number, t: number) => a + t * (b - a);
-
-export const bound01 = (n: number, max: number) => {
-  n = clamp(n, 0, max);
-
-  // Handle floating point rounding errors
-  if (Math.abs(n - max) < 0.000001) {
-    return 1;
-  }
-
-  // Convert into [0, 1] range if it isn't already
-  return (n % max) / max;
-};
-
-// Converts an RGB color value to HSV
-export const rgbToHsv = ({ r, g, b }: Rgb): Hsv => {
-  const v = Math.max(r, g, b); // value
-  const d = v - Math.min(r, g, b);
-
-  if (d === 0) {
-    return { h: 0, s: 0, v };
-  }
-
-  const s = d / v;
-  let h = 0;
-
-  if (v === r) {
-    h = (g - b) / d + (g < b ? 6 : 0);
-  } else if (v === g) {
-    h = (b - r) / d + 2;
-  } else {
-    h = (r - g) / d + 4;
-  }
-
-  h /= 6;
-
-  return { h, s, v };
-};
-
-// Converts an HSV color value to RGB
-export const hsvToRgb = ({ h, s, v }: Hsv): Rgb => {
-  if (h < 0) h = (h + 1) % 1; // wrap
-  h *= 6;
-  s = clamp(s, 0, 1);
-
-  const i = Math.floor(h),
-    f = h - i,
-    p = v * (1 - s),
-    q = v * (1 - f * s),
-    t = v * (1 - (1 - f) * s),
-    m = i % 6;
-
-  let rgb = [0, 0, 0];
-
-  if (m === 0) rgb = [v, t, p];
-  else if (m === 1) rgb = [q, v, p];
-  else if (m === 2) rgb = [p, v, t];
-  else if (m === 3) rgb = [p, q, v];
-  else if (m === 4) rgb = [t, p, v];
-  else if (m === 5) rgb = [v, p, q];
-
-  const [r, g, b] = rgb;
-
-  return { r, g, b };
-};
-
-// Converts a RGBA color value to HSVA
-export const rgbaToHsva = (rgba: Rgba): Hsva => ({
-  ...rgbToHsv(rgba),
-  a: rgba.a,
-});
-
-// Converts an HSVA color value to RGBA
-export const hsvaToRgba = (hsva: Hsva): Rgba => ({
-  ...hsvToRgb(hsva),
-  a: hsva.a,
-});
-
-// Converts a RGB color to hex
-export const rgbToHex = ({ r, g, b }: Rgb) =>
-  [r, g, b]
-    .map(n => n * 255)
-    .map(Math.round)
-    .map(s => s.toString(16).padStart(2, '0'))
-    .join('');
-
-// Converts an RGBA color to CSS's hex8 string
-export const rgbaToHex8 = ({ r, g, b, a }: Rgba) => {
-  const hex = [r, g, b, a]
-    .map(n => n * 255)
-    .map(Math.round)
-    .map(n => n.toString(16).padStart(2, '0'))
-    .join('');
-  return `#${hex}`;
-};
-
-// Converts an HSVA color to CSS's hex8 string
-export const hsvaToHex8 = (hsva: Hsva) => rgbaToHex8(hsvaToRgba(hsva));
-
-// Parses an hex string to RGBA.
-export const parseHexToRgba = (hex: string) => {
-  if (hex.startsWith('#')) {
-    hex = hex.substring(1);
-  }
-
-  const len = hex.length;
-  let arr: string[] = [];
-
-  if (len === 3 || len === 4) {
-    arr = hex.split('').map(s => s.repeat(2));
-  } else if (len === 6 || len === 8) {
-    arr = Array.from<number>({ length: len / 2 })
-      .fill(0)
-      .map((n, i) => n + i * 2)
-      .map(n => hex.substring(n, n + 2));
-  }
-
-  const [r, g, b, a = 1] = arr
-    .map(s => parseInt(s, 16))
-    .map(n => bound01(n, 255));
-
-  return { r, g, b, a };
-};
-
-// Parses an hex string to HSVA
-export const parseHexToHsva = (hex: string) => rgbaToHsva(parseHexToRgba(hex));
-
-// Compares two hsvs.
-export const eq = (lhs: Hsv, rhs: Hsv) =>
-  lhs.h === rhs.h && lhs.s === rhs.s && lhs.v === rhs.v;
-
-export const renderCanvas = (canvas: HTMLCanvasElement, rgb: Rgb) => {
-  const { width, height } = canvas;
-  const ctx = canvas.getContext('2d')!;
-
-  ctx.globalCompositeOperation = 'color';
-  ctx.clearRect(0, 0, width, height);
-
-  // Saturation: from top to bottom
-  const s = ctx.createLinearGradient(0, 0, 0, height);
-  s.addColorStop(0, '#0000'); // transparent
-  s.addColorStop(1, '#000'); // black
-
-  ctx.fillStyle = s;
-  ctx.fillRect(0, 0, width, height);
-
-  // Value: from left to right
-  const v = ctx.createLinearGradient(0, 0, width, 0);
-  v.addColorStop(0, '#fff'); // white
-  v.addColorStop(1, `#${rgbToHex(rgb)}`); // picked color
-
-  ctx.fillStyle = v;
-  ctx.fillRect(0, 0, width, height);
-};
-
-// Drops alpha value
-export const keepColor = (color: string) =>
-  color.length > 7 && !color.endsWith('transparent')
-    ? color.substring(0, 7)
-    : color;
-
-export const parseStringToRgba = (value: string) => {
-  value = value.trim();
-
-  // Compatible old format: `--affine-palette-transparent`
-  if (value.endsWith('transparent')) {
-    return { r: 1, g: 1, b: 1, a: 0 };
-  }
-
-  if (value.startsWith('#')) {
-    return parseHexToRgba(value);
-  }
-
-  if (value.startsWith('rgb')) {
-    const [r, g, b, a = 1] = value
-      .replace(/^rgba?/, '')
-      .replace(/\(|\)/, '')
-      .split(',')
-      .map(s => parseFloat(s.trim()))
-      // In CSS, the alpha is already in the range [0, 1]
-      .map((n, i) => bound01(n, i === 3 ? 1 : 255));
-
-    return { r, g, b, a };
-  }
-
-  return { r: 0, g: 0, b: 0, a: 1 };
-};
-
-// Preprocess Color
-export const preprocessColor = (style: CSSStyleDeclaration) => {
-  return ({ type, value }: { type: ModeType; value: string }) => {
-    if (value.startsWith('--')) {
-      // Compatible old format: `--affine-palette-transparent`
-      value = value.endsWith('transparent')
-        ? 'transparent'
-        : style.getPropertyValue(value);
-    }
-
-    const rgba = parseStringToRgba(value);
-
-    return { type, rgba };
-  };
-};
-
-/**
- * Packs to generate an object with a field name and picked color detail
- *
- * @param key - The model's field name
- * @param detail - The picked color detail
- * @returns An object
- *
- * @example
- *
- * ```json
- * { 'fillColor': '--affine-palette-shape-yellow' }
- * { 'fillColor': '#ffffff' }
- * { 'fillColor': { normal: '#ffffffff' }}
- * { 'fillColor': { light: '#fff000ff', 'dark': '#0000fff00' }}
- * ```
- */
-export const packColor = (key: string, color: Color) => {
-  return { [key]: typeof color === 'object' ? { ...color } : color };
-};
-
-/**
- * Packs to generate a color array with the color-scheme
- *
- * @param colorScheme - The current color theme
- * @param value - The color value
- * @param oldColor - The old color
- * @returns A color array
- */
-export const packColorsWith = (
-  colorScheme: ColorScheme,
-  value: string,
-  oldColor: Color
-) => {
-  const colors: { type: ModeType; value: string }[] = [
-    { type: 'normal', value },
-    { type: 'light', value },
-    { type: 'dark', value },
-  ];
-  let type: PickColorType = 'palette';
-
-  if (typeof oldColor === 'object') {
-    if ('normal' in oldColor) {
-      type = 'normal';
-      colors[0].value = oldColor.normal ?? value;
-    } else {
-      type = colorScheme;
-      colors[1].value = oldColor.light ?? value;
-      colors[2].value = oldColor.dark ?? value;
-    }
-  }
-
-  return { type, colors };
-};
-
-export const calcCustomButtonStyle = (
-  color: string,
-  isCustomColor: boolean,
-  ele: Element
-) => {
-  let b = 'transparent';
-  let c = 'transparent';
-
-  if (!isCustomColor) {
-    return { '--b': b, '--c': c };
-  }
-
-  if (color.startsWith('--')) {
-    if (!color.endsWith('transparent')) {
-      b = 'var(--affine-background-overlay-panel-color)';
-      c = keepColor(
-        rgbaToHex8(
-          preprocessColor(window.getComputedStyle(ele))({
-            type: 'normal',
-            value: color,
-          }).rgba
-        )
-      );
-    }
-  } else {
-    b = 'var(--affine-background-overlay-panel-color)';
-    c = keepColor(color);
-  }
-
-  return { '--b': b, '--c': c };
-};
-
-export const adjustColorAlpha = (color: Color, a: number): Color => {
-  let newColor;
-  if (typeof color === 'object') {
-    if ('normal' in color) {
-      const rgba = parseStringToRgba(color.normal);
-      rgba.a = a;
-      newColor = { normal: rgbaToHex8(rgba) };
-    } else {
-      const newDarkRgba = parseStringToRgba(color.dark);
-      newDarkRgba.a = a;
-      const newLightRgba = parseStringToRgba(color.light);
-      newLightRgba.a = a;
-      newColor = {
-        dark: rgbaToHex8(newDarkRgba),
-        light: rgbaToHex8(newLightRgba),
-      };
-    }
-  } else {
-    const rgba = parseStringToRgba(color);
-    rgba.a = a;
-    newColor = rgbaToHex8(rgba);
-  }
-
-  return newColor;
-};
+// https://www.w3.org/TR/css-color-4/
+
+import type { Color, ColorScheme } from '../../affine-model/index.js';
+import clamp from 'lodash-es/clamp';
+
+import { COLORS, FIRST_COLOR } from './consts.js';
+import type {
+  Hsv,
+  Hsva,
+  ModeType,
+  PickColorType,
+  Point,
+  Rgb,
+  Rgba,
+} from './types.js';
+
+export const defaultPoint = (x = 0, y = 0): Point => ({ x, y });
+
+export const defaultHsva = (): Hsva => ({ ...rgbToHsv(FIRST_COLOR), a: 1 });
+
+export function linearGradientAt(t: number): Rgb {
+  if (t < 0) return COLORS[0][0];
+  if (t > 1) return COLORS[COLORS.length - 1][0];
+
+  let low = 0;
+  let high = COLORS.length;
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    const color = COLORS[mid];
+    if (color[1] < t) {
+      low = mid + 1;
+    } else {
+      high = mid;
+    }
+  }
+
+  if (low === 0) {
+    low = 1;
+  }
+
+  const [rgb0, s0] = COLORS[low - 1];
+  const [rgb1, s1] = COLORS[low];
+  t = (t - s0) / (s1 - s0);
+
+  const [r, g, b] = [
+    lerp(rgb0.r, rgb1.r, t),
+    lerp(rgb0.g, rgb1.g, t),
+    lerp(rgb0.b, rgb1.b, t),
+  ];
+
+  return { r, g, b };
+}
+
+const lerp = (a: number, b: number, t: number) => a + t * (b - a);
+
+export const bound01 = (n: number, max: number) => {
+  n = clamp(n, 0, max);
+
+  // Handle floating point rounding errors
+  if (Math.abs(n - max) < 0.000001) {
+    return 1;
+  }
+
+  // Convert into [0, 1] range if it isn't already
+  return (n % max) / max;
+};
+
+// Converts an RGB color value to HSV
+export const rgbToHsv = ({ r, g, b }: Rgb): Hsv => {
+  const v = Math.max(r, g, b); // value
+  const d = v - Math.min(r, g, b);
+
+  if (d === 0) {
+    return { h: 0, s: 0, v };
+  }
+
+  const s = d / v;
+  let h = 0;
+
+  if (v === r) {
+    h = (g - b) / d + (g < b ? 6 : 0);
+  } else if (v === g) {
+    h = (b - r) / d + 2;
+  } else {
+    h = (r - g) / d + 4;
+  }
+
+  h /= 6;
+
+  return { h, s, v };
+};
+
+// Converts an HSV color value to RGB
+export const hsvToRgb = ({ h, s, v }: Hsv): Rgb => {
+  if (h < 0) h = (h + 1) % 1; // wrap
+  h *= 6;
+  s = clamp(s, 0, 1);
+
+  const i = Math.floor(h),
+    f = h - i,
+    p = v * (1 - s),
+    q = v * (1 - f * s),
+    t = v * (1 - (1 - f) * s),
+    m = i % 6;
+
+  let rgb = [0, 0, 0];
+
+  if (m === 0) rgb = [v, t, p];
+  else if (m === 1) rgb = [q, v, p];
+  else if (m === 2) rgb = [p, v, t];
+  else if (m === 3) rgb = [p, q, v];
+  else if (m === 4) rgb = [t, p, v];
+  else if (m === 5) rgb = [v, p, q];
+
+  const [r, g, b] = rgb;
+
+  return { r, g, b };
+};
+
+// Converts a RGBA color value to HSVA
+export const rgbaToHsva = (rgba: Rgba): Hsva => ({
+  ...rgbToHsv(rgba),
+  a: rgba.a,
+});
+
+// Converts an HSVA color value to RGBA
+export const hsvaToRgba = (hsva: Hsva): Rgba => ({
+  ...hsvToRgb(hsva),
+  a: hsva.a,
+});
+
+// Converts a RGB color to hex
+export const rgbToHex = ({ r, g, b }: Rgb) =>
+  [r, g, b]
+    .map(n => n * 255)
+    .map(Math.round)
+    .map(s => s.toString(16).padStart(2, '0'))
+    .join('');
+
+// Converts an RGBA color to CSS's hex8 string
+export const rgbaToHex8 = ({ r, g, b, a }: Rgba) => {
+  const hex = [r, g, b, a]
+    .map(n => n * 255)
+    .map(Math.round)
+    .map(n => n.toString(16).padStart(2, '0'))
+    .join('');
+  return `#${hex}`;
+};
+
+// Converts an HSVA color to CSS's hex8 string
+export const hsvaToHex8 = (hsva: Hsva) => rgbaToHex8(hsvaToRgba(hsva));
+
+// Parses an hex string to RGBA.
+export const parseHexToRgba = (hex: string) => {
+  if (hex.startsWith('#')) {
+    hex = hex.substring(1);
+  }
+
+  const len = hex.length;
+  let arr: string[] = [];
+
+  if (len === 3 || len === 4) {
+    arr = hex.split('').map(s => s.repeat(2));
+  } else if (len === 6 || len === 8) {
+    arr = Array.from<number>({ length: len / 2 })
+      .fill(0)
+      .map((n, i) => n + i * 2)
+      .map(n => hex.substring(n, n + 2));
+  }
+
+  const [r, g, b, a = 1] = arr
+    .map(s => parseInt(s, 16))
+    .map(n => bound01(n, 255));
+
+  return { r, g, b, a };
+};
+
+// Parses an hex string to HSVA
+export const parseHexToHsva = (hex: string) => rgbaToHsva(parseHexToRgba(hex));
+
+// Compares two hsvs.
+export const eq = (lhs: Hsv, rhs: Hsv) =>
+  lhs.h === rhs.h && lhs.s === rhs.s && lhs.v === rhs.v;
+
+export const renderCanvas = (canvas: HTMLCanvasElement, rgb: Rgb) => {
+  const { width, height } = canvas;
+  const ctx = canvas.getContext('2d')!;
+
+  ctx.globalCompositeOperation = 'color';
+  ctx.clearRect(0, 0, width, height);
+
+  // Saturation: from top to bottom
+  const s = ctx.createLinearGradient(0, 0, 0, height);
+  s.addColorStop(0, '#0000'); // transparent
+  s.addColorStop(1, '#000'); // black
+
+  ctx.fillStyle = s;
+  ctx.fillRect(0, 0, width, height);
+
+  // Value: from left to right
+  const v = ctx.createLinearGradient(0, 0, width, 0);
+  v.addColorStop(0, '#fff'); // white
+  v.addColorStop(1, `#${rgbToHex(rgb)}`); // picked color
+
+  ctx.fillStyle = v;
+  ctx.fillRect(0, 0, width, height);
+};
+
+// Drops alpha value
+export const keepColor = (color: string) =>
+  color.length > 7 && !color.endsWith('transparent')
+    ? color.substring(0, 7)
+    : color;
+
+export const parseStringToRgba = (value: string) => {
+  value = value.trim();
+
+  // Compatible old format: `--affine-palette-transparent`
+  if (value.endsWith('transparent')) {
+    return { r: 1, g: 1, b: 1, a: 0 };
+  }
+
+  if (value.startsWith('#')) {
+    return parseHexToRgba(value);
+  }
+
+  if (value.startsWith('rgb')) {
+    const [r, g, b, a = 1] = value
+      .replace(/^rgba?/, '')
+      .replace(/\(|\)/, '')
+      .split(',')
+      .map(s => parseFloat(s.trim()))
+      // In CSS, the alpha is already in the range [0, 1]
+      .map((n, i) => bound01(n, i === 3 ? 1 : 255));
+
+    return { r, g, b, a };
+  }
+
+  return { r: 0, g: 0, b: 0, a: 1 };
+};
+
+// Preprocess Color
+export const preprocessColor = (style: CSSStyleDeclaration) => {
+  return ({ type, value }: { type: ModeType; value: string }) => {
+    if (value.startsWith('--')) {
+      // Compatible old format: `--affine-palette-transparent`
+      value = value.endsWith('transparent')
+        ? 'transparent'
+        : style.getPropertyValue(value);
+    }
+
+    const rgba = parseStringToRgba(value);
+
+    return { type, rgba };
+  };
+};
+
+/**
+ * Packs to generate an object with a field name and picked color detail
+ *
+ * @param key - The model's field name
+ * @param detail - The picked color detail
+ * @returns An object
+ *
+ * @example
+ *
+ * ```json
+ * { 'fillColor': '--affine-palette-shape-yellow' }
+ * { 'fillColor': '#ffffff' }
+ * { 'fillColor': { normal: '#ffffffff' }}
+ * { 'fillColor': { light: '#fff000ff', 'dark': '#0000fff00' }}
+ * ```
+ */
+export const packColor = (key: string, color: Color) => {
+  return { [key]: typeof color === 'object' ? { ...color } : color };
+};
+
+/**
+ * Packs to generate a color array with the color-scheme
+ *
+ * @param colorScheme - The current color theme
+ * @param value - The color value
+ * @param oldColor - The old color
+ * @returns A color array
+ */
+export const packColorsWith = (
+  colorScheme: ColorScheme,
+  value: string,
+  oldColor: Color
+) => {
+  const colors: { type: ModeType; value: string }[] = [
+    { type: 'normal', value },
+    { type: 'light', value },
+    { type: 'dark', value },
+  ];
+  let type: PickColorType = 'palette';
+
+  if (typeof oldColor === 'object') {
+    if ('normal' in oldColor) {
+      type = 'normal';
+      colors[0].value = oldColor.normal ?? value;
+    } else {
+      type = colorScheme;
+      colors[1].value = oldColor.light ?? value;
+      colors[2].value = oldColor.dark ?? value;
+    }
+  }
+
+  return { type, colors };
+};
+
+export const calcCustomButtonStyle = (
+  color: string,
+  isCustomColor: boolean,
+  ele: Element
+) => {
+  let b = 'transparent';
+  let c = 'transparent';
+
+  if (!isCustomColor) {
+    return { '--b': b, '--c': c };
+  }
+
+  if (color.startsWith('--')) {
+    if (!color.endsWith('transparent')) {
+      b = 'var(--affine-background-overlay-panel-color)';
+      c = keepColor(
+        rgbaToHex8(
+          preprocessColor(window.getComputedStyle(ele))({
+            type: 'normal',
+            value: color,
+          }).rgba
+        )
+      );
+    }
+  } else {
+    b = 'var(--affine-background-overlay-panel-color)';
+    c = keepColor(color);
+  }
+
+  return { '--b': b, '--c': c };
+};
+
+export const adjustColorAlpha = (color: Color, a: number): Color => {
+  let newColor;
+  if (typeof color === 'object') {
+    if ('normal' in color) {
+      const rgba = parseStringToRgba(color.normal);
+      rgba.a = a;
+      newColor = { normal: rgbaToHex8(rgba) };
+    } else {
+      const newDarkRgba = parseStringToRgba(color.dark);
+      newDarkRgba.a = a;
+      const newLightRgba = parseStringToRgba(color.light);
+      newLightRgba.a = a;
+      newColor = {
+        dark: rgbaToHex8(newDarkRgba),
+        light: rgbaToHex8(newLightRgba),
+      };
+    }
+  } else {
+    const rgba = parseStringToRgba(color);
+    rgba.a = a;
+    newColor = rgbaToHex8(rgba);
+  }
+
+  return newColor;
+};