feat(widget): progress bars
This commit is contained in:
parent
724351727a
commit
b963fbfea9
7 changed files with 935 additions and 8 deletions
|
|
@ -82,6 +82,7 @@ pub enum Message {
|
|||
Hi,
|
||||
Hi2,
|
||||
Hi3,
|
||||
Tick,
|
||||
}
|
||||
|
||||
/// The [`App`] stores application-specific state.
|
||||
|
|
@ -92,6 +93,7 @@ pub struct App {
|
|||
input_2: String,
|
||||
hidden: bool,
|
||||
keybinds: HashMap<KeyBind, Action>,
|
||||
progress: f32,
|
||||
}
|
||||
|
||||
/// Implement [`cosmic::Application`] to integrate with COSMIC.
|
||||
|
|
@ -133,6 +135,7 @@ impl cosmic::Application for App {
|
|||
input_2: String::new(),
|
||||
hidden: true,
|
||||
keybinds: HashMap::new(),
|
||||
progress: 0.0,
|
||||
};
|
||||
|
||||
let command = app.update_title();
|
||||
|
|
@ -178,10 +181,17 @@ impl cosmic::Application for App {
|
|||
Message::Hi3 => {
|
||||
dbg!("hi 3");
|
||||
}
|
||||
Message::Tick => {
|
||||
self.progress = (self.progress + 0.01) % 1.0;
|
||||
}
|
||||
}
|
||||
Task::none()
|
||||
}
|
||||
|
||||
fn subscription(&self) -> iced::Subscription<Self::Message> {
|
||||
iced::time::every(std::time::Duration::from_millis(64)).map(|_| Message::Tick)
|
||||
}
|
||||
|
||||
/// Creates a view after each update.
|
||||
fn view(&self) -> Element<'_, Self::Message> {
|
||||
let page_content = self
|
||||
|
|
@ -212,6 +222,46 @@ impl cosmic::Application for App {
|
|||
.on_input(Message::Input2)
|
||||
.on_clear(Message::Ignore),
|
||||
)
|
||||
.push(widget::progress_bar::circular::Circular::new().size(50.0))
|
||||
.push(
|
||||
widget::progress_bar::linear::Linear::new()
|
||||
.girth(10.0)
|
||||
.width(Length::Fill),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::circular::Circular::new()
|
||||
.bar_height(10.0)
|
||||
.size(50.0)
|
||||
.progress(self.progress),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::linear::Linear::new()
|
||||
.girth(10.0)
|
||||
.progress(self.progress)
|
||||
.width(Length::Fill),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::circular::Circular::new()
|
||||
.size(50.0)
|
||||
.progress(0.0),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::linear::Linear::new()
|
||||
.girth(10.0)
|
||||
.progress(0.0)
|
||||
.width(Length::Fill),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::circular::Circular::new()
|
||||
.size(50.0)
|
||||
.progress(1.0),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::linear::Linear::new()
|
||||
.girth(10.0)
|
||||
.progress(1.0)
|
||||
.width(Length::Fill),
|
||||
)
|
||||
.spacing(cosmic::theme::spacing().space_s)
|
||||
.width(Length::Fill)
|
||||
.height(Length::Shrink)
|
||||
|
|
|
|||
|
|
@ -77,9 +77,6 @@ pub use iced::widget::{MouseArea, mouse_area};
|
|||
#[doc(inline)]
|
||||
pub use iced::widget::{PaneGrid, pane_grid};
|
||||
|
||||
#[doc(inline)]
|
||||
pub use iced::widget::{ProgressBar, progress_bar};
|
||||
|
||||
#[doc(inline)]
|
||||
pub use iced::widget::{Responsive, responsive};
|
||||
|
||||
|
|
@ -257,6 +254,12 @@ pub mod popover;
|
|||
#[doc(inline)]
|
||||
pub use popover::{Popover, popover};
|
||||
|
||||
pub mod progress_bar;
|
||||
#[doc(inline)]
|
||||
pub use progress_bar::{
|
||||
circular, circular::Circular, circular_progress, linear, linear::Linear, linear_progress, style,
|
||||
};
|
||||
|
||||
pub mod radio;
|
||||
#[doc(inline)]
|
||||
pub use radio::{Radio, radio};
|
||||
|
|
|
|||
453
src/widget/progress_bar/circular.rs
Normal file
453
src/widget/progress_bar/circular.rs
Normal file
|
|
@ -0,0 +1,453 @@
|
|||
//! 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)
|
||||
}
|
||||
}
|
||||
306
src/widget/progress_bar/linear.rs
Normal file
306
src/widget/progress_bar/linear.rs
Normal file
|
|
@ -0,0 +1,306 @@
|
|||
//! Show a linear progress indicator.
|
||||
use iced::advanced::layout;
|
||||
use iced::advanced::renderer::{self, Quad};
|
||||
use iced::advanced::widget::tree::{self, Tree};
|
||||
use iced::advanced::{self, Clipboard, Layout, Shell, Widget};
|
||||
use iced::mouse;
|
||||
use iced::time::Instant;
|
||||
use iced::window;
|
||||
use iced::{Background, Element, Event, Length, Rectangle, Size};
|
||||
|
||||
use crate::anim::smootherstep;
|
||||
|
||||
use super::style::StyleSheet;
|
||||
|
||||
use std::time::Duration;
|
||||
|
||||
#[must_use]
|
||||
pub struct Linear<Theme>
|
||||
where
|
||||
Theme: StyleSheet,
|
||||
{
|
||||
width: Length,
|
||||
girth: Length,
|
||||
style: Theme::Style,
|
||||
cycle_duration: Duration,
|
||||
progress: Option<f32>,
|
||||
}
|
||||
|
||||
impl<Theme> Linear<Theme>
|
||||
where
|
||||
Theme: StyleSheet,
|
||||
{
|
||||
/// Creates a new [`Linear`] with the given content.
|
||||
pub fn new() -> Self {
|
||||
Linear {
|
||||
width: Length::Fixed(100.0),
|
||||
girth: Length::Fixed(4.0),
|
||||
style: Theme::Style::default(),
|
||||
cycle_duration: Duration::from_millis(1500),
|
||||
progress: None,
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the width of the [`Linear`].
|
||||
pub fn width(mut self, width: impl Into<Length>) -> Self {
|
||||
self.width = width.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the girth of the [`Linear`].
|
||||
pub fn girth(mut self, girth: impl Into<Length>) -> Self {
|
||||
self.girth = girth.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the style variant of this [`Linear`].
|
||||
pub fn style(mut self, style: impl Into<Theme::Style>) -> Self {
|
||||
self.style = style.into();
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the cycle duration of this [`Linear`].
|
||||
pub fn cycle_duration(mut self, duration: Duration) -> Self {
|
||||
self.cycle_duration = duration / 2;
|
||||
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 Linear<Theme>
|
||||
where
|
||||
Theme: StyleSheet,
|
||||
{
|
||||
fn default() -> Self {
|
||||
Self::new()
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Copy)]
|
||||
enum State {
|
||||
Expanding { start: Instant, progress: f32 },
|
||||
Contracting { start: Instant, progress: f32 },
|
||||
}
|
||||
|
||||
impl Default for State {
|
||||
fn default() -> Self {
|
||||
Self::Expanding {
|
||||
start: Instant::now(),
|
||||
progress: 0.0,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl State {
|
||||
fn next(&self, now: Instant) -> Self {
|
||||
match self {
|
||||
Self::Expanding { .. } => Self::Contracting {
|
||||
start: now,
|
||||
progress: 0.0,
|
||||
},
|
||||
Self::Contracting { .. } => Self::Expanding {
|
||||
start: now,
|
||||
progress: 0.0,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
fn start(&self) -> Instant {
|
||||
match self {
|
||||
Self::Expanding { start, .. } | Self::Contracting { start, .. } => *start,
|
||||
}
|
||||
}
|
||||
|
||||
fn timed_transition(&self, cycle_duration: Duration, now: Instant) -> Self {
|
||||
let elapsed = now.duration_since(self.start());
|
||||
|
||||
match elapsed {
|
||||
elapsed if elapsed > cycle_duration => self.next(now),
|
||||
_ => self.with_elapsed(cycle_duration, elapsed),
|
||||
}
|
||||
}
|
||||
|
||||
fn with_elapsed(&self, cycle_duration: Duration, elapsed: Duration) -> Self {
|
||||
let progress = elapsed.as_secs_f32() / cycle_duration.as_secs_f32();
|
||||
match self {
|
||||
Self::Expanding { start, .. } => Self::Expanding {
|
||||
start: *start,
|
||||
progress,
|
||||
},
|
||||
Self::Contracting { start, .. } => Self::Contracting {
|
||||
start: *start,
|
||||
progress,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl<Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Linear<Theme>
|
||||
where
|
||||
Message: Clone,
|
||||
Theme: StyleSheet,
|
||||
Renderer: advanced::Renderer,
|
||||
{
|
||||
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: self.width,
|
||||
height: self.girth,
|
||||
}
|
||||
}
|
||||
|
||||
fn layout(
|
||||
&mut self,
|
||||
_tree: &mut Tree,
|
||||
_renderer: &Renderer,
|
||||
limits: &layout::Limits,
|
||||
) -> layout::Node {
|
||||
layout::atomic(limits, self.width, self.girth)
|
||||
}
|
||||
|
||||
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,
|
||||
) {
|
||||
if self.progress.is_some() {
|
||||
return;
|
||||
}
|
||||
|
||||
let state = tree.state.downcast_mut::<State>();
|
||||
|
||||
if let Event::Window(window::Event::RedrawRequested(now)) = event {
|
||||
*state = state.timed_transition(self.cycle_duration, *now);
|
||||
|
||||
shell.request_redraw();
|
||||
}
|
||||
}
|
||||
|
||||
fn draw(
|
||||
&self,
|
||||
tree: &Tree,
|
||||
renderer: &mut Renderer,
|
||||
theme: &Theme,
|
||||
_style: &renderer::Style,
|
||||
layout: Layout<'_>,
|
||||
_cursor: mouse::Cursor,
|
||||
_viewport: &Rectangle,
|
||||
) {
|
||||
let bounds = layout.bounds();
|
||||
let custom_style = theme.appearance(&self.style, self.progress.is_some(), false);
|
||||
let state = tree.state.downcast_ref::<State>();
|
||||
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: Rectangle {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: bounds.width,
|
||||
height: bounds.height,
|
||||
},
|
||||
border: iced::Border {
|
||||
width: if custom_style.border_color.is_some() {
|
||||
1.0
|
||||
} else {
|
||||
0.0
|
||||
},
|
||||
color: custom_style.border_color.unwrap_or(custom_style.bar_color),
|
||||
radius: custom_style.border_radius.into(),
|
||||
},
|
||||
snap: true,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
Background::Color(custom_style.track_color),
|
||||
);
|
||||
|
||||
if let Some(progress) = self.progress {
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: Rectangle {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: progress * bounds.width,
|
||||
height: bounds.height,
|
||||
},
|
||||
border: iced::Border {
|
||||
width: 0.,
|
||||
color: iced::Color::TRANSPARENT,
|
||||
radius: custom_style.border_radius.into(),
|
||||
},
|
||||
snap: true,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
Background::Color(custom_style.bar_color),
|
||||
);
|
||||
} else {
|
||||
match state {
|
||||
State::Expanding { progress, .. } => renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: Rectangle {
|
||||
x: bounds.x,
|
||||
y: bounds.y,
|
||||
width: smootherstep(*progress) * bounds.width,
|
||||
height: bounds.height,
|
||||
},
|
||||
border: iced::Border {
|
||||
width: 0.,
|
||||
color: iced::Color::TRANSPARENT,
|
||||
radius: custom_style.border_radius.into(),
|
||||
},
|
||||
snap: true,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
Background::Color(custom_style.bar_color),
|
||||
),
|
||||
|
||||
State::Contracting { progress, .. } => renderer.fill_quad(
|
||||
Quad {
|
||||
bounds: Rectangle {
|
||||
x: bounds.x + smootherstep(*progress) * bounds.width,
|
||||
y: bounds.y,
|
||||
width: (1.0 - smootherstep(*progress)) * bounds.width,
|
||||
height: bounds.height,
|
||||
},
|
||||
border: iced::Border {
|
||||
width: 0.,
|
||||
color: iced::Color::TRANSPARENT,
|
||||
radius: custom_style.border_radius.into(),
|
||||
},
|
||||
snap: true,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
Background::Color(custom_style.bar_color),
|
||||
),
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl<'a, Message, Theme, Renderer> From<Linear<Theme>> for Element<'a, Message, Theme, Renderer>
|
||||
where
|
||||
Message: Clone + 'a,
|
||||
Theme: StyleSheet + 'a,
|
||||
Renderer: iced::advanced::Renderer + 'a,
|
||||
{
|
||||
fn from(linear: Linear<Theme>) -> Self {
|
||||
Self::new(linear)
|
||||
}
|
||||
}
|
||||
11
src/widget/progress_bar/mod.rs
Normal file
11
src/widget/progress_bar/mod.rs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
pub mod circular;
|
||||
pub mod linear;
|
||||
pub mod style;
|
||||
|
||||
pub fn circular_progress<Message>() -> circular::Circular<crate::Theme> {
|
||||
circular::Circular::new()
|
||||
}
|
||||
|
||||
pub fn linear_progress<Message>() -> linear::Linear<crate::Theme> {
|
||||
linear::Linear::new()
|
||||
}
|
||||
105
src/widget/progress_bar/style.rs
Normal file
105
src/widget/progress_bar/style.rs
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
use iced::Color;
|
||||
|
||||
#[derive(Debug, Clone, Copy)]
|
||||
pub struct Appearance {
|
||||
/// The track [`Color`] of the progress indicator.
|
||||
pub track_color: Color,
|
||||
/// The bar [`Color`] of the progress indicator.
|
||||
pub bar_color: Color,
|
||||
/// The border [`Color`] of the progress indicator.
|
||||
pub border_color: Option<Color>,
|
||||
/// The border radius of the progress indicator.
|
||||
pub border_radius: f32,
|
||||
}
|
||||
|
||||
impl std::default::Default for Appearance {
|
||||
fn default() -> Self {
|
||||
Self {
|
||||
track_color: Color::TRANSPARENT,
|
||||
bar_color: Color::BLACK,
|
||||
border_color: None,
|
||||
border_radius: 0.0,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A set of rules that dictate the style of an indicator.
|
||||
pub trait StyleSheet {
|
||||
/// The supported style of the [`StyleSheet`].
|
||||
type Style: Default;
|
||||
|
||||
/// Produces the active [`Appearance`] of a indicator.
|
||||
fn appearance(
|
||||
&self,
|
||||
style: &Self::Style,
|
||||
is_determinate: bool,
|
||||
is_circular: bool,
|
||||
) -> Appearance;
|
||||
}
|
||||
|
||||
impl StyleSheet for iced::Theme {
|
||||
type Style = ();
|
||||
|
||||
fn appearance(
|
||||
&self,
|
||||
_style: &Self::Style,
|
||||
_is_determinate: bool,
|
||||
_is_circular: bool,
|
||||
) -> Appearance {
|
||||
let palette = self.extended_palette();
|
||||
|
||||
Appearance {
|
||||
track_color: palette.background.weak.color,
|
||||
bar_color: palette.primary.base.color,
|
||||
border_color: None,
|
||||
border_radius: 0.0,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl StyleSheet for crate::Theme {
|
||||
type Style = ();
|
||||
|
||||
fn appearance(
|
||||
&self,
|
||||
_style: &Self::Style,
|
||||
is_determinate: bool,
|
||||
is_circular: bool,
|
||||
) -> Appearance {
|
||||
let cur = self.current_container();
|
||||
let mut cur_divider = cur.divider;
|
||||
cur_divider.alpha = 0.5;
|
||||
let theme = self.cosmic();
|
||||
|
||||
let (mut track_color, bar_color) = if theme.is_dark && theme.is_high_contrast {
|
||||
(
|
||||
theme.palette.neutral_6.into(),
|
||||
theme.accent_text_color().into(),
|
||||
)
|
||||
} else if theme.is_dark {
|
||||
(theme.palette.neutral_5.into(), theme.accent_color().into())
|
||||
} else if theme.is_high_contrast {
|
||||
(
|
||||
theme.palette.neutral_4.into(),
|
||||
theme.accent_text_color().into(),
|
||||
)
|
||||
} else {
|
||||
(theme.palette.neutral_3.into(), theme.accent_color().into())
|
||||
};
|
||||
|
||||
if !is_determinate && is_circular {
|
||||
track_color = Color::TRANSPARENT;
|
||||
}
|
||||
|
||||
Appearance {
|
||||
track_color,
|
||||
bar_color,
|
||||
border_color: if is_determinate && theme.is_high_contrast {
|
||||
Some(cur_divider.into())
|
||||
} else {
|
||||
None
|
||||
},
|
||||
border_radius: theme.corner_radii.radius_xl[0],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -262,11 +262,11 @@ where
|
|||
font.hash(&mut hasher);
|
||||
let text_hash = hasher.finish();
|
||||
|
||||
if let Some(prev_hash) = state.text_hashes.insert(key, text_hash) {
|
||||
if prev_hash == text_hash {
|
||||
if let Some(prev_hash) = state.text_hashes.insert(key, text_hash)
|
||||
&& prev_hash == text_hash
|
||||
{
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if let Some(paragraph) = state.paragraphs.get_mut(key) {
|
||||
let text = Text {
|
||||
|
|
@ -928,7 +928,6 @@ where
|
|||
|
||||
fn diff(&mut self, tree: &mut Tree) {
|
||||
let state = tree.state.downcast_mut::<LocalState>();
|
||||
|
||||
for key in self.model.order.iter().copied() {
|
||||
self.update_entity_paragraph(state, key);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue