Add ImagePane widget
This commit is contained in:
Cory Forsstrom
parent
5324eb1024
commit
0d8cefbf2d
@ -25,6 +25,7 @@ pub mod checkbox;
|
||||
pub mod column;
|
||||
pub mod container;
|
||||
pub mod image;
|
||||
pub mod image_pane;
|
||||
pub mod pane_grid;
|
||||
pub mod progress_bar;
|
||||
pub mod radio;
|
||||
@ -47,6 +48,8 @@ pub use container::Container;
|
||||
#[doc(no_inline)]
|
||||
pub use image::Image;
|
||||
#[doc(no_inline)]
|
||||
pub use image_pane::ImagePane;
|
||||
#[doc(no_inline)]
|
||||
pub use pane_grid::PaneGrid;
|
||||
#[doc(no_inline)]
|
||||
pub use progress_bar::ProgressBar;
|
||||
|
||||
407
native/src/widget/image_pane.rs
Normal file
407
native/src/widget/image_pane.rs
Normal file
@ -0,0 +1,407 @@
|
||||
//! Zoom and pan on an image.
|
||||
use crate::{
|
||||
image,
|
||||
input::{self, mouse},
|
||||
layout, Clipboard, Element, Event, Hasher, Layout, Length, Point,
|
||||
Rectangle, Size, Widget,
|
||||
};
|
||||
|
||||
use std::{f32, hash::Hash, u32};
|
||||
|
||||
/// A widget that can display an image with the ability to zoom in/out and pan.
|
||||
#[allow(missing_debug_implementations)]
|
||||
pub struct ImagePane<'a> {
|
||||
state: &'a mut State,
|
||||
padding: u16,
|
||||
width: Length,
|
||||
height: Length,
|
||||
max_width: u32,
|
||||
max_height: u32,
|
||||
handle: image::Handle,
|
||||
}
|
||||
|
||||
impl<'a> ImagePane<'a> {
|
||||
/// Creates a new [`ImagePane`] with the given [`State`] and [`Handle`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
/// [`State`]: struct.State.html
|
||||
/// [`Handle`]: ../image/struct.Handle.html
|
||||
pub fn new(state: &'a mut State, handle: image::Handle) -> Self {
|
||||
ImagePane {
|
||||
state,
|
||||
padding: 0,
|
||||
width: Length::Shrink,
|
||||
height: Length::Shrink,
|
||||
max_width: u32::MAX,
|
||||
max_height: u32::MAX,
|
||||
handle,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the padding of the [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
pub fn padding(mut self, units: u16) -> Self {
|
||||
self.padding = units;
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the width of the [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
pub fn width(mut self, width: Length) -> Self {
|
||||
self.width = width;
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the height of the [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
pub fn height(mut self, height: Length) -> Self {
|
||||
self.height = height;
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the max width of the [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
pub fn max_width(mut self, max_width: u32) -> Self {
|
||||
self.max_width = max_width;
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the max height of the [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
pub fn max_height(mut self, max_height: u32) -> Self {
|
||||
self.max_height = max_height;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl<'a, Message, Renderer> Widget<Message, Renderer> for ImagePane<'a>
|
||||
where
|
||||
Renderer: self::Renderer + image::Renderer,
|
||||
{
|
||||
fn width(&self) -> Length {
|
||||
self.width
|
||||
}
|
||||
|
||||
fn height(&self) -> Length {
|
||||
self.height
|
||||
}
|
||||
|
||||
fn layout(
|
||||
&self,
|
||||
_renderer: &Renderer,
|
||||
limits: &layout::Limits,
|
||||
) -> layout::Node {
|
||||
let padding = f32::from(self.padding);
|
||||
|
||||
let limits = limits
|
||||
.max_width(self.max_width)
|
||||
.max_height(self.max_height)
|
||||
.width(self.width)
|
||||
.height(self.height)
|
||||
.pad(padding);
|
||||
|
||||
let size = limits.resolve(Size::INFINITY);
|
||||
|
||||
layout::Node::new(size)
|
||||
}
|
||||
|
||||
fn on_event(
|
||||
&mut self,
|
||||
event: Event,
|
||||
layout: Layout<'_>,
|
||||
cursor_position: Point,
|
||||
_messages: &mut Vec<Message>,
|
||||
renderer: &Renderer,
|
||||
_clipboard: Option<&dyn Clipboard>,
|
||||
) {
|
||||
let bounds = layout.bounds();
|
||||
let is_mouse_over = bounds.contains(cursor_position);
|
||||
|
||||
let image_bounds = {
|
||||
let (width, height) = renderer.dimensions(&self.handle);
|
||||
|
||||
let dimensions = if let Some(scale) = self.state.scale {
|
||||
(width as f32 * scale, height as f32 * scale)
|
||||
} else {
|
||||
let dimensions = (width as f32, height as f32);
|
||||
|
||||
let width_scale = bounds.width / dimensions.0;
|
||||
let height_scale = bounds.height / dimensions.1;
|
||||
|
||||
let scale = width_scale.min(height_scale);
|
||||
|
||||
if scale < 1.0 {
|
||||
(dimensions.0 * scale, dimensions.1 * scale)
|
||||
} else {
|
||||
(dimensions.0, dimensions.1)
|
||||
}
|
||||
};
|
||||
|
||||
Rectangle {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: dimensions.0,
|
||||
height: dimensions.1,
|
||||
}
|
||||
};
|
||||
|
||||
if is_mouse_over {
|
||||
match event {
|
||||
Event::Mouse(mouse::Event::WheelScrolled { delta }) => {
|
||||
match delta {
|
||||
mouse::ScrollDelta::Lines { y, .. } => {
|
||||
// TODO: Configurable step and limits
|
||||
if y > 0.0 {
|
||||
self.state.scale = Some(
|
||||
(self.state.scale.unwrap_or(1.0) + 0.25)
|
||||
.min(10.0),
|
||||
);
|
||||
} else {
|
||||
self.state.scale = Some(
|
||||
(self.state.scale.unwrap_or(1.0) - 0.25)
|
||||
.max(0.25),
|
||||
);
|
||||
}
|
||||
}
|
||||
mouse::ScrollDelta::Pixels { y, .. } => {
|
||||
// TODO: Configurable step and limits
|
||||
if y > 0.0 {
|
||||
self.state.scale = Some(
|
||||
(self.state.scale.unwrap_or(1.0) + 0.25)
|
||||
.min(10.0),
|
||||
);
|
||||
} else {
|
||||
self.state.scale = Some(
|
||||
(self.state.scale.unwrap_or(1.0) - 0.25)
|
||||
.max(0.25),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Event::Mouse(mouse::Event::Input { button, state }) => {
|
||||
if button == mouse::Button::Left {
|
||||
match state {
|
||||
input::ButtonState::Pressed => {
|
||||
self.state.starting_cursor_pos = Some((
|
||||
cursor_position.x,
|
||||
cursor_position.y,
|
||||
));
|
||||
|
||||
self.state.starting_offset =
|
||||
self.state.current_offset;
|
||||
}
|
||||
input::ButtonState::Released => {
|
||||
self.state.starting_cursor_pos = None
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Event::Mouse(mouse::Event::CursorMoved { x, y }) => {
|
||||
if self.state.is_cursor_clicked() {
|
||||
self.state.pan(x, y, bounds, image_bounds);
|
||||
}
|
||||
}
|
||||
_ => {}
|
||||
}
|
||||
} else if let Event::Mouse(mouse::Event::Input { button, state }) =
|
||||
event
|
||||
{
|
||||
if button == mouse::Button::Left
|
||||
&& state == input::ButtonState::Released
|
||||
{
|
||||
self.state.starting_cursor_pos = None;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fn draw(
|
||||
&self,
|
||||
renderer: &mut Renderer,
|
||||
_defaults: &Renderer::Defaults,
|
||||
layout: Layout<'_>,
|
||||
cursor_position: Point,
|
||||
) -> Renderer::Output {
|
||||
let bounds = layout.bounds();
|
||||
|
||||
let image_bounds = {
|
||||
let (width, height) = renderer.dimensions(&self.handle);
|
||||
|
||||
let dimensions = if let Some(scale) = self.state.scale {
|
||||
(width as f32 * scale, height as f32 * scale)
|
||||
} else {
|
||||
let dimensions = (width as f32, height as f32);
|
||||
|
||||
let width_scale = bounds.width / dimensions.0;
|
||||
let height_scale = bounds.height / dimensions.1;
|
||||
|
||||
let scale = width_scale.min(height_scale);
|
||||
|
||||
if scale < 1.0 {
|
||||
(dimensions.0 * scale, dimensions.1 * scale)
|
||||
} else {
|
||||
(dimensions.0, dimensions.1)
|
||||
}
|
||||
};
|
||||
|
||||
Rectangle {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: dimensions.0,
|
||||
height: dimensions.1,
|
||||
}
|
||||
};
|
||||
|
||||
let offset = self.state.offset(bounds, image_bounds);
|
||||
|
||||
let is_mouse_over = bounds.contains(cursor_position);
|
||||
|
||||
self::Renderer::draw(
|
||||
renderer,
|
||||
&self.state,
|
||||
bounds,
|
||||
image_bounds,
|
||||
offset,
|
||||
self.handle.clone(),
|
||||
is_mouse_over,
|
||||
)
|
||||
}
|
||||
|
||||
fn hash_layout(&self, state: &mut Hasher) {
|
||||
struct Marker;
|
||||
std::any::TypeId::of::<Marker>().hash(state);
|
||||
|
||||
self.width.hash(state);
|
||||
self.height.hash(state);
|
||||
self.max_width.hash(state);
|
||||
self.max_height.hash(state);
|
||||
self.padding.hash(state);
|
||||
|
||||
self.handle.hash(state);
|
||||
}
|
||||
}
|
||||
|
||||
/// The local state of an [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
#[derive(Debug, Clone, Copy, Default)]
|
||||
pub struct State {
|
||||
scale: Option<f32>,
|
||||
starting_offset: (f32, f32),
|
||||
current_offset: (f32, f32),
|
||||
starting_cursor_pos: Option<(f32, f32)>,
|
||||
}
|
||||
|
||||
impl State {
|
||||
/// Creates a new [`State`] with the scrollbar located at the top.
|
||||
///
|
||||
/// [`State`]: struct.State.html
|
||||
pub fn new() -> Self {
|
||||
State::default()
|
||||
}
|
||||
|
||||
/// Apply a panning offset to the current [`State`], given the bounds of
|
||||
/// the [`ImagePane`] and its image.
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
/// [`State`]: struct.State.html
|
||||
fn pan(
|
||||
&mut self,
|
||||
x: f32,
|
||||
y: f32,
|
||||
bounds: Rectangle,
|
||||
image_bounds: Rectangle,
|
||||
) {
|
||||
let delta_x = x - self.starting_cursor_pos.unwrap().0;
|
||||
let delta_y = y - self.starting_cursor_pos.unwrap().1;
|
||||
|
||||
if bounds.width < image_bounds.width {
|
||||
self.current_offset.0 = (self.starting_offset.0 - delta_x)
|
||||
.max(0.0)
|
||||
.min((image_bounds.width - bounds.width) as f32);
|
||||
}
|
||||
|
||||
if bounds.height < image_bounds.height {
|
||||
self.current_offset.1 = (self.starting_offset.1 - delta_y)
|
||||
.max(0.0)
|
||||
.min((image_bounds.height - bounds.height) as f32);
|
||||
}
|
||||
}
|
||||
|
||||
/// Returns the current clipping offset of the [`State`], given the bounds
|
||||
/// of the [`ImagePane`] and its contents.
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
/// [`State`]: struct.State.html
|
||||
fn offset(&self, bounds: Rectangle, image_bounds: Rectangle) -> (u32, u32) {
|
||||
let hidden_width = ((image_bounds.width - bounds.width) as f32)
|
||||
.max(0.0)
|
||||
.round() as u32;
|
||||
|
||||
let hidden_height = ((image_bounds.height - bounds.height) as f32)
|
||||
.max(0.0)
|
||||
.round() as u32;
|
||||
|
||||
(
|
||||
(self.current_offset.0).min(hidden_width as f32) as u32,
|
||||
(self.current_offset.1).min(hidden_height as f32) as u32,
|
||||
)
|
||||
}
|
||||
|
||||
/// Returns if the left mouse button is still held down since clicking inside
|
||||
/// the [`ImagePane`].
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
/// [`State`]: struct.State.html
|
||||
pub fn is_cursor_clicked(&self) -> bool {
|
||||
self.starting_cursor_pos.is_some()
|
||||
}
|
||||
}
|
||||
|
||||
/// The renderer of an [`ImagePane`].
|
||||
///
|
||||
/// Your [renderer] will need to implement this trait before being
|
||||
/// able to use a [`ImagePane`] in your user interface.
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
/// [renderer]: ../../renderer/index.html
|
||||
pub trait Renderer: crate::Renderer + Sized {
|
||||
/// Draws the [`ImagePane`].
|
||||
///
|
||||
/// It receives:
|
||||
/// - the [`State`] of the [`ImagePane`]
|
||||
/// - the bounds of the [`ImagePane`] widget
|
||||
/// - the bounds of the scaled [`ImagePane`] image
|
||||
/// - the clipping x,y offset
|
||||
/// - the [`Handle`] to the underlying image
|
||||
/// - whether the mouse is over the [`ImagePane`] or not
|
||||
///
|
||||
/// [`ImagePane`]: struct.ImagePane.html
|
||||
/// [`State`]: struct.State.html
|
||||
/// [`Handle`]: ../image/struct.Handle.html
|
||||
fn draw(
|
||||
&mut self,
|
||||
state: &State,
|
||||
bounds: Rectangle,
|
||||
image_bounds: Rectangle,
|
||||
offset: (u32, u32),
|
||||
handle: image::Handle,
|
||||
is_mouse_over: bool,
|
||||
) -> Self::Output;
|
||||
}
|
||||
|
||||
impl<'a, Message, Renderer> From<ImagePane<'a>>
|
||||
for Element<'a, Message, Renderer>
|
||||
where
|
||||
Renderer: 'a + self::Renderer + image::Renderer,
|
||||
Message: 'a,
|
||||
{
|
||||
fn from(image_pane: ImagePane<'a>) -> Element<'a, Message, Renderer> {
|
||||
Element::new(image_pane)
|
||||
}
|
||||
}
|
||||
@ -33,6 +33,12 @@ mod platform {
|
||||
pub use iced_winit::image::{Handle, Image};
|
||||
}
|
||||
|
||||
#[cfg_attr(docsrs, doc(cfg(feature = "image")))]
|
||||
pub mod image_pane {
|
||||
//! Zoom and pan on an image.
|
||||
pub use iced_wgpu::image_pane::{ImagePane, State};
|
||||
}
|
||||
|
||||
#[cfg_attr(docsrs, doc(cfg(feature = "svg")))]
|
||||
pub mod svg {
|
||||
//! Display vector graphics in your user interface.
|
||||
@ -44,8 +50,8 @@ mod platform {
|
||||
#[doc(no_inline)]
|
||||
pub use {
|
||||
button::Button, checkbox::Checkbox, container::Container, image::Image,
|
||||
pane_grid::PaneGrid, progress_bar::ProgressBar, radio::Radio,
|
||||
scrollable::Scrollable, slider::Slider, svg::Svg,
|
||||
image_pane::ImagePane, pane_grid::PaneGrid, progress_bar::ProgressBar,
|
||||
radio::Radio, scrollable::Scrollable, slider::Slider, svg::Svg,
|
||||
text_input::TextInput,
|
||||
};
|
||||
|
||||
|
||||
@ -17,3 +17,5 @@ mod svg;
|
||||
|
||||
#[cfg(feature = "image")]
|
||||
mod image;
|
||||
#[cfg(feature = "image")]
|
||||
mod image_pane;
|
||||
|
||||
36
wgpu/src/renderer/widget/image_pane.rs
Normal file
36
wgpu/src/renderer/widget/image_pane.rs
Normal file
@ -0,0 +1,36 @@
|
||||
use crate::{Primitive, Renderer};
|
||||
use iced_native::{image, image_pane, MouseCursor, Rectangle, Vector};
|
||||
|
||||
impl image_pane::Renderer for Renderer {
|
||||
fn draw(
|
||||
&mut self,
|
||||
state: &image_pane::State,
|
||||
bounds: Rectangle,
|
||||
image_bounds: Rectangle,
|
||||
offset: (u32, u32),
|
||||
handle: image::Handle,
|
||||
is_mouse_over: bool,
|
||||
) -> Self::Output {
|
||||
(
|
||||
{
|
||||
Primitive::Clip {
|
||||
bounds,
|
||||
offset: Vector::new(offset.0, offset.1),
|
||||
content: Box::new(Primitive::Image {
|
||||
handle,
|
||||
bounds: image_bounds,
|
||||
}),
|
||||
}
|
||||
},
|
||||
{
|
||||
if state.is_cursor_clicked() {
|
||||
MouseCursor::Grabbing
|
||||
} else if is_mouse_over {
|
||||
MouseCursor::Grab
|
||||
} else {
|
||||
MouseCursor::OutOfBounds
|
||||
}
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -47,3 +47,11 @@ pub mod canvas;
|
||||
#[cfg(feature = "canvas")]
|
||||
#[doc(no_inline)]
|
||||
pub use canvas::Canvas;
|
||||
|
||||
#[cfg(feature = "image")]
|
||||
#[doc(no_inline)]
|
||||
pub mod image_pane;
|
||||
|
||||
#[cfg(feature = "image")]
|
||||
#[doc(no_inline)]
|
||||
pub use image_pane::ImagePane;
|
||||
|
||||
6
wgpu/src/widget/image_pane.rs
Normal file
6
wgpu/src/widget/image_pane.rs
Normal file
@ -0,0 +1,6 @@
|
||||
//! Zoom and pan on an image.
|
||||
|
||||
pub use iced_native::image_pane::State;
|
||||
|
||||
/// A widget that can display an image with the ability to zoom in/out and pan.
|
||||
pub type ImagePane<'a> = iced_native::ImagePane<'a>;
|
||||
Loading…
Reference in New Issue
Block a user