From 7b8df449470a2de753e96c7e272182c7883f7616 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cl=C3=A9ment=20L?= Date: Sat, 3 Oct 2026 18:04:58 +0200 Subject: [PATCH] Loupe: animated click-zoom with selectable 2:1 / 3:1 / 5:1 ratio Co-Authored-By: Claude Sonnet 5.5 --- crates/ui-egui/src/headless.rs | 19 +++++++++++++++++++ crates/ui-egui/src/panels/bottombar.rs | 10 ++++++++++ crates/ui-egui/src/panels/detail.rs | 22 +++++++++++++++++++--- crates/ui-egui/src/state.rs | 7 +++++++ 4 files changed, 55 insertions(+), 3 deletions(-) diff --git a/crates/ui-egui/src/headless.rs b/crates/ui-egui/src/headless.rs index c504a46f7..0624f8a52 100644 --- a/crates/ui-egui/src/headless.rs +++ b/crates/ui-egui/src/headless.rs @@ -1089,6 +1089,25 @@ mod tests { h.settle(SETTLE); } + /// A click on the image zooms to the chosen click-zoom ratio, animating the loupe, and a second click returns to Fit. + #[test] + fn click_zoom_ratio_animates() { + let mut h = demo([1000.0, 700.0]); + let t = Duration::from_secs(10); + h.request("ui.set", json!({"view": "detail", "right": "none"}), t); + h.settle(SETTLE); + h.app.ui.click_zoom = 300; + let fit = h.app.image_rect.unwrap(); + h.request("ui.clickWidget", json!({"id": "canvas:image", "fx": 0.5, "fy": 0.5}), t); + assert_eq!(h.app.ui.zoom, crate::state::Zoom::Percent(300)); + assert!(h.app.ui.zoom_anim, "animation started"); + h.settle(SETTLE); + assert!(!h.app.ui.zoom_anim, "animation finished"); + assert!(h.app.image_rect.unwrap().width() > fit.width()); + h.request("ui.clickWidget", json!({"id": "canvas:image", "fx": 0.5, "fy": 0.5}), t); + assert_eq!(h.app.ui.zoom, crate::state::Zoom::Fit); + } + /// The Navigator appears when zoomed in; clicking it pans to that point. #[test] fn navigator_pans_the_zoomed_loupe() { diff --git a/crates/ui-egui/src/panels/bottombar.rs b/crates/ui-egui/src/panels/bottombar.rs index a08f520a0..533fe11aa 100644 --- a/crates/ui-egui/src/panels/bottombar.rs +++ b/crates/ui-egui/src/panels/bottombar.rs @@ -163,6 +163,16 @@ pub fn show(app: &mut LightcraftApp, ui: &mut egui::Ui) { } } }); + child.add_space(6.0); + let cz = + crate::widgets::dropdown(&mut child, "clickZoom", &format!("Click {}:1", app.ui.click_zoom / 100), t.font(13.0), t.text_label); + egui::Popup::menu(&cz).show(|ui| { + for n in [2u32, 3, 5] { + if ui.selectable_label(app.ui.click_zoom == n * 100, format!("{n}:1")).clicked() { + app.ui.click_zoom = n * 100; + } + } + }); } else { // thumbnail size slider let (r, resp) = child.allocate_exact_size(vec2(110.0, 20.0), Sense::click_and_drag()); diff --git a/crates/ui-egui/src/panels/detail.rs b/crates/ui-egui/src/panels/detail.rs index ecbb0e10a..fb0b7eea6 100644 --- a/crates/ui-egui/src/panels/detail.rs +++ b/crates/ui-egui/src/panels/detail.rs @@ -124,6 +124,19 @@ pub(crate) fn fit_rect(area: Rect, aspect: f32, zoom: Zoom, img_px: [usize; 2], Rect::from_center_size(c, vec2(w, h)) } +/// Ease the loupe rect toward `target` while a click-zoom animation runs; otherwise follow it exactly. +fn animated_rect(ctx: &egui::Context, anim: &mut bool, target: Rect) -> Rect { + let t = if *anim { 0.22 } else { 0.0 }; + let id = egui::Id::new("loupe_anim"); + let v = |k: &str, x: f32| ctx.animate_value_with_time(id.with(k), x, t); + let (c, s) = (target.center(), target.size()); + let r = Rect::from_center_size(pos2(v("cx", c.x), v("cy", c.y)), vec2(v("w", s.x), v("h", s.y))); + if *anim && (r.center() - c).abs().max_elem() < 0.5 && (r.size() - s).abs().max_elem() < 0.5 { + *anim = false; + } + r +} + pub fn show(app: &mut LightcraftApp, ui: &mut egui::Ui) { let t = Tokens::get(ui.ctx()); let full = ui.max_rect(); @@ -177,7 +190,8 @@ pub fn show(app: &mut LightcraftApp, ui: &mut egui::Ui) { _ => vec![area], }; let main_area = *areas.last().unwrap_or(&area); - let img_rect = fit_rect(main_area, aspect, app.ui.zoom, native, ppp, app.ui.pan); + let target_rect = fit_rect(main_area, aspect, app.ui.zoom, native, ppp, app.ui.pan); + let img_rect = animated_rect(ui.ctx(), &mut app.ui.zoom_anim, target_rect); app.image_rect = Some(img_rect); // request renders: the loupe at display resolution (drafts during drags) let interacting = app.session.interaction.is_some(); @@ -580,7 +594,7 @@ fn general_interaction( } return; } - // click toggles Fit ↔ 100 % at the clicked point; drag pans when zoomed + // click toggles Fit ↔ the click-zoom ratio (2:1/3:1/5:1) at the clicked point; drag pans when zoomed let zoomed = img.width() > canvas.width() + 1.0 || img.height() > canvas.height() + 1.0; if resp.double_clicked() || (resp.clicked() && !zoomed) { if let Some(q) = resp.interact_pointer_pos() { @@ -588,9 +602,11 @@ fn general_interaction( let v = ((q.y - img.top()) / img.height()).clamp(0.0, 1.0); app.ui.pan = (u, v); } - app.ui.zoom = if matches!(app.ui.zoom, Zoom::Fit) { Zoom::Percent(100) } else { Zoom::Fit }; + app.ui.zoom = if matches!(app.ui.zoom, Zoom::Fit) { Zoom::Percent(app.ui.click_zoom) } else { Zoom::Fit }; + app.ui.zoom_anim = true; } else if resp.clicked() && zoomed { app.ui.zoom = Zoom::Fit; + app.ui.zoom_anim = true; } if zoomed { ui.ctx().set_cursor_icon(if resp.dragged() { egui::CursorIcon::Grabbing } else { egui::CursorIcon::Grab }); diff --git a/crates/ui-egui/src/state.rs b/crates/ui-egui/src/state.rs index 3bd16407e..5c6eb11a5 100644 --- a/crates/ui-egui/src/state.rs +++ b/crates/ui-egui/src/state.rs @@ -189,6 +189,11 @@ pub struct UiState { pub zoom: Zoom, /// Pan offset of the loupe when zoomed (image-normalized centre). pub pan: (f32, f32), + /// Zoom applied by a click on the image, in percent (200 = 2:1). + pub click_zoom: u32, + /// Animate the loupe rect toward its target (set by a click-zoom). + #[serde(skip)] + pub zoom_anim: bool, pub before_after: BeforeAfter, pub thumb_size: f32, /// Open Edit sections by id. @@ -470,6 +475,8 @@ impl Default for UiState { filmstrip: true, zoom: Zoom::Fit, pan: (0.5, 0.5), + click_zoom: 200, + zoom_anim: false, before_after: BeforeAfter::Off, thumb_size: 220.0, open_sections: vec!["light".into()],