adjust color space names

mcnuttandrew · Oct 7, 2024 · 65f7a6e · 65f7a6e
1 parent 37019da
commit 65f7a6e
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 101 deletions.
diff --git a/apps/color-buddy/src/controls/SetColorSpace.svelte b/apps/color-buddy/src/controls/SetColorSpace.svelte
@@ -3,7 +3,7 @@
 
   import configStore from "../stores/config-store";
 
-  import { colorPickerConfig } from "../lib/utils";
+  import { colorPickerConfig, titleCase } from "../lib/utils";
   import Tooltip from "../components/Tooltip.svelte";
   import Nav from "../components/Nav.svelte";
   import Check from "virtual:icons/fa6-solid/check";
@@ -12,18 +12,26 @@
   export let colorSpace: string;
   export let onChange: (e: any) => void;
   export let showDragPicker: boolean;
-  const notAllowed = new Set(["rgb"]);
-  $: basicOptions = Object.keys(colorPickerConfig)
-    .filter((x) => !notAllowed.has(x) && !colorPickerConfig[x].advancedSpace)
-    .sort((a, b) => {
-      if (a === "lab") return -1;
-      if (b === "lab") return 1;
-      return a.localeCompare(b);
-    });
-
-  $: advancedSpaceOptions = Object.keys(colorPickerConfig)
-    .filter((x) => !notAllowed.has(x) && colorPickerConfig[x].advancedSpace)
-    .filter((x) => x.toLowerCase() !== "srgb");
+  const notAllowed = new Set([
+    "rgb",
+    // "srgb",
+  ]);
+  $: spaceGroups = Object.keys(colorPickerConfig)
+    .filter((x) => !notAllowed.has(x.toLowerCase()))
+    .reduce(
+      (acc, x) => {
+        const group = colorPickerConfig[x].spaceType;
+        if (!acc[group]) acc[group] = [];
+        acc[group].push(x);
+        return acc;
+      },
+      {} as Record<string, string[]>
+    );
+  const groupOrder = [
+    "perceptually uniform",
+    "rgb based",
+    "other interesting spaces",
+  ];
 
   $: showBg = $configStore.showColorBackground;
   const showTypes = ["show on drag", "always show", "never show"] as Parameters<
@@ -34,66 +42,43 @@
 <div class="flex flex-col">
   <div class="whitespace-nowrap text-xs">Color space</div>
   <Tooltip>
-    <div slot="content" class="flex flex-col max-w-md" let:onClick>
-      <div class="text-xs">Basic color spaces</div>
-      {#each basicOptions as space}
-        <button
-          class={`${simpleTooltipRowStyle} py-1  flex items-top text-sm `}
-          on:click={() => {
-            onChange(space);
-            onClick();
-          }}
-        >
-          <Check
-            class="my-1 text-base mr-2 {space !== colorSpace
-              ? 'opacity-0'
-              : ''}"
-          />
-          <div class="flex flex-col">
-            <div class:font-bold={space === colorSpace}>
-              {space.toUpperCase()}
-              {space === "lab" ? "(default)" : ""}
-            </div>
-            <div class="text-xs">
-              {colorPickerConfig[space].description.split(".")[0]}
-            </div>
-            <div class="text-xs">
-              {colorPickerConfig[space].description.split(".")[1]}
-            </div>
-          </div>
-        </button>
-      {/each}
-      <div class="w-full border-b border-stone-200" />
-      <div class="mt-2 text-xs">Advanced color spaces</div>
-      <!-- <div class="">
-        These color spaces provide more control over the color representation,
-        but may be less intuitive or familiar
-      </div> -->
-      {#each advancedSpaceOptions as space}
-        <button
-          class={`${simpleTooltipRowStyle} py-1  flex  items-top text-sm`}
-          on:click={() => {
-            onChange(space);
-            onClick();
-          }}
-        >
-          <Check
-            class="my-1 text-base mr-2 {space !== colorSpace
-              ? 'opacity-0'
-              : ''}"
-          />
-          <div class="flex flex-col">
-            <div class:font-bold={space === colorSpace}>
-              {space.toUpperCase()}
-            </div>
-            <div class="text-xs">
-              {colorPickerConfig[space].description.split(".")[0]}
-            </div>
-            <div class="text-xs">
-              {colorPickerConfig[space].description.split(".")[1]}
+    <div
+      slot="content"
+      class="flex flex-col max-w-md max-h-lvh overflow-auto"
+      let:onClick
+    >
+      {#each groupOrder as groupName}
+        <div class="text-xs">
+          {titleCase(groupName)
+            .split(" ")
+            .map((x) => (x === "Rgb" ? "RGB" : x))
+            .join(" ")}
+        </div>
+        {#each spaceGroups[groupName] as space}
+          <button
+            class={`${simpleTooltipRowStyle} py-1  flex items-top text-sm `}
+            on:click={() => {
+              onChange(space);
+              onClick();
+            }}
+          >
+            <Check
+              class="my-1 text-base mr-2 {space !== colorSpace
+                ? 'opacity-0'
+                : ''}"
+            />
+            <div class="flex flex-col">
+              <div class:font-bold={space === colorSpace}>
+                {space.toUpperCase()}
+                {space === "lab" ? "(default)" : ""}
+              </div>
+              <div class="text-xs">
+                {colorPickerConfig[space].description}
+              </div>
             </div>
-          </div>
-        </button>
+          </button>
+        {/each}
+        <div class="w-full border-b border-stone-200 my-2" />
       {/each}
 
       {#if showDragPicker}

diff --git a/apps/color-buddy/src/lib/utils.ts b/apps/color-buddy/src/lib/utils.ts
@@ -27,15 +27,14 @@ type ColorSpace = keyof typeof ColorSpaceDirectory;
 export const colorPickerConfig = Object.fromEntries(
   (Object.keys(ColorSpaceDirectory) as ColorSpace[]).map((name: ColorSpace) => {
     const space = (ColorSpaceDirectory as any)[name] as typeof Color;
-    const exampleColor = new (ColorSpaceDirectory as any)[name]() as Color;
     const { x, y, z } = space.dimensionToChannel;
     return [
       name,
       {
-        advancedSpace: space.advancedSpace,
         axisLabel: space.axisLabel,
         description: space.description,
         isPolar: space.isPolar,
+        spaceType: space.spaceType,
         title: space.name,
         xChannel: x,
         xChannelIndex: space.channelNames.indexOf(x),

diff --git a/apps/color-buddy/src/scatterplot/ColorScatterPlotPolarGuide.svelte b/apps/color-buddy/src/scatterplot/ColorScatterPlotPolarGuide.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { Color } from "color-buddy-palette";
+  import { Color, cvdSim } from "color-buddy-palette";
   import { colorPickerConfig } from "../lib/utils";
   import { arc } from "d3-shape";
 
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
   import { scaleLinear } from "d3-scale";
+
   export let rScale: any;
   export let yScale: any;
   export let xScale: any;
@@ -17,6 +18,8 @@
   export let axisColor: string;
   export const textColor: string = "";
 
+  $: currentSim = $configStore.colorSim;
+
   $: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig];
   $: rNonDimScale = scaleLinear().domain([0, 1]).range(rScale.domain());
   $: focusedColors = $focusStore.focusedColors;
@@ -67,7 +70,12 @@
     coords[zIdx] = focusedColors.length
       ? colors[focusedColors[0]].toChannels()[zIdx]
       : midPoint;
-    return Color.colorFromChannels(coords, colorSpace as any).toDisplay();
+    const newColor = Color.colorFromChannels(coords, colorSpace as any);
+    if (currentSim !== "none") {
+      return cvdSim(currentSim, newColor).toDisplay();
+    } else {
+      return newColor.toDisplay();
+    }
   };
   $: arcScale = arc();
   $: angleScale = scaleLinear()

diff --git a/apps/color-buddy/src/scatterplot/ColorScatterPlotXYGuides.svelte b/apps/color-buddy/src/scatterplot/ColorScatterPlotXYGuides.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
-  import { Color } from "color-buddy-palette";
+  import { Color, cvdSim } from "color-buddy-palette";
   import { colorPickerConfig } from "../lib/utils";
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
   import { scaleLinear } from "d3-scale";
+
   export let xScale: any;
   export let yScale: any;
   export let plotHeight: number;
@@ -14,6 +15,8 @@
   export let axisColor: string;
   export let textColor: string;
 
+  $: currentSim = $configStore.colorSim;
+
   $: config = colorPickerConfig[colorSpace as keyof typeof colorPickerConfig];
   $: xNonDimScale = scaleLinear().domain([0, 1]).range(xScale.domain());
   $: yNonDimScale = scaleLinear().domain([0, 1]).range(yScale.domain());
@@ -66,7 +69,12 @@
     const avgZChannel = avgNums(fColors.map((x) => x[config.zChannelIndex]));
     const midPoint = (config.zDomain[0] + config.zDomain[1]) / 2;
     coords[config.zChannelIndex] = fColors.length ? avgZChannel : midPoint;
-    return Color.colorFromChannels(coords, colorSpace as any).toDisplay();
+    const newColor = Color.colorFromChannels(coords, colorSpace as any);
+    if (currentSim !== "none") {
+      return cvdSim(currentSim, newColor).toDisplay();
+    } else {
+      return newColor.toDisplay();
+    }
   };
   $: shouldShowColorBackground =
     $configStore.showColorBackground === "always show" ||