Improve tour example

src/widget/button.rs

@@ -83,7 +83,7 @@ impl<'a, Message> Button<'a, Message> {
     /// Sets the width of the [`Button`] in pixels.
     ///
     /// [`Button`]: struct.Button.html
-    pub fn width(mut self, width: u32) -> Self {
+    pub fn width(mut self, width: u16) -> Self {
         self.style = self.style.width(width);
         self
     }

src/widget/checkbox.rs

@@ -142,7 +142,7 @@ where
             renderer,
             text_bounds,
             &self.label,
-            20.0,
+            None,
             self.label_color,
             text::HorizontalAlignment::Left,
             text::VerticalAlignment::Top,

src/widget/column.rs

@@ -55,7 +55,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     /// Sets the padding of the [`Column`] in pixels.
     ///
     /// [`Column`]: struct.Column.html
-    pub fn padding(mut self, px: u32) -> Self {
+    pub fn padding(mut self, px: u16) -> Self {
         self.style = self.style.padding(px);
         self
     }
@@ -63,7 +63,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     /// Sets the width of the [`Column`] in pixels.
     ///
     /// [`Column`]: struct.Column.html
-    pub fn width(mut self, width: u32) -> Self {
+    pub fn width(mut self, width: u16) -> Self {
         self.style = self.style.width(width);
         self
     }
@@ -71,7 +71,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     /// Sets the height of the [`Column`] in pixels.
     ///
     /// [`Column`]: struct.Column.html
-    pub fn height(mut self, height: u32) -> Self {
+    pub fn height(mut self, height: u16) -> Self {
         self.style = self.style.height(height);
         self
     }
@@ -79,7 +79,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     /// Sets the maximum width of the [`Column`] in pixels.
     ///
     /// [`Column`]: struct.Column.html
-    pub fn max_width(mut self, max_width: u32) -> Self {
+    pub fn max_width(mut self, max_width: u16) -> Self {
         self.style = self.style.max_width(max_width);
         self
     }
@@ -87,7 +87,7 @@ impl<'a, Message, Renderer> Column<'a, Message, Renderer> {
     /// Sets the maximum height of the [`Column`] in pixels.
     ///
     /// [`Column`]: struct.Column.html
-    pub fn max_height(mut self, max_height: u32) -> Self {
+    pub fn max_height(mut self, max_height: u16) -> Self {
         self.style = self.style.max_height(max_height);
         self
     }

src/widget/image.rs

@@ -1,7 +1,8 @@
 //! Display images in your user interface.
 
 use crate::{
-    Element, Hasher, Layout, MouseCursor, Node, Point, Rectangle, Style, Widget,
+    Align, Element, Hasher, Layout, MouseCursor, Node, Point, Rectangle, Style,
+    Widget,
 };
 
 use std::hash::Hash;
@@ -25,6 +26,8 @@ use std::hash::Hash;
 pub struct Image<I> {
     image: I,
     source: Option<Rectangle<u16>>,
+    width: Option<u16>,
+    height: Option<u16>,
     style: Style,
 }
 
@@ -32,6 +35,8 @@ impl<I> std::fmt::Debug for Image<I> {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         f.debug_struct("Image")
             .field("source", &self.source)
+            .field("width", &self.width)
+            .field("height", &self.height)
             .field("style", &self.style)
             .finish()
     }
@@ -45,7 +50,9 @@ impl<I> Image<I> {
         Image {
             image,
             source: None,
-            style: Style::default().fill_width().fill_height(),
+            width: None,
+            height: None,
+            style: Style::default(),
         }
     }
 
@@ -60,16 +67,27 @@ impl<I> Image<I> {
     /// Sets the width of the [`Image`] boundaries in pixels.
     ///
     /// [`Image`]: struct.Image.html
-    pub fn width(mut self, width: u32) -> Self {
-        self.style = self.style.width(width);
+    pub fn width(mut self, width: u16) -> Self {
+        self.width = Some(width);
         self
     }
 
     /// Sets the height of the [`Image`] boundaries in pixels.
     ///
     /// [`Image`]: struct.Image.html
-    pub fn height(mut self, height: u32) -> Self {
-        self.style = self.style.height(height);
+    pub fn height(mut self, height: u16) -> Self {
+        self.height = Some(height);
+        self
+    }
+
+    /// Sets the alignment of the [`Image`] itself.
+    ///
+    /// This is useful if you want to override the default alignment given by
+    /// the parent container.
+    ///
+    /// [`Image`]: struct.Button.html
+    pub fn align_self(mut self, align: Align) -> Self {
+        self.style = self.style.align_self(align);
         self
     }
 }
@@ -79,8 +97,14 @@ where
     Renderer: self::Renderer<I>,
     I: Clone,
 {
-    fn node(&self, _renderer: &Renderer) -> Node {
-        Node::new(self.style)
+    fn node(&self, renderer: &Renderer) -> Node {
+        renderer.node(
+            self.style,
+            &self.image,
+            self.width,
+            self.height,
+            self.source,
+        )
     }
 
     fn draw(
@@ -89,13 +113,15 @@ where
         layout: Layout<'_>,
         _cursor_position: Point,
     ) -> MouseCursor {
-        renderer.draw(layout.bounds(), self.image.clone(), self.source);
+        renderer.draw(&self.image, layout.bounds(), self.source);
 
         MouseCursor::OutOfBounds
     }
 
     fn hash_layout(&self, state: &mut Hasher) {
         self.style.hash(state);
+        self.width.hash(state);
+        self.height.hash(state);
     }
 }
 
@@ -107,6 +133,23 @@ where
 /// [`Image`]: struct.Image.html
 /// [renderer]: ../../renderer/index.html
 pub trait Renderer<I> {
+    /// Creates a [`Node`] with the given [`Style`] for the provided [`Image`]
+    /// and its size.
+    ///
+    /// You should probably keep the original aspect ratio, if possible.
+    ///
+    /// [`Node`]: ../../struct.Node.html
+    /// [`Style`]: ../../struct.Style.html
+    /// [`Image`]: struct.Image.html
+    fn node(
+        &self,
+        style: Style,
+        image: &I,
+        width: Option<u16>,
+        height: Option<u16>,
+        source: Option<Rectangle<u16>>,
+    ) -> Node;
+
     /// Draws an [`Image`].
     ///
     /// It receives:
@@ -118,8 +161,8 @@ pub trait Renderer<I> {
     /// [`Image`]: struct.Image.html
     fn draw(
         &mut self,
+        image: &I,
         bounds: Rectangle<f32>,
-        image: I,
         source: Option<Rectangle<u16>>,
     );
 }

src/widget/progress_bar.rs

@@ -47,7 +47,7 @@ impl ProgressBar {
     /// Sets the width of the [`ProgressBar`] in pixels.
     ///
     /// [`ProgressBar`]: struct.ProgressBar.html
-    pub fn width(mut self, width: u32) -> Self {
+    pub fn width(mut self, width: u16) -> Self {
         self.style = self.style.width(width);
         self
     }

src/widget/radio.rs

@@ -152,7 +152,7 @@ where
             renderer,
             text_bounds,
             &self.label,
-            20.0,
+            None,
             self.label_color,
             text::HorizontalAlignment::Left,
             text::VerticalAlignment::Top,

src/widget/row.rs

@@ -52,7 +52,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     /// Sets the padding of the [`Row`] in pixels.
     ///
     /// [`Row`]: struct.Row.html
-    pub fn padding(mut self, px: u32) -> Self {
+    pub fn padding(mut self, px: u16) -> Self {
         self.style = self.style.padding(px);
         self
     }
@@ -60,7 +60,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     /// Sets the width of the [`Row`] in pixels.
     ///
     /// [`Row`]: struct.Row.html
-    pub fn width(mut self, width: u32) -> Self {
+    pub fn width(mut self, width: u16) -> Self {
         self.style = self.style.width(width);
         self
     }
@@ -68,7 +68,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     /// Sets the height of the [`Row`] in pixels.
     ///
     /// [`Row`]: struct.Row.html
-    pub fn height(mut self, height: u32) -> Self {
+    pub fn height(mut self, height: u16) -> Self {
         self.style = self.style.height(height);
         self
     }
@@ -76,7 +76,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     /// Sets the maximum width of the [`Row`] in pixels.
     ///
     /// [`Row`]: struct.Row.html
-    pub fn max_width(mut self, max_width: u32) -> Self {
+    pub fn max_width(mut self, max_width: u16) -> Self {
         self.style = self.style.max_width(max_width);
         self
     }
@@ -84,7 +84,7 @@ impl<'a, Message, Renderer> Row<'a, Message, Renderer> {
     /// Sets the maximum height of the [`Row`] in pixels.
     ///
     /// [`Row`]: struct.Row.html
-    pub fn max_height(mut self, max_height: u32) -> Self {
+    pub fn max_height(mut self, max_height: u16) -> Self {
         self.style = self.style.max_height(max_height);
         self
     }

src/widget/slider.rs

@@ -93,7 +93,7 @@ impl<'a, Message> Slider<'a, Message> {
     /// Sets the width of the [`Slider`] in pixels.
     ///
     /// [`Slider`]: struct.Slider.html
-    pub fn width(mut self, width: u32) -> Self {
+    pub fn width(mut self, width: u16) -> Self {
         self.style = self.style.width(width);
         self
     }

src/widget/text.rs

@@ -30,7 +30,7 @@ use std::hash::Hash;
 #[derive(Debug, Clone)]
 pub struct Text<Color> {
     content: String,
-    size: u16,
+    size: Option<u16>,
     color: Option<Color>,
     style: Style,
     horizontal_alignment: HorizontalAlignment,
@@ -44,7 +44,7 @@ impl<Color> Text<Color> {
     pub fn new(label: &str) -> Self {
         Text {
             content: String::from(label),
-            size: 20,
+            size: None,
             color: None,
             style: Style::default().fill_width(),
             horizontal_alignment: HorizontalAlignment::Left,
@@ -56,7 +56,7 @@ impl<Color> Text<Color> {
     ///
     /// [`Text`]: struct.Text.html
     pub fn size(mut self, size: u16) -> Self {
-        self.size = size;
+        self.size = Some(size);
         self
     }
 
@@ -71,7 +71,7 @@ impl<Color> Text<Color> {
     /// Sets the width of the [`Text`] boundaries in pixels.
     ///
     /// [`Text`]: struct.Text.html
-    pub fn width(mut self, width: u32) -> Self {
+    pub fn width(mut self, width: u16) -> Self {
         self.style = self.style.width(width);
         self
     }
@@ -79,7 +79,7 @@ impl<Color> Text<Color> {
     /// Sets the height of the [`Text`] boundaries in pixels.
     ///
     /// [`Text`]: struct.Text.html
-    pub fn height(mut self, height: u32) -> Self {
+    pub fn height(mut self, height: u16) -> Self {
         self.style = self.style.height(height);
         self
     }
@@ -112,7 +112,7 @@ where
     Renderer: self::Renderer<Color>,
 {
     fn node(&self, renderer: &Renderer) -> Node {
-        renderer.node(self.style, &self.content, f32::from(self.size))
+        renderer.node(self.style, &self.content, self.size)
     }
 
     fn draw(
@@ -124,7 +124,7 @@ where
         renderer.draw(
             layout.bounds(),
             &self.content,
-            f32::from(self.size),
+            self.size,
             self.color,
             self.horizontal_alignment,
             self.vertical_alignment,
@@ -160,7 +160,7 @@ pub trait Renderer<Color> {
     /// [`Style`]: ../../struct.Style.html
     /// [`Text`]: struct.Text.html
     /// [`Node::with_measure`]: ../../struct.Node.html#method.with_measure
-    fn node(&self, style: Style, content: &str, size: f32) -> Node;
+    fn node(&self, style: Style, content: &str, size: Option<u16>) -> Node;
 
     /// Draws a [`Text`] fragment.
     ///
@@ -179,7 +179,7 @@ pub trait Renderer<Color> {
         &mut self,
         bounds: Rectangle,
         content: &str,
-        size: f32,
+        size: Option<u16>,
         color: Option<Color>,
         horizontal_alignment: HorizontalAlignment,
         vertical_alignment: VerticalAlignment,