how to listen for MouseWheel on a egui Image ?

[m172021]

Using code outside of Egui, I am rendering a "map" to a Texture, which I then display in Egui as an Image.

I can display the Image right now. I can also listen for drag events on the img via:

let resp = ui.add(img.sense(Sense::drag()));

this is enough for panning left/right up/down

I also want to intercept MouseWheel events on the image (so I can call the underlying custom wgpu map rendering code to zoom in/out).

How do I listen to MouseWheel events on this egui Image ?

Thanks!

[YgorSouza]

This isn't available as a method in the Response like hovered() and clicked(), but you can get the scroll wheel events from ui.input() and use them when the image response is hovered. Here is a sample based on the hello_world example:

Click to open example

struct MyApp {
    age: u32,
}

impl Default for MyApp {
    fn default() -> Self {
        Self { age: 42 }
    }
}

impl eframe::App for MyApp {
    fn update(&mut self, ctx: &egui::Context, _frame: &mut eframe::Frame) {
        egui::CentralPanel::default().show(ctx, |ui| {
            ui.label(format!("N = {}", self.age));
            let response = ui.image(egui::include_image!(
                "../../../crates/egui/assets/ferris.png"
            ));
            if response.hovered() {
                let delta = ui.input(|i| {
                    i.events.iter().find_map(|e| match e {
                        egui::Event::MouseWheel {
                            unit: _,
                            delta,
                            modifiers,
                        } if modifiers.command_only() => Some(*delta),
                        _ => None,
                    })
                });
                if let Some(delta) = delta {
                    self.age = self
                        .age
                        .wrapping_add_signed(delta.max_elem().signum() as i32);
                }
            }
        });
    }
}

Screencast.from.2024-05-23.19-19-36.mp4

If you just want to use the zoom and scroll events as defined by egui (e.g., Ctrl to zoom, Shift to scroll horizontally), you can also do what the plot widget does:

egui/crates/egui_plot/src/lib.rs

Lines 1093 to 1130 in a98c42e

	// Note: we catch zoom/pan if the response contains the pointer, even if it isn't hovered.
	// For instance: The user is painting another interactive widget on top of the plot
	// but they still want to be able to pan/zoom the plot.
	if let (true, Some(hover_pos)) = (
	response.contains_pointer,
	ui.input(|i| i.pointer.hover_pos()),
	) {
	if allow_zoom.any() {
	let mut zoom_factor = if data_aspect.is_some() {
	Vec2::splat(ui.input(|i| i.zoom_delta()))
	} else {
	ui.input(|i| i.zoom_delta_2d())
	};
	if !allow_zoom.x {
	zoom_factor.x = 1.0;
	}
	if !allow_zoom.y {
	zoom_factor.y = 1.0;
	}
	if zoom_factor != Vec2::splat(1.0) {
	mem.transform.zoom(zoom_factor, hover_pos);
	mem.auto_bounds = mem.auto_bounds.and(!allow_zoom);
	}
	}
	if allow_scroll.any() {
	let mut scroll_delta = ui.input(|i| i.smooth_scroll_delta);
	if !allow_scroll.x {
	scroll_delta.x = 0.0;
	}
	if !allow_scroll.y {
	scroll_delta.y = 0.0;
	}
	if scroll_delta != Vec2::ZERO {
	mem.transform.translate_bounds(-scroll_delta);
	mem.auto_bounds = false.into();
	}
	}
	}