me/iced
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reworked Scrollable to account for lack of widget order guarantees.

Browse source 
Fixed thumb "snapping" bug on scrollable when cursor is out of bounds.
This commit is contained in:
bungoboingo 2022-12-24 21:27:44 -08:00
parent d91f4f6aa7
commit 9f85e0c721
9 changed files with 624 additions and 697 deletions
Download patch file Download diff file Expand all files Collapse all files

8
core/src/point.rs
View file

@ -75,3 +75,11 @@ impl std::ops::Sub<Point> for Point {
Vector::new(self.x - point.x, self.y - point.y)
}
}
impl std::ops::Add<Point> for Point {
type Output = Point;
fn add(self, point: Point) -> Point {
Point::new(self.x + point.x, self.y + point.y)
}
}

6
core/src/rectangle.rs
View file

@ -111,6 +111,12 @@ impl Rectangle<f32> {
}
}
impl std::cmp::PartialOrd for Rectangle<f32> {
fn partial_cmp(&self, other: &Self) -> Option<std::cmp::Ordering> {
(self.width * self.height).partial_cmp(&(other.width * other.height))
}
}
impl std::ops::Mul<f32> for Rectangle<f32> {
type Output = Self;

2
examples/scrollable/Cargo.toml
View file

@ -7,4 +7,4 @@ publish = false
[dependencies]
iced = { path = "../..", features = ["debug"] }
lazy_static = "1.4"
once_cell = "1.16.0"

134
examples/scrollable/src/main.rs
View file

@ -1,15 +1,13 @@
use iced::widget::scrollable::{Scrollbar, Scroller};
use iced::widget::scrollable::{Properties, Scrollbar, Scroller};
use iced::widget::{
button, column, container, horizontal_space, progress_bar, radio, row,
scrollable, slider, text, vertical_space,
};
use iced::{executor, theme, Alignment, Color, Vector};
use iced::{executor, theme, Alignment, Color, Point};
use iced::{Application, Command, Element, Length, Settings, Theme};
use lazy_static::lazy_static;
use once_cell::sync::Lazy;
lazy_static! {
static ref SCROLLABLE_ID: scrollable::Id = scrollable::Id::unique();
}
static SCROLLABLE_ID: Lazy<scrollable::Id> = Lazy::new(scrollable::Id::unique);
pub fn main() -> iced::Result {
ScrollableDemo::run(Settings::default())
@ -20,7 +18,7 @@ struct ScrollableDemo {
scrollbar_width: u16,
scrollbar_margin: u16,
scroller_width: u16,
current_scroll_offset: Vector<f32>,
current_scroll_offset: Point,
}
#[derive(Debug, Clone, Eq, PartialEq, Copy)]
@ -36,9 +34,9 @@ enum Message {
ScrollbarWidthChanged(u16),
ScrollbarMarginChanged(u16),
ScrollerWidthChanged(u16),
ScrollToBeginning(scrollable::Direction),
ScrollToEnd(scrollable::Direction),
Scrolled(Vector<f32>),
ScrollToBeginning,
ScrollToEnd,
Scrolled(Point),
}
impl Application for ScrollableDemo {
@ -54,7 +52,7 @@ impl Application for ScrollableDemo {
scrollbar_width: 10,
scrollbar_margin: 0,
scroller_width: 10,
current_scroll_offset: Vector::new(0.0, 0.0),
current_scroll_offset: Point::ORIGIN,
},
Command::none(),
)
@ -67,10 +65,13 @@ impl Application for ScrollableDemo {
fn update(&mut self, message: Message) -> Command<Message> {
match message {
Message::SwitchDirection(direction) => {
self.current_scroll_offset = Vector::new(0.0, 0.0);
self.current_scroll_offset = Point::ORIGIN;
self.scrollable_direction = direction;
Command::none()
scrollable::snap_to(
SCROLLABLE_ID.clone(),
self.current_scroll_offset,
)
}
Message::ScrollbarWidthChanged(width) => {
self.scrollbar_width = width;
@ -87,40 +88,20 @@ impl Application for ScrollableDemo {
Command::none()
}
Message::ScrollToBeginning(direction) => {
match direction {
scrollable::Direction::Horizontal => {
self.current_scroll_offset.x = 0.0;
}
scrollable::Direction::Vertical => {
self.current_scroll_offset.y = 0.0;
}
}
Message::ScrollToBeginning => {
self.current_scroll_offset = Point::ORIGIN;
scrollable::snap_to(
SCROLLABLE_ID.clone(),
Vector::new(
self.current_scroll_offset.x,
self.current_scroll_offset.y,
),
self.current_scroll_offset,
)
}
Message::ScrollToEnd(direction) => {
match direction {
scrollable::Direction::Horizontal => {
self.current_scroll_offset.x = 1.0;
}
scrollable::Direction::Vertical => {
self.current_scroll_offset.y = 1.0;
}
}
Message::ScrollToEnd => {
self.current_scroll_offset = Point::new(1.0, 1.0);
scrollable::snap_to(
SCROLLABLE_ID.clone(),
Vector::new(
self.current_scroll_offset.x,
self.current_scroll_offset.y,
),
self.current_scroll_offset,
)
}
Message::Scrolled(offset) => {
@ -186,33 +167,29 @@ impl Application for ScrollableDemo {
.spacing(20)
.width(Length::Fill);
let scroll_to_end_button = |direction: scrollable::Direction| {
let scroll_to_end_button = || {
button("Scroll to end")
.padding(10)
.width(Length::Units(120))
.on_press(Message::ScrollToEnd(direction))
.on_press(Message::ScrollToEnd)
};
let scroll_to_beginning_button = |direction: scrollable::Direction| {
let scroll_to_beginning_button = || {
button("Scroll to beginning")
.padding(10)
.width(Length::Units(120))
.on_press(Message::ScrollToBeginning(direction))
.on_press(Message::ScrollToBeginning)
};
let scrollable_content: Element<Message> =
Element::from(match self.scrollable_direction {
Direction::Vertical => scrollable(
column![
scroll_to_end_button(scrollable::Direction::Vertical),
scroll_to_end_button(),
text("Beginning!"),
vertical_space(Length::Units(1200)),
text("Middle!"),
vertical_space(Length::Units(1200)),
text("End!"),
scroll_to_beginning_button(
scrollable::Direction::Vertical
),
scroll_to_beginning_button(),
]
.width(Length::Fill)
.align_items(Alignment::Center)
@ -220,22 +197,23 @@ impl Application for ScrollableDemo {
.spacing(40),
)
.height(Length::Fill)
.scrollbar_width(self.scrollbar_width)
.scrollbar_margin(self.scrollbar_margin)
.scroller_width(self.scroller_width)
.vertical_scroll(
Properties::new()
.width(self.scrollbar_width)
.margin(self.scrollbar_margin)
.scroller_width(self.scroller_width),
)
.id(SCROLLABLE_ID.clone())
.on_scroll(Message::Scrolled),
Direction::Horizontal => scrollable(
row![
scroll_to_end_button(scrollable::Direction::Horizontal),
scroll_to_end_button(),
text("Beginning!"),
horizontal_space(Length::Units(1200)),
text("Middle!"),
horizontal_space(Length::Units(1200)),
text("End!"),
scroll_to_beginning_button(
scrollable::Direction::Horizontal
),
scroll_to_beginning_button(),
]
.height(Length::Units(450))
.align_items(Alignment::Center)
@ -244,14 +222,12 @@ impl Application for ScrollableDemo {
)
.height(Length::Fill)
.horizontal_scroll(
scrollable::Horizontal::new()
.scrollbar_height(self.scrollbar_width)
.scrollbar_margin(self.scrollbar_margin)
.scroller_height(self.scroller_width),
Properties::new()
.width(self.scrollbar_width)
.margin(self.scrollbar_margin)
.scroller_width(self.scroller_width),
)
.style(theme::Scrollable::Custom(Box::new(
ScrollbarCustomStyle,
)))
.style(theme::Scrollable::custom(ScrollbarCustomStyle))
.id(SCROLLABLE_ID.clone())
.on_scroll(Message::Scrolled),
Direction::Multi => scrollable(
@ -261,45 +237,43 @@ impl Application for ScrollableDemo {
text("Let's do some scrolling!"),
vertical_space(Length::Units(2400))
],
scroll_to_end_button(scrollable::Direction::Horizontal),
scroll_to_end_button(),
text("Horizontal - Beginning!"),
horizontal_space(Length::Units(1200)),
//vertical content
column![
text("Horizontal - Middle!"),
scroll_to_end_button(
scrollable::Direction::Vertical
),
scroll_to_end_button(),
text("Vertical - Beginning!"),
vertical_space(Length::Units(1200)),
text("Vertical - Middle!"),
vertical_space(Length::Units(1200)),
text("Vertical - End!"),
scroll_to_beginning_button(
scrollable::Direction::Vertical
)
scroll_to_beginning_button(),
vertical_space(Length::Units(40)),
]
.align_items(Alignment::Fill)
.spacing(40),
horizontal_space(Length::Units(1200)),
text("Horizontal - End!"),
scroll_to_beginning_button(
scrollable::Direction::Horizontal
),
scroll_to_beginning_button(),
]
.align_items(Alignment::Center)
.padding([0, 40, 0, 40])
.spacing(40),
)
.height(Length::Fill)
.scrollbar_width(self.scrollbar_width)
.scrollbar_margin(self.scrollbar_margin)
.scroller_width(self.scroller_width)
.vertical_scroll(
Properties::new()
.width(self.scrollbar_width)
.margin(self.scrollbar_margin)
.scroller_width(self.scroller_width),
)
.horizontal_scroll(
scrollable::Horizontal::new()
.scrollbar_height(self.scrollbar_width)
.scrollbar_margin(self.scrollbar_margin)
.scroller_height(self.scroller_width),
Properties::new()
.width(self.scrollbar_width)
.margin(self.scrollbar_margin)
.scroller_width(self.scroller_width),
)
.style(theme::Scrollable::Custom(Box::new(
ScrollbarCustomStyle,

4
examples/websocket/src/main.rs
View file

@ -4,7 +4,7 @@ use iced::alignment::{self, Alignment};
use iced::widget::{
button, column, container, row, scrollable, text, text_input, Column,
};
use iced::{executor, Vector};
use iced::{executor, Point};
use iced::{
Application, Color, Command, Element, Length, Settings, Subscription, Theme,
};
@ -83,7 +83,7 @@ impl Application for WebSocket {
scrollable::snap_to(
MESSAGE_LOG.clone(),
Vector::new(0.0, 1.0),
Point::new(0.0, 1.0),
)
}
},

10
native/src/widget/operation/scrollable.rs
View file

@ -1,19 +1,19 @@
//! Operate on widgets that can be scrolled.
use crate::widget::{Id, Operation};
use iced_core::Vector;
use iced_core::Point;
/// The internal state of a widget that can be scrolled.
pub trait Scrollable {
/// Snaps the scroll of the widget to the given `percentage`.
fn snap_to(&mut self, percentage: Vector<f32>);
/// Snaps the scroll of the widget to the given `percentage` along the horizontal & vertical axis.
fn snap_to(&mut self, percentage: Point);
}
/// Produces an [`Operation`] that snaps the widget with the given [`Id`] to
/// the provided `percentage`.
pub fn snap_to<T>(target: Id, percentage: Vector<f32>) -> impl Operation<T> {
pub fn snap_to<T>(target: Id, percentage: Point) -> impl Operation<T> {
struct SnapTo {
target: Id,
percentage: Vector<f32>,
percentage: Point,
}
impl<T> Operation<T> for SnapTo {

1145
native/src/widget/scrollable.rs
View file

File diff suppressed because it is too large Load diff

3
src/widget.rs
View file

@ -99,8 +99,7 @@ pub mod radio {
pub mod scrollable {
//! Navigate an endless amount of content with a scrollbar.
pub use iced_native::widget::scrollable::{
snap_to, style::Scrollbar, style::Scroller, Direction, Horizontal, Id,
StyleSheet,
snap_to, style::Scrollbar, style::Scroller, Id, Properties, StyleSheet,
};
/// A widget that can vertically display an infinite amount of content

9
style/src/theme.rs
View file

@ -872,6 +872,15 @@ pub enum Scrollable {
Custom(Box<dyn scrollable::StyleSheet<Style = Theme>>),
}
impl Scrollable {
/// Creates a custom [`Scrollable`] theme.
pub fn custom<T: scrollable::StyleSheet<Style = Theme> + 'static>(
style: T,
) -> Self {
Self::Custom(Box::new(style))
}
}
impl scrollable::StyleSheet for Theme {
type Style = Scrollable;