consolidate some menu tools

src/content-modules/ActionArea.svelte

@@ -6,20 +6,16 @@
   import InterpolatePoints from "./contextual-tools/InterpolatePoints.svelte";
   import DistributePoints from "./contextual-tools/DistributePoints.svelte";
   import AdjustColor from "./contextual-tools/AdjustColor.svelte";
-  import OpposingColor from "./contextual-tools/OpposingColor.svelte";
   import AddColor from "./contextual-tools/AddColor.svelte";
   import Rotate from "./contextual-tools/Rotate.svelte";
   import Deduplicate from "./contextual-tools/Deduplicate.svelte";
-  import ClipToGamut from "./contextual-tools/ClipToGamut.svelte";
 </script>
 
 <div
   class="flex bg-slate-400 p-2 h-12 flex-none items-center overflow-x-scroll overflow-y-hidden"
 >
   <AddColor />
   <AdjustColor />
-  <ClipToGamut />
-  <OpposingColor />
 
   <CreateAverage />
   <SuggestionModificationToSelection />

src/content-modules/contextual-tools/AdjustColor.svelte

@@ -3,6 +3,7 @@
   import colorStore from "../../stores/color-store";
   import focusStore from "../../stores/focus-store";
   import Tooltip from "../../components/Tooltip.svelte";
+  import { clipToGamut } from "../../lib/utils";
 
   import { buttonStyle } from "../../lib/styles";
 
@@ -11,11 +12,12 @@
   $: colorSpace = $colorStore.currentPal.colorSpace;
 
   type ColorEffect = (color: Color) => [number, number, number];
-  function actionOnColor(idx: number, action: ColorEffect) {
-    const channels = action(colors[idx]);
-    console.log(channels);
+  function actionOnColor(focusedColors: number[], action: ColorEffect) {
     const newColors = [...colors];
-    newColors[idx] = colorFromChannels(channels, colorSpace);
+    focusedColors.forEach((idx) => {
+      const channels = action(colors[idx]);
+      newColors[idx] = colorFromChannels(channels, colorSpace);
+    });
     colorStore.setCurrentPalColors(newColors);
   }
   const actions: { name: string; effect: ColorEffect }[] = [
@@ -35,16 +37,25 @@
       name: "Desaturate",
       effect: (color) => color.toColorIO().set("lch.c", (c) => c * 0.8).coords,
     },
+    {
+      name: "Convert To Opposing",
+      effect: (color) =>
+        color.toColorIO().set("hsl.h", (h) => (h + 180) % 360).coords,
+    },
+    {
+      name: "Clip to gamut",
+      effect: (color) => clipToGamut(color),
+    },
   ];
 </script>
 
-{#if focusedColors.length === 1}
+{#if focusedColors.length >= 1}
   <Tooltip>
     <div slot="content">
       {#each actions as action}
         <button
           class={buttonStyle}
-          on:click={() => actionOnColor(focusedColors[0], action.effect)}
+          on:click={() => actionOnColor(focusedColors, action.effect)}
         >
           {action.name}
         </button>

src/lib/utils.ts

@@ -48,12 +48,6 @@ export function avgColors(
   return colorFromChannels(avgColor, colorSpace as any);
 }
 
-export function opposingColor(color: Color): Color {
-  const [h, s, l] = color.toColorIO().to("hsl").coords;
-  const channels = [(h + 180) % 360, s, l] as [number, number, number];
-  return colorFromChannels(channels, "hsl").toColorSpace(color.spaceName);
-}
-
 export function deDup(arr: Color[]): Color[] {
   const seen = new Set();
   return arr.filter((item) => {
@@ -62,6 +56,24 @@ export function deDup(arr: Color[]): Color[] {
   });
 }
 
+export function clipToGamut(color: Color): [number, number, number] {
+  if (color.inGamut()) {
+    console.log("branch a");
+    const channels = Object.entries(color.domains).map(([key, domain]) => {
+      const [min, max] = domain.sort();
+      return clamp(color.channels[key], min, max);
+    });
+    return channels as [number, number, number];
+  } else {
+    const newChannels = color
+      .toColorIO()
+      .to("srgb")
+      .toGamut()
+      .to(color.spaceName).coords;
+    return newChannels;
+  }
+}
+
 export function draggable(node: any) {
   let x: number;
   let y: number;