tawasuyu/llimphi

1//! Showcase de `llimphi-widget-slider`: tres sliders sobre un Model que
2//! acumula deltas en vivo. Corre con:
3//!
4//! ```text
5//! cargo run -p llimphi-widget-slider --example slider_demo
6//! ```
7
8use llimphi_theme::Theme;
9use llimphi_ui::llimphi_layout::taffy::{
10    prelude::{length, percent, FlexDirection, Size, Style},
11    AlignItems, Rect,
12};
13use llimphi_ui::llimphi_text::Alignment;
14use llimphi_ui::{App, DragPhase, Handle, View};
15use llimphi_widget_slider::{slider_view, SliderPalette};
16
17#[derive(Clone, Debug)]
18enum Msg {
19    EditPsique(f32),
20    EditMateria(f32),
21    EditPoder(f32),
22}
23
24struct Model {
25    psique: f32,
26    materia: f32,
27    poder: f32,
28}
29
30struct Demo;
31
32impl App for Demo {
33    type Model = Model;
34    type Msg = Msg;
35
36    fn title() -> &'static str {
37        "llimphi · slider demo"
38    }
39
40    fn initial_size() -> (u32, u32) {
41        (520, 280)
42    }
43
44    fn init(_: &Handle<Msg>) -> Model {
45        Model { psique: 0.0, materia: 0.5, poder: -0.25 }
46    }
47
48    fn update(model: Model, msg: Msg, _: &Handle<Msg>) -> Model {
49        let mut m = model;
50        match msg {
51            Msg::EditPsique(dv) => m.psique = (m.psique + dv).clamp(-1.0, 1.0),
52            Msg::EditMateria(dv) => m.materia = (m.materia + dv).clamp(-1.0, 1.0),
53            Msg::EditPoder(dv) => m.poder = (m.poder + dv).clamp(-1.0, 1.0),
54        }
55        m
56    }
57
58    fn view(model: &Model) -> View<Msg> {
59        let theme = Theme::dark();
60        let palette = SliderPalette::from_theme(&theme);
61
62        let header = View::new(Style {
63            size: Size { width: percent(1.0_f32), height: length(28.0_f32) },
64            ..Default::default()
65        })
66        .text_aligned(
67            "ajusta los sliders — el Model acumula deltas en vivo".to_string(),
68            13.0,
69            theme.fg_text,
70            Alignment::Start,
71        );
72
73        let psique = slider_view(
74            "psique",
75            model.psique,
76            -1.0,
77            1.0,
78            &palette,
79            |phase, dv| match phase {
80                DragPhase::Move => Some(Msg::EditPsique(dv)),
81                DragPhase::End => None,
82            },
83        );
84        let materia = slider_view(
85            "materia",
86            model.materia,
87            -1.0,
88            1.0,
89            &palette,
90            |phase, dv| match phase {
91                DragPhase::Move => Some(Msg::EditMateria(dv)),
92                DragPhase::End => None,
93            },
94        );
95        let poder = slider_view(
96            "poder",
97            model.poder,
98            -1.0,
99            1.0,
100            &palette,
101            |phase, dv| match phase {
102                DragPhase::Move => Some(Msg::EditPoder(dv)),
103                DragPhase::End => None,
104            },
105        );
106
107        View::new(Style {
108            flex_direction: FlexDirection::Column,
109            size: Size { width: percent(1.0_f32), height: percent(1.0_f32) },
110            padding: Rect {
111                left: length(20.0_f32),
112                right: length(20.0_f32),
113                top: length(16.0_f32),
114                bottom: length(16.0_f32),
115            },
116            gap: Size {
117                width: length(0.0_f32),
118                height: length(8.0_f32),
119            },
120            align_items: Some(AlignItems::STRETCH),
121            ..Default::default()
122        })
123        .fill(theme.bg_app)
124        .children(vec![header, psique, materia, poder])
125    }
126}
127
128fn main() {
129    llimphi_ui::run::<Demo>();
130}