Add `custom_quad` example

Thanks to @rksm :bow:

2 files changed, 169 insertions, 0 deletions

diff --git a/examples/custom_quad/Cargo.toml b/examples/custom_quad/Cargo.toml
new file mode 100644
index 00000000..39154786
--- /dev/null
+++ b/examples/custom_quad/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "custom_quad"
+version = "0.1.0"
+authors = ["Robert Krahn"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../.." }
+iced_native = { path = "../../native" }
diff --git a/examples/custom_quad/src/main.rs b/examples/custom_quad/src/main.rs
new file mode 100644
index 00000000..2a5fe798
--- /dev/null
+++ b/examples/custom_quad/src/main.rs
@@ -0,0 +1,159 @@
+//! This example showcases a drawing a quad.
+mod quad {
+    use iced_native::layout::{self, Layout};
+    use iced_native::renderer;
+    use iced_native::widget::{self, Widget};
+    use iced_native::{Color, Element, Length, Point, Rectangle, Size};
+
+    pub struct CustomQuad {
+        size: f32,
+        radius: [f32; 4],
+        border_width: f32,
+    }
+
+    impl CustomQuad {
+        pub fn new(size: f32, radius: [f32; 4], border_width: f32) -> Self {
+            Self {
+                size,
+                radius,
+                border_width,
+            }
+        }
+    }
+
+    impl<Message, Renderer> Widget<Message, Renderer> for CustomQuad
+    where
+        Renderer: renderer::Renderer,
+    {
+        fn width(&self) -> Length {
+            Length::Shrink
+        }
+
+        fn height(&self) -> Length {
+            Length::Shrink
+        }
+
+        fn layout(
+            &self,
+            _renderer: &Renderer,
+            _limits: &layout::Limits,
+        ) -> layout::Node {
+            layout::Node::new(Size::new(self.size, self.size))
+        }
+
+        fn draw(
+            &self,
+            _state: &widget::Tree,
+            renderer: &mut Renderer,
+            _theme: &Renderer::Theme,
+            _style: &renderer::Style,
+            layout: Layout<'_>,
+            _cursor_position: Point,
+            _viewport: &Rectangle,
+        ) {
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds: layout.bounds(),
+                    border_radius: self.radius.into(),
+                    border_width: self.border_width,
+                    border_color: Color::from_rgb(1.0, 0.0, 0.0),
+                },
+                Color::BLACK,
+            );
+        }
+    }
+
+    impl<'a, Message, Renderer> From<CustomQuad> for Element<'a, Message, Renderer>
+    where
+        Renderer: renderer::Renderer,
+    {
+        fn from(circle: CustomQuad) -> Self {
+            Self::new(circle)
+        }
+    }
+}
+
+use iced::widget::{column, container, slider, text};
+use iced::{Alignment, Element, Length, Sandbox, Settings};
+
+pub fn main() -> iced::Result {
+    Example::run(Settings::default())
+}
+
+struct Example {
+    radius: [f32; 4],
+    border_width: f32,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    RadiusTopLeftChanged(f32),
+    RadiusTopRightChanged(f32),
+    RadiusBottomRightChanged(f32),
+    RadiusBottomLeftChanged(f32),
+    BorderWidthChanged(f32),
+}
+
+impl Sandbox for Example {
+    type Message = Message;
+
+    fn new() -> Self {
+        Self {
+            radius: [50.0; 4],
+            border_width: 0.0,
+        }
+    }
+
+    fn title(&self) -> String {
+        String::from("Custom widget - Iced")
+    }
+
+    fn update(&mut self, message: Message) {
+        let [tl, tr, br, bl] = self.radius;
+        match message {
+            Message::RadiusTopLeftChanged(radius) => {
+                self.radius = [radius, tr, br, bl];
+            }
+            Message::RadiusTopRightChanged(radius) => {
+                self.radius = [tl, radius, br, bl];
+            }
+            Message::RadiusBottomRightChanged(radius) => {
+                self.radius = [tl, tr, radius, bl];
+            }
+            Message::RadiusBottomLeftChanged(radius) => {
+                self.radius = [tl, tr, br, radius];
+            }
+            Message::BorderWidthChanged(width) => {
+                self.border_width = width;
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let [tl, tr, br, bl] = self.radius;
+
+        let content = column![
+            quad::CustomQuad::new(200.0, self.radius, self.border_width),
+            text(format!("Radius: {tl:.2}/{tr:.2}/{br:.2}/{bl:.2}")),
+            slider(1.0..=100.0, tl, Message::RadiusTopLeftChanged).step(0.01),
+            slider(1.0..=100.0, tr, Message::RadiusTopRightChanged).step(0.01),
+            slider(1.0..=100.0, br, Message::RadiusBottomRightChanged)
+                .step(0.01),
+            slider(1.0..=100.0, bl, Message::RadiusBottomLeftChanged)
+                .step(0.01),
+            slider(1.0..=10.0, self.border_width, Message::BorderWidthChanged)
+                .step(0.01),
+        ]
+        .padding(20)
+        .spacing(20)
+        .max_width(500)
+        .align_items(Alignment::Center);
+
+        container(content)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}