| 621 | #[tracing::instrument(level = "debug", skip(sat, set_sat, value, set_value, hue))] |
| 622 | #[component] |
| 623 | pub fn SatValueSurface<S, V>( |
| 624 | #[prop(into)] sat: Signal<f32>, |
| 625 | set_sat: S, |
| 626 | #[prop(into)] value: Signal<f32>, |
| 627 | set_value: V, |
| 628 | #[prop(into)] hue: Signal<f32>, |
| 629 | ) -> impl IntoView |
| 630 | where |
| 631 | S: Fn(f32) + Copy + 'static, |
| 632 | V: Fn(f32) + Copy + 'static, |
| 633 | { |
| 634 | let (dragging, set_dragging) = signal(false); |
| 635 | |
| 636 | let custom_properties = move || { |
| 637 | format!( |
| 638 | "--cursor-x: {}; --cursor-y: {}; --current-hue: {};", |
| 639 | sat.get(), |
| 640 | 1. - value.get(), |
| 641 | hue.get(), |
| 642 | ) |
| 643 | }; |
| 644 | |
| 645 | let surface_ref = NodeRef::<Div>::new(); |
| 646 | |
| 647 | let on_pointer_move_color = move |ev: &PointerEvent| { |
| 648 | let Some(surface_element) = surface_ref.get_untracked() else { |
| 649 | log! {"Couldn't find element '.color-picker__color'!"}; |
| 650 | return; |
| 651 | }; |
| 652 | |
| 653 | let bounds = surface_element.get_bounding_client_rect(); |
| 654 | let element_x = bounds.left() as f32; |
| 655 | let element_y = bounds.top() as f32; |
| 656 | |
| 657 | let width = surface_element.offset_width() as f32; |
| 658 | let height = surface_element.offset_height() as f32; |
| 659 | let global_x = ev.client_x() as f32; |
| 660 | let global_y = ev.client_y() as f32; |
| 661 | let x = ((global_x - element_x) / width).clamp(0., 1.); |
| 662 | let y = ((global_y - element_y) / height).clamp(0., 1.); |
| 663 | |
| 664 | set_sat(x); |
| 665 | set_value(1. - y); |
| 666 | }; |
| 667 | |
| 668 | let on_pointer_move = move |ev: PointerEvent| { |
| 669 | if dragging.get_untracked() { |
| 670 | on_pointer_move_color(&ev); |
| 671 | } |
| 672 | }; |
| 673 | // let on_pointer_move_color_closure = |
| 674 | // wrap_closure_as_event_listener(on_pointer_move_color); |
| 675 | |
| 676 | let on_pointer_down = move |ev: PointerEvent| { |
| 677 | set_dragging.set(true); |
| 678 | on_pointer_move(ev); |
| 679 | }; |
| 680 | |