feat(progress_bar): linear progress markers
This commit is contained in:
parent
6f863f1905
commit
466e25d9f8
2 changed files with 143 additions and 30 deletions
|
|
@ -240,7 +240,9 @@ impl cosmic::Application for App {
|
|||
widget::progress_bar::linear::Linear::new()
|
||||
.girth(10.0)
|
||||
.progress(self.progress)
|
||||
.width(Length::Fill),
|
||||
.width(Length::Fill)
|
||||
.markers([0.25, 0.5, 0.75])
|
||||
.segment_spacing(2),
|
||||
)
|
||||
.push(
|
||||
widget::progress_bar::circular::Circular::new()
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ use super::animation::{Animation, Progress};
|
|||
use super::style::StyleSheet;
|
||||
use iced::advanced::widget::tree::{self, Tree};
|
||||
use iced::advanced::{self, Clipboard, Layout, Shell, Widget, layout, renderer};
|
||||
use iced::{Background, Element, Event, Length, Rectangle, Size, mouse, window};
|
||||
use iced::{Background, Element, Event, Length, Pixels, Rectangle, Size, mouse, window};
|
||||
|
||||
use std::time::Duration;
|
||||
|
||||
|
|
@ -21,6 +21,8 @@ where
|
|||
cycle_duration: Duration,
|
||||
period: Duration,
|
||||
progress: Option<f32>,
|
||||
markers: Vec<f32>,
|
||||
segment_spacing: f32,
|
||||
}
|
||||
|
||||
impl<Theme> Linear<Theme>
|
||||
|
|
@ -36,6 +38,8 @@ where
|
|||
cycle_duration: Duration::from_millis(1500),
|
||||
period: Duration::from_secs(2),
|
||||
progress: None,
|
||||
markers: Vec::new(),
|
||||
segment_spacing: 0.0,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -75,6 +79,26 @@ where
|
|||
self.progress = Some(progress.clamp(0.0, 1.0));
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the markers of a determinate progress bar, which divide the bar into segments.
|
||||
/// Each value is a progress fraction between `0.0` and `1.0 at which a visual gap is inserted.
|
||||
pub fn markers(mut self, markers: impl Into<Vec<f32>>) -> Self {
|
||||
let mut markers = markers.into();
|
||||
for bp in &mut markers {
|
||||
*bp = bp.clamp(0.0, 1.0);
|
||||
}
|
||||
markers.sort_by(f32::total_cmp);
|
||||
markers.dedup();
|
||||
|
||||
self.markers = markers;
|
||||
self
|
||||
}
|
||||
|
||||
/// Sets the spacing between segments at each marker.
|
||||
pub fn segment_spacing(mut self, spacing: impl Into<Pixels>) -> Self {
|
||||
self.segment_spacing = spacing.into().0;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl<Theme> Default for Linear<Theme>
|
||||
|
|
@ -165,26 +189,17 @@ where
|
|||
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,
|
||||
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),
|
||||
);
|
||||
let border_width = if custom_style.border_color.is_some() {
|
||||
1.0
|
||||
} else {
|
||||
0.0
|
||||
};
|
||||
let border_color = custom_style.border_color.unwrap_or(custom_style.bar_color);
|
||||
let radius = custom_style.border_radius;
|
||||
|
||||
let mut draw_segment = |x: f32, width: f32| {
|
||||
if width > 0.001 {
|
||||
let mut draw_quad = |x: f32, width: f32, color: iced::Color, border: iced::Border| {
|
||||
// don't draw if width is less than 0.1 pixels
|
||||
if width * bounds.width > 0.1 {
|
||||
renderer.fill_quad(
|
||||
renderer::Quad {
|
||||
bounds: Rectangle {
|
||||
|
|
@ -193,22 +208,102 @@ where
|
|||
width: width * bounds.width,
|
||||
height: bounds.height,
|
||||
},
|
||||
border: iced::Border {
|
||||
width: 0.0,
|
||||
color: iced::Color::TRANSPARENT,
|
||||
radius: custom_style.border_radius.into(),
|
||||
},
|
||||
border,
|
||||
snap: true,
|
||||
..renderer::Quad::default()
|
||||
},
|
||||
Background::Color(custom_style.bar_color),
|
||||
Background::Color(color),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if self.progress.is_some() {
|
||||
draw_segment(0.0, state.progress.current);
|
||||
let spacing = self.segment_spacing.max(1.0);
|
||||
let radius_inner = radius.min(spacing);
|
||||
|
||||
let gap = if self.markers.is_empty() {
|
||||
0.0
|
||||
} else {
|
||||
spacing / bounds.width
|
||||
};
|
||||
let drawable = 1.0 - gap * self.markers.len() as f32;
|
||||
let num_segments = self.markers.len() + 1;
|
||||
|
||||
let segment_bounds = |i: usize| {
|
||||
let seg_lo = if i == 0 { 0.0 } else { self.markers[i - 1] };
|
||||
let seg_hi = if i == num_segments - 1 {
|
||||
1.0
|
||||
} else {
|
||||
self.markers[i]
|
||||
};
|
||||
(seg_lo, seg_hi)
|
||||
};
|
||||
let get_radius = |i: usize| {
|
||||
let r_left = if i == 0 { radius } else { radius_inner };
|
||||
let r_right = if i == num_segments - 1 {
|
||||
radius
|
||||
} else {
|
||||
radius_inner
|
||||
};
|
||||
[r_left, r_right, r_right, r_left].into()
|
||||
};
|
||||
|
||||
// draw track segments
|
||||
for i in 0..num_segments {
|
||||
let (seg_lo, seg_hi) = segment_bounds(i);
|
||||
let x_start = seg_lo * drawable + i as f32 * gap;
|
||||
let x_width = (seg_hi - seg_lo) * drawable;
|
||||
|
||||
draw_quad(
|
||||
x_start,
|
||||
x_width,
|
||||
custom_style.track_color,
|
||||
iced::Border {
|
||||
width: border_width,
|
||||
color: border_color,
|
||||
radius: get_radius(i),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// draw bar segments
|
||||
let current_p = state.progress.current;
|
||||
for i in 0..num_segments {
|
||||
let (seg_lo, seg_hi) = segment_bounds(i);
|
||||
|
||||
// don't iterate over non-filled segments
|
||||
if current_p < seg_lo {
|
||||
break;
|
||||
}
|
||||
|
||||
let x_start = seg_lo * drawable + i as f32 * gap;
|
||||
let x_width = (seg_hi - seg_lo) * drawable;
|
||||
let fill = ((current_p - seg_lo) / (seg_hi - seg_lo)).clamp(0.0, 1.0);
|
||||
|
||||
draw_quad(
|
||||
x_start,
|
||||
x_width * fill,
|
||||
custom_style.bar_color,
|
||||
iced::Border {
|
||||
radius: get_radius(i),
|
||||
..iced::Border::default()
|
||||
},
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// draw track
|
||||
draw_quad(
|
||||
0.0,
|
||||
1.0,
|
||||
custom_style.track_color,
|
||||
iced::Border {
|
||||
width: border_width,
|
||||
color: border_color,
|
||||
radius: radius.into(),
|
||||
},
|
||||
);
|
||||
|
||||
// draw bar
|
||||
let (bar_start, bar_end) =
|
||||
state
|
||||
.animation
|
||||
|
|
@ -218,8 +313,24 @@ where
|
|||
let right_width = (1.0 - start).min(length);
|
||||
let left_width = length - right_width;
|
||||
|
||||
draw_segment(start, right_width);
|
||||
draw_segment(0.0, left_width);
|
||||
draw_quad(
|
||||
start,
|
||||
right_width,
|
||||
custom_style.bar_color,
|
||||
iced::Border {
|
||||
radius: radius.into(),
|
||||
..iced::Border::default()
|
||||
},
|
||||
);
|
||||
draw_quad(
|
||||
0.0,
|
||||
left_width,
|
||||
custom_style.bar_color,
|
||||
iced::Border {
|
||||
radius: radius.into(),
|
||||
..iced::Border::default()
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue