Fix toggler widget & generall toggler improvements

Author: 13r0ck

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;

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 {
@@ -103,5 +111,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;
 }

src/keyframes/toggler.rs

@@ -36,6 +36,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 {
@@ -115,6 +131,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,

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};
 

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,

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,

src/widget/cosmic_toggler.rs

@@ -8,11 +8,12 @@ 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,
+    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, toggler};
 pub use cosmic::iced_style::toggler::{Appearance, StyleSheet};
 
 /// The default animation duration. Change here for custom widgets. Or at runtime with `.anim_multiplier`
@@ -40,9 +41,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 +74,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,
@@ -221,25 +217,20 @@ where
                 // TODO this should be possible to fix once redirectable
                 // animations are implemented.
                 if mouse_over && (self.percent == 0.0 || self.percent == 1.0) {
+                    let duration = (ANIM_DURATION * self.anim_multiplier.round()) as u64;
                     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!(
+                            self.id.clone(),
+                            toggler(Duration::ZERO).percent(1.0),
+                            toggler(Duration::from_millis(duration)).percent(0.0),
+                        );
                         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!(
+                            self.id.clone(),
+                            toggler(Duration::ZERO).percent(0.0),
+                            toggler(Duration::from_millis(duration)).percent(1.0),
+                        );
                         shell.publish((self.on_toggle)(on_animation, !self.is_toggled));
                     }
 
@@ -310,9 +301,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 +336,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 +368,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
+    }
+}