Fix toggler widget & generall toggler improvements

13r0ck · 13r0ck · commit 4f3927270c7e · 2023-06-06T18:07:15.000-06:00
diff --git a/src/keyframes.rs b/src/keyframes.rs
@@ -1,5 +1,3 @@
-pub mod toggler;
-
 mod button;
 mod column;
 mod container;
@@ -8,6 +6,7 @@ mod row;
 mod space;
 mod style_button;
 mod style_container;
+mod toggler;
 
 #[cfg(feature = "libcosmic")]
 use cosmic::iced_core::{widget, Length};
@@ -19,7 +18,9 @@ pub use column::Column;
 pub use container::Container;
 pub use helpers::id;
 pub use helpers::lazy;
-pub use helpers::{button, column, container, row, space, style_button, style_container, chain};
+pub use helpers::{
+    button, chain, column, container, row, space, style_button, style_container, toggler,
+};
 pub use row::Row;
 pub use space::Space;
 pub use style_button::StyleButton;
diff --git a/src/keyframes/helpers.rs b/src/keyframes/helpers.rs
@@ -1,4 +1,6 @@
-use crate::keyframes::{Button, Column, Container, Row, Space, StyleButton, StyleContainer};
+use crate::keyframes::{
+    Button, Column, Container, Row, Space, StyleButton, StyleContainer, Toggler,
+};
 use crate::MovementType;
 
 /// Create a button keyframe.
@@ -31,6 +33,12 @@ pub fn space(at: impl Into<MovementType>) -> Space {
     Space::new(at)
 }
 
+/// Create a toggler keyframe.
+/// Needs to be added into a chain. See [`crate::chain!`] macro.
+pub fn toggler(at: impl Into<MovementType>) -> Toggler {
+    Toggler::new(at)
+}
+
 /// Create a style_button keyframe.
 /// Needs to be added into a chain. See [`crate::chain!`] macro.
 pub fn style_button(at: impl Into<MovementType>) -> StyleButton {
@@ -45,7 +53,9 @@ pub fn style_container(at: impl Into<MovementType>) -> StyleContainer {
 
 /// A slightly different import to clean up makeing lazy keyframes.
 pub mod lazy {
-    use crate::keyframes::{Button, Column, Container, Row, Space, StyleButton, StyleContainer};
+    use crate::keyframes::{
+        Button, Column, Container, Row, Space, StyleButton, StyleContainer, Toggler,
+    };
     use crate::MovementType;
 
     /// Create a lazy button keyframe.
@@ -78,6 +88,12 @@ pub mod lazy {
         Space::lazy(at)
     }
 
+    /// Create a lazy toggler keyframe.
+    /// Needs to be added into a chain. See [`crate::chain!`] macro.
+    pub fn toggler(at: impl Into<MovementType>) -> Toggler {
+        Toggler::lazy(at)
+    }
+
     /// Create a lazy style_button keyframe.
     /// Needs to be added into a chain. See [`crate::chain!`] macro.
     pub fn style_button(at: impl Into<MovementType>) -> StyleButton {
@@ -103,5 +119,5 @@ pub mod id {
 /// Direct access to `Chain`s for widget that may return an animation
 /// in a message.
 pub mod chain {
-  pub use crate::keyframes::toggler::Chain as Toggler;
+    pub use crate::keyframes::toggler::Chain as Toggler;
 }
diff --git a/src/keyframes/toggler.rs b/src/keyframes/toggler.rs
@@ -8,11 +8,12 @@ use iced_native::{text, widget, widget::Id as IcedId, Renderer as IcedRenderer};
 
 use crate::keyframes::Repeat;
 use crate::timeline::Frame;
-use crate::{Ease, Linear, MovementType};
+use crate::{chain, lazy::toggler as lazy, toggler, Duration, Ease, Linear, MovementType};
 
 /// A Toggler's animation Id. Used for linking animation built in `update()` with widget output in `view()`
 #[derive(Debug, Clone, PartialEq, Eq, Hash)]
 pub struct Id(IcedId);
+const ANIM_DURATION: f32 = 100.;
 
 impl Id {
     /// Creates a custom [`Id`].
@@ -36,6 +37,22 @@ impl Id {
     pub fn into_chain_with_children(self, children: Vec<Toggler>) -> Chain {
         Chain::with_children(self, children)
     }
+
+    /// Used by [`crate::anim!`] macro
+    pub fn as_widget<'a, Message, Renderer, F>(
+        self,
+        timeline: &crate::Timeline,
+        label: impl Into<Option<String>>,
+        is_toggled: bool,
+        f: F,
+    ) -> crate::widget::Toggler<'a, Message, Renderer>
+    where
+        Renderer: IcedRenderer + text::Renderer,
+        Renderer::Theme: widget::toggler::StyleSheet,
+        F: 'a + Fn(Chain, bool) -> Message,
+    {
+        Toggler::as_widget(self, timeline, label, is_toggled, f)
+    }
 }
 
 impl From<Id> for IcedId {
@@ -97,6 +114,26 @@ impl Chain {
         self.repeat = Repeat::Never;
         self
     }
+
+    /// Returns the default animation for animating the toggler to "on"
+    pub fn on(id: Id, anim_multiplier: f32) -> Self {
+        let duration = (ANIM_DURATION * anim_multiplier.round()) as u64;
+        chain!(
+            id,
+            lazy(Duration::ZERO),
+            toggler(Duration::from_millis(duration)).percent(1.0),
+        )
+    }
+
+    /// Returns the default animation for animating the toggler to "off"
+    pub fn off(id: Id, anim_multiplier: f32) -> Self {
+        let duration = (ANIM_DURATION * anim_multiplier.round()) as u64;
+        chain!(
+            id,
+            lazy(Duration::ZERO),
+            toggler(Duration::from_millis(duration)).percent(0.0),
+        )
+    }
 }
 
 impl From<Chain> for crate::timeline::Chain {
@@ -115,6 +152,7 @@ impl From<Chain> for crate::timeline::Chain {
 
 #[must_use = "Keyframes are intended to be used in an animation chain."]
 #[derive(Debug, Clone, Copy)]
+///
 pub struct Toggler {
     at: MovementType,
     ease: Ease,
diff --git a/src/lib.rs b/src/lib.rs
@@ -138,7 +138,7 @@ pub mod widget;
 mod keyframes;
 
 pub use crate::keyframes::{
-    button, column, container, id, lazy, row, space, style_button, style_container, chain,
+    button, chain, column, container, id, lazy, row, space, style_button, style_container, toggler,
 };
 pub use crate::timeline::{Chain, Timeline};
 
diff --git a/src/widget/container.rs b/src/widget/container.rs
@@ -127,7 +127,10 @@ where
         self
     }
 
-    /// Sets the animatable style variant of this [`Container`].
+    /// Set the appearance this [`Container`] to a blend of two styles.
+    ///
+    /// Percent is a f32 of 0.0 -> 1.0.
+    /// Where 0 is 100% style1 and 1 is 100% style2.
     pub fn blend_style(
         mut self,
         style1: <Renderer::Theme as StyleSheet>::Style,
diff --git a/src/widget/cosmic_button.rs b/src/widget/cosmic_button.rs
@@ -3,7 +3,6 @@
 //! A [`Button`] has some local [`State`].
 use cosmic::iced_runtime::core::widget::Id;
 use cosmic::iced_runtime::{keyboard, Command};
-use std::borrow::Cow;
 
 use crate::widget::StyleType;
 use cosmic::iced_core::event::{self, Event};
@@ -458,7 +457,7 @@ impl State {
 /// Processes the given [`Event`] and updates the [`State`] of a [`Button`]
 /// accordingly.
 pub fn update<'a, Message: Clone>(
-    id: Id,
+    _id: Id,
     event: Event,
     layout: Layout<'_>,
     cursor_position: Point,
diff --git a/src/widget/cosmic_toggler.rs b/src/widget/cosmic_toggler.rs
@@ -5,19 +5,15 @@ use cosmic::iced_core::layout;
 use cosmic::iced_core::mouse;
 use cosmic::iced_core::renderer;
 use cosmic::iced_core::text;
-use cosmic::iced_core::time::Duration;
 use cosmic::iced_core::widget::Tree;
 use cosmic::iced_core::{
     Alignment, Clipboard, Element, Event, Layout, Length, Pixels, Point, Rectangle, Shell, Widget,
 };
 use cosmic::iced_widget::{Row, Text};
 
-use crate::keyframes::{self, toggler::Chain};
+use crate::{chain, id, lerp};
 pub use cosmic::iced_style::toggler::{Appearance, StyleSheet};
 
-/// The default animation duration. Change here for custom widgets. Or at runtime with `.anim_multiplier`
-const ANIM_DURATION: f32 = 100.;
-
 /// A toggler widget.
 ///
 /// # Example
@@ -40,9 +36,9 @@ where
     Renderer: text::Renderer,
     Renderer::Theme: StyleSheet,
 {
-    id: crate::keyframes::toggler::Id,
+    id: id::Toggler,
     is_toggled: bool,
-    on_toggle: Box<dyn Fn(Chain, bool) -> Message + 'a>,
+    on_toggle: Box<dyn Fn(chain::Toggler, bool) -> Message + 'a>,
     label: Option<String>,
     width: Length,
     size: f32,
@@ -73,14 +69,9 @@ where
     ///   * a function that will be called when the [`Toggler`] is toggled. It
     ///     will receive the new state of the [`Toggler`] and must produce a
     ///     `Message`.
-    pub fn new<F>(
-        id: crate::keyframes::toggler::Id,
-        label: impl Into<Option<String>>,
-        is_toggled: bool,
-        f: F,
-    ) -> Self
+    pub fn new<F>(id: id::Toggler, label: impl Into<Option<String>>, is_toggled: bool, f: F) -> Self
     where
-        F: 'a + Fn(Chain, bool) -> Message,
+        F: 'a + Fn(chain::Toggler, bool) -> Message,
     {
         Toggler {
             id,
@@ -216,30 +207,14 @@ where
             Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left)) => {
                 let mouse_over = layout.bounds().contains(cursor_position);
 
-                // To prevent broken animations, only send message if
-                // toggler is clicked after animation is finished.
-                // TODO this should be possible to fix once redirectable
-                // animations are implemented.
-                if mouse_over && (self.percent == 0.0 || self.percent == 1.0) {
+                if mouse_over {
                     if self.is_toggled {
-                        let off_animation = Chain::new(self.id.clone())
-                            .link(keyframes::toggler::Toggler::new(Duration::ZERO).percent(1.0))
-                            .link(
-                                keyframes::toggler::Toggler::new(Duration::from_millis(
-                                    (ANIM_DURATION * self.anim_multiplier.round()) as u64,
-                                ))
-                                .percent(0.0),
-                            );
+                        let off_animation =
+                            chain::Toggler::off(self.id.clone(), self.anim_multiplier);
                         shell.publish((self.on_toggle)(off_animation, !self.is_toggled));
                     } else {
-                        let on_animation = Chain::new(self.id.clone())
-                            .link(keyframes::toggler::Toggler::new(Duration::ZERO).percent(0.0))
-                            .link(
-                                keyframes::toggler::Toggler::new(Duration::from_millis(
-                                    (ANIM_DURATION * self.anim_multiplier.round()) as u64,
-                                ))
-                                .percent(1.0),
-                            );
+                        let on_animation =
+                            chain::Toggler::on(self.id.clone(), self.anim_multiplier);
                         shell.publish((self.on_toggle)(on_animation, !self.is_toggled));
                     }
 
@@ -310,9 +285,17 @@ where
         let is_mouse_over = bounds.contains(cursor_position);
 
         let style = if is_mouse_over {
-            theme.hovered(&self.style, self.is_toggled)
+            blend_appearances(
+                theme.hovered(&self.style, false),
+                theme.hovered(&self.style, true),
+                self.percent,
+            )
         } else {
-            theme.active(&self.style, self.is_toggled)
+            blend_appearances(
+                theme.active(&self.style, false),
+                theme.active(&self.style, true),
+                self.percent,
+            )
         };
 
         let border_radius = bounds.height / BORDER_RADIUS_RATIO;
@@ -337,11 +320,11 @@ where
 
         let toggler_foreground_bounds = Rectangle {
             x: bounds.x
-                + if self.is_toggled {
-                    bounds.width - 2.0 * space - (bounds.height - (4.0 * space))
-                } else {
-                    2.0 * space
-                },
+                + lerp(
+                    2.0 * space,
+                    bounds.width - 2.0 * space - (bounds.height - (4.0 * space)),
+                    self.percent,
+                ),
             y: bounds.y + (2.0 * space),
             width: bounds.height - (4.0 * space),
             height: bounds.height - (4.0 * space),
@@ -369,3 +352,24 @@ where
         Element::new(toggler)
     }
 }
+
+fn blend_appearances(one: Appearance, mut two: Appearance, percent: f32) -> Appearance {
+    if percent == 0. {
+        one
+    } else if percent == 1. {
+        two
+    } else {
+        let background: [f32; 4] = one
+            .background
+            .into_linear()
+            .iter()
+            .zip(two.background.into_linear().iter())
+            .map(|(o, t)| o * (1.0 - percent) + t * percent)
+            .collect::<Vec<f32>>()
+            .try_into()
+            .unwrap();
+
+        two.background = background.into();
+        two
+    }
+}
diff --git a/src/widget/toggler.rs b/src/widget/toggler.rs
