Implement image support for `canvas` widget

6 files changed, 180 insertions, 14 deletions

diff --git a/wgpu/Cargo.toml b/wgpu/Cargo.toml
index 30545fa2..b13ecb36 100644
--- a/wgpu/Cargo.toml
+++ b/wgpu/Cargo.toml
@@ -20,7 +20,7 @@ all-features = true
 [features]
 geometry = ["iced_graphics/geometry", "lyon"]
 image = ["iced_graphics/image"]
-svg = ["resvg/text"]
+svg = ["iced_graphics/svg", "resvg/text"]
 web-colors = ["iced_graphics/web-colors"]
 webgl = ["wgpu/webgl"]
 
diff --git a/wgpu/src/geometry.rs b/wgpu/src/geometry.rs
index f6213e1d..cb629b3e 100644
--- a/wgpu/src/geometry.rs
+++ b/wgpu/src/geometry.rs
@@ -1,7 +1,9 @@
 //! Build and draw geometry.
+use crate::core::image;
+use crate::core::svg;
 use crate::core::text::LineHeight;
 use crate::core::{
-    Pixels, Point, Radians, Rectangle, Size, Transformation, Vector,
+    Color, Pixels, Point, Radians, Rectangle, Size, Transformation, Vector,
 };
 use crate::graphics::cache::{self, Cached};
 use crate::graphics::color;
@@ -11,7 +13,7 @@ use crate::graphics::geometry::{
 };
 use crate::graphics::gradient::{self, Gradient};
 use crate::graphics::mesh::{self, Mesh};
-use crate::graphics::{self, Text};
+use crate::graphics::{self, Image, Text};
 use crate::text;
 use crate::triangle;
 
@@ -19,16 +21,22 @@ use lyon::geom::euclid;
 use lyon::tessellation;
 
 use std::borrow::Cow;
+use std::sync::Arc;
 
 #[derive(Debug)]
 pub enum Geometry {
-    Live { meshes: Vec<Mesh>, text: Vec<Text> },
+    Live {
+        meshes: Vec<Mesh>,
+        images: Vec<Image>,
+        text: Vec<Text>,
+    },
     Cached(Cache),
 }
 
 #[derive(Debug, Clone)]
 pub struct Cache {
     pub meshes: Option<triangle::Cache>,
+    pub images: Option<Arc<[Image]>>,
     pub text: Option<text::Cache>,
 }
 
@@ -45,7 +53,17 @@ impl Cached for Geometry {
         previous: Option<Self::Cache>,
     ) -> Self::Cache {
         match self {
-            Self::Live { meshes, text } => {
+            Self::Live {
+                meshes,
+                images,
+                text,
+            } => {
+                let images = if images.is_empty() {
+                    None
+                } else {
+                    Some(Arc::from(images))
+                };
+
                 if let Some(mut previous) = previous {
                     if let Some(cache) = &mut previous.meshes {
                         cache.update(meshes);
@@ -59,10 +77,13 @@ impl Cached for Geometry {
                         previous.text = text::Cache::new(group, text);
                     }
 
+                    previous.images = images;
+
                     previous
                 } else {
                     Cache {
                         meshes: triangle::Cache::new(meshes),
+                        images,
                         text: text::Cache::new(group, text),
                     }
                 }
@@ -78,6 +99,7 @@ pub struct Frame {
     clip_bounds: Rectangle,
     buffers: BufferStack,
     meshes: Vec<Mesh>,
+    images: Vec<Image>,
     text: Vec<Text>,
     transforms: Transforms,
     fill_tessellator: tessellation::FillTessellator,
@@ -96,6 +118,7 @@ impl Frame {
             clip_bounds: bounds,
             buffers: BufferStack::new(),
             meshes: Vec::new(),
+            images: Vec::new(),
             text: Vec::new(),
             transforms: Transforms {
                 previous: Vec::new(),
@@ -335,10 +358,11 @@ impl geometry::frame::Backend for Frame {
         Frame::with_clip(clip_bounds)
     }
 
-    fn paste(&mut self, frame: Frame, _at: Point) {
+    fn paste(&mut self, frame: Frame) {
         self.meshes
             .extend(frame.buffers.into_meshes(frame.clip_bounds));
 
+        self.images.extend(frame.images);
         self.text.extend(frame.text);
     }
 
@@ -348,9 +372,51 @@ impl geometry::frame::Backend for Frame {
 
         Geometry::Live {
             meshes: self.meshes,
+            images: self.images,
             text: self.text,
         }
     }
+
+    fn draw_image(
+        &mut self,
+        handle: &image::Handle,
+        bounds: Rectangle,
+        filter_method: image::FilterMethod,
+        rotation: Radians,
+        opacity: f32,
+    ) {
+        let (bounds, external_rotation) =
+            self.transforms.current.transform_rectangle(bounds);
+
+        self.images.push(Image::Raster {
+            handle: handle.clone(),
+            filter_method,
+            bounds,
+            rotation: rotation + external_rotation,
+            opacity,
+            snap: false,
+        });
+    }
+
+    fn draw_svg(
+        &mut self,
+        handle: &svg::Handle,
+        bounds: Rectangle,
+        color: Option<Color>,
+        rotation: Radians,
+        opacity: f32,
+    ) {
+        let (bounds, external_rotation) =
+            self.transforms.current.transform_rectangle(bounds);
+
+        self.images.push(Image::Vector {
+            handle: handle.clone(),
+            color,
+            bounds,
+            rotation: rotation + external_rotation,
+            opacity,
+        });
+    }
 }
 
 enum Buffer {
@@ -518,6 +584,21 @@ impl Transform {
 
         gradient
     }
+
+    fn transform_rectangle(
+        &self,
+        rectangle: Rectangle,
+    ) -> (Rectangle, Radians) {
+        let top_left = self.transform_point(rectangle.position());
+        let top_right = self.transform_point(
+            rectangle.position() + Vector::new(rectangle.width, 0.0),
+        );
+        let bottom_left = self.transform_point(
+            rectangle.position() + Vector::new(0.0, rectangle.height),
+        );
+
+        Rectangle::with_vertices(top_left, top_right, bottom_left)
+    }
 }
 struct GradientVertex2DBuilder {
     gradient: gradient::Packed,
diff --git a/wgpu/src/image/mod.rs b/wgpu/src/image/mod.rs
index daa2fe16..ea34e4ec 100644
--- a/wgpu/src/image/mod.rs
+++ b/wgpu/src/image/mod.rs
@@ -149,6 +149,8 @@ impl Pipeline {
                             6 => Float32x2,
                             // Layer
                             7 => Sint32,
+                            // Snap
+                            8 => Uint32,
                         ),
                     }],
                 },
@@ -212,8 +214,6 @@ impl Pipeline {
         transformation: Transformation,
         scale: f32,
     ) {
-        let transformation = transformation * Transformation::scale(scale);
-
         let nearest_instances: &mut Vec<Instance> = &mut Vec::new();
         let linear_instances: &mut Vec<Instance> = &mut Vec::new();
 
@@ -226,6 +226,7 @@ impl Pipeline {
                     bounds,
                     rotation,
                     opacity,
+                    snap,
                 } => {
                     if let Some(atlas_entry) =
                         cache.upload_raster(device, encoder, handle)
@@ -235,6 +236,7 @@ impl Pipeline {
                             [bounds.width, bounds.height],
                             f32::from(*rotation),
                             *opacity,
+                            *snap,
                             atlas_entry,
                             match filter_method {
                                 crate::core::image::FilterMethod::Nearest => {
@@ -268,6 +270,7 @@ impl Pipeline {
                             size,
                             f32::from(*rotation),
                             *opacity,
+                            true,
                             atlas_entry,
                             nearest_instances,
                         );
@@ -300,6 +303,7 @@ impl Pipeline {
             nearest_instances,
             linear_instances,
             transformation,
+            scale,
         );
 
         self.prepare_layer += 1;
@@ -375,9 +379,12 @@ impl Layer {
         nearest_instances: &[Instance],
         linear_instances: &[Instance],
         transformation: Transformation,
+        scale_factor: f32,
     ) {
         let uniforms = Uniforms {
             transform: transformation.into(),
+            scale_factor,
+            _padding: [0.0; 3],
         };
 
         let bytes = bytemuck::bytes_of(&uniforms);
@@ -492,6 +499,7 @@ struct Instance {
     _position_in_atlas: [f32; 2],
     _size_in_atlas: [f32; 2],
     _layer: u32,
+    _snap: u32,
 }
 
 impl Instance {
@@ -502,6 +510,10 @@ impl Instance {
 #[derive(Debug, Clone, Copy, Zeroable, Pod)]
 struct Uniforms {
     transform: [f32; 16],
+    scale_factor: f32,
+    // Uniforms must be aligned to their largest member,
+    // this uses a mat4x4<f32> which aligns to 16, so align to that
+    _padding: [f32; 3],
 }
 
 fn add_instances(
@@ -509,6 +521,7 @@ fn add_instances(
     image_size: [f32; 2],
     rotation: f32,
     opacity: f32,
+    snap: bool,
     entry: &atlas::Entry,
     instances: &mut Vec<Instance>,
 ) {
@@ -525,6 +538,7 @@ fn add_instances(
                 image_size,
                 rotation,
                 opacity,
+                snap,
                 allocation,
                 instances,
             );
@@ -554,8 +568,8 @@ fn add_instances(
                 ];
 
                 add_instance(
-                    position, center, size, rotation, opacity, allocation,
-                    instances,
+                    position, center, size, rotation, opacity, snap,
+                    allocation, instances,
                 );
             }
         }
@@ -569,6 +583,7 @@ fn add_instance(
     size: [f32; 2],
     rotation: f32,
     opacity: f32,
+    snap: bool,
     allocation: &atlas::Allocation,
     instances: &mut Vec<Instance>,
 ) {
@@ -591,6 +606,7 @@ fn add_instance(
             (height as f32 - 1.0) / atlas::SIZE as f32,
         ],
         _layer: layer as u32,
+        _snap: snap as u32,
     };
 
     instances.push(instance);
diff --git a/wgpu/src/layer.rs b/wgpu/src/layer.rs
index df289e0e..e714e281 100644
--- a/wgpu/src/layer.rs
+++ b/wgpu/src/layer.rs
@@ -114,12 +114,56 @@ impl Layer {
 
     pub fn draw_image(
         &mut self,
+        image: &Image,
+        transformation: Transformation,
+    ) {
+        match image {
+            Image::Raster {
+                handle,
+                filter_method,
+                bounds,
+                rotation,
+                opacity,
+                snap,
+            } => {
+                self.draw_raster(
+                    handle.clone(),
+                    *filter_method,
+                    *bounds,
+                    transformation,
+                    *rotation,
+                    *opacity,
+                    *snap,
+                );
+            }
+            Image::Vector {
+                handle,
+                color,
+                bounds,
+                rotation,
+                opacity,
+            } => {
+                self.draw_svg(
+                    handle.clone(),
+                    *color,
+                    *bounds,
+                    transformation,
+                    *rotation,
+                    *opacity,
+                );
+            }
+        }
+    }
+
+    pub fn draw_raster(
+        &mut self,
         handle: crate::core::image::Handle,
         filter_method: crate::core::image::FilterMethod,
         bounds: Rectangle,
         transformation: Transformation,
         rotation: Radians,
         opacity: f32,
+        snap: bool,
     ) {
         let image = Image::Raster {
             handle,
@@ -127,6 +171,7 @@ impl Layer {
             bounds: bounds * transformation,
             rotation,
             opacity,
+            snap,
         };
 
         self.images.push(image);
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index 954340ec..24e60979 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -536,13 +536,14 @@ impl core::image::Renderer for Renderer {
         opacity: f32,
     ) {
         let (layer, transformation) = self.layers.current_mut();
-        layer.draw_image(
+        layer.draw_raster(
             handle,
             filter_method,
             bounds,
             transformation,
             rotation,
             opacity,
+            true,
         );
     }
 }
@@ -593,8 +594,17 @@ impl graphics::geometry::Renderer for Renderer {
         let (layer, transformation) = self.layers.current_mut();
 
         match geometry {
-            Geometry::Live { meshes, text } => {
+            Geometry::Live {
+                meshes,
+                images,
+                text,
+            } => {
                 layer.draw_mesh_group(meshes, transformation);
+
+                for image in images {
+                    layer.draw_image(&image, transformation);
+                }
+
                 layer.draw_text_group(text, transformation);
             }
             Geometry::Cached(cache) => {
@@ -602,6 +612,12 @@ impl graphics::geometry::Renderer for Renderer {
                     layer.draw_mesh_cache(meshes, transformation);
                 }
 
+                if let Some(images) = cache.images {
+                    for image in images.iter() {
+                        layer.draw_image(image, transformation);
+                    }
+                }
+
                 if let Some(text) = cache.text {
                     layer.draw_text_cache(text, transformation);
                 }
diff --git a/wgpu/src/shader/image.wgsl b/wgpu/src/shader/image.wgsl
index 0eeb100f..bc922838 100644
--- a/wgpu/src/shader/image.wgsl
+++ b/wgpu/src/shader/image.wgsl
@@ -1,5 +1,6 @@
 struct Globals {
     transform: mat4x4<f32>,
+    scale_factor: f32,
 }
 
 @group(0) @binding(0) var<uniform> globals: Globals;
@@ -16,6 +17,7 @@ struct VertexInput {
     @location(5) atlas_pos: vec2<f32>,
     @location(6) atlas_scale: vec2<f32>,
     @location(7) layer: i32,
+    @location(8) snap: u32,
 }
 
 struct VertexOutput {
@@ -38,7 +40,7 @@ fn vs_main(input: VertexInput) -> VertexOutput {
     out.opacity = input.opacity;
 
     // Calculate the vertex position and move the center to the origin
-    v_pos = round(input.pos) + v_pos * input.scale - input.center;
+    v_pos = input.pos + v_pos * input.scale - input.center;
 
     // Apply the rotation around the center of the image
     let cos_rot = cos(input.rotation);
@@ -51,7 +53,13 @@ fn vs_main(input: VertexInput) -> VertexOutput {
     );
 
     // Calculate the final position of the vertex
-    out.position = globals.transform * (vec4<f32>(input.center, 0.0, 0.0) + rotate * vec4<f32>(v_pos, 0.0, 1.0));
+    out.position = vec4(vec2(globals.scale_factor), 1.0, 1.0) * (vec4<f32>(input.center, 0.0, 0.0) + rotate * vec4<f32>(v_pos, 0.0, 1.0));
+
+    if bool(input.snap) {
+        out.position = round(out.position);
+    }
+
+    out.position = globals.transform * out.position;
 
     return out;
 }