djkato/egui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix left alignment of widgets and tweak style slightly

Browse source
This commit is contained in:
Emil Ernerfeldt 2020-04-23 00:17:37 +02:00
parent a4db437413
commit fd8180cea4
8 changed files with 56 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
emigui/src/collapsing_header.rs
View file

@ -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![

8
emigui/src/layout.rs
View file

@ -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::Max => rect.left() - rect.size().x,
Align::Center => rect.left() - 0.5 * rect.width(),
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::Max => rect.top() - rect.size().y,
Align::Center => rect.top() - 0.5 * rect.height(),
Align::Max => rect.top() - rect.height(),
};
Rect::from_min_size(pos2(x, y), rect.size())
}

9
emigui/src/math.rs
View file

@ -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

2
emigui/src/region.rs
View file

@ -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 {

31
emigui/src/style.rs
View file

@ -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,
start_icon_width: 20.0,
clickable_diameter: 22.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.window_padding.y, 0.0, 10.0).text("window_padding.y"));
region.add(Slider::f32(&mut self.indent, 0.0, 100.0).text("indent"));
region.add(Slider::f32(&mut self.button_padding.x, 0.0, 20.0).text("button_padding.x"));
region.add(Slider::f32(&mut self.button_padding.y, 0.0, 20.0).text("button_padding.y"));
region.add(Slider::f32(&mut self.clickable_diameter, 0.0, 60.0).text("clickable_diameter"));
region.add(Slider::f32(&mut self.start_icon_width, 0.0, 60.0).text("start_icon_width"));
region.add(Slider::f32(&mut self.line_width, 0.0, 10.0).text("line_width"));
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.item_spacing.y, 0.0, 10.0).text("item_spacing.y").precision(0));
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.window_padding.y, 0.0, 10.0).text("window_padding.y").precision(0));
region.add(Slider::f32(&mut self.indent, 0.0, 100.0).text("indent").precision(0));
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.button_padding.y, 0.0, 20.0).text("button_padding.y").precision(0));
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));
}
}

21
emigui/src/widgets.rs
View file

@ -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(right + rail_radius, rect.center().y + rail_radius),
pos2(interact.rect.left(), 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,
});
}

2
emigui/src/window.rs
View file

@ -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);

22
example_glium/src/main.rs
View file

@ -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();