leyoda/noctua
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(viewer): implement keyboard and button zoom/pan controls

Browse source 
- Fork cosmic::iced viewer widget to enable external state control
- Add bidirectional state synchronization between viewer and AppModel
- Implement ViewerStateChanged message for mouse interaction feedback
- Fix pixel-perfect rendering at 100% zoom (ActualSize mode)
- Ensure smooth interaction between mouse, keyboard, and button controls

This allows zoom/pan to work via:
- Keyboard shortcuts (+/-, Ctrl+arrows)
- Future toolbar buttons
- Mouse wheel and drag (existing functionality preserved)

The viewer state now properly syncs in both directions:
- External controls (keyboard/buttons) → update viewer state via diff()
- Mouse interactions → update AppModel via ViewerStateChanged message

Closes: Zoom/pan via keyboard and buttons now functional
This commit is contained in:
mow 2026-01-15 18:10:57 +01:00
parent 2905a3f6f1
commit 69f22bafcd
5 changed files with 564 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

68
src/app/view/canvas.rs
View file

@ -1,12 +1,13 @@
// SPDX-License-Identifier: GPL-3.0-or-later
// src/app/view/canvas.rs
//
// Renders the center canvas area with the current document.
// Render the center canvas area with the current document.
use cosmic::iced::{Alignment, Length};
use cosmic::widget::{container, image, text, Column, Row};
use cosmic::iced::{ContentFit, Length};
use cosmic::widget::{container, text};
use cosmic::Element;
use super::image_viewer::Viewer;
use crate::app::model::ViewMode;
use crate::app::{AppMessage, AppModel};
use crate::fl;
@ -16,51 +17,40 @@ pub fn view(model: &AppModel) -> Element<'_, AppMessage> {
if let Some(doc) = &model.document {
let handle = doc.handle();
let img_widget = match &model.view_mode {
ViewMode::Fit => {
// Fit mode: image scales to fill container while preserving aspect ratio.
image::Image::new(handle)
.width(Length::Fill)
.height(Length::Fill)
}
ViewMode::ActualSize => {
// 1:1 pixel size.
let (native_w, native_h) = doc.dimensions();
image::Image::new(handle)
.width(Length::Fixed(native_w as f32))
.height(Length::Fixed(native_h as f32))
}
ViewMode::Custom(zoom) => {
// Custom zoom factor applied to native size.
let (native_w, native_h) = doc.dimensions();
let scaled_w = (native_w as f32 * zoom).round();
let scaled_h = (native_h as f32 * zoom).round();
image::Image::new(handle)
.width(Length::Fixed(scaled_w))
.height(Length::Fixed(scaled_h))
}
// Determine zoom scale and content fit based on view mode
let (scale, content_fit) = match model.view_mode {
ViewMode::Fit => (1.0, ContentFit::Contain),
ViewMode::ActualSize => (1.0, ContentFit::None),
ViewMode::Custom(z) => (z, ContentFit::None),
};
// Center the image both horizontally and vertically.
Column::new()
// Use our forked viewer with external state control
let img_viewer = Viewer::new(handle)
.with_state(scale, model.pan_x, model.pan_y)
.on_state_change(|scale, offset_x, offset_y| {
AppMessage::ViewerStateChanged {
scale,
offset_x,
offset_y,
}
})
.width(Length::Fill)
.height(Length::Fill)
.content_fit(content_fit)
.min_scale(0.1)
.max_scale(20.0)
.scale_step(0.1);
container(img_viewer)
.width(Length::Fill)
.height(Length::Fill)
.align_x(Alignment::Center)
.push(
Row::new()
.push(img_widget)
.width(Length::Fill)
.height(Length::Fill)
.align_y(Alignment::Center),
)
.into()
} else {
// No document loaded placeholder.
// Placeholder when no document is loaded
container(text(fl!("no-document")))
.center_x(Length::Fill)
.center_y(Length::Fill)
.width(Length::Fill)
.height(Length::Fill)
.center(Length::Fill)
.into()
}
}