feat(widget): Reimplement FlexRow as iced::Widget
This commit is contained in:
Michael Aaron Murphy
Michael Murphy
parent
aa2dfe0ea5
commit
d973dafba7
4 changed files with 286 additions and 137 deletions
|
|
@ -1,137 +0,0 @@
|
||||||
// Copyright 2023 System76 <info@system76.com>
|
|
||||||
// SPDX-License-Identifier: MPL-2.0
|
|
||||||
|
|
||||||
use crate::ext::CollectionWidget;
|
|
||||||
use crate::widget::{column, row};
|
|
||||||
use crate::Element;
|
|
||||||
use apply::Apply;
|
|
||||||
use derive_setters::Setters;
|
|
||||||
use iced_core::{alignment, Length, Size};
|
|
||||||
use std::cell::RefCell;
|
|
||||||
|
|
||||||
/// Responsively generates rows and columns of widgets based on its dimmensions.
|
|
||||||
#[derive(Setters)]
|
|
||||||
pub struct FlexRow<'a, Message> {
|
|
||||||
#[allow(clippy::type_complexity)]
|
|
||||||
#[setters(skip)]
|
|
||||||
generator: Box<dyn Fn(&mut Vec<Element<'a, Message>>, Size) -> u16 + 'a>,
|
|
||||||
/// Sets the space between each column of items.
|
|
||||||
column_spacing: u16,
|
|
||||||
/// Sets the space between each item in a row.
|
|
||||||
row_spacing: u16,
|
|
||||||
/// Sets the max number of items per row.
|
|
||||||
max_items: Option<u16>,
|
|
||||||
/// Sets the horizontal alignment of the [`FlexRow`].
|
|
||||||
align_x: alignment::Horizontal,
|
|
||||||
/// Sets the vertical alignment of the [`FlexRow`].
|
|
||||||
align_y: alignment::Vertical,
|
|
||||||
/// Sets the width of the [`FlexRow`].
|
|
||||||
width: Length,
|
|
||||||
/// Sets the height of the [`FlexRow`].
|
|
||||||
height: Length,
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Responsively generates rows and columns of widgets based on its dimmensions.
|
|
||||||
///
|
|
||||||
/// The `generator` input is a closure which must return the max width of all
|
|
||||||
/// elements created, while storing elements in the provided `Vec`.
|
|
||||||
///
|
|
||||||
/// ## Example
|
|
||||||
///
|
|
||||||
/// Suppose that there is a `COLOR_VALUE` variable which contains an array of
|
|
||||||
/// color values, and a `color_button` function which creates an `Element` from
|
|
||||||
/// a color.
|
|
||||||
///
|
|
||||||
/// We already know beforehand that our color buttons will have a fixed width
|
|
||||||
/// of `70`, so we store elements in the provided `Vec` and return `70`.
|
|
||||||
///
|
|
||||||
/// ```ignore
|
|
||||||
/// use iced_core::{alignment, Length};
|
|
||||||
///
|
|
||||||
/// let flex_row = cosmic::widget::flex_row(|vec, _size| {
|
|
||||||
/// let elements = DEFAULT_COLORS
|
|
||||||
/// .iter()
|
|
||||||
/// .cloned()
|
|
||||||
/// .map(color_button);
|
|
||||||
///
|
|
||||||
/// vec.extend(elements);
|
|
||||||
///
|
|
||||||
/// 70
|
|
||||||
/// });
|
|
||||||
///
|
|
||||||
/// flex_row
|
|
||||||
/// .column_spacing(12)
|
|
||||||
/// .row_spacing(16)
|
|
||||||
/// .width(Length::Fill)
|
|
||||||
/// .align_x(alignment::Horizontal::Center)
|
|
||||||
/// .into()
|
|
||||||
/// ```
|
|
||||||
pub fn flex_row<'a, Message: 'static>(
|
|
||||||
generator: impl Fn(&mut Vec<Element<'a, Message>>, Size) -> u16 + 'a,
|
|
||||||
) -> FlexRow<'a, Message> {
|
|
||||||
FlexRow {
|
|
||||||
generator: Box::new(generator),
|
|
||||||
column_spacing: 4,
|
|
||||||
row_spacing: 4,
|
|
||||||
max_items: None,
|
|
||||||
align_x: alignment::Horizontal::Left,
|
|
||||||
align_y: alignment::Vertical::Top,
|
|
||||||
width: Length::Shrink,
|
|
||||||
height: Length::Shrink,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
impl<'a, Message: 'static> From<FlexRow<'a, Message>> for Element<'a, Message> {
|
|
||||||
fn from(container: FlexRow<'a, Message>) -> Self {
|
|
||||||
let elements = RefCell::new(Vec::new());
|
|
||||||
|
|
||||||
iced::widget::responsive(move |size| {
|
|
||||||
let mut elements = elements.borrow_mut();
|
|
||||||
let item_width = (container.generator)(&mut elements, size);
|
|
||||||
|
|
||||||
let mut items_per_row = flex_row_items(
|
|
||||||
size.width,
|
|
||||||
f32::from(item_width),
|
|
||||||
f32::from(container.row_spacing),
|
|
||||||
) as usize;
|
|
||||||
|
|
||||||
if let Some(max_items) = container.max_items {
|
|
||||||
items_per_row = items_per_row.max(max_items as usize);
|
|
||||||
}
|
|
||||||
|
|
||||||
let mut elements_column = Vec::with_capacity(elements.len() / items_per_row);
|
|
||||||
|
|
||||||
let mut iterator = elements.drain(..);
|
|
||||||
|
|
||||||
while let Some(element) = iterator.next() {
|
|
||||||
let elements_row = row::with_capacity(items_per_row)
|
|
||||||
.spacing(container.row_spacing)
|
|
||||||
.push(element)
|
|
||||||
.extend(iterator.by_ref().take(items_per_row - 1));
|
|
||||||
|
|
||||||
elements_column.push(elements_row.into());
|
|
||||||
}
|
|
||||||
|
|
||||||
column::with_children(elements_column)
|
|
||||||
.spacing(container.column_spacing)
|
|
||||||
.apply(iced::widget::container)
|
|
||||||
.align_x(container.align_x)
|
|
||||||
.align_y(container.align_y)
|
|
||||||
.width(container.width)
|
|
||||||
.height(container.height)
|
|
||||||
.into()
|
|
||||||
})
|
|
||||||
.into()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#[allow(clippy::cast_precision_loss)]
|
|
||||||
fn flex_row_items(available: f32, item_width: f32, spacing: f32) -> u32 {
|
|
||||||
let mut items = 2;
|
|
||||||
|
|
||||||
while available >= (item_width + spacing) * items as f32 - spacing {
|
|
||||||
items += 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
items - 1
|
|
||||||
}
|
|
||||||
70
src/widget/flex_row/layout.rs
Normal file
70
src/widget/flex_row/layout.rs
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
// Copyright 2023 System76 <info@system76.com>
|
||||||
|
// SPDX-License-Identifier: MPL-2.0
|
||||||
|
|
||||||
|
use crate::{Element, Renderer};
|
||||||
|
use iced_core::layout::{Limits, Node};
|
||||||
|
use iced_core::{Padding, Point, Size};
|
||||||
|
|
||||||
|
pub fn resolve<Message>(
|
||||||
|
renderer: &Renderer,
|
||||||
|
limits: &Limits,
|
||||||
|
items: &[Element<'_, Message>],
|
||||||
|
padding: Padding,
|
||||||
|
column_spacing: f32,
|
||||||
|
row_spacing: f32,
|
||||||
|
) -> Node {
|
||||||
|
let limits = limits.pad(padding);
|
||||||
|
|
||||||
|
let mut nodes = Vec::with_capacity(items.len());
|
||||||
|
|
||||||
|
let max_flex_width = limits.max().width;
|
||||||
|
let mut flex_width = 0.0f32;
|
||||||
|
let mut flex_height = 0.0f32;
|
||||||
|
|
||||||
|
let mut current_row_width = 0.0f32;
|
||||||
|
let mut current_row_height = 0.0f32;
|
||||||
|
|
||||||
|
let mut row_buffer = Vec::with_capacity(8);
|
||||||
|
|
||||||
|
for child in items {
|
||||||
|
// Calculate the dimensions of the item.
|
||||||
|
let child_node = child.as_widget().layout(renderer, &limits);
|
||||||
|
let size = child_node.size();
|
||||||
|
|
||||||
|
// Calculate the required additional width to fit the item into the current row.
|
||||||
|
let required_width = size.width
|
||||||
|
+ if row_buffer.is_empty() {
|
||||||
|
0.0
|
||||||
|
} else {
|
||||||
|
row_spacing
|
||||||
|
};
|
||||||
|
|
||||||
|
// If it fits, add it to the current row, or create a new one.
|
||||||
|
if current_row_width + required_width <= max_flex_width {
|
||||||
|
current_row_width += required_width;
|
||||||
|
current_row_height = current_row_height.max(size.height);
|
||||||
|
|
||||||
|
row_buffer.push(child_node);
|
||||||
|
} else {
|
||||||
|
if flex_height != 0.0f32 {
|
||||||
|
flex_height += column_spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
let mut pos_x = 0.0f32;
|
||||||
|
let pos_y = flex_height;
|
||||||
|
|
||||||
|
for mut child_node in row_buffer.drain(..) {
|
||||||
|
child_node.move_to(Point::new(pos_x, pos_y));
|
||||||
|
pos_x += row_spacing + child_node.size().width;
|
||||||
|
nodes.push(child_node);
|
||||||
|
}
|
||||||
|
|
||||||
|
flex_height += current_row_height;
|
||||||
|
flex_width = flex_width.max(current_row_width);
|
||||||
|
current_row_width = 0.0f32;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let flex_size = limits.resolve(Size::new(flex_width, flex_height));
|
||||||
|
Node::with_children(flex_size.pad(padding), nodes)
|
||||||
|
}
|
||||||
14
src/widget/flex_row/mod.rs
Normal file
14
src/widget/flex_row/mod.rs
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
// Copyright 2023 System76 <info@system76.com>
|
||||||
|
// SPDX-License-Identifier: MPL-2.0
|
||||||
|
|
||||||
|
pub mod layout;
|
||||||
|
pub mod widget;
|
||||||
|
|
||||||
|
pub use widget::FlexRow;
|
||||||
|
|
||||||
|
use crate::Element;
|
||||||
|
|
||||||
|
/// Responsively generates rows and columns of widgets based on its dimmensions.
|
||||||
|
pub const fn flex_row<Message>(children: Vec<Element<Message>>) -> FlexRow<Message> {
|
||||||
|
FlexRow::new(children)
|
||||||
|
}
|
||||||
202
src/widget/flex_row/widget.rs
Normal file
202
src/widget/flex_row/widget.rs
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
// Copyright 2023 System76 <info@system76.com>
|
||||||
|
// SPDX-License-Identifier: MPL-2.0
|
||||||
|
|
||||||
|
use crate::{Element, Renderer};
|
||||||
|
use derive_setters::Setters;
|
||||||
|
use iced_core::event::{self, Event};
|
||||||
|
use iced_core::widget::{Operation, Tree};
|
||||||
|
use iced_core::{
|
||||||
|
layout, mouse, overlay, renderer, Clipboard, Layout, Length, Padding, Rectangle, Shell, Widget,
|
||||||
|
};
|
||||||
|
use iced_renderer::core::widget::OperationOutputWrapper;
|
||||||
|
|
||||||
|
/// Responsively generates rows and columns of widgets based on its dimmensions.
|
||||||
|
#[derive(Setters)]
|
||||||
|
#[must_use]
|
||||||
|
pub struct FlexRow<'a, Message> {
|
||||||
|
#[setters(skip)]
|
||||||
|
children: Vec<Element<'a, Message>>,
|
||||||
|
/// Sets the padding around the widget.
|
||||||
|
padding: Padding,
|
||||||
|
/// Sets the space between each column of items.
|
||||||
|
column_spacing: u16,
|
||||||
|
/// Sets the space between each item in a row.
|
||||||
|
row_spacing: u16,
|
||||||
|
/// Sets the width.
|
||||||
|
width: Length,
|
||||||
|
/// Sets the max width
|
||||||
|
max_width: f32,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl<'a, Message> FlexRow<'a, Message> {
|
||||||
|
pub const fn new(children: Vec<Element<'a, Message>>) -> Self {
|
||||||
|
Self {
|
||||||
|
children,
|
||||||
|
padding: Padding::ZERO,
|
||||||
|
column_spacing: 4,
|
||||||
|
row_spacing: 4,
|
||||||
|
width: Length::Shrink,
|
||||||
|
max_width: f32::INFINITY,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl<'a, Message: 'static + Clone> Widget<Message, Renderer> for FlexRow<'a, Message> {
|
||||||
|
fn children(&self) -> Vec<Tree> {
|
||||||
|
self.children.iter().map(Tree::new).collect()
|
||||||
|
}
|
||||||
|
|
||||||
|
fn diff(&mut self, tree: &mut Tree) {
|
||||||
|
tree.diff_children(self.children.as_mut_slice());
|
||||||
|
}
|
||||||
|
|
||||||
|
fn width(&self) -> Length {
|
||||||
|
self.width
|
||||||
|
}
|
||||||
|
|
||||||
|
fn height(&self) -> Length {
|
||||||
|
Length::Shrink
|
||||||
|
}
|
||||||
|
|
||||||
|
fn layout(&self, renderer: &Renderer, limits: &layout::Limits) -> layout::Node {
|
||||||
|
let limits = limits
|
||||||
|
.max_width(self.max_width)
|
||||||
|
.width(self.width())
|
||||||
|
.height(self.height());
|
||||||
|
|
||||||
|
super::layout::resolve(
|
||||||
|
renderer,
|
||||||
|
&limits,
|
||||||
|
&self.children,
|
||||||
|
self.padding,
|
||||||
|
f32::from(self.column_spacing),
|
||||||
|
f32::from(self.row_spacing),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn operate(
|
||||||
|
&self,
|
||||||
|
tree: &mut Tree,
|
||||||
|
layout: Layout<'_>,
|
||||||
|
renderer: &Renderer,
|
||||||
|
operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
|
||||||
|
) {
|
||||||
|
operation.container(None, layout.bounds(), &mut |operation| {
|
||||||
|
self.children
|
||||||
|
.iter()
|
||||||
|
.zip(&mut tree.children)
|
||||||
|
.zip(layout.children())
|
||||||
|
.for_each(|((child, state), layout)| {
|
||||||
|
child
|
||||||
|
.as_widget()
|
||||||
|
.operate(state, layout, renderer, operation);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
fn on_event(
|
||||||
|
&mut self,
|
||||||
|
tree: &mut Tree,
|
||||||
|
event: Event,
|
||||||
|
layout: Layout<'_>,
|
||||||
|
cursor: mouse::Cursor,
|
||||||
|
renderer: &Renderer,
|
||||||
|
clipboard: &mut dyn Clipboard,
|
||||||
|
shell: &mut Shell<'_, Message>,
|
||||||
|
viewport: &Rectangle,
|
||||||
|
) -> event::Status {
|
||||||
|
self.children
|
||||||
|
.iter_mut()
|
||||||
|
.zip(&mut tree.children)
|
||||||
|
.zip(layout.children())
|
||||||
|
.map(|((child, state), layout)| {
|
||||||
|
child.as_widget_mut().on_event(
|
||||||
|
state,
|
||||||
|
event.clone(),
|
||||||
|
layout,
|
||||||
|
cursor,
|
||||||
|
renderer,
|
||||||
|
clipboard,
|
||||||
|
shell,
|
||||||
|
viewport,
|
||||||
|
)
|
||||||
|
})
|
||||||
|
.fold(event::Status::Ignored, event::Status::merge)
|
||||||
|
}
|
||||||
|
|
||||||
|
fn mouse_interaction(
|
||||||
|
&self,
|
||||||
|
tree: &Tree,
|
||||||
|
layout: Layout<'_>,
|
||||||
|
cursor: mouse::Cursor,
|
||||||
|
viewport: &Rectangle,
|
||||||
|
renderer: &Renderer,
|
||||||
|
) -> mouse::Interaction {
|
||||||
|
self.children
|
||||||
|
.iter()
|
||||||
|
.zip(&tree.children)
|
||||||
|
.zip(layout.children())
|
||||||
|
.map(|((child, state), layout)| {
|
||||||
|
child
|
||||||
|
.as_widget()
|
||||||
|
.mouse_interaction(state, layout, cursor, viewport, renderer)
|
||||||
|
})
|
||||||
|
.max()
|
||||||
|
.unwrap_or_default()
|
||||||
|
}
|
||||||
|
|
||||||
|
fn draw(
|
||||||
|
&self,
|
||||||
|
tree: &Tree,
|
||||||
|
renderer: &mut Renderer,
|
||||||
|
theme: &crate::Theme,
|
||||||
|
style: &renderer::Style,
|
||||||
|
layout: Layout<'_>,
|
||||||
|
cursor: mouse::Cursor,
|
||||||
|
viewport: &Rectangle,
|
||||||
|
) {
|
||||||
|
for ((child, state), layout) in self
|
||||||
|
.children
|
||||||
|
.iter()
|
||||||
|
.zip(&tree.children)
|
||||||
|
.zip(layout.children())
|
||||||
|
{
|
||||||
|
child
|
||||||
|
.as_widget()
|
||||||
|
.draw(state, renderer, theme, style, layout, cursor, viewport);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn overlay<'b>(
|
||||||
|
&'b mut self,
|
||||||
|
tree: &'b mut Tree,
|
||||||
|
layout: Layout<'_>,
|
||||||
|
renderer: &Renderer,
|
||||||
|
) -> Option<overlay::Element<'b, Message, Renderer>> {
|
||||||
|
overlay::from_children(&mut self.children, tree, layout, renderer)
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(feature = "a11y")]
|
||||||
|
/// get the a11y nodes for the widget
|
||||||
|
fn a11y_nodes(
|
||||||
|
&self,
|
||||||
|
layout: Layout<'_>,
|
||||||
|
state: &Tree,
|
||||||
|
p: mouse::Cursor,
|
||||||
|
) -> iced_accessibility::A11yTree {
|
||||||
|
use iced_accessibility::A11yTree;
|
||||||
|
A11yTree::join(
|
||||||
|
self.children
|
||||||
|
.iter()
|
||||||
|
.zip(layout.children())
|
||||||
|
.zip(state.children.iter())
|
||||||
|
.map(|((c, c_layout), state)| c.as_widget().a11y_nodes(c_layout, state, p)),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl<'a, Message: 'static + Clone> From<FlexRow<'a, Message>> for Element<'a, Message> {
|
||||||
|
fn from(flex_row: FlexRow<'a, Message>) -> Self {
|
||||||
|
Self::new(flex_row)
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue