Individual margins

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,49 @@
 use crate::{layers::ShapeIdx, *};
 use epaint::*;
 
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+pub struct Margin {
+    pub left: f32,
+    pub right: f32,
+    pub top: f32,
+    pub bottom: f32,
+}
+
+impl 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 margin in x direction
+    pub fn x(&self) -> f32 {
+        self.left + self.right
+    }
+
+    /// Total margin in y direction
+    pub fn y(&self) -> f32 {
+        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 +60,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: Vec2::splat(6.0).into(), // symmetric looks best in corners when nesting
             rounding: style.visuals.widgets.noninteractive.rounding,
             stroke: style.visuals.widgets.noninteractive.bg_stroke,
             ..Default::default()
@@ -32,7 +69,7 @@ impl Frame {
 
     pub(crate) fn side_top_panel(style: &Style) -> Self {
         Self {
-            margin: Vec2::new(8.0, 2.0),
+            margin: Vec2::new(8.0, 2.0).into(),
             rounding: Rounding::none(),
             fill: style.visuals.window_fill(),
             stroke: style.visuals.window_stroke(),
@@ -42,7 +79,7 @@ impl Frame {
 
     pub(crate) fn central_panel(style: &Style) -> Self {
         Self {
-            margin: Vec2::new(8.0, 8.0),
+            margin: Vec2::new(8.0, 8.0).into(),
             rounding: Rounding::none(),
             fill: style.visuals.window_fill(),
             stroke: Default::default(),
@@ -52,7 +89,7 @@ impl Frame {
 
     pub fn window(style: &Style) -> Self {
         Self {
-            margin: style.spacing.window_padding,
+            margin: style.spacing.window_padding.into(),
             rounding: style.visuals.window_rounding,
             shadow: style.visuals.window_shadow,
             fill: style.visuals.window_fill(),
@@ -62,7 +99,7 @@ impl Frame {
 
     pub fn menu(style: &Style) -> Self {
         Self {
-            margin: Vec2::splat(1.0),
+            margin: Vec2::splat(1.0).into(),
             rounding: style.visuals.widgets.noninteractive.rounding,
             shadow: style.visuals.popup_shadow,
             fill: style.visuals.window_fill(),
@@ -72,7 +109,7 @@ impl Frame {
 
     pub fn popup(style: &Style) -> Self {
         Self {
-            margin: style.spacing.window_padding,
+            margin: style.spacing.window_padding.into(),
             rounding: style.visuals.widgets.noninteractive.rounding,
             shadow: style.visuals.popup_shadow,
             fill: style.visuals.window_fill(),
@@ -83,7 +120,7 @@ impl Frame {
     /// dark canvas to draw on
     pub fn dark_canvas(style: &Style) -> Self {
         Self {
-            margin: Vec2::new(10.0, 10.0),
+            margin: Vec2::new(10.0, 10.0).into(),
             rounding: style.visuals.widgets.noninteractive.rounding,
             fill: Color32::from_black_alpha(250),
             stroke: style.visuals.window_stroke(),
@@ -109,7 +146,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 +174,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 +237,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.x());
                             add_contents(ui)
                         })
                         .inner

egui/src/containers/window.rs

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

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,