Merge pull request #6 from pop-os/more-widgets

More widgets

Author: 13r0ck

README.md

@@ -8,8 +8,8 @@ TODOs before release:
 - [x] Animation easing
 - [x] add space widget
 - [x] add button widget
-- [ ] add row widget
-- [ ] add column widget
+- [x] add row widget
+- [x] add column widget
 - [ ] add toggle button widget
 - [x] Use iced 0.8
 - [x] use iced 0.8's framerate subscription

examples/counter/src/main.rs

@@ -1,9 +1,9 @@
 use iced::widget::{button, column, text};
 use iced::{
-    executor, Alignment, Application, Command, Element, Event, Length, Settings, Subscription,
-    Theme,
+    executor,
+    time::{Duration, Instant},
+    Alignment, Application, Command, Element, Event, Length, Settings, Subscription, Theme,
 };
-use std::time::Duration;
 
 use cosmic_time::{self, keyframes, Timeline};
 
@@ -24,7 +24,7 @@ struct Counter {
 enum Message {
     IncrementPressed,
     DecrementPressed,
-    Tick,
+    Tick(Instant),
 }
 
 impl Application for Counter {
@@ -83,7 +83,7 @@ impl Application for Counter {
         // cosmic-time assumes that the timeline is continuous. Try deleting it,
         // the height will animate smoothly from 300 to 150 right through keyframe `four`!
 
-        timeline.set_chain(animation.into()).start();
+        timeline.set_chain(animation).start();
         // `Start` is very important! Your animation won't "start" without it.
         // Cosmic-time tries to be atomic, meaning that keyframes defined in the
         // same function call all start at the same time. Because there is process time
@@ -105,9 +105,7 @@ impl Application for Counter {
         // at what timeline you have built and decides for you how often your
         // application should redraw for you! When the animation is done idle
         // or finished, cosmic-time will keep your applicaiton idle!
-        self.timeline
-            .as_subscription::<Event>()
-            .map(|_| Message::Tick)
+        self.timeline.as_subscription::<Event>().map(Message::Tick)
     }
 
     fn update(&mut self, message: Message) -> Command<Message> {
@@ -118,7 +116,7 @@ impl Application for Counter {
             Message::DecrementPressed => {
                 self.value -= 1;
             }
-            Message::Tick => {}
+            Message::Tick(now) => self.timeline.now(now),
         }
         Command::none()
     }

examples/pokedex/src/main.rs

@@ -1,6 +1,7 @@
 use iced::futures;
 use iced::widget::{self, column, container, image, row, text};
 use iced::{
+    time::{Duration, Instant},
     Alignment, Application, Color, Command, Element, Event, Length, Settings, Subscription, Theme,
 };
 
@@ -9,7 +10,6 @@ use cosmic_time::{
     Quartic, Quintic, Sinusoidal, Timeline,
 };
 use once_cell::sync::Lazy;
-use std::time::Duration;
 
 static SPACE: Lazy<keyframes::space::Id> = Lazy::new(keyframes::space::Id::unique);
 
@@ -65,7 +65,7 @@ enum Pokedex {
 enum Message {
     PokemonFound(Result<Pokemon, Error>),
     Search,
-    Tick,
+    Tick(Instant),
 }
 
 impl Application for Pokedex {
@@ -97,14 +97,19 @@ impl Application for Pokedex {
             Pokedex::Loaded { pokemon } => pokemon
                 .timeline
                 .as_subscription::<Event>()
-                .map(|_| Message::Tick),
+                .map(Message::Tick),
             _ => Subscription::none(),
         }
     }
 
     fn update(&mut self, message: Message) -> Command<Message> {
         match message {
-            Message::Tick => Command::none(),
+            Message::Tick(now) => {
+                if let Pokedex::Loaded { pokemon, .. } = self {
+                    pokemon.timeline.now(now);
+                }
+                Command::none()
+            }
             Message::PokemonFound(Ok(pokemon)) => {
                 *self = Pokedex::Loaded { pokemon };
 
@@ -266,7 +271,7 @@ impl Pokemon {
             .loop_forever();
 
         // println!("Animating wth ease: {ease:?}"); // Uncomment to see the type of easing
-        timeline.set_chain(animation.into()).start();
+        timeline.set_chain(animation).start();
 
         Ok(Pokemon {
             timeline,

examples/stopwatch/src/main.rs

@@ -66,16 +66,15 @@ impl Application for Stopwatch {
                     self.state = State::Ticking {
                         last_tick: Instant::now(),
                     };
-                    self.timeline
-                        .set_chain(anim_to_destructive().into())
-                        .start();
+                    self.timeline.set_chain(anim_to_destructive()).start();
                 }
                 State::Ticking { .. } => {
                     self.state = State::Idle;
-                    self.timeline.set_chain(anim_to_primary().into()).start();
+                    self.timeline.set_chain(anim_to_primary()).start();
                 }
             },
             Message::Tick(now) => {
+                self.timeline.now(now);
                 if let State::Ticking { last_tick } = &mut self.state {
                     self.duration += now - *last_tick;
                     *last_tick = now;

src/keyframes.rs

@@ -3,6 +3,7 @@ pub mod container;
 pub mod space;
 pub mod style_button;
 pub mod style_container;
+pub mod toggler;
 
 use iced_native::{widget, Length};
 
@@ -11,8 +12,7 @@ pub use container::Container;
 pub use space::Space;
 pub use style_button::StyleButton;
 pub use style_container::StyleContainer;
-
-use std::time::Instant;
+pub use toggler::Toggler;
 
 use crate::Timeline;
 
@@ -27,15 +27,16 @@ pub trait IsChain {
     fn repeat(&self) -> Repeat;
 }
 
-pub fn get_length(
-    id: &widget::Id,
-    timeline: &Timeline,
-    now: &Instant,
-    index: usize,
-    default: Length,
-) -> Length {
+pub fn get_length(id: &widget::Id, timeline: &Timeline, index: usize, default: Length) -> Length {
     timeline
-        .get(id, now, index)
+        .get(id, index)
         .map(|m| Length::Fixed(m.value))
         .unwrap_or(default)
 }
+
+fn as_f32(length: Option<Length>) -> Option<f32> {
+    match length {
+        Some(Length::Fixed(i)) => Some(i),
+        _ => None,
+    }
+}

src/keyframes/button.rs

@@ -1,8 +1,7 @@
+use iced_native::time::Duration;
 use iced_native::{widget, Element, Length, Padding};
 
-use std::time::{Duration, Instant};
-
-use crate::keyframes::{get_length, Repeat};
+use crate::keyframes::{as_f32, get_length, Repeat};
 use crate::timeline::DurFrame;
 use crate::{Ease, Linear};
 
@@ -105,16 +104,15 @@ impl Button {
         Renderer::Theme: widget::button::StyleSheet,
     {
         let id: widget::Id = id.into();
-        let now = Instant::now();
 
         widget::Button::new(content)
-            .width(get_length(&id, timeline, &now, 0, Length::Shrink))
-            .height(get_length(&id, timeline, &now, 1, Length::Shrink))
+            .width(get_length(&id, timeline, 0, Length::Shrink))
+            .height(get_length(&id, timeline, 1, Length::Shrink))
             .padding([
-                timeline.get(&id, &now, 2).map(|m| m.value).unwrap_or(5.0),
-                timeline.get(&id, &now, 3).map(|m| m.value).unwrap_or(5.0),
-                timeline.get(&id, &now, 4).map(|m| m.value).unwrap_or(5.0),
-                timeline.get(&id, &now, 5).map(|m| m.value).unwrap_or(5.0),
+                timeline.get(&id, 2).map(|m| m.value).unwrap_or(5.0),
+                timeline.get(&id, 3).map(|m| m.value).unwrap_or(5.0),
+                timeline.get(&id, 4).map(|m| m.value).unwrap_or(5.0),
+                timeline.get(&id, 5).map(|m| m.value).unwrap_or(5.0),
             ])
     }
 
@@ -179,10 +177,3 @@ impl ExactSizeIterator for Button {
         6 - self.index
     }
 }
-
-fn as_f32(length: Option<Length>) -> Option<f32> {
-    match length {
-        Some(Length::Fixed(i)) => Some(i),
-        _ => None,
-    }
-}