Draft new iced_graphics crate 🎉

Cargo.toml

@@ -34,6 +34,7 @@ maintenance = { status = "actively-developed" }
 members = [
     "core",
     "futures",
+    "graphics",
     "glow",
     "native",
     "style",

examples/integration/src/main.rs

@@ -5,7 +5,7 @@ use controls::Controls;
 use scene::Scene;
 
 use iced_wgpu::{
-    wgpu, window::SwapChain, Primitive, Renderer, Settings, Target,
+    wgpu, window::SwapChain, Backend, Primitive, Renderer, Settings, Target,
 };
 use iced_winit::{
     futures, mouse, winit, Cache, Clipboard, Size, UserInterface,
@@ -62,7 +62,8 @@ pub fn main() {
     // Initialize iced
     let mut events = Vec::new();
     let mut cache = Some(Cache::default());
-    let mut renderer = Renderer::new(&mut device, Settings::default());
+    let mut renderer =
+        Renderer::new(Backend::new(&mut device, Settings::default()));
     let mut output = (Primitive::None, mouse::Interaction::default());
     let clipboard = Clipboard::new(&window);
 
@@ -189,7 +190,7 @@ pub fn main() {
                 scene.draw(&mut encoder, &frame.view);
 
                 // And then iced on top
-                let mouse_interaction = renderer.draw(
+                let mouse_interaction = renderer.backend_mut().draw(
                     &mut device,
                     &mut encoder,
                     Target {

glow/Cargo.toml

@@ -21,9 +21,9 @@ glyph_brush = "0.6"
 version = "0.2"
 path = "../native"
 
-[dependencies.iced_style]
+[dependencies.iced_graphics]
 version = "0.1"
-path = "../style"
+path = "../graphics"
 
 [dependencies.surfman]
 path = "../../surfman/surfman"

glow/src/backend.rs

@@ -1,19 +1,17 @@
-use crate::{
+use crate::quad;
-    quad, text, triangle, Defaults, Primitive, Quad, Settings, Transformation,
+use crate::text;
-    Viewport,
+use crate::triangle;
-};
+use crate::{Quad, Settings, Transformation, Viewport};
-
+use iced_graphics::backend;
-use iced_native::{
+use iced_graphics::Primitive;
-    layout, mouse, Background, Color, Layout, Point, Rectangle, Vector, Widget,
+use iced_native::mouse;
-};
+use iced_native::{Background, Font, Point, Rectangle, Size, Vector};
-
-mod widget;
 
 /// A [`glow`] renderer.
 ///
 /// [`glow`]: https://github.com/grovesNL/glow
 #[derive(Debug)]
-pub struct Renderer {
+pub struct Backend {
     quad_pipeline: quad::Pipeline,
     text_pipeline: text::Pipeline,
     triangle_pipeline: triangle::Pipeline,
@@ -43,7 +41,7 @@ impl<'a> Layer<'a> {
     }
 }
 
-impl Renderer {
+impl Backend {
     /// Creates a new [`Renderer`].
     ///
     /// [`Renderer`]: struct.Renderer.html
@@ -399,57 +397,27 @@ impl Renderer {
     }
 }
 
-impl iced_native::Renderer for Renderer {
+impl iced_graphics::Backend for Backend {
-    type Output = (Primitive, mouse::Interaction);
+    fn trim_measurements(&mut self) {
-    type Defaults = Defaults;
+        self.text_pipeline.trim_measurement_cache()
-
-    fn layout<'a, Message>(
-        &mut self,
-        element: &iced_native::Element<'a, Message, Self>,
-        limits: &iced_native::layout::Limits,
-    ) -> iced_native::layout::Node {
-        let node = element.layout(self, limits);
-
-        self.text_pipeline.clear_measurement_cache();
-
-        node
     }
 }
 
-impl layout::Debugger for Renderer {
+impl backend::Text for Backend {
-    fn explain<Message>(
+    const ICON_FONT: Font = text::BUILTIN_ICONS;
-        &mut self,
+    const CHECKMARK_ICON: char = text::CHECKMARK_ICON;
-        defaults: &Defaults,
-        widget: &dyn Widget<Message, Self>,
-        layout: Layout<'_>,
-        cursor_position: Point,
-        color: Color,
-    ) -> Self::Output {
-        let mut primitives = Vec::new();
-        let (primitive, cursor) =
-            widget.draw(self, defaults, layout, cursor_position);
 
-        explain_layout(layout, color, &mut primitives);
+    fn measure(
-        primitives.push(primitive);
+        &self,
+        contents: &str,
+        size: f32,
+        font: Font,
+        bounds: Size,
+    ) -> (f32, f32) {
+        self.text_pipeline.measure(contents, size, font, bounds)
+    }
 
-        (Primitive::Group { primitives }, cursor)
+    fn space_width(&self, size: f32) -> f32 {
-    }
+        self.text_pipeline.space_width(size)
-}
-
-fn explain_layout(
-    layout: Layout<'_>,
-    color: Color,
-    primitives: &mut Vec<Primitive>,
-) {
-    primitives.push(Primitive::Quad {
-        bounds: layout.bounds(),
-        background: Background::Color(Color::TRANSPARENT),
-        border_radius: 0,
-        border_width: 1,
-        border_color: [0.6, 0.6, 0.6, 0.5].into(),
-    });
-
-    for child in layout.children() {
-        explain_layout(child, color, primitives);
     }
 }

glow/src/lib.rs

@@ -4,10 +4,8 @@
 //#![forbid(unsafe_code)]
 #![forbid(rust_2018_idioms)]
 
-mod defaults;
+mod backend;
-mod primitive;
 mod quad;
-mod renderer;
 mod text;
 mod transformation;
 mod triangle;
@@ -17,15 +15,15 @@ pub mod settings;
 pub mod widget;
 pub mod window;
 
-pub use defaults::Defaults;
-pub use primitive::Primitive;
-pub use renderer::Renderer;
 pub use settings::Settings;
 pub use viewport::Viewport;
 
+pub(crate) use backend::Backend;
 pub(crate) use quad::Quad;
 pub(crate) use transformation::Transformation;
 
+pub type Renderer = iced_graphics::Renderer<Backend>;
+
 #[doc(no_inline)]
 pub use widget::*;
 

glow/src/renderer/widget.rs

@@ -1,19 +0,0 @@
-mod button;
-mod checkbox;
-mod column;
-mod container;
-mod pane_grid;
-mod progress_bar;
-mod radio;
-mod row;
-mod scrollable;
-mod slider;
-mod space;
-mod text;
-mod text_input;
-
-#[cfg(feature = "svg")]
-mod svg;
-
-#[cfg(feature = "image")]
-mod image;

glow/src/renderer/widget/button.rs

@@ -1,93 +0,0 @@
-use crate::{button::StyleSheet, defaults, Defaults, Primitive, Renderer};
-use iced_native::{
-    mouse, Background, Color, Element, Layout, Point, Rectangle, Vector,
-};
-
-impl iced_native::button::Renderer for Renderer {
-    const DEFAULT_PADDING: u16 = 5;
-
-    type Style = Box<dyn StyleSheet>;
-
-    fn draw<Message>(
-        &mut self,
-        _defaults: &Defaults,
-        bounds: Rectangle,
-        cursor_position: Point,
-        is_disabled: bool,
-        is_pressed: bool,
-        style: &Box<dyn StyleSheet>,
-        content: &Element<'_, Message, Self>,
-        content_layout: Layout<'_>,
-    ) -> Self::Output {
-        let is_mouse_over = bounds.contains(cursor_position);
-
-        let styling = if is_disabled {
-            style.disabled()
-        } else if is_mouse_over {
-            if is_pressed {
-                style.pressed()
-            } else {
-                style.hovered()
-            }
-        } else {
-            style.active()
-        };
-
-        let (content, _) = content.draw(
-            self,
-            &Defaults {
-                text: defaults::Text {
-                    color: styling.text_color,
-                },
-            },
-            content_layout,
-            cursor_position,
-        );
-
-        (
-            if styling.background.is_some() || styling.border_width > 0 {
-                let background = Primitive::Quad {
-                    bounds,
-                    background: styling
-                        .background
-                        .unwrap_or(Background::Color(Color::TRANSPARENT)),
-                    border_radius: styling.border_radius,
-                    border_width: styling.border_width,
-                    border_color: styling.border_color,
-                };
-
-                if styling.shadow_offset == Vector::default() {
-                    Primitive::Group {
-                        primitives: vec![background, content],
-                    }
-                } else {
-                    // TODO: Implement proper shadow support
-                    let shadow = Primitive::Quad {
-                        bounds: Rectangle {
-                            x: bounds.x + styling.shadow_offset.x,
-                            y: bounds.y + styling.shadow_offset.y,
-                            ..bounds
-                        },
-                        background: Background::Color(
-                            [0.0, 0.0, 0.0, 0.5].into(),
-                        ),
-                        border_radius: styling.border_radius,
-                        border_width: 0,
-                        border_color: Color::TRANSPARENT,
-                    };
-
-                    Primitive::Group {
-                        primitives: vec![shadow, background, content],
-                    }
-                }
-            } else {
-                content
-            },
-            if is_mouse_over {
-                mouse::Interaction::Pointer
-            } else {
-                mouse::Interaction::default()
-            },
-        )
-    }
-}

glow/src/renderer/widget/checkbox.rs

@@ -1,63 +0,0 @@
-use crate::{checkbox::StyleSheet, Primitive, Renderer};
-use iced_native::{
-    checkbox, mouse, HorizontalAlignment, Rectangle, VerticalAlignment,
-};
-
-impl checkbox::Renderer for Renderer {
-    type Style = Box<dyn StyleSheet>;
-
-    const DEFAULT_SIZE: u16 = 20;
-    const DEFAULT_SPACING: u16 = 15;
-
-    fn draw(
-        &mut self,
-        bounds: Rectangle,
-        is_checked: bool,
-        is_mouse_over: bool,
-        (label, _): Self::Output,
-        style_sheet: &Self::Style,
-    ) -> Self::Output {
-        let style = if is_mouse_over {
-            style_sheet.hovered(is_checked)
-        } else {
-            style_sheet.active(is_checked)
-        };
-
-        let checkbox = Primitive::Quad {
-            bounds,
-            background: style.background,
-            border_radius: style.border_radius,
-            border_width: style.border_width,
-            border_color: style.border_color,
-        };
-
-        (
-            Primitive::Group {
-                primitives: if is_checked {
-                    let check = Primitive::Text {
-                        content: crate::text::CHECKMARK_ICON.to_string(),
-                        font: crate::text::BUILTIN_ICONS,
-                        size: bounds.height * 0.7,
-                        bounds: Rectangle {
-                            x: bounds.center_x(),
-                            y: bounds.center_y(),
-                            ..bounds
-                        },
-                        color: style.checkmark_color,
-                        horizontal_alignment: HorizontalAlignment::Center,
-                        vertical_alignment: VerticalAlignment::Center,
-                    };
-
-                    vec![checkbox, check, label]
-                } else {
-                    vec![checkbox, label]
-                },
-            },
-            if is_mouse_over {
-                mouse::Interaction::Pointer
-            } else {
-                mouse::Interaction::default()
-            },
-        )
-    }
-}

glow/src/renderer/widget/image.rs

@@ -1,22 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{image, mouse, Layout};
-
-impl image::Renderer for Renderer {
-    fn dimensions(&self, handle: &image::Handle) -> (u32, u32) {
-        self.image_pipeline.dimensions(handle)
-    }
-
-    fn draw(
-        &mut self,
-        handle: image::Handle,
-        layout: Layout<'_>,
-    ) -> Self::Output {
-        (
-            Primitive::Image {
-                handle,
-                bounds: layout.bounds(),
-            },
-            mouse::Interaction::default(),
-        )
-    }
-}

glow/src/renderer/widget/row.rs

@@ -1,34 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{mouse, row, Element, Layout, Point};
-
-impl row::Renderer for Renderer {
-    fn draw<Message>(
-        &mut self,
-        defaults: &Self::Defaults,
-        children: &[Element<'_, Message, Self>],
-        layout: Layout<'_>,
-        cursor_position: Point,
-    ) -> Self::Output {
-        let mut mouse_interaction = mouse::Interaction::default();
-
-        (
-            Primitive::Group {
-                primitives: children
-                    .iter()
-                    .zip(layout.children())
-                    .map(|(child, layout)| {
-                        let (primitive, new_mouse_interaction) =
-                            child.draw(self, defaults, layout, cursor_position);
-
-                        if new_mouse_interaction > mouse_interaction {
-                            mouse_interaction = new_mouse_interaction;
-                        }
-
-                        primitive
-                    })
-                    .collect(),
-            },
-            mouse_interaction,
-        )
-    }
-}

glow/src/renderer/widget/slider.rs

@@ -1,106 +0,0 @@
-use crate::{
-    slider::{HandleShape, StyleSheet},
-    Primitive, Renderer,
-};
-use iced_native::{mouse, slider, Background, Color, Point, Rectangle};
-
-const HANDLE_HEIGHT: f32 = 22.0;
-
-impl slider::Renderer for Renderer {
-    type Style = Box<dyn StyleSheet>;
-
-    fn height(&self) -> u32 {
-        30
-    }
-
-    fn draw(
-        &mut self,
-        bounds: Rectangle,
-        cursor_position: Point,
-        range: std::ops::RangeInclusive<f32>,
-        value: f32,
-        is_dragging: bool,
-        style_sheet: &Self::Style,
-    ) -> Self::Output {
-        let is_mouse_over = bounds.contains(cursor_position);
-
-        let style = if is_dragging {
-            style_sheet.dragging()
-        } else if is_mouse_over {
-            style_sheet.hovered()
-        } else {
-            style_sheet.active()
-        };
-
-        let rail_y = bounds.y + (bounds.height / 2.0).round();
-
-        let (rail_top, rail_bottom) = (
-            Primitive::Quad {
-                bounds: Rectangle {
-                    x: bounds.x,
-                    y: rail_y,
-                    width: bounds.width,
-                    height: 2.0,
-                },
-                background: Background::Color(style.rail_colors.0),
-                border_radius: 0,
-                border_width: 0,
-                border_color: Color::TRANSPARENT,
-            },
-            Primitive::Quad {
-                bounds: Rectangle {
-                    x: bounds.x,
-                    y: rail_y + 2.0,
-                    width: bounds.width,
-                    height: 2.0,
-                },
-                background: Background::Color(style.rail_colors.1),
-                border_radius: 0,
-                border_width: 0,
-                border_color: Color::TRANSPARENT,
-            },
-        );
-
-        let (range_start, range_end) = range.into_inner();
-
-        let (handle_width, handle_height, handle_border_radius) =
-            match style.handle.shape {
-                HandleShape::Circle { radius } => {
-                    (f32::from(radius * 2), f32::from(radius * 2), radius)
-                }
-                HandleShape::Rectangle {
-                    width,
-                    border_radius,
-                } => (f32::from(width), HANDLE_HEIGHT, border_radius),
-            };
-
-        let handle_offset = (bounds.width - handle_width)
-            * ((value - range_start) / (range_end - range_start).max(1.0));
-
-        let handle = Primitive::Quad {
-            bounds: Rectangle {
-                x: bounds.x + handle_offset.round(),
-                y: rail_y - handle_height / 2.0,
-                width: handle_width,
-                height: handle_height,
-            },
-            background: Background::Color(style.handle.color),
-            border_radius: handle_border_radius,
-            border_width: style.handle.border_width,
-            border_color: style.handle.border_color,
-        };
-
-        (
-            Primitive::Group {
-                primitives: vec![rail_top, rail_bottom, handle],
-            },
-            if is_dragging {
-                mouse::Interaction::Grabbing
-            } else if is_mouse_over {
-                mouse::Interaction::Grab
-            } else {
-                mouse::Interaction::default()
-            },
-        )
-    }
-}

glow/src/renderer/widget/space.rs

@@ -1,8 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{mouse, space, Rectangle};
-
-impl space::Renderer for Renderer {
-    fn draw(&mut self, _bounds: Rectangle) -> Self::Output {
-        (Primitive::None, mouse::Interaction::default())
-    }
-}

glow/src/renderer/widget/svg.rs

@@ -1,22 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{mouse, svg, Layout};
-
-impl svg::Renderer for Renderer {
-    fn dimensions(&self, handle: &svg::Handle) -> (u32, u32) {
-        self.image_pipeline.viewport_dimensions(handle)
-    }
-
-    fn draw(
-        &mut self,
-        handle: svg::Handle,
-        layout: Layout<'_>,
-    ) -> Self::Output {
-        (
-            Primitive::Svg {
-                handle,
-                bounds: layout.bounds(),
-            },
-            mouse::Interaction::default(),
-        )
-    }
-}

glow/src/renderer/widget/text_input.rs

@@ -1,261 +0,0 @@
-use crate::{text_input::StyleSheet, Primitive, Renderer};
-
-use iced_native::{
-    mouse,
-    text_input::{self, cursor},
-    Background, Color, Font, HorizontalAlignment, Point, Rectangle, Size,
-    Vector, VerticalAlignment,
-};
-use std::f32;
-
-impl text_input::Renderer for Renderer {
-    type Style = Box<dyn StyleSheet>;
-
-    fn default_size(&self) -> u16 {
-        // TODO: Make this configurable
-        20
-    }
-
-    fn measure_value(&self, value: &str, size: u16, font: Font) -> f32 {
-        let (mut width, _) = self.text_pipeline.measure(
-            value,
-            f32::from(size),
-            font,
-            Size::INFINITY,
-        );
-
-        let spaces_around = value.len() - value.trim().len();
-
-        if spaces_around > 0 {
-            let space_width = self.text_pipeline.space_width(size as f32);
-            width += spaces_around as f32 * space_width;
-        }
-
-        width
-    }
-
-    fn offset(
-        &self,
-        text_bounds: Rectangle,
-        font: Font,
-        size: u16,
-        value: &text_input::Value,
-        state: &text_input::State,
-    ) -> f32 {
-        if state.is_focused() {
-            let cursor = state.cursor();
-
-            let focus_position = match cursor.state(value) {
-                cursor::State::Index(i) => i,
-                cursor::State::Selection { end, .. } => end,
-            };
-
-            let (_, offset) = measure_cursor_and_scroll_offset(
-                self,
-                text_bounds,
-                value,
-                size,
-                focus_position,
-                font,
-            );
-
-            offset
-        } else {
-            0.0
-        }
-    }
-
-    fn draw(
-        &mut self,
-        bounds: Rectangle,
-        text_bounds: Rectangle,
-        cursor_position: Point,
-        font: Font,
-        size: u16,
-        placeholder: &str,
-        value: &text_input::Value,
-        state: &text_input::State,
-        style_sheet: &Self::Style,
-    ) -> Self::Output {
-        let is_mouse_over = bounds.contains(cursor_position);
-
-        let style = if state.is_focused() {
-            style_sheet.focused()
-        } else if is_mouse_over {
-            style_sheet.hovered()
-        } else {
-            style_sheet.active()
-        };
-
-        let input = Primitive::Quad {
-            bounds,
-            background: style.background,
-            border_radius: style.border_radius,
-            border_width: style.border_width,
-            border_color: style.border_color,
-        };
-
-        let text = value.to_string();
-
-        let text_value = Primitive::Text {
-            content: if text.is_empty() {
-                placeholder.to_string()
-            } else {
-                text.clone()
-            },
-            color: if text.is_empty() {
-                style_sheet.placeholder_color()
-            } else {
-                style_sheet.value_color()
-            },
-            font,
-            bounds: Rectangle {
-                y: text_bounds.center_y(),
-                width: f32::INFINITY,
-                ..text_bounds
-            },
-            size: f32::from(size),
-            horizontal_alignment: HorizontalAlignment::Left,
-            vertical_alignment: VerticalAlignment::Center,
-        };
-
-        let (contents_primitive, offset) = if state.is_focused() {
-            let cursor = state.cursor();
-
-            let (cursor_primitive, offset) = match cursor.state(value) {
-                cursor::State::Index(position) => {
-                    let (text_value_width, offset) =
-                        measure_cursor_and_scroll_offset(
-                            self,
-                            text_bounds,
-                            value,
-                            size,
-                            position,
-                            font,
-                        );
-
-                    (
-                        Primitive::Quad {
-                            bounds: Rectangle {
-                                x: text_bounds.x + text_value_width,
-                                y: text_bounds.y,
-                                width: 1.0,
-                                height: text_bounds.height,
-                            },
-                            background: Background::Color(
-                                style_sheet.value_color(),
-                            ),
-                            border_radius: 0,
-                            border_width: 0,
-                            border_color: Color::TRANSPARENT,
-                        },
-                        offset,
-                    )
-                }
-                cursor::State::Selection { start, end } => {
-                    let left = start.min(end);
-                    let right = end.max(start);
-
-                    let (left_position, left_offset) =
-                        measure_cursor_and_scroll_offset(
-                            self,
-                            text_bounds,
-                            value,
-                            size,
-                            left,
-                            font,
-                        );
-
-                    let (right_position, right_offset) =
-                        measure_cursor_and_scroll_offset(
-                            self,
-                            text_bounds,
-                            value,
-                            size,
-                            right,
-                            font,
-                        );
-
-                    let width = right_position - left_position;
-
-                    (
-                        Primitive::Quad {
-                            bounds: Rectangle {
-                                x: text_bounds.x + left_position,
-                                y: text_bounds.y,
-                                width,
-                                height: text_bounds.height,
-                            },
-                            background: Background::Color(
-                                style_sheet.selection_color(),
-                            ),
-                            border_radius: 0,
-                            border_width: 0,
-                            border_color: Color::TRANSPARENT,
-                        },
-                        if end == right {
-                            right_offset
-                        } else {
-                            left_offset
-                        },
-                    )
-                }
-            };
-
-            (
-                Primitive::Group {
-                    primitives: vec![cursor_primitive, text_value],
-                },
-                Vector::new(offset as u32, 0),
-            )
-        } else {
-            (text_value, Vector::new(0, 0))
-        };
-
-        let text_width = self.measure_value(
-            if text.is_empty() { placeholder } else { &text },
-            size,
-            font,
-        );
-
-        let contents = if text_width > text_bounds.width {
-            Primitive::Clip {
-                bounds: text_bounds,
-                offset,
-                content: Box::new(contents_primitive),
-            }
-        } else {
-            contents_primitive
-        };
-
-        (
-            Primitive::Group {
-                primitives: vec![input, contents],
-            },
-            if is_mouse_over {
-                mouse::Interaction::Text
-            } else {
-                mouse::Interaction::default()
-            },
-        )
-    }
-}
-
-fn measure_cursor_and_scroll_offset(
-    renderer: &Renderer,
-    text_bounds: Rectangle,
-    value: &text_input::Value,
-    size: u16,
-    cursor_index: usize,
-    font: Font,
-) -> (f32, f32) {
-    use iced_native::text_input::Renderer;
-
-    let text_before_cursor = value.until(cursor_index).to_string();
-
-    let text_value_width =
-        renderer.measure_value(&text_before_cursor, size, font);
-    let offset = ((text_value_width + 5.0) - text_bounds.width).max(0.0);
-
-    (text_value_width, offset)
-}

glow/src/text.rs

@@ -130,7 +130,7 @@ impl Pipeline {
             .advance_width
     }
 
-    pub fn clear_measurement_cache(&mut self) {
+    pub fn trim_measurement_cache(&mut self) {
         // TODO: We should probably use a `GlyphCalculator` for this. However,
         // it uses a lifetimed `GlyphCalculatorGuard` with side-effects on drop.
         // This makes stuff quite inconvenient. A manual method for trimming the

glow/src/triangle.rs

@@ -3,6 +3,8 @@ use crate::{settings, Transformation};
 use iced_native::{Rectangle, Vector};
 use std::mem;
 
+pub use iced_graphics::triangle::Mesh2D;
+
 const UNIFORM_BUFFER_SIZE: usize = 100;
 const VERTEX_BUFFER_SIZE: usize = 10_000;
 const INDEX_BUFFER_SIZE: usize = 10_000;
@@ -59,26 +61,3 @@ impl From<Transformation> for Uniforms {
         }
     }
 }
-
-/// A two-dimensional vertex with some color in __linear__ RGBA.
-#[repr(C)]
-#[derive(Copy, Clone, Debug)]
-pub struct Vertex2D {
-    /// The vertex position
-    pub position: [f32; 2],
-    /// The vertex color in __linear__ RGBA.
-    pub color: [f32; 4],
-}
-
-/// A set of [`Vertex2D`] and indices representing a list of triangles.
-///
-/// [`Vertex2D`]: struct.Vertex2D.html
-#[derive(Clone, Debug)]
-pub struct Mesh2D {
-    /// The vertices of the mesh
-    pub vertices: Vec<Vertex2D>,
-    /// The list of vertex indices that defines the triangles of the mesh.
-    ///
-    /// Therefore, this list should always have a length that is a multiple of 3.
-    pub indices: Vec<u32>,
-}

glow/src/widget/button.rs

@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
+pub use iced_graphics::button::{Style, StyleSheet};
 pub use iced_native::button::State;
-pub use iced_style::button::{Style, StyleSheet};
 
 /// A widget that produces a message when clicked.
 ///

glow/src/widget/checkbox.rs

@@ -1,7 +1,7 @@
 //! Show toggle controls using checkboxes.
 use crate::Renderer;
 
-pub use iced_style::checkbox::{Style, StyleSheet};
+pub use iced_graphics::checkbox::{Style, StyleSheet};
 
 /// A box that can be checked.
 ///

glow/src/widget/container.rs

@@ -1,7 +1,7 @@
 //! Decorate content and apply alignment.
 use crate::Renderer;
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_graphics::container::{Style, StyleSheet};
 
 /// An element decorating some content.
 ///

glow/src/widget/progress_bar.rs

@@ -6,7 +6,7 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
-pub use iced_style::progress_bar::{Style, StyleSheet};
+pub use iced_graphics::progress_bar::{Style, StyleSheet};
 
 /// A bar that displays progress.
 ///

glow/src/widget/radio.rs

@@ -1,7 +1,7 @@
 //! Create choices using radio buttons.
 use crate::Renderer;
 
-pub use iced_style::radio::{Style, StyleSheet};
+pub use iced_graphics::radio::{Style, StyleSheet};
 
 /// A circular button representing a choice.
 ///

glow/src/widget/scrollable.rs

@@ -1,8 +1,8 @@
 //! Navigate an endless amount of content with a scrollbar.
 use crate::Renderer;
 
+pub use iced_graphics::scrollable::{Scrollbar, Scroller, StyleSheet};
 pub use iced_native::scrollable::State;
-pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
 
 /// A widget that can vertically display an infinite amount of content
 /// with a scrollbar.

glow/src/widget/slider.rs

@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
+pub use iced_graphics::slider::{Handle, HandleShape, Style, StyleSheet};
 pub use iced_native::slider::State;
-pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
 
 /// An horizontal bar and a handle that selects a single value from a range of
 /// values.

glow/src/widget/text_input.rs

@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
+pub use iced_graphics::text_input::{Style, StyleSheet};
 pub use iced_native::text_input::State;
-pub use iced_style::text_input::{Style, StyleSheet};
 
 /// A field that can be filled with text.
 ///

glow/src/window.rs

@@ -1,6 +1,4 @@
 //! Display rendering results on windows.
 mod backend;
-mod swap_chain;
 
 pub use backend::Backend;
-pub use swap_chain::SwapChain;

glow/src/window/backend.rs

@@ -53,7 +53,7 @@ impl iced_native::window::Backend for Backend {
             .make_context_current(&self.gl_context)
             .expect("Make context current");
 
-        Renderer::new(self.gl.as_ref().unwrap(), settings)
+        Renderer::new(crate::Backend::new(self.gl.as_ref().unwrap(), settings))
     }
 
     fn create_surface<W: HasRawWindowHandle>(
@@ -151,8 +151,13 @@ impl iced_native::window::Backend for Backend {
             gl.clear(glow::COLOR_BUFFER_BIT);
         }
 
-        let mouse =
+        let mouse = renderer.backend_mut().draw(
-            renderer.draw(gl, swap_chain, output, scale_factor, overlay);
+            gl,
+            swap_chain,
+            output,
+            scale_factor,
+            overlay,
+        );
 
         {
             let mut surface = self

glow/src/window/swap_chain.rs

@@ -1,5 +0,0 @@
-/// The rendering target of a window.
-///
-/// It represents a series of virtual framebuffers with a scale factor.
-#[derive(Debug)]
-pub struct SwapChain;

graphics/Cargo.toml

@@ -0,0 +1,23 @@
+[package]
+name = "iced_graphics"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+
+[features]
+canvas = ["lyon"]
+
+[dependencies]
+bytemuck = "1.2"
+
+[dependencies.iced_native]
+version = "0.2"
+path = "../native"
+
+[dependencies.iced_style]
+version = "0.1"
+path = "../style"
+
+[dependencies.lyon]
+version = "0.15"
+optional = true

graphics/src/backend.rs

@@ -0,0 +1,30 @@
+use iced_native::image;
+use iced_native::svg;
+use iced_native::{Font, Size};
+
+pub trait Backend {
+    fn trim_measurements(&mut self) {}
+}
+
+pub trait Text {
+    const ICON_FONT: Font;
+    const CHECKMARK_ICON: char;
+
+    fn measure(
+        &self,
+        contents: &str,
+        size: f32,
+        font: Font,
+        bounds: Size,
+    ) -> (f32, f32);
+
+    fn space_width(&self, size: f32) -> f32;
+}
+
+pub trait Image {
+    fn dimensions(&self, handle: &image::Handle) -> (u32, u32);
+}
+
+pub trait Svg {
+    fn viewport_dimensions(&self, handle: &svg::Handle) -> (u32, u32);
+}

graphics/src/lib.rs

@@ -0,0 +1,15 @@
+mod defaults;
+mod primitive;
+mod renderer;
+mod widget;
+
+pub mod backend;
+pub mod triangle;
+
+#[doc(no_inline)]
+pub use widget::*;
+
+pub use backend::Backend;
+pub use defaults::Defaults;
+pub use primitive::Primitive;
+pub use renderer::Renderer;

graphics/src/renderer.rs

@@ -0,0 +1,86 @@
+mod widget;
+
+use crate::{Backend, Defaults, Primitive};
+use iced_native::layout::{self, Layout};
+use iced_native::mouse;
+use iced_native::{Background, Color, Element, Point, Widget};
+
+pub struct Renderer<B> {
+    backend: B,
+}
+
+impl<B> Renderer<B> {
+    pub fn new(backend: B) -> Self {
+        Self { backend }
+    }
+
+    pub fn backend(&self) -> &B {
+        &self.backend
+    }
+
+    pub fn backend_mut(&mut self) -> &mut B {
+        &mut self.backend
+    }
+}
+
+impl<B> iced_native::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Output = (Primitive, mouse::Interaction);
+    type Defaults = Defaults;
+
+    fn layout<'a, Message>(
+        &mut self,
+        element: &Element<'a, Message, Self>,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let layout = element.layout(self, limits);
+
+        self.backend.trim_measurements();
+
+        layout
+    }
+}
+
+impl<B> layout::Debugger for Renderer<B>
+where
+    B: Backend,
+{
+    fn explain<Message>(
+        &mut self,
+        defaults: &Defaults,
+        widget: &dyn Widget<Message, Self>,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        color: Color,
+    ) -> Self::Output {
+        let (primitive, cursor) =
+            widget.draw(self, defaults, layout, cursor_position);
+
+        let mut primitives = Vec::new();
+
+        explain_layout(layout, color, &mut primitives);
+        primitives.push(primitive);
+
+        (Primitive::Group { primitives }, cursor)
+    }
+}
+
+fn explain_layout(
+    layout: Layout<'_>,
+    color: Color,
+    primitives: &mut Vec<Primitive>,
+) {
+    primitives.push(Primitive::Quad {
+        bounds: layout.bounds(),
+        background: Background::Color(Color::TRANSPARENT),
+        border_radius: 0,
+        border_width: 1,
+        border_color: [0.6, 0.6, 0.6, 0.5].into(),
+    });
+
+    for child in layout.children() {
+        explain_layout(child, color, primitives);
+    }
+}

graphics/src/renderer/widget.rs

@@ -2,6 +2,7 @@ mod button;
 mod checkbox;
 mod column;
 mod container;
+mod image;
 mod pane_grid;
 mod progress_bar;
 mod radio;
@@ -9,11 +10,6 @@ mod row;
 mod scrollable;
 mod slider;
 mod space;
+mod svg;
 mod text;
 mod text_input;
-
-#[cfg(feature = "svg")]
-mod svg;
-
-#[cfg(feature = "image")]
-mod image;

graphics/src/renderer/widget/button.rs

@@ -1,9 +1,14 @@
-use crate::{button::StyleSheet, defaults, Defaults, Primitive, Renderer};
+use crate::{
+    button::StyleSheet, defaults, Backend, Defaults, Primitive, Renderer,
+};
 use iced_native::{
     mouse, Background, Color, Element, Layout, Point, Rectangle, Vector,
 };
 
-impl iced_native::button::Renderer for Renderer {
+impl<B> iced_native::button::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     const DEFAULT_PADDING: u16 = 5;
 
     type Style = Box<dyn StyleSheet>;

graphics/src/renderer/widget/checkbox.rs

@@ -1,9 +1,14 @@
-use crate::{checkbox::StyleSheet, Primitive, Renderer};
+use crate::backend::{self, Backend};
+use crate::checkbox::StyleSheet;
+use crate::{Primitive, Renderer};
 use iced_native::{
     checkbox, mouse, HorizontalAlignment, Rectangle, VerticalAlignment,
 };
 
-impl checkbox::Renderer for Renderer {
+impl<B> checkbox::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
     type Style = Box<dyn StyleSheet>;
 
     const DEFAULT_SIZE: u16 = 20;
@@ -35,8 +40,8 @@ impl checkbox::Renderer for Renderer {
             Primitive::Group {
                 primitives: if is_checked {
                     let check = Primitive::Text {
-                        content: crate::text::CHECKMARK_ICON.to_string(),
+                        content: B::CHECKMARK_ICON.to_string(),
-                        font: crate::text::BUILTIN_ICONS,
+                        font: B::ICON_FONT,
                         size: bounds.height * 0.7,
                         bounds: Rectangle {
                             x: bounds.center_x(),

graphics/src/renderer/widget/column.rs

@@ -1,7 +1,12 @@
-use crate::{Primitive, Renderer};
+use crate::{Backend, Primitive, Renderer};
-use iced_native::{column, mouse, Element, Layout, Point};
+use iced_native::column;
+use iced_native::mouse;
+use iced_native::{Element, Layout, Point};
 
-impl column::Renderer for Renderer {
+impl<B> column::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     fn draw<Message>(
         &mut self,
         defaults: &Self::Defaults,

graphics/src/renderer/widget/container.rs

@@ -1,7 +1,12 @@
-use crate::{container, defaults, Defaults, Primitive, Renderer};
+use crate::container;
+use crate::defaults::{self, Defaults};
+use crate::{Backend, Primitive, Renderer};
 use iced_native::{Background, Color, Element, Layout, Point, Rectangle};
 
-impl iced_native::container::Renderer for Renderer {
+impl<B> iced_native::container::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     type Style = Box<dyn container::StyleSheet>;
 
     fn draw<Message>(

graphics/src/renderer/widget/image.rs

@@ -1,9 +1,15 @@
+use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
-use iced_native::{image, mouse, Layout};
+use iced_native::image;
+use iced_native::mouse;
+use iced_native::Layout;
 
-impl image::Renderer for Renderer {
+impl<B> image::Renderer for Renderer<B>
+where
+    B: Backend + backend::Image,
+{
     fn dimensions(&self, handle: &image::Handle) -> (u32, u32) {
-        self.image_pipeline.dimensions(handle)
+        self.backend().dimensions(handle)
     }
 
     fn draw(

graphics/src/renderer/widget/pane_grid.rs

@@ -1,11 +1,12 @@
-use crate::{Primitive, Renderer};
+use crate::{Backend, Primitive, Renderer};
-use iced_native::{
+use iced_native::mouse;
-    mouse,
+use iced_native::pane_grid::{self, Axis, Pane};
-    pane_grid::{self, Axis, Pane},
+use iced_native::{Element, Layout, Point, Rectangle, Vector};
-    Element, Layout, Point, Rectangle, Vector,
-};
 
-impl pane_grid::Renderer for Renderer {
+impl<B> pane_grid::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     fn draw<Message>(
         &mut self,
         defaults: &Self::Defaults,

graphics/src/renderer/widget/progress_bar.rs

@@ -1,7 +1,11 @@
-use crate::{progress_bar::StyleSheet, Primitive, Renderer};
+use crate::progress_bar::StyleSheet;
+use crate::{Backend, Primitive, Renderer};
 use iced_native::{mouse, progress_bar, Color, Rectangle};
 
-impl progress_bar::Renderer for Renderer {
+impl<B> progress_bar::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     type Style = Box<dyn StyleSheet>;
 
     const DEFAULT_HEIGHT: u16 = 30;

graphics/src/renderer/widget/radio.rs

@@ -1,10 +1,13 @@
-use crate::{radio::StyleSheet, Primitive, Renderer};
+use crate::{radio::StyleSheet, Backend, Primitive, Renderer};
 use iced_native::{mouse, radio, Background, Color, Rectangle};
 
 const SIZE: f32 = 28.0;
 const DOT_SIZE: f32 = SIZE / 2.0;
 
-impl radio::Renderer for Renderer {
+impl<B> radio::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     type Style = Box<dyn StyleSheet>;
 
     const DEFAULT_SIZE: u16 = SIZE as u16;

graphics/src/renderer/widget/row.rs

@@ -1,7 +1,12 @@
-use crate::{Primitive, Renderer};
+use crate::{Backend, Primitive, Renderer};
-use iced_native::{mouse, row, Element, Layout, Point};
+use iced_native::mouse;
+use iced_native::row;
+use iced_native::{Element, Layout, Point};
 
-impl row::Renderer for Renderer {
+impl<B> row::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     fn draw<Message>(
         &mut self,
         defaults: &Self::Defaults,

graphics/src/renderer/widget/scrollable.rs

@@ -1,10 +1,15 @@
-use crate::{Primitive, Renderer};
+use crate::{Backend, Primitive, Renderer};
-use iced_native::{mouse, scrollable, Background, Color, Rectangle, Vector};
+use iced_native::mouse;
+use iced_native::scrollable;
+use iced_native::{Background, Color, Rectangle, Vector};
 
 const SCROLLBAR_WIDTH: u16 = 10;
 const SCROLLBAR_MARGIN: u16 = 2;
 
-impl scrollable::Renderer for Renderer {
+impl<B> scrollable::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     type Style = Box<dyn iced_style::scrollable::StyleSheet>;
 
     fn scrollbar(

graphics/src/renderer/widget/slider.rs

@@ -1,12 +1,15 @@
-use crate::{
+use crate::slider::{HandleShape, StyleSheet};
-    slider::{HandleShape, StyleSheet},
+use crate::{Backend, Primitive, Renderer};
-    Primitive, Renderer,
+use iced_native::mouse;
-};
+use iced_native::slider;
-use iced_native::{mouse, slider, Background, Color, Point, Rectangle};
+use iced_native::{Background, Color, Point, Rectangle};
 
 const HANDLE_HEIGHT: f32 = 22.0;
 
-impl slider::Renderer for Renderer {
+impl<B> slider::Renderer for Renderer<B>
+where
+    B: Backend,
+{
     type Style = Box<dyn StyleSheet>;
 
     fn height(&self) -> u32 {

graphics/src/renderer/widget/space.rs

@@ -0,0 +1,13 @@
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::space;
+use iced_native::Rectangle;
+
+impl<B> space::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    fn draw(&mut self, _bounds: Rectangle) -> Self::Output {
+        (Primitive::None, mouse::Interaction::default())
+    }
+}

graphics/src/renderer/widget/svg.rs

@@ -1,9 +1,13 @@
+use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
 use iced_native::{mouse, svg, Layout};
 
-impl svg::Renderer for Renderer {
+impl<B> svg::Renderer for Renderer<B>
+where
+    B: Backend + backend::Svg,
+{
     fn dimensions(&self, handle: &svg::Handle) -> (u32, u32) {
-        self.image_pipeline.viewport_dimensions(handle)
+        self.backend().viewport_dimensions(handle)
     }
 
     fn draw(

graphics/src/renderer/widget/text.rs

@@ -1,3 +1,4 @@
+use crate::backend::{self, Backend};
 use crate::{Primitive, Renderer};
 use iced_native::{
     mouse, text, Color, Font, HorizontalAlignment, Rectangle, Size,
@@ -6,7 +7,10 @@ use iced_native::{
 
 use std::f32;
 
-impl text::Renderer for Renderer {
+impl<B> text::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
     type Font = Font;
 
     const DEFAULT_SIZE: u16 = 20;
@@ -18,7 +22,7 @@ impl text::Renderer for Renderer {
         font: Font,
         bounds: Size,
     ) -> (f32, f32) {
-        self.text_pipeline
+        self.backend()
             .measure(content, f32::from(size), font, bounds)
     }
 

graphics/src/renderer/widget/text_input.rs

@@ -1,4 +1,6 @@
-use crate::{text_input::StyleSheet, Primitive, Renderer};
+use crate::backend::{self, Backend};
+use crate::text_input::StyleSheet;
+use crate::{Primitive, Renderer};
 
 use iced_native::{
     mouse,
@@ -8,7 +10,10 @@ use iced_native::{
 };
 use std::f32;
 
-impl text_input::Renderer for Renderer {
+impl<B> text_input::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
     type Style = Box<dyn StyleSheet>;
 
     fn default_size(&self) -> u16 {
@@ -17,17 +22,15 @@ impl text_input::Renderer for Renderer {
     }
 
     fn measure_value(&self, value: &str, size: u16, font: Font) -> f32 {
-        let (mut width, _) = self.text_pipeline.measure(
+        let backend = self.backend();
-            value,
+
-            f32::from(size),
+        let (mut width, _) =
-            font,
+            backend.measure(value, f32::from(size), font, Size::INFINITY);
-            Size::INFINITY,
-        );
 
         let spaces_around = value.len() - value.trim().len();
 
         if spaces_around > 0 {
-            let space_width = self.text_pipeline.space_width(size as f32);
+            let space_width = backend.space_width(size as f32);
             width += spaces_around as f32 * space_width;
         }
 
@@ -241,14 +244,17 @@ impl text_input::Renderer for Renderer {
     }
 }
 
-fn measure_cursor_and_scroll_offset(
+fn measure_cursor_and_scroll_offset<B>(
-    renderer: &Renderer,
+    renderer: &Renderer<B>,
     text_bounds: Rectangle,
     value: &text_input::Value,
     size: u16,
     cursor_index: usize,
     font: Font,
-) -> (f32, f32) {
+) -> (f32, f32)
+where
+    B: Backend + backend::Text,
+{
     use iced_native::text_input::Renderer;
 
     let text_before_cursor = value.until(cursor_index).to_string();

graphics/src/triangle.rs

@@ -0,0 +1,26 @@
+/// A set of [`Vertex2D`] and indices representing a list of triangles.
+///
+/// [`Vertex2D`]: struct.Vertex2D.html
+#[derive(Clone, Debug)]
+pub struct Mesh2D {
+    /// The vertices of the mesh
+    pub vertices: Vec<Vertex2D>,
+    /// The list of vertex indices that defines the triangles of the mesh.
+    ///
+    /// Therefore, this list should always have a length that is a multiple of
+    /// 3.
+    pub indices: Vec<u32>,
+}
+
+/// A two-dimensional vertex with some color in __linear__ RGBA.
+#[derive(Copy, Clone, Debug)]
+#[repr(C)]
+pub struct Vertex2D {
+    /// The vertex position
+    pub position: [f32; 2],
+    /// The vertex color in __linear__ RGBA.
+    pub color: [f32; 4],
+}
+
+unsafe impl bytemuck::Zeroable for Vertex2D {}
+unsafe impl bytemuck::Pod for Vertex2D {}

graphics/src/widget.rs

@@ -0,0 +1,49 @@
+//! Use the widgets supported out-of-the-box.
+//!
+//! # Re-exports
+//! For convenience, the contents of this module are available at the root
+//! module. Therefore, you can directly type:
+//!
+//! ```
+//! use iced_graphics::{button, Button};
+//! ```
+pub mod button;
+pub mod checkbox;
+pub mod container;
+pub mod pane_grid;
+pub mod progress_bar;
+pub mod radio;
+pub mod scrollable;
+pub mod slider;
+pub mod text_input;
+
+mod text;
+
+#[doc(no_inline)]
+pub use button::Button;
+#[doc(no_inline)]
+pub use checkbox::Checkbox;
+#[doc(no_inline)]
+pub use container::Container;
+#[doc(no_inline)]
+pub use pane_grid::PaneGrid;
+#[doc(no_inline)]
+pub use progress_bar::ProgressBar;
+#[doc(no_inline)]
+pub use radio::Radio;
+#[doc(no_inline)]
+pub use scrollable::Scrollable;
+#[doc(no_inline)]
+pub use slider::Slider;
+#[doc(no_inline)]
+pub use text_input::TextInput;
+
+pub use text::Text;
+
+#[cfg(feature = "canvas")]
+#[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]
+pub mod canvas;
+
+#[cfg(feature = "canvas")]
+#[doc(no_inline)]
+pub use canvas::Canvas;

graphics/src/widget/button.rs

@@ -0,0 +1,16 @@
+//! Allow your users to perform actions by pressing a button.
+//!
+//! A [`Button`] has some local [`State`].
+//!
+//! [`Button`]: type.Button.html
+//! [`State`]: struct.State.html
+use crate::Renderer;
+
+pub use iced_native::button::State;
+pub use iced_style::button::{Style, StyleSheet};
+
+/// A widget that produces a message when clicked.
+///
+/// This is an alias of an `iced_native` button with an `iced_wgpu::Renderer`.
+pub type Button<'a, Message, Backend> =
+    iced_native::Button<'a, Message, Renderer<Backend>>;

graphics/src/widget/canvas.rs

@@ -0,0 +1,236 @@
+//! 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!
+//!
+//! [`Canvas`]: struct.Canvas.html
+//! [`Frame`]: struct.Frame.html
+use crate::{Backend, Defaults, Primitive, Renderer};
+use iced_native::{
+    layout, mouse, Clipboard, Element, Hasher, Layout, Length, Point, Size,
+    Vector, Widget,
+};
+use std::hash::Hash;
+use std::marker::PhantomData;
+
+pub mod path;
+
+mod cache;
+mod cursor;
+mod event;
+mod fill;
+mod frame;
+mod geometry;
+mod program;
+mod stroke;
+mod text;
+
+pub use cache::Cache;
+pub use cursor::Cursor;
+pub use event::Event;
+pub use fill::Fill;
+pub use frame::Frame;
+pub use geometry::Geometry;
+pub use path::Path;
+pub use program::Program;
+pub use stroke::{LineCap, LineJoin, Stroke};
+pub use text::Text;
+
+/// A widget capable of drawing 2D graphics.
+///
+/// [`Canvas`]: struct.Canvas.html
+///
+/// # Examples
+/// The repository has a couple of [examples] showcasing how to use a
+/// [`Canvas`]:
+///
+/// - [`clock`], an application that uses the [`Canvas`] widget to draw a clock
+/// and its hands to display the current time.
+/// - [`game_of_life`], an interactive version of the Game of Life, invented by
+/// John Conway.
+/// - [`solar_system`], an animated solar system drawn using the [`Canvas`] widget
+/// and showcasing how to compose different transforms.
+///
+/// [examples]: https://github.com/hecrj/iced/tree/master/examples
+/// [`clock`]: https://github.com/hecrj/iced/tree/master/examples/clock
+/// [`game_of_life`]: https://github.com/hecrj/iced/tree/master/examples/game_of_life
+/// [`solar_system`]: https://github.com/hecrj/iced/tree/master/examples/solar_system
+///
+/// ## 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 use iced_graphics::canvas;
+/// #     pub use iced_native::{Color, Rectangle};
+/// # }
+/// use iced::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 {
+///     fn draw(&self, 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, Fill::Color(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<Message, P: Program<Message>> {
+    width: Length,
+    height: Length,
+    program: P,
+    phantom: PhantomData<Message>,
+}
+
+impl<Message, P: Program<Message>> Canvas<Message, P> {
+    const DEFAULT_SIZE: u16 = 100;
+
+    /// Creates a new [`Canvas`].
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn new(program: P) -> Self {
+        Canvas {
+            width: Length::Units(Self::DEFAULT_SIZE),
+            height: Length::Units(Self::DEFAULT_SIZE),
+            program,
+            phantom: PhantomData,
+        }
+    }
+
+    /// Sets the width of the [`Canvas`].
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the height of the [`Canvas`].
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+}
+
+impl<Message, P, B> Widget<Message, Renderer<B>> for Canvas<Message, P>
+where
+    P: Program<Message>,
+    B: Backend,
+{
+    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,
+        event: iced_native::Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+        _renderer: &Renderer<B>,
+        _clipboard: Option<&dyn Clipboard>,
+    ) {
+        let bounds = layout.bounds();
+
+        let canvas_event = match event {
+            iced_native::Event::Mouse(mouse_event) => {
+                Some(Event::Mouse(mouse_event))
+            }
+            _ => None,
+        };
+
+        let cursor = Cursor::from_window_position(cursor_position);
+
+        if let Some(canvas_event) = canvas_event {
+            if let Some(message) =
+                self.program.update(canvas_event, bounds, cursor)
+            {
+                messages.push(message);
+            }
+        }
+    }
+
+    fn draw(
+        &self,
+        _renderer: &mut Renderer<B>,
+        _defaults: &Defaults,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> (Primitive, mouse::Interaction) {
+        let bounds = layout.bounds();
+        let translation = Vector::new(bounds.x, bounds.y);
+        let cursor = Cursor::from_window_position(cursor_position);
+
+        (
+            Primitive::Translate {
+                translation,
+                content: Box::new(Primitive::Group {
+                    primitives: self
+                        .program
+                        .draw(bounds, cursor)
+                        .into_iter()
+                        .map(Geometry::into_primitive)
+                        .collect(),
+                }),
+            },
+            self.program.mouse_interaction(bounds, cursor),
+        )
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        struct Marker;
+        std::any::TypeId::of::<Marker>().hash(state);
+
+        self.width.hash(state);
+        self.height.hash(state);
+    }
+}
+
+impl<'a, Message, P, B> From<Canvas<Message, P>>
+    for Element<'a, Message, Renderer<B>>
+where
+    Message: 'static,
+    P: Program<Message> + 'a,
+    B: Backend,
+{
+    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer<B>> {
+        Element::new(canvas)
+    }
+}

graphics/src/widget/checkbox.rs

@@ -0,0 +1,10 @@
+//! Show toggle controls using checkboxes.
+use crate::Renderer;
+
+pub use iced_style::checkbox::{Style, StyleSheet};
+
+/// A box that can be checked.
+///
+/// This is an alias of an `iced_native` checkbox with an `iced_wgpu::Renderer`.
+pub type Checkbox<Message, Backend> =
+    iced_native::Checkbox<Message, Renderer<Backend>>;

graphics/src/widget/container.rs

@@ -0,0 +1,11 @@
+//! Decorate content and apply alignment.
+use crate::Renderer;
+
+pub use iced_style::container::{Style, StyleSheet};
+
+/// An element decorating some content.
+///
+/// This is an alias of an `iced_native` container with a default
+/// `Renderer`.
+pub type Container<'a, Message, Backend> =
+    iced_native::Container<'a, Message, Renderer<Backend>>;

graphics/src/widget/pane_grid.rs

@@ -0,0 +1,25 @@
+//! Let your users split regions of your application and organize layout dynamically.
+//!
+//! [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+//!
+//! # Example
+//! The [`pane_grid` example] showcases how to use a [`PaneGrid`] with resizing,
+//! drag and drop, and hotkey support.
+//!
+//! [`pane_grid` example]: https://github.com/hecrj/iced/tree/0.1/examples/pane_grid
+//! [`PaneGrid`]: type.PaneGrid.html
+use crate::Renderer;
+
+pub use iced_native::pane_grid::{
+    Axis, Direction, DragEvent, Focus, KeyPressEvent, Pane, ResizeEvent, Split,
+    State,
+};
+
+/// A collection of panes distributed using either vertical or horizontal splits
+/// to completely fill the space available.
+///
+/// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+///
+/// This is an alias of an `iced_native` pane grid with an `iced_wgpu::Renderer`.
+pub type PaneGrid<'a, Message, Backend> =
+    iced_native::PaneGrid<'a, Message, Renderer<Backend>>;

graphics/src/widget/progress_bar.rs

@@ -0,0 +1,15 @@
+//! Allow your users to visually track the progress of a computation.
+//!
+//! A [`ProgressBar`] has a range of possible values and a current value,
+//! as well as a length, height and style.
+//!
+//! [`ProgressBar`]: type.ProgressBar.html
+use crate::Renderer;
+
+pub use iced_style::progress_bar::{Style, StyleSheet};
+
+/// A bar that displays progress.
+///
+/// This is an alias of an `iced_native` progress bar with an
+/// `iced_wgpu::Renderer`.
+pub type ProgressBar<Backend> = iced_native::ProgressBar<Renderer<Backend>>;

graphics/src/widget/radio.rs

@@ -0,0 +1,11 @@
+//! Create choices using radio buttons.
+use crate::Renderer;
+
+pub use iced_style::radio::{Style, StyleSheet};
+
+/// A circular button representing a choice.
+///
+/// This is an alias of an `iced_native` radio button with an
+/// `iced_wgpu::Renderer`.
+pub type Radio<Message, Backend> =
+    iced_native::Radio<Message, Renderer<Backend>>;

graphics/src/widget/scrollable.rs

@@ -0,0 +1,13 @@
+//! Navigate an endless amount of content with a scrollbar.
+use crate::Renderer;
+
+pub use iced_native::scrollable::State;
+pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
+
+/// A widget that can vertically display an infinite amount of content
+/// with a scrollbar.
+///
+/// This is an alias of an `iced_native` scrollable with a default
+/// `Renderer`.
+pub type Scrollable<'a, Message, Backend> =
+    iced_native::Scrollable<'a, Message, Renderer<Backend>>;

graphics/src/widget/slider.rs

@@ -0,0 +1,17 @@
+//! Display an interactive selector of a single value from a range of values.
+//!
+//! A [`Slider`] has some local [`State`].
+//!
+//! [`Slider`]: struct.Slider.html
+//! [`State`]: struct.State.html
+use crate::Renderer;
+
+pub use iced_native::slider::State;
+pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
+
+/// An horizontal bar and a handle that selects a single value from a range of
+/// values.
+///
+/// This is an alias of an `iced_native` slider with an `iced_wgpu::Renderer`.
+pub type Slider<'a, Message, Backend> =
+    iced_native::Slider<'a, Message, Renderer<Backend>>;

graphics/src/widget/text.rs

@@ -0,0 +1,7 @@
+//! Write some text for your users to read.
+use crate::Renderer;
+
+/// A paragraph of text.
+///
+/// This is an alias of an `iced_native` text with an `iced_wgpu::Renderer`.
+pub type Text<Backend> = iced_native::Text<Renderer<Backend>>;

graphics/src/widget/text_input.rs

@@ -0,0 +1,16 @@
+//! Display fields that can be filled with text.
+//!
+//! A [`TextInput`] has some local [`State`].
+//!
+//! [`TextInput`]: struct.TextInput.html
+//! [`State`]: struct.State.html
+use crate::Renderer;
+
+pub use iced_native::text_input::State;
+pub use iced_style::text_input::{Style, StyleSheet};
+
+/// A field that can be filled with text.
+///
+/// This is an alias of an `iced_native` text input with an `iced_wgpu::Renderer`.
+pub type TextInput<'a, Message, Backend> =
+    iced_native::TextInput<'a, Message, Renderer<Backend>>;

native/src/user_interface.rs

@@ -102,7 +102,9 @@ where
             hasher.finish()
         };
 
-        let layout = if hash == cache.hash && bounds == cache.bounds {
+        let layout_is_cached = hash == cache.hash && bounds == cache.bounds;
+
+        let layout = if layout_is_cached {
             cache.layout
         } else {
             renderer.layout(&root, &layout::Limits::new(Size::ZERO, bounds))

wgpu/Cargo.toml

@@ -9,12 +9,13 @@ repository = "https://github.com/hecrj/iced"
 
 [features]
 svg = ["resvg"]
-canvas = ["lyon"]
+canvas = ["iced_graphics/canvas"]
 
 [dependencies]
 wgpu = "0.5"
 wgpu_glyph = "0.8"
 zerocopy = "0.3"
+bytemuck = "1.2"
 glyph_brush = "0.6"
 raw-window-handle = "0.3"
 glam = "0.8"
@@ -29,9 +30,9 @@ gfx-memory = "=0.1.1"
 version = "0.2"
 path = "../native"
 
-[dependencies.iced_style]
+[dependencies.iced_graphics]
 version = "0.1"
-path = "../style"
+path = "../graphics"
 
 [dependencies.image]
 version = "0.23"
@@ -42,10 +43,6 @@ version = "0.9"
 features = ["raqote-backend"]
 optional = true
 
-[dependencies.lyon]
-version = "0.15"
-optional = true
-
 [package.metadata.docs.rs]
 rustdoc-args = ["--cfg", "docsrs"]
 all-features = true

wgpu/src/backend.rs

@@ -1,22 +1,20 @@
-use crate::{
+use crate::quad;
-    quad, text, triangle, Defaults, Primitive, Quad, Settings, Target,
+use crate::text;
-    Transformation,
+use crate::triangle;
-};
+use crate::{Quad, Settings, Target, Transformation};
+use iced_graphics::backend;
+use iced_graphics::Primitive;
+use iced_native::mouse;
+use iced_native::{Background, Font, Point, Rectangle, Size, Vector};
 
 #[cfg(any(feature = "image", feature = "svg"))]
 use crate::image::{self, Image};
 
-use iced_native::{
-    layout, mouse, Background, Color, Layout, Point, Rectangle, Vector, Widget,
-};
-
-mod widget;
-
 /// A [`wgpu`] renderer.
 ///
 /// [`wgpu`]: https://github.com/gfx-rs/wgpu-rs
 #[derive(Debug)]
-pub struct Renderer {
+pub struct Backend {
     quad_pipeline: quad::Pipeline,
     text_pipeline: text::Pipeline,
     triangle_pipeline: triangle::Pipeline,
@@ -55,7 +53,7 @@ impl<'a> Layer<'a> {
     }
 }
 
-impl Renderer {
+impl Backend {
     /// Creates a new [`Renderer`].
     ///
     /// [`Renderer`]: struct.Renderer.html
@@ -451,57 +449,44 @@ impl Renderer {
     }
 }
 
-impl iced_native::Renderer for Renderer {
+impl iced_graphics::Backend for Backend {
-    type Output = (Primitive, mouse::Interaction);
+    fn trim_measurements(&mut self) {
-    type Defaults = Defaults;
+        self.text_pipeline.trim_measurement_cache()
-
-    fn layout<'a, Message>(
-        &mut self,
-        element: &iced_native::Element<'a, Message, Self>,
-        limits: &iced_native::layout::Limits,
-    ) -> iced_native::layout::Node {
-        let node = element.layout(self, limits);
-
-        self.text_pipeline.clear_measurement_cache();
-
-        node
     }
 }
 
-impl layout::Debugger for Renderer {
+impl backend::Text for Backend {
-    fn explain<Message>(
+    const ICON_FONT: Font = text::BUILTIN_ICONS;
-        &mut self,
+    const CHECKMARK_ICON: char = text::CHECKMARK_ICON;
-        defaults: &Defaults,
-        widget: &dyn Widget<Message, Self>,
-        layout: Layout<'_>,
-        cursor_position: Point,
-        color: Color,
-    ) -> Self::Output {
-        let mut primitives = Vec::new();
-        let (primitive, cursor) =
-            widget.draw(self, defaults, layout, cursor_position);
 
-        explain_layout(layout, color, &mut primitives);
+    fn measure(
-        primitives.push(primitive);
+        &self,
+        contents: &str,
+        size: f32,
+        font: Font,
+        bounds: Size,
+    ) -> (f32, f32) {
+        self.text_pipeline.measure(contents, size, font, bounds)
+    }
 
-        (Primitive::Group { primitives }, cursor)
+    fn space_width(&self, size: f32) -> f32 {
+        self.text_pipeline.space_width(size)
     }
 }
 
-fn explain_layout(
+#[cfg(feature = "image")]
-    layout: Layout<'_>,
+impl backend::Image for Backend {
-    color: Color,
+    fn dimensions(&self, handle: &iced_native::image::Handle) -> (u32, u32) {
-    primitives: &mut Vec<Primitive>,
+        self.image_pipeline.dimensions(handle)
-) {
+    }
-    primitives.push(Primitive::Quad {
+}
-        bounds: layout.bounds(),
+
-        background: Background::Color(Color::TRANSPARENT),
+#[cfg(feature = "svg")]
-        border_radius: 0,
+impl backend::Svg for Backend {
-        border_width: 1,
+    fn viewport_dimensions(
-        border_color: [0.6, 0.6, 0.6, 0.5].into(),
+        &self,
-    });
+        handle: &iced_native::svg::Handle,
-
+    ) -> (u32, u32) {
-    for child in layout.children() {
+        self.image_pipeline.viewport_dimensions(handle)
-        explain_layout(child, color, primitives);
     }
 }

wgpu/src/defaults.rs

@@ -1,32 +0,0 @@
-//! Use default styling attributes to inherit styles.
-use iced_native::Color;
-
-/// Some default styling attributes.
-#[derive(Debug, Clone, Copy)]
-pub struct Defaults {
-    /// Text styling
-    pub text: Text,
-}
-
-impl Default for Defaults {
-    fn default() -> Defaults {
-        Defaults {
-            text: Text::default(),
-        }
-    }
-}
-
-/// Some default text styling attributes.
-#[derive(Debug, Clone, Copy)]
-pub struct Text {
-    /// The default color of text
-    pub color: Color,
-}
-
-impl Default for Text {
-    fn default() -> Text {
-        Text {
-            color: Color::BLACK,
-        }
-    }
-}

wgpu/src/lib.rs

@@ -20,32 +20,29 @@
 //! [`wgpu`]: https://github.com/gfx-rs/wgpu-rs
 //! [WebGPU API]: https://gpuweb.github.io/gpuweb/
 //! [`wgpu_glyph`]: https://github.com/hecrj/wgpu_glyph
-#![deny(missing_docs)]
+//#![deny(missing_docs)]
 #![deny(missing_debug_implementations)]
 #![deny(unused_results)]
 #![forbid(unsafe_code)]
 #![forbid(rust_2018_idioms)]
 #![cfg_attr(docsrs, feature(doc_cfg))]
 
-pub mod defaults;
 pub mod settings;
 pub mod triangle;
 pub mod widget;
 pub mod window;
 
-mod primitive;
+mod backend;
 mod quad;
-mod renderer;
 mod target;
 mod text;
 mod transformation;
 mod viewport;
 
+pub use iced_graphics::{Defaults, Primitive};
 pub use wgpu;
 
-pub use defaults::Defaults;
+pub use backend::Backend;
-pub use primitive::Primitive;
-pub use renderer::Renderer;
 pub use settings::Settings;
 pub use target::Target;
 pub use viewport::Viewport;
@@ -56,5 +53,7 @@ pub use widget::*;
 pub(crate) use quad::Quad;
 pub(crate) use transformation::Transformation;
 
+pub type Renderer = iced_graphics::Renderer<Backend>;
+
 #[cfg(any(feature = "image", feature = "svg"))]
 mod image;

wgpu/src/primitive.rs

@@ -1,107 +0,0 @@
-use iced_native::{
-    image, svg, Background, Color, Font, HorizontalAlignment, Rectangle, Size,
-    Vector, VerticalAlignment,
-};
-
-use crate::triangle;
-use std::sync::Arc;
-
-/// A rendering primitive.
-#[derive(Debug, Clone)]
-pub enum Primitive {
-    /// An empty primitive
-    None,
-    /// A group of primitives
-    Group {
-        /// The primitives of the group
-        primitives: Vec<Primitive>,
-    },
-    /// A text primitive
-    Text {
-        /// The contents of the text
-        content: String,
-        /// The bounds of the text
-        bounds: Rectangle,
-        /// The color of the text
-        color: Color,
-        /// The size of the text
-        size: f32,
-        /// The font of the text
-        font: Font,
-        /// The horizontal alignment of the text
-        horizontal_alignment: HorizontalAlignment,
-        /// The vertical alignment of the text
-        vertical_alignment: VerticalAlignment,
-    },
-    /// A quad primitive
-    Quad {
-        /// The bounds of the quad
-        bounds: Rectangle,
-        /// The background of the quad
-        background: Background,
-        /// The border radius of the quad
-        border_radius: u16,
-        /// The border width of the quad
-        border_width: u16,
-        /// The border color of the quad
-        border_color: Color,
-    },
-    /// An image primitive
-    Image {
-        /// The handle of the image
-        handle: image::Handle,
-        /// The bounds of the image
-        bounds: Rectangle,
-    },
-    /// An SVG primitive
-    Svg {
-        /// The path of the SVG file
-        handle: svg::Handle,
-
-        /// The bounds of the viewport
-        bounds: Rectangle,
-    },
-    /// A clip primitive
-    Clip {
-        /// The bounds of the clip
-        bounds: Rectangle,
-        /// The offset transformation of the clip
-        offset: Vector<u32>,
-        /// The content of the clip
-        content: Box<Primitive>,
-    },
-    /// A primitive that applies a translation
-    Translate {
-        /// The translation vector
-        translation: Vector,
-
-        /// The primitive to translate
-        content: Box<Primitive>,
-    },
-    /// A low-level primitive to render a mesh of triangles.
-    ///
-    /// It can be used to render many kinds of geometry freely.
-    Mesh2D {
-        /// The size of the drawable region of the mesh.
-        ///
-        /// Any geometry that falls out of this region will be clipped.
-        size: Size,
-
-        /// The vertex and index buffers of the mesh
-        buffers: triangle::Mesh2D,
-    },
-    /// A cached primitive.
-    ///
-    /// This can be useful if you are implementing a widget where primitive
-    /// generation is expensive.
-    Cached {
-        /// The cached primitive
-        cache: Arc<Primitive>,
-    },
-}
-
-impl Default for Primitive {
-    fn default() -> Primitive {
-        Primitive::None
-    }
-}

wgpu/src/renderer/widget/column.rs

@@ -1,34 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{column, mouse, Element, Layout, Point};
-
-impl column::Renderer for Renderer {
-    fn draw<Message>(
-        &mut self,
-        defaults: &Self::Defaults,
-        content: &[Element<'_, Message, Self>],
-        layout: Layout<'_>,
-        cursor_position: Point,
-    ) -> Self::Output {
-        let mut mouse_interaction = mouse::Interaction::default();
-
-        (
-            Primitive::Group {
-                primitives: content
-                    .iter()
-                    .zip(layout.children())
-                    .map(|(child, layout)| {
-                        let (primitive, new_mouse_interaction) =
-                            child.draw(self, defaults, layout, cursor_position);
-
-                        if new_mouse_interaction > mouse_interaction {
-                            mouse_interaction = new_mouse_interaction;
-                        }
-
-                        primitive
-                    })
-                    .collect(),
-            },
-            mouse_interaction,
-        )
-    }
-}

wgpu/src/renderer/widget/container.rs

@@ -1,48 +0,0 @@
-use crate::{container, defaults, Defaults, Primitive, Renderer};
-use iced_native::{Background, Color, Element, Layout, Point, Rectangle};
-
-impl iced_native::container::Renderer for Renderer {
-    type Style = Box<dyn container::StyleSheet>;
-
-    fn draw<Message>(
-        &mut self,
-        defaults: &Defaults,
-        bounds: Rectangle,
-        cursor_position: Point,
-        style_sheet: &Self::Style,
-        content: &Element<'_, Message, Self>,
-        content_layout: Layout<'_>,
-    ) -> Self::Output {
-        let style = style_sheet.style();
-
-        let defaults = Defaults {
-            text: defaults::Text {
-                color: style.text_color.unwrap_or(defaults.text.color),
-            },
-        };
-
-        let (content, mouse_interaction) =
-            content.draw(self, &defaults, content_layout, cursor_position);
-
-        if style.background.is_some() || style.border_width > 0 {
-            let quad = Primitive::Quad {
-                bounds,
-                background: style
-                    .background
-                    .unwrap_or(Background::Color(Color::TRANSPARENT)),
-                border_radius: style.border_radius,
-                border_width: style.border_width,
-                border_color: style.border_color,
-            };
-
-            (
-                Primitive::Group {
-                    primitives: vec![quad, content],
-                },
-                mouse_interaction,
-            )
-        } else {
-            (content, mouse_interaction)
-        }
-    }
-}

wgpu/src/renderer/widget/pane_grid.rs

@@ -1,93 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{
-    mouse,
-    pane_grid::{self, Axis, Pane},
-    Element, Layout, Point, Rectangle, Vector,
-};
-
-impl pane_grid::Renderer for Renderer {
-    fn draw<Message>(
-        &mut self,
-        defaults: &Self::Defaults,
-        content: &[(Pane, Element<'_, Message, Self>)],
-        dragging: Option<Pane>,
-        resizing: Option<Axis>,
-        layout: Layout<'_>,
-        cursor_position: Point,
-    ) -> Self::Output {
-        let pane_cursor_position = if dragging.is_some() {
-            // TODO: Remove once cursor availability is encoded in the type
-            // system
-            Point::new(-1.0, -1.0)
-        } else {
-            cursor_position
-        };
-
-        let mut mouse_interaction = mouse::Interaction::default();
-        let mut dragged_pane = None;
-
-        let mut panes: Vec<_> = content
-            .iter()
-            .zip(layout.children())
-            .enumerate()
-            .map(|(i, ((id, pane), layout))| {
-                let (primitive, new_mouse_interaction) =
-                    pane.draw(self, defaults, layout, pane_cursor_position);
-
-                if new_mouse_interaction > mouse_interaction {
-                    mouse_interaction = new_mouse_interaction;
-                }
-
-                if Some(*id) == dragging {
-                    dragged_pane = Some((i, layout));
-                }
-
-                primitive
-            })
-            .collect();
-
-        let primitives = if let Some((index, layout)) = dragged_pane {
-            let pane = panes.remove(index);
-            let bounds = layout.bounds();
-
-            // TODO: Fix once proper layering is implemented.
-            // This is a pretty hacky way to achieve layering.
-            let clip = Primitive::Clip {
-                bounds: Rectangle {
-                    x: cursor_position.x - bounds.width / 2.0,
-                    y: cursor_position.y - bounds.height / 2.0,
-                    width: bounds.width + 0.5,
-                    height: bounds.height + 0.5,
-                },
-                offset: Vector::new(0, 0),
-                content: Box::new(Primitive::Translate {
-                    translation: Vector::new(
-                        cursor_position.x - bounds.x - bounds.width / 2.0,
-                        cursor_position.y - bounds.y - bounds.height / 2.0,
-                    ),
-                    content: Box::new(pane),
-                }),
-            };
-
-            panes.push(clip);
-
-            panes
-        } else {
-            panes
-        };
-
-        (
-            Primitive::Group { primitives },
-            if dragging.is_some() {
-                mouse::Interaction::Grabbing
-            } else if let Some(axis) = resizing {
-                match axis {
-                    Axis::Horizontal => mouse::Interaction::ResizingVertically,
-                    Axis::Vertical => mouse::Interaction::ResizingHorizontally,
-                }
-            } else {
-                mouse_interaction
-            },
-        )
-    }
-}

wgpu/src/renderer/widget/progress_bar.rs

@@ -1,54 +0,0 @@
-use crate::{progress_bar::StyleSheet, Primitive, Renderer};
-use iced_native::{mouse, progress_bar, Color, Rectangle};
-
-impl progress_bar::Renderer for Renderer {
-    type Style = Box<dyn StyleSheet>;
-
-    const DEFAULT_HEIGHT: u16 = 30;
-
-    fn draw(
-        &self,
-        bounds: Rectangle,
-        range: std::ops::RangeInclusive<f32>,
-        value: f32,
-        style_sheet: &Self::Style,
-    ) -> Self::Output {
-        let style = style_sheet.style();
-
-        let (range_start, range_end) = range.into_inner();
-        let active_progress_width = bounds.width
-            * ((value - range_start) / (range_end - range_start).max(1.0));
-
-        let background = Primitive::Group {
-            primitives: vec![Primitive::Quad {
-                bounds: Rectangle { ..bounds },
-                background: style.background,
-                border_radius: style.border_radius,
-                border_width: 0,
-                border_color: Color::TRANSPARENT,
-            }],
-        };
-
-        (
-            if active_progress_width > 0.0 {
-                let bar = Primitive::Quad {
-                    bounds: Rectangle {
-                        width: active_progress_width,
-                        ..bounds
-                    },
-                    background: style.bar,
-                    border_radius: style.border_radius,
-                    border_width: 0,
-                    border_color: Color::TRANSPARENT,
-                };
-
-                Primitive::Group {
-                    primitives: vec![background, bar],
-                }
-            } else {
-                background
-            },
-            mouse::Interaction::default(),
-        )
-    }
-}

wgpu/src/renderer/widget/radio.rs

@@ -1,63 +0,0 @@
-use crate::{radio::StyleSheet, Primitive, Renderer};
-use iced_native::{mouse, radio, Background, Color, Rectangle};
-
-const SIZE: f32 = 28.0;
-const DOT_SIZE: f32 = SIZE / 2.0;
-
-impl radio::Renderer for Renderer {
-    type Style = Box<dyn StyleSheet>;
-
-    const DEFAULT_SIZE: u16 = SIZE as u16;
-    const DEFAULT_SPACING: u16 = 15;
-
-    fn draw(
-        &mut self,
-        bounds: Rectangle,
-        is_selected: bool,
-        is_mouse_over: bool,
-        (label, _): Self::Output,
-        style_sheet: &Self::Style,
-    ) -> Self::Output {
-        let style = if is_mouse_over {
-            style_sheet.hovered()
-        } else {
-            style_sheet.active()
-        };
-
-        let radio = Primitive::Quad {
-            bounds,
-            background: style.background,
-            border_radius: (SIZE / 2.0) as u16,
-            border_width: style.border_width,
-            border_color: style.border_color,
-        };
-
-        (
-            Primitive::Group {
-                primitives: if is_selected {
-                    let radio_circle = Primitive::Quad {
-                        bounds: Rectangle {
-                            x: bounds.x + DOT_SIZE / 2.0,
-                            y: bounds.y + DOT_SIZE / 2.0,
-                            width: bounds.width - DOT_SIZE,
-                            height: bounds.height - DOT_SIZE,
-                        },
-                        background: Background::Color(style.dot_color),
-                        border_radius: (DOT_SIZE / 2.0) as u16,
-                        border_width: 0,
-                        border_color: Color::TRANSPARENT,
-                    };
-
-                    vec![radio, radio_circle, label]
-                } else {
-                    vec![radio, label]
-                },
-            },
-            if is_mouse_over {
-                mouse::Interaction::Pointer
-            } else {
-                mouse::Interaction::default()
-            },
-        )
-    }
-}

wgpu/src/renderer/widget/scrollable.rs

@@ -1,125 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{mouse, scrollable, Background, Color, Rectangle, Vector};
-
-const SCROLLBAR_WIDTH: u16 = 10;
-const SCROLLBAR_MARGIN: u16 = 2;
-
-impl scrollable::Renderer for Renderer {
-    type Style = Box<dyn iced_style::scrollable::StyleSheet>;
-
-    fn scrollbar(
-        &self,
-        bounds: Rectangle,
-        content_bounds: Rectangle,
-        offset: u32,
-    ) -> Option<scrollable::Scrollbar> {
-        if content_bounds.height > bounds.height {
-            let scrollbar_bounds = Rectangle {
-                x: bounds.x + bounds.width
-                    - f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
-                y: bounds.y,
-                width: f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
-                height: bounds.height,
-            };
-
-            let ratio = bounds.height / content_bounds.height;
-            let scrollbar_height = bounds.height * ratio;
-            let y_offset = offset as f32 * ratio;
-
-            let scroller_bounds = Rectangle {
-                x: scrollbar_bounds.x + f32::from(SCROLLBAR_MARGIN),
-                y: scrollbar_bounds.y + y_offset,
-                width: scrollbar_bounds.width - f32::from(2 * SCROLLBAR_MARGIN),
-                height: scrollbar_height,
-            };
-
-            Some(scrollable::Scrollbar {
-                bounds: scrollbar_bounds,
-                scroller: scrollable::Scroller {
-                    bounds: scroller_bounds,
-                },
-            })
-        } else {
-            None
-        }
-    }
-
-    fn draw(
-        &mut self,
-        state: &scrollable::State,
-        bounds: Rectangle,
-        _content_bounds: Rectangle,
-        is_mouse_over: bool,
-        is_mouse_over_scrollbar: bool,
-        scrollbar: Option<scrollable::Scrollbar>,
-        offset: u32,
-        style_sheet: &Self::Style,
-        (content, mouse_interaction): Self::Output,
-    ) -> Self::Output {
-        (
-            if let Some(scrollbar) = scrollbar {
-                let clip = Primitive::Clip {
-                    bounds,
-                    offset: Vector::new(0, offset),
-                    content: Box::new(content),
-                };
-
-                let style = if state.is_scroller_grabbed() {
-                    style_sheet.dragging()
-                } else if is_mouse_over_scrollbar {
-                    style_sheet.hovered()
-                } else {
-                    style_sheet.active()
-                };
-
-                let is_scrollbar_visible =
-                    style.background.is_some() || style.border_width > 0;
-
-                let scroller = if is_mouse_over
-                    || state.is_scroller_grabbed()
-                    || is_scrollbar_visible
-                {
-                    Primitive::Quad {
-                        bounds: scrollbar.scroller.bounds,
-                        background: Background::Color(style.scroller.color),
-                        border_radius: style.scroller.border_radius,
-                        border_width: style.scroller.border_width,
-                        border_color: style.scroller.border_color,
-                    }
-                } else {
-                    Primitive::None
-                };
-
-                let scrollbar = if is_scrollbar_visible {
-                    Primitive::Quad {
-                        bounds: Rectangle {
-                            x: scrollbar.bounds.x + f32::from(SCROLLBAR_MARGIN),
-                            width: scrollbar.bounds.width
-                                - f32::from(2 * SCROLLBAR_MARGIN),
-                            ..scrollbar.bounds
-                        },
-                        background: style
-                            .background
-                            .unwrap_or(Background::Color(Color::TRANSPARENT)),
-                        border_radius: style.border_radius,
-                        border_width: style.border_width,
-                        border_color: style.border_color,
-                    }
-                } else {
-                    Primitive::None
-                };
-
-                Primitive::Group {
-                    primitives: vec![clip, scrollbar, scroller],
-                }
-            } else {
-                content
-            },
-            if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
-                mouse::Interaction::Idle
-            } else {
-                mouse_interaction
-            },
-        )
-    }
-}

wgpu/src/renderer/widget/space.rs

@@ -1,8 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{mouse, space, Rectangle};
-
-impl space::Renderer for Renderer {
-    fn draw(&mut self, _bounds: Rectangle) -> Self::Output {
-        (Primitive::None, mouse::Interaction::default())
-    }
-}

wgpu/src/renderer/widget/text.rs

@@ -1,61 +0,0 @@
-use crate::{Primitive, Renderer};
-use iced_native::{
-    mouse, text, Color, Font, HorizontalAlignment, Rectangle, Size,
-    VerticalAlignment,
-};
-
-use std::f32;
-
-impl text::Renderer for Renderer {
-    type Font = Font;
-
-    const DEFAULT_SIZE: u16 = 20;
-
-    fn measure(
-        &self,
-        content: &str,
-        size: u16,
-        font: Font,
-        bounds: Size,
-    ) -> (f32, f32) {
-        self.text_pipeline
-            .measure(content, f32::from(size), font, bounds)
-    }
-
-    fn draw(
-        &mut self,
-        defaults: &Self::Defaults,
-        bounds: Rectangle,
-        content: &str,
-        size: u16,
-        font: Font,
-        color: Option<Color>,
-        horizontal_alignment: HorizontalAlignment,
-        vertical_alignment: VerticalAlignment,
-    ) -> Self::Output {
-        let x = match horizontal_alignment {
-            iced_native::HorizontalAlignment::Left => bounds.x,
-            iced_native::HorizontalAlignment::Center => bounds.center_x(),
-            iced_native::HorizontalAlignment::Right => bounds.x + bounds.width,
-        };
-
-        let y = match vertical_alignment {
-            iced_native::VerticalAlignment::Top => bounds.y,
-            iced_native::VerticalAlignment::Center => bounds.center_y(),
-            iced_native::VerticalAlignment::Bottom => bounds.y + bounds.height,
-        };
-
-        (
-            Primitive::Text {
-                content: content.to_string(),
-                size: f32::from(size),
-                bounds: Rectangle { x, y, ..bounds },
-                color: color.unwrap_or(defaults.text.color),
-                font,
-                horizontal_alignment,
-                vertical_alignment,
-            },
-            mouse::Interaction::default(),
-        )
-    }
-}

wgpu/src/text.rs

@@ -138,7 +138,7 @@ impl Pipeline {
             .advance_width
     }
 
-    pub fn clear_measurement_cache(&mut self) {
+    pub fn trim_measurement_cache(&mut self) {
         // TODO: We should probably use a `GlyphCalculator` for this. However,
         // it uses a lifetimed `GlyphCalculatorGuard` with side-effects on drop.
         // This makes stuff quite inconvenient. A manual method for trimming the

wgpu/src/triangle.rs

@@ -4,6 +4,8 @@ use iced_native::{Rectangle, Vector};
 use std::mem;
 use zerocopy::AsBytes;
 
+pub use iced_graphics::triangle::{Mesh2D, Vertex2D};
+
 mod msaa;
 
 const UNIFORM_BUFFER_SIZE: usize = 100;
@@ -236,7 +238,7 @@ impl Pipeline {
             .into();
 
             let vertex_buffer = device.create_buffer_with_data(
-                mesh.vertices.as_bytes(),
+                bytemuck::cast_slice(&mesh.vertices),
                 wgpu::BufferUsage::COPY_SRC,
             );
 
@@ -387,26 +389,3 @@ impl From<Transformation> for Uniforms {
         }
     }
 }
-
-/// A two-dimensional vertex with some color in __linear__ RGBA.
-#[repr(C)]
-#[derive(Copy, Clone, Debug, AsBytes)]
-pub struct Vertex2D {
-    /// The vertex position
-    pub position: [f32; 2],
-    /// The vertex color in __linear__ RGBA.
-    pub color: [f32; 4],
-}
-
-/// A set of [`Vertex2D`] and indices representing a list of triangles.
-///
-/// [`Vertex2D`]: struct.Vertex2D.html
-#[derive(Clone, Debug)]
-pub struct Mesh2D {
-    /// The vertices of the mesh
-    pub vertices: Vec<Vertex2D>,
-    /// The list of vertex indices that defines the triangles of the mesh.
-    ///
-    /// Therefore, this list should always have a length that is a multiple of 3.
-    pub indices: Vec<u32>,
-}

wgpu/src/widget/button.rs

@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
+pub use iced_graphics::button::{Style, StyleSheet};
 pub use iced_native::button::State;
-pub use iced_style::button::{Style, StyleSheet};
 
 /// A widget that produces a message when clicked.
 ///

wgpu/src/widget/canvas.rs

@@ -6,228 +6,4 @@
 //!
 //! [`Canvas`]: struct.Canvas.html
 //! [`Frame`]: struct.Frame.html
-use crate::{Defaults, Primitive, Renderer};
+pub use iced_graphics::canvas::*;
-
-use iced_native::{
-    layout, mouse, Clipboard, Element, Hasher, Layout, Length, Point, Size,
-    Vector, Widget,
-};
-use std::hash::Hash;
-use std::marker::PhantomData;
-
-pub mod path;
-
-mod cache;
-mod cursor;
-mod event;
-mod fill;
-mod frame;
-mod geometry;
-mod program;
-mod stroke;
-mod text;
-
-pub use cache::Cache;
-pub use cursor::Cursor;
-pub use event::Event;
-pub use fill::Fill;
-pub use frame::Frame;
-pub use geometry::Geometry;
-pub use path::Path;
-pub use program::Program;
-pub use stroke::{LineCap, LineJoin, Stroke};
-pub use text::Text;
-
-/// A widget capable of drawing 2D graphics.
-///
-/// [`Canvas`]: struct.Canvas.html
-///
-/// # Examples
-/// The repository has a couple of [examples] showcasing how to use a
-/// [`Canvas`]:
-///
-/// - [`clock`], an application that uses the [`Canvas`] widget to draw a clock
-/// and its hands to display the current time.
-/// - [`game_of_life`], an interactive version of the Game of Life, invented by
-/// John Conway.
-/// - [`solar_system`], an animated solar system drawn using the [`Canvas`] widget
-/// and showcasing how to compose different transforms.
-///
-/// [examples]: https://github.com/hecrj/iced/tree/master/examples
-/// [`clock`]: https://github.com/hecrj/iced/tree/master/examples/clock
-/// [`game_of_life`]: https://github.com/hecrj/iced/tree/master/examples/game_of_life
-/// [`solar_system`]: https://github.com/hecrj/iced/tree/master/examples/solar_system
-///
-/// ## 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 use iced_wgpu::canvas;
-/// #     pub use iced_native::{Color, Rectangle};
-/// # }
-/// use iced::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 {
-///     fn draw(&self, 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, Fill::Color(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<Message, P: Program<Message>> {
-    width: Length,
-    height: Length,
-    program: P,
-    phantom: PhantomData<Message>,
-}
-
-impl<Message, P: Program<Message>> Canvas<Message, P> {
-    const DEFAULT_SIZE: u16 = 100;
-
-    /// Creates a new [`Canvas`].
-    ///
-    /// [`Canvas`]: struct.Canvas.html
-    pub fn new(program: P) -> Self {
-        Canvas {
-            width: Length::Units(Self::DEFAULT_SIZE),
-            height: Length::Units(Self::DEFAULT_SIZE),
-            program,
-            phantom: PhantomData,
-        }
-    }
-
-    /// Sets the width of the [`Canvas`].
-    ///
-    /// [`Canvas`]: struct.Canvas.html
-    pub fn width(mut self, width: Length) -> Self {
-        self.width = width;
-        self
-    }
-
-    /// Sets the height of the [`Canvas`].
-    ///
-    /// [`Canvas`]: struct.Canvas.html
-    pub fn height(mut self, height: Length) -> Self {
-        self.height = height;
-        self
-    }
-}
-
-impl<Message, P: Program<Message>> Widget<Message, Renderer>
-    for Canvas<Message, P>
-{
-    fn width(&self) -> Length {
-        self.width
-    }
-
-    fn height(&self) -> Length {
-        self.height
-    }
-
-    fn layout(
-        &self,
-        _renderer: &Renderer,
-        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,
-        event: iced_native::Event,
-        layout: Layout<'_>,
-        cursor_position: Point,
-        messages: &mut Vec<Message>,
-        _renderer: &Renderer,
-        _clipboard: Option<&dyn Clipboard>,
-    ) {
-        let bounds = layout.bounds();
-
-        let canvas_event = match event {
-            iced_native::Event::Mouse(mouse_event) => {
-                Some(Event::Mouse(mouse_event))
-            }
-            _ => None,
-        };
-
-        let cursor = Cursor::from_window_position(cursor_position);
-
-        if let Some(canvas_event) = canvas_event {
-            if let Some(message) =
-                self.program.update(canvas_event, bounds, cursor)
-            {
-                messages.push(message);
-            }
-        }
-    }
-
-    fn draw(
-        &self,
-        _renderer: &mut Renderer,
-        _defaults: &Defaults,
-        layout: Layout<'_>,
-        cursor_position: Point,
-    ) -> (Primitive, mouse::Interaction) {
-        let bounds = layout.bounds();
-        let translation = Vector::new(bounds.x, bounds.y);
-        let cursor = Cursor::from_window_position(cursor_position);
-
-        (
-            Primitive::Translate {
-                translation,
-                content: Box::new(Primitive::Group {
-                    primitives: self
-                        .program
-                        .draw(bounds, cursor)
-                        .into_iter()
-                        .map(Geometry::into_primitive)
-                        .collect(),
-                }),
-            },
-            self.program.mouse_interaction(bounds, cursor),
-        )
-    }
-
-    fn hash_layout(&self, state: &mut Hasher) {
-        struct Marker;
-        std::any::TypeId::of::<Marker>().hash(state);
-
-        self.width.hash(state);
-        self.height.hash(state);
-    }
-}
-
-impl<'a, Message, P: Program<Message> + 'a> From<Canvas<Message, P>>
-    for Element<'a, Message, Renderer>
-where
-    Message: 'static,
-{
-    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer> {
-        Element::new(canvas)
-    }
-}

wgpu/src/widget/checkbox.rs

@@ -1,7 +1,7 @@
 //! Show toggle controls using checkboxes.
 use crate::Renderer;
 
-pub use iced_style::checkbox::{Style, StyleSheet};
+pub use iced_graphics::checkbox::{Style, StyleSheet};
 
 /// A box that can be checked.
 ///

wgpu/src/widget/container.rs

@@ -1,7 +1,7 @@
 //! Decorate content and apply alignment.
 use crate::Renderer;
 
-pub use iced_style::container::{Style, StyleSheet};
+pub use iced_graphics::container::{Style, StyleSheet};
 
 /// An element decorating some content.
 ///

wgpu/src/widget/progress_bar.rs

@@ -6,7 +6,7 @@
 //! [`ProgressBar`]: type.ProgressBar.html
 use crate::Renderer;
 
-pub use iced_style::progress_bar::{Style, StyleSheet};
+pub use iced_graphics::progress_bar::{Style, StyleSheet};
 
 /// A bar that displays progress.
 ///

wgpu/src/widget/radio.rs

@@ -1,7 +1,7 @@
 //! Create choices using radio buttons.
 use crate::Renderer;
 
-pub use iced_style::radio::{Style, StyleSheet};
+pub use iced_graphics::radio::{Style, StyleSheet};
 
 /// A circular button representing a choice.
 ///

wgpu/src/widget/scrollable.rs

@@ -1,8 +1,8 @@
 //! Navigate an endless amount of content with a scrollbar.
 use crate::Renderer;
 
+pub use iced_graphics::scrollable::{Scrollbar, Scroller, StyleSheet};
 pub use iced_native::scrollable::State;
-pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
 
 /// A widget that can vertically display an infinite amount of content
 /// with a scrollbar.

wgpu/src/widget/slider.rs

@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
+pub use iced_graphics::slider::{Handle, HandleShape, Style, StyleSheet};
 pub use iced_native::slider::State;
-pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
 
 /// An horizontal bar and a handle that selects a single value from a range of
 /// values.

wgpu/src/widget/text_input.rs

@@ -6,8 +6,8 @@
 //! [`State`]: struct.State.html
 use crate::Renderer;
 
+pub use iced_graphics::text_input::{Style, StyleSheet};
 pub use iced_native::text_input::State;
-pub use iced_style::text_input::{Style, StyleSheet};
 
 /// A field that can be filled with text.
 ///

wgpu/src/window/backend.rs

@@ -51,7 +51,7 @@ impl iced_native::window::Backend for Backend {
     }
 
     fn create_renderer(&mut self, settings: Settings) -> Renderer {
-        Renderer::new(&mut self.device, settings)
+        Renderer::new(crate::Backend::new(&mut self.device, settings))
     }
 
     fn create_surface<W: HasRawWindowHandle>(
@@ -100,7 +100,7 @@ impl iced_native::window::Backend for Backend {
             depth_stencil_attachment: None,
         });
 
-        let mouse_interaction = renderer.draw(
+        let mouse_interaction = renderer.backend_mut().draw(
             &mut self.device,
             &mut encoder,
             Target {