Merge pull request #214 from artursapek/artur/canvas-text

Implement text support in canvas widget

core/src/point.rs

@@ -46,3 +46,14 @@ impl std::ops::Add<Vector> for Point {
         }
     }
 }
+
+impl std::ops::Sub<Vector> for Point {
+    type Output = Self;
+
+    fn sub(self, vector: Vector) -> Self {
+        Self {
+            x: self.x - vector.x,
+            y: self.y - vector.y,
+        }
+    }
+}

core/src/vector.rs

@@ -32,6 +32,17 @@ where
     }
 }
 
+impl<T> std::ops::Sub for Vector<T>
+where
+    T: std::ops::Sub<Output = T>,
+{
+    type Output = Self;
+
+    fn sub(self, b: Self) -> Self {
+        Self::new(self.x - b.x, self.y - b.y)
+    }
+}
+
 impl<T> Default for Vector<T>
 where
     T: Default,

examples/bezier_tool/src/main.rs

@@ -23,7 +23,6 @@ mod bezier {
         basic_shapes, BuffersBuilder, StrokeAttributes, StrokeOptions,
         StrokeTessellator, VertexBuffers,
     };
-    use std::sync::Arc;
 
     pub struct Bezier<'a, Message> {
         state: &'a mut State,
@@ -175,10 +174,10 @@ mod bezier {
 
             let mesh = Primitive::Mesh2D {
                 origin: Point::new(bounds.x, bounds.y),
-                buffers: Arc::new(Mesh2D {
+                buffers: Mesh2D {
                     vertices: buffer.vertices,
                     indices: buffer.indices,
-                }),
+                },
             };
 
             (

examples/geometry/src/main.rs

@@ -87,7 +87,7 @@ mod rainbow {
             (
                 Primitive::Mesh2D {
                     origin: Point::new(b.x, b.y),
-                    buffers: std::sync::Arc::new(Mesh2D {
+                    buffers: Mesh2D {
                         vertices: vec![
                             Vertex2D {
                                 position: posn_center,
@@ -136,7 +136,7 @@ mod rainbow {
                             0, 7, 8, // BL
                             0, 8, 1, // L
                         ],
-                    }),
+                    },
                 },
                 MouseCursor::OutOfBounds,
             )

wgpu/src/primitive.rs

@@ -78,7 +78,18 @@ pub enum Primitive {
         origin: Point,
 
         /// The vertex and index buffers of the mesh
-        buffers: Arc<triangle::Mesh2D>,
+        buffers: triangle::Mesh2D,
+    },
+    /// A cached primitive.
+    ///
+    /// This can be useful if you are implementing a widget where primitive
+    /// generation is expensive.
+    Cached {
+        /// The origin of the coordinate system of the cached primitives
+        origin: Point,
+
+        /// The cached primitive
+        cache: Arc<Primitive>,
     },
 }
 

wgpu/src/renderer.rs

@@ -10,7 +10,6 @@ use iced_native::{
     layout, Background, Color, Layout, MouseCursor, Point, Rectangle, Vector,
     Widget,
 };
-use std::sync::Arc;
 
 mod widget;
 
@@ -29,9 +28,8 @@ pub struct Renderer {
 
 struct Layer<'a> {
     bounds: Rectangle<u32>,
-    offset: Vector<u32>,
     quads: Vec<Quad>,
-    meshes: Vec<(Point, Arc<triangle::Mesh2D>)>,
+    meshes: Vec<(Point, &'a triangle::Mesh2D)>,
     text: Vec<wgpu_glyph::Section<'a>>,
 
     #[cfg(any(feature = "image", feature = "svg"))]
@@ -39,10 +37,9 @@ struct Layer<'a> {
 }
 
 impl<'a> Layer<'a> {
-    pub fn new(bounds: Rectangle<u32>, offset: Vector<u32>) -> Self {
+    pub fn new(bounds: Rectangle<u32>) -> Self {
         Self {
             bounds,
-            offset,
             quads: Vec::new(),
             text: Vec::new(),
             meshes: Vec::new(),
@@ -103,17 +100,14 @@ impl Renderer {
 
         let mut layers = Vec::new();
 
-        layers.push(Layer::new(
+        layers.push(Layer::new(Rectangle {
-            Rectangle {
+            x: 0,
-                x: 0,
+            y: 0,
-                y: 0,
+            width: u32::from(width),
-                width: u32::from(width),
+            height: u32::from(height),
-                height: u32::from(height),
+        }));
-            },
-            Vector::new(0, 0),
-        ));
 
-        self.draw_primitive(primitive, &mut layers);
+        self.draw_primitive(Vector::new(0.0, 0.0), primitive, &mut layers);
         self.draw_overlay(overlay, &mut layers);
 
         for layer in layers {
@@ -137,17 +131,16 @@ impl Renderer {
 
     fn draw_primitive<'a>(
         &mut self,
+        translation: Vector,
         primitive: &'a Primitive,
         layers: &mut Vec<Layer<'a>>,
     ) {
-        let layer = layers.last_mut().unwrap();
-
         match primitive {
             Primitive::None => {}
             Primitive::Group { primitives } => {
                 // TODO: Inspect a bit and regroup (?)
                 for primitive in primitives {
-                    self.draw_primitive(primitive, layers)
+                    self.draw_primitive(translation, primitive, layers)
                 }
             }
             Primitive::Text {
@@ -179,12 +172,11 @@ impl Renderer {
                     }
                 };
 
+                let layer = layers.last_mut().unwrap();
+
                 layer.text.push(wgpu_glyph::Section {
                     text: &content,
-                    screen_position: (
+                    screen_position: (x + translation.x, y + translation.y),
-                        x - layer.offset.x as f32,
-                        y - layer.offset.y as f32,
-                    ),
                     bounds: (bounds.width, bounds.height),
                     scale: wgpu_glyph::Scale { x: *size, y: *size },
                     color: color.into_linear(),
@@ -222,11 +214,13 @@ impl Renderer {
                 border_width,
                 border_color,
             } => {
-                // TODO: Move some of this computations to the GPU (?)
+                let layer = layers.last_mut().unwrap();
+
+                // TODO: Move some of these computations to the GPU (?)
                 layer.quads.push(Quad {
                     position: [
-                        bounds.x - layer.offset.x as f32,
+                        bounds.x + translation.x,
-                        bounds.y - layer.offset.y as f32,
+                        bounds.y + translation.y,
                     ],
                     scale: [bounds.width, bounds.height],
                     color: match background {
@@ -238,38 +232,59 @@ impl Renderer {
                 });
             }
             Primitive::Mesh2D { origin, buffers } => {
-                layer.meshes.push((*origin, buffers.clone()));
+                let layer = layers.last_mut().unwrap();
+
+                layer.meshes.push((*origin + translation, buffers));
             }
             Primitive::Clip {
                 bounds,
                 offset,
                 content,
             } => {
+                let layer = layers.last_mut().unwrap();
+
                 let layer_bounds: Rectangle<f32> = layer.bounds.into();
 
                 let clip = Rectangle {
-                    x: bounds.x - layer.offset.x as f32,
+                    x: bounds.x + translation.x,
-                    y: bounds.y - layer.offset.y as f32,
+                    y: bounds.y + translation.y,
                     ..*bounds
                 };
 
                 // Only draw visible content
                 if let Some(clip_bounds) = layer_bounds.intersection(&clip) {
-                    let clip_layer =
+                    let clip_layer = Layer::new(clip_bounds.into());
-                        Layer::new(clip_bounds.into(), layer.offset + *offset);
+                    let new_layer = Layer::new(layer.bounds);
-                    let new_layer = Layer::new(layer.bounds, layer.offset);
 
                     layers.push(clip_layer);
-                    self.draw_primitive(content, layers);
+                    self.draw_primitive(
+                        translation
+                            - Vector::new(offset.x as f32, offset.y as f32),
+                        content,
+                        layers,
+                    );
                     layers.push(new_layer);
                 }
             }
 
+            Primitive::Cached { origin, cache } => {
+                self.draw_primitive(
+                    translation + Vector::new(origin.x, origin.y),
+                    &cache,
+                    layers,
+                );
+            }
+
             #[cfg(feature = "image")]
             Primitive::Image { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
                 layer.images.push(Image {
                     handle: image::Handle::Raster(handle.clone()),
-                    position: [bounds.x, bounds.y],
+                    position: [
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ],
                     size: [bounds.width, bounds.height],
                 });
             }
@@ -278,9 +293,14 @@ impl Renderer {
 
             #[cfg(feature = "svg")]
             Primitive::Svg { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
                 layer.images.push(Image {
                     handle: image::Handle::Vector(handle.clone()),
-                    position: [bounds.x, bounds.y],
+                    position: [
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ],
                     size: [bounds.width, bounds.height],
                 });
             }
@@ -295,7 +315,7 @@ impl Renderer {
         layers: &mut Vec<Layer<'a>>,
     ) {
         let first = layers.first().unwrap();
-        let mut overlay = Layer::new(first.bounds, Vector::new(0, 0));
+        let mut overlay = Layer::new(first.bounds);
 
         let font_id = self.text_pipeline.overlay_font();
         let scale = wgpu_glyph::Scale { x: 20.0, y: 20.0 };
@@ -337,12 +357,8 @@ impl Renderer {
         let bounds = layer.bounds * scale_factor;
 
         if layer.meshes.len() > 0 {
-            let translated = transformation
+            let scaled = transformation
-                * Transformation::scale(scale_factor, scale_factor)
+                * Transformation::scale(scale_factor, scale_factor);
-                * Transformation::translate(
-                    -(layer.offset.x as f32),
-                    -(layer.offset.y as f32),
-                );
 
             self.triangle_pipeline.draw(
                 device,
@@ -350,7 +366,7 @@ impl Renderer {
                 target,
                 target_width,
                 target_height,
-                translated,
+                scaled,
                 &layer.meshes,
                 bounds,
             );
@@ -371,18 +387,14 @@ impl Renderer {
         #[cfg(any(feature = "image", feature = "svg"))]
         {
             if layer.images.len() > 0 {
-                let translated_and_scaled = transformation
+                let scaled = transformation
-                    * Transformation::scale(scale_factor, scale_factor)
+                    * Transformation::scale(scale_factor, scale_factor);
-                    * Transformation::translate(
-                        -(layer.offset.x as f32),
-                        -(layer.offset.y as f32),
-                    );
 
                 self.image_pipeline.draw(
                     device,
                     encoder,
                     &layer.images,
-                    translated_and_scaled,
+                    scaled,
                     bounds,
                     target,
                     scale_factor,

wgpu/src/triangle.rs

@@ -1,7 +1,7 @@
 //! Draw meshes of triangles.
 use crate::{settings, Transformation};
 use iced_native::{Point, Rectangle};
-use std::{mem, sync::Arc};
+use std::mem;
 
 mod msaa;
 
@@ -194,7 +194,7 @@ impl Pipeline {
         target_width: u32,
         target_height: u32,
         transformation: Transformation,
-        meshes: &Vec<(Point, Arc<Mesh2D>)>,
+        meshes: &[(Point, &Mesh2D)],
         bounds: Rectangle<u32>,
     ) {
         // This looks a bit crazy, but we are just counting how many vertices

wgpu/src/widget/canvas.rs

@@ -20,6 +20,7 @@ mod drawable;
 mod fill;
 mod frame;
 mod stroke;
+mod text;
 
 pub use drawable::Drawable;
 pub use fill::Fill;
@@ -27,6 +28,7 @@ pub use frame::Frame;
 pub use layer::Layer;
 pub use path::Path;
 pub use stroke::{LineCap, LineJoin, Stroke};
+pub use text::Text;
 
 /// A widget capable of drawing 2D graphics.
 ///
@@ -121,9 +123,9 @@ impl<'a, Message> Widget<Message, Renderer> for Canvas<'a> {
                 primitives: self
                     .layers
                     .iter()
-                    .map(|layer| Primitive::Mesh2D {
+                    .map(|layer| Primitive::Cached {
                         origin,
-                        buffers: layer.draw(size),
+                        cache: layer.draw(size),
                     })
                     .collect(),
             },

wgpu/src/widget/canvas/frame.rs

@@ -1,8 +1,8 @@
-use iced_native::{Point, Size, Vector};
+use iced_native::{Point, Rectangle, Size, Vector};
 
 use crate::{
-    canvas::{Fill, Path, Stroke},
+    canvas::{Fill, Path, Stroke, Text},
-    triangle,
+    triangle, Primitive,
 };
 
 /// The frame of a [`Canvas`].
@@ -13,6 +13,7 @@ pub struct Frame {
     width: f32,
     height: f32,
     buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+    primitives: Vec<Primitive>,
     transforms: Transforms,
 }
 
@@ -40,6 +41,7 @@ impl Frame {
             width,
             height,
             buffers: lyon::tessellation::VertexBuffers::new(),
+            primitives: Vec::new(),
             transforms: Transforms {
                 previous: Vec::new(),
                 current: Transform {
@@ -154,6 +156,52 @@ impl Frame {
         let _ = result.expect("Stroke path");
     }
 
+    /// Draws the characters of the given [`Text`] on the [`Frame`], filling
+    /// them with the given color.
+    ///
+    /// __Warning:__ Text currently does not work well with rotations and scale
+    /// transforms! The position will be correctly transformed, but the
+    /// resulting glyphs will not be rotated or scaled properly.
+    ///
+    /// Additionally, all text will be rendered on top of all the layers of
+    /// a [`Canvas`]. Therefore, it is currently only meant to be used for
+    /// overlays, which is the most common use case.
+    ///
+    /// Support for vectorial text is planned, and should address all these
+    /// limitations.
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`Frame`]: struct.Frame.html
+    pub fn fill_text(&mut self, text: Text) {
+        use std::f32;
+
+        let position = if self.transforms.current.is_identity {
+            text.position
+        } else {
+            let transformed = self.transforms.current.raw.transform_point(
+                lyon::math::Point::new(text.position.x, text.position.y),
+            );
+
+            Point::new(transformed.x, transformed.y)
+        };
+
+        // TODO: Use vectorial text instead of primitive
+        self.primitives.push(Primitive::Text {
+            content: text.content,
+            bounds: Rectangle {
+                x: position.x,
+                y: position.y,
+                width: f32::INFINITY,
+                height: f32::INFINITY,
+            },
+            color: text.color,
+            size: text.size,
+            font: text.font,
+            horizontal_alignment: text.horizontal_alignment,
+            vertical_alignment: text.vertical_alignment,
+        });
+    }
+
     /// Stores the current transform of the [`Frame`] and executes the given
     /// drawing operations, restoring the transform afterwards.
     ///
@@ -209,13 +257,20 @@ impl Frame {
         self.transforms.current.is_identity = false;
     }
 
-    /// Produces the geometry that has been drawn on the [`Frame`].
+    /// Produces the primitive representing everything drawn on the [`Frame`].
     ///
     /// [`Frame`]: struct.Frame.html
-    pub fn into_mesh(self) -> triangle::Mesh2D {
+    pub fn into_primitive(mut self) -> Primitive {
-        triangle::Mesh2D {
+        self.primitives.push(Primitive::Mesh2D {
-            vertices: self.buffers.vertices,
+            origin: Point::ORIGIN,
-            indices: self.buffers.indices,
+            buffers: triangle::Mesh2D {
+                vertices: self.buffers.vertices,
+                indices: self.buffers.indices,
+            },
+        });
+
+        Primitive::Group {
+            primitives: self.primitives,
         }
     }
 }

wgpu/src/widget/canvas/layer.rs

@@ -3,23 +3,23 @@ mod cache;
 
 pub use cache::Cache;
 
-use crate::triangle;
+use crate::Primitive;
-
 use iced_native::Size;
+
 use std::sync::Arc;
 
 /// A layer that can be presented at a [`Canvas`].
 ///
 /// [`Canvas`]: ../struct.Canvas.html
 pub trait Layer: std::fmt::Debug {
-    /// Draws the [`Layer`] in the given bounds and produces [`Mesh2D`] as a
+    /// Draws the [`Layer`] in the given bounds and produces a [`Primitive`] as
-    /// result.
+    /// a result.
     ///
-    /// The [`Layer`] may choose to store the produced [`Mesh2D`] locally and
+    /// The [`Layer`] may choose to store the produced [`Primitive`] locally and
     /// only recompute it when the bounds change, its contents change, or is
     /// otherwise explicitly cleared by other means.
     ///
     /// [`Layer`]: trait.Layer.html
-    /// [`Mesh2D`]: ../../../triangle/struct.Mesh2D.html
+    /// [`Primitive`]: ../../../enum.Primitive.html
-    fn draw(&self, bounds: Size) -> Arc<triangle::Mesh2D>;
+    fn draw(&self, bounds: Size) -> Arc<Primitive>;
 }

wgpu/src/widget/canvas/layer/cache.rs

@@ -1,12 +1,10 @@
 use crate::{
     canvas::{Drawable, Frame, Layer},
-    triangle,
+    Primitive,
 };
 
 use iced_native::Size;
-use std::cell::RefCell;
+use std::{cell::RefCell, marker::PhantomData, sync::Arc};
-use std::marker::PhantomData;
-use std::sync::Arc;
 
 /// A simple cache that stores generated geometry to avoid recomputation.
 ///
@@ -25,8 +23,8 @@ pub struct Cache<T: Drawable> {
 enum State {
     Empty,
     Filled {
-        mesh: Arc<triangle::Mesh2D>,
         bounds: Size,
+        primitive: Arc<Primitive>,
     },
 }
 
@@ -75,27 +73,27 @@ impl<'a, T> Layer for Bind<'a, T>
 where
     T: Drawable + std::fmt::Debug,
 {
-    fn draw(&self, current_bounds: Size) -> Arc<triangle::Mesh2D> {
+    fn draw(&self, current_bounds: Size) -> Arc<Primitive> {
         use std::ops::Deref;
 
-        if let State::Filled { mesh, bounds } =
+        if let State::Filled { bounds, primitive } =
             self.cache.state.borrow().deref()
         {
             if *bounds == current_bounds {
-                return mesh.clone();
+                return primitive.clone();
             }
         }
 
         let mut frame = Frame::new(current_bounds.width, current_bounds.height);
         self.input.draw(&mut frame);
 
-        let mesh = Arc::new(frame.into_mesh());
+        let primitive = Arc::new(frame.into_primitive());
 
         *self.cache.state.borrow_mut() = State::Filled {
-            mesh: mesh.clone(),
             bounds: current_bounds,
+            primitive: primitive.clone(),
         };
 
-        mesh
+        primitive
     }
 }

wgpu/src/widget/canvas/text.rs

@@ -0,0 +1,34 @@
+use iced_native::{Color, Font, HorizontalAlignment, Point, VerticalAlignment};
+
+/// A bunch of text that can be drawn to a canvas
+#[derive(Debug, Clone)]
+pub struct Text {
+    /// The contents of the text
+    pub content: String,
+    /// The position where to begin drawing the text (top-left corner coordinates)
+    pub position: Point,
+    /// The color of the text
+    pub color: Color,
+    /// The size of the text
+    pub size: f32,
+    /// The font of the text
+    pub font: Font,
+    /// The horizontal alignment of the text
+    pub horizontal_alignment: HorizontalAlignment,
+    /// The vertical alignment of the text
+    pub vertical_alignment: VerticalAlignment,
+}
+
+impl Default for Text {
+    fn default() -> Text {
+        Text {
+            content: String::new(),
+            position: Point::ORIGIN,
+            color: Color::BLACK,
+            size: 16.0,
+            font: Font::Default,
+            horizontal_alignment: HorizontalAlignment::Left,
+            vertical_alignment: VerticalAlignment::Top,
+        }
+    }
+}