Freely drag-and-drop widgets on the screen

[avsaase]

Hi,

I'm new to egui and I ran into something that I can't figure out. I'm trying to create a UI were you can position widgets on the screen by dragging them around. I took some inspiration from the drag and drop demo but I wanted more accurate positioning and I don't need any animations of the background widget while dragging. Here's my latest attempt:

struct MyApp {
    drag_delta: Option<Vec2>,
    button_position: Pos2,
}

impl Default for MyApp {
    fn default() -> Self {
        Self {
            drag_delta: None,
            button_position: Pos2::new(300., 300.),
        }
    }
}

impl App for MyApp {
    fn update(&mut self, ctx: &eframe::egui::Context, _frame: &mut eframe::Frame) {
        CentralPanel::default().show(ctx, |ui| {
            // Draw the background
            let rect =
                Rect::from_min_size(ui.available_rect_before_wrap().min, Vec2::new(400., 300.));
            let rect_shape = RectShape::filled(rect, 0.0, Color32::LIGHT_GRAY);
            ui.painter().add(rect_shape);

            // Draw the button element
            let pos = self.button_position.clone();
            MyApp::drag(self, ui, ui.id(), |ui| {
                let rect = Rect::from_min_size(pos, Vec2::new(100., 100.));
                ui.put(
                    rect,
                    Button::new("TEXT")
                        .fill(Color32::DARK_GRAY)
                        .sense(Sense::click()),
                );
            });
        });
    }
}

impl MyApp {
    pub fn drag(&mut self, ui: &mut Ui, id: Id, body: impl FnOnce(&mut Ui)) {
        let response = ui.scope(body).response;
        let response = ui.interact(response.rect, id, Sense::drag());

        if response.hovered() {
            ui.output().cursor_icon = CursorIcon::Grab;
        }

        if response.drag_started() {
            self.drag_delta = Some(Vec2::ZERO);
        }
        if response.dragged() {
            ui.output().cursor_icon = CursorIcon::Grabbing;
            let delta = self.drag_delta.map(|s| s + response.drag_delta());

            self.drag_delta = delta;
        }
        if response.drag_released() {
            self.button_position+= self.drag_delta.unwrap();
            self.drag_delta = None;
        }
    }
}

fn main() {
    let options = NativeOptions::default();
    run_native(
        "My App",
        options,
        Box::new(|_cc| Box::new(MyApp::default())),
    )
}

This works in the sense that the button is moved the same amount as the mouse while the mouse button was pressed but there are two problems:

1. The widget doesn't follow the mouse while dragging. In the drag and drop demo this is done by moving the body into a new layer but I don't see how I can do this in my code because body is already moved into ui.scope().
2. You can drag the button not only from the button itself but also from any position to the top left of the button. Could this have something to do with scope() as well?

I'm still new to egui and gui programming in general so it's possible that the way I'm approaching this is just not optimal. Any pointers would be very welcome. Thanks.

[avsaase]

A solution (workaround?) to the first issue is to directly update the button_position in every frame when the widget is dragged. This also simplifies the code a lot:

pub fn drag(&mut self, ui: &mut Ui, id: Id, body: impl FnOnce(&mut Ui)) {
        let response = ui.scope(body).response;
        let response = ui.interact(response.rect, id, Sense::drag());

        if response.hovered() {
            ui.output().cursor_icon = CursorIcon::Grab;
        }

        if response.dragged() {
            ui.output().cursor_icon = CursorIcon::Grabbing;
            self.image_position += response.drag_delta();
        }
    }

There seems to be some animation that indicates the button is being dragged so this might be good enough for my use case.

[sww1235]

Note that ui.output() doesn't work the same way now. You need to use ui.output_mut() instead and pass in a closure.