Initial lag when dragging Area.

[karhu]

Hi everyone, hope someone can help me with this:

I'm trying to have UI widgets that are draggable on screen, a bit like windows, but not full-blown windows. So I figured the "Area" struct might be well suited for the task, and yes the resulting widget can be moved around, however I can't get rid of an initial, super annoying stutter / lag when moving the widget. As a repro, I also tried to simply draw a movable box using a "Painter", which is perfectly smooth.

See my code:

fn main() -> eframe::Result {
    eframe::run_native(
        "Stutter Repro",
        eframe::NativeOptions::default(),
        Box::new(|_| Ok(Box::<MyApp>::default())),
    )
}

struct MyApp {
    box_position: egui::Pos2,
}

impl Default for MyApp {
    fn default() -> Self {
        Self {
            box_position: egui::Pos2::ZERO,
        }
    }
}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default()
            .frame(egui::Frame::none())
            .show(ctx, |ui| {
                // Draw movable box (red). This moves smoothly.
                let (response, painter) =
                    ui.allocate_painter(ui.clip_rect().size(), egui::Sense::drag());
                self.box_position += response.drag_motion();
                painter.rect_filled(
                    egui::Rect::from_min_size(
                        self.box_position + egui::vec2(200.0, 100.0),
                        egui::vec2(80.0, 80.0),
                    ),
                    egui::Rounding::ZERO,
                    egui::Color32::DARK_RED,
                );

                // Draw area box (grey). This has initial lag.
                egui::containers::Area::new(egui::Id::new("grey_box"))
                    .default_pos(egui::pos2(200.0, 200.0))
                    .movable(true)
                    .sense(egui::Sense::drag())
                    .show(ctx, |ui| {
                        egui::Frame::none()
                            .fill(egui::Color32::DARK_GRAY)
                            .inner_margin(egui::Margin::same(40.0))
                            .show(ui, |_| {});
                    })
                    .response;
            });
    }
}

Thanks for your help!

[tye-exe]

Out of interest, what's up with Windows?

You can customize:
title
default, minimum, maximum and/or fixed size, collapsed/expanded
if the window has a scroll area (off by default)
if the window can be collapsed (minimized) to just the title bar (yes, by default)
if there should be a close button (none by default)

It seems that you can customise them to just be a rectangle.

---

Taken from: https://docs.rs/egui/latest/egui/containers/struct.Window.html

[karhu]

I initially used Window, but ended up with Area after trying to simplify things to debug the lag I am seeing, which also occurs for Window.

[tye-exe]

I ran the code (changing .inner_margin(egui::Margin::same(40.0)) to .inner_margin(egui::Margin::same(40)) and i can't really tell any "stuttering" so to speak.
The red square does lag behind the cursor though, if that's what you mean?

Screencast_20250210_213048.webm

[karhu]

Mhm, interesting. You are definitely seeing different behavior than me. For reference what OS are you running on? I will also add a screen recording in a moment.

For me the red square is working as expected, not lagging behind and smooth. The grey one is causing problems.

[tye-exe]

I'm using Wayland on Linux

[tye-exe]

I'll test it using windows 10 in a few hours when i have the time.

[karhu]

Adding a screen recording as well:
egui_stutter.webm

The observed behavior is as follows:

• The red box (drawn using custom logic using "painter" API) moves smoothly with the cursor.
• The grey box (drawn using "Area" API) lags initially when starting a drag, with a large initial jump to catch-up. If continuing the same drag it will be smooth. If starting a new drag it will again lag once initially. The video only does it limited justice, when interacting this feel much more jarring.

This is running on OSX on a MBP.

[tye-exe]

I see what you mean with the lag, it looks like the gui isn't updating when the gray box is being dragged (that's only a guess).
It might help to call request repaint when the gray square ia being clicked on/hovered over.

I'll test doing this when i have acees to my computer in a few hours.