masonry: author paint with imaging Painter instead of vello::Scene (#1696)

Switch Masonry’s paint boundary from direct Vello scene authoring to
`imaging`’s `Painter` API.

Widgets now paint through `Painter<'_>` while the paint pass keeps the
Vello-specific sink lifecycle private. This moves Masonry toward the
intended split where `imaging` is the authoring API and Vello is the
backend.

Canvas now retains `imaging::record::Scene`, so canvas drawing also uses
`imaging`’s retained representation at the widget boundary.

As part of the migration, update the paint call sites to match the newer
`imaging` ergonomics:

- use direct `Painter` fills/strokes for native shapes
- use `draw_image`, transformed clip helpers, and `Painter::replay`
- remove redundant default-state builder calls such as
`.transform(Affine::IDENTITY)` and `.fill_rule(Fill::NonZero)`
- remove the old Masonry `fill`/`stroke` helper abstractions

This also fixes a pre-existing radio button bug where the border circle
was stroked twice.

Author: waywardmonkeys

Cargo.lock

@@ -53,6 +53,8 @@ tree_arena = { version = "0.2.0", path = "tree_arena" }
 include_doc_path = { version = "0.1.0", path = "include_doc_path", package = "linebender_include_doc_path" }
 
 anymore = "1.0.0"
+imaging = { git = "https://github.com/forest-rs/imaging.git", rev = "850af057d4c56cf644f37aaa644c7814a7a03a4b" }
+imaging_vello = { git = "https://github.com/forest-rs/imaging.git", rev = "850af057d4c56cf644f37aaa644c7814a7a03a4b" }
 vello = { version = "0.8.0", default-features = false, features = ["wgpu"] }
 kurbo = "0.13.0"
 parley = { version = "0.7.0", features = ["accesskit"] }

Cargo.toml

@@ -14,14 +14,14 @@ use masonry::core::{
     NoAction, PaintCtx, PointerEvent, PropertiesMut, PropertiesRef, RegisterCtx, TextEvent, Widget,
     WidgetId,
 };
+use masonry::imaging::Painter;
 use masonry::kurbo::{Affine, Axis, BezPath, Point, Rect, Size, Stroke};
 use masonry::layout::LenReq;
 use masonry::parley::style::{FontFamily, FontStack, GenericFamily, StyleProperty};
-use masonry::peniko::{Color, Fill, ImageBrush, ImageFormat};
+use masonry::peniko::{Color, ImageBrush, ImageFormat};
 use masonry::peniko::{ImageAlphaType, ImageData};
 use masonry::properties::ObjectFit;
 use masonry::theme::default_property_set;
-use masonry::vello::Scene;
 use masonry::{TextAlign, TextAlignOptions, palette};
 use masonry_winit::app::{AppDriver, DriverCtx, NewWindow, WindowId};
 use masonry_winit::winit::window::Window;
@@ -105,18 +105,17 @@ impl Widget for CustomWidget {
     // The paint method gets called last, after an event flow.
     // It goes event -> update -> layout -> paint, and each method can influence the next.
     // Basically, anything that changes the appearance of a widget causes a paint.
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, scene: &mut Scene) {
+    fn paint(
+        &mut self,
+        ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        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();
-        scene.fill(
-            Fill::NonZero,
-            Affine::IDENTITY,
-            palette::css::WHITE,
-            None,
-            &rect,
-        );
+        painter.fill(rect, palette::css::WHITE).draw();
 
         // Create an arbitrary bezier path
         let mut path = BezPath::new();
@@ -125,19 +124,15 @@ impl Widget for CustomWidget {
         // Create a color
         let stroke_color = Color::from_rgb8(0, 128, 0);
         // Stroke the path with thickness 5.0
-        scene.stroke(
-            &Stroke::new(5.0),
-            Affine::IDENTITY,
-            stroke_color,
-            None,
-            &path,
-        );
+        painter
+            .stroke(&path, &Stroke::new(5.0), stroke_color)
+            .draw();
 
         // Rectangles: the path for practical people
         let rect = Rect::from_origin_size((10.0, 10.0), (100.0, 100.0));
         // Note the Color:from_rgba8 which includes an alpha channel (7F in this case)
         let fill_color = Color::from_rgba8(0x00, 0x00, 0x00, 0x7F);
-        scene.fill(Fill::NonZero, Affine::IDENTITY, fill_color, None, &rect);
+        painter.fill(rect, fill_color).draw();
 
         // To render text, we first create a text layout builder and then set the text properties.
         let (fcx, lcx) = ctx.text_contexts();
@@ -154,7 +149,7 @@ impl Widget for CustomWidget {
 
         // We can pass a transform matrix to rotate the text we render
         masonry::core::render_text(
-            scene,
+            painter,
             Affine::rotate(std::f64::consts::FRAC_PI_4).then_translate((80.0, 40.0).into()),
             &text_layout,
             &[fill_color.into()],
@@ -171,7 +166,7 @@ impl Widget for CustomWidget {
             height: 256,
         });
         let transform = ObjectFit::Stretch.affine(size, Size::new(256., 256.));
-        scene.draw_image(&image_data, transform);
+        painter.draw_image(&image_data, transform);
     }
 
     fn accessibility_role(&self) -> Role {

masonry/examples/custom_widget.rs

@@ -12,6 +12,7 @@ use masonry::core::{
     NoAction, PaintCtx, PointerEvent, PointerUpdate, PropertiesMut, PropertiesRef, PropertySet,
     RegisterCtx, StyleProperty, Update, UpdateCtx, Widget, WidgetId, WidgetPod,
 };
+use masonry::imaging::Painter;
 use masonry::kurbo::{Axis, Point, Size, Vec2};
 use masonry::layers::Tooltip;
 use masonry::layout::{AsUnit, LayoutSize, LenReq, SizeDef};
@@ -20,7 +21,6 @@ use masonry::peniko::Color;
 use masonry::properties::{Background, BorderColor, BorderWidth, ContentColor};
 use masonry::theme::default_property_set;
 use masonry::util::{Duration, Instant};
-use masonry::vello::Scene;
 use masonry::widgets::{Flex, Label, Selector};
 use masonry_winit::app::{AppDriver, DriverCtx, NewWindow, WindowId};
 use masonry_winit::winit::window::Window;
@@ -137,7 +137,13 @@ impl Widget for OverlayBox {
         ctx.place_child(&mut self.child, Point::ORIGIN);
     }
 
-    fn paint(&mut self, _ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, _scene: &mut Scene) {}
+    fn paint(
+        &mut self,
+        _ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        _painter: &mut Painter<'_>,
+    ) {
+    }
 
     fn accessibility_role(&self) -> Role {
         Role::GenericContainer

masonry/examples/layers.rs

@@ -29,9 +29,7 @@ use masonry::layout::LenReq;
 // ---
 use masonry::accesskit::{Node, Role};
 use masonry::core::{AccessCtx, PaintCtx};
-use masonry::kurbo::Affine;
-use masonry::peniko::Fill;
-use masonry::vello::Scene;
+use masonry::imaging::Painter;
 // ---
 use masonry::core::WidgetId;
 use tracing::{Span, trace_span};
@@ -152,15 +150,14 @@ impl Widget for ColorRectangle {
     // ---
 
     #[cfg(false)] // We show two `paint` implementations; check that both parse.
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, scene: &mut Scene) {
+    fn paint(
+        &mut self,
+        ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        painter: &mut Painter<'_>,
+    ) {
         let rect = ctx.size().to_rect();
-        scene.fill(
-            Fill::NonZero,
-            Affine::IDENTITY,
-            self.color,
-            Some(Affine::IDENTITY),
-            &rect,
-        );
+        painter.fill(rect, self.color).draw();
     }
 
     fn accessibility_role(&self) -> Role {
@@ -194,20 +191,19 @@ impl Widget for ColorRectangle {
     // Second implementation from "Creating a new widget" tutorial.
     // We use these methods in the trait, so that hovering is detected in our unit tests.
 
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, scene: &mut Scene) {
+    fn paint(
+        &mut self,
+        ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        painter: &mut Painter<'_>,
+    ) {
         let rect = ctx.content_box();
         let color = if ctx.is_hovered() {
             Color::WHITE
         } else {
             self.color
         };
-        scene.fill(
-            Fill::NonZero,
-            Affine::IDENTITY,
-            color,
-            Some(Affine::IDENTITY),
-            &rect,
-        );
+        painter.fill(rect, color).draw();
     }
 
     fn update(&mut self, ctx: &mut UpdateCtx<'_>, _props: &mut PropertiesMut<'_>, event: &Update) {
@@ -225,16 +221,17 @@ impl Widget for ColorRectangle {
 // Implementation from "Reading widget properties" tutorial.
 #[expect(dead_code, reason = "example code")]
 impl ColorRectangle {
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, props: &PropertiesRef<'_>, scene: &mut Scene) {
+    fn paint(
+        &mut self,
+        ctx: &mut PaintCtx<'_>,
+        props: &PropertiesRef<'_>,
+        painter: &mut Painter<'_>,
+    ) {
         let background = props.get::<Background>();
         let rect = ctx.content_box();
-        scene.fill(
-            Fill::NonZero,
-            Affine::IDENTITY,
-            &background.get_peniko_brush_for_rect(rect),
-            Some(Affine::IDENTITY),
-            &rect,
-        );
+        painter
+            .fill(rect, &background.get_peniko_brush_for_rect(rect))
+            .draw();
     }
 }
 

masonry/src/doc/color_rectangle.rs

@@ -278,7 +278,7 @@ use masonry::core::{
     AccessCtx, AccessEvent, EventCtx, NoAction, PaintCtx, PointerEvent, PropertiesRef, TextEvent,
     Update, UpdateCtx,
 };
-use masonry::vello::Scene;
+use masonry::imaging::Painter;
 
 impl Widget for VerticalStack {
     type Action = NoAction;
@@ -292,7 +292,13 @@ impl Widget for VerticalStack {
 
     // ...
 
-    fn paint(&mut self, _ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, _scene: &mut Scene) {}
+    fn paint(
+        &mut self,
+        _ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        _painter: &mut Painter<'_>,
+    ) {
+    }
 
     fn accessibility_role(&self) -> Role {
         Role::GenericContainer

masonry/src/doc/implementing_container_widget.md

@@ -37,7 +37,7 @@ trait Widget {
     fn measure(&mut self, ctx: &mut MeasureCtx<'_>, props: &PropertiesRef<'_>, axis: Axis, len_req: LenReq, cross_length: Option<f64>) -> f64;
     fn layout(&mut self, ctx: &mut LayoutCtx<'_>, props: &PropertiesRef<'_>, size: Size);
 
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, props: &PropertiesRef<'_>, scene: &mut Scene);
+    fn paint(&mut self, ctx: &mut PaintCtx<'_>, props: &PropertiesRef<'_>, painter: &mut Painter<'_>);
     fn accessibility_role(&self) -> Role;
     fn accessibility(&mut self, ctx: &mut AccessCtx<'_>, props: &PropertiesRef<'_>, node: &mut Node);
 
@@ -217,23 +217,20 @@ Next we write our render methods:
 // ...
 use masonry::accesskit::{Node, Role};
 use masonry::core::{AccessCtx, PaintCtx, PropertiesRef};
-use masonry::kurbo::Affine;
-use masonry::peniko::Fill;
-use masonry::vello::Scene;
+use masonry::imaging::Painter;
 // ...
 
 impl Widget for ColorRectangle {
     // ...
 
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, scene: &mut Scene) {
+    fn paint(
+        &mut self,
+        ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        painter: &mut Painter<'_>,
+    ) {
         let rect = ctx.content_box();
-        scene.fill(
-            Fill::NonZero,
-            Affine::IDENTITY,
-            self.color,
-            Some(Affine::IDENTITY),
-            &rect,
-        );
+        painter.fill(rect, self.color).draw();
     }
 
     fn accessibility_role(&self) -> Role {
@@ -253,7 +250,7 @@ impl Widget for ColorRectangle {
 }
 ```
 
-In our `paint` method, we're given a [`vello::Scene`] and paint a rectangle into it.
+In our `paint` method, we're given a [`Painter`](crate::imaging::Painter) and paint a rectangle into it.
 
 We use `ctx.content_box()` to get a rectangle that precisely covers the content area of our widget.
 
@@ -368,20 +365,19 @@ First, we update our paint method:
 impl Widget for ColorRectangle {
     // ...
 
-    fn paint(&mut self, ctx: &mut PaintCtx<'_>, _props: &PropertiesRef<'_>, scene: &mut Scene) {
+    fn paint(
+        &mut self,
+        ctx: &mut PaintCtx<'_>,
+        _props: &PropertiesRef<'_>,
+        painter: &mut Painter<'_>,
+    ) {
         let rect = ctx.content_box();
         let color = if ctx.is_hovered() {
             Color::WHITE
         } else {
             self.color
         };
-        scene.fill(
-            Fill::NonZero,
-            Affine::IDENTITY,
-            color,
-            Some(Affine::IDENTITY),
-            &rect,
-        );
+        painter.fill(rect, color).draw();
     }
 
     // ...
@@ -483,7 +479,7 @@ The next one is about creating a container widgets, and the complications it add
 [`Widget`]: crate::core::Widget
 [`WidgetMut`]: crate::core::WidgetMut
 [`PaintCtx::content_box()`]: crate::core::PaintCtx::content_box
-[`vello::Scene`]: vello::Scene
+[`Painter`]: crate::imaging::Painter
 [`Role::Button`]: accesskit::Role::Button
 [`RenderRoot::edit_base_layer()`]: crate::app::RenderRoot::edit_base_layer
 [`RenderRoot::edit_layer()`]: crate::app::RenderRoot::edit_layer