[palette] detect colorspace for expansion

Author: paulgirard

packages/gephi-lite/src/components/GraphAppearance/color/utils.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+
+import { colorSpacePresetsSortedByArea, detectSmallestCompatibleColorSpace } from "./utils";
+
+describe("Color Utils", () => {
+  it("should properly sort preset by size", () => {
+    expect(colorSpacePresetsSortedByArea).toEqual([
+      "ochre-sand",
+      "indigo-night",
+      "blue-ocean",
+      "purple-wine",
+      "yellow-lime",
+      "tarnish",
+      "fancy-light",
+      "red-roses",
+      "pastel",
+      "sensible",
+      "ice-cube",
+      "green-mint",
+      "shades",
+      "fancy-dark",
+      "fluo",
+      "colorblind",
+      "default",
+      "pimp",
+      "intense",
+      "all",
+    ]);
+  });
+  it("should properly detect red roses", () => {
+    const space = detectSmallestCompatibleColorSpace(["#d746ae", "#c2809b", "#cb4572"]);
+    expect(space).toEqual("red-roses");
+  });
+  it("should properly detect colorblind", () => {
+    const space = detectSmallestCompatibleColorSpace(["#a09344", "#7f64b9", "#c36785"]);
+    expect(space).toEqual("colorblind");
+  });
+  it("should properly detect green-mint", () => {
+    const space = detectSmallestCompatibleColorSpace(["#c2ce88", "#97d54c", "#68823f"]);
+    expect(space).toEqual("green-mint");
+  });
+  it("should properly detect fancy-light", () => {
+    const space = detectSmallestCompatibleColorSpace(["#e6b8c4", "#98d4e4", "#e1c4aa", "#bfbee0", "#b7d7bd"]);
+    expect(space).toEqual("fancy-light");
+  });
+});

packages/gephi-lite/src/components/GraphAppearance/color/utils.ts

@@ -1,22 +1,62 @@
-import iwanthue from "iwanthue";
-import { every, values as getValues } from "lodash";
+import iwanthue, { ColorSpaceArray, ColorSpacePreset } from "iwanthue";
+import { labToHcl, rgbHexToLab } from "iwanthue/helpers";
+import presets from "iwanthue/presets";
+import { every, values as getValues, reverse, sortBy, toPairs } from "lodash";
 
 export function isColor(strColor: string): boolean {
   const s = new Option().style;
   s.color = strColor;
   return s.color !== "";
 }
 
+const colorSpacePresetsAreas = sortBy(
+  (toPairs(presets) as [ColorSpacePreset, ColorSpaceArray][]).map(([presetKey, preset]) => {
+    // hRange can be expressed as a range from 330 to 360 and from 0 to 20 as [330, 20]
+    // in that case the range has to be calculated differently
+    const hRange = preset[1] >= preset[0] ? preset[1] - preset[0] : 360 - preset[0] + preset[1];
+    return {
+      key: presetKey,
+      area: hRange * (preset[3] - preset[2]) * (preset[5] - preset[4]),
+    };
+  }),
+  ({ area }) => area,
+);
+
+export const colorSpacePresetsSortedByArea = colorSpacePresetsAreas.map(({ key }) => key);
+
+export function detectSmallestCompatibleColorSpace(hexColors: string[]) {
+  const colorSpace = colorSpacePresetsSortedByArea.find((presetKey) => {
+    // test that all colors are include din the color area
+    const areaBounds = presets[presetKey];
+    return hexColors
+      .map((c) => labToHcl(rgbHexToLab(c)))
+      .every(
+        ([h, c, l]) =>
+          (areaBounds[0] <= areaBounds[1]
+            ? areaBounds[0] <= h && h <= areaBounds[1]
+            : areaBounds[0] <= h || h <= areaBounds[1]) &&
+          areaBounds[2] <= c &&
+          c <= areaBounds[3] &&
+          areaBounds[4] <= l &&
+          l <= areaBounds[5],
+      );
+  });
+
+  return colorSpace;
+}
+
 export function getPalette(values: string[], originalPalette?: Record<string, string | null>): Record<string, string> {
   if (every(values, (v) => isColor(v))) {
     return values.reduce((iter, v) => ({ ...iter, [v]: v }), {});
   } else {
     const currentColors = getValues(originalPalette).filter((c) => c !== null);
-    const palette = iwanthue(values.length, { originalColorsToExpand: currentColors, colorSpace: "all" });
-    const newColors = palette.filter((c) => !currentColors.includes(c));
-    console.log(currentColors, palette, newColors);
+    // heuristics to detect colorSpace: find the smallest area which contains all origin colors
+    const colorSpace = detectSmallestCompatibleColorSpace(currentColors);
+    console.log(colorSpace);
+    const palette = iwanthue(values.length, { originalColorsToExpand: currentColors, colorSpace });
+    const newColors = reverse(palette.filter((c) => !currentColors.includes(c)));
     return values.reduce(
-      (iter, v, i) => ({ ...iter, [v]: originalPalette && originalPalette[v] ? originalPalette[v] : newColors[i] }),
+      (iter, v) => ({ ...iter, [v]: originalPalette && originalPalette[v] ? originalPalette[v] : newColors.pop() }),
       {},
     );
   }