Change how some widgets are rendered (#886)

Update the code for Button, Textbox and ProgressBar. Make the border and background disjoint. Correctly interpret the border width.
2025-03-17 15:22:46 +01:00 · 2025-03-17 15:22:46 +01:00 · 8d322b63a8
parent aa56ea7633
commit 8d322b63a8
30 changed files with 92 additions and 88 deletions
--- a/masonry/examples/screenshots/grid_masonrytestsinitial_screenshot.png
+++ b/masonry/examples/screenshots/grid_masonrytestsinitial_screenshot.png
--- a/masonry/examples/screenshots/to_do_listtestsinitial_screenshot.png
+++ b/masonry/examples/screenshots/to_do_listtestsinitial_screenshot.png
--- a/masonry/src/util.rs
+++ b/masonry/src/util.rs
@ -7,6 +7,7 @@ use std::any::Any;
 use std::hash::Hash;

 use vello::Scene;
+use vello::kurbo::Join;
 use vello::kurbo::{
    Affine, Rect, Shape, Stroke, {self},
 };
@ -102,13 +103,13 @@ pub fn stroke<'b>(
    brush: impl Into<BrushRef<'b>>,
    stroke_width: f64,
 ) {
-    scene.stroke(
-        &Stroke::new(stroke_width),
-        Affine::IDENTITY,
-        brush,
-        None,
-        path,
-    );
+    // Using Join::Miter avoids rounding corners when a widget has a wide border.
+    let style = Stroke {
+        width: stroke_width,
+        join: Join::Miter,
+        ..Default::default()
+    };
+    scene.stroke(&style, Affine::IDENTITY, brush, None, path);
 }

 #[allow(unused)]
--- a/masonry/src/widgets/button.rs
+++ b/masonry/src/widgets/button.rs
@ -184,11 +184,16 @@ impl Widget for Button {
        let is_hovered = ctx.is_hovered();
        let size = ctx.size();
        let stroke_width = theme::BUTTON_BORDER_WIDTH;
+        let border_radius = theme::BUTTON_BORDER_RADIUS;

-        let rounded_rect = size
+        let bg_rect = size
+            .to_rect()
+            .inset(-stroke_width)
+            .to_rounded_rect(border_radius - stroke_width);
+        let border_rect = size
            .to_rect()
            .inset(-stroke_width / 2.0)
-            .to_rounded_rect(theme::BUTTON_BORDER_RADIUS);
+            .to_rounded_rect(border_radius);

        let bg_gradient = if ctx.is_disabled() {
            [theme::DISABLED_BUTTON_LIGHT, theme::DISABLED_BUTTON_DARK]
@ -204,10 +209,10 @@ impl Widget for Button {
            theme::BORDER_DARK
        };

-        stroke(scene, &rounded_rect, border_color, stroke_width);
+        stroke(scene, &border_rect, border_color, stroke_width);
        fill_lin_gradient(
            scene,
-            &rounded_rect,
+            &bg_rect,
            bg_gradient,
            UnitPoint::TOP,
            UnitPoint::BOTTOM,
--- a/masonry/src/widgets/progress_bar.rs
+++ b/masonry/src/widgets/progress_bar.rs
@ -147,22 +147,17 @@ impl Widget for ProgressBar {

    fn paint(&mut self, ctx: &mut PaintCtx, _props: &PropertiesRef<'_>, scene: &mut Scene) {
        let border_width = 1.;
+        let size = ctx.size();
+        let border_radius = 2.;

-        let rect = ctx
-            .size()
+        let bg_rect = size
            .to_rect()
-            .inset(-border_width / 2.)
-            .to_rounded_rect(2.);
-
-        fill_lin_gradient(
-            scene,
-            &rect,
-            [theme::BACKGROUND_LIGHT, theme::BACKGROUND_DARK],
-            UnitPoint::TOP,
-            UnitPoint::BOTTOM,
-        );
-
-        stroke(scene, &rect, theme::BORDER_DARK, border_width);
+            .inset(-border_width)
+            .to_rounded_rect(border_radius - border_width);
+        let border_rect = size
+            .to_rect()
+            .inset(-border_width / 2.0)
+            .to_rounded_rect(border_radius);

        let progress_rect_size = Size::new(
            ctx.size().width * self.progress.unwrap_or(1.),
@ -170,9 +165,16 @@ impl Widget for ProgressBar {
        );
        let progress_rect = progress_rect_size
            .to_rect()
-            .inset(-border_width / 2.)
-            .to_rounded_rect(2.);
+            .inset(-border_width)
+            .to_rounded_rect(border_radius - border_width);

+        fill_lin_gradient(
+            scene,
+            &bg_rect,
+            [theme::BACKGROUND_LIGHT, theme::BACKGROUND_DARK],
+            UnitPoint::TOP,
+            UnitPoint::BOTTOM,
+        );
        fill_lin_gradient(
            scene,
            &progress_rect,
@ -180,7 +182,7 @@ impl Widget for ProgressBar {
            UnitPoint::TOP,
            UnitPoint::BOTTOM,
        );
-        stroke(scene, &progress_rect, theme::BORDER_DARK, border_width);
+        stroke(scene, &border_rect, theme::BORDER_DARK, border_width);
    }

    fn accessibility_role(&self) -> Role {
--- a/masonry/src/widgets/screenshots/masonrywidgetsbuttontestshello.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsbuttontestshello.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1cb022806d289f4bce2657980b376af42b332d838edfecb0dfc807d059d2975f
-size 5187
+oid sha256:4994346249ff234eb4e52db303053f5f88c1720216dd99475e2529af3828bf33
+size 1757
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtests2x2_with_overlapping_b.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtests2x2_with_overlapping_b.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4aef605773c92b01166520d3ca8065116d46540bc3880978b5f248c95c61fd8d
-size 5001
+oid sha256:9c26cf7fed97582eb10b41c5e2d4ef699c9ac4d33d9b67a6abf092d839636224
+size 1071
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtests2x2_with_overlapping_c.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtests2x2_with_overlapping_c.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec7a39d12493409ed242cc1f41e3d4dce46a96c481d2cdc38d4da185269465e0
-size 5321
+oid sha256:9e30df511b6268bed530eb673ea66bfcb0fb2ad3cb0ca1f1a4614fb2a53214ae
+size 1234
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtests2x2_with_removed_widget.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtests2x2_with_removed_widget.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6c1515c193d2b494e792f05b5d088d1566774285e0df448ea9bf364ce03ab712
-size 4472
+oid sha256:5801fd4aef3cb50ca2156eeece36616a84a1070db5d79921f072b6df48d840a2
+size 114
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestsexpanded_4x1.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestsexpanded_4x1.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f7ce584ad5a911bb7bb8c35f3066ac3031c7ade64692896f7586e20c391b624
-size 5052
+oid sha256:0b4a63bd2f56b4b91b9bf720eb52a9c1ced2b3bbcc5c23b18b09f6b363ac9759
+size 1482
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestsexpanded_4x4.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestsexpanded_4x4.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:58796a0ff44c059d90b9a2e424d390721b5e0052eccbd3b6f003d1739d771440
-size 5186
+oid sha256:d9fea62fdb9c55190e5c1b5387ca80c390b2657e9623c1ed51525c2588dc93b0
+size 1002
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestsinitial_1x1.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestsinitial_1x1.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5d77599d5f7c9fce3c46a651e2bcdb3bfc4172c465efc7db009c91b42e957ab
-size 4927
+oid sha256:7dfc95e8479b1e9922b5ce6d6bad79bc49f5e24f4c0ce3438d023718531cbd03
+size 1502
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestsinitial_2x2.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestsinitial_2x2.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:33aabab29c8651a7efaf88d7609cb50b93e8864367ddeff54a77dc435bb746b0
-size 5312
+oid sha256:d5cc355e23054f84e11d17aec021b3f8b6712298cddf087256fbec2341243f22
+size 1129
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestsmoved_2x2_1.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestsmoved_2x2_1.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:47b741e1bcdc9ad915c2f17f3fededa3435bc089a3fea2309235c913cfce331a
-size 5321
+oid sha256:e9f224a92e663eafe76ea00ccc654e44981f61950cc3f4b4183771ffb3087b5e
+size 1123
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestsmoved_2x2_2.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestsmoved_2x2_2.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5d77599d5f7c9fce3c46a651e2bcdb3bfc4172c465efc7db009c91b42e957ab
-size 4927
+oid sha256:7dfc95e8479b1e9922b5ce6d6bad79bc49f5e24f4c0ce3438d023718531cbd03
+size 1502
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_2x2_widget.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_2x2_widget.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dde5ee4144c465a2dfc2e7407bcece68abf37fa03da97da4e5335a765c82662f
-size 6623
+oid sha256:926bc1453a414f8ce8d18621456e250d3f3a3a57a4b103c11b760f862805c2df
+size 2461
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_changed_spacing.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_changed_spacing.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d69e1dc3b6b4e4135aacfa2e11f48e195784a3b8e1561f4e2bbf9ba3ec295cbf
-size 6984
+oid sha256:dad06ac70e8a047984113061535290c8a5dc342538c12af8a6bc7744b998b5de
+size 2817
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_horizontal_widget.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_horizontal_widget.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3602efdabe62bdb4592090afcb80256bfe9ba339d5b87f1271f36cbca7c35e0a
-size 5609
+oid sha256:1212a72ce86de68cd52ad81de9ca17e4f1fa1e03b7c0d9bc1e64f6f6a537e43e
+size 1197
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_negative_spacing.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_negative_spacing.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cf744b668ff527dfcbd9d23dca2d0d927e39f309cdc515ece463eed3fc0c2ddd
-size 6561
+oid sha256:2c00e6afd8c37f1fef788b15ac93a38d73cdbd341f9c10f42cd2c711ee89b697
+size 2485
--- a/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_vertical_widget.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsgridtestswith_vertical_widget.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:871275dca581cd2201a4d88e7bf50a2497f31f87afc953446d1f80293703deee
-size 6173
+oid sha256:9bec5ac6e170ac1dcc3eeb5bcae104329090b4e7d7a428168fb92674298ecf94
+size 2117
--- a/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests0_percent_progressbar.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests0_percent_progressbar.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0746bee1ea93550a8388661fac6a70e5b1e278e583ac2b9e1b982b3b208646a6
-size 5064
+oid sha256:ca6dc6a80922171cdbaa5cdc269ac2667900c10c5ea40b2c5545042d080b7d3a
+size 1577
--- a/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests100_percent_progressbar.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests100_percent_progressbar.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c224de22f3a435a92853bf7eb1fc6fc34d7a89ea7fdb617eb1a4698143671e76
-size 5458
+oid sha256:25314c6f293e7c8f6a312bdf7f632f445a10ab1d665115768727632069347d1c
+size 2608
--- a/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests25_percent_progressbar.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests25_percent_progressbar.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ef17088123c59d18f2d37bd1c591d75f30d878ba7af17f05db45f489460de320
-size 5788
+oid sha256:0e5f05b1e759dbe978d4b5c0032e3be5fc7b355a38ca2ac49c27bbe887e0c304
+size 2653
--- a/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests50_percent_progressbar.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests50_percent_progressbar.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:649a0fad748a9c025c1862b47d91493ca87f3b92aabad9ab6ac287de64774863
-size 5781
+oid sha256:d45764af408101a57d7780d6d98ada40154bbe61e2a2bd9830e62e1004969efe
+size 2646
--- a/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests75_percent_progressbar.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartests75_percent_progressbar.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:132dcf01f585c2a58b86c4fb6d518059dbeb858e8143ef133acb69f513027749
-size 5399
+oid sha256:cba822bc27c453f48c9f931bf5703127f2632bcd0d40e8a556efce4f173bfbe2
+size 2541
--- a/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartestsindeterminate_progressbar.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetsprogress_bartestsindeterminate_progressbar.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:70415497ab4fa856a15c12f40afc3c65715cbe5c4a42228af4baf553f385efad
-size 4727
+oid sha256:c94c6fe1007afbcb400998e826a59fc37d3c8be1b9e6551823d3c07b7eccfbfb
+size 1628
--- a/masonry/src/widgets/screenshots/masonrywidgetstextboxteststextbox_outline.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetstextboxteststextbox_outline.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ce079b70da1efa2e4870a3f8a789d6ff5e748e8d6604125357cca55f1a0bc8f
-size 1664
+oid sha256:ce5821257e16110acddbaff0fd3041d30ba2c11b0b5532406f1b6d6ba9d4a8a2
+size 1015
--- a/masonry/src/widgets/screenshots/masonrywidgetstextboxteststextbox_selection.png
+++ b/masonry/src/widgets/screenshots/masonrywidgetstextboxteststextbox_selection.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:669c9ebca19fcb7091991f593105289d686eace34e428a9656781f12cdb967cc
-size 1709
+oid sha256:acc5caca94063ae376cbd88afa57865a318a6f352f946ffd05284e3f2606b750
+size 1130
--- a/masonry/src/widgets/tests/screenshots/masonrywidgetsteststransformstransforms_pointer_events.png
+++ b/masonry/src/widgets/tests/screenshots/masonrywidgetsteststransformstransforms_pointer_events.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5e5aa3920a321bcd64db228eff1ebe5b8e9186893ef00ad1a10f30ab8c6d1f35
-size 21630
+oid sha256:b7ba1af0b3ae1c29bc9f53052ec819e4abb1712d9526574ac523bdeb4ee5872b
+size 21982
--- a/masonry/src/widgets/textbox.rs
+++ b/masonry/src/widgets/textbox.rs
@ -7,7 +7,7 @@ use accesskit::{Node, Role};
 use smallvec::{SmallVec, smallvec};
 use tracing::{Span, trace_span};
 use vello::Scene;
-use vello::kurbo::{Affine, Insets, Point, Rect, Size, Stroke};
+use vello::kurbo::{Insets, Point, Rect, Size};

 use crate::core::{
    AccessCtx, AccessEvent, BoxConstraints, EventCtx, LayoutCtx, PaintCtx, PointerEvent,
@ -15,6 +15,7 @@ use crate::core::{
    WidgetId, WidgetMut, WidgetPod,
 };
 use crate::peniko::Color;
+use crate::util::stroke;
 use crate::widgets::{Padding, TextArea};

 /// Added padding between each horizontal edge of the widget
@ -163,19 +164,14 @@ impl Widget for Textbox {

    fn paint(&mut self, ctx: &mut PaintCtx, _props: &PropertiesRef<'_>, scene: &mut Scene) {
        let size = ctx.size();
+        let border_width = 1.0;
        let outline_rect = size.to_rect().inset(Insets::new(
-            -TEXTBOX_MARGIN.leading,
-            -TEXTBOX_MARGIN.top,
-            -TEXTBOX_MARGIN.trailing,
-            -TEXTBOX_MARGIN.bottom,
+            -TEXTBOX_MARGIN.leading - border_width / 2.,
+            -TEXTBOX_MARGIN.top - border_width / 2.,
+            -TEXTBOX_MARGIN.trailing - border_width / 2.,
+            -TEXTBOX_MARGIN.bottom - border_width / 2.,
        ));
-        scene.stroke(
-            &Stroke::new(1.0),
-            Affine::IDENTITY,
-            Color::WHITE,
-            None,
-            &outline_rect,
-        );
+        stroke(scene, &outline_rect, Color::WHITE, border_width);
    }

    fn accessibility_role(&self) -> Role {