ui/
ui.rs

1use glam::dvec2;
2use vert::{
3    elements::{Color, Rect, Transform},
4    modules::{
5        batteries::{FlyCam, GraphicsSettingsController},
6        renderer::main_pass_renderer::ui_rect::UiRect,
7        ui::{
8            font_cache::FontSize, Align, Axis, Board, BoardInput, BorderRadius, Button, Len,
9            MainAlign, Text,
10        },
11        DefaultDependencies, DefaultModules, Schedule,
12    },
13    utils::Timing,
14    AppBuilder, Module,
15};
16
17fn main() {
18    let mut app = AppBuilder::new();
19    app.add_plugin(DefaultModules);
20    app.add::<FlyCam>();
21    app.add::<GraphicsSettingsController>();
22    app.add::<MyApp>();
23    app.run().unwrap();
24}
25
26struct MyApp {
27    deps: DefaultDependencies,
28    ui: Board,
29}
30
31impl Module for MyApp {
32    type Config = ();
33
34    type Dependencies = DefaultDependencies;
35
36    fn new(_config: Self::Config, mut deps: Self::Dependencies) -> anyhow::Result<Self> {
37        deps.bloom.settings_mut().activated = false;
38        deps.ui
39            .ui_renderer
40            .watch_shader_file("./src/modules/ui/ui.wgsl");
41
42        Ok(MyApp {
43            deps,
44            ui: Board::new(dvec2(800.0, 800.0)),
45        })
46    }
47
48    fn intialize(handle: vert::Handle<Self>) -> anyhow::Result<()> {
49        let scheduler = handle.deps.scheduler.get_mut();
50        scheduler.register(handle, Schedule::Update, Timing::DEFAULT, Self::update);
51
52        Ok(())
53    }
54}
55
56impl MyApp {
57    fn update(&mut self) {
58        self.deps.gizmos.draw_xyz();
59        self.deps
60            .color_mesh
61            .draw_cubes(&[Transform::new(1.0, 1.0, 1.0)], None);
62
63        let size = self.deps.ctx.size;
64        self.ui.start_frame(
65            BoardInput::from_input_module(&self.deps.input),
66            dvec2(size.width as f64, size.height as f64),
67        );
68
69        self.deps.world_rects.draw_textured_rect(
70            UiRect {
71                pos: Rect::new(0.0, 0.0, 1024.0, 1024.0),
72                uv: Rect::UNIT,
73                color: Color::WHITE,
74                border_radius: Default::default(),
75            },
76            Transform::default(),
77            self.deps.ui.fonts.atlas_texture(),
78        );
79
80        let mut parent = self.ui.add_div("Parent", None);
81
82        parent.width(Len::PARENT);
83        parent.axis = Axis::X;
84        parent.main_align = MainAlign::SpaceBetween;
85        parent.cross_align = Align::Center;
86        parent.color = Color::RED.alpha(0.2);
87
88        let parent = Some(parent.id);
89
90        // let text = self.ui.add_text_div(
91        //     DivProps::default(),
92        //     DivStyle::default(),
93        //     Text {
94        //         color: Color::WHITE,
95        //         string: "This is all the text that we need".into(),
96        //         font: None,
97        //         size: FontSize(80),
98        //         offset_x: Len::ZERO,
99        //         offset_y: Len::ZERO,
100        //     },
101        //     "sasass",
102        //     Some(parent),
103        // );
104
105        // let text2 = self.ui.add_text_div(
106        //     DivProps::default(),
107        //     DivStyle::default(),
108        //     Text {
109        //         color: Color::RED,
110        //         string: "This is some other text".into(),
111        //         font: None,
112        //         size: FontSize(20),
113        //         offset_x: Len::ZERO,
114        //         offset_y: Len::ZERO,
115        //     },
116        //     "asdsadsadsasdsad",
117        //     Some(parent),
118        // );
119
120        let mut purp_parent = self.ui.add_div("Purple Parent", parent);
121        purp_parent.width(Len::px(100.0));
122        purp_parent.height(Len::px(200.0));
123        purp_parent.axis = Axis::Y;
124        purp_parent.main_align = MainAlign::Center;
125        purp_parent.cross_align = Align::Center;
126        purp_parent.color = Color::PURPLE.alpha(0.5);
127        purp_parent.border_radius = BorderRadius::all(20.0);
128        purp_parent.border_color = Color::GREEN;
129        purp_parent.border_thickness = 6.0;
130        purp_parent.border_softness = 1.0;
131        let purp_parent = Some(purp_parent.id);
132
133        let mut c1 = self.ui.add_div("child 1 in purple", purp_parent);
134        c1.width(Len::px(50.0));
135        c1.height(Len::px(50.0));
136        c1.main_align = MainAlign::Center;
137        c1.cross_align = Align::Center;
138        c1.color = Color::GREEN;
139
140        let mut c2 = self.ui.add_div("child 2 in purple", purp_parent);
141        c2.width(Len::px(70.0));
142        c2.height(Len::px(30.0));
143        c2.main_align = MainAlign::Center;
144        c2.cross_align = Align::Center;
145        c2.color = Color::WHITE;
146
147        let mut other = self.ui.add_div("other", parent);
148        other.width(Len::px(100.0));
149        other.height(Len::px(20.0));
150        other.color = Color::BLACK;
151
152        let mut text_div = self.ui.add_text_div(
153            Text {
154                color: Color::new(6.0, 2.0, 2.0),
155                string: "Hover me please, I will show you something!".into(),
156                size: FontSize(48),
157                offset_x: Len::px(30.0),
158                offset_y: Len::px(30.0),
159                ..Default::default()
160            },
161            "text div",
162            parent,
163        );
164
165        text_div.width(Len::px(300.0));
166        text_div.height(Len::px(400.0));
167
168        text_div.color = Color::YELLOW;
169        text_div.border_radius = BorderRadius::all(20.0);
170        text_div.border_thickness = 20.0;
171
172        // can immediately edit the style and text without a 1-frame lag:
173        // 1 frame lag only applies to the layout rect (DivProps) itself.
174        if text_div.mouse_in_rect() {
175            let style = text_div.style();
176            style.color = Color::BLUE;
177            style.border_color = Color::GREEN;
178            style.border_thickness = 6.0;
179            // style.border_radius = BorderRadius::new(40.0, 40.0, 40.0, 40.0);
180            text_div.text().color = Color::BLACK;
181        }
182
183        let total_time = self.deps.time.total().as_secs_f64() * 4.0;
184        let total_time2 = self.deps.time.total().as_secs_f64() * 9.7;
185        if text_div.mouse_in_rect() {
186            let mut green_square = self.ui.add_div(2112213232, parent);
187
188            green_square.width(Len::px(40.0));
189            green_square.height(Len::px(40.0));
190            green_square.color = Color::GREEN;
191            green_square.offset_x = Len::px(total_time.sin() * 20.0);
192            green_square.offset_y = Len::px(total_time2.cos() * 20.0);
193        }
194
195        let mut container2 = self.ui.add_div("Container 2", parent);
196        container2.height(Len::PARENT);
197        container2.main_align = MainAlign::SpaceAround;
198        container2.cross_align = Align::Center;
199
200        let container2 = Some(container2.id);
201
202        {
203            let clicked = self
204                .ui
205                .add(
206                    Button {
207                        text: "Click".into(),
208                        ..Default::default()
209                    },
210                    "my button",
211                    container2,
212                )
213                .clicked;
214            if clicked {
215                println!("Hello 1");
216            }
217        }
218        {
219            let clicked = self
220                .ui
221                .add(
222                    Button {
223                        text: "Button 2".into(),
224                        ..Default::default()
225                    },
226                    "my button 2",
227                    container2,
228                )
229                .clicked;
230            if clicked {
231                println!("Hello 2");
232            }
233        }
234        {
235            let clicked = self
236                .ui
237                .add(
238                    Button {
239                        text: "Button 3".into(),
240                        ..Default::default()
241                    },
242                    "my button 3",
243                    container2,
244                )
245                .clicked;
246            if clicked {
247                println!("Hello 3");
248            }
249        }
250
251        // let mut ctx = self.deps.egui.context();
252        // egui_inspect_board(&mut ctx, &mut self.ui);
253
254        self.ui.end_frame(&mut self.deps.ui.fonts);
255        self.deps.ui.ui_renderer.draw_ui_board(&self.ui);
256        // std::thread::sleep(Duration::from_millis(150));
257    }
258}
ui/ui.rs

ui/
ui.rs
