Generic pixel units

core/src/length.rs

@@ -1,5 +1,5 @@
 /// The strategy used to fill space in a specific dimension.
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash)]
+#[derive(Debug, Clone, Copy, PartialEq)]
 pub enum Length {
     /// Fill all the remaining space
     Fill,
@@ -17,7 +17,7 @@ pub enum Length {
     Shrink,
 
     /// Fill a fixed amount of space
-    Units(u16),
+    Fixed(f32),
 }
 
 impl Length {
@@ -31,13 +31,19 @@ impl Length {
             Length::Fill => 1,
             Length::FillPortion(factor) => *factor,
             Length::Shrink => 0,
-            Length::Units(_) => 0,
+            Length::Fixed(_) => 0,
         }
     }
 }
 
+impl From<f32> for Length {
+    fn from(amount: f32) -> Self {
+        Length::Fixed(amount)
+    }
+}
+
 impl From<u16> for Length {
     fn from(units: u16) -> Self {
-        Length::Units(units)
+        Length::Fixed(f32::from(units))
     }
 }

core/src/lib.rs

@@ -35,6 +35,7 @@ mod content_fit;
 mod font;
 mod length;
 mod padding;
+mod pixels;
 mod point;
 mod rectangle;
 mod size;
@@ -47,6 +48,7 @@ pub use content_fit::ContentFit;
 pub use font::Font;
 pub use length::Length;
 pub use padding::Padding;
+pub use pixels::Pixels;
 pub use point::Point;
 pub use rectangle::Rectangle;
 pub use size::Size;

core/src/padding.rs

@@ -33,29 +33,29 @@ use crate::Size;
 /// let widget = Widget::new().padding([10, 20]);        // top/bottom, left/right
 /// let widget = Widget::new().padding([5, 10, 15, 20]); // top, right, bottom, left
 /// ```
-#[derive(Debug, Hash, Copy, Clone)]
+#[derive(Debug, Copy, Clone)]
 pub struct Padding {
     /// Top padding
-    pub top: u16,
+    pub top: f32,
     /// Right padding
-    pub right: u16,
+    pub right: f32,
     /// Bottom padding
-    pub bottom: u16,
+    pub bottom: f32,
     /// Left padding
-    pub left: u16,
+    pub left: f32,
 }
 
 impl Padding {
     /// Padding of zero
     pub const ZERO: Padding = Padding {
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
+        top: 0.0,
+        right: 0.0,
+        bottom: 0.0,
+        left: 0.0,
     };
 
     /// Create a Padding that is equal on all sides
-    pub const fn new(padding: u16) -> Padding {
+    pub const fn new(padding: f32) -> Padding {
         Padding {
             top: padding,
             right: padding,
@@ -65,12 +65,12 @@ impl Padding {
     }
 
     /// Returns the total amount of vertical [`Padding`].
-    pub fn vertical(self) -> u16 {
+    pub fn vertical(self) -> f32 {
         self.top + self.bottom
     }
 
     /// Returns the total amount of horizontal [`Padding`].
-    pub fn horizontal(self) -> u16 {
+    pub fn horizontal(self) -> f32 {
         self.left + self.right
     }
 
@@ -79,16 +79,49 @@ impl Padding {
         let available = (outer - inner).max(Size::ZERO);
 
         Padding {
-            top: self.top.min((available.height as u16) / 2),
-            right: self.right.min((available.width as u16) / 2),
-            bottom: self.bottom.min((available.height as u16) / 2),
-            left: self.left.min((available.width as u16) / 2),
+            top: self.top.min(available.height / 2.0),
+            right: self.right.min(available.width / 2.0),
+            bottom: self.bottom.min(available.height / 2.0),
+            left: self.left.min(available.width / 2.0),
         }
     }
 }
 
 impl From<u16> for Padding {
     fn from(p: u16) -> Self {
+        Padding {
+            top: f32::from(p),
+            right: f32::from(p),
+            bottom: f32::from(p),
+            left: f32::from(p),
+        }
+    }
+}
+
+impl From<[u16; 2]> for Padding {
+    fn from(p: [u16; 2]) -> Self {
+        Padding {
+            top: f32::from(p[0]),
+            right: f32::from(p[1]),
+            bottom: f32::from(p[0]),
+            left: f32::from(p[1]),
+        }
+    }
+}
+
+impl From<[u16; 4]> for Padding {
+    fn from(p: [u16; 4]) -> Self {
+        Padding {
+            top: f32::from(p[0]),
+            right: f32::from(p[1]),
+            bottom: f32::from(p[2]),
+            left: f32::from(p[3]),
+        }
+    }
+}
+
+impl From<f32> for Padding {
+    fn from(p: f32) -> Self {
         Padding {
             top: p,
             right: p,
@@ -98,8 +131,8 @@ impl From<u16> for Padding {
     }
 }
 
-impl From<[u16; 2]> for Padding {
-    fn from(p: [u16; 2]) -> Self {
+impl From<[f32; 2]> for Padding {
+    fn from(p: [f32; 2]) -> Self {
         Padding {
             top: p[0],
             right: p[1],
@@ -109,8 +142,8 @@ impl From<[u16; 2]> for Padding {
     }
 }
 
-impl From<[u16; 4]> for Padding {
-    fn from(p: [u16; 4]) -> Self {
+impl From<[f32; 4]> for Padding {
+    fn from(p: [f32; 4]) -> Self {
         Padding {
             top: p[0],
             right: p[1],

core/src/pixels.rs

@@ -0,0 +1,22 @@
+/// An amount of logical pixels.
+///
+/// Normally used to represent an amount of space, or the size of something.
+///
+/// This type is normally asked as an argument in a generic way
+/// (e.g. `impl Into<Pixels>`) and, since `Pixels` implements `From` both for
+/// `f32` and `u16`, you should be able to provide both integers and float
+/// literals as needed.
+#[derive(Debug, Clone, Copy, PartialEq, PartialOrd)]
+pub struct Pixels(pub f32);
+
+impl From<f32> for Pixels {
+    fn from(amount: f32) -> Self {
+        Self(amount)
+    }
+}
+
+impl From<u16> for Pixels {
+    fn from(amount: u16) -> Self {
+        Self(f32::from(amount))
+    }
+}

core/src/size.rs

@@ -29,8 +29,8 @@ impl Size {
     /// Increments the [`Size`] to account for the given padding.
     pub fn pad(&self, padding: Padding) -> Self {
         Size {
-            width: self.width + padding.horizontal() as f32,
-            height: self.height + padding.vertical() as f32,
+            width: self.width + padding.horizontal(),
+            height: self.height + padding.vertical(),
         }
     }
 

examples/color_palette/src/main.rs

@@ -301,11 +301,11 @@ impl<C: ColorSpace + Copy> ColorPicker<C> {
         }
 
         row![
-            text(C::LABEL).width(Length::Units(50)),
+            text(C::LABEL).width(50),
             slider(cr1, c1, move |v| C::new(v, c2, c3)),
             slider(cr2, c2, move |v| C::new(c1, v, c3)),
             slider(cr3, c3, move |v| C::new(c1, c2, v)),
-            text(color.to_string()).width(Length::Units(185)).size(14),
+            text(color.to_string()).width(185).size(14),
         ]
         .spacing(10)
         .align_items(Alignment::Center)

examples/component/src/main.rs

@@ -127,7 +127,7 @@ mod numeric_input {
                         .horizontal_alignment(alignment::Horizontal::Center)
                         .vertical_alignment(alignment::Vertical::Center),
                 )
-                .width(Length::Units(50))
+                .width(50)
                 .on_press(on_press)
             };
 

examples/events/src/main.rs

@@ -93,7 +93,7 @@ impl Application for Events {
                 .width(Length::Fill)
                 .horizontal_alignment(alignment::Horizontal::Center),
         )
-        .width(Length::Units(100))
+        .width(100)
         .padding(10)
         .on_press(Message::Exit);
 

examples/integration_opengl/src/controls.rs

@@ -42,7 +42,7 @@ impl Program for Controls {
         let background_color = self.background_color;
 
         let sliders = Row::new()
-            .width(Length::Units(500))
+            .width(500)
             .spacing(20)
             .push(
                 Slider::new(0.0..=1.0, background_color.r, move |r| {

examples/integration_wgpu/src/controls.rs

@@ -48,7 +48,7 @@ impl Program for Controls {
         let text = &self.text;
 
         let sliders = Row::new()
-            .width(Length::Units(500))
+            .width(500)
             .spacing(20)
             .push(
                 slider(0.0..=1.0, background_color.r, move |r| {

examples/modal/src/main.rs

@@ -156,7 +156,7 @@ impl Application for App {
                 ]
                 .spacing(20),
             )
-            .width(Length::Units(300))
+            .width(300)
             .padding(10)
             .style(theme::Container::Box);
 

examples/pick_list/src/main.rs

@@ -43,10 +43,10 @@ impl Sandbox for Example {
         .placeholder("Choose a language...");
 
         let content = column![
-            vertical_space(Length::Units(600)),
+            vertical_space(600),
             "Which is your favorite language?",
             pick_list,
-            vertical_space(Length::Units(600)),
+            vertical_space(600),
         ]
         .width(Length::Fill)
         .align_items(Alignment::Center)

examples/qr_code/src/main.rs

@@ -58,7 +58,7 @@ impl Sandbox for QRGenerator {
         .padding(15);
 
         let mut content = column![title, input]
-            .width(Length::Units(700))
+            .width(700)
             .spacing(20)
             .align_items(Alignment::Center);
 

examples/scrollable/src/main.rs

@@ -187,9 +187,9 @@ impl Application for ScrollableDemo {
                     column![
                         scroll_to_end_button(),
                         text("Beginning!"),
-                        vertical_space(Length::Units(1200)),
+                        vertical_space(1200),
                         text("Middle!"),
-                        vertical_space(Length::Units(1200)),
+                        vertical_space(1200),
                         text("End!"),
                         scroll_to_beginning_button(),
                     ]
@@ -211,13 +211,13 @@ impl Application for ScrollableDemo {
                     row![
                         scroll_to_end_button(),
                         text("Beginning!"),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         text("Middle!"),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         text("End!"),
                         scroll_to_beginning_button(),
                     ]
-                    .height(Length::Units(450))
+                    .height(450)
                     .align_items(Alignment::Center)
                     .padding([0, 40, 0, 40])
                     .spacing(40),
@@ -237,26 +237,26 @@ impl Application for ScrollableDemo {
                     row![
                         column![
                             text("Let's do some scrolling!"),
-                            vertical_space(Length::Units(2400))
+                            vertical_space(2400)
                         ],
                         scroll_to_end_button(),
                         text("Horizontal - Beginning!"),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         //vertical content
                         column![
                             text("Horizontal - Middle!"),
                             scroll_to_end_button(),
                             text("Vertical - Beginning!"),
-                            vertical_space(Length::Units(1200)),
+                            vertical_space(1200),
                             text("Vertical - Middle!"),
-                            vertical_space(Length::Units(1200)),
+                            vertical_space(1200),
                             text("Vertical - End!"),
                             scroll_to_beginning_button(),
-                            vertical_space(Length::Units(40)),
+                            vertical_space(40),
                         ]
                         .align_items(Alignment::Fill)
                         .spacing(40),
-                        horizontal_space(Length::Units(1200)),
+                        horizontal_space(1200),
                         text("Horizontal - End!"),
                         scroll_to_beginning_button(),
                     ]

examples/slider/src/main.rs

@@ -38,11 +38,11 @@ impl Sandbox for Slider {
 
         let h_slider =
             container(slider(0..=100, value, Message::SliderChanged))
-                .width(Length::Units(250));
+                .width(250);
 
         let v_slider =
             container(vertical_slider(0..=100, value, Message::SliderChanged))
-                .height(Length::Units(200));
+                .height(200);
 
         let text = text(format!("{value}"));
 

examples/stopwatch/src/main.rs

@@ -105,7 +105,7 @@ impl Application for Stopwatch {
                 text(label).horizontal_alignment(alignment::Horizontal::Center),
             )
             .padding(10)
-            .width(Length::Units(80))
+            .width(80)
         };
 
         let toggle_button = {