From 15f1566578b32baca5facd439af6c3d0e152320c Mon Sep 17 00:00:00 2001 From: gigas002 Date: Fri, 15 Mar 2024 21:54:49 +0900 Subject: [PATCH 1/5] Implement content_fit for viewer --- widget/src/image/viewer.rs | 128 +++++++++++++++---------------------- 1 file changed, 50 insertions(+), 78 deletions(-) diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs index 2e3fd7131c..fc57891150 100644 --- a/widget/src/image/viewer.rs +++ b/widget/src/image/viewer.rs @@ -1,4 +1,5 @@ //! Zoom and pan on an image. +use iced_renderer::core::ContentFit; use crate::core::event::{self, Event}; use crate::core::image; use crate::core::layout; @@ -23,6 +24,7 @@ pub struct Viewer { scale_step: f32, handle: Handle, filter_method: image::FilterMethod, + content_fit: ContentFit, } impl Viewer { @@ -37,6 +39,7 @@ impl Viewer { max_scale: 10.0, scale_step: 0.10, filter_method: image::FilterMethod::default(), + content_fit: ContentFit::Contain, } } @@ -46,6 +49,12 @@ impl Viewer { self } + /// Sets the [`iced_renderer::core::ContentFit`] of the [`Viewer`]. + pub fn content_fit(mut self, content_fit: ContentFit) -> Self { + self.content_fit = content_fit; + self + } + /// Sets the padding of the [`Viewer`]. pub fn padding(mut self, padding: impl Into) -> Self { self.padding = padding.into().0; @@ -117,36 +126,25 @@ where renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { - let Size { width, height } = renderer.dimensions(&self.handle); - - let mut size = limits.resolve( - self.width, - self.height, - Size::new(width as f32, height as f32), - ); - - let expansion_size = if height > width { - self.width - } else { - self.height + let image_size = { + let Size { width, height } = renderer.dimensions(&self.handle); + Size::new(width as f32, height as f32) + }; + let raw_size = limits.resolve(self.width, self.height, image_size); + let full_size = self.content_fit.fit(image_size, raw_size); + + let final_size = Size { + width: match self.width { + Length::Shrink => f32::min(raw_size.width, full_size.width), + _ => raw_size.width, + }, + height: match self.height { + Length::Shrink => f32::min(raw_size.height, full_size.height), + _ => raw_size.height, + }, }; - // Only calculate viewport sizes if the images are constrained to a limited space. - // If they are Fill|Portion let them expand within their allotted space. - match expansion_size { - Length::Shrink | Length::Fixed(_) => { - let aspect_ratio = width as f32 / height as f32; - let viewport_aspect_ratio = size.width / size.height; - if viewport_aspect_ratio > aspect_ratio { - size.width = width as f32 * size.height / height as f32; - } else { - size.height = height as f32 * size.width / width as f32; - } - } - Length::Fill | Length::FillPortion(_) => {} - } - - layout::Node::new(size) + layout::Node::new(final_size) } fn on_event( @@ -184,12 +182,7 @@ where }) .clamp(self.min_scale, self.max_scale); - let image_size = image_size( - renderer, - &self.handle, - state, - bounds.size(), - ); + let image_size = image_size(renderer, &self.handle, state, bounds.size(), self.content_fit); let factor = state.scale / previous_scale - 1.0; @@ -231,7 +224,7 @@ where } Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left)) => { let state = tree.state.downcast_mut::(); - + if state.cursor_grabbed_at.is_some() { state.cursor_grabbed_at = None; @@ -242,15 +235,9 @@ where } Event::Mouse(mouse::Event::CursorMoved { position }) => { let state = tree.state.downcast_mut::(); - + if let Some(origin) = state.cursor_grabbed_at { - let image_size = image_size( - renderer, - &self.handle, - state, - bounds.size(), - ); - + let image_size = image_size(renderer, &self.handle, state, bounds.size(), self.content_fit); let hidden_width = (image_size.width - bounds.width / 2.0) .max(0.0) .round(); @@ -321,32 +308,30 @@ where let state = tree.state.downcast_ref::(); let bounds = layout.bounds(); - let image_size = - image_size(renderer, &self.handle, state, bounds.size()); + let image_size = image_size(renderer, &self.handle, state, bounds.size(), self.content_fit); - let translation = { + let translation = { let image_top_left = Vector::new( - bounds.width / 2.0 - image_size.width / 2.0, - bounds.height / 2.0 - image_size.height / 2.0, + (bounds.width - image_size.width).max(0.0) / 2.0, + (bounds.height - image_size.height).max(0.0) / 2.0, ); image_top_left - state.offset(bounds, image_size) }; - renderer.with_layer(bounds, |renderer| { + let render = |renderer: &mut Renderer| { renderer.with_translation(translation, |renderer| { - image::Renderer::draw( - renderer, - self.handle.clone(), - self.filter_method, - Rectangle { - x: bounds.x, - y: bounds.y, - ..Rectangle::with_size(image_size) - }, - ); + let drawing_bounds = Rectangle { + width: image_size.width, + height: image_size.height, + ..bounds + }; + + renderer.draw(self.handle.clone(), self.filter_method, drawing_bounds); }); - }); + }; + + renderer.with_layer(bounds, render); } } @@ -417,27 +402,14 @@ pub fn image_size( handle: &::Handle, state: &State, bounds: Size, + content_fit: ContentFit, ) -> Size where Renderer: image::Renderer, { - let Size { width, height } = renderer.dimensions(handle); - - let (width, height) = { - let dimensions = (width as f32, height as f32); - - let width_ratio = bounds.width / dimensions.0; - let height_ratio = bounds.height / dimensions.1; - - let ratio = width_ratio.min(height_ratio); - let scale = state.scale; - - if ratio < 1.0 { - (dimensions.0 * ratio * scale, dimensions.1 * ratio * scale) - } else { - (dimensions.0 * scale, dimensions.1 * scale) - } - }; + let size = renderer.dimensions(handle); + let size = Size::new(size.width as f32, size.height as f32); + let size = content_fit.fit(size, bounds); - Size::new(width, height) + Size::new(size.width * state.scale, size.height * state.scale) } From c9453cd55d84f0dd2ad0050208863d036c98843f Mon Sep 17 00:00:00 2001 From: gigas002 Date: Fri, 15 Mar 2024 22:06:15 +0900 Subject: [PATCH 2/5] run cargo fmt --- widget/src/image/viewer.rs | 38 ++++++++++++++++++++++++++++++-------- 1 file changed, 30 insertions(+), 8 deletions(-) diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs index fc57891150..bd10e953ad 100644 --- a/widget/src/image/viewer.rs +++ b/widget/src/image/viewer.rs @@ -1,5 +1,4 @@ //! Zoom and pan on an image. -use iced_renderer::core::ContentFit; use crate::core::event::{self, Event}; use crate::core::image; use crate::core::layout; @@ -10,6 +9,7 @@ use crate::core::{ Clipboard, Element, Layout, Length, Pixels, Point, Rectangle, Shell, Size, Vector, Widget, }; +use iced_renderer::core::ContentFit; use std::hash::Hash; @@ -182,7 +182,13 @@ where }) .clamp(self.min_scale, self.max_scale); - let image_size = image_size(renderer, &self.handle, state, bounds.size(), self.content_fit); + let image_size = image_size( + renderer, + &self.handle, + state, + bounds.size(), + self.content_fit, + ); let factor = state.scale / previous_scale - 1.0; @@ -224,7 +230,7 @@ where } Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left)) => { let state = tree.state.downcast_mut::(); - + if state.cursor_grabbed_at.is_some() { state.cursor_grabbed_at = None; @@ -235,9 +241,15 @@ where } Event::Mouse(mouse::Event::CursorMoved { position }) => { let state = tree.state.downcast_mut::(); - + if let Some(origin) = state.cursor_grabbed_at { - let image_size = image_size(renderer, &self.handle, state, bounds.size(), self.content_fit); + let image_size = image_size( + renderer, + &self.handle, + state, + bounds.size(), + self.content_fit, + ); let hidden_width = (image_size.width - bounds.width / 2.0) .max(0.0) .round(); @@ -308,9 +320,15 @@ where let state = tree.state.downcast_ref::(); let bounds = layout.bounds(); - let image_size = image_size(renderer, &self.handle, state, bounds.size(), self.content_fit); + let image_size = image_size( + renderer, + &self.handle, + state, + bounds.size(), + self.content_fit, + ); - let translation = { + let translation = { let image_top_left = Vector::new( (bounds.width - image_size.width).max(0.0) / 2.0, (bounds.height - image_size.height).max(0.0) / 2.0, @@ -327,7 +345,11 @@ where ..bounds }; - renderer.draw(self.handle.clone(), self.filter_method, drawing_bounds); + renderer.draw( + self.handle.clone(), + self.filter_method, + drawing_bounds, + ); }); }; From 13bd106fc585034a7aba17b9c17589113274aaf5 Mon Sep 17 00:00:00 2001 From: gigas002 Date: Fri, 29 Mar 2024 20:55:21 +0900 Subject: [PATCH 3/5] Minor renaming refactoring --- widget/src/image/viewer.rs | 68 +++++++++++++++++++++----------------- 1 file changed, 38 insertions(+), 30 deletions(-) diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs index fba00028f6..e57857c189 100644 --- a/widget/src/image/viewer.rs +++ b/widget/src/image/viewer.rs @@ -6,10 +6,9 @@ use crate::core::mouse; use crate::core::renderer; use crate::core::widget::tree::{self, Tree}; use crate::core::{ - Clipboard, Element, Layout, Length, Pixels, Point, Rectangle, Shell, Size, - Vector, Widget, + Clipboard, ContentFit, Element, Layout, Length, Pixels, Point, Rectangle, + Shell, Size, Vector, Widget, }; -use iced_renderer::core::ContentFit; use std::hash::Hash; @@ -49,7 +48,7 @@ impl Viewer { self } - /// Sets the [`iced_renderer::core::ContentFit`] of the [`Viewer`]. + /// Sets the [`ContentFit`] of the [`Viewer`]. pub fn content_fit(mut self, content_fit: ContentFit) -> Self { self.content_fit = content_fit; self @@ -126,20 +125,26 @@ where renderer: &Renderer, limits: &layout::Limits, ) -> layout::Node { + // The raw w/h of the underlying image let image_size = { let Size { width, height } = renderer.measure_image(&self.handle); Size::new(width as f32, height as f32) }; + + // The size to be available to the widget prior to `Shrink`ing let raw_size = limits.resolve(self.width, self.height, image_size); - let full_size = self.content_fit.fit(image_size, raw_size); + // The uncropped size of the image when fit to the bounds above + let fit_size = self.content_fit.fit(image_size, raw_size); + + // Shrink the widget to fit the resized image, if requested let final_size = Size { width: match self.width { - Length::Shrink => f32::min(raw_size.width, full_size.width), + Length::Shrink => f32::min(raw_size.width, fit_size.width), _ => raw_size.width, }, height: match self.height { - Length::Shrink => f32::min(raw_size.height, full_size.height), + Length::Shrink => f32::min(raw_size.height, fit_size.height), _ => raw_size.height, }, }; @@ -182,7 +187,7 @@ where }) .clamp(self.min_scale, self.max_scale); - let image_size = image_size( + let scaled_size = scaled_image_size( renderer, &self.handle, state, @@ -199,12 +204,12 @@ where + state.current_offset * factor; state.current_offset = Vector::new( - if image_size.width > bounds.width { + if scaled_size.width > bounds.width { state.current_offset.x + adjustment.x } else { 0.0 }, - if image_size.height > bounds.height { + if scaled_size.height > bounds.height { state.current_offset.y + adjustment.y } else { 0.0 @@ -243,32 +248,32 @@ where let state = tree.state.downcast_mut::(); if let Some(origin) = state.cursor_grabbed_at { - let image_size = image_size( + let scaled_size = scaled_image_size( renderer, &self.handle, state, bounds.size(), self.content_fit, ); - let hidden_width = (image_size.width - bounds.width / 2.0) + let hidden_width = (scaled_size.width - bounds.width / 2.0) .max(0.0) .round(); - let hidden_height = (image_size.height + let hidden_height = (scaled_size.height - bounds.height / 2.0) .max(0.0) .round(); let delta = position - origin; - let x = if bounds.width < image_size.width { + let x = if bounds.width < scaled_size.width { (state.starting_offset.x - delta.x) .clamp(-hidden_width, hidden_width) } else { 0.0 }; - let y = if bounds.height < image_size.height { + let y = if bounds.height < scaled_size.height { (state.starting_offset.y - delta.y) .clamp(-hidden_height, hidden_height) } else { @@ -320,7 +325,7 @@ where let state = tree.state.downcast_ref::(); let bounds = layout.bounds(); - let image_size = image_size( + let image_size = scaled_image_size( renderer, &self.handle, state, @@ -329,21 +334,22 @@ where ); let translation = { - let image_top_left = Vector::new( - (bounds.width - image_size.width).max(0.0) / 2.0, - (bounds.height - image_size.height).max(0.0) / 2.0, - ); + let diff_w = bounds.width - image_size.width; + let diff_h = bounds.height - image_size.height; + + let image_top_left = match self.content_fit { + ContentFit::None => { + Vector::new(diff_w.max(0.0) / 2.0, diff_h.max(0.0) / 2.0) + } + _ => Vector::new(diff_w / 2.0, diff_h / 2.0), + }; image_top_left - state.offset(bounds, image_size) }; + let drawing_bounds = Rectangle::new(bounds.position(), image_size); let render = |renderer: &mut Renderer| { renderer.with_translation(translation, |renderer| { - let drawing_bounds = Rectangle { - width: image_size.width, - height: image_size.height, - ..bounds - }; renderer.draw_image( self.handle.clone(), self.filter_method, @@ -418,7 +424,7 @@ where /// Returns the bounds of the underlying image, given the bounds of /// the [`Viewer`]. Scaling will be applied and original aspect ratio /// will be respected. -pub fn image_size( +pub fn scaled_image_size( renderer: &Renderer, handle: &::Handle, state: &State, @@ -428,9 +434,11 @@ pub fn image_size( where Renderer: image::Renderer, { - let size = renderer.measure_image(handle); - let size = Size::new(size.width as f32, size.height as f32); - let size = content_fit.fit(size, bounds); + let image_size = { + let Size { width, height } = renderer.measure_image(handle); + Size::new(width as f32, height as f32) + }; + let fit_size = content_fit.fit(image_size, bounds); - Size::new(size.width * state.scale, size.height * state.scale) + Size::new(fit_size.width * state.scale, fit_size.height * state.scale) } From 22d55ccecbc546996f5fdbc07cff34d1a6d6ee44 Mon Sep 17 00:00:00 2001 From: gigas002 Date: Wed, 8 May 2024 19:18:13 +0900 Subject: [PATCH 4/5] Run cargo fmt --- widget/src/image/viewer.rs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs index 03a9d895b1..175ab63d7c 100644 --- a/widget/src/image/viewer.rs +++ b/widget/src/image/viewer.rs @@ -6,8 +6,8 @@ use crate::core::mouse; use crate::core::renderer; use crate::core::widget::tree::{self, Tree}; use crate::core::{ - Clipboard, ContentFit, Element, Layout, Length, Pixels, Point, Radians, Rectangle, - Shell, Size, Vector, Widget, + Clipboard, ContentFit, Element, Layout, Length, Pixels, Point, Radians, + Rectangle, Shell, Size, Vector, Widget, }; /// A frame that displays an image with the ability to zoom in/out and pan. From c95e29696251b957552bcfef356bcfabe213b93c Mon Sep 17 00:00:00 2001 From: gigas002 Date: Fri, 10 May 2024 01:31:23 +0000 Subject: [PATCH 5/5] Make viewer widget inner naming and syntax closer to image widget --- widget/src/image/viewer.rs | 52 ++++++++++++++++++++------------------ 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/widget/src/image/viewer.rs b/widget/src/image/viewer.rs index 175ab63d7c..b8b69b60aa 100644 --- a/widget/src/image/viewer.rs +++ b/widget/src/image/viewer.rs @@ -1,6 +1,6 @@ //! Zoom and pan on an image. use crate::core::event::{self, Event}; -use crate::core::image; +use crate::core::image::{self, FilterMethod}; use crate::core::layout; use crate::core::mouse; use crate::core::renderer; @@ -20,27 +20,27 @@ pub struct Viewer { max_scale: f32, scale_step: f32, handle: Handle, - filter_method: image::FilterMethod, + filter_method: FilterMethod, content_fit: ContentFit, } impl Viewer { /// Creates a new [`Viewer`] with the given [`State`]. - pub fn new(handle: Handle) -> Self { + pub fn new>(handle: T) -> Self { Viewer { - handle, + handle: handle.into(), padding: 0.0, width: Length::Shrink, height: Length::Shrink, min_scale: 0.25, max_scale: 10.0, scale_step: 0.10, - filter_method: image::FilterMethod::default(), - content_fit: ContentFit::Contain, + filter_method: FilterMethod::default(), + content_fit: ContentFit::default(), } } - /// Sets the [`image::FilterMethod`] of the [`Viewer`]. + /// Sets the [`FilterMethod`] of the [`Viewer`]. pub fn filter_method(mut self, filter_method: image::FilterMethod) -> Self { self.filter_method = filter_method; self @@ -124,25 +124,24 @@ where limits: &layout::Limits, ) -> layout::Node { // The raw w/h of the underlying image - let image_size = { - let Size { width, height } = renderer.measure_image(&self.handle); - Size::new(width as f32, height as f32) - }; + let image_size = renderer.measure_image(&self.handle); + let image_size = + Size::new(image_size.width as f32, image_size.height as f32); // The size to be available to the widget prior to `Shrink`ing let raw_size = limits.resolve(self.width, self.height, image_size); // The uncropped size of the image when fit to the bounds above - let fit_size = self.content_fit.fit(image_size, raw_size); + let full_size = self.content_fit.fit(image_size, raw_size); // Shrink the widget to fit the resized image, if requested let final_size = Size { width: match self.width { - Length::Shrink => f32::min(raw_size.width, fit_size.width), + Length::Shrink => f32::min(raw_size.width, full_size.width), _ => raw_size.width, }, height: match self.height { - Length::Shrink => f32::min(raw_size.height, fit_size.height), + Length::Shrink => f32::min(raw_size.height, full_size.height), _ => raw_size.height, }, }; @@ -323,7 +322,7 @@ where let state = tree.state.downcast_ref::(); let bounds = layout.bounds(); - let image_size = scaled_image_size( + let final_size = scaled_image_size( renderer, &self.handle, state, @@ -332,8 +331,8 @@ where ); let translation = { - let diff_w = bounds.width - image_size.width; - let diff_h = bounds.height - image_size.height; + let diff_w = bounds.width - final_size.width; + let diff_h = bounds.height - final_size.height; let image_top_left = match self.content_fit { ContentFit::None => { @@ -342,9 +341,10 @@ where _ => Vector::new(diff_w / 2.0, diff_h / 2.0), }; - image_top_left - state.offset(bounds, image_size) + image_top_left - state.offset(bounds, final_size) }; - let drawing_bounds = Rectangle::new(bounds.position(), image_size); + + let drawing_bounds = Rectangle::new(bounds.position(), final_size); let render = |renderer: &mut Renderer| { renderer.with_translation(translation, |renderer| { @@ -434,11 +434,13 @@ pub fn scaled_image_size( where Renderer: image::Renderer, { - let image_size = { - let Size { width, height } = renderer.measure_image(handle); - Size::new(width as f32, height as f32) - }; - let fit_size = content_fit.fit(image_size, bounds); + let Size { width, height } = renderer.measure_image(handle); + let image_size = Size::new(width as f32, height as f32); + + let adjusted_fit = content_fit.fit(image_size, bounds); - Size::new(fit_size.width * state.scale, fit_size.height * state.scale) + Size::new( + adjusted_fit.width * state.scale, + adjusted_fit.height * state.scale, + ) }