kael_ui 0.2.0

Professional shadcn-inspired UI component library for Kael. 100+ accessible components for building beautiful, performant desktop applications.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

//! Button whose position subtly shifts toward cursor when nearby.

use kael::{prelude::FluentBuilder as _, *};

pub struct MagneticButtonState {
    mouse_offset: Point<f32>,
    is_hovering: bool,
}

impl MagneticButtonState {
    pub fn new(_cx: &mut Context<Self>) -> Self {
        Self {
            mouse_offset: Point::default(),
            is_hovering: false,
        }
    }
}

impl Render for MagneticButtonState {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        Empty
    }
}

#[derive(IntoElement)]
pub struct MagneticButton {
    id: ElementId,
    state: Entity<MagneticButtonState>,
    strength: f32,
    #[allow(dead_code)]
    range: Pixels,
    style: StyleRefinement,
    children: Vec<AnyElement>,
}

impl MagneticButton {
    pub fn new(id: impl Into<ElementId>, state: Entity<MagneticButtonState>) -> Self {
        Self {
            id: id.into(),
            state,
            strength: 0.3,
            range: px(100.0),
            style: StyleRefinement::default(),
            children: Vec::new(),
        }
    }

    pub fn strength(mut self, strength: f32) -> Self {
        self.strength = strength.clamp(0.0, 1.0);
        self
    }

    pub fn range(mut self, range: Pixels) -> Self {
        self.range = range;
        self
    }
}

impl Styled for MagneticButton {
    fn style(&mut self) -> &mut StyleRefinement {
        &mut self.style
    }
}

impl ParentElement for MagneticButton {
    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
        self.children.extend(elements);
    }
}

impl RenderOnce for MagneticButton {
    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
        let user_style = self.style;
        let state = self.state.read(cx);
        let strength = self.strength;

        let (final_x, final_y) = if state.is_hovering {
            (
                state.mouse_offset.x * strength * 20.0,
                state.mouse_offset.y * strength * 20.0,
            )
        } else {
            (0.0, 0.0)
        };

        let state_move = self.state.clone();
        let state_hover = self.state.clone();

        div()
            .id(self.id)
            .relative()
            .cursor_pointer()
            .child(
                div()
                    .ml(px(final_x))
                    .mt(px(final_y))
                    .children(self.children),
            )
            .on_mouse_move(move |event: &MouseMoveEvent, _window, cx| {
                state_move.update(cx, |s, cx| {
                    s.mouse_offset.x = event.position.x / px(1.0);
                    s.mouse_offset.y = event.position.y / px(1.0);
                    cx.notify();
                });
            })
            .on_hover(move |hovered: &bool, _window, cx| {
                state_hover.update(cx, |s, cx| {
                    s.is_hovering = *hovered;
                    if !*hovered {
                        s.mouse_offset = Point::default();
                    }
                    cx.notify();
                });
            })
            .map(|this: Stateful<Div>| {
                let mut el = this;
                el.style().refine(&user_style);
                el
            })
    }
}