diff options
Diffstat (limited to 'graphics/src/widget')
28 files changed, 2692 insertions, 0 deletions
| diff --git a/graphics/src/widget/button.rs b/graphics/src/widget/button.rs new file mode 100644 index 00000000..aeb862d5 --- /dev/null +++ b/graphics/src/widget/button.rs @@ -0,0 +1,113 @@ +//! 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::defaults::{self, Defaults}; +use crate::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::{ +    Background, Color, Element, Layout, Point, Rectangle, Vector, +}; + +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>>; + +impl<B> iced_native::button::Renderer for Renderer<B> +where +    B: Backend, +{ +    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() +            }, +        ) +    } +} diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs new file mode 100644 index 00000000..d393a5c5 --- /dev/null +++ b/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) +    } +} diff --git a/graphics/src/widget/canvas/cache.rs b/graphics/src/widget/canvas/cache.rs new file mode 100644 index 00000000..4b28d164 --- /dev/null +++ b/graphics/src/widget/canvas/cache.rs @@ -0,0 +1,108 @@ +use crate::{ +    canvas::{Frame, Geometry}, +    Primitive, +}; + +use iced_native::Size; +use std::{cell::RefCell, sync::Arc}; + +enum State { +    Empty, +    Filled { +        bounds: Size, +        primitive: Arc<Primitive>, +    }, +} + +impl Default for State { +    fn default() -> Self { +        State::Empty +    } +} +/// A simple cache that stores generated [`Geometry`] to avoid recomputation. +/// +/// A [`Cache`] will not redraw its geometry unless the dimensions of its layer +/// change or it is explicitly cleared. +/// +/// [`Layer`]: ../trait.Layer.html +/// [`Cache`]: struct.Cache.html +/// [`Geometry`]: struct.Geometry.html +#[derive(Debug, Default)] +pub struct Cache { +    state: RefCell<State>, +} + +impl Cache { +    /// Creates a new empty [`Cache`]. +    /// +    /// [`Cache`]: struct.Cache.html +    pub fn new() -> Self { +        Cache { +            state: Default::default(), +        } +    } + +    /// Clears the [`Cache`], forcing a redraw the next time it is used. +    /// +    /// [`Cache`]: struct.Cache.html +    pub fn clear(&mut self) { +        *self.state.borrow_mut() = State::Empty; +    } + +    /// Draws [`Geometry`] using the provided closure and stores it in the +    /// [`Cache`]. +    /// +    /// The closure will only be called when +    /// - the bounds have changed since the previous draw call. +    /// - the [`Cache`] is empty or has been explicitly cleared. +    /// +    /// Otherwise, the previously stored [`Geometry`] will be returned. The +    /// [`Cache`] is not cleared in this case. In other words, it will keep +    /// returning the stored [`Geometry`] if needed. +    /// +    /// [`Cache`]: struct.Cache.html +    pub fn draw(&self, bounds: Size, draw_fn: impl Fn(&mut Frame)) -> Geometry { +        use std::ops::Deref; + +        if let State::Filled { +            bounds: cached_bounds, +            primitive, +        } = self.state.borrow().deref() +        { +            if *cached_bounds == bounds { +                return Geometry::from_primitive(Primitive::Cached { +                    cache: primitive.clone(), +                }); +            } +        } + +        let mut frame = Frame::new(bounds); +        draw_fn(&mut frame); + +        let primitive = { +            let geometry = frame.into_geometry(); + +            Arc::new(geometry.into_primitive()) +        }; + +        *self.state.borrow_mut() = State::Filled { +            bounds, +            primitive: primitive.clone(), +        }; + +        Geometry::from_primitive(Primitive::Cached { cache: primitive }) +    } +} + +impl std::fmt::Debug for State { +    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { +        match self { +            State::Empty => write!(f, "Empty"), +            State::Filled { primitive, bounds } => f +                .debug_struct("Filled") +                .field("primitive", primitive) +                .field("bounds", bounds) +                .finish(), +        } +    } +} diff --git a/graphics/src/widget/canvas/cursor.rs b/graphics/src/widget/canvas/cursor.rs new file mode 100644 index 00000000..456760ea --- /dev/null +++ b/graphics/src/widget/canvas/cursor.rs @@ -0,0 +1,72 @@ +use iced_native::{Point, Rectangle}; + +/// The mouse cursor state. +#[derive(Debug, Clone, Copy, PartialEq)] +pub enum Cursor { +    /// The cursor has a defined position. +    Available(Point), + +    /// The cursor is currently unavailable (i.e. out of bounds or busy). +    Unavailable, +} + +impl Cursor { +    // TODO: Remove this once this type is used in `iced_native` to encode +    // proper cursor availability +    pub(crate) fn from_window_position(position: Point) -> Self { +        if position.x < 0.0 || position.y < 0.0 { +            Cursor::Unavailable +        } else { +            Cursor::Available(position) +        } +    } + +    /// Returns the absolute position of the [`Cursor`], if available. +    /// +    /// [`Cursor`]: enum.Cursor.html +    pub fn position(&self) -> Option<Point> { +        match self { +            Cursor::Available(position) => Some(*position), +            Cursor::Unavailable => None, +        } +    } + +    /// Returns the relative position of the [`Cursor`] inside the given bounds, +    /// if available. +    /// +    /// If the [`Cursor`] is not over the provided bounds, this method will +    /// return `None`. +    /// +    /// [`Cursor`]: enum.Cursor.html +    pub fn position_in(&self, bounds: &Rectangle) -> Option<Point> { +        if self.is_over(bounds) { +            self.position_from(bounds.position()) +        } else { +            None +        } +    } + +    /// Returns the relative position of the [`Cursor`] from the given origin, +    /// if available. +    /// +    /// [`Cursor`]: enum.Cursor.html +    pub fn position_from(&self, origin: Point) -> Option<Point> { +        match self { +            Cursor::Available(position) => { +                Some(Point::new(position.x - origin.x, position.y - origin.y)) +            } +            Cursor::Unavailable => None, +        } +    } + +    /// Returns whether the [`Cursor`] is currently over the provided bounds +    /// or not. +    /// +    /// [`Cursor`]: enum.Cursor.html +    pub fn is_over(&self, bounds: &Rectangle) -> bool { +        match self { +            Cursor::Available(position) => bounds.contains(*position), +            Cursor::Unavailable => false, +        } +    } +} diff --git a/graphics/src/widget/canvas/event.rs b/graphics/src/widget/canvas/event.rs new file mode 100644 index 00000000..ad11f51e --- /dev/null +++ b/graphics/src/widget/canvas/event.rs @@ -0,0 +1,10 @@ +use iced_native::mouse; + +/// A [`Canvas`] event. +/// +/// [`Canvas`]: struct.Event.html +#[derive(Debug, Clone, Copy, PartialEq)] +pub enum Event { +    /// A mouse event. +    Mouse(mouse::Event), +} diff --git a/graphics/src/widget/canvas/fill.rs b/graphics/src/widget/canvas/fill.rs new file mode 100644 index 00000000..a2010e45 --- /dev/null +++ b/graphics/src/widget/canvas/fill.rs @@ -0,0 +1,20 @@ +use iced_native::Color; + +/// The style used to fill geometry. +#[derive(Debug, Clone, Copy)] +pub enum Fill { +    /// Fill with a color. +    Color(Color), +} + +impl Default for Fill { +    fn default() -> Fill { +        Fill::Color(Color::BLACK) +    } +} + +impl From<Color> for Fill { +    fn from(color: Color) -> Fill { +        Fill::Color(color) +    } +} diff --git a/graphics/src/widget/canvas/frame.rs b/graphics/src/widget/canvas/frame.rs new file mode 100644 index 00000000..48d28d95 --- /dev/null +++ b/graphics/src/widget/canvas/frame.rs @@ -0,0 +1,367 @@ +use iced_native::{Point, Rectangle, Size, Vector}; + +use crate::{ +    canvas::{Fill, Geometry, Path, Stroke, Text}, +    triangle, Primitive, +}; + +/// The frame of a [`Canvas`]. +/// +/// [`Canvas`]: struct.Canvas.html +#[derive(Debug)] +pub struct Frame { +    size: Size, +    buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>, +    primitives: Vec<Primitive>, +    transforms: Transforms, +} + +#[derive(Debug)] +struct Transforms { +    previous: Vec<Transform>, +    current: Transform, +} + +#[derive(Debug, Clone, Copy)] +struct Transform { +    raw: lyon::math::Transform, +    is_identity: bool, +} + +impl Frame { +    /// Creates a new empty [`Frame`] with the given dimensions. +    /// +    /// The default coordinate system of a [`Frame`] has its origin at the +    /// top-left corner of its bounds. +    /// +    /// [`Frame`]: struct.Frame.html +    pub fn new(size: Size) -> Frame { +        Frame { +            size, +            buffers: lyon::tessellation::VertexBuffers::new(), +            primitives: Vec::new(), +            transforms: Transforms { +                previous: Vec::new(), +                current: Transform { +                    raw: lyon::math::Transform::identity(), +                    is_identity: true, +                }, +            }, +        } +    } + +    /// Returns the width of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn width(&self) -> f32 { +        self.size.width +    } + +    /// Returns the width of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn height(&self) -> f32 { +        self.size.height +    } + +    /// Returns the dimensions of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn size(&self) -> Size { +        self.size +    } + +    /// Returns the coordinate of the center of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn center(&self) -> Point { +        Point::new(self.size.width / 2.0, self.size.height / 2.0) +    } + +    /// Draws the given [`Path`] on the [`Frame`] by filling it with the +    /// provided style. +    /// +    /// [`Path`]: path/struct.Path.html +    /// [`Frame`]: struct.Frame.html +    pub fn fill(&mut self, path: &Path, fill: impl Into<Fill>) { +        use lyon::tessellation::{ +            BuffersBuilder, FillOptions, FillTessellator, +        }; + +        let mut buffers = BuffersBuilder::new( +            &mut self.buffers, +            FillVertex(match fill.into() { +                Fill::Color(color) => color.into_linear(), +            }), +        ); + +        let mut tessellator = FillTessellator::new(); + +        let result = if self.transforms.current.is_identity { +            tessellator.tessellate_path( +                path.raw(), +                &FillOptions::default(), +                &mut buffers, +            ) +        } else { +            let path = path.transformed(&self.transforms.current.raw); + +            tessellator.tessellate_path( +                path.raw(), +                &FillOptions::default(), +                &mut buffers, +            ) +        }; + +        let _ = result.expect("Tessellate path"); +    } + +    /// Draws an axis-aligned rectangle given its top-left corner coordinate and +    /// its `Size` on the [`Frame`] by filling it with the provided style. +    /// +    /// [`Frame`]: struct.Frame.html +    pub fn fill_rectangle( +        &mut self, +        top_left: Point, +        size: Size, +        fill: impl Into<Fill>, +    ) { +        use lyon::tessellation::{BuffersBuilder, FillOptions}; + +        let mut buffers = BuffersBuilder::new( +            &mut self.buffers, +            FillVertex(match fill.into() { +                Fill::Color(color) => color.into_linear(), +            }), +        ); + +        let top_left = +            self.transforms.current.raw.transform_point( +                lyon::math::Point::new(top_left.x, top_left.y), +            ); + +        let size = +            self.transforms.current.raw.transform_vector( +                lyon::math::Vector::new(size.width, size.height), +            ); + +        let _ = lyon::tessellation::basic_shapes::fill_rectangle( +            &lyon::math::Rect::new(top_left, size.into()), +            &FillOptions::default(), +            &mut buffers, +        ) +        .expect("Fill rectangle"); +    } + +    /// Draws the stroke of the given [`Path`] on the [`Frame`] with the +    /// provided style. +    /// +    /// [`Path`]: path/struct.Path.html +    /// [`Frame`]: struct.Frame.html +    pub fn stroke(&mut self, path: &Path, stroke: impl Into<Stroke>) { +        use lyon::tessellation::{ +            BuffersBuilder, StrokeOptions, StrokeTessellator, +        }; + +        let stroke = stroke.into(); + +        let mut buffers = BuffersBuilder::new( +            &mut self.buffers, +            StrokeVertex(stroke.color.into_linear()), +        ); + +        let mut tessellator = StrokeTessellator::new(); + +        let mut options = StrokeOptions::default(); +        options.line_width = stroke.width; +        options.start_cap = stroke.line_cap.into(); +        options.end_cap = stroke.line_cap.into(); +        options.line_join = stroke.line_join.into(); + +        let result = if self.transforms.current.is_identity { +            tessellator.tessellate_path(path.raw(), &options, &mut buffers) +        } else { +            let path = path.transformed(&self.transforms.current.raw); + +            tessellator.tessellate_path(path.raw(), &options, &mut buffers) +        }; + +        let _ = result.expect("Stroke path"); +    } + +    /// Draws the characters of the given [`Text`] on the [`Frame`], filling +    /// them with the given color. +    /// +    /// __Warning:__ Text currently does not work well with rotations and scale +    /// transforms! The position will be correctly transformed, but the +    /// resulting glyphs will not be rotated or scaled properly. +    /// +    /// Additionally, all text will be rendered on top of all the layers of +    /// a [`Canvas`]. Therefore, it is currently only meant to be used for +    /// overlays, which is the most common use case. +    /// +    /// Support for vectorial text is planned, and should address all these +    /// limitations. +    /// +    /// [`Text`]: struct.Text.html +    /// [`Frame`]: struct.Frame.html +    /// [`Canvas`]: struct.Canvas.html +    pub fn fill_text(&mut self, text: impl Into<Text>) { +        use std::f32; + +        let text = text.into(); + +        let position = if self.transforms.current.is_identity { +            text.position +        } else { +            let transformed = self.transforms.current.raw.transform_point( +                lyon::math::Point::new(text.position.x, text.position.y), +            ); + +            Point::new(transformed.x, transformed.y) +        }; + +        // TODO: Use vectorial text instead of primitive +        self.primitives.push(Primitive::Text { +            content: text.content, +            bounds: Rectangle { +                x: position.x, +                y: position.y, +                width: f32::INFINITY, +                height: f32::INFINITY, +            }, +            color: text.color, +            size: text.size, +            font: text.font, +            horizontal_alignment: text.horizontal_alignment, +            vertical_alignment: text.vertical_alignment, +        }); +    } + +    /// Stores the current transform of the [`Frame`] and executes the given +    /// drawing operations, restoring the transform afterwards. +    /// +    /// This method is useful to compose transforms and perform drawing +    /// operations in different coordinate systems. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn with_save(&mut self, f: impl FnOnce(&mut Frame)) { +        self.transforms.previous.push(self.transforms.current); + +        f(self); + +        self.transforms.current = self.transforms.previous.pop().unwrap(); +    } + +    /// Applies a translation to the current transform of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn translate(&mut self, translation: Vector) { +        self.transforms.current.raw = self +            .transforms +            .current +            .raw +            .pre_translate(lyon::math::Vector::new( +                translation.x, +                translation.y, +            )); +        self.transforms.current.is_identity = false; +    } + +    /// Applies a rotation to the current transform of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn rotate(&mut self, angle: f32) { +        self.transforms.current.raw = self +            .transforms +            .current +            .raw +            .pre_rotate(lyon::math::Angle::radians(-angle)); +        self.transforms.current.is_identity = false; +    } + +    /// Applies a scaling to the current transform of the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    #[inline] +    pub fn scale(&mut self, scale: f32) { +        self.transforms.current.raw = +            self.transforms.current.raw.pre_scale(scale, scale); +        self.transforms.current.is_identity = false; +    } + +    /// Produces the [`Geometry`] representing everything drawn on the [`Frame`]. +    /// +    /// [`Frame`]: struct.Frame.html +    /// [`Geometry`]: struct.Geometry.html +    pub fn into_geometry(mut self) -> Geometry { +        if !self.buffers.indices.is_empty() { +            self.primitives.push(Primitive::Mesh2D { +                buffers: triangle::Mesh2D { +                    vertices: self.buffers.vertices, +                    indices: self.buffers.indices, +                }, +                size: self.size, +            }); +        } + +        Geometry::from_primitive(Primitive::Group { +            primitives: self.primitives, +        }) +    } +} + +struct FillVertex([f32; 4]); + +impl lyon::tessellation::BasicVertexConstructor<triangle::Vertex2D> +    for FillVertex +{ +    fn new_vertex( +        &mut self, +        position: lyon::math::Point, +    ) -> triangle::Vertex2D { +        triangle::Vertex2D { +            position: [position.x, position.y], +            color: self.0, +        } +    } +} + +impl lyon::tessellation::FillVertexConstructor<triangle::Vertex2D> +    for FillVertex +{ +    fn new_vertex( +        &mut self, +        position: lyon::math::Point, +        _attributes: lyon::tessellation::FillAttributes<'_>, +    ) -> triangle::Vertex2D { +        triangle::Vertex2D { +            position: [position.x, position.y], +            color: self.0, +        } +    } +} + +struct StrokeVertex([f32; 4]); + +impl lyon::tessellation::StrokeVertexConstructor<triangle::Vertex2D> +    for StrokeVertex +{ +    fn new_vertex( +        &mut self, +        position: lyon::math::Point, +        _attributes: lyon::tessellation::StrokeAttributes<'_, '_>, +    ) -> triangle::Vertex2D { +        triangle::Vertex2D { +            position: [position.x, position.y], +            color: self.0, +        } +    } +} diff --git a/graphics/src/widget/canvas/geometry.rs b/graphics/src/widget/canvas/geometry.rs new file mode 100644 index 00000000..4cadee39 --- /dev/null +++ b/graphics/src/widget/canvas/geometry.rs @@ -0,0 +1,34 @@ +use crate::Primitive; + +/// A bunch of shapes that can be drawn. +/// +/// [`Geometry`] can be easily generated with a [`Frame`] or stored in a +/// [`Cache`]. +/// +/// [`Geometry`]: struct.Geometry.html +/// [`Frame`]: struct.Frame.html +/// [`Cache`]: struct.Cache.html +#[derive(Debug, Clone)] +pub struct Geometry(Primitive); + +impl Geometry { +    pub(crate) fn from_primitive(primitive: Primitive) -> Self { +        Self(primitive) +    } + +    /// Turns the [`Geometry`] into a [`Primitive`]. +    /// +    /// This can be useful if you are building a custom widget. +    /// +    /// [`Geometry`]: struct.Geometry.html +    /// [`Primitive`]: ../enum.Primitive.html +    pub fn into_primitive(self) -> Primitive { +        self.0 +    } +} + +impl From<Geometry> for Primitive { +    fn from(geometry: Geometry) -> Primitive { +        geometry.0 +    } +} diff --git a/graphics/src/widget/canvas/path.rs b/graphics/src/widget/canvas/path.rs new file mode 100644 index 00000000..c26bf187 --- /dev/null +++ b/graphics/src/widget/canvas/path.rs @@ -0,0 +1,79 @@ +//! Build different kinds of 2D shapes. +pub mod arc; + +mod builder; + +#[doc(no_inline)] +pub use arc::Arc; +pub use builder::Builder; + +use iced_native::{Point, Size}; + +/// An immutable set of points that may or may not be connected. +/// +/// A single [`Path`] can represent different kinds of 2D shapes! +/// +/// [`Path`]: struct.Path.html +#[derive(Debug, Clone)] +pub struct Path { +    raw: lyon::path::Path, +} + +impl Path { +    /// Creates a new [`Path`] with the provided closure. +    /// +    /// Use the [`Builder`] to configure your [`Path`]. +    /// +    /// [`Path`]: struct.Path.html +    /// [`Builder`]: struct.Builder.html +    pub fn new(f: impl FnOnce(&mut Builder)) -> Self { +        let mut builder = Builder::new(); + +        // TODO: Make it pure instead of side-effect-based (?) +        f(&mut builder); + +        builder.build() +    } + +    /// Creates a new [`Path`] representing a line segment given its starting +    /// and end points. +    /// +    /// [`Path`]: struct.Path.html +    pub fn line(from: Point, to: Point) -> Self { +        Self::new(|p| { +            p.move_to(from); +            p.line_to(to); +        }) +    } + +    /// Creates a new [`Path`] representing a rectangle given its top-left +    /// corner coordinate and its `Size`. +    /// +    /// [`Path`]: struct.Path.html +    pub fn rectangle(top_left: Point, size: Size) -> Self { +        Self::new(|p| p.rectangle(top_left, size)) +    } + +    /// Creates a new [`Path`] representing a circle given its center +    /// coordinate and its radius. +    /// +    /// [`Path`]: struct.Path.html +    pub fn circle(center: Point, radius: f32) -> Self { +        Self::new(|p| p.circle(center, radius)) +    } + +    #[inline] +    pub(crate) fn raw(&self) -> &lyon::path::Path { +        &self.raw +    } + +    #[inline] +    pub(crate) fn transformed( +        &self, +        transform: &lyon::math::Transform, +    ) -> Path { +        Path { +            raw: self.raw.transformed(transform), +        } +    } +} diff --git a/graphics/src/widget/canvas/path/arc.rs b/graphics/src/widget/canvas/path/arc.rs new file mode 100644 index 00000000..343191f1 --- /dev/null +++ b/graphics/src/widget/canvas/path/arc.rs @@ -0,0 +1,44 @@ +//! Build and draw curves. +use iced_native::{Point, Vector}; + +/// A segment of a differentiable curve. +#[derive(Debug, Clone, Copy)] +pub struct Arc { +    /// The center of the arc. +    pub center: Point, +    /// The radius of the arc. +    pub radius: f32, +    /// The start of the segment's angle, clockwise rotation. +    pub start_angle: f32, +    /// The end of the segment's angle, clockwise rotation. +    pub end_angle: f32, +} + +/// An elliptical [`Arc`]. +/// +/// [`Arc`]: struct.Arc.html +#[derive(Debug, Clone, Copy)] +pub struct Elliptical { +    /// The center of the arc. +    pub center: Point, +    /// The radii of the arc's ellipse, defining its axes. +    pub radii: Vector, +    /// The rotation of the arc's ellipse. +    pub rotation: f32, +    /// The start of the segment's angle, clockwise rotation. +    pub start_angle: f32, +    /// The end of the segment's angle, clockwise rotation. +    pub end_angle: f32, +} + +impl From<Arc> for Elliptical { +    fn from(arc: Arc) -> Elliptical { +        Elliptical { +            center: arc.center, +            radii: Vector::new(arc.radius, arc.radius), +            rotation: 0.0, +            start_angle: arc.start_angle, +            end_angle: arc.end_angle, +        } +    } +} diff --git a/graphics/src/widget/canvas/path/builder.rs b/graphics/src/widget/canvas/path/builder.rs new file mode 100644 index 00000000..6511fa52 --- /dev/null +++ b/graphics/src/widget/canvas/path/builder.rs @@ -0,0 +1,180 @@ +use crate::canvas::path::{arc, Arc, Path}; + +use iced_native::{Point, Size}; +use lyon::path::builder::{Build, FlatPathBuilder, PathBuilder, SvgBuilder}; + +/// A [`Path`] builder. +/// +/// Once a [`Path`] is built, it can no longer be mutated. +/// +/// [`Path`]: struct.Path.html +#[allow(missing_debug_implementations)] +pub struct Builder { +    raw: lyon::path::builder::SvgPathBuilder<lyon::path::Builder>, +} + +impl Builder { +    /// Creates a new [`Builder`]. +    /// +    /// [`Builder`]: struct.Builder.html +    pub fn new() -> Builder { +        Builder { +            raw: lyon::path::Path::builder().with_svg(), +        } +    } + +    /// Moves the starting point of a new sub-path to the given `Point`. +    #[inline] +    pub fn move_to(&mut self, point: Point) { +        let _ = self.raw.move_to(lyon::math::Point::new(point.x, point.y)); +    } + +    /// Connects the last point in the [`Path`] to the given `Point` with a +    /// straight line. +    /// +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn line_to(&mut self, point: Point) { +        let _ = self.raw.line_to(lyon::math::Point::new(point.x, point.y)); +    } + +    /// Adds an [`Arc`] to the [`Path`] from `start_angle` to `end_angle` in +    /// a clockwise direction. +    /// +    /// [`Arc`]: struct.Arc.html +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn arc(&mut self, arc: Arc) { +        self.ellipse(arc.into()); +    } + +    /// Adds a circular arc to the [`Path`] with the given control points and +    /// radius. +    /// +    /// The arc is connected to the previous point by a straight line, if +    /// necessary. +    /// +    /// [`Path`]: struct.Path.html +    pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) { +        use lyon::{math, path}; + +        let a = math::Point::new(a.x, a.y); + +        if self.raw.current_position() != a { +            let _ = self.raw.line_to(a); +        } + +        let _ = self.raw.arc_to( +            math::Vector::new(radius, radius), +            math::Angle::radians(0.0), +            path::ArcFlags::default(), +            math::Point::new(b.x, b.y), +        ); +    } + +    /// Adds an [`Ellipse`] to the [`Path`] using a clockwise direction. +    /// +    /// [`Ellipse`]: struct.Arc.html +    /// [`Path`]: struct.Path.html +    pub fn ellipse(&mut self, arc: arc::Elliptical) { +        use lyon::{geom, math}; + +        let arc = geom::Arc { +            center: math::Point::new(arc.center.x, arc.center.y), +            radii: math::Vector::new(arc.radii.x, arc.radii.y), +            x_rotation: math::Angle::radians(arc.rotation), +            start_angle: math::Angle::radians(arc.start_angle), +            sweep_angle: math::Angle::radians(arc.end_angle), +        }; + +        let _ = self.raw.move_to(arc.sample(0.0)); + +        arc.for_each_quadratic_bezier(&mut |curve| { +            let _ = self.raw.quadratic_bezier_to(curve.ctrl, curve.to); +        }); +    } + +    /// Adds a cubic Bézier curve to the [`Path`] given its two control points +    /// and its end point. +    /// +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn bezier_curve_to( +        &mut self, +        control_a: Point, +        control_b: Point, +        to: Point, +    ) { +        use lyon::math; + +        let _ = self.raw.cubic_bezier_to( +            math::Point::new(control_a.x, control_a.y), +            math::Point::new(control_b.x, control_b.y), +            math::Point::new(to.x, to.y), +        ); +    } + +    /// Adds a quadratic Bézier curve to the [`Path`] given its control point +    /// and its end point. +    /// +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn quadratic_curve_to(&mut self, control: Point, to: Point) { +        use lyon::math; + +        let _ = self.raw.quadratic_bezier_to( +            math::Point::new(control.x, control.y), +            math::Point::new(to.x, to.y), +        ); +    } + +    /// Adds a rectangle to the [`Path`] given its top-left corner coordinate +    /// and its `Size`. +    /// +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn rectangle(&mut self, top_left: Point, size: Size) { +        self.move_to(top_left); +        self.line_to(Point::new(top_left.x + size.width, top_left.y)); +        self.line_to(Point::new( +            top_left.x + size.width, +            top_left.y + size.height, +        )); +        self.line_to(Point::new(top_left.x, top_left.y + size.height)); +        self.close(); +    } + +    /// Adds a circle to the [`Path`] given its center coordinate and its +    /// radius. +    /// +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn circle(&mut self, center: Point, radius: f32) { +        self.arc(Arc { +            center, +            radius, +            start_angle: 0.0, +            end_angle: 2.0 * std::f32::consts::PI, +        }); +    } + +    /// Closes the current sub-path in the [`Path`] with a straight line to +    /// the starting point. +    /// +    /// [`Path`]: struct.Path.html +    #[inline] +    pub fn close(&mut self) { +        self.raw.close() +    } + +    /// Builds the [`Path`] of this [`Builder`]. +    /// +    /// [`Path`]: struct.Path.html +    /// [`Builder`]: struct.Builder.html +    #[inline] +    pub fn build(self) -> Path { +        Path { +            raw: self.raw.build(), +        } +    } +} diff --git a/graphics/src/widget/canvas/program.rs b/graphics/src/widget/canvas/program.rs new file mode 100644 index 00000000..725d9d72 --- /dev/null +++ b/graphics/src/widget/canvas/program.rs @@ -0,0 +1,85 @@ +use crate::canvas::{Cursor, Event, Geometry}; +use iced_native::{mouse, Rectangle}; + +/// The state and logic of a [`Canvas`]. +/// +/// A [`Program`] can mutate internal state and produce messages for an +/// application. +/// +/// [`Canvas`]: struct.Canvas.html +/// [`Program`]: trait.Program.html +pub trait Program<Message> { +    /// Updates the state of the [`Program`]. +    /// +    /// When a [`Program`] is used in a [`Canvas`], the runtime will call this +    /// method for each [`Event`]. +    /// +    /// This method can optionally return a `Message` to notify an application +    /// of any meaningful interactions. +    /// +    /// By default, this method does and returns nothing. +    /// +    /// [`Program`]: trait.Program.html +    /// [`Canvas`]: struct.Canvas.html +    /// [`Event`]: enum.Event.html +    fn update( +        &mut self, +        _event: Event, +        _bounds: Rectangle, +        _cursor: Cursor, +    ) -> Option<Message> { +        None +    } + +    /// Draws the state of the [`Program`], producing a bunch of [`Geometry`]. +    /// +    /// [`Geometry`] can be easily generated with a [`Frame`] or stored in a +    /// [`Cache`]. +    /// +    /// [`Program`]: trait.Program.html +    /// [`Geometry`]: struct.Geometry.html +    /// [`Frame`]: struct.Frame.html +    /// [`Cache`]: struct.Cache.html +    fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry>; + +    /// Returns the current mouse interaction of the [`Program`]. +    /// +    /// The interaction returned will be in effect even if the cursor position +    /// is out of bounds of the program's [`Canvas`]. +    /// +    /// [`Program`]: trait.Program.html +    /// [`Canvas`]: struct.Canvas.html +    fn mouse_interaction( +        &self, +        _bounds: Rectangle, +        _cursor: Cursor, +    ) -> mouse::Interaction { +        mouse::Interaction::default() +    } +} + +impl<T, Message> Program<Message> for &mut T +where +    T: Program<Message>, +{ +    fn update( +        &mut self, +        event: Event, +        bounds: Rectangle, +        cursor: Cursor, +    ) -> Option<Message> { +        T::update(self, event, bounds, cursor) +    } + +    fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> { +        T::draw(self, bounds, cursor) +    } + +    fn mouse_interaction( +        &self, +        bounds: Rectangle, +        cursor: Cursor, +    ) -> mouse::Interaction { +        T::mouse_interaction(self, bounds, cursor) +    } +} diff --git a/graphics/src/widget/canvas/stroke.rs b/graphics/src/widget/canvas/stroke.rs new file mode 100644 index 00000000..5b6fc56a --- /dev/null +++ b/graphics/src/widget/canvas/stroke.rs @@ -0,0 +1,115 @@ +use iced_native::Color; + +/// The style of a stroke. +#[derive(Debug, Clone, Copy)] +pub struct Stroke { +    /// The color of the stroke. +    pub color: Color, +    /// The distance between the two edges of the stroke. +    pub width: f32, +    /// The shape to be used at the end of open subpaths when they are stroked. +    pub line_cap: LineCap, +    /// The shape to be used at the corners of paths or basic shapes when they +    /// are stroked. +    pub line_join: LineJoin, +} + +impl Stroke { +    /// Sets the color of the [`Stroke`]. +    /// +    /// [`Stroke`]: struct.Stroke.html +    pub fn with_color(self, color: Color) -> Stroke { +        Stroke { color, ..self } +    } + +    /// Sets the width of the [`Stroke`]. +    /// +    /// [`Stroke`]: struct.Stroke.html +    pub fn with_width(self, width: f32) -> Stroke { +        Stroke { width, ..self } +    } + +    /// Sets the [`LineCap`] of the [`Stroke`]. +    /// +    /// [`LineCap`]: enum.LineCap.html +    /// [`Stroke`]: struct.Stroke.html +    pub fn with_line_cap(self, line_cap: LineCap) -> Stroke { +        Stroke { line_cap, ..self } +    } + +    /// Sets the [`LineJoin`] of the [`Stroke`]. +    /// +    /// [`LineJoin`]: enum.LineJoin.html +    /// [`Stroke`]: struct.Stroke.html +    pub fn with_line_join(self, line_join: LineJoin) -> Stroke { +        Stroke { line_join, ..self } +    } +} + +impl Default for Stroke { +    fn default() -> Stroke { +        Stroke { +            color: Color::BLACK, +            width: 1.0, +            line_cap: LineCap::default(), +            line_join: LineJoin::default(), +        } +    } +} + +/// The shape used at the end of open subpaths when they are stroked. +#[derive(Debug, Clone, Copy)] +pub enum LineCap { +    /// The stroke for each sub-path does not extend beyond its two endpoints. +    Butt, +    /// At the end of each sub-path, the shape representing the stroke will be +    /// extended by a square. +    Square, +    /// At the end of each sub-path, the shape representing the stroke will be +    /// extended by a semicircle. +    Round, +} + +impl Default for LineCap { +    fn default() -> LineCap { +        LineCap::Butt +    } +} + +impl From<LineCap> for lyon::tessellation::LineCap { +    fn from(line_cap: LineCap) -> lyon::tessellation::LineCap { +        match line_cap { +            LineCap::Butt => lyon::tessellation::LineCap::Butt, +            LineCap::Square => lyon::tessellation::LineCap::Square, +            LineCap::Round => lyon::tessellation::LineCap::Round, +        } +    } +} + +/// The shape used at the corners of paths or basic shapes when they are +/// stroked. +#[derive(Debug, Clone, Copy)] +pub enum LineJoin { +    /// A sharp corner. +    Miter, +    /// A round corner. +    Round, +    /// A bevelled corner. +    Bevel, +} + +impl Default for LineJoin { +    fn default() -> LineJoin { +        LineJoin::Miter +    } +} + +impl From<LineJoin> for lyon::tessellation::LineJoin { +    fn from(line_join: LineJoin) -> lyon::tessellation::LineJoin { +        match line_join { +            LineJoin::Miter => lyon::tessellation::LineJoin::Miter, +            LineJoin::Round => lyon::tessellation::LineJoin::Round, +            LineJoin::Bevel => lyon::tessellation::LineJoin::Bevel, +        } +    } +} diff --git a/graphics/src/widget/canvas/text.rs b/graphics/src/widget/canvas/text.rs new file mode 100644 index 00000000..c4cae30e --- /dev/null +++ b/graphics/src/widget/canvas/text.rs @@ -0,0 +1,49 @@ +use iced_native::{Color, Font, HorizontalAlignment, Point, VerticalAlignment}; + +/// A bunch of text that can be drawn to a canvas +#[derive(Debug, Clone)] +pub struct Text { +    /// The contents of the text +    pub content: String, +    /// The position where to begin drawing the text (top-left corner coordinates) +    pub position: Point, +    /// The color of the text +    pub color: Color, +    /// The size of the text +    pub size: f32, +    /// The font of the text +    pub font: Font, +    /// The horizontal alignment of the text +    pub horizontal_alignment: HorizontalAlignment, +    /// The vertical alignment of the text +    pub vertical_alignment: VerticalAlignment, +} + +impl Default for Text { +    fn default() -> Text { +        Text { +            content: String::new(), +            position: Point::ORIGIN, +            color: Color::BLACK, +            size: 16.0, +            font: Font::Default, +            horizontal_alignment: HorizontalAlignment::Left, +            vertical_alignment: VerticalAlignment::Top, +        } +    } +} + +impl From<String> for Text { +    fn from(content: String) -> Text { +        Text { +            content, +            ..Default::default() +        } +    } +} + +impl From<&str> for Text { +    fn from(content: &str) -> Text { +        String::from(content).into() +    } +} diff --git a/graphics/src/widget/checkbox.rs b/graphics/src/widget/checkbox.rs new file mode 100644 index 00000000..cb7fd2cf --- /dev/null +++ b/graphics/src/widget/checkbox.rs @@ -0,0 +1,76 @@ +//! Show toggle controls using checkboxes. +use crate::backend::{self, Backend}; +use crate::{Primitive, Renderer}; +use iced_native::checkbox; +use iced_native::mouse; +use iced_native::{HorizontalAlignment, Rectangle, VerticalAlignment}; + +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>>; + +impl<B> checkbox::Renderer for Renderer<B> +where +    B: Backend + backend::Text, +{ +    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: B::CHECKMARK_ICON.to_string(), +                        font: B::ICON_FONT, +                        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() +            }, +        ) +    } +} diff --git a/graphics/src/widget/column.rs b/graphics/src/widget/column.rs new file mode 100644 index 00000000..6c7235c7 --- /dev/null +++ b/graphics/src/widget/column.rs @@ -0,0 +1,43 @@ +use crate::{Backend, Primitive, Renderer}; +use iced_native::column; +use iced_native::mouse; +use iced_native::{Element, Layout, Point}; + +/// A container that distributes its contents vertically. +pub type Column<'a, Message, Backend> = +    iced_native::Column<'a, Message, Renderer<Backend>>; + +impl<B> column::Renderer for Renderer<B> +where +    B: Backend, +{ +    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, +        ) +    } +} diff --git a/graphics/src/widget/container.rs b/graphics/src/widget/container.rs new file mode 100644 index 00000000..070cb48b --- /dev/null +++ b/graphics/src/widget/container.rs @@ -0,0 +1,63 @@ +//! Decorate content and apply alignment. +use crate::container; +use crate::defaults::{self, Defaults}; +use crate::{Backend, Primitive, Renderer}; +use iced_native::{Background, Color, Element, Layout, Point, Rectangle}; + +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>>; + +impl<B> iced_native::container::Renderer for Renderer<B> +where +    B: Backend, +{ +    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) +        } +    } +} diff --git a/graphics/src/widget/image.rs b/graphics/src/widget/image.rs new file mode 100644 index 00000000..30f446e8 --- /dev/null +++ b/graphics/src/widget/image.rs @@ -0,0 +1,31 @@ +//! Display images in your user interface. +use crate::backend::{self, Backend}; +use crate::{Primitive, Renderer}; +use iced_native::image; +use iced_native::mouse; +use iced_native::Layout; + +pub use iced_native::image::{Handle, Image}; + +impl<B> image::Renderer for Renderer<B> +where +    B: Backend + backend::Image, +{ +    fn dimensions(&self, handle: &image::Handle) -> (u32, u32) { +        self.backend().dimensions(handle) +    } + +    fn draw( +        &mut self, +        handle: image::Handle, +        layout: Layout<'_>, +    ) -> Self::Output { +        ( +            Primitive::Image { +                handle, +                bounds: layout.bounds(), +            }, +            mouse::Interaction::default(), +        ) +    } +} diff --git a/graphics/src/widget/pane_grid.rs b/graphics/src/widget/pane_grid.rs new file mode 100644 index 00000000..56af683d --- /dev/null +++ b/graphics/src/widget/pane_grid.rs @@ -0,0 +1,118 @@ +//! Let your users split regions of your application and organize layout dynamically. +//! +//! [](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::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::pane_grid; +use iced_native::{Element, Layout, Point, Rectangle, Vector}; + +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. +/// +/// [](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>>; + +impl<B> pane_grid::Renderer for Renderer<B> +where +    B: Backend, +{ +    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 +            }, +        ) +    } +} diff --git a/graphics/src/widget/progress_bar.rs b/graphics/src/widget/progress_bar.rs new file mode 100644 index 00000000..48acb3c1 --- /dev/null +++ b/graphics/src/widget/progress_bar.rs @@ -0,0 +1,73 @@ +//! 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::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::progress_bar; +use iced_native::{Color, Rectangle}; + +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>>; + +impl<B> progress_bar::Renderer for Renderer<B> +where +    B: Backend, +{ +    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(), +        ) +    } +} diff --git a/graphics/src/widget/radio.rs b/graphics/src/widget/radio.rs new file mode 100644 index 00000000..dd8b5f17 --- /dev/null +++ b/graphics/src/widget/radio.rs @@ -0,0 +1,78 @@ +//! Create choices using radio buttons. +use crate::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::radio; +use iced_native::{Background, Color, Rectangle}; + +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>>; + +const SIZE: f32 = 28.0; +const DOT_SIZE: f32 = SIZE / 2.0; + +impl<B> radio::Renderer for Renderer<B> +where +    B: Backend, +{ +    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() +            }, +        ) +    } +} diff --git a/graphics/src/widget/row.rs b/graphics/src/widget/row.rs new file mode 100644 index 00000000..4c1dbadc --- /dev/null +++ b/graphics/src/widget/row.rs @@ -0,0 +1,43 @@ +use crate::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::row; +use iced_native::{Element, Layout, Point}; + +/// A container that distributes its contents horizontally. +pub type Row<'a, Message, Backend> = +    iced_native::Row<'a, Message, Renderer<Backend>>; + +impl<B> row::Renderer for Renderer<B> +where +    B: Backend, +{ +    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, +        ) +    } +} diff --git a/graphics/src/widget/scrollable.rs b/graphics/src/widget/scrollable.rs new file mode 100644 index 00000000..b149db0a --- /dev/null +++ b/graphics/src/widget/scrollable.rs @@ -0,0 +1,142 @@ +//! Navigate an endless amount of content with a scrollbar. +use crate::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::scrollable; +use iced_native::{Background, Color, Rectangle, Vector}; + +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>>; + +const SCROLLBAR_WIDTH: u16 = 10; +const SCROLLBAR_MARGIN: u16 = 2; + +impl<B> scrollable::Renderer for Renderer<B> +where +    B: Backend, +{ +    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 +            }, +        ) +    } +} diff --git a/graphics/src/widget/slider.rs b/graphics/src/widget/slider.rs new file mode 100644 index 00000000..b00cde9a --- /dev/null +++ b/graphics/src/widget/slider.rs @@ -0,0 +1,124 @@ +//! 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::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::slider; +use iced_native::{Background, Color, Point, Rectangle}; + +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>>; + +const HANDLE_HEIGHT: f32 = 22.0; + +impl<B> slider::Renderer for Renderer<B> +where +    B: Backend, +{ +    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() +            }, +        ) +    } +} diff --git a/graphics/src/widget/space.rs b/graphics/src/widget/space.rs new file mode 100644 index 00000000..1f31eabe --- /dev/null +++ b/graphics/src/widget/space.rs @@ -0,0 +1,15 @@ +use crate::{Backend, Primitive, Renderer}; +use iced_native::mouse; +use iced_native::space; +use iced_native::Rectangle; + +pub use iced_native::Space; + +impl<B> space::Renderer for Renderer<B> +where +    B: Backend, +{ +    fn draw(&mut self, _bounds: Rectangle) -> Self::Output { +        (Primitive::None, mouse::Interaction::default()) +    } +} diff --git a/graphics/src/widget/svg.rs b/graphics/src/widget/svg.rs new file mode 100644 index 00000000..8b5ed66a --- /dev/null +++ b/graphics/src/widget/svg.rs @@ -0,0 +1,29 @@ +//! Display vector graphics in your application. +use crate::backend::{self, Backend}; +use crate::{Primitive, Renderer}; +use iced_native::{mouse, svg, Layout}; + +pub use iced_native::svg::{Handle, Svg}; + +impl<B> svg::Renderer for Renderer<B> +where +    B: Backend + backend::Svg, +{ +    fn dimensions(&self, handle: &svg::Handle) -> (u32, u32) { +        self.backend().viewport_dimensions(handle) +    } + +    fn draw( +        &mut self, +        handle: svg::Handle, +        layout: Layout<'_>, +    ) -> Self::Output { +        ( +            Primitive::Svg { +                handle, +                bounds: layout.bounds(), +            }, +            mouse::Interaction::default(), +        ) +    } +} diff --git a/graphics/src/widget/text.rs b/graphics/src/widget/text.rs new file mode 100644 index 00000000..327f8e29 --- /dev/null +++ b/graphics/src/widget/text.rs @@ -0,0 +1,72 @@ +//! Write some text for your users to read. +use crate::backend::{self, Backend}; +use crate::{Primitive, Renderer}; +use iced_native::mouse; +use iced_native::text; +use iced_native::{ +    Color, Font, HorizontalAlignment, Rectangle, Size, VerticalAlignment, +}; + +/// 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>>; + +use std::f32; + +impl<B> text::Renderer for Renderer<B> +where +    B: Backend + backend::Text, +{ +    type Font = Font; + +    const DEFAULT_SIZE: u16 = 20; + +    fn measure( +        &self, +        content: &str, +        size: u16, +        font: Font, +        bounds: Size, +    ) -> (f32, f32) { +        self.backend() +            .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(), +        ) +    } +} diff --git a/graphics/src/widget/text_input.rs b/graphics/src/widget/text_input.rs new file mode 100644 index 00000000..893197d1 --- /dev/null +++ b/graphics/src/widget/text_input.rs @@ -0,0 +1,273 @@ +//! Display fields that can be filled with text. +//! +//! A [`TextInput`] has some local [`State`]. +//! +//! [`TextInput`]: struct.TextInput.html +//! [`State`]: struct.State.html +use crate::backend::{self, Backend}; +use crate::{Primitive, Renderer}; +use iced_native::mouse; +use iced_native::text_input::{self, cursor}; +use iced_native::{ +    Background, Color, Font, HorizontalAlignment, Point, Rectangle, Size, +    Vector, VerticalAlignment, +}; +use std::f32; + +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>>; + +impl<B> text_input::Renderer for Renderer<B> +where +    B: Backend + backend::Text, +{ +    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 backend = self.backend(); + +        let (width, _) = +            backend.measure(value, f32::from(size), font, Size::INFINITY); + +        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<B>( +    renderer: &Renderer<B>, +    text_bounds: Rectangle, +    value: &text_input::Value, +    size: u16, +    cursor_index: usize, +    font: Font, +) -> (f32, f32) +where +    B: Backend + backend::Text, +{ +    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) +} | 
