Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] Multidirectional scrolling #1550

Merged
merged 7 commits into from
Jan 9, 2023
Merged

[Feature] Multidirectional scrolling #1550

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d91f4f6
Add multidirectional scrolling capabilities to the existing Scrollable.
bungoboingo Nov 19, 2022
9f85e0c
Reworked Scrollable to account for lack of widget order guarantees.
bungoboingo Dec 25, 2022
624a4ad
Introduce `RelativeOffset` type in `scrollable`
hecrj Jan 8, 2023
0c2bcec
Add some missing `spacing` to `scrollable` example
hecrj Jan 8, 2023
19f4373
Enable horizontal scrolling with `Shift+MouseWheel`
hecrj Jan 8, 2023
f64e95e
Remove `PartialOrd` implementation for `Rectangle`
hecrj Jan 8, 2023
2d00747
Avoid dragging scroll area when touching scrollbars for `Scrollable`
hecrj Jan 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions core/src/point.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 6 additions & 0 deletions core/src/rectangle.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion examples/scrollable/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ publish = false

[dependencies]
iced = { path = "../..", features = ["debug"] }
lazy_static = "1.4"
once_cell = "1.16.0"
134 changes: 54 additions & 80 deletions examples/scrollable/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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())
Expand All @@ -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)]
Expand All @@ -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 {
Expand All @@ -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(),
)
Expand All @@ -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;
Expand All @@ -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) => {
Expand Down Expand Up @@ -186,56 +167,53 @@ 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)
.padding([40, 0, 40, 0])
.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)
Expand All @@ -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(
Expand All @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions examples/websocket/src/main.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down Expand Up @@ -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),
)
}
},
Expand Down
10 changes: 5 additions & 5 deletions native/src/widget/operation/scrollable.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
Loading