Implement scrollable::snap_to operation

examples/scrollable/src/main.rs

@@ -1,8 +1,9 @@
+use iced::executor;
 use iced::widget::{
     button, column, container, horizontal_rule, progress_bar, radio,
     scrollable, text, vertical_space, Row,
 };
-use iced::{Element, Length, Sandbox, Settings, Theme};
+use iced::{Application, Command, Element, Length, Settings, Theme};
 
 pub fn main() -> iced::Result {
     ScrollableDemo::run(Settings::default())
@@ -21,43 +22,57 @@ enum Message {
     Scrolled(usize, f32),
 }
 
-impl Sandbox for ScrollableDemo {
+impl Application for ScrollableDemo {
     type Message = Message;
+    type Theme = Theme;
+    type Executor = executor::Default;
+    type Flags = ();
 
-    fn new() -> Self {
+    fn new(_flags: Self::Flags) -> (Self, Command<Message>) {
-        ScrollableDemo {
+        (
-            theme: Default::default(),
+            ScrollableDemo {
-            variants: Variant::all(),
+                theme: Default::default(),
-        }
+                variants: Variant::all(),
+            },
+            Command::none(),
+        )
     }
 
     fn title(&self) -> String {
         String::from("Scrollable - Iced")
     }
 
-    fn update(&mut self, message: Message) {
+    fn update(&mut self, message: Message) -> Command<Message> {
         match message {
-            Message::ThemeChanged(theme) => self.theme = theme,
+            Message::ThemeChanged(theme) => {
+                self.theme = theme;
+
+                Command::none()
+            }
             Message::ScrollToTop(i) => {
                 if let Some(variant) = self.variants.get_mut(i) {
-                    // TODO
-                    // variant.scrollable.snap_to(0.0);
-
                     variant.latest_offset = 0.0;
+
+                    scrollable::snap_to(Variant::id(i), 0.0)
+                } else {
+                    Command::none()
                 }
             }
             Message::ScrollToBottom(i) => {
                 if let Some(variant) = self.variants.get_mut(i) {
-                    // TODO
-                    // variant.scrollable.snap_to(1.0);
-
                     variant.latest_offset = 1.0;
+
+                    scrollable::snap_to(Variant::id(i), 1.0)
+                } else {
+                    Command::none()
                 }
             }
             Message::Scrolled(i, offset) => {
                 if let Some(variant) = self.variants.get_mut(i) {
                     variant.latest_offset = offset;
                 }
+
+                Command::none()
             }
         }
     }
@@ -136,6 +151,7 @@ impl Sandbox for ScrollableDemo {
                         );
 
                     let mut scrollable = scrollable(contents)
+                        .id(Variant::id(i))
                         .height(Length::Fill)
                         .on_scroll(move |offset| Message::Scrolled(i, offset));
 
@@ -228,4 +244,8 @@ impl Variant {
             },
         ]
     }
+
+    pub fn id(i: usize) -> scrollable::Id {
+        scrollable::Id::new(format!("scrollable-{}", i))
+    }
 }

examples/websocket/Cargo.toml

@@ -9,6 +9,7 @@ publish = false
 iced = { path = "../..", features = ["tokio", "debug"] }
 iced_native = { path = "../../native" }
 iced_futures = { path = "../../futures" }
+lazy_static = "1.4"
 
 [dependencies.async-tungstenite]
 version = "0.16"

examples/websocket/src/main.rs

@@ -49,37 +49,42 @@ impl Application for WebSocket {
         match message {
             Message::NewMessageChanged(new_message) => {
                 self.new_message = new_message;
+
+                Command::none()
             }
             Message::Send(message) => match &mut self.state {
                 State::Connected(connection) => {
                     self.new_message.clear();
 
                     connection.send(message);
+
+                    Command::none()
                 }
-                State::Disconnected => {}
+                State::Disconnected => Command::none(),
             },
             Message::Echo(event) => match event {
                 echo::Event::Connected(connection) => {
                     self.state = State::Connected(connection);
 
                     self.messages.push(echo::Message::connected());
+
+                    Command::none()
                 }
                 echo::Event::Disconnected => {
                     self.state = State::Disconnected;
 
                     self.messages.push(echo::Message::disconnected());
+
+                    Command::none()
                 }
                 echo::Event::MessageReceived(message) => {
                     self.messages.push(message);
 
-                    // TODO
+                    scrollable::snap_to(MESSAGE_LOG.clone(), 1.0)
-                    // self.message_log.snap_to(1.0);
                 }
             },
-            Message::Server => {}
+            Message::Server => Command::none(),
         }
-
-        Command::none()
     }
 
     fn subscription(&self) -> Subscription<Message> {
@@ -110,6 +115,7 @@ impl Application for WebSocket {
                 .width(Length::Fill)
                 .spacing(10),
             )
+            .id(MESSAGE_LOG.clone())
             .height(Length::Fill)
             .into()
         };
@@ -158,3 +164,7 @@ impl Default for State {
         Self::Disconnected
     }
 }
+
+lazy_static::lazy_static! {
+    static ref MESSAGE_LOG: scrollable::Id = scrollable::Id::unique();
+}

native/src/element.rs

@@ -274,7 +274,7 @@ where
 
             fn focusable(
                 &mut self,
-                state: &mut dyn widget::state::Focusable,
+                state: &mut dyn widget::operation::Focusable,
                 id: Option<&widget::Id>,
             ) {
                 self.operation.focusable(state, id);

native/src/widget.rs

@@ -27,7 +27,6 @@ pub mod rule;
 pub mod scrollable;
 pub mod slider;
 pub mod space;
-pub mod state;
 pub mod svg;
 pub mod text;
 pub mod text_input;

native/src/widget/action.rs

@@ -1,5 +1,5 @@
-use crate::widget::state;
+use crate::widget::operation::{self, Operation};
-use crate::widget::{Id, Operation};
+use crate::widget::Id;
 
 use iced_futures::MaybeSend;
 
@@ -72,7 +72,11 @@ where
         .container(id, operate_on_children);
     }
 
-    fn focusable(&mut self, state: &mut dyn state::Focusable, id: Option<&Id>) {
+    fn focusable(
+        &mut self,
+        state: &mut dyn operation::Focusable,
+        id: Option<&Id>,
+    ) {
         self.operation.focusable(state, id);
     }
 }

native/src/widget/operation.rs

@@ -1,4 +1,9 @@
-use crate::widget::state;
+pub mod focusable;
+pub mod scrollable;
+
+pub use focusable::Focusable;
+pub use scrollable::Scrollable;
+
 use crate::widget::Id;
 
 pub trait Operation<T> {
@@ -8,12 +13,9 @@ pub trait Operation<T> {
         operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
     );
 
-    fn focusable(
+    fn focusable(&mut self, _state: &mut dyn Focusable, _id: Option<&Id>) {}
-        &mut self,
+
-        _state: &mut dyn state::Focusable,
+    fn scrollable(&mut self, _state: &mut dyn Scrollable, _id: Option<&Id>) {}
-        _id: Option<&Id>,
-    ) {
-    }
 
     fn finish(&self) -> Outcome<T> {
         Outcome::None
@@ -25,160 +27,3 @@ pub enum Outcome<T> {
     Some(T),
     Chain(Box<dyn Operation<T>>),
 }
-
-pub fn focus<T>(target: Id) -> impl Operation<T> {
-    struct Focus {
-        target: Id,
-    }
-
-    impl<T> Operation<T> for Focus {
-        fn focusable(
-            &mut self,
-            state: &mut dyn state::Focusable,
-            id: Option<&Id>,
-        ) {
-            match id {
-                Some(id) if id == &self.target => {
-                    state.focus();
-                }
-                _ => {
-                    state.unfocus();
-                }
-            }
-        }
-
-        fn container(
-            &mut self,
-            _id: Option<&Id>,
-            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
-        ) {
-            operate_on_children(self)
-        }
-    }
-
-    Focus { target }
-}
-
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
-pub struct FocusCount {
-    focused: Option<usize>,
-    total: usize,
-}
-
-pub fn count_focusable<T, O>(f: fn(FocusCount) -> O) -> impl Operation<T>
-where
-    O: Operation<T> + 'static,
-{
-    struct CountFocusable<O> {
-        count: FocusCount,
-        next: fn(FocusCount) -> O,
-    }
-
-    impl<T, O> Operation<T> for CountFocusable<O>
-    where
-        O: Operation<T> + 'static,
-    {
-        fn focusable(
-            &mut self,
-            state: &mut dyn state::Focusable,
-            _id: Option<&Id>,
-        ) {
-            if state.is_focused() {
-                self.count.focused = Some(self.count.total);
-            }
-
-            self.count.total += 1;
-        }
-
-        fn container(
-            &mut self,
-            _id: Option<&Id>,
-            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
-        ) {
-            operate_on_children(self)
-        }
-
-        fn finish(&self) -> Outcome<T> {
-            Outcome::Chain(Box::new((self.next)(self.count)))
-        }
-    }
-
-    CountFocusable {
-        count: FocusCount::default(),
-        next: f,
-    }
-}
-
-pub fn focus_previous<T>() -> impl Operation<T> {
-    struct FocusPrevious {
-        count: FocusCount,
-        current: usize,
-    }
-
-    impl<T> Operation<T> for FocusPrevious {
-        fn focusable(
-            &mut self,
-            state: &mut dyn state::Focusable,
-            _id: Option<&Id>,
-        ) {
-            if self.count.total == 0 {
-                return;
-            }
-
-            match self.count.focused {
-                None if self.current == self.count.total - 1 => state.focus(),
-                Some(0) if self.current == 0 => state.unfocus(),
-                Some(0) => {}
-                Some(focused) if focused == self.current => state.unfocus(),
-                Some(focused) if focused - 1 == self.current => state.focus(),
-                _ => {}
-            }
-
-            self.current += 1;
-        }
-
-        fn container(
-            &mut self,
-            _id: Option<&Id>,
-            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
-        ) {
-            operate_on_children(self)
-        }
-    }
-
-    count_focusable(|count| FocusPrevious { count, current: 0 })
-}
-
-pub fn focus_next<T>() -> impl Operation<T> {
-    struct FocusNext {
-        count: FocusCount,
-        current: usize,
-    }
-
-    impl<T> Operation<T> for FocusNext {
-        fn focusable(
-            &mut self,
-            state: &mut dyn state::Focusable,
-            _id: Option<&Id>,
-        ) {
-            match self.count.focused {
-                None if self.current == 0 => state.focus(),
-                Some(focused) if focused == self.current => state.unfocus(),
-                Some(focused) if focused + 1 == self.current => state.focus(),
-                _ => {}
-            }
-
-            self.current += 1;
-        }
-
-        fn container(
-            &mut self,
-            _id: Option<&Id>,
-            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
-        ) {
-            operate_on_children(self)
-        }
-    }
-
-    count_focusable(|count| FocusNext { count, current: 0 })
-}

native/src/widget/operation/focusable.rs

@@ -0,0 +1,149 @@
+use crate::widget::operation::{Operation, Outcome};
+use crate::widget::Id;
+
+pub trait Focusable {
+    fn is_focused(&self) -> bool;
+    fn focus(&mut self);
+    fn unfocus(&mut self);
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct Count {
+    focused: Option<usize>,
+    total: usize,
+}
+
+pub fn focus<T>(target: Id) -> impl Operation<T> {
+    struct Focus {
+        target: Id,
+    }
+
+    impl<T> Operation<T> for Focus {
+        fn focusable(&mut self, state: &mut dyn Focusable, id: Option<&Id>) {
+            match id {
+                Some(id) if id == &self.target => {
+                    state.focus();
+                }
+                _ => {
+                    state.unfocus();
+                }
+            }
+        }
+
+        fn container(
+            &mut self,
+            _id: Option<&Id>,
+            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
+        ) {
+            operate_on_children(self)
+        }
+    }
+
+    Focus { target }
+}
+
+pub fn count<T, O>(f: fn(Count) -> O) -> impl Operation<T>
+where
+    O: Operation<T> + 'static,
+{
+    struct CountFocusable<O> {
+        count: Count,
+        next: fn(Count) -> O,
+    }
+
+    impl<T, O> Operation<T> for CountFocusable<O>
+    where
+        O: Operation<T> + 'static,
+    {
+        fn focusable(&mut self, state: &mut dyn Focusable, _id: Option<&Id>) {
+            if state.is_focused() {
+                self.count.focused = Some(self.count.total);
+            }
+
+            self.count.total += 1;
+        }
+
+        fn container(
+            &mut self,
+            _id: Option<&Id>,
+            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
+        ) {
+            operate_on_children(self)
+        }
+
+        fn finish(&self) -> Outcome<T> {
+            Outcome::Chain(Box::new((self.next)(self.count)))
+        }
+    }
+
+    CountFocusable {
+        count: Count::default(),
+        next: f,
+    }
+}
+
+pub fn focus_previous<T>() -> impl Operation<T> {
+    struct FocusPrevious {
+        count: Count,
+        current: usize,
+    }
+
+    impl<T> Operation<T> for FocusPrevious {
+        fn focusable(&mut self, state: &mut dyn Focusable, _id: Option<&Id>) {
+            if self.count.total == 0 {
+                return;
+            }
+
+            match self.count.focused {
+                None if self.current == self.count.total - 1 => state.focus(),
+                Some(0) if self.current == 0 => state.unfocus(),
+                Some(0) => {}
+                Some(focused) if focused == self.current => state.unfocus(),
+                Some(focused) if focused - 1 == self.current => state.focus(),
+                _ => {}
+            }
+
+            self.current += 1;
+        }
+
+        fn container(
+            &mut self,
+            _id: Option<&Id>,
+            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
+        ) {
+            operate_on_children(self)
+        }
+    }
+
+    count(|count| FocusPrevious { count, current: 0 })
+}
+
+pub fn focus_next<T>() -> impl Operation<T> {
+    struct FocusNext {
+        count: Count,
+        current: usize,
+    }
+
+    impl<T> Operation<T> for FocusNext {
+        fn focusable(&mut self, state: &mut dyn Focusable, _id: Option<&Id>) {
+            match self.count.focused {
+                None if self.current == 0 => state.focus(),
+                Some(focused) if focused == self.current => state.unfocus(),
+                Some(focused) if focused + 1 == self.current => state.focus(),
+                _ => {}
+            }
+
+            self.current += 1;
+        }
+
+        fn container(
+            &mut self,
+            _id: Option<&Id>,
+            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
+        ) {
+            operate_on_children(self)
+        }
+    }
+
+    count(|count| FocusNext { count, current: 0 })
+}

native/src/widget/operation/scrollable.rs

@@ -0,0 +1,30 @@
+use crate::widget::{Id, Operation};
+
+pub trait Scrollable {
+    fn snap_to(&mut self, percentage: f32);
+}
+
+pub fn snap_to<T>(target: Id, percentage: f32) -> impl Operation<T> {
+    struct SnapTo {
+        target: Id,
+        percentage: f32,
+    }
+
+    impl<T> Operation<T> for SnapTo {
+        fn scrollable(&mut self, state: &mut dyn Scrollable, id: Option<&Id>) {
+            if Some(&self.target) == id {
+                state.snap_to(self.percentage);
+            }
+        }
+
+        fn container(
+            &mut self,
+            _id: Option<&Id>,
+            operate_on_children: &mut dyn FnMut(&mut dyn Operation<T>),
+        ) {
+            operate_on_children(self)
+        }
+    }
+
+    SnapTo { target, percentage }
+}

native/src/widget/scrollable.rs

@@ -5,11 +5,12 @@ use crate::mouse;
 use crate::overlay;
 use crate::renderer;
 use crate::touch;
+use crate::widget;
+use crate::widget::operation::{self, Operation};
 use crate::widget::tree::{self, Tree};
-use crate::widget::Operation;
 use crate::{
-    Background, Clipboard, Color, Element, Layout, Length, Point, Rectangle,
+    Background, Clipboard, Color, Command, Element, Layout, Length, Point,
-    Shell, Size, Vector, Widget,
+    Rectangle, Shell, Size, Vector, Widget,
 };
 
 use std::{f32, u32};
@@ -31,6 +32,7 @@ where
     Renderer: crate::Renderer,
     Renderer::Theme: StyleSheet,
 {
+    id: Option<Id>,
     height: Length,
     scrollbar_width: u16,
     scrollbar_margin: u16,
@@ -48,6 +50,7 @@ where
     /// Creates a new [`Scrollable`].
     pub fn new(content: impl Into<Element<'a, Message, Renderer>>) -> Self {
         Scrollable {
+            id: None,
             height: Length::Shrink,
             scrollbar_width: 10,
             scrollbar_margin: 0,
@@ -58,6 +61,12 @@ where
         }
     }
 
+    /// Sets the [`Id`] of the [`Scrollable`].
+    pub fn id(mut self, id: Id) -> Self {
+        self.id = Some(id);
+        self
+    }
+
     /// Sets the height of the [`Scrollable`].
     pub fn height(mut self, height: Length) -> Self {
         self.height = height;
@@ -157,6 +166,10 @@ where
         layout: Layout<'_>,
         operation: &mut dyn Operation<Message>,
     ) {
+        let state = tree.state.downcast_mut::<State>();
+
+        operation.scrollable(state, self.id.as_ref().map(|id| &id.0));
+
         operation.container(None, &mut |operation| {
             self.content.as_widget().operate(
                 &mut tree.children[0],
@@ -303,6 +316,23 @@ where
     }
 }
 
+#[derive(Debug, Clone, PartialEq, Eq, Hash)]
+pub struct Id(widget::Id);
+
+impl Id {
+    pub fn new(id: impl Into<std::borrow::Cow<'static, str>>) -> Self {
+        Self(widget::Id::new(id))
+    }
+
+    pub fn unique() -> Self {
+        Self(widget::Id::unique())
+    }
+}
+
+pub fn snap_to<Message: 'static>(id: Id, percentage: f32) -> Command<Message> {
+    Command::widget(operation::scrollable::snap_to(id.0, percentage))
+}
+
 /// Computes the layout of a [`Scrollable`].
 pub fn layout<Renderer>(
     renderer: &Renderer,
@@ -790,6 +820,12 @@ impl Default for State {
     }
 }
 
+impl operation::Scrollable for State {
+    fn snap_to(&mut self, percentage: f32) {
+        State::snap_to(self, percentage);
+    }
+}
+
 /// The local state of a [`Scrollable`].
 #[derive(Debug, Clone, Copy)]
 enum Offset {

native/src/widget/state.rs

@@ -1,5 +1 @@
-pub trait Focusable {
+
-    fn is_focused(&self) -> bool;
-    fn focus(&mut self);
-    fn unfocus(&mut self);
-}

native/src/widget/text_input.rs

@@ -21,7 +21,6 @@ use crate::text::{self, Text};
 use crate::touch;
 use crate::widget;
 use crate::widget::operation::{self, Operation};
-use crate::widget::state;
 use crate::widget::tree::{self, Tree};
 use crate::{
     Clipboard, Color, Command, Element, Layout, Length, Padding, Point,
@@ -329,7 +328,7 @@ impl Id {
 }
 
 pub fn focus<Message: 'static>(id: Id) -> Command<Message> {
-    Command::widget(operation::focus(id.0))
+    Command::widget(operation::focusable::focus(id.0))
 }
 
 /// Computes the layout of a [`TextInput`].
@@ -982,7 +981,7 @@ impl State {
     }
 }
 
-impl state::Focusable for State {
+impl operation::Focusable for State {
     fn is_focused(&self) -> bool {
         State::is_focused(self)
     }

src/widget.rs

@@ -99,7 +99,7 @@ pub mod radio {
 pub mod scrollable {
     //! Navigate an endless amount of content with a scrollbar.
     pub use iced_native::widget::scrollable::{
-        style::Scrollbar, style::Scroller, StyleSheet,
+        snap_to, style::Scrollbar, style::Scroller, Id, StyleSheet,
     };
 
     /// A widget that can vertically display an infinite amount of content
@@ -220,7 +220,7 @@ pub fn focus_previous<Message>() -> Command<Message>
 where
     Message: 'static,
 {
-    Command::widget(operation::focus_previous())
+    Command::widget(operation::focusable::focus_previous())
 }
 
 /// Focuses the next focusable widget.
@@ -228,5 +228,5 @@ pub fn focus_next<Message>() -> Command<Message>
 where
     Message: 'static,
 {
-    Command::widget(operation::focus_next())
+    Command::widget(operation::focusable::focus_next())
 }