Implement pure version of Canvas widget

Cargo.toml

@@ -41,7 +41,7 @@ smol = ["iced_futures/smol"]
 # Enables advanced color conversion via `palette`
 palette = ["iced_core/palette"]
 # Enables pure, virtual widgets in the `pure` module
-pure = ["iced_pure"]
+pure = ["iced_pure", "iced_graphics/pure"]
 
 [badges]
 maintenance = { status = "actively-developed" }

graphics/Cargo.toml

@@ -17,6 +17,7 @@ font-source = ["font-kit"]
 font-fallback = []
 font-icons = []
 opengl = []
+pure = ["iced_pure"]
 
 [dependencies]
 glam = "0.10"
@@ -35,6 +36,11 @@ path = "../native"
 version = "0.3"
 path = "../style"
 
+[dependencies.iced_pure]
+version = "0.1"
+path = "../pure"
+optional = true
+
 [dependencies.lyon]
 version = "0.17"
 optional = true

graphics/src/widget.rs

@@ -14,3 +14,6 @@ pub mod qr_code;
 #[cfg(feature = "qr_code")]
 #[doc(no_inline)]
 pub use qr_code::QRCode;
+
+#[cfg(feature = "pure")]
+pub mod pure;

graphics/src/widget/pure.rs

@@ -0,0 +1,6 @@
+//! Leverage pure, virtual widgets in your application.
+#[cfg(feature = "canvas")]
+pub mod canvas;
+
+#[cfg(feature = "canvas")]
+pub use canvas::Canvas;

graphics/src/widget/pure/canvas.rs

@@ -0,0 +1,229 @@
+//! Draw 2D graphics for your users.
+//!
+//! A [`Canvas`] widget can be used to draw different kinds of 2D shapes in a
+//! [`Frame`]. It can be used for animation, data visualization, game graphics,
+//! and more!
+mod program;
+
+pub use crate::widget::canvas::{Canvas as _, Program as _, *};
+
+pub use program::Program;
+
+use crate::{Backend, Primitive, Renderer};
+
+use iced_native::layout::{self, Layout};
+use iced_native::mouse;
+use iced_native::renderer;
+use iced_native::{Clipboard, Length, Point, Rectangle, Shell, Size, Vector};
+use iced_pure::widget::tree::{self, Tree};
+use iced_pure::widget::{Element, Widget};
+
+/// A widget capable of drawing 2D graphics.
+///
+/// ## Drawing a simple circle
+/// If you want to get a quick overview, here's how we can draw a simple circle:
+///
+/// ```no_run
+/// # mod iced {
+/// #     pub mod pure {
+/// #         pub use iced_graphics::pure::canvas;
+/// #     }
+/// #     pub use iced_native::{Color, Rectangle};
+/// # }
+/// use iced::pure::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
+/// use iced::{Color, Rectangle};
+///
+/// // First, we define the data we need for drawing
+/// #[derive(Debug)]
+/// struct Circle {
+///     radius: f32,
+/// }
+///
+/// // Then, we implement the `Program` trait
+/// impl Program for Circle {
+///     type Message = ();
+///     type State = ();
+///
+///     fn draw(&self, _state: &(), bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
+///         // We prepare a new `Frame`
+///         let mut frame = Frame::new(bounds.size());
+///
+///         // We create a `Path` representing a simple circle
+///         let circle = Path::circle(frame.center(), self.radius);
+///
+///         // And fill it with some color
+///         frame.fill(&circle, Color::BLACK);
+///
+///         // Finally, we produce the geometry
+///         vec![frame.into_geometry()]
+///     }
+/// }
+///
+/// // Finally, we simply use our `Circle` to create the `Canvas`!
+/// let canvas = Canvas::new(Circle { radius: 50.0 });
+/// ```
+#[derive(Debug)]
+pub struct Canvas<P>
+where
+    P: Program,
+{
+    width: Length,
+    height: Length,
+    program: P,
+}
+
+impl<P> Canvas<P>
+where
+    P: Program,
+{
+    const DEFAULT_SIZE: u16 = 100;
+
+    /// Creates a new [`Canvas`].
+    pub fn new(program: P) -> Self {
+        Canvas {
+            width: Length::Units(Self::DEFAULT_SIZE),
+            height: Length::Units(Self::DEFAULT_SIZE),
+            program,
+        }
+    }
+
+    /// Sets the width of the [`Canvas`].
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the height of the [`Canvas`].
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+}
+
+impl<P, B> Widget<P::Message, Renderer<B>> for Canvas<P>
+where
+    P: Program,
+    B: Backend,
+{
+    fn state(&self) -> tree::State {
+        tree::State::new(P::State::default())
+    }
+
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(
+        &self,
+        _renderer: &Renderer<B>,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits.width(self.width).height(self.height);
+        let size = limits.resolve(Size::ZERO);
+
+        layout::Node::new(size)
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: iced_native::Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _renderer: &Renderer<B>,
+        _clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, P::Message>,
+    ) -> event::Status {
+        let bounds = layout.bounds();
+
+        let canvas_event = match event {
+            iced_native::Event::Mouse(mouse_event) => {
+                Some(Event::Mouse(mouse_event))
+            }
+            iced_native::Event::Keyboard(keyboard_event) => {
+                Some(Event::Keyboard(keyboard_event))
+            }
+            _ => None,
+        };
+
+        let cursor = Cursor::from_window_position(cursor_position);
+
+        if let Some(canvas_event) = canvas_event {
+            let state = tree.state.downcast_mut::<P::State>();
+
+            let (event_status, message) =
+                self.program.update(state, canvas_event, bounds, cursor);
+
+            if let Some(message) = message {
+                shell.publish(message);
+            }
+
+            return event_status;
+        }
+
+        event::Status::Ignored
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+        _renderer: &Renderer<B>,
+    ) -> mouse::Interaction {
+        let bounds = layout.bounds();
+        let cursor = Cursor::from_window_position(cursor_position);
+        let state = tree.state.downcast_ref::<P::State>();
+
+        self.program.mouse_interaction(state, bounds, cursor)
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer<B>,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+    ) {
+        use iced_native::Renderer as _;
+
+        let bounds = layout.bounds();
+
+        if bounds.width < 1.0 || bounds.height < 1.0 {
+            return;
+        }
+
+        let translation = Vector::new(bounds.x, bounds.y);
+        let cursor = Cursor::from_window_position(cursor_position);
+        let state = tree.state.downcast_ref::<P::State>();
+
+        renderer.with_translation(translation, |renderer| {
+            renderer.draw_primitive(Primitive::Group {
+                primitives: self
+                    .program
+                    .draw(state, bounds, cursor)
+                    .into_iter()
+                    .map(Geometry::into_primitive)
+                    .collect(),
+            });
+        });
+    }
+}
+
+impl<'a, P, B> From<Canvas<P>> for Element<'a, P::Message, Renderer<B>>
+where
+    P::Message: 'static,
+    P: Program + 'a,
+    B: Backend,
+{
+    fn from(canvas: Canvas<P>) -> Element<'a, P::Message, Renderer<B>> {
+        Element::new(canvas)
+    }
+}

graphics/src/widget/pure/canvas/program.rs

@@ -0,0 +1,104 @@
+use crate::widget::pure::canvas::event::{self, Event};
+use crate::widget::pure::canvas::mouse;
+use crate::widget::pure::canvas::{Cursor, Geometry};
+use crate::Rectangle;
+
+/// The state and logic of a [`Canvas`].
+///
+/// A [`Program`] can mutate internal state and produce messages for an
+/// application.
+///
+/// [`Canvas`]: crate::widget::Canvas
+pub trait Program {
+    /// The [`Message`] produced by the [`Program`].
+    type Message;
+
+    /// The internal [`State`] mutated by the [`Program`].
+    type State: Default + 'static;
+
+    /// Updates the state of the [`Program`].
+    ///
+    /// When a [`Program`] is used in a [`Canvas`], the runtime will call this
+    /// method for each [`Event`].
+    ///
+    /// This method can optionally return a `Message` to notify an application
+    /// of any meaningful interactions.
+    ///
+    /// By default, this method does and returns nothing.
+    ///
+    /// [`Canvas`]: crate::widget::Canvas
+    fn update(
+        &self,
+        _state: &mut Self::State,
+        _event: Event,
+        _bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> (event::Status, Option<Self::Message>) {
+        (event::Status::Ignored, None)
+    }
+
+    /// Draws the state of the [`Program`], producing a bunch of [`Geometry`].
+    ///
+    /// [`Geometry`] can be easily generated with a [`Frame`] or stored in a
+    /// [`Cache`].
+    ///
+    /// [`Frame`]: crate::widget::canvas::Frame
+    /// [`Cache`]: crate::widget::canvas::Cache
+    fn draw(
+        &self,
+        state: &Self::State,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Vec<Geometry>;
+
+    /// Returns the current mouse interaction of the [`Program`].
+    ///
+    /// The interaction returned will be in effect even if the cursor position
+    /// is out of bounds of the program's [`Canvas`].
+    ///
+    /// [`Canvas`]: crate::widget::Canvas
+    fn mouse_interaction(
+        &self,
+        _state: &Self::State,
+        _bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> mouse::Interaction {
+        mouse::Interaction::default()
+    }
+}
+
+impl<T> Program for &T
+where
+    T: Program,
+{
+    type Message = T::Message;
+    type State = T::State;
+
+    fn update(
+        &self,
+        state: &mut Self::State,
+        event: Event,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> (event::Status, Option<Self::Message>) {
+        T::update(self, state, event, bounds, cursor)
+    }
+
+    fn draw(
+        &self,
+        state: &Self::State,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Vec<Geometry> {
+        T::draw(self, state, bounds, cursor)
+    }
+
+    fn mouse_interaction(
+        &self,
+        state: &Self::State,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> mouse::Interaction {
+        T::mouse_interaction(self, state, bounds, cursor)
+    }
+}

src/pure.rs

@@ -48,5 +48,11 @@ pub type Image = iced_pure::Image<crate::widget::image::Handle>;
 mod application;
 mod sandbox;
 
+#[cfg(feature = "canvas")]
+pub use iced_graphics::widget::pure::canvas;
+
+#[cfg(feature = "canvas")]
+pub use canvas::Canvas;
+
 pub use application::Application;
 pub use sandbox::Sandbox;