Fix left alignment of widgets and tweak style slightly

emigui/src/collapsing_header.rs

@@ -49,7 +49,7 @@ impl CollapsingHeader {
         let text_style = TextStyle::Button;
         let font = &region.fonts()[text_style];
         let (title, text_size) = font.layout_multiline(&title, region.available_width());
-        let text_cursor = region.cursor + region.style.button_padding;
+
         let interact = region.reserve_space(
             vec2(
                 region.available_width(),
@@ -81,7 +81,10 @@ impl CollapsingHeader {
         paint_icon(region, &state, &interact);
 
         region.add_text(
-            text_cursor + vec2(region.style.start_icon_width, 0.0),
+            pos2(
+                interact.rect.left() + region.style.indent,
+                interact.rect.center().y - text_size.y / 2.0,
+            ),
             text_style,
             title,
             Some(region.style.interact_stroke_color(&interact)),
@@ -131,7 +134,12 @@ fn paint_icon(region: &mut Region, state: &State, interact: &InteractInfo) {
     let stroke_color = region.style.interact_stroke_color(&interact);
     let stroke_width = region.style.interact_stroke_width(&interact);
 
-    let (small_icon_rect, _) = region.style.icon_rectangles(&interact.rect);
+    let (mut small_icon_rect, _) = region.style.icon_rectangles(&interact.rect);
+    small_icon_rect.set_center(pos2(
+        interact.rect.left() + region.style.indent / 2.0,
+        interact.rect.center().y,
+    ));
+
     // Draw a minus:
     region.add_paint_cmd(PaintCmd::Line {
         points: vec![

emigui/src/layout.rs

@@ -82,13 +82,13 @@ impl Default for Align {
 pub fn align_rect(rect: Rect, align: (Align, Align)) -> Rect {
     let x = match align.0 {
         Align::Min => rect.left(),
-        Align::Center => rect.left() - 0.5 * rect.size().x,
+        Align::Center => rect.left() - 0.5 * rect.width(),
-        Align::Max => rect.left() - rect.size().x,
+        Align::Max => rect.left() - rect.width(),
     };
     let y = match align.1 {
         Align::Min => rect.top(),
-        Align::Center => rect.top() - 0.5 * rect.size().y,
+        Align::Center => rect.top() - 0.5 * rect.height(),
-        Align::Max => rect.top() - rect.size().y,
+        Align::Max => rect.top() - rect.height(),
     };
     Rect::from_min_size(pos2(x, y), rect.size())
 }

emigui/src/math.rs

@@ -343,16 +343,21 @@ impl Rect {
         }
     }
 
-    // keep min
+    /// keep min
     pub fn set_width(&mut self, w: f32) {
         self.max.x = self.min.x + w;
     }
 
-    // keep min
+    /// keep min
     pub fn set_height(&mut self, h: f32) {
         self.max.y = self.min.y + h;
     }
 
+    /// Keep size
+    pub fn set_center(&mut self, center: Pos2) {
+        *self = self.translate(center - self.center());
+    }
+
     pub fn contains(&self, p: Pos2) -> bool {
         self.min.x <= p.x
             && p.x <= self.min.x + self.size().x

emigui/src/region.rs

@@ -182,7 +182,7 @@ impl Region {
         let size = child_region.bounding_size;
 
         // draw a grey line on the left to mark the region
-        let line_start = child_rect.min() - indent + vec2(13.0, 2.0);
+        let line_start = child_rect.min() - indent * 0.5;
         let line_start = line_start.round();
         let line_end = pos2(line_start.x, line_start.y + size.y - 8.0);
         self.add_paint_cmd(PaintCmd::Line {

emigui/src/style.rs

@@ -45,8 +45,8 @@ impl Default for Style {
             button_padding: vec2(5.0, 3.0),
             item_spacing: vec2(8.0, 4.0),
             indent: 21.0,
-            clickable_diameter: 28.0,
+            clickable_diameter: 22.0,
-            start_icon_width: 20.0,
+            start_icon_width: 16.0,
             line_width: 1.0,
             animation_time: 1.0 / 20.0,
             window: Window::default(),
@@ -132,9 +132,9 @@ impl Style {
 
     /// Returns small icon rectangle and big icon rectangle
     pub fn icon_rectangles(&self, rect: &Rect) -> (Rect, Rect) {
-        let box_side = 16.0;
+        let box_side = self.start_icon_width;
         let big_icon_rect = Rect::from_center_size(
-            pos2(rect.left() + 4.0 + box_side * 0.5, rect.center().y),
+            pos2(rect.left() + box_side / 2.0, rect.center().y),
             vec2(box_side, box_side),
         );
 
@@ -145,20 +145,23 @@ impl Style {
 }
 
 impl Style {
+    #[rustfmt::skip]
     pub fn ui(&mut self, region: &mut crate::Region) {
         use crate::widgets::{Button, Slider};
         if region.add(Button::new("Reset style")).clicked {
             *self = Default::default();
         }
-        region.add(Slider::f32(&mut self.item_spacing.x, 0.0, 10.0).text("item_spacing.x"));
+
-        region.add(Slider::f32(&mut self.item_spacing.y, 0.0, 10.0).text("item_spacing.y"));
+
-        region.add(Slider::f32(&mut self.window_padding.x, 0.0, 10.0).text("window_padding.x"));
+        region.add(Slider::f32(&mut self.item_spacing.x, 0.0, 10.0).text("item_spacing.x").precision(0));
-        region.add(Slider::f32(&mut self.window_padding.y, 0.0, 10.0).text("window_padding.y"));
+        region.add(Slider::f32(&mut self.item_spacing.y, 0.0, 10.0).text("item_spacing.y").precision(0));
-        region.add(Slider::f32(&mut self.indent, 0.0, 100.0).text("indent"));
+        region.add(Slider::f32(&mut self.window_padding.x, 0.0, 10.0).text("window_padding.x").precision(0));
-        region.add(Slider::f32(&mut self.button_padding.x, 0.0, 20.0).text("button_padding.x"));
+        region.add(Slider::f32(&mut self.window_padding.y, 0.0, 10.0).text("window_padding.y").precision(0));
-        region.add(Slider::f32(&mut self.button_padding.y, 0.0, 20.0).text("button_padding.y"));
+        region.add(Slider::f32(&mut self.indent, 0.0, 100.0).text("indent").precision(0));
-        region.add(Slider::f32(&mut self.clickable_diameter, 0.0, 60.0).text("clickable_diameter"));
+        region.add(Slider::f32(&mut self.button_padding.x, 0.0, 20.0).text("button_padding.x").precision(0));
-        region.add(Slider::f32(&mut self.start_icon_width, 0.0, 60.0).text("start_icon_width"));
+        region.add(Slider::f32(&mut self.button_padding.y, 0.0, 20.0).text("button_padding.y").precision(0));
-        region.add(Slider::f32(&mut self.line_width, 0.0, 10.0).text("line_width"));
+        region.add(Slider::f32(&mut self.clickable_diameter, 0.0, 60.0).text("clickable_diameter").precision(0));
+        region.add(Slider::f32(&mut self.start_icon_width, 0.0, 60.0).text("start_icon_width").precision(0));
+        region.add(Slider::f32(&mut self.line_width, 0.0, 10.0).text("line_width").precision(0));
     }
 }

emigui/src/widgets.rs

@@ -228,7 +228,7 @@ impl Widget for RadioButton {
             center: big_icon_rect.center(),
             fill_color,
             outline: None,
-            radius: big_icon_rect.size().x / 2.0,
+            radius: big_icon_rect.width() / 2.0,
         });
 
         if self.checked {
@@ -236,7 +236,7 @@ impl Widget for RadioButton {
                 center: small_icon_rect.center(),
                 fill_color: Some(stroke_color),
                 outline: None,
-                radius: small_icon_rect.size().x / 2.0,
+                radius: small_icon_rect.width() / 2.0,
             });
         }
 
@@ -370,7 +370,7 @@ impl<'a> Widget for Slider<'a> {
                     // Place the text in line with the slider on the left:
                     columns[1]
                         .desired_rect
-                        .set_height(slider_response.rect.size().y);
+                        .set_height(slider_response.rect.height());
                     columns[1].horizontal(Align::Center, |region| {
                         region.add(Label::new(full_text));
                     });
@@ -380,9 +380,10 @@ impl<'a> Widget for Slider<'a> {
             }
         } else {
             let height = font.line_spacing().max(region.style().clickable_diameter);
-            let handle_radius = height / 3.0;
+            let handle_radius = height / 2.5;
+
+            let id = region.make_position_id(); // TODO: causes problems for style settings :/
 
-            let id = region.make_position_id();
             let interact = region.reserve_space(
                 Vec2 {
                     x: region.available_width(),
@@ -409,28 +410,28 @@ impl<'a> Widget for Slider<'a> {
                 let value = self.get_value_f32();
 
                 let rect = interact.rect;
-                let rail_radius = (height / 10.0).round().max(2.0);
+                let rail_radius = (height / 8.0).round().max(2.0);
                 let rail_rect = Rect::from_min_max(
-                    pos2(left - rail_radius, rect.center().y - rail_radius),
+                    pos2(interact.rect.left(), rect.center().y - rail_radius),
-                    pos2(right + rail_radius, rect.center().y + rail_radius),
+                    pos2(interact.rect.right(), rect.center().y + rail_radius),
                 );
                 let marker_center_x = remap_clamp(value, min, max, left, right);
 
                 region.add_paint_cmd(PaintCmd::Rect {
+                    rect: rail_rect,
                     corner_radius: rail_radius,
                     fill_color: Some(region.style().background_fill_color()),
                     outline: Some(Outline::new(1.0, color::gray(200, 255))), // TODO
-                    rect: rail_rect,
                 });
 
                 region.add_paint_cmd(PaintCmd::Circle {
                     center: pos2(marker_center_x, rail_rect.center().y),
+                    radius: handle_radius,
                     fill_color: region.style().interact_fill_color(&interact),
                     outline: Some(Outline::new(
                         region.style().interact_stroke_width(&interact),
                         region.style().interact_stroke_color(&interact),
                     )),
-                    radius: handle_radius,
                 });
             }
 

emigui/src/window.rs

@@ -120,7 +120,7 @@ impl Window {
             .unwrap_or(ctx.input.screen_size - 2.0 * window_padding);
 
         let default_pos = self.default_pos.unwrap_or(pos2(100.0, 100.0)); // TODO
-        let default_inner_size = self.default_size.unwrap_or(vec2(200.0, 200.0));
+        let default_inner_size = self.default_size.unwrap_or(vec2(250.0, 250.0));
 
         let id = ctx.make_unique_id(&self.title, default_pos);
 

example_glium/src/main.rs

@@ -111,6 +111,8 @@ fn main() {
             quit = true;
         }
 
+        // TODO: Make it even simpler to show a window
+
         Window::new("Examples")
             .default_pos(pos2(100.0, 100.0))
             .default_size(vec2(300.0, 400.0))
@@ -119,28 +121,12 @@ fn main() {
             });
 
         Window::new("Emigui settings")
-            .default_pos(pos2(100.0, 550.0))
+            .default_pos(pos2(500.0, 100.0))
+            .default_size(vec2(500.0, 500.0))
             .show(region.ctx(), |region| {
                 emigui.ui(region);
             });
 
-        // TODO: Make it even simpler to show a window
-        Window::new("Test window")
-            .default_pos(pos2(600.0, 100.0))
-            .show(region.ctx(), |region| {
-                region.add_label("Grab the window and move it around!");
-                region.add_label("This window can be reisized, but not smaller than the contents.");
-            });
-        Window::new("Resize me!")
-            .default_pos(pos2(600.0, 550.0))
-            .expand_to_fit_content(false)
-            .show(region.ctx(), |region| {
-                region
-                    .add_label("This window may shrink so small that its contents no longer fit.");
-                region.add_label("Maybe you can no longer read this, for instance");
-                region.add_label("And this line may be way too far down.");
-            });
-
         painter.paint_batches(&display, emigui.paint(), emigui.texture());
 
         let cursor = *emigui.ctx.cursor_icon.lock();