Implement theme styling for Canvas

This commit is contained in:
Héctor Ramón Jiménez 2022-06-07 05:24:43 +02:00
parent f92afa7950
commit fc13bb3d65
No known key found for this signature in database
GPG key ID: 140CC052C94F138E
10 changed files with 94 additions and 45 deletions

View file

@ -71,7 +71,7 @@ mod bezier {
use iced::{ use iced::{
canvas::event::{self, Event}, canvas::event::{self, Event},
canvas::{self, Canvas, Cursor, Frame, Geometry, Path, Stroke}, canvas::{self, Canvas, Cursor, Frame, Geometry, Path, Stroke},
mouse, Element, Length, Point, Rectangle, mouse, Element, Length, Point, Rectangle, Theme,
}; };
#[derive(Default)] #[derive(Default)]
@ -158,7 +158,12 @@ mod bezier {
} }
} }
fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> { fn draw(
&self,
_theme: &Theme,
bounds: Rectangle,
cursor: Cursor,
) -> Vec<Geometry> {
let content = let content =
self.state.cache.draw(bounds.size(), |frame: &mut Frame| { self.state.cache.draw(bounds.size(), |frame: &mut Frame| {
Curve::draw_all(self.curves, frame); Curve::draw_all(self.curves, frame);

View file

@ -81,7 +81,12 @@ impl Application for Clock {
} }
impl<Message> canvas::Program<Message> for Clock { impl<Message> canvas::Program<Message> for Clock {
fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry> { fn draw(
&self,
_theme: &Theme,
bounds: Rectangle,
_cursor: Cursor,
) -> Vec<Geometry> {
let clock = self.clock.draw(bounds.size(), |frame| { let clock = self.clock.draw(bounds.size(), |frame| {
let center = frame.center(); let center = frame.center();
let radius = frame.width().min(frame.height()) / 2.0; let radius = frame.width().min(frame.height()) / 2.0;

View file

@ -236,7 +236,12 @@ impl Theme {
} }
impl<Message> canvas::Program<Message> for Theme { impl<Message> canvas::Program<Message> for Theme {
fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry> { fn draw(
&self,
_theme: &iced::Theme,
bounds: Rectangle,
_cursor: Cursor,
) -> Vec<Geometry> {
let theme = self.canvas_cache.draw(bounds.size(), |frame| { let theme = self.canvas_cache.draw(bounds.size(), |frame| {
self.draw(frame); self.draw(frame);
}); });

View file

@ -163,7 +163,7 @@ mod grid {
alignment, alignment,
canvas::event::{self, Event}, canvas::event::{self, Event},
canvas::{self, Cache, Canvas, Cursor, Frame, Geometry, Path, Text}, canvas::{self, Cache, Canvas, Cursor, Frame, Geometry, Path, Text},
mouse, Color, Element, Length, Point, Rectangle, Size, Vector, mouse, Color, Element, Length, Point, Rectangle, Size, Theme, Vector,
}; };
use rustc_hash::{FxHashMap, FxHashSet}; use rustc_hash::{FxHashMap, FxHashSet};
use std::future::Future; use std::future::Future;
@ -445,7 +445,12 @@ mod grid {
} }
} }
fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> { fn draw(
&self,
_theme: &Theme,
bounds: Rectangle,
cursor: Cursor,
) -> Vec<Geometry> {
let center = Vector::new(bounds.width / 2.0, bounds.height / 2.0); let center = Vector::new(bounds.width / 2.0, bounds.height / 2.0);
let life = self.life_cache.draw(bounds.size(), |frame| { let life = self.life_cache.draw(bounds.size(), |frame| {

View file

@ -3,6 +3,8 @@
mod preset; mod preset;
use grid::Grid; use grid::Grid;
use preset::Preset;
use iced::executor; use iced::executor;
use iced::pure::{ use iced::pure::{
button, checkbox, column, container, pick_list, row, slider, text, button, checkbox, column, container, pick_list, row, slider, text,
@ -12,7 +14,6 @@ use iced::theme::{self, Theme};
use iced::time; use iced::time;
use iced::window; use iced::window;
use iced::{Alignment, Command, Length, Settings, Subscription}; use iced::{Alignment, Command, Length, Settings, Subscription};
use preset::Preset;
use std::time::{Duration, Instant}; use std::time::{Duration, Instant};
pub fn main() -> iced::Result { pub fn main() -> iced::Result {
@ -216,7 +217,7 @@ mod grid {
}; };
use iced::pure::Element; use iced::pure::Element;
use iced::{ use iced::{
alignment, mouse, Color, Length, Point, Rectangle, Size, Vector, alignment, mouse, Color, Length, Point, Rectangle, Size, Theme, Vector,
}; };
use rustc_hash::{FxHashMap, FxHashSet}; use rustc_hash::{FxHashMap, FxHashSet};
use std::future::Future; use std::future::Future;
@ -525,6 +526,7 @@ mod grid {
fn draw( fn draw(
&self, &self,
_interaction: &Interaction, _interaction: &Interaction,
_theme: &Theme,
bounds: Rectangle, bounds: Rectangle,
cursor: Cursor, cursor: Cursor,
) -> Vec<Geometry> { ) -> Vec<Geometry> {

View file

@ -135,6 +135,7 @@ impl State {
impl<Message> canvas::Program<Message> for State { impl<Message> canvas::Program<Message> for State {
fn draw( fn draw(
&self, &self,
_theme: &Theme,
bounds: Rectangle, bounds: Rectangle,
_cursor: Cursor, _cursor: Cursor,
) -> Vec<canvas::Geometry> { ) -> Vec<canvas::Geometry> {

View file

@ -62,10 +62,10 @@ use std::marker::PhantomData;
/// ```no_run /// ```no_run
/// # mod iced { /// # mod iced {
/// # pub use iced_graphics::canvas; /// # pub use iced_graphics::canvas;
/// # pub use iced_native::{Color, Rectangle}; /// # pub use iced_native::{Color, Rectangle, Theme};
/// # } /// # }
/// use iced::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program}; /// use iced::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
/// use iced::{Color, Rectangle}; /// use iced::{Color, Rectangle, Theme};
/// ///
/// // First, we define the data we need for drawing /// // First, we define the data we need for drawing
/// #[derive(Debug)] /// #[derive(Debug)]
@ -75,7 +75,7 @@ use std::marker::PhantomData;
/// ///
/// // Then, we implement the `Program` trait /// // Then, we implement the `Program` trait
/// impl Program<()> for Circle { /// impl Program<()> for Circle {
/// fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{ /// fn draw(&self, _theme: &Theme, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
/// // We prepare a new `Frame` /// // We prepare a new `Frame`
/// let mut frame = Frame::new(bounds.size()); /// let mut frame = Frame::new(bounds.size());
/// ///
@ -94,14 +94,21 @@ use std::marker::PhantomData;
/// let canvas = Canvas::new(Circle { radius: 50.0 }); /// let canvas = Canvas::new(Circle { radius: 50.0 });
/// ``` /// ```
#[derive(Debug)] #[derive(Debug)]
pub struct Canvas<Message, P: Program<Message>> { pub struct Canvas<Message, Theme, P>
where
P: Program<Message, Theme>,
{
width: Length, width: Length,
height: Length, height: Length,
program: P, program: P,
message_: PhantomData<Message>, message_: PhantomData<Message>,
theme_: PhantomData<Theme>,
} }
impl<Message, P: Program<Message>> Canvas<Message, P> { impl<Message, Theme, P> Canvas<Message, Theme, P>
where
P: Program<Message, Theme>,
{
const DEFAULT_SIZE: u16 = 100; const DEFAULT_SIZE: u16 = 100;
/// Creates a new [`Canvas`]. /// Creates a new [`Canvas`].
@ -111,6 +118,7 @@ impl<Message, P: Program<Message>> Canvas<Message, P> {
height: Length::Units(Self::DEFAULT_SIZE), height: Length::Units(Self::DEFAULT_SIZE),
program, program,
message_: PhantomData, message_: PhantomData,
theme_: PhantomData,
} }
} }
@ -127,9 +135,9 @@ impl<Message, P: Program<Message>> Canvas<Message, P> {
} }
} }
impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, P> impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, T, P>
where where
P: Program<Message>, P: Program<Message, T>,
B: Backend, B: Backend,
{ {
fn width(&self) -> Length { fn width(&self) -> Length {
@ -204,7 +212,7 @@ where
fn draw( fn draw(
&self, &self,
renderer: &mut Renderer<B, T>, renderer: &mut Renderer<B, T>,
_theme: &T, theme: &T,
_style: &renderer::Style, _style: &renderer::Style,
layout: Layout<'_>, layout: Layout<'_>,
cursor_position: Point, cursor_position: Point,
@ -225,7 +233,7 @@ where
renderer.draw_primitive(Primitive::Group { renderer.draw_primitive(Primitive::Group {
primitives: self primitives: self
.program .program
.draw(bounds, cursor) .draw(theme, bounds, cursor)
.into_iter() .into_iter()
.map(Geometry::into_primitive) .map(Geometry::into_primitive)
.collect(), .collect(),
@ -234,15 +242,16 @@ where
} }
} }
impl<'a, Message, P, B, T> From<Canvas<Message, P>> impl<'a, Message, P, B, T> From<Canvas<Message, T, P>>
for Element<'a, Message, Renderer<B, T>> for Element<'a, Message, Renderer<B, T>>
where where
Message: 'static, Message: 'static,
P: Program<Message> + 'a, P: Program<Message, T> + 'a,
B: Backend, B: Backend,
T: 'a,
{ {
fn from( fn from(
canvas: Canvas<Message, P>, canvas: Canvas<Message, T, P>,
) -> Element<'a, Message, Renderer<B, T>> { ) -> Element<'a, Message, Renderer<B, T>> {
Element::new(canvas) Element::new(canvas)
} }

View file

@ -1,6 +1,8 @@
use crate::canvas::event::{self, Event}; use crate::canvas::event::{self, Event};
use crate::canvas::{Cursor, Geometry}; use crate::canvas::{Cursor, Geometry};
use iced_native::{mouse, Rectangle};
use iced_native::mouse;
use iced_native::Rectangle;
/// The state and logic of a [`Canvas`]. /// The state and logic of a [`Canvas`].
/// ///
@ -8,7 +10,7 @@ use iced_native::{mouse, Rectangle};
/// application. /// application.
/// ///
/// [`Canvas`]: crate::widget::Canvas /// [`Canvas`]: crate::widget::Canvas
pub trait Program<Message> { pub trait Program<Message, Theme = iced_native::Theme> {
/// Updates the state of the [`Program`]. /// Updates the state of the [`Program`].
/// ///
/// When a [`Program`] is used in a [`Canvas`], the runtime will call this /// When a [`Program`] is used in a [`Canvas`], the runtime will call this
@ -36,7 +38,12 @@ pub trait Program<Message> {
/// ///
/// [`Frame`]: crate::widget::canvas::Frame /// [`Frame`]: crate::widget::canvas::Frame
/// [`Cache`]: crate::widget::canvas::Cache /// [`Cache`]: crate::widget::canvas::Cache
fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry>; fn draw(
&self,
theme: &Theme,
bounds: Rectangle,
cursor: Cursor,
) -> Vec<Geometry>;
/// Returns the current mouse interaction of the [`Program`]. /// Returns the current mouse interaction of the [`Program`].
/// ///
@ -53,9 +60,9 @@ pub trait Program<Message> {
} }
} }
impl<T, Message> Program<Message> for &mut T impl<T, Message, Theme> Program<Message, Theme> for &mut T
where where
T: Program<Message>, T: Program<Message, Theme>,
{ {
fn update( fn update(
&mut self, &mut self,
@ -66,8 +73,13 @@ where
T::update(self, event, bounds, cursor) T::update(self, event, bounds, cursor)
} }
fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> { fn draw(
T::draw(self, bounds, cursor) &self,
theme: &Theme,
bounds: Rectangle,
cursor: Cursor,
) -> Vec<Geometry> {
T::draw(self, theme, bounds, cursor)
} }
fn mouse_interaction( fn mouse_interaction(

View file

@ -30,10 +30,10 @@ use std::marker::PhantomData;
/// # pub mod pure { /// # pub mod pure {
/// # pub use iced_graphics::pure::canvas; /// # pub use iced_graphics::pure::canvas;
/// # } /// # }
/// # pub use iced_native::{Color, Rectangle}; /// # pub use iced_native::{Color, Rectangle, Theme};
/// # } /// # }
/// use iced::pure::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program}; /// use iced::pure::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
/// use iced::{Color, Rectangle}; /// use iced::{Color, Rectangle, Theme};
/// ///
/// // First, we define the data we need for drawing /// // First, we define the data we need for drawing
/// #[derive(Debug)] /// #[derive(Debug)]
@ -45,7 +45,7 @@ use std::marker::PhantomData;
/// impl Program<()> for Circle { /// impl Program<()> for Circle {
/// type State = (); /// type State = ();
/// ///
/// fn draw(&self, _state: &(), bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{ /// fn draw(&self, _state: &(), _theme: &Theme, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
/// // We prepare a new `Frame` /// // We prepare a new `Frame`
/// let mut frame = Frame::new(bounds.size()); /// let mut frame = Frame::new(bounds.size());
/// ///
@ -64,19 +64,20 @@ use std::marker::PhantomData;
/// let canvas = Canvas::new(Circle { radius: 50.0 }); /// let canvas = Canvas::new(Circle { radius: 50.0 });
/// ``` /// ```
#[derive(Debug)] #[derive(Debug)]
pub struct Canvas<Message, P> pub struct Canvas<Message, Theme, P>
where where
P: Program<Message>, P: Program<Message, Theme>,
{ {
width: Length, width: Length,
height: Length, height: Length,
program: P, program: P,
message_: PhantomData<Message>, message_: PhantomData<Message>,
theme_: PhantomData<Theme>,
} }
impl<Message, P> Canvas<Message, P> impl<Message, Theme, P> Canvas<Message, Theme, P>
where where
P: Program<Message>, P: Program<Message, Theme>,
{ {
const DEFAULT_SIZE: u16 = 100; const DEFAULT_SIZE: u16 = 100;
@ -87,6 +88,7 @@ where
height: Length::Units(Self::DEFAULT_SIZE), height: Length::Units(Self::DEFAULT_SIZE),
program, program,
message_: PhantomData, message_: PhantomData,
theme_: PhantomData,
} }
} }
@ -103,9 +105,9 @@ where
} }
} }
impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, P> impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, T, P>
where where
P: Program<Message>, P: Program<Message, T>,
B: Backend, B: Backend,
{ {
fn tag(&self) -> tree::Tag { fn tag(&self) -> tree::Tag {
@ -194,7 +196,7 @@ where
&self, &self,
tree: &Tree, tree: &Tree,
renderer: &mut Renderer<B, T>, renderer: &mut Renderer<B, T>,
_theme: &T, theme: &T,
_style: &renderer::Style, _style: &renderer::Style,
layout: Layout<'_>, layout: Layout<'_>,
cursor_position: Point, cursor_position: Point,
@ -216,7 +218,7 @@ where
renderer.draw_primitive(Primitive::Group { renderer.draw_primitive(Primitive::Group {
primitives: self primitives: self
.program .program
.draw(state, bounds, cursor) .draw(state, theme, bounds, cursor)
.into_iter() .into_iter()
.map(Geometry::into_primitive) .map(Geometry::into_primitive)
.collect(), .collect(),
@ -225,15 +227,16 @@ where
} }
} }
impl<'a, Message, P, B, T> From<Canvas<Message, P>> impl<'a, Message, P, B, T> From<Canvas<Message, T, P>>
for Element<'a, Message, Renderer<B, T>> for Element<'a, Message, Renderer<B, T>>
where where
Message: 'a, Message: 'a,
P: Program<Message> + 'a, P: Program<Message, T> + 'a,
B: Backend, B: Backend,
T: 'a,
{ {
fn from( fn from(
canvas: Canvas<Message, P>, canvas: Canvas<Message, T, P>,
) -> Element<'a, Message, Renderer<B, T>> { ) -> Element<'a, Message, Renderer<B, T>> {
Element::new(canvas) Element::new(canvas)
} }

View file

@ -9,7 +9,7 @@ use crate::Rectangle;
/// application. /// application.
/// ///
/// [`Canvas`]: crate::widget::Canvas /// [`Canvas`]: crate::widget::Canvas
pub trait Program<Message> { pub trait Program<Message, Theme = iced_native::Theme> {
/// The internal state mutated by the [`Program`]. /// The internal state mutated by the [`Program`].
type State: Default + 'static; type State: Default + 'static;
@ -44,6 +44,7 @@ pub trait Program<Message> {
fn draw( fn draw(
&self, &self,
state: &Self::State, state: &Self::State,
theme: &Theme,
bounds: Rectangle, bounds: Rectangle,
cursor: Cursor, cursor: Cursor,
) -> Vec<Geometry>; ) -> Vec<Geometry>;
@ -64,9 +65,9 @@ pub trait Program<Message> {
} }
} }
impl<Message, T> Program<Message> for &T impl<Message, Theme, T> Program<Message, Theme> for &T
where where
T: Program<Message>, T: Program<Message, Theme>,
{ {
type State = T::State; type State = T::State;
@ -83,10 +84,11 @@ where
fn draw( fn draw(
&self, &self,
state: &Self::State, state: &Self::State,
theme: &Theme,
bounds: Rectangle, bounds: Rectangle,
cursor: Cursor, cursor: Cursor,
) -> Vec<Geometry> { ) -> Vec<Geometry> {
T::draw(self, state, bounds, cursor) T::draw(self, state, theme, bounds, cursor)
} }
fn mouse_interaction( fn mouse_interaction(