Per-side margins with new struct Margin (#1219)

CHANGELOG.md

@@ -39,6 +39,7 @@ NOTE: [`epaint`](epaint/CHANGELOG.md), [`eframe`](eframe/CHANGELOG.md), [`egui_w
 * `TextStyle` is no longer `Copy` ([#1154](https://github.com/emilk/egui/pull/1154)).
 * Replaced `TextEdit::text_style` with `TextEdit::font` ([#1154](https://github.com/emilk/egui/pull/1154)).
 * Replaced `corner_radius: f32` with `rounding: Rounding`, allowing per-corner rounding settings ([#1206](https://github.com/emilk/egui/pull/1206)).
+* Replaced Frame's `margin: Vec2` with `margin: Margin`, allowing for different margins on opposing sides ([#1219](https://github.com/emilk/egui/pull/1219)).
 * `Plot::highlight` now takes a `bool` argument ([#1159](https://github.com/emilk/egui/pull/1159)).
 * `ScrollArea::show` now returns a `ScrollAreaOutput`, so you might need to add `.inner` after the call to it ([#1166](https://github.com/emilk/egui/pull/1166)).
 

egui/src/containers/frame.rs

@@ -3,12 +3,55 @@
 use crate::{layers::ShapeIdx, *};
 use epaint::*;
 
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+#[cfg_attr(feature = "serde", derive(serde::Deserialize, serde::Serialize))]
+pub struct Margin {
+ pub left: f32,
+ pub right: f32,
+ pub top: f32,
+ pub bottom: f32,
+}
+
+impl Margin {
+ #[inline]
+ pub fn same(margin: f32) -> Self {
+ Self {
+ left: margin,
+ right: margin,
+ top: margin,
+ bottom: margin,
+ }
+ }
+
+ /// Margins with the same size on opposing sides
+ #[inline]
+ pub fn symmetric(x: f32, y: f32) -> Self {
+ Self {
+ left: x,
+ right: x,
+ top: y,
+ bottom: y,
+ }
+ }
+
+ /// Total margins on both sides
+ pub fn sum(&self) -> Vec2 {
+ Vec2::new(self.left + self.right, self.top + self.bottom)
+ }
+}
+
+impl From<Vec2> for Margin {
+ fn from(v: Vec2) -> Self {
+ Self::symmetric(v.x, v.y)
+ }
+}
+
 /// Color and margin of a rectangular background of a [`Ui`].
 #[derive(Clone, Copy, Debug, Default, PartialEq)]
 #[must_use = "You should call .show()"]
 pub struct Frame {
  /// On each side
- pub margin: Vec2,
+ pub margin: Margin,
  pub rounding: Rounding,
  pub shadow: Shadow,
  pub fill: Color32,
@@ -23,7 +66,7 @@ impl Frame {
  /// For when you want to group a few widgets together within a frame.
  pub fn group(style: &Style) -> Self {
  Self {
- margin: Vec2::splat(6.0), // symmetric looks best in corners when nesting
+ margin: Margin::same(6.0), // symmetric looks best in corners when nesting
  rounding: style.visuals.widgets.noninteractive.rounding,
  stroke: style.visuals.widgets.noninteractive.bg_stroke,
  ..Default::default()
@@ -32,7 +75,7 @@ impl Frame {
 
  pub(crate) fn side_top_panel(style: &Style) -> Self {
  Self {
- margin: Vec2::new(8.0, 2.0),
+ margin: Margin::symmetric(8.0, 2.0),
  rounding: Rounding::none(),
  fill: style.visuals.window_fill(),
  stroke: style.visuals.window_stroke(),
@@ -42,7 +85,7 @@ impl Frame {
 
  pub(crate) fn central_panel(style: &Style) -> Self {
  Self {
- margin: Vec2::new(8.0, 8.0),
+ margin: Margin::symmetric(8.0, 8.0),
  rounding: Rounding::none(),
  fill: style.visuals.window_fill(),
  stroke: Default::default(),
@@ -52,7 +95,7 @@ impl Frame {
 
  pub fn window(style: &Style) -> Self {
  Self {
- margin: style.spacing.window_padding,
+ margin: style.spacing.window_margin,
  rounding: style.visuals.window_rounding,
  shadow: style.visuals.window_shadow,
  fill: style.visuals.window_fill(),
@@ -62,7 +105,7 @@ impl Frame {
 
  pub fn menu(style: &Style) -> Self {
  Self {
- margin: Vec2::splat(1.0),
+ margin: Margin::same(1.0),
  rounding: style.visuals.widgets.noninteractive.rounding,
  shadow: style.visuals.popup_shadow,
  fill: style.visuals.window_fill(),
@@ -72,7 +115,7 @@ impl Frame {
 
  pub fn popup(style: &Style) -> Self {
  Self {
- margin: style.spacing.window_padding,
+ margin: style.spacing.window_margin,
  rounding: style.visuals.widgets.noninteractive.rounding,
  shadow: style.visuals.popup_shadow,
  fill: style.visuals.window_fill(),
@@ -83,7 +126,7 @@ impl Frame {
  /// dark canvas to draw on
  pub fn dark_canvas(style: &Style) -> Self {
  Self {
- margin: Vec2::new(10.0, 10.0),
+ margin: Margin::symmetric(10.0, 10.0),
  rounding: style.visuals.widgets.noninteractive.rounding,
  fill: Color32::from_black_alpha(250),
  stroke: style.visuals.window_stroke(),
@@ -109,7 +152,7 @@ impl Frame {
  }
 
  /// Margin on each side of the frame.
- pub fn margin(mut self, margin: impl Into<Vec2>) -> Self {
+ pub fn margin(mut self, margin: impl Into<Margin>) -> Self {
  self.margin = margin.into();
  self
  }
@@ -137,7 +180,10 @@ impl Frame {
  pub fn begin(self, ui: &mut Ui) -> Prepared {
  let where_to_put_background = ui.painter().add(Shape::Noop);
  let outer_rect_bounds = ui.available_rect_before_wrap();
- let mut inner_rect = outer_rect_bounds.shrink2(self.margin);
+
+ let mut inner_rect = outer_rect_bounds;
+ inner_rect.min += Vec2::new(self.margin.left, self.margin.top);
+ inner_rect.max -= Vec2::new(self.margin.right, self.margin.bottom);
 
  // Make sure we don't shrink to the negative:
  inner_rect.max.x = inner_rect.max.x.max(inner_rect.min.x);
@@ -197,7 +243,10 @@ impl Frame {
 
 impl Prepared {
  pub fn outer_rect(&self) -> Rect {
- self.content_ui.min_rect().expand2(self.frame.margin)
+ let mut rect = self.content_ui.min_rect();
+ rect.min -= Vec2::new(self.frame.margin.left, self.frame.margin.top);
+ rect.max += Vec2::new(self.frame.margin.right, self.frame.margin.bottom);
+ rect
  }
 
  pub fn end(self, ui: &mut Ui) -> Response {

egui/src/containers/mod.rs

@@ -16,7 +16,7 @@ pub use {
  area::Area,
  collapsing_header::{CollapsingHeader, CollapsingResponse},
  combo_box::*,
- frame::Frame,
+ frame::{Frame, Margin},
  panel::{CentralPanel, SidePanel, TopBottomPanel},
  popup::*,
  resize::Resize,

egui/src/containers/popup.rs

@@ -302,7 +302,7 @@ pub fn popup_below_widget<R>(
  frame
  .show(ui, |ui| {
  ui.with_layout(Layout::top_down_justified(Align::LEFT), |ui| {
- ui.set_width(widget_response.rect.width() - 2.0 * frame_margin.x);
+ ui.set_width(widget_response.rect.width() - frame_margin.sum().x);
  add_contents(ui)
  })
  .inner

egui/src/containers/resize.rs

@@ -178,7 +178,7 @@ impl Resize {
  .at_least(self.min_size)
  .at_most(self.max_size)
  .at_most(
- ui.input().screen_rect().size() - 2.0 * ui.spacing().window_padding, // hack for windows
+ ui.input().screen_rect().size() - ui.spacing().window_margin.sum(), // hack for windows
  );
 
  State {

egui/src/containers/window.rs

@@ -301,7 +301,7 @@ impl<'open> Window<'open> {
  } else {
  0.0
  };
- let margins = 2.0 * frame.margin + vec2(0.0, title_bar_height);
+ let margins = frame.margin.sum() + vec2(0.0, title_bar_height);
 
  interact(
  window_interaction,

egui/src/style.rs

@@ -2,7 +2,7 @@
 
 #![allow(clippy::if_same_then_else)]
 
-use crate::{color::*, emath::*, FontFamily, FontId, Response, RichText, WidgetText};
+use crate::{color::*, emath::*, FontFamily, FontId, Margin, Response, RichText, WidgetText};
 use epaint::{mutex::Arc, Rounding, Shadow, Stroke};
 use std::collections::BTreeMap;
 
@@ -220,8 +220,8 @@ pub struct Spacing {
  /// widgets `A` and `B` you need to change `item_spacing` before adding `A`.
  pub item_spacing: Vec2,
 
- /// Horizontal and vertical padding within a window frame.
- pub window_padding: Vec2,
+ /// Horizontal and vertical margins within a window frame.
+ pub window_margin: Margin,
 
  /// Button size is text size plus this on each side
  pub button_padding: Vec2,
@@ -528,7 +528,7 @@ impl Default for Spacing {
  fn default() -> Self {
  Self {
  item_spacing: vec2(8.0, 3.0),
- window_padding: Vec2::splat(6.0),
+ window_margin: Margin::same(6.0),
  button_padding: vec2(4.0, 1.0),
  indent: 18.0, // match checkbox/radio-button with `button_padding.x + icon_width + icon_spacing`
  interact_size: vec2(40.0, 18.0),
@@ -803,7 +803,7 @@ impl Spacing {
  pub fn ui(&mut self, ui: &mut crate::Ui) {
  let Self {
  item_spacing,
- window_padding,
+ window_margin,
  button_padding,
  indent,
  interact_size,
@@ -818,7 +818,37 @@ impl Spacing {
  } = self;
 
  ui.add(slider_vec2(item_spacing, 0.0..=20.0, "Item spacing"));
- ui.add(slider_vec2(window_padding, 0.0..=20.0, "Window padding"));
+
+ let margin_range = 0.0..=20.0;
+ ui.horizontal(|ui| {
+ ui.add(
+ DragValue::new(&mut window_margin.left)
+ .clamp_range(margin_range.clone())
+ .prefix("left: "),
+ );
+ ui.add(
+ DragValue::new(&mut window_margin.right)
+ .clamp_range(margin_range.clone())
+ .prefix("right: "),
+ );
+
+ ui.label("Window margins x");
+ });
+
+ ui.horizontal(|ui| {
+ ui.add(
+ DragValue::new(&mut window_margin.top)
+ .clamp_range(margin_range.clone())
+ .prefix("top: "),
+ );
+ ui.add(
+ DragValue::new(&mut window_margin.bottom)
+ .clamp_range(margin_range)
+ .prefix("bottom: "),
+ );
+ ui.label("Window margins y");
+ });
+
  ui.add(slider_vec2(button_padding, 0.0..=20.0, "Button padding"));
  ui.add(slider_vec2(interact_size, 4.0..=60.0, "Interact size"))
  .on_hover_text("Minimum size of an interactive widget");

egui/src/widgets/plot/legend.rs

@@ -239,7 +239,7 @@ impl Widget for &mut LegendWidget {
  legend_ui
  .scope(|ui| {
  let background_frame = Frame {
- margin: vec2(8.0, 4.0),
+ margin: vec2(8.0, 4.0).into(),
  rounding: ui.style().visuals.window_rounding,
  shadow: epaint::Shadow::default(),
  fill: ui.style().visuals.extreme_bg_color,