egui-cha-ds 0.6.0

Design System for egui-cha (Atoms, Molecules, Theme)
Documentation 
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
122
123

//! Toggle/Switch atom

use egui::{Color32, Response, Sense, Ui, Vec2};
use egui_cha::ViewCtx;

/// A toggle switch component
pub struct Toggle<'a> {
    label: Option<&'a str>,
    disabled: bool,
}

impl<'a> Toggle<'a> {
    pub fn new() -> Self {
        Self {
            label: None,
            disabled: false,
        }
    }

    pub fn with_label(label: &'a str) -> Self {
        Self {
            label: Some(label),
            disabled: false,
        }
    }

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

    /// TEA-style: Show toggle with immutable value, emit Msg on toggle
    pub fn show_with<Msg>(
        self,
        ctx: &mut ViewCtx<'_, Msg>,
        on: bool,
        on_toggle: impl FnOnce(bool) -> Msg,
    ) {
        let response = self.render(ctx.ui, on);
        if response.clicked() && !self.disabled {
            ctx.emit(on_toggle(!on));
        }
    }

    /// Simple: emit msg when toggled
    pub fn on_toggle<Msg>(self, ctx: &mut ViewCtx<'_, Msg>, on: bool, msg: Msg)
    where
        Msg: Clone,
    {
        self.show_with(ctx, on, |_| msg);
    }

    /// Show toggle (returns true if clicked)
    pub fn show(self, ui: &mut Ui, on: &mut bool) -> bool {
        let response = self.render(ui, *on);
        if response.clicked() && !self.disabled {
            *on = !*on;
            true
        } else {
            false
        }
    }

    fn render(&self, ui: &mut Ui, on: bool) -> Response {
        let is_dark = ui.ctx().style().visuals.dark_mode;

        ui.horizontal(|ui| {
            // Draw toggle switch
            let desired_size = Vec2::new(40.0, 20.0);
            let (rect, response) = ui.allocate_exact_size(desired_size, Sense::click());

            if ui.is_rect_visible(rect) {
                let painter = ui.painter();

                // Background
                let bg_color = if on {
                    if is_dark {
                        Color32::from_rgb(96, 165, 250) // primary
                    } else {
                        Color32::from_rgb(59, 130, 246)
                    }
                } else if is_dark {
                    Color32::from_rgb(55, 65, 81)
                } else {
                    Color32::from_rgb(209, 213, 219)
                };

                let bg_color = if self.disabled {
                    bg_color.gamma_multiply(0.5)
                } else {
                    bg_color
                };

                painter.rect_filled(rect, rect.height() / 2.0, bg_color);

                // Knob
                let knob_radius = rect.height() / 2.0 - 2.0;
                let knob_x = if on {
                    rect.right() - knob_radius - 2.0
                } else {
                    rect.left() + knob_radius + 2.0
                };
                let knob_pos = egui::pos2(knob_x, rect.center().y);
                let knob_color = Color32::WHITE;
                painter.circle_filled(knob_pos, knob_radius, knob_color);
            }

            // Label
            if let Some(label) = self.label {
                ui.label(label);
            }

            response
        })
        .inner
    }
}

impl<'a> Default for Toggle<'a> {
    fn default() -> Self {
        Self::new()
    }
}