From c9626f3b8e60acad23433ddf76759d5acd892f99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Thu, 16 Jan 2025 15:47:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E5=AE=8C=E6=88=90=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E8=89=B2=E6=9D=BF=E7=94=9F=E6=88=90=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../auto-palette/PaletteColors.tsx            | 55 +++++++++++++++++++
 src/pages/Palette.module.css                  |  8 +++
 src/pages/Palette.tsx                         | 16 +++++-
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/page-components/auto-palette/PaletteColors.tsx

diff --git a/src/page-components/auto-palette/PaletteColors.tsx b/src/page-components/auto-palette/PaletteColors.tsx
new file mode 100644
index 0000000..cd99a17
--- /dev/null
+++ b/src/page-components/auto-palette/PaletteColors.tsx
@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useColorFunction } from '../../ColorFunctionContext';
+import { FlexColorStand } from '../../components/FlexColorStand';
+
+type PaletteColorsProps = {
+  color: string;
+  swatchAmount: number;
+  referenceBias: number;
+  useReference: boolean;
+  min: number;
+  max: number;
+  copyMode: 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
+};
+
+export function PaletteColors({
+  color = '000000',
+  swatchAmount,
+  referenceBias,
+  useReference,
+  min,
+  max,
+  copyMode,
+}: PaletteColorsProps) {
+  const { colorFn } = useColorFunction();
+  const colors = useMemo(() => {
+    if (!colorFn) {
+      return Array.from({ length: swatchAmount }, () => color);
+    }
+    try {
+      if (!useReference) {
+        return colorFn.generate_palette_from_color(color, swatchAmount, min, max);
+      } else {
+        return colorFn.generate_palette_from_color(
+          color,
+          swatchAmount,
+          min,
+          max,
+          useReference,
+          referenceBias,
+        );
+      }
+    } catch (e) {
+      console.error('[Generate Auto Palette]', e);
+    }
+    return Array.from({ length: swatchAmount }, () => color);
+  }, [color, swatchAmount, referenceBias, useReference, min, max]);
+
+  return (
+    <>
+      {colors.map((c, index) => (
+        <FlexColorStand key={`${c}-${index}`} color={c} valueMode={copyMode} />
+      ))}
+    </>
+  );
+}
diff --git a/src/pages/Palette.module.css b/src/pages/Palette.module.css
index 54a8322..27489c1 100644
--- a/src/pages/Palette.module.css
+++ b/src/pages/Palette.module.css
@@ -43,5 +43,13 @@
       gap: var(--spacing-s);
       font-size: var(--font-size-s);
     }
+    .colors_booth {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: stretch;
+      gap: var(--spacing-xs);
+      min-height: 12em;
+    }
   }
 }
diff --git a/src/pages/Palette.tsx b/src/pages/Palette.tsx
index dac505b..bf1861f 100644
--- a/src/pages/Palette.tsx
+++ b/src/pages/Palette.tsx
@@ -7,6 +7,7 @@ import { Labeled } from '../components/Labeled';
 import { LabeledPicker } from '../components/LabeledPicker';
 import { ScrollArea } from '../components/ScrollArea';
 import { Switch } from '../components/Switch';
+import { PaletteColors } from '../page-components/auto-palette/PaletteColors';
 import { currentPickedColor } from '../stores/colors';
 import styles from './Palette.module.css';
 
@@ -53,14 +54,14 @@ export function AutomaticPalette() {
               <LabeledPicker
                 title="Swatch Amount"
                 min={3}
-                max={15}
+                max={12}
                 step={1}
                 value={swatchAmount}
                 onChange={(value) => setSwatchAmount(value)}
               />
               <LabeledPicker
                 title="Reference Bias"
-                min={0}
+                min={-maxBias}
                 max={maxBias}
                 step={1}
                 value={referenceBias}
@@ -89,6 +90,17 @@ export function AutomaticPalette() {
           </aside>
           <div className={styles.palette_content}>
             <h5>Generated Palette</h5>
+            <div className={styles.colors_booth}>
+              <PaletteColors
+                color={selectedColor}
+                swatchAmount={swatchAmount}
+                min={minLightness / 100}
+                max={maxLightness / 100}
+                useReference={useReferenceColor}
+                referenceBias={referenceBias}
+                copyMode={mode}
+              />
+            </div>
             <div className={styles.color_value_mode}>
               <label>Copy color value in</label>
               <HSegmentedControl