xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更正一处书写错误。

Browse Source
This commit is contained in:
徐涛 2025-01-02 09:23:05 +08:00
parent 1772d6e047
commit 118b6605d7
1 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/Harmonies.tsx
View File

@ -11,7 +11,7 @@ import styles from './Harmonies.module.css';
export function Harmonies() { export function Harmonies() {
const { colorFn } = useColorFunction(); const { colorFn } = useColorFunction();
const [seletedColor, setSelectedColor] = useAtom(currentPickedColor); const [selectedColor, setSelectedColor] = useAtom(currentPickedColor);
const [selectedMode, setSelectedMode] = useState('complementary'); const [selectedMode, setSelectedMode] = useState('complementary');
const generatedColors = useMemo(() => { const generatedColors = useMemo(() => {
try { try {
@ -19,49 +19,49 @@ export function Harmonies() {
switch (selectedMode) { switch (selectedMode) {
case 'complementary': case 'complementary':
{ {
colors.push({ color: seletedColor, ratio: 65 }); colors.push({ color: selectedColor, ratio: 65 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000'; const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 35 }); colors.push({ color: compColor, ratio: 35 });
} }
break; break;
case 'analogous': case 'analogous':
{ {
colors.push({ color: seletedColor, ratio: 60 }); colors.push({ color: selectedColor, ratio: 60 });
const analogousColors = colorFn?.analogous_30(seletedColor) ?? []; const analogousColors = colorFn?.analogous_30(selectedColor) ?? [];
colors.push({ color: analogousColors[0], ratio: 30 }); colors.push({ color: analogousColors[0], ratio: 30 });
colors.push({ color: analogousColors[1], ratio: 10 }); colors.push({ color: analogousColors[1], ratio: 10 });
} }
break; break;
case 'analogous_with_complementary': case 'analogous_with_complementary':
{ {
colors.push({ color: seletedColor, ratio: 55 }); colors.push({ color: selectedColor, ratio: 55 });
const analogousColors = colorFn?.analogous_30(seletedColor) ?? []; const analogousColors = colorFn?.analogous_30(selectedColor) ?? [];
colors.push({ color: analogousColors[0], ratio: 35 }); colors.push({ color: analogousColors[0], ratio: 35 });
colors.push({ color: analogousColors[1], ratio: 10 }); colors.push({ color: analogousColors[1], ratio: 10 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000'; const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 }); colors.push({ color: compColor, ratio: 10 });
} }
break; break;
case 'triadic': case 'triadic':
{ {
colors.push({ color: seletedColor, ratio: 60 }); colors.push({ color: selectedColor, ratio: 60 });
const triadicColors = colorFn?.triadic(seletedColor) ?? []; const triadicColors = colorFn?.triadic(selectedColor) ?? [];
colors.push({ color: triadicColors[0], ratio: 30 }); colors.push({ color: triadicColors[0], ratio: 30 });
colors.push({ color: triadicColors[1], ratio: 10 }); colors.push({ color: triadicColors[1], ratio: 10 });
} }
break; break;
case 'split_complementary': case 'split_complementary':
{ {
colors.push({ color: seletedColor, ratio: 60 }); colors.push({ color: selectedColor, ratio: 60 });
const splitCompColors = colorFn?.split_complementary(seletedColor) ?? []; const splitCompColors = colorFn?.split_complementary(selectedColor) ?? [];
colors.push({ color: splitCompColors[0], ratio: 30 }); colors.push({ color: splitCompColors[0], ratio: 30 });
colors.push({ color: splitCompColors[1], ratio: 10 }); colors.push({ color: splitCompColors[1], ratio: 10 });
} }
break; break;
case 'tetradic': case 'tetradic':
{ {
colors.push({ color: seletedColor, ratio: 55 }); colors.push({ color: selectedColor, ratio: 55 });
const tetradicColors = colorFn?.tetradic(seletedColor) ?? []; const tetradicColors = colorFn?.tetradic(selectedColor) ?? [];
colors.push({ color: tetradicColors[0], ratio: 35 }); colors.push({ color: tetradicColors[0], ratio: 35 });
colors.push({ color: tetradicColors[1], ratio: 10 }); colors.push({ color: tetradicColors[1], ratio: 10 });
colors.push({ color: tetradicColors[2], ratio: 10 }); colors.push({ color: tetradicColors[2], ratio: 10 });
@ -69,23 +69,23 @@ export function Harmonies() {
break; break;
case 'flip_tetradic': case 'flip_tetradic':
{ {
colors.push({ color: seletedColor, ratio: 55 }); colors.push({ color: selectedColor, ratio: 55 });
const color120 = colorFn?.shift_hue(seletedColor, 120) ?? '000000'; const color120 = colorFn?.shift_hue(selectedColor, 120) ?? '000000';
colors.push({ color: color120, ratio: 35 }); colors.push({ color: color120, ratio: 35 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000'; const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 }); colors.push({ color: compColor, ratio: 10 });
const color240 = colorFn?.shift_hue(seletedColor, 240) ?? '000000'; const color240 = colorFn?.shift_hue(selectedColor, 240) ?? '000000';
colors.push({ color: color240, ratio: 10 }); colors.push({ color: color240, ratio: 10 });
} }
break; break;
case 'square': case 'square':
{ {
colors.push({ color: seletedColor, ratio: 55 }); colors.push({ color: selectedColor, ratio: 55 });
const color90 = colorFn?.shift_hue(seletedColor, 90) ?? '000000'; const color90 = colorFn?.shift_hue(selectedColor, 90) ?? '000000';
colors.push({ color: color90, ratio: 35 }); colors.push({ color: color90, ratio: 35 });
const compColor = colorFn?.complementary(seletedColor) ?? '000000'; const compColor = colorFn?.complementary(selectedColor) ?? '000000';
colors.push({ color: compColor, ratio: 10 }); colors.push({ color: compColor, ratio: 10 });
const color270 = colorFn?.shift_hue(seletedColor, 270) ?? '000000'; const color270 = colorFn?.shift_hue(selectedColor, 270) ?? '000000';
colors.push({ color: color270, ratio: 10 }); colors.push({ color: color270, ratio: 10 });
} }
break; break;
@ -97,7 +97,7 @@ export function Harmonies() {
console.error('[Generate Color Series]', error); console.error('[Generate Color Series]', error);
} }
return [] as HarmonyColor[]; return [] as HarmonyColor[];
}, [seletedColor, selectedMode]); }, [selectedColor, selectedMode]);
return ( return (
<div className={cx('workspace', styles.harmonies_workspace)}> <div className={cx('workspace', styles.harmonies_workspace)}>
@ -109,7 +109,7 @@ export function Harmonies() {
<aside className={styles.function_side}> <aside className={styles.function_side}>
<div> <div>
<h5>Basic color</h5> <h5>Basic color</h5>
<ColorPicker color={seletedColor} onSelect={(color) => setSelectedColor(color)} /> <ColorPicker color={selectedColor} onSelect={(color) => setSelectedColor(color)} />
</div> </div>
<div className={styles.mode_navigation}> <div className={styles.mode_navigation}>
<h5>Color selection method</h5> <h5>Color selection method</h5>