Rework pixel snapping.

masonry/README.md

@@ -133,7 +133,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
     let list = Flex::column()
         .with_fixed(
             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
         )
         .with_fixed_spacer(WIDGET_SPACING);
 

masonry/examples/calc_masonry.rs

@@ -255,7 +255,7 @@ pub fn build_calc() -> NewWidget<impl Widget> {
     NewWidget::new(root_widget).with_props(
         PropertySet::new()
             .with(Background::Color(AlphaColor::from_str("#794869").unwrap()))
-            .with(Padding::all(2.0))
+            .with(Padding::all(2.px()))
             .with(Gap::new(1.px())),
     )
 }
@@ -274,7 +274,7 @@ fn custom_property_set() -> DefaultProperties {
         PropertySet::new()
             .with(Background::Color(BLUE))
             .with(BorderColor::new(Color::TRANSPARENT))
-            .with(BorderWidth::all(2.0)),
+            .with(BorderWidth::all(2.px())),
     );
     stack.push(
         Selector::classes(&["op_button"]).with_active(true),
@@ -285,7 +285,7 @@ fn custom_property_set() -> DefaultProperties {
         PropertySet::new()
             .with(Background::Color(GRAY))
             .with(BorderColor::new(Color::TRANSPARENT))
-            .with(BorderWidth::all(2.0)),
+            .with(BorderWidth::all(2.px())),
     );
     stack.push(
         Selector::classes(&["digit_button"]).with_active(true),

masonry/examples/custom_widget.rs

@@ -16,7 +16,7 @@ use masonry::core::{
 };
 use masonry::imaging::Painter;
 use masonry::kurbo::{Affine, Axis, BezPath, Point, Rect, Size, Stroke};
-use masonry::layout::LenReq;
+use masonry::layout::{AsUnit, LenReq, Length};
 use masonry::parley::FontFamilyName;
 use masonry::parley::style::{FontFamily, GenericFamily, StyleProperty};
 use masonry::peniko::{Color, ImageBrush, ImageFormat};
@@ -80,16 +80,16 @@ impl Widget for CustomWidget {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
+        _cross_length: Option<Length>,
+    ) -> Length {
         // We currently just define our preferred min/max,
         // but often it takes actual work to derive these.
         let min_size = Size::new(100., 50.);
         let max_size = Size::new(200., 200.);
 
         // Measurement is per axis, so we only care about a single dimension right now
-        let min_length = min_size.get_coord(axis);
-        let max_length = max_size.get_coord(axis);
+        let min_length = min_size.get_coord(axis).px();
+        let max_length = max_size.get_coord(axis).px();
 
         // Return a result based on the parent's request
         match len_req {
@@ -113,10 +113,9 @@ impl Widget for CustomWidget {
         painter: &mut Painter<'_>,
     ) {
         // Clear the whole widget with the color of your choice
-        // (ctx.content_box_size() returns the size of the content rect we're painting in)
-        let size = ctx.content_box_size();
-        let rect = ctx.content_box();
-        painter.fill(rect, palette::css::WHITE).draw();
+        let content_box = ctx.content_box();
+        let size = content_box.size();
+        painter.fill(content_box, palette::css::WHITE).draw();
 
         // Create an arbitrary bezier path
         let mut path = BezPath::new();
@@ -166,7 +165,7 @@ impl Widget for CustomWidget {
             width: 256,
             height: 256,
         });
-        let transform = ObjectFit::Stretch.affine(size, Size::new(256., 256.));
+        let transform = ObjectFit::Stretch.affine(content_box, Rect::new(0., 0., 256., 256.));
         painter.draw_image(&image_data, transform);
     }
 

masonry/examples/gallery/badge.rs

@@ -6,7 +6,7 @@ use masonry::core::{
     ErasedAction, Handled, NewWidget, PropertySet, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::kurbo::Vec2;
-use masonry::layout::Length;
+use masonry::layout::{AsUnit, Length};
 use masonry::parley::style::FontWeight;
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
@@ -93,7 +93,7 @@ impl DemoPage for BadgeDemo {
         let outline_badge = NewWidget::new(Badge::with_text("99+")).with_props(
             PropertySet::new()
                 .with(Background::Color(Color::TRANSPARENT))
-                .with(BorderWidth { width: 1.0 })
+                .with(BorderWidth { width: 1.px() })
                 .with(BorderColor {
                     color: Color::from_rgb8(0x71, 0x71, 0x7a),
                 }),
@@ -155,8 +155,8 @@ impl DemoPage for BadgeDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x3f, 0x3f, 0x46)))
-                .with(CornerRadius { radius: 999.0 })
-                .with(Padding::all(0.0)),
+                .with(CornerRadius { radius: 999.px() })
+                .with(Padding::ZERO),
         );
 
         let online_dot = NewWidget::new(Badge::new(
@@ -166,9 +166,9 @@ impl DemoPage for BadgeDemo {
         ))
         .with_props(
             PropertySet::new()
-                .with(Padding::all(0.0))
-                .with(CornerRadius { radius: 999.0 })
-                .with(BorderWidth { width: 0.0 })
+                .with(Padding::ZERO)
+                .with(CornerRadius { radius: 999.px() })
+                .with(BorderWidth { width: 0.px() })
                 .with(Background::Color(Color::from_rgb8(0x22, 0xc5, 0x5e))),
         );
 

masonry/examples/gallery/image.rs

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::{ImageAlphaType, ImageData, ImageFormat};
 use masonry::properties::ObjectFit;
 use masonry::properties::types::CrossAxisAlignment;
@@ -54,7 +54,7 @@ impl DemoPage for ImageDemo {
                     .prepare(),
             )
             .with_fixed_spacer(CONTENT_GAP)
-            .with_fixed(SizedBox::new(image).size(420.0.px(), 280.0.px()).prepare());
+            .with_fixed(SizedBox::new(image).size(420.px(), 280.px()).prepare());
 
         wrap_in_shell(self.shell, NewWidget::new(body).erased())
     }

masonry/examples/gallery/kitchen_sink.rs

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::{AsUnit as _, UnitPoint};
+use masonry::layout::{AsUnit, UnitPoint};
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::properties::{Background, Padding};
@@ -43,10 +43,10 @@ impl DemoPage for KitchenSinkDemo {
         let grid = NewWidget::new(SizedBox::new(grid.prepare())).with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x24, 0x24, 0x24)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
-        let bg = NewWidget::new(SizedBox::empty().size(220.0.px(), 120.0.px())).with_props(
+        let bg = NewWidget::new(SizedBox::empty().size(220.px(), 120.px())).with_props(
             PropertySet::one(Background::Color(Color::from_rgb8(0x44, 0x22, 0x66))),
         );
 

masonry/examples/gallery/main.rs

@@ -32,6 +32,7 @@ mod transforms;
 
 use masonry::core::{ErasedAction, NewWidget, StyleProperty, Widget as _, WidgetId, WidgetTag};
 use masonry::dpi::LogicalSize;
+use masonry::layout::Length;
 use masonry::parley::style::FontWeight;
 use masonry::properties::Padding;
 use masonry::properties::types::CrossAxisAlignment;
@@ -45,11 +46,11 @@ use masonry_winit::winit::window::Window;
 use crate::demo::{DemoPage, new_demo_shell_tags};
 use crate::switch::SwitchDemo;
 
-const SIDEBAR_WIDTH: masonry::layout::Length = masonry::layout::Length::const_px(240.0);
-const SIDEBAR_SCROLLBAR_INSET: f64 = 12.0;
-const LEFT_PANE_TOP_PADDING: f64 = 12.0;
-const LEFT_PANE_LEFT_PADDING: f64 = 12.0;
-const RIGHT_PANE_PADDING: f64 = 12.0;
+const SIDEBAR_WIDTH: Length = Length::const_px(240.0);
+const SIDEBAR_SCROLLBAR_INSET: Length = Length::const_px(12.0);
+const LEFT_PANE_TOP_PADDING: Length = Length::const_px(12.0);
+const LEFT_PANE_LEFT_PADDING: Length = Length::const_px(12.0);
+const RIGHT_PANE_PADDING: Length = Length::const_px(12.0);
 
 const DEMO_TITLE_FONT_SIZE: f32 = 20.0;
 
@@ -222,7 +223,7 @@ fn main() {
     // scrollbar doesn't sit on top of the buttons.
     let list = NewWidget::new(SizedBox::new(list.prepare())).with_props(Padding {
         top: LEFT_PANE_TOP_PADDING,
-        bottom: 0.0,
+        bottom: Length::ZERO,
         left: LEFT_PANE_LEFT_PADDING,
         right: SIDEBAR_SCROLLBAR_INSET,
     });

masonry/examples/gallery/spinner.rs

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::widgets::{Flex, SizedBox, Spinner};
 
@@ -32,7 +32,7 @@ impl DemoPage for SpinnerDemo {
             .cross_axis_alignment(CrossAxisAlignment::Center)
             .with_fixed(
                 SizedBox::new(Spinner::new().prepare())
-                    .size(80.0.px(), 80.0.px())
+                    .size(80.px(), 80.px())
                     .prepare(),
             );
 

masonry/examples/gallery/split.rs

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::core::{NewWidget, PropertySet, StyleProperty, Widget};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::Color;
 use masonry::properties::{Background, Padding};
 use masonry::widgets::{Label, SizedBox, Split};
@@ -37,7 +37,7 @@ impl DemoPage for SplitDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x1f, 0x2a, 0x44)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
         let right = NewWidget::new(SizedBox::new(
@@ -48,11 +48,11 @@ impl DemoPage for SplitDemo {
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x2b, 0x3c, 0x2f)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
-        let body = SizedBox::new(Split::new(left, right).split_fraction(0.33).prepare())
-            .height(260.0.px());
+        let body =
+            SizedBox::new(Split::new(left, right).split_fraction(0.33).prepare()).height(260.px());
 
         wrap_in_shell(self.shell, NewWidget::new(body).erased())
     }

masonry/examples/gallery/step_input.rs

@@ -72,7 +72,7 @@ impl DemoPage for StepInputDemo {
 
         stack.push(
             Selector::new(),
-            (BorderWidth::all(2.), CornerRadius::all(20.)),
+            (BorderWidth::all(2.px()), CornerRadius::all(20.px())),
         );
 
         stack.push(

masonry/examples/gallery/transforms.rs

@@ -6,7 +6,7 @@ use masonry::core::{
     ErasedAction, Handled, NewWidget, PropertySet, StyleProperty, Widget, WidgetId, WidgetTag,
 };
 use masonry::kurbo::{Affine, Vec2};
-use masonry::layout::AsUnit as _;
+use masonry::layout::AsUnit;
 use masonry::peniko::Color;
 use masonry::properties::types::CrossAxisAlignment;
 use masonry::properties::{Background, Padding};
@@ -108,13 +108,13 @@ impl DemoPage for TransformsDemo {
                     .with_style(StyleProperty::FontSize(14.0))
                     .prepare(),
             )
-            .size(160.0.px(), 160.0.px()),
+            .size(160.px(), 160.px()),
         )
         .with_tag(self.target)
         .with_props(
             PropertySet::new()
                 .with(Background::Color(Color::from_rgb8(0x35, 0x35, 0x35)))
-                .with(Padding::all(12.0)),
+                .with(Padding::all(12.px())),
         );
 
         let body = Flex::column()

masonry/examples/grid_masonry.rs

@@ -11,7 +11,7 @@ use masonry::core::{
     ErasedAction, NewWidget, PointerButton, PropertySet, StyleProperty, Widget as _, WidgetId,
 };
 use masonry::dpi::LogicalSize;
-use masonry::layout::Length;
+use masonry::layout::{AsUnit, Length};
 use masonry::peniko::Color;
 use masonry::properties::{BorderColor, BorderWidth, Gap};
 use masonry::theme::default_property_set;
@@ -69,7 +69,7 @@ pub fn make_grid(grid_gap: f64) -> NewWidget<Grid> {
 
     let props = PropertySet::new()
         .with(BorderColor::new(Color::from_rgb8(40, 40, 80)))
-        .with(BorderWidth::all(1.0));
+        .with(BorderWidth::all(1.px()));
     let label = SizedBox::new(NewWidget::new(label).with_props(props));
 
     let button_inputs = vec![

masonry/examples/layers.rs

@@ -15,7 +15,7 @@ use masonry::core::{
 use masonry::imaging::Painter;
 use masonry::kurbo::{Axis, Point, Size, Vec2};
 use masonry::layers::Tooltip;
-use masonry::layout::{AsUnit, LayoutSize, LenReq, SizeDef};
+use masonry::layout::{AsUnit, LayoutSize, LenReq, Length, SizeDef};
 use masonry::parley::FontWeight;
 use masonry::peniko::Color;
 use masonry::properties::{Background, BorderColor, BorderWidth, ContentColor};
@@ -117,8 +117,8 @@ impl Widget for OverlayBox {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        cross_length: Option<f64>,
-    ) -> f64 {
+        cross_length: Option<Length>,
+    ) -> Length {
         let auto_length = len_req.into();
         let context_size = LayoutSize::maybe(axis.cross(), cross_length);
 
@@ -178,7 +178,7 @@ fn main() {
                 .with_props(PropertySet::one(ContentColor::new(Color::BLACK))),
         ))
         .with_props(PropertySet::from((
-            BorderWidth::all(1.),
+            BorderWidth::all(1.px()),
             BorderColor::new(Color::BLACK),
             Background::Color(Color::WHITE),
         )))

masonry/examples/to_do_list.rs

@@ -77,7 +77,7 @@ pub fn make_widget_tree() -> NewWidget<impl Widget> {
     let root = Flex::column()
         .with_fixed(
             NewWidget::new(Flex::row().with(text_input, 1.0).with_fixed(button))
-                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING.get()))),
+                .with_props(PropertySet::new().with(Padding::all(WIDGET_SPACING))),
         )
         .with_fixed_spacer(WIDGET_SPACING)
         .with(portal, 1.0);

masonry/src/doc/color_rectangle.rs

@@ -25,13 +25,14 @@ use masonry::core::{Update, UpdateCtx};
 // ---
 use masonry::core::{LayoutCtx, MeasureCtx, PropertiesRef};
 use masonry::kurbo::{Axis, Size};
-use masonry::layout::LenReq;
+use masonry::layout::{LenReq, Length};
 // ---
 use masonry::accesskit::{Node, Role};
 use masonry::core::{AccessCtx, PaintCtx};
 use masonry::imaging::Painter;
 // ---
 use masonry::core::WidgetId;
+use masonry_core::layout::AsUnit;
 use tracing::{Span, trace_span};
 // ---
 use masonry::core::{ChildrenIds, RegisterCtx};
@@ -130,16 +131,12 @@ impl Widget for ColorRectangle {
         _props: &PropertiesRef<'_>,
         axis: Axis,
         len_req: LenReq,
-        _cross_length: Option<f64>,
-    ) -> f64 {
-        // TODO: Remove HACK: Until scale factor rework happens, just pretend it's always 1.0.
-        //       https://github.com/linebender/xilem/issues/1264
-        let scale = 1.0;
-
+        _cross_length: Option<Length>,
+    ) -> Length {
         match len_req {
             LenReq::MinContent | LenReq::MaxContent => match axis {
-                Axis::Horizontal => 200. * scale,
-                Axis::Vertical => 100. * scale,
+                Axis::Horizontal => 200.px(),
+                Axis::Vertical => 100.px(),
             },
             LenReq::FitContent(space) => space,
         }