cosmic/widget/progress_bar/

circular.rs

//! Show a circular progress indicator.
use super::style::StyleSheet;
use crate::anim::smootherstep;
use iced::advanced::layout;
use iced::advanced::renderer;
use iced::advanced::widget::tree::{self, Tree};
use iced::advanced::{self, Clipboard, Layout, Shell, Widget};
use iced::mouse;
use iced::time::Instant;
use iced::widget::canvas;
use iced::window;
use iced::{Element, Event, Length, Radians, Rectangle, Renderer, Size, Vector};

use std::f32::consts::PI;
use std::time::Duration;

const MIN_ANGLE: Radians = Radians(PI / 8.0);
const WRAP_ANGLE: Radians = Radians(2.0 * PI - PI / 4.0);
const BASE_ROTATION_SPEED: u32 = u32::MAX / 80;

#[must_use]
pub struct Circular<Theme>
where
    Theme: StyleSheet,
{
    size: f32,
    bar_height: f32,
    style: <Theme as StyleSheet>::Style,
    cycle_duration: Duration,
    rotation_duration: Duration,
    progress: Option<f32>,
}

impl<Theme> Circular<Theme>
where
    Theme: StyleSheet,
{
    /// Creates a new [`Circular`] with the given content.
    pub fn new() -> Self {
        Circular {
            size: 40.0,
            bar_height: 4.0,
            style: <Theme as StyleSheet>::Style::default(),
            cycle_duration: Duration::from_millis(1500),
            rotation_duration: Duration::from_secs(2),
            progress: None,
        }
    }

    /// Sets the size of the [`Circular`].
    pub fn size(mut self, size: f32) -> Self {
        self.size = size;
        self
    }

    /// Sets the bar height of the [`Circular`].
    pub fn bar_height(mut self, bar_height: f32) -> Self {
        self.bar_height = bar_height;
        self
    }

    /// Sets the style variant of this [`Circular`].
    pub fn style(mut self, style: <Theme as StyleSheet>::Style) -> Self {
        self.style = style;
        self
    }

    /// Sets the cycle duration of this [`Circular`].
    pub fn cycle_duration(mut self, duration: Duration) -> Self {
        self.cycle_duration = duration / 2;
        self
    }

    /// Sets the base rotation duration of this [`Circular`]. This is the duration that a full
    /// rotation would take if the cycle rotation were set to 0.0 (no expanding or contracting)
    pub fn rotation_duration(mut self, duration: Duration) -> Self {
        self.rotation_duration = duration;
        self
    }

    /// Override the default behavior by providing a determinate progress value between `0.0` and `1.0`.
    pub fn progress(mut self, progress: f32) -> Self {
        self.progress = Some(progress.clamp(0.0, 1.0));
        self
    }
}

impl<Theme> Default for Circular<Theme>
where
    Theme: StyleSheet,
{
    fn default() -> Self {
        Self::new()
    }
}

#[derive(Clone, Copy)]
enum Animation {
    Expanding {
        start: Instant,
        progress: f32,
        rotation: u32,
        last: Instant,
    },
    Contracting {
        start: Instant,
        progress: f32,
        rotation: u32,
        last: Instant,
    },
}

impl Default for Animation {
    fn default() -> Self {
        Self::Expanding {
            start: Instant::now(),
            progress: 0.0,
            rotation: 0,
            last: Instant::now(),
        }
    }
}

impl Animation {
    fn next(&self, additional_rotation: u32, now: Instant) -> Self {
        match self {
            Self::Expanding { rotation, .. } => Self::Contracting {
                start: now,
                progress: 0.0,
                rotation: rotation.wrapping_add(additional_rotation),
                last: now,
            },
            Self::Contracting { rotation, .. } => Self::Expanding {
                start: now,
                progress: 0.0,
                rotation: rotation.wrapping_add(BASE_ROTATION_SPEED.wrapping_add(
                    (f64::from(WRAP_ANGLE / (2.0 * Radians::PI)) * f64::from(u32::MAX)) as u32,
                )),
                last: now,
            },
        }
    }

    fn start(&self) -> Instant {
        match self {
            Self::Expanding { start, .. } | Self::Contracting { start, .. } => *start,
        }
    }

    fn last(&self) -> Instant {
        match self {
            Self::Expanding { last, .. } | Self::Contracting { last, .. } => *last,
        }
    }

    fn timed_transition(
        &self,
        cycle_duration: Duration,
        rotation_duration: Duration,
        now: Instant,
    ) -> Self {
        let elapsed = now.duration_since(self.start());
        let additional_rotation = ((now - self.last()).as_secs_f32()
            / rotation_duration.as_secs_f32()
            * (u32::MAX) as f32) as u32;

        match elapsed {
            elapsed if elapsed > cycle_duration => self.next(additional_rotation, now),
            _ => self.with_elapsed(cycle_duration, additional_rotation, elapsed, now),
        }
    }

    fn with_elapsed(
        &self,
        cycle_duration: Duration,
        additional_rotation: u32,
        elapsed: Duration,
        now: Instant,
    ) -> Self {
        let progress = elapsed.as_secs_f32() / cycle_duration.as_secs_f32();
        match self {
            Self::Expanding {
                start, rotation, ..
            } => Self::Expanding {
                start: *start,
                progress,
                rotation: rotation.wrapping_add(additional_rotation),
                last: now,
            },
            Self::Contracting {
                start, rotation, ..
            } => Self::Contracting {
                start: *start,
                progress,
                rotation: rotation.wrapping_add(additional_rotation),
                last: now,
            },
        }
    }

    fn rotation(&self) -> f32 {
        match self {
            Self::Expanding { rotation, .. } | Self::Contracting { rotation, .. } => {
                *rotation as f32 / u32::MAX as f32
            }
        }
    }
}

#[derive(Default)]
struct State {
    animation: Animation,
    cache: canvas::Cache,
    progress: Option<f32>,
}

impl<Message, Theme> Widget<Message, Theme, Renderer> for Circular<Theme>
where
    Message: Clone,
    Theme: StyleSheet,
{
    fn tag(&self) -> tree::Tag {
        tree::Tag::of::<State>()
    }

    fn state(&self) -> tree::State {
        tree::State::new(State::default())
    }

    fn size(&self) -> Size<Length> {
        Size {
            width: Length::Fixed(self.size),
            height: Length::Fixed(self.size),
        }
    }

    fn layout(
        &mut self,
        _tree: &mut Tree,
        _renderer: &Renderer,
        limits: &layout::Limits,
    ) -> layout::Node {
        layout::atomic(limits, self.size, self.size)
    }

    fn update(
        &mut self,
        tree: &mut Tree,
        event: &Event,
        _layout: Layout<'_>,
        _cursor: mouse::Cursor,
        _renderer: &Renderer,
        _clipboard: &mut dyn Clipboard,
        shell: &mut Shell<'_, Message>,
        _viewport: &Rectangle,
    ) {
        let state = tree.state.downcast_mut::<State>();
        if self.progress.is_some() {
            if !float_cmp::approx_eq!(
                f32,
                state.progress.unwrap_or_default(),
                self.progress.unwrap_or_default()
            ) {
                state.progress = self.progress;
                state.cache.clear();
            }
            return;
        }
        if let Event::Window(window::Event::RedrawRequested(now)) = event {
            state.animation =
                state
                    .animation
                    .timed_transition(self.cycle_duration, self.rotation_duration, *now);

            state.cache.clear();
            shell.request_redraw();
        }
    }

    fn draw(
        &self,
        tree: &Tree,
        renderer: &mut Renderer,
        theme: &Theme,
        _style: &renderer::Style,
        layout: Layout<'_>,
        _cursor: mouse::Cursor,
        _viewport: &Rectangle,
    ) {
        use advanced::Renderer as _;

        let state = tree.state.downcast_ref::<State>();
        let bounds = layout.bounds();
        let custom_style =
            <Theme as StyleSheet>::appearance(theme, &self.style, self.progress.is_some(), true);

        let geometry = state.cache.draw(renderer, bounds.size(), |frame| {
            let track_radius = frame.width() / 2.0 - self.bar_height;
            let track_path = canvas::Path::circle(frame.center(), track_radius);

            frame.stroke(
                &track_path,
                canvas::Stroke::default()
                    .with_color(custom_style.track_color)
                    .with_width(self.bar_height),
            );

            if let Some(progress) = self.progress {
                // outer border
                if let Some(border_color) = custom_style.border_color {
                    let border_path =
                        canvas::Path::circle(frame.center(), track_radius + self.bar_height / 2.0);

                    frame.stroke(
                        &border_path,
                        canvas::Stroke::default()
                            .with_color(border_color)
                            .with_width(1.0),
                    );
                }

                // inner border
                if let Some(border_color) = custom_style.border_color {
                    let border_path =
                        canvas::Path::circle(frame.center(), track_radius - self.bar_height / 2.0);

                    frame.stroke(
                        &border_path,
                        canvas::Stroke::default()
                            .with_color(border_color)
                            .with_width(1.0),
                    );
                }

                // bar
                let mut builder = canvas::path::Builder::new();

                builder.arc(canvas::path::Arc {
                    center: frame.center(),
                    radius: track_radius,
                    start_angle: Radians(-PI / 2.0),
                    end_angle: Radians(-PI / 2.0 + progress * 2.0 * PI),
                });

                let bar_path = builder.build();

                frame.stroke(
                    &bar_path,
                    canvas::Stroke::default()
                        .with_color(custom_style.bar_color)
                        .with_width(self.bar_height),
                );

                let mut builder = canvas::path::Builder::new();

                // get center of end of arc for rounded cap
                let end_angle = -PI / 2.0 + progress * 2.0 * PI;
                let end_center =
                    frame.center() + Vector::new(end_angle.cos(), end_angle.sin()) * track_radius;
                builder.arc(canvas::path::Arc {
                    center: end_center,
                    radius: self.bar_height / 2.0,
                    start_angle: Radians(end_angle),
                    end_angle: Radians(end_angle + PI),
                });

                // get center of start of arc for rounded cap
                let start_angle = -PI / 2.0;
                let start_center = frame.center()
                    + Vector::new(start_angle.cos(), start_angle.sin()) * track_radius;
                builder.arc(canvas::path::Arc {
                    center: start_center,
                    radius: self.bar_height / 2.0,
                    start_angle: Radians(start_angle - PI),
                    end_angle: Radians(start_angle),
                });

                let cap_path = builder.build();
                frame.fill(&cap_path, custom_style.bar_color);
            } else {
                let mut builder = canvas::path::Builder::new();

                let start = Radians(state.animation.rotation() * 2.0 * PI);
                let (start_angle, end_angle) = match state.animation {
                    Animation::Expanding { progress, .. } => (
                        start,
                        start + MIN_ANGLE + WRAP_ANGLE * (smootherstep(progress)),
                    ),
                    Animation::Contracting { progress, .. } => (
                        start + WRAP_ANGLE * (smootherstep(progress)),
                        start + MIN_ANGLE + WRAP_ANGLE,
                    ),
                };
                builder.arc(canvas::path::Arc {
                    center: frame.center(),
                    radius: track_radius,
                    start_angle,
                    end_angle,
                });

                let bar_path = builder.build();

                frame.stroke(
                    &bar_path,
                    canvas::Stroke::default()
                        .with_color(custom_style.bar_color)
                        .with_width(self.bar_height),
                );

                let mut builder = canvas::path::Builder::new();

                // get center of end of arc for rounded cap
                let end_center = frame.center()
                    + Vector::new(end_angle.0.cos(), end_angle.0.sin()) * track_radius;
                builder.arc(canvas::path::Arc {
                    center: end_center,
                    radius: self.bar_height / 2.0,
                    start_angle: Radians(end_angle.0),
                    end_angle: Radians(end_angle.0 + PI),
                });

                // get center of start of arc for rounded cap
                let start_center = frame.center()
                    + Vector::new(start_angle.0.cos(), start_angle.0.sin()) * track_radius;
                builder.arc(canvas::path::Arc {
                    center: start_center,
                    radius: self.bar_height / 2.0,
                    start_angle: Radians(start_angle.0 - PI),
                    end_angle: Radians(start_angle.0),
                });

                let cap_path = builder.build();
                frame.fill(&cap_path, custom_style.bar_color);
            }
        });

        renderer.with_translation(Vector::new(bounds.x, bounds.y), |renderer| {
            use iced::advanced::graphics::geometry::Renderer as _;

            renderer.draw_geometry(geometry);
        });
    }
}

impl<'a, Message, Theme> From<Circular<Theme>> for Element<'a, Message, Theme, Renderer>
where
    Message: Clone + 'a,
    Theme: StyleSheet + 'a,
{
    fn from(circular: Circular<Theme>) -> Self {
        Self::new(circular)
    }
}