feat: rewrite color (#98)

Author: luoxiaozero

demo/Cargo.toml

@@ -14,6 +14,7 @@ leptos_devtools = { version = "0.0.1", optional = true}
 thaw = { path = "../thaw" }
 demo_markdown = { path = "../demo_markdown" }
 icondata = "0.3.0"
+palette = "0.7.4"
 
 [features]
 default = ["csr"]

demo_markdown/docs/color_picker/mod.md

@@ -1,16 +1,38 @@
 # Color Picker
 
 ```rust demo
-let value = create_rw_signal(RGBA::default());
+use palette::Srgb;
+
+let value = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0)));
 
 view! {
     <ColorPicker value/>
 }
 ```
 
+### Color Format
+
+Encoding formats, support RGB, HSV, HSL.
+
+```rust demo
+use palette::{Hsl, Hsv, Srgb};
+
+let rgb = create_rw_signal(Color::from(Srgb::new(0.0, 0.0, 0.0)));
+let hsv = create_rw_signal(Color::from(Hsv::new(0.0, 0.0, 0.0)));
+let hsl = create_rw_signal(Color::from(Hsl::new(0.0, 0.0, 0.0)));
+
+view! {
+    <Space vertical=true>
+        <ColorPicker value=rgb/>
+        <ColorPicker value=hsv/>
+        <ColorPicker value=hsl/>
+    </Space>
+}
+```
+
 ### DatePicker Props
 
-| Name  | Type                  | Default              | Desciption                                      |
-| ----- | --------------------- | -------------------- | ----------------------------------------------- |
-| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the color picker element. |
-| value | `RwSignal<RGBA>`      | `Default::default()` | Value of the picker.                            |
+| Name  | Type                                | Default              | Desciption                                      |
+| ----- | ----------------------------------- | -------------------- | ----------------------------------------------- |
+| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the color picker element. |
+| value | `Model<Color>`                      | `Default::default()` | Value of the picker.                            |

thaw/Cargo.toml

@@ -27,6 +27,7 @@ icondata_ai = "0.0.10"
 uuid = { version = "1.7.0", features = ["v4"] }
 cfg-if = "1.0.0"
 chrono = "0.4.33"
+palette = "0.7.4"
 
 [features]
 csr = ["leptos/csr"]

thaw/src/color_picker/color.rs

@@ -1,160 +1,32 @@
+use palette::{Hsl, Hsv, Srgb};
+
 #[derive(Clone)]
-pub struct RGBA {
-    pub red: u8,
-    pub green: u8,
-    pub blue: u8,
-    pub alpha: u8,
+pub enum Color {
+    RGB(Srgb),
+    HSV(Hsv),
+    HSL(Hsl),
 }
 
-impl Default for RGBA {
+impl Default for Color {
     fn default() -> Self {
-        Self {
-            red: Default::default(),
-            green: Default::default(),
-            blue: Default::default(),
-            alpha: u8::MAX,
-        }
+        Self::RGB(Srgb::new(0.0, 0.0, 0.0))
     }
 }
 
-impl RGBA {
-    pub fn new(r: u8, g: u8, b: u8, a: u8) -> Self {
-        Self {
-            red: r,
-            green: g,
-            blue: b,
-            alpha: a,
-        }
-    }
-
-    pub fn new_rgb(r: u8, g: u8, b: u8) -> Self {
-        Self {
-            red: r,
-            green: g,
-            blue: b,
-            alpha: u8::MAX,
-        }
-    }
-
-    pub fn to_hex_string(&self) -> String {
-        if self.alpha == u8::MAX {
-            format!("#{:02X}{:02X}{:02X}", self.red, self.green, self.blue)
-        } else {
-            format!(
-                "#{:02X}{:02X}{:02X}{:02X}",
-                self.red, self.green, self.blue, self.alpha
-            )
-        }
+impl From<Srgb> for Color {
+    fn from(value: Srgb) -> Self {
+        Self::RGB(value)
     }
 }
 
-impl From<HSV> for RGBA {
-    fn from(value: HSV) -> Self {
-        let HSV {
-            hue: h,
-            saturation: s,
-            value: v,
-            alpha,
-        } = value;
-        let h = f64::from(h);
-
-        let c = v * s;
-        let x = c * (1.0 - f64::abs(((h / 60.0) % 2.0) - 1.0));
-        let m = v - c;
-
-        let (r, g, b) = if (0.0..60.0).contains(&h) {
-            (c, x, 0.0)
-        } else if (60.0..120.0).contains(&h) {
-            (x, c, 0.0)
-        } else if (120.0..180.0).contains(&h) {
-            (0.0, c, x)
-        } else if (180.0..240.0).contains(&h) {
-            (0.0, x, c)
-        } else if (240.0..300.0).contains(&h) {
-            (x, 0.0, c)
-        } else if (300.0..360.0).contains(&h) {
-            (c, 0.0, x)
-        } else {
-            (c, x, 0.0)
-        };
-
-        let (r, g, b) = (
-            ((r + m) * 255.0) as u8,
-            ((g + m) * 255.0) as u8,
-            ((b + m) * 255.0) as u8,
-        );
-
-        RGBA::new(r, g, b, alpha)
+impl From<Hsv> for Color {
+    fn from(value: Hsv) -> Self {
+        Self::HSV(value)
     }
 }
 
-#[derive(Clone)]
-pub struct HSV {
-    pub hue: u16,
-    pub saturation: f64,
-    pub value: f64,
-    pub alpha: u8,
-}
-
-impl HSV {
-    pub fn new(hue: u16, saturation: f64, value: f64) -> Self {
-        Self {
-            hue,
-            saturation,
-            value,
-            alpha: u8::MAX,
-        }
-    }
-
-    pub fn new_alpha(hue: u16, saturation: f64, value: f64, alpha: u8) -> Self {
-        Self {
-            hue,
-            saturation,
-            value,
-            alpha,
-        }
-    }
-}
-
-impl From<RGBA> for HSV {
-    fn from(value: RGBA) -> Self {
-        let RGBA {
-            red: r,
-            green: g,
-            blue: b,
-            alpha,
-        } = value;
-
-        let (r, g, b) = (r as f64 / 255.0, g as f64 / 255.0, b as f64 / 255.0);
-
-        let c_max = f64::max(r, f64::max(g, b));
-        let c_min = f64::min(r, f64::min(g, b));
-        let delta = c_max - c_min;
-
-        let hue = if delta == 0.0 {
-            0.0
-        } else if c_max == r {
-            60.0 * (((g - b) / delta) % 6.0)
-        } else if c_max == g {
-            60.0 * (((b - r) / delta) + 2.0)
-        } else if c_max == b {
-            60.0 * (((r - g) / delta) + 4.0)
-        } else {
-            unreachable!()
-        };
-
-        let saturation = match c_max == 0.0 {
-            true => 0.0,
-            false => delta / c_max,
-        };
-
-        let value = c_max;
-
-        HSV {
-            hue: hue.to_string().parse().unwrap(),
-            saturation,
-            value,
-            alpha,
-        }
+impl From<Hsl> for Color {
+    fn from(value: Hsl) -> Self {
+        Self::HSL(value)
     }
 }