emilk · mkalte666 · Apr 13, 2025 · Apr 13, 2025 · Apr 15, 2025 · Apr 15, 2025
diff --git a/crates/egui/src/containers/modal.rs b/crates/egui/src/containers/modal.rs
@@ -1,5 +1,6 @@
 use crate::{
-    Area, Color32, Context, Frame, Id, InnerResponse, Order, Response, Sense, Ui, UiBuilder, UiKind,
+    Area, Color32, Context, Frame, Id, InnerResponse, Order, Response, Sense, Ui, UiKind,
+    WidgetRect,
 };
 use emath::{Align2, Vec2};
 
@@ -33,18 +34,37 @@ impl Modal {
     /// Returns an area customized for a modal.
     ///
     /// Makes these changes to the default area:
-    /// - sense: hover
+    /// - sense: click + drag
     /// - anchor: center
     /// - order: foreground
+    ///
+    /// Consider the notes at [`Modal::area`] for more information.
     pub fn default_area(id: Id) -> Area {
         Area::new(id)
             .kind(UiKind::Modal)
-            .sense(Sense::hover())
+            .sense(Sense::click_and_drag())
             .anchor(Align2::CENTER_CENTER, Vec2::ZERO)
             .order(Order::Foreground)
             .interactable(true)
     }
 
+    /// Returns an area customized to make a modal draggable.
+    ///
+    /// Makes these changes to the default area:
+    /// - sense: click + drag
+    /// - pivot: center
+    /// - order: foreground
+    ///
+    /// Consider the notes at [`Modal::area`] for more information.
+    pub fn draggable_area(id: Id) -> Area {
+        Area::new(id)
+            .kind(UiKind::Modal)
+            .sense(Sense::click_and_drag())
+            .pivot(Align2::CENTER_CENTER)
+            .order(Order::Foreground)
+            .interactable(true)
+    }
+
     /// Set the frame of the modal.
     ///
     /// Default is [`Frame::popup`].
@@ -66,6 +86,14 @@ impl Modal {
     /// Set the area of the modal.
     ///
     /// Default is [`Modal::default_area`].
+    ///
+    /// If the modal should be draggable, consider using [`Modal::draggable_area`] instead.
+    ///
+    /// If you want to provide a custom area, make sure it senses [`Sense::CLICK`] and [`Sense::DRAG`].
+    /// Otherwise the background backdrop might catch events meant for the content of the modal.
+    ///
+    /// Also, if the Area satisfies [`Area::is_movable`], the Modal will ignore the stored position and re-center it on modal re-open.
+    /// This is affected by [`Area::pivot`], which [`Modal::draggable_area`] sets to [`Align2::CENTER_CENTER`].
     #[inline]
     pub fn area(mut self, area: Area) -> Self {
         self.area = area;
@@ -75,7 +103,7 @@ impl Modal {
     /// Show the modal.
     pub fn show<T>(self, ctx: &Context, content: impl FnOnce(&mut Ui) -> T) -> ModalResponse<T> {
         let Self {
-            area,
+            mut area,
             backdrop_color,
             frame,
         } = self;
@@ -87,28 +115,35 @@ impl Modal {
                 mem.any_popup_open(),
             )
         });
-        let InnerResponse {
-            inner: (inner, backdrop_response),
-            response,
-        } = area.show(ctx, |ui| {
-            let bg_rect = ui.ctx().screen_rect();
-            let bg_sense = Sense::CLICK | Sense::DRAG;
-            let mut backdrop = ui.new_child(UiBuilder::new().sense(bg_sense).max_rect(bg_rect));
-            backdrop.set_min_size(bg_rect.size());
-            ui.painter().rect_filled(bg_rect, 0.0, backdrop_color);
-            let backdrop_response = backdrop.response();
 
-            let frame = frame.unwrap_or_else(|| Frame::popup(ui.style()));
+        // The backdrop response is responsible for checking for click through etc.
+        // It needs to be drawn before everything else, so we can use it to block clicks.
+        // Thus, we manually add the widget.
+        let bg_rect = ctx.screen_rect();
+        let bg_sense = Sense::CLICK | Sense::DRAG;
+        let backdrop_response = ctx.create_widget(
+            WidgetRect {
+                id: area.id.with("background rect"),
+                layer_id: area.layer(),
+                rect: bg_rect,
+                interact_rect: bg_rect,
+                sense: bg_sense,
+                enabled: true,
+            },
+            true,
+        );
+
+        // Should the area be movable, and we are (re-)opening it, try to center it.
+        if area.is_movable() && !ctx.memory(|mem| mem.areas().visible_last_frame(&area.layer())) {
+            area = area.current_pos(ctx.screen_rect().center());
+        }
 
-            // We need the extra scope with the sense since frame can't have a sense and since we
-            // need to prevent the clicks from passing through to the backdrop.
-            let inner = ui
-                .scope_builder(UiBuilder::new().sense(Sense::CLICK | Sense::DRAG), |ui| {
-                    frame.show(ui, content).inner
-                })
-                .inner;
+        let InnerResponse { inner, response } = area.show(ctx, |ui| {
+            // The backdrop still needs painting.
+            ui.painter().rect_filled(bg_rect, 0.0, backdrop_color);
 
-            (inner, backdrop_response)
+            let frame = frame.unwrap_or_else(|| Frame::popup(ui.style()));
+            frame.show(ui, content).inner
         });
 
         ModalResponse {

diff --git a/crates/egui_demo_lib/src/demo/modals.rs b/crates/egui_demo_lib/src/demo/modals.rs
@@ -6,6 +6,7 @@ pub struct Modals {
     user_modal_open: bool,
     save_modal_open: bool,
     save_progress: Option<f32>,
+    drag_modal_open: bool,
 
     role: &'static str,
     name: String,
@@ -16,6 +17,7 @@ impl Default for Modals {
         Self {
             user_modal_open: false,
             save_modal_open: false,
+            drag_modal_open: false,
             save_progress: None,
             role: Self::ROLES[0],
             name: "John Doe".to_owned(),
@@ -48,6 +50,7 @@ impl crate::View for Modals {
             user_modal_open,
             save_modal_open,
             save_progress,
+            drag_modal_open,
             role,
             name,
         } = self;
@@ -60,6 +63,10 @@ impl crate::View for Modals {
             if ui.button("Open Save Modal").clicked() {
                 *save_modal_open = true;
             }
+
+            if ui.button("Draggable Modal").clicked() {
+                *drag_modal_open = true;
+            }
         });
 
         ui.label("Click one of the buttons to open a modal.");
@@ -154,6 +161,34 @@ impl crate::View for Modals {
             });
         }
 
+        if *drag_modal_open {
+            let id = Id::new("Modal D");
+
+            // It is tempting to do this:
+            // let area = Modal::default_area(id).movable(true);
+            // However the default area sets anchors, and thus movable will not work.
+            // Instead, use Modal::draggable_area instead.
+            let modal = Modal::new(id)
+                .area(Modal::draggable_area(id))
+                .show(ui.ctx(), |ui| {
+                    egui::Resize::default()
+                        .with_stroke(false)
+                        .min_size([125.0, 225.0])
+                        .max_size(ui.ctx().screen_rect().size())
+                        .show(ui, |ui| {
+                            ui.vertical_centered(|ui| {
+                                ui.add_space(25.0);
+                                ui.heading("You should be able to drag me around!");
+                                ui.add_space(125.0);
+                            });
+                        });
+                });
+
+            if modal.should_close() {
+                *drag_modal_open = false;
+            }
+        }
+
         ui.vertical_centered(|ui| {
             ui.add(crate::egui_github_link_file!());
         });
@@ -165,7 +200,7 @@ mod tests {
     use crate::demo::modals::Modals;
     use crate::Demo;
     use egui::accesskit::Role;
-    use egui::Key;
+    use egui::{Event, Key, PointerButton, Vec2};
     use egui_kittest::kittest::Queryable;
     use egui_kittest::{Harness, SnapshotResults};
 
@@ -249,6 +284,59 @@ mod tests {
         results.add(harness.try_snapshot("modals_3"));
     }
 
+    #[test]
+    fn draggable_should_drag_and_close() {
+        let initial_state = Modals {
+            drag_modal_open: true,
+            ..Modals::default()
+        };
+
+        let mut harness = Harness::new_state(
+            |ctx, modals| {
+                modals.show(ctx, &mut true);
+            },
+            initial_state,
+        );
+
+        let mut results = SnapshotResults::new();
+
+        harness.run();
+        results.add(harness.try_snapshot("modals_drag_1"));
+
+        let center = harness.ctx.screen_rect().center();
+        let delta = Vec2::new(150.0, 25.0);
+        let pos_after = center + delta;
+
+        harness.input_mut().events.push(Event::PointerButton {
+            pos: center,
+            button: PointerButton::Primary,
+            pressed: true,
+            modifiers: Default::default(),
+        });
+        harness.step();
+
+        harness
+            .input_mut()
+            .events
+            .push(Event::PointerMoved(pos_after));
+        harness.step();
+
+        harness.input_mut().events.push(Event::PointerButton {
+            pos: pos_after,
+            button: PointerButton::Primary,
+            pressed: false,
+            modifiers: Default::default(),
+        });
+        harness.step();
+
+        results.add(harness.try_snapshot("modals_drag_2"));
+
+        harness.press_key(Key::Escape);
+        harness.run();
+
+        results.add(harness.try_snapshot("modals_drag_3"));
+    }
+
     // This tests whether the backdrop actually prevents interaction with lower layers.
     #[test]
     fn backdrop_should_prevent_focusing_lower_area() {

diff --git a/crates/egui_demo_lib/tests/snapshots/demos/Modals.png b/crates/egui_demo_lib/tests/snapshots/demos/Modals.png
diff --git a/crates/egui_demo_lib/tests/snapshots/modals_1.png b/crates/egui_demo_lib/tests/snapshots/modals_1.png
diff --git a/crates/egui_demo_lib/tests/snapshots/modals_2.png b/crates/egui_demo_lib/tests/snapshots/modals_2.png
diff --git a/crates/egui_demo_lib/tests/snapshots/modals_3.png b/crates/egui_demo_lib/tests/snapshots/modals_3.png
diff --git a/...demo_lib/tests/snapshots/modals_backdrop_should_prevent_focusing_lower_area.png b/...demo_lib/tests/snapshots/modals_backdrop_should_prevent_focusing_lower_area.png
diff --git a/crates/egui_demo_lib/tests/snapshots/modals_drag_1.png b/crates/egui_demo_lib/tests/snapshots/modals_drag_1.png
diff --git a/crates/egui_demo_lib/tests/snapshots/modals_drag_2.png b/crates/egui_demo_lib/tests/snapshots/modals_drag_2.png
diff --git a/crates/egui_demo_lib/tests/snapshots/modals_drag_3.png b/crates/egui_demo_lib/tests/snapshots/modals_drag_3.png