impulse_thaw/color_picker/
mod.rs

1mod color;
2mod types;
3
4pub use color::*;
5pub use types::*;
6
7use leptos::leptos_dom::helpers::WindowListenerHandle;
8use leptos::{ev, html, prelude::*};
9use palette::{Hsv, IntoColor, Srgb};
10use thaw_components::{Follower, FollowerPlacement};
11use thaw_utils::{class_list, mount_style, Model};
12
13#[component]
14pub fn ColorPicker(
15    #[prop(optional, into)] class: MaybeProp<String>,
16    /// Value of the picker.
17    #[prop(optional, into)]
18    value: Model<Color>,
19    /// Size of the picker.
20    #[prop(optional, into)]
21    size: Signal<ColorPickerSize>,
22) -> impl IntoView {
23    mount_style("color-picker", include_str!("./color-picker.css"));
24    let hue = RwSignal::new(0f32);
25    let sv = RwSignal::new((0f32, 0f32));
26    let label = RwSignal::new(String::new());
27    let style = Memo::new(move |_| {
28        let mut style = String::new();
29
30        value.with(|color| {
31            let (s, v) = sv.get_untracked();
32            if s < 0.5 && v > 0.5 {
33                style.push_str("color: #000;");
34            } else {
35                style.push_str("color: #fff;");
36            }
37            match color {
38                Color::RGB(rgb) => {
39                    let rgb = Srgb::<u8>::from_format(rgb.clone());
40                    let color = format!("rgb({}, {}, {})", rgb.red, rgb.green, rgb.blue);
41                    style.push_str(&format!("background-color: {color};"));
42                    label.set(color);
43                }
44                Color::HSV(hsv) => {
45                    let rgb: Srgb = hsv.clone().into_color();
46                    let rgb = Srgb::<u8>::from_format(rgb);
47                    let color = format!("rgb({}, {}, {})", rgb.red, rgb.green, rgb.blue);
48                    style.push_str(&format!("background-color: {color};"));
49
50                    let color = format!(
51                        "hsv({}, {:.0}%, {:.0}%)",
52                        hsv.hue.into_inner(),
53                        hsv.saturation * 100.0,
54                        hsv.value * 100.0
55                    );
56                    label.set(color);
57                }
58                Color::HSL(hsl) => {
59                    let color = format!(
60                        "hsl({}, {:.0}%, {:.0}%)",
61                        hsl.hue.into_inner(),
62                        hsl.saturation * 100.0,
63                        hsl.lightness * 100.0
64                    );
65                    style.push_str(&format!("background-color: {color};"));
66                    label.set(color);
67                }
68            }
69        });
70
71        style
72    });
73
74    Effect::new(move |prev: Option<()>| {
75        let (s, v) = sv.get();
76        let hue_value = hue.get();
77        if prev.is_none() {
78            let hsv = match value.get_untracked() {
79                Color::RGB(rgb) => rgb.into_color(),
80                Color::HSV(hsv) => hsv,
81                Color::HSL(hsl) => hsl.into_color(),
82            };
83            let Hsv {
84                hue: h,
85                saturation: s,
86                value: v,
87                ..
88            } = hsv;
89            hue.set(h.into_inner());
90            sv.set((s.into(), v.into()))
91        } else {
92            value.update(|color| {
93                let new_hsv: Hsv = Hsv::new(hue_value, s, v);
94                match color {
95                    Color::RGB(rgb) => *rgb = new_hsv.into_color(),
96                    Color::HSV(hsv) => *hsv = new_hsv,
97                    Color::HSL(hsl) => *hsl = new_hsv.into_color(),
98                }
99            });
100        }
101    });
102
103    let is_show_popover = RwSignal::new(false);
104    let trigger_ref = NodeRef::<html::Div>::new();
105    let popover_ref = NodeRef::<html::Div>::new();
106    let show_popover = move |_| {
107        is_show_popover.set(true);
108    };
109
110    #[cfg(any(feature = "csr", feature = "hydrate"))]
111    {
112        use leptos::wasm_bindgen::__rt::IntoJsResult;
113        let timer = window_event_listener(ev::click, move |ev| {
114            let Some(popovel_el) = popover_ref.get_untracked() else {
115                return;
116            };
117            let Some(trigger_el) = trigger_ref.get_untracked() else {
118                return;
119            };
120            let el = ev.target();
121            let mut el: Option<web_sys::Element> =
122                el.into_js_result().map_or(None, |el| Some(el.into()));
123            let body = document().body().unwrap();
124            while let Some(current_el) = el {
125                if current_el == *body {
126                    break;
127                };
128                if current_el == **popovel_el || current_el == **trigger_el {
129                    return;
130                }
131                el = current_el.parent_element();
132            }
133            is_show_popover.set(false);
134        });
135        on_cleanup(move || timer.remove());
136    }
137
138    view! {
139        <crate::_binder::Binder>
140            <div
141                class=class_list![
142                    "thaw-color-picker-trigger",
143                    move || format!("thaw-color-picker-trigger--{}", size.get().as_str()),
144                    class
145                ]
146                on:click=show_popover
147                node_ref=trigger_ref
148            >
149                <div class="thaw-color-picker-trigger__content" style=move || style.get()>
150                    {move || label.get()}
151                </div>
152            </div>
153            <Follower slot show=is_show_popover placement=FollowerPlacement::BottomStart>
154                <div class="thaw-color-picker-popover" node_ref=popover_ref>
155
156                    <ColorPanel hue=hue.read_only() sv />
157                    <HueSlider hue />
158                </div>
159            </Follower>
160        </crate::_binder::Binder>
161    }
162}
163
164#[component]
165fn ColorPanel(hue: ReadSignal<f32>, sv: RwSignal<(f32, f32)>) -> impl IntoView {
166    let panel_ref = NodeRef::<html::Div>::new();
167    let mouse = StoredValue::new(Vec::<WindowListenerHandle>::new());
168
169    let on_mouse_down = move |ev| {
170        let cb = move |ev: ev::MouseEvent| {
171            if let Some(panel) = panel_ref.get_untracked() {
172                let rect = panel.get_bounding_client_rect();
173                let ev_x = f64::from(ev.x());
174                let ev_y = f64::from(ev.y());
175
176                let v = (rect.bottom() - ev_y) / rect.height();
177                let s = (ev_x - rect.left()) / rect.width();
178
179                let v = if v > 1.0 {
180                    1.0
181                } else if v < 0.0 {
182                    0.0
183                } else {
184                    format!("{:.2}", v).parse::<f32>().unwrap()
185                };
186                let s = if s > 1.0 {
187                    1.0
188                } else if s < 0.0 {
189                    0.0
190                } else {
191                    format!("{:.2}", s).parse::<f32>().unwrap()
192                };
193
194                sv.set((s, v))
195            }
196        };
197        cb(ev);
198        let on_mouse_move = window_event_listener(ev::mousemove, cb);
199        let on_mouse_up = window_event_listener(ev::mouseup, move |_| {
200            mouse.update_value(|value| {
201                for handle in value.drain(..) {
202                    handle.remove();
203                }
204            });
205        });
206        mouse.update_value(|value| {
207            value.push(on_mouse_move);
208            value.push(on_mouse_up);
209        });
210    };
211
212    view! {
213        <div class="thaw-color-picker-popover__panel" node_ref=panel_ref on:mousedown=on_mouse_down>
214            <div
215                class="thaw-color-picker-popover__layer"
216                style:background-image=move || {
217                    format!("linear-gradient(90deg, white, hsl({}, 100%, 50%))", hue.get())
218                }
219            ></div>
220            <div class="thaw-color-picker-popover__layer--shadowed"></div>
221            <div
222                class="thaw-color-picker-popover__handle"
223                style=move || {
224                    format!(
225                        "left: calc({}% - 6px); bottom: calc({}% - 6px)",
226                        sv.get().0 * 100.0,
227                        sv.get().1 * 100.0,
228                    )
229                }
230            ></div>
231        </div>
232    }
233}
234
235#[component]
236fn HueSlider(hue: RwSignal<f32>) -> impl IntoView {
237    let rail_ref = NodeRef::<html::Div>::new();
238    let mouse = StoredValue::new(Vec::<WindowListenerHandle>::new());
239
240    let on_mouse_down = move |ev| {
241        let cb = move |ev: ev::MouseEvent| {
242            if let Some(rail) = rail_ref.get_untracked() {
243                let rect = rail.get_bounding_client_rect();
244                let ev_x = f64::from(ev.x());
245                let value = (ev_x - rect.left() - 6.0) / (rect.width() - 12.0) * 359.0;
246                let value = if value < 0.0 {
247                    0.0
248                } else if value > 359.0 {
249                    359.0
250                } else {
251                    value.round().to_string().parse::<f32>().unwrap()
252                };
253                hue.set(value);
254            }
255        };
256        cb(ev);
257
258        let on_mouse_move = window_event_listener(ev::mousemove, cb);
259        let on_mouse_up = window_event_listener(ev::mouseup, move |_| {
260            mouse.update_value(|value| {
261                for handle in value.drain(..) {
262                    handle.remove();
263                }
264            });
265        });
266        mouse.update_value(|value| {
267            value.push(on_mouse_move);
268            value.push(on_mouse_up);
269        });
270    };
271    view! {
272        <div class="thaw-color-picker-slider" node_ref=rail_ref on:mousedown=on_mouse_down>
273            <div
274                class="thaw-color-picker-slider__handle"
275                style=move || format!("left: calc({}% - 6px)", f32::from(hue.get()) / 359.0 * 100.0)
276            ></div>
277        </div>
278    }
279}
impulse_thaw/color_picker/mod.rs

impulse_thaw/color_picker/
mod.rs
