From 44023fed29dac237e8a8babee5cb2db6554f5fcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= Date: Tue, 14 Jan 2025 11:18:04 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A2=9C=E8=89=B2=E5=AF=B9?= =?UTF-8?q?=E6=AF=94=E7=9A=84=E5=88=86=E6=9E=90=E6=A8=A1=E5=BC=8F=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../color-compare/HCTCompare.tsx | 14 ++++++++++--- .../color-compare/HSLCompare.tsx | 14 ++++++++++--- .../color-compare/OKLCHCompare.tsx | 14 ++++++++++--- .../color-compare/RGBCompare.tsx | 14 ++++++++++--- .../color-compare/ShadeScale.tsx | 2 +- .../color-compare/TintScale.tsx | 2 +- .../color-compare/share-props.ts | 1 + src/pages/Compare.tsx | 21 +++++++++++++++---- 8 files changed, 64 insertions(+), 18 deletions(-) diff --git a/src/page-components/color-compare/HCTCompare.tsx b/src/page-components/color-compare/HCTCompare.tsx index 59e0dc0..a8d07bb 100644 --- a/src/page-components/color-compare/HCTCompare.tsx +++ b/src/page-components/color-compare/HCTCompare.tsx @@ -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 (
diff --git a/src/page-components/color-compare/HSLCompare.tsx b/src/page-components/color-compare/HSLCompare.tsx index 4e4d114..383a0d6 100644 --- a/src/page-components/color-compare/HSLCompare.tsx +++ b/src/page-components/color-compare/HSLCompare.tsx @@ -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 (
diff --git a/src/page-components/color-compare/OKLCHCompare.tsx b/src/page-components/color-compare/OKLCHCompare.tsx index b7263a7..14762a2 100644 --- a/src/page-components/color-compare/OKLCHCompare.tsx +++ b/src/page-components/color-compare/OKLCHCompare.tsx @@ -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 (
diff --git a/src/page-components/color-compare/RGBCompare.tsx b/src/page-components/color-compare/RGBCompare.tsx index fb7262c..6795f07 100644 --- a/src/page-components/color-compare/RGBCompare.tsx +++ b/src/page-components/color-compare/RGBCompare.tsx @@ -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 (
diff --git a/src/page-components/color-compare/ShadeScale.tsx b/src/page-components/color-compare/ShadeScale.tsx index cd238f8..455b453 100644 --- a/src/page-components/color-compare/ShadeScale.tsx +++ b/src/page-components/color-compare/ShadeScale.tsx @@ -46,7 +46,7 @@ export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMeth
-
F
+
Factor
{(mixFactors.average * 100).toFixed(2)}%
diff --git a/src/page-components/color-compare/TintScale.tsx b/src/page-components/color-compare/TintScale.tsx index b64b569..f4ccaf7 100644 --- a/src/page-components/color-compare/TintScale.tsx +++ b/src/page-components/color-compare/TintScale.tsx @@ -46,7 +46,7 @@ export function TintScale({ basic = '000000', compare = '000000' }: CompareMetho
-
F
+
Factor
{(mixFactors.average * 100).toFixed(2)}%
diff --git a/src/page-components/color-compare/share-props.ts b/src/page-components/color-compare/share-props.ts index 31da566..b274cdd 100644 --- a/src/page-components/color-compare/share-props.ts +++ b/src/page-components/color-compare/share-props.ts @@ -1,4 +1,5 @@ export type CompareMethodProps = { basic?: string; compare?: string; + mode?: 'absolute' | 'relative'; }; diff --git a/src/pages/Compare.tsx b/src/pages/Compare.tsx index bc2d6ab..2519bfb 100644 --- a/src/pages/Compare.tsx +++ b/src/pages/Compare.tsx @@ -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 (
@@ -34,10 +37,20 @@ export function ColorCompare() {
Compare Result
- - - - + + + + + + +