From 76e9e81306bd6491232e04f00227225489153918 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Mon, 6 Jan 2025 09:51:44 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=89=B2=E8=BD=AE=E8=89=B2?=
 =?UTF-8?q?=E8=B0=83=E5=92=8C=E5=8F=98=E5=8C=96=E6=AD=A5=E9=95=BF=E7=9A=84?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E5=8A=9F=E8=83=BD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page-components/wheels/ColorColumn.tsx | 8 +++++---
 src/page-components/wheels/ColorWheel.tsx  | 6 ++++++
 src/pages/Wheels.tsx                       | 9 +++++++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/page-components/wheels/ColorColumn.tsx b/src/page-components/wheels/ColorColumn.tsx
index 46824c4..aa415f6 100644
--- a/src/page-components/wheels/ColorColumn.tsx
+++ b/src/page-components/wheels/ColorColumn.tsx
@@ -27,19 +27,21 @@ type ColorWheelProps = {
   actived: boolean;
   rotate: number;
   rootColor: string;
+  tones: number;
+  step: number;
 };
 
-export function ColorColumn({ actived, rotate, rootColor }: ColorWheelProps) {
+export function ColorColumn({ actived, rotate, rootColor, tones, step }: ColorWheelProps) {
   const { colorFn } = useColorFunction();
   const colorSeries = useMemo(() => {
     try {
-      const colors = colorFn?.series(rootColor, 4, 0.16);
+      const colors = colorFn?.series(rootColor, tones, step / 100);
       return (colors ?? Array.from({ length: 9 }, () => rootColor)).reverse();
     } catch (e) {
       console.error('[Generate Color Series]', e);
     }
     return Array.from({ length: 9 }, () => rootColor);
-  }, [rootColor]);
+  }, [rootColor, tones, step]);
 
   return (
     <div
diff --git a/src/page-components/wheels/ColorWheel.tsx b/src/page-components/wheels/ColorWheel.tsx
index 3efaaea..94ced24 100644
--- a/src/page-components/wheels/ColorWheel.tsx
+++ b/src/page-components/wheels/ColorWheel.tsx
@@ -16,6 +16,8 @@ type ColorWheelProps = {
     | 'tetradic'
     | 'flip_tetradic'
     | 'square';
+  tones?: number;
+  step?: number;
 };
 
 const wheelRotates = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330];
@@ -33,6 +35,8 @@ const highlightSeries = {
 export function ColorWheel({
   originColor = '000000',
   highlightMode = 'complementary',
+  tones = 4,
+  step = 10,
 }: ColorWheelProps) {
   const { colorFn } = useColorFunction();
   const wheelColors = useMemo(() => {
@@ -58,6 +62,8 @@ export function ColorWheel({
               rootColor={color}
               rotate={rotate}
               actived={includes(highlightSeries[highlightMode], rotate)}
+              tones={tones}
+              step={step}
             />
           ))}
         </div>
diff --git a/src/pages/Wheels.tsx b/src/pages/Wheels.tsx
index 1ae852c..e9ccdcc 100644
--- a/src/pages/Wheels.tsx
+++ b/src/pages/Wheels.tsx
@@ -12,7 +12,7 @@ export function Wheels() {
   const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
   const [selectedMode, setSelectedMode] = useState('complementary');
   const [steps, setSteps] = useState(10);
-  const [tones, setTones] = useState(4);
+  const [tones, setTones] = useState(3);
 
   return (
     <div className={cx('workspace', styles.wheels_workspace)}>
@@ -64,7 +64,12 @@ export function Wheels() {
           </div>
         </aside>
         <div className={styles.wheel_side}>
-          <ColorWheel originColor={selectedColor} highlightMode={selectedMode} />
+          <ColorWheel
+            originColor={selectedColor}
+            highlightMode={selectedMode}
+            tones={tones}
+            step={steps}
+          />
         </div>
       </section>
     </div>