From 2ddffe1b1213293f5f36c7363bf43b78b2fcafa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= Date: Mon, 10 Feb 2025 16:43:30 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=B6=89=E5=8F=8AWASM?= =?UTF-8?q?=E5=86=85=E7=BB=93=E6=9E=84=E4=BD=93=E7=9A=84=E5=AE=9E=E4=BE=8B?= =?UTF-8?q?=E5=8C=96=E4=BD=8D=E7=BD=AE=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ColorFunctionContext.tsx | 4 ++-- src/page-components/color-compare/HCTCompare.tsx | 10 ++++------ src/page-components/color-compare/HSLCompare.tsx | 10 ++++------ src/page-components/color-compare/OKLCHCompare.tsx | 10 ++++------ src/page-components/color-compare/RGBCompare.tsx | 10 ++++------ src/page-components/color-compare/ShadeScale.tsx | 3 +-- src/page-components/color-compare/TintScale.tsx | 3 +-- 7 files changed, 20 insertions(+), 30 deletions(-) diff --git a/src/ColorFunctionContext.tsx b/src/ColorFunctionContext.tsx index 0b5d4e5..e368e49 100644 --- a/src/ColorFunctionContext.tsx +++ b/src/ColorFunctionContext.tsx @@ -23,8 +23,7 @@ export function useColorFunction(): ColorFunctionContextType { } export function ColorFunctionProvider({ children }: WasmProviderProps) { - //@ts-expect-error TS2503 - const [wasmInstance, setWasmInstance] = useState(null); + const [wasmInstance, setWasmInstance] = useState(null); const [isPending, startTransition] = useTransition(); const [error, setError] = useState(null); @@ -43,6 +42,7 @@ export function ColorFunctionProvider({ children }: WasmProviderProps) { try { await init(); setWasmInstance(funcs); + console.debug('[Load WASM]', 'Loaded'); } catch (e) { console.error('[Load WASM]', e); setError(e); diff --git a/src/page-components/color-compare/HCTCompare.tsx b/src/page-components/color-compare/HCTCompare.tsx index 537b12e..292e461 100644 --- a/src/page-components/color-compare/HCTCompare.tsx +++ b/src/page-components/color-compare/HCTCompare.tsx @@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: HctDiffference = new HctDiffference( - new Differ(0, 0), - new Differ(0, 0), - new Differ(0, 0), -); - export function HCTCompare({ basic = '000000', compare = '000000', mode = 'absolute', }: CompareMethodProps) { const { colorFn } = useColorFunction(); + const defaultCompareResult: HctDiffference = useMemo( + () => new HctDiffference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)), + [], + ); const differ = useMemo(() => { if (!colorFn) { return defaultCompareResult; diff --git a/src/page-components/color-compare/HSLCompare.tsx b/src/page-components/color-compare/HSLCompare.tsx index c5064b3..2aed4b3 100644 --- a/src/page-components/color-compare/HSLCompare.tsx +++ b/src/page-components/color-compare/HSLCompare.tsx @@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: HSLDifference = new HSLDifference( - new Differ(0, 0), - new Differ(0, 0), - new Differ(0, 0), -); - export function HSLCompare({ basic = '000000', compare = '000000', mode = 'absolute', }: CompareMethodProps) { const { colorFn } = useColorFunction(); + const defaultCompareResult: HSLDifference = useMemo( + () => new HSLDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)), + [], + ); const differ = useMemo(() => { if (!colorFn) { return defaultCompareResult; diff --git a/src/page-components/color-compare/OKLCHCompare.tsx b/src/page-components/color-compare/OKLCHCompare.tsx index 1df3ef7..3fa1f0c 100644 --- a/src/page-components/color-compare/OKLCHCompare.tsx +++ b/src/page-components/color-compare/OKLCHCompare.tsx @@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: OklchDifference = new OklchDifference( - new Differ(0, 0), - new Differ(0, 0), - new Differ(0, 0), -); - export function OklchCompare({ basic = '000000', compare = '000000', mode = 'absolute', }: CompareMethodProps) { const { colorFn } = useColorFunction(); + const defaultCompareResult: OklchDifference = useMemo( + () => new OklchDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)), + [], + ); const differ = useMemo(() => { if (!colorFn) { return defaultCompareResult; diff --git a/src/page-components/color-compare/RGBCompare.tsx b/src/page-components/color-compare/RGBCompare.tsx index 628afea..e1dc242 100644 --- a/src/page-components/color-compare/RGBCompare.tsx +++ b/src/page-components/color-compare/RGBCompare.tsx @@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultCompareResult: RGBDifference = new RGBDifference( - new Differ(0, 0), - new Differ(0, 0), - new Differ(0, 0), -); - export function RGBCompare({ basic = '000000', compare = '000000', mode = 'absolute', }: CompareMethodProps) { const { colorFn } = useColorFunction(); + const defaultCompareResult: RGBDifference = useMemo( + () => new RGBDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)), + [], + ); const differ = useMemo(() => { if (!colorFn) { return defaultCompareResult; diff --git a/src/page-components/color-compare/ShadeScale.tsx b/src/page-components/color-compare/ShadeScale.tsx index f3bad1e..1b0dc0d 100644 --- a/src/page-components/color-compare/ShadeScale.tsx +++ b/src/page-components/color-compare/ShadeScale.tsx @@ -5,10 +5,9 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0); - export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) { const { colorFn } = useColorFunction(); + const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []); const mixFactors = useMemo(() => { if (!colorFn) { return defaultMixResult; diff --git a/src/page-components/color-compare/TintScale.tsx b/src/page-components/color-compare/TintScale.tsx index 29e2b84..84d9811 100644 --- a/src/page-components/color-compare/TintScale.tsx +++ b/src/page-components/color-compare/TintScale.tsx @@ -5,10 +5,9 @@ import { useColorFunction } from '../../ColorFunctionContext'; import styles from './CompareLayout.module.css'; import { CompareMethodProps } from './share-props'; -const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0); - export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) { const { colorFn } = useColorFunction(); + const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []); const mixFactors = useMemo(() => { if (!colorFn) { return defaultMixResult;