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-14 11:18:04 +08:00
parent bfd179c4aa
commit 44023fed29
8 changed files with 64 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/page-components/color-compare/HCTCompare.tsx
View File

@@ -19,20 +19,28 @@ const defaultCompareResult: HctDiffference = {
},
};
export function HCTCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
export function HCTCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;
}
try {
const diff = colorFn.differ_in_hct(basic, compare);
const diffFn = {
absolute: colorFn.differ_in_hct,
relative: colorFn.relative_differ_in_hct,
};
const diff = diffFn[mode](basic, compare);
return diff;
} catch (e) {
console.error('[Compare in HCT]', e);
}
return defaultCompareResult;
}, [basic, compare]);
}, [basic, compare, mode]);
return (
<div>

14
src/page-components/color-compare/HSLCompare.tsx
View File

@@ -19,20 +19,28 @@ const defaultCompareResult: HSLDifference = {
},
};
export function HSLCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
export function HSLCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;
}
try {
const diff = colorFn.differ_in_hsl(basic, compare);
const diffFn = {
absolute: colorFn.differ_in_hsl,
relative: colorFn.relative_differ_in_hsl,
};
const diff = diffFn[mode](basic, compare);
return diff;
} catch (e) {
console.error('[Compare in HSL]', e);
}
return defaultCompareResult;
}, [basic, compare]);
}, [basic, compare, mode]);
return (
<div>

14
src/page-components/color-compare/OKLCHCompare.tsx
View File

@@ -19,20 +19,28 @@ const defaultCompareResult: OklchDifference = {
},
};
export function OklchCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
export function OklchCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;
}
try {
const diff = colorFn.differ_in_oklch(basic, compare);
const diffFn = {
absolute: colorFn.differ_in_oklch,
relative: colorFn.relative_differ_in_oklch,
};
const diff = diffFn[mode](basic, compare);
return diff;
} catch (e) {
console.error('[Compare in Oklch]', e);
}
return defaultCompareResult;
}, [basic, compare]);
}, [basic, compare, mode]);
return (
<div>

14
src/page-components/color-compare/RGBCompare.tsx
View File

@@ -19,14 +19,22 @@ const defaultCompareResult: RGBDifference = {
},
};
export function RGBCompare({ basic = '000000', compare = '000000' }: CompareMethodProps) {
export function RGBCompare({
basic = '000000',
compare = '000000',
mode = 'absolute',
}: CompareMethodProps) {
const { colorFn } = useColorFunction();
const differ = useMemo(() => {
if (!colorFn) {
return defaultCompareResult;
}
try {
const diff = colorFn?.differ_in_rgb(basic, compare);
const diffFn = {
absolute: colorFn.differ_in_rgb,
relative: colorFn.relative_differ_in_rgb,
};
const diff = diffFn[mode](basic, compare);
return {
r: {
delta: Math.round(diff.r.delta * 255),
@@ -45,7 +53,7 @@ export function RGBCompare({ basic = '000000', compare = '000000' }: CompareMeth
console.error('[Compare in RGB]', e);
}
return defaultCompareResult;
}, [basic, compare]);
}, [basic, compare, mode]);
return (
<div>

2
src/page-components/color-compare/ShadeScale.tsx
View File

@@ -46,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
</div>
<div className={styles.elements}>
<div className={styles.element}>
<div className={cx(styles.element_name, styles.mean)}>F</div>
<div className={cx(styles.element_name, styles.mean)}>Factor</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div>
</div>

2
src/page-components/color-compare/TintScale.tsx
View File

@@ -46,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
</div>
<div className={styles.elements}>
<div className={styles.element}>
<div className={cx(styles.element_name, styles.mean)}>F</div>
<div className={cx(styles.element_name, styles.mean)}>Factor</div>
<div className={styles.element_value}>{(mixFactors.average * 100).toFixed(2)}%</div>
</div>
</div>

1
src/page-components/color-compare/share-props.ts
View File

@@ -1,4 +1,5 @@
export type CompareMethodProps = {
basic?: string;
compare?: string;
mode?: 'absolute' | 'relative';
};

21
src/pages/Compare.tsx
View File

@@ -1,6 +1,8 @@
import cx from 'clsx';
import { useState } from 'react';
import { ColorPicker } from '../components/ColorPicker';
import { HSegmentedControl } from '../components/HSegmentedControl';
import { Labeled } from '../components/Labeled';
import { ScrollArea } from '../components/ScrollArea';
import { HCTCompare } from '../page-components/color-compare/HCTCompare';
import { HSLCompare } from '../page-components/color-compare/HSLCompare';
@@ -13,6 +15,7 @@ import styles from './Compare.module.css';
export function ColorCompare() {
const [basicColor, setBasicColor] = useState('000000');
const [compareColor, setCompareColor] = useState('000000');
const [analysisMode, setMode] = useState<'relative' | 'absolute'>('relative');
return (
<div className={cx('workspace', styles.compare_workspace)}>
@@ -34,10 +37,20 @@ export function ColorCompare() {
</div>
<div className={styles.compare_column}>
<h5>Compare Result</h5>
<RGBCompare basic={basicColor} compare={compareColor} />
<HSLCompare basic={basicColor} compare={compareColor} />
<HCTCompare basic={basicColor} compare={compareColor} />
<OklchCompare basic={basicColor} compare={compareColor} />
<Labeled label="Analysis Mode">
<HSegmentedControl
options={[
{ label: 'Absolute', value: 'absolute' },
{ label: 'Relative', value: 'relative' },
]}
value={analysisMode}
onChange={setMode}
/>
</Labeled>
<RGBCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
<HSLCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
<HCTCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
<OklchCompare basic={basicColor} compare={compareColor} mode={analysisMode} />
<TintScale basic={basicColor} compare={compareColor} />
<ShadeScale basic={basicColor} compare={compareColor} />
</div>