From 6aba40b94db85e18323978c533e2adf6ca0d8b07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Tue, 31 Dec 2024 13:10:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90HSL=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E5=90=88=E6=88=90=E9=80=89=E6=8B=A9=E5=99=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/HslAssemble.module.css |  0
 src/components/HslAsssemble.tsx       | 73 +++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 src/components/HslAssemble.module.css
 create mode 100644 src/components/HslAsssemble.tsx

diff --git a/src/components/HslAssemble.module.css b/src/components/HslAssemble.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/HslAsssemble.tsx b/src/components/HslAsssemble.tsx
new file mode 100644
index 0000000..8e35f7b
--- /dev/null
+++ b/src/components/HslAsssemble.tsx
@@ -0,0 +1,73 @@
+import { floor } from 'lodash-es';
+import { useEffect, useMemo, useState } from 'react';
+import { useColorFunction } from '../ColorFunctionContext';
+import { ColorRangePicker } from './ColorRangePicker';
+
+type HslAssembleProps = {
+  color: string;
+  onChange: (color: string) => void;
+};
+
+export function HslAssemble({ color, onChange }: HslAssembleProps) {
+  const { colorFn } = useColorFunction();
+  const colorComponent = useMemo(() => {
+    try {
+      const [h, s, l] = colorFn?.represent_hsl(color) ?? [0, 0, 0];
+      return [h, s, l];
+    } catch (error) {
+      console.error('[Convert HSL]', error);
+    }
+    return [0, 0, 0];
+  }, [color]);
+  const [h, setH] = useState(0);
+  const [s, setS] = useState(0);
+  const [l, setL] = useState(0);
+
+  useEffect(() => {
+    try {
+      const newColor = colorFn?.hsl_to_hex(h, s / 100, l / 100) ?? '000000';
+      onChange(newColor);
+    } catch (error) {
+      console.error('[Convert RGB]', error);
+    }
+  }, [h, s, l]);
+  useEffect(() => {
+    setH(colorComponent[0]);
+    setS(colorComponent[1] * 100);
+    setL(colorComponent[2] * 100);
+  }, []);
+
+  return (
+    <div>
+      <ColorRangePicker
+        title="Hue"
+        value={h}
+        onChange={setH}
+        gradient={`linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(360, 100%, 50%))`}
+        max={360}
+        step={0.1}
+        valueProcess={(v) => floor(v, 2)}
+      />
+      <ColorRangePicker
+        title="Saturation"
+        value={s}
+        unit="%"
+        onChange={setS}
+        gradient={`linear-gradient(to right, hsl(${h}, 0%, 50%), hsl(${h}, 100%, 50%))`}
+        max={100}
+        step={0.01}
+        valueProcess={(v) => floor(v, 2)}
+      />
+      <ColorRangePicker
+        title="Lightness"
+        value={l}
+        unit="%"
+        onChange={setL}
+        gradient={`linear-gradient(to right, hsl(${h}, ${s}%, 0%), hsl(${h}, ${s}%, 50%), hsl(${h}, ${s}%, 100%))`}
+        max={100}
+        step={0.01}
+        valueProcess={(v) => floor(v, 2)}
+      />
+    </div>
+  );
+}