From 3136ecb90f220ef8359c31fa49492fcaeffd58b1 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Mon, 18 Nov 2024 22:43:56 +0100
Subject: [PATCH 01/18] Initial dirty hack to get transforms per widget working

---
 masonry/src/contexts.rs               | 10 ++++--
 masonry/src/passes/compose.rs         | 28 +++++++++--------
 masonry/src/passes/paint.rs           |  4 +--
 masonry/src/testing/helper_widgets.rs |  8 +++++
 masonry/src/widget/button.rs          | 21 +++++++++++--
 masonry/src/widget/flex.rs            | 17 +++++++++++
 masonry/src/widget/widget.rs          | 16 ++++++++--
 masonry/src/widget/widget_ref.rs      |  3 +-
 masonry/src/widget/widget_state.rs    | 12 +++++---
 xilem/examples/mason.rs               | 44 +++++++++++++++++++++------
 xilem/src/view/button.rs              | 21 +++++++++++--
 xilem/src/view/flex.rs                | 18 +++++++++--
 xilem/src/view/mod.rs                 | 32 +++++++++++++++++++
 13 files changed, 194 insertions(+), 40 deletions(-)

diff --git a/masonry/src/contexts.rs b/masonry/src/contexts.rs
index 823ba89eb..d470109bf 100644
--- a/masonry/src/contexts.rs
+++ b/masonry/src/contexts.rs
@@ -537,6 +537,12 @@ impl_context_method!(MutateCtx<'_>, EventCtx<'_>, UpdateCtx<'_>, {
         self.widget_state.request_compose = true;
     }
 
+    pub fn transform_changed(&mut self) {
+        trace!("transform_changed");
+        self.widget_state.transform_changed = true;
+        self.request_compose();
+    }
+
     /// Request an animation frame.
     pub fn request_anim_frame(&mut self) {
         trace!("request_anim_frame");
@@ -1092,7 +1098,7 @@ impl LayoutCtx<'_> {
         }
         if origin != self.get_child_state_mut(child).origin {
             self.get_child_state_mut(child).origin = origin;
-            self.get_child_state_mut(child).translation_changed = true;
+            self.get_child_state_mut(child).transform_changed = true;
         }
         self.get_child_state_mut(child)
             .is_expecting_place_child_call = false;
@@ -1133,7 +1139,7 @@ impl ComposeCtx<'_> {
         let child = self.get_child_state_mut(child);
         if translation != child.translation {
             child.translation = translation;
-            child.translation_changed = true;
+            child.transform_changed = true;
         }
     }
 }
diff --git a/masonry/src/passes/compose.rs b/masonry/src/passes/compose.rs
index 88cf7edc0..41558ecbc 100644
--- a/masonry/src/passes/compose.rs
+++ b/masonry/src/passes/compose.rs
@@ -3,7 +3,7 @@
 
 use tracing::info_span;
 use tree_arena::ArenaMut;
-use vello::kurbo::Vec2;
+use vello::kurbo::Affine;
 
 use crate::passes::{enter_span_if, recurse_on_children};
 use crate::render_root::{RenderRoot, RenderRootSignal, RenderRootState};
@@ -14,8 +14,8 @@ fn compose_widget(
     global_state: &mut RenderRootState,
     mut widget: ArenaMut<'_, Box<dyn Widget>>,
     mut state: ArenaMut<'_, WidgetState>,
-    parent_moved: bool,
-    parent_translation: Vec2,
+    parent_transformed: bool,
+    parent_window_transform: Affine,
 ) {
     let _span = enter_span_if(
         global_state.trace.compose,
@@ -24,14 +24,17 @@ fn compose_widget(
         state.reborrow(),
     );
 
-    let moved = parent_moved || state.item.translation_changed;
-    let translation = parent_translation + state.item.translation + state.item.origin.to_vec2();
-    state.item.window_origin = translation.to_point();
+    let transformed = parent_transformed || state.item.transform_changed;
 
-    if !parent_moved && !state.item.translation_changed && !state.item.needs_compose {
+    if !transformed && !state.item.needs_compose {
         return;
     }
 
+    state.item.window_transform = parent_window_transform
+        .then_translate(state.item.translation + state.item.origin.to_vec2())
+        * widget.item.transform();
+    state.item.window_origin = state.item.window_transform.translation().to_point();
+
     let mut ctx = ComposeCtx {
         global_state,
         widget_state: state.item,
@@ -43,7 +46,7 @@ fn compose_widget(
     }
 
     // TODO - Add unit tests for this.
-    if moved && state.item.accepts_text_input && global_state.is_focused(state.item.id) {
+    if transformed && state.item.accepts_text_input && global_state.is_focused(state.item.id) {
         let ime_area = state.item.get_ime_area();
         global_state.emit_signal(RenderRootSignal::new_ime_moved_signal(ime_area));
     }
@@ -55,9 +58,10 @@ fn compose_widget(
 
     state.item.needs_compose = false;
     state.item.request_compose = false;
-    state.item.translation_changed = false;
+    state.item.transform_changed = false;
 
     let id = state.item.id;
+    let parent_transform = state.item.window_transform;
     let parent_state = state.item;
     recurse_on_children(
         id,
@@ -68,8 +72,8 @@ fn compose_widget(
                 global_state,
                 widget,
                 state.reborrow_mut(),
-                moved,
-                translation,
+                transformed,
+                parent_transform,
             );
             parent_state.merge_up(state.item);
         },
@@ -92,6 +96,6 @@ pub(crate) fn run_compose_pass(root: &mut RenderRoot) {
         root_widget,
         root_state,
         false,
-        Vec2::ZERO,
+        Affine::IDENTITY,
     );
 }
diff --git a/masonry/src/passes/paint.rs b/masonry/src/passes/paint.rs
index fb059b44c..9686b7f9b 100644
--- a/masonry/src/passes/paint.rs
+++ b/masonry/src/passes/paint.rs
@@ -5,7 +5,7 @@ use std::collections::HashMap;
 
 use tracing::{info_span, trace};
 use tree_arena::ArenaMut;
-use vello::kurbo::{Affine, Stroke};
+use vello::kurbo::Stroke;
 use vello::peniko::Mix;
 use vello::Scene;
 
@@ -53,7 +53,7 @@ fn paint_widget(
 
     let clip = state.item.clip_path;
     let has_clip = clip.is_some();
-    let transform = Affine::translate(state.item.window_origin.to_vec2());
+    let transform = state.item.window_transform;
     let scene = scenes.get(&id).unwrap();
 
     if let Some(clip) = clip {
diff --git a/masonry/src/testing/helper_widgets.rs b/masonry/src/testing/helper_widgets.rs
index cf69eb506..b2b4903e0 100644
--- a/masonry/src/testing/helper_widgets.rs
+++ b/masonry/src/testing/helper_widgets.rs
@@ -413,6 +413,10 @@ impl<S: 'static> Widget for ModularWidget<S> {
     fn as_mut_any(&mut self) -> &mut dyn std::any::Any {
         self.as_mut_dyn_any()
     }
+
+    fn transform(&self) -> Affine {
+        Affine::IDENTITY
+    }
 }
 
 impl ReplaceChild {
@@ -613,4 +617,8 @@ impl<W: Widget> Widget for Recorder<W> {
     fn as_mut_any(&mut self) -> &mut dyn std::any::Any {
         self.child.as_mut_any()
     }
+
+    fn transform(&self) -> Affine {
+        self.child.transform()
+    }
 }
diff --git a/masonry/src/widget/button.rs b/masonry/src/widget/button.rs
index 551727e09..0eead488f 100644
--- a/masonry/src/widget/button.rs
+++ b/masonry/src/widget/button.rs
@@ -6,6 +6,7 @@
 use accesskit::{Node, Role};
 use smallvec::{smallvec, SmallVec};
 use tracing::{trace, trace_span, Span};
+use vello::kurbo::Affine;
 use vello::Scene;
 
 use crate::action::Action;
@@ -28,6 +29,7 @@ const LABEL_INSETS: Insets = Insets::uniform_xy(8., 2.);
 /// Emits [`Action::ButtonPressed`] when pressed.
 pub struct Button {
     label: WidgetPod<Label>,
+    transform: Affine,
 }
 
 // --- MARK: BUILDERS ---
@@ -41,7 +43,7 @@ impl Button {
     ///
     /// let button = Button::new("Increment");
     /// ```
-    pub fn new(text: impl Into<ArcStr>) -> Button {
+    pub fn new(text: impl Into<ArcStr>) -> Self {
         Button::from_label(Label::new(text))
     }
 
@@ -56,11 +58,17 @@ impl Button {
     /// let label = Label::new("Increment").with_brush(Color::rgb(0.5, 0.5, 0.5));
     /// let button = Button::from_label(label);
     /// ```
-    pub fn from_label(label: Label) -> Button {
+    pub fn from_label(label: Label) -> Self {
         Button {
             label: WidgetPod::new(label),
+            transform: Affine::IDENTITY,
         }
     }
+
+    pub fn with_transform(mut self, transform: Affine) -> Self {
+        self.transform = transform;
+        self
+    }
 }
 
 // --- MARK: WIDGETMUT ---
@@ -73,6 +81,11 @@ impl Button {
     pub fn label_mut<'t>(this: &'t mut WidgetMut<'_, Self>) -> WidgetMut<'t, Label> {
         this.ctx.get_mut(&mut this.widget.label)
     }
+
+    pub fn set_transform(this: &mut WidgetMut<'_, Self>, transform: Affine) {
+        this.widget.transform = transform;
+        this.ctx.transform_changed();
+    }
 }
 
 // --- MARK: IMPL WIDGET ---
@@ -213,6 +226,10 @@ impl Widget for Button {
     fn get_debug_text(&self) -> Option<String> {
         Some(self.label.as_ref().text().as_ref().to_string())
     }
+
+    fn transform(&self) -> Affine {
+        self.transform
+    }
 }
 
 // --- MARK: TESTS ---
diff --git a/masonry/src/widget/flex.rs b/masonry/src/widget/flex.rs
index 98e463505..bff9e815d 100644
--- a/masonry/src/widget/flex.rs
+++ b/masonry/src/widget/flex.rs
@@ -21,6 +21,7 @@ use crate::{
 /// This widget is the foundation of most layouts, and is highly configurable.
 pub struct Flex {
     direction: Axis,
+    transform: Affine,
     cross_alignment: CrossAxisAlignment,
     main_alignment: MainAxisAlignment,
     fill_major_axis: bool,
@@ -128,6 +129,7 @@ impl Flex {
             fill_major_axis: false,
             old_bc: BoxConstraints::tight(Size::ZERO),
             gap: None,
+            transform: Affine::IDENTITY,
         }
     }
 
@@ -165,6 +167,11 @@ impl Flex {
         self
     }
 
+    pub fn with_transform(mut self, transform: Affine) -> Self {
+        self.transform = transform;
+        self
+    }
+
     /// Builder-style method for setting the spacing along the
     /// major axis between any two elements in logical pixels.
     ///
@@ -328,6 +335,12 @@ impl Flex {
         this.ctx.request_layout();
     }
 
+    /// Set the transform (see [`Affine`]).
+    pub fn set_transform(this: &mut WidgetMut<'_, Self>, transform: Affine) {
+        this.widget.transform = transform;
+        this.ctx.transform_changed();
+    }
+
     /// Set the spacing along the major axis between any two elements in logical pixels.
     ///
     /// Equivalent to the css [gap] property.
@@ -1204,6 +1217,10 @@ impl Widget for Flex {
     fn make_trace_span(&self, ctx: &QueryCtx<'_>) -> Span {
         trace_span!("Flex", id = ctx.widget_id().trace())
     }
+
+    fn transform(&self) -> Affine {
+        self.transform
+    }
 }
 
 // --- MARK: TESTS ---
diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index 3134b86ae..3c3ce950c 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -12,6 +12,7 @@ use cursor_icon::CursorIcon;
 use smallvec::SmallVec;
 use tracing::field::DisplayValue;
 use tracing::{trace_span, Span};
+use vello::kurbo::Affine;
 use vello::Scene;
 
 use crate::contexts::ComposeCtx;
@@ -178,6 +179,10 @@ pub trait Widget: AsAny {
     /// responsible for visiting all their children during `layout` and `register_children`.
     fn children_ids(&self) -> SmallVec<[WidgetId; 16]>;
 
+    fn transform(&self) -> Affine {
+        Affine::IDENTITY
+    }
+
     /// Whether this widget gets pointer events and hovered status. True by default.
     ///
     /// If false, the widget will be treated as "transparent" for the pointer, meaning
@@ -308,10 +313,10 @@ pub(crate) fn get_child_at_pos<'c>(
     ctx: QueryCtx<'c>,
     pos: Point,
 ) -> Option<WidgetRef<'c, dyn Widget>> {
-    let relative_pos = pos - ctx.window_origin().to_vec2();
+    let local_pos = ctx.widget_state.window_transform.inverse() * pos;
     if !ctx
         .clip_path()
-        .map_or(true, |clip| clip.contains(relative_pos))
+        .map_or(true, |clip| clip.contains(local_pos))
     {
         return None;
     }
@@ -320,12 +325,13 @@ pub(crate) fn get_child_at_pos<'c>(
     // of overlapping children.
     for child_id in widget.children_ids().iter().rev() {
         let child = ctx.get(*child_id);
+        let local_pos = child.ctx().widget_state.window_transform.inverse() * pos;
 
         // The position must be inside the child's layout and inside the child's clip path (if
         // any).
         if !child.ctx().is_stashed()
             && child.ctx().accepts_pointer_interaction()
-            && child.ctx().window_layout_rect().contains(pos)
+            && child.ctx().size().to_rect().contains(local_pos)
         {
             return Some(child);
         }
@@ -507,4 +513,8 @@ impl Widget for Box<dyn Widget> {
     fn as_mut_any(&mut self) -> &mut dyn Any {
         self.deref_mut().as_mut_any()
     }
+
+    fn transform(&self) -> Affine {
+        self.deref().transform()
+    }
 }
diff --git a/masonry/src/widget/widget_ref.rs b/masonry/src/widget/widget_ref.rs
index 87f23cde6..f7cad13ee 100644
--- a/masonry/src/widget/widget_ref.rs
+++ b/masonry/src/widget/widget_ref.rs
@@ -165,9 +165,10 @@ impl<'w> WidgetRef<'w, dyn Widget> {
     /// **pos** - the position in global coordinates (e.g. `(0,0)` is the top-left corner of the
     /// window).
     pub fn find_widget_at_pos(&self, pos: Point) -> Option<WidgetRef<'_, dyn Widget>> {
+        let local_pos = self.ctx.widget_state.window_transform.inverse() * pos;
         let mut innermost_widget = *self;
 
-        if !self.ctx.window_layout_rect().contains(pos) {
+        if !self.ctx.size().to_rect().contains(local_pos) {
             return None;
         }
 
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index b1f7e50a2..ea17cf53b 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -3,7 +3,7 @@
 
 #![cfg(not(tarpaulin_include))]
 
-use vello::kurbo::{Insets, Point, Rect, Size, Vec2};
+use vello::kurbo::{Affine, Insets, Point, Rect, Size, Vec2};
 
 use crate::WidgetId;
 
@@ -79,9 +79,11 @@ pub(crate) struct WidgetState {
     // efficiently hold an arbitrary shape.
     pub(crate) clip_path: Option<Rect>,
 
-    // TODO - Handle matrix transforms
+    /// This is being computed out of the descendant transforms and `translation`
+    pub(crate) window_transform: Affine,
+    // TODO - Handle matrix transforms correctly
     pub(crate) translation: Vec2,
-    pub(crate) translation_changed: bool,
+    pub(crate) transform_changed: bool,
 
     // --- PASSES ---
     /// `WidgetAdded` hasn't been sent to this widget yet.
@@ -166,7 +168,7 @@ impl WidgetState {
             ime_area: None,
             clip_path: Default::default(),
             translation: Vec2::ZERO,
-            translation_changed: false,
+            transform_changed: false,
             is_explicitly_disabled: false,
             is_explicitly_stashed: false,
             is_disabled: false,
@@ -192,6 +194,7 @@ impl WidgetState {
             update_focus_chain: true,
             #[cfg(debug_assertions)]
             widget_name,
+            window_transform: Affine::IDENTITY,
         }
     }
 
@@ -265,6 +268,7 @@ impl WidgetState {
     ///
     /// By default, returns the same as [`Self::window_layout_rect`].
     pub(crate) fn get_ime_area(&self) -> Rect {
+        // TODO correctly calculate IME area based on transform
         self.ime_area.unwrap_or_else(|| self.size.to_rect()) + self.window_origin.to_vec2()
     }
 
diff --git a/xilem/examples/mason.rs b/xilem/examples/mason.rs
index c1bb393ee..101f7e9b5 100644
--- a/xilem/examples/mason.rs
+++ b/xilem/examples/mason.rs
@@ -7,14 +7,13 @@
 #![windows_subsystem = "windows"]
 #![expect(clippy::shadow_unrelated, reason = "Idiomatic for Xilem users")]
 
-use std::time::Duration;
-
+use std::time::{Duration, Instant};
 use winit::error::EventLoopError;
 use xilem::core::{fork, run_once};
 use xilem::tokio::time;
 use xilem::view::{
     button, button_any_pointer, checkbox, flex, label, prose, task, textbox, Axis, FlexExt as _,
-    FlexSpacer,
+    FlexSpacer, Transformable,
 };
 use xilem::{Color, EventLoop, EventLoopBuilder, TextAlignment, TextWeight, WidgetView, Xilem};
 const LOREM: &str = r"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi cursus mi sed euismod euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam placerat efficitur tellus at semper. Morbi ac risus magna. Donec ut cursus ex. Etiam quis posuere tellus. Mauris posuere dui et turpis mollis, vitae luctus tellus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu facilisis nisl.
@@ -96,10 +95,26 @@ fn app_logic(data: &mut AppData) -> impl WidgetView<AppData> {
         )),
         // The following `task` view only exists whilst the example is in the "active" state, so
         // the updates it performs will only be running whilst we are in that state.
-        data.active.then(|| {
+        (
+            data.active.then(|| {
+                task(
+                    |proxy| async move {
+                        let mut interval = time::interval(Duration::from_secs(1));
+                        loop {
+                            interval.tick().await;
+                            let Ok(()) = proxy.message(()) else {
+                                break;
+                            };
+                        }
+                    },
+                    |data: &mut AppData, ()| {
+                        data.count += 1;
+                    },
+                )
+            }),
             task(
                 |proxy| async move {
-                    let mut interval = time::interval(Duration::from_secs(1));
+                    let mut interval = time::interval(Duration::from_secs_f64(1.0 / 60.0));
                     loop {
                         interval.tick().await;
                         let Ok(()) = proxy.message(()) else {
@@ -108,15 +123,16 @@ fn app_logic(data: &mut AppData) -> impl WidgetView<AppData> {
                     }
                 },
                 |data: &mut AppData, ()| {
-                    data.count += 1;
+                    data.current_instant = Instant::now();
                 },
-            )
-        }),
+            ),
+        ),
     )
 }
 
 fn toggleable(data: &mut AppData) -> impl WidgetView<AppData> {
     if data.active {
+        let secs_since_start = (data.current_instant - data.start_instant).as_secs_f64();
         fork(
             flex((
                 button("Deactivate", |data: &mut AppData| {
@@ -124,8 +140,12 @@ fn toggleable(data: &mut AppData) -> impl WidgetView<AppData> {
                 }),
                 button("Unlimited Power", |data: &mut AppData| {
                     data.count = -1_000_000;
-                }),
+                })
+                .translate((-100.0, -20.0).into())
+                .rotate(secs_since_start)
+                .scale(secs_since_start.sin() + 1.5),
             ))
+            .scale(((secs_since_start + 0.5).sin() + 1.5) * 0.5)
             .direction(Axis::Horizontal),
             run_once(|| tracing::warn!("The pathway to unlimited power has been revealed")),
         )
@@ -137,6 +157,8 @@ fn toggleable(data: &mut AppData) -> impl WidgetView<AppData> {
 
 struct AppData {
     textbox_contents: String,
+    current_instant: Instant,
+    start_instant: Instant,
     count: i32,
     active: bool,
 }
@@ -144,8 +166,10 @@ struct AppData {
 fn run(event_loop: EventLoopBuilder) -> Result<(), EventLoopError> {
     let data = AppData {
         count: 0,
+        current_instant: Instant::now(),
+        start_instant: Instant::now(),
         textbox_contents: "Not quite a placeholder".into(),
-        active: false,
+        active: true,
     };
 
     Xilem::new(data, app_logic)
diff --git a/xilem/src/view/button.rs b/xilem/src/view/button.rs
index e44895f16..258c44415 100644
--- a/xilem/src/view/button.rs
+++ b/xilem/src/view/button.rs
@@ -2,12 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::text::ArcStr;
-use masonry::widget;
 pub use masonry::PointerButton;
+use masonry::{widget, Affine};
 
 use crate::core::{DynMessage, Mut, View, ViewMarker};
 use crate::{MessageResult, Pod, ViewCtx, ViewId};
 
+use super::Transformable;
+
 /// A button which calls `callback` when the primary mouse button (normally left) is pressed.
 pub fn button<State, Action>(
     label: impl Into<ArcStr>,
@@ -16,6 +18,7 @@ pub fn button<State, Action>(
 {
     Button {
         label: label.into(),
+        transform: Affine::IDENTITY,
         callback: move |state: &mut State, button| match button {
             PointerButton::Primary => MessageResult::Action(callback(state)),
             _ => MessageResult::Nop,
@@ -31,6 +34,7 @@ pub fn button_any_pointer<State, Action>(
 {
     Button {
         label: label.into(),
+        transform: Affine::IDENTITY,
         callback: move |state: &mut State, button| MessageResult::Action(callback(state, button)),
     }
 }
@@ -38,9 +42,16 @@ pub fn button_any_pointer<State, Action>(
 #[must_use = "View values do nothing unless provided to Xilem."]
 pub struct Button<F> {
     label: ArcStr,
+    transform: Affine,
     callback: F,
 }
 
+impl<F> Transformable for Button<F> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl<F> ViewMarker for Button<F> {}
 impl<F, State, Action> View<State, Action, ViewCtx> for Button<F>
 where
@@ -50,7 +61,9 @@ where
     type ViewState = ();
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
-        ctx.with_leaf_action_widget(|ctx| ctx.new_pod(widget::Button::new(self.label.clone())))
+        ctx.with_leaf_action_widget(|ctx| {
+            ctx.new_pod(widget::Button::new(self.label.clone()).with_transform(self.transform))
+        })
     }
 
     fn rebuild(
@@ -63,6 +76,10 @@ where
         if prev.label != self.label {
             widget::Button::set_text(&mut element, self.label.clone());
         }
+
+        if prev.transform != self.transform {
+            widget::Button::set_transform(&mut element, self.transform);
+        }
     }
 
     fn teardown(&self, _: &mut Self::ViewState, ctx: &mut ViewCtx, element: Mut<Self::Element>) {
diff --git a/xilem/src/view/flex.rs b/xilem/src/view/flex.rs
index e009fe8b2..60b39e9a5 100644
--- a/xilem/src/view/flex.rs
+++ b/xilem/src/view/flex.rs
@@ -5,7 +5,7 @@ use std::marker::PhantomData;
 
 use masonry::widget::{self, WidgetMut};
 pub use masonry::widget::{Axis, CrossAxisAlignment, FlexParams, MainAxisAlignment};
-use masonry::Widget;
+use masonry::{Affine, Widget};
 
 use crate::core::{
     AppendVec, DynMessage, ElementSplice, MessageResult, Mut, SuperElement, View, ViewElement,
@@ -19,6 +19,7 @@ pub fn flex<State, Action, Seq: FlexSequence<State, Action>>(
     Flex {
         sequence,
         axis: Axis::Vertical,
+        transform: Affine::IDENTITY,
         cross_axis_alignment: CrossAxisAlignment::Center,
         main_axis_alignment: MainAxisAlignment::Start,
         fill_major_axis: false,
@@ -31,6 +32,7 @@ pub fn flex<State, Action, Seq: FlexSequence<State, Action>>(
 pub struct Flex<Seq, State, Action = ()> {
     sequence: Seq,
     axis: Axis,
+    transform: Affine,
     cross_axis_alignment: CrossAxisAlignment,
     main_axis_alignment: MainAxisAlignment,
     fill_major_axis: bool,
@@ -85,6 +87,12 @@ impl<Seq, State, Action> Flex<Seq, State, Action> {
     }
 }
 
+impl<Seq, State, Action> Transformable for Flex<Seq, State, Action> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl<Seq, State, Action> ViewMarker for Flex<Seq, State, Action> {}
 impl<State, Action, Seq> View<State, Action, ViewCtx> for Flex<Seq, State, Action>
 where
@@ -102,7 +110,8 @@ where
             .raw_gap(self.gap)
             .cross_axis_alignment(self.cross_axis_alignment)
             .must_fill_main_axis(self.fill_major_axis)
-            .main_axis_alignment(self.main_axis_alignment);
+            .main_axis_alignment(self.main_axis_alignment)
+            .with_transform(self.transform);
         let seq_state = self.sequence.seq_build(ctx, &mut elements);
         for child in elements.into_inner() {
             widget = match child {
@@ -126,6 +135,9 @@ where
         if prev.axis != self.axis {
             widget::Flex::set_direction(&mut element, self.axis);
         }
+        if prev.transform != self.transform {
+            widget::Flex::set_transform(&mut element, self.transform);
+        }
         if prev.cross_axis_alignment != self.cross_axis_alignment {
             widget::Flex::set_cross_axis_alignment(&mut element, self.cross_axis_alignment);
         }
@@ -634,6 +646,8 @@ mod hidden {
 }
 use hidden::AnyFlexChildState;
 
+use super::Transformable;
+
 impl<State, Action> ViewMarker for AnyFlexChild<State, Action> {}
 impl<State, Action> View<State, Action, ViewCtx> for AnyFlexChild<State, Action>
 where
diff --git a/xilem/src/view/mod.rs b/xilem/src/view/mod.rs
index b879de45f..ae31ae2b0 100644
--- a/xilem/src/view/mod.rs
+++ b/xilem/src/view/mod.rs
@@ -3,6 +3,38 @@
 
 //! Views for the widgets which are built-in to Masonry. These are the primitives your Xilem app's view tree will generally be constructed from.
 
+pub trait Transformable: Sized {
+    fn transform_mut(&mut self) -> &mut masonry::Affine;
+
+    #[must_use]
+    fn rotate(mut self, radians: f64) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_rotate(radians);
+        self
+    }
+
+    #[must_use]
+    fn scale(mut self, uniform: f64) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_scale(uniform);
+        self
+    }
+
+    #[must_use]
+    fn scale_non_uniform(mut self, x: f64, y: f64) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_scale_non_uniform(x, y);
+        self
+    }
+
+    #[must_use]
+    fn translate(mut self, v: masonry::Vec2) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_translate(v);
+        self
+    }
+}
+
 mod task;
 pub use task::*;
 

From 16063029f0c9815a68511b5b55a87c719b765703 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 23 Nov 2024 00:22:09 +0100
Subject: [PATCH 02/18] Handle pointer-events correctly, with a BVH (hieararchy
 is the widget-tree) and fix transform issues.

---
 masonry/src/event.rs                  |  7 +++++
 masonry/src/passes/compose.rs         | 11 +++++--
 masonry/src/passes/event.rs           |  7 +++--
 masonry/src/passes/paint.rs           |  8 ++---
 masonry/src/testing/helper_widgets.rs | 18 +++++++-----
 masonry/src/widget/portal.rs          | 18 +++++++++++-
 masonry/src/widget/scroll_bar.rs      | 12 +++-----
 masonry/src/widget/widget.rs          | 33 ++++++++++++++++-----
 masonry/src/widget/widget_ref.rs      | 42 ++++++++++++++++-----------
 masonry/src/widget/widget_state.rs    |  3 ++
 xilem/examples/http_cats.rs           | 21 +++++++++-----
 xilem/examples/mason.rs               |  2 +-
 xilem/src/view/mod.rs                 |  4 +--
 xilem/src/view/portal.rs              | 18 ++++++++++--
 14 files changed, 141 insertions(+), 63 deletions(-)

diff --git a/masonry/src/event.rs b/masonry/src/event.rs
index 29294f62c..3068f9641 100644
--- a/masonry/src/event.rs
+++ b/masonry/src/event.rs
@@ -5,6 +5,7 @@
 
 use std::path::PathBuf;
 
+use vello::kurbo::Point;
 use winit::event::{Force, Ime, KeyEvent, Modifiers};
 use winit::keyboard::ModifiersState;
 
@@ -379,6 +380,12 @@ impl PointerEvent {
             PointerEvent::Pinch(_, _) => true,
         }
     }
+
+    // TODO Logical/PhysicalPosition as return type instead?
+    pub fn local_position(&self, ctx: &crate::EventCtx) -> Point {
+        let position = self.pointer_state().position;
+        ctx.widget_state.window_transform.inverse() * Point::new(position.x, position.y)
+    }
 }
 
 impl TextEvent {
diff --git a/masonry/src/passes/compose.rs b/masonry/src/passes/compose.rs
index 41558ecbc..2f403166b 100644
--- a/masonry/src/passes/compose.rs
+++ b/masonry/src/passes/compose.rs
@@ -30,10 +30,14 @@ fn compose_widget(
         return;
     }
 
-    state.item.window_transform = parent_window_transform
-        .then_translate(state.item.translation + state.item.origin.to_vec2())
-        * widget.item.transform();
+    let local_translation = state.item.translation + state.item.origin.to_vec2();
+    state.item.window_transform =
+        parent_window_transform * widget.item.transform().then_translate(local_translation);
     state.item.window_origin = state.item.window_transform.translation().to_point();
+    state.item.bbox = state
+        .item
+        .window_transform
+        .transform_rect_bbox(state.item.size.to_rect());
 
     let mut ctx = ComposeCtx {
         global_state,
@@ -75,6 +79,7 @@ fn compose_widget(
                 transformed,
                 parent_transform,
             );
+            parent_state.bbox = parent_state.bbox.union(state.item.bbox);
             parent_state.merge_up(state.item);
         },
     );
diff --git a/masonry/src/passes/event.rs b/masonry/src/passes/event.rs
index 3a9e3c23a..288bcdc78 100644
--- a/masonry/src/passes/event.rs
+++ b/masonry/src/passes/event.rs
@@ -22,9 +22,10 @@ fn get_target_widget(
     if let Some(pointer_pos) = pointer_pos {
         // TODO - Apply scale?
         let pointer_pos = (pointer_pos.x, pointer_pos.y).into();
-        return root
-            .get_root_widget()
-            .find_widget_at_pos(pointer_pos)
+        let root_widget = root.get_root_widget();
+        return root_widget
+            .widget
+            .find_widget_at_pos(root_widget.ctx, pointer_pos)
             .map(|widget| widget.id());
     }
 
diff --git a/masonry/src/passes/paint.rs b/masonry/src/passes/paint.rs
index 9686b7f9b..5a08c06dd 100644
--- a/masonry/src/passes/paint.rs
+++ b/masonry/src/passes/paint.rs
@@ -5,10 +5,10 @@ use std::collections::HashMap;
 
 use tracing::{info_span, trace};
 use tree_arena::ArenaMut;
-use vello::kurbo::Stroke;
 use vello::peniko::Mix;
 use vello::Scene;
 
+use crate::paint_scene_helpers::stroke;
 use crate::passes::{enter_span_if, recurse_on_children};
 use crate::render_root::{RenderRoot, RenderRootState};
 use crate::theme::get_debug_color;
@@ -63,7 +63,7 @@ fn paint_widget(
     complete_scene.append(scene, Some(transform));
 
     let id = state.item.id;
-    let size = state.item.size;
+    let bbox = state.item.bbox;
     let parent_state = state.item;
     recurse_on_children(
         id,
@@ -93,9 +93,9 @@ fn paint_widget(
 
     if debug_paint {
         const BORDER_WIDTH: f64 = 1.0;
-        let rect = size.to_rect().inset(BORDER_WIDTH / -2.0);
         let color = get_debug_color(id.to_raw());
-        complete_scene.stroke(&Stroke::new(BORDER_WIDTH), transform, color, None, &rect);
+        let rect = bbox.inset(BORDER_WIDTH / -2.0);
+        stroke(complete_scene, &rect, color, BORDER_WIDTH);
     }
 
     if has_clip {
diff --git a/masonry/src/testing/helper_widgets.rs b/masonry/src/testing/helper_widgets.rs
index b2b4903e0..0a8aabaf9 100644
--- a/masonry/src/testing/helper_widgets.rs
+++ b/masonry/src/testing/helper_widgets.rs
@@ -16,7 +16,7 @@ use accesskit::{Node, Role};
 use smallvec::SmallVec;
 use tracing::trace_span;
 use vello::Scene;
-use widget::widget::get_child_at_pos;
+use widget::widget::{get_child_at_pos, AsDynWidget as _};
 use widget::WidgetRef;
 
 use crate::event::{PointerEvent, TextEvent};
@@ -390,12 +390,16 @@ impl<S: 'static> Widget for ModularWidget<S> {
         CursorIcon::Default
     }
 
-    fn get_child_at_pos<'c>(
-        &self,
+    fn find_widget_at_pos<'c>(
+        &'c self,
         ctx: QueryCtx<'c>,
         pos: Point,
     ) -> Option<WidgetRef<'c, dyn Widget>> {
-        get_child_at_pos(self, ctx, pos)
+        (WidgetRef {
+            widget: self.as_dyn(),
+            ctx,
+        })
+        .find_widget_at_pos(pos)
     }
 
     fn type_name(&self) -> &'static str {
@@ -594,12 +598,12 @@ impl<W: Widget> Widget for Recorder<W> {
         self.child.get_cursor(ctx, pos)
     }
 
-    fn get_child_at_pos<'c>(
-        &self,
+    fn find_widget_at_pos<'c>(
+        &'c self,
         ctx: QueryCtx<'c>,
         pos: Point,
     ) -> Option<WidgetRef<'c, dyn Widget>> {
-        self.child.get_child_at_pos(ctx, pos)
+        self.child.find_widget_at_pos(ctx, pos)
     }
 
     fn type_name(&self) -> &'static str {
diff --git a/masonry/src/widget/portal.rs b/masonry/src/widget/portal.rs
index 6fa5169e0..e3f8d3ec6 100644
--- a/masonry/src/widget/portal.rs
+++ b/masonry/src/widget/portal.rs
@@ -8,7 +8,7 @@ use std::ops::Range;
 use accesskit::{Node, Role};
 use smallvec::{smallvec, SmallVec};
 use tracing::{trace_span, Span};
-use vello::kurbo::{Point, Rect, Size, Vec2};
+use vello::kurbo::{Affine, Point, Rect, Size, Vec2};
 use vello::Scene;
 
 use crate::widget::{Axis, ScrollBar, WidgetMut};
@@ -37,6 +37,7 @@ pub struct Portal<W: Widget> {
     scrollbar_horizontal_visible: bool,
     scrollbar_vertical: WidgetPod<ScrollBar>,
     scrollbar_vertical_visible: bool,
+    transform: Affine,
 }
 
 // --- MARK: BUILDERS ---
@@ -57,6 +58,7 @@ impl<W: Widget> Portal<W> {
             scrollbar_horizontal_visible: false,
             scrollbar_vertical: WidgetPod::new(ScrollBar::new(Axis::Vertical, 1.0, 1.0)),
             scrollbar_vertical_visible: false,
+            transform: Affine::IDENTITY,
         }
     }
 
@@ -99,6 +101,11 @@ impl<W: Widget> Portal<W> {
         self.must_fill = must_fill;
         self
     }
+
+    pub fn with_transform(mut self, transform: Affine) -> Self {
+        self.transform = transform;
+        self
+    }
 }
 
 fn compute_pan_range(mut viewport: Range<f64>, target: Range<f64>) -> Range<f64> {
@@ -253,6 +260,11 @@ impl<W: Widget> Portal<W> {
 
         Self::set_viewport_pos(this, Point::new(new_pos_x, new_pos_y))
     }
+
+    pub fn set_transform(this: &mut WidgetMut<'_, Self>, transform: Affine) {
+        this.widget.transform = transform;
+        this.ctx.transform_changed();
+    }
 }
 
 // --- MARK: IMPL WIDGET ---
@@ -470,6 +482,10 @@ impl<W: Widget> Widget for Portal<W> {
     fn make_trace_span(&self, ctx: &QueryCtx<'_>) -> Span {
         trace_span!("Portal", id = ctx.widget_id().trace())
     }
+
+    fn transform(&self) -> Affine {
+        self.transform
+    }
 }
 
 // --- MARK: TESTS ---
diff --git a/masonry/src/widget/scroll_bar.rs b/masonry/src/widget/scroll_bar.rs
index 6475051e4..6a97f8e71 100644
--- a/masonry/src/widget/scroll_bar.rs
+++ b/masonry/src/widget/scroll_bar.rs
@@ -124,14 +124,12 @@ impl ScrollBar {
 impl Widget for ScrollBar {
     fn on_pointer_event(&mut self, ctx: &mut EventCtx, event: &PointerEvent) {
         match event {
-            PointerEvent::PointerDown(_, state) => {
+            PointerEvent::PointerDown(_, _) => {
                 ctx.capture_pointer();
 
                 let cursor_min_length = theme::SCROLLBAR_MIN_SIZE;
                 let cursor_rect = self.get_cursor_rect(ctx.size(), cursor_min_length);
-
-                let mouse_pos =
-                    Point::new(state.position.x, state.position.y) - ctx.window_origin().to_vec2();
+                let mouse_pos = event.local_position(ctx);
                 if cursor_rect.contains(mouse_pos) {
                     let (z0, z1) = self.axis.major_span(cursor_rect);
                     let mouse_major = self.axis.major_pos(mouse_pos);
@@ -144,16 +142,14 @@ impl Widget for ScrollBar {
                 };
                 ctx.request_render();
             }
-            PointerEvent::PointerMove(state) => {
-                let mouse_pos =
-                    Point::new(state.position.x, state.position.y) - ctx.window_origin().to_vec2();
+            PointerEvent::PointerMove(_) => {
                 if let Some(grab_anchor) = self.grab_anchor {
                     let cursor_min_length = theme::SCROLLBAR_MIN_SIZE;
                     self.cursor_progress = self.progress_from_mouse_pos(
                         ctx.size(),
                         cursor_min_length,
                         grab_anchor,
-                        mouse_pos,
+                        event.local_position(ctx),
                     );
                     self.moved = true;
                 }
diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index 3c3ce950c..ac758983b 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -53,6 +53,21 @@ impl WidgetId {
     }
 }
 
+pub trait AsDynWidget {
+    fn as_dyn(&self) -> &dyn Widget;
+    fn as_mut_dyn(&mut self) -> &mut dyn Widget;
+}
+
+impl<T: Widget> AsDynWidget for T {
+    fn as_dyn(&self) -> &dyn Widget {
+        self as &dyn Widget
+    }
+
+    fn as_mut_dyn(&mut self) -> &mut dyn Widget {
+        self as &mut dyn Widget
+    }
+}
+
 // TODO - Add tutorial: implementing a widget - See https://github.com/linebender/xilem/issues/376
 /// The trait implemented by all widgets.
 ///
@@ -75,7 +90,7 @@ impl WidgetId {
 /// widget is mutated either during a method call (eg `on_event` or `update`) or
 /// through a [`WidgetMut`](crate::widget::WidgetMut).
 #[allow(unused_variables)]
-pub trait Widget: AsAny {
+pub trait Widget: AsAny + AsDynWidget {
     /// Handle an event - usually user interaction.
     ///
     /// A number of different events (in the [`Event`] enum) are handled in this
@@ -261,12 +276,16 @@ pub trait Widget: AsAny {
     ///
     /// **pos** - the position in global coordinates (e.g. `(0,0)` is the top-left corner of the
     /// window).
-    fn get_child_at_pos<'c>(
-        &self,
+    fn find_widget_at_pos<'c>(
+        &'c self,
         ctx: QueryCtx<'c>,
         pos: Point,
     ) -> Option<WidgetRef<'c, dyn Widget>> {
-        get_child_at_pos(self, ctx, pos)
+        (WidgetRef {
+            widget: self.as_dyn(),
+            ctx,
+        })
+        .find_widget_at_pos(pos)
     }
 
     /// Get the (verbose) type name of the widget for debugging purposes.
@@ -498,12 +517,12 @@ impl Widget for Box<dyn Widget> {
         self.deref().get_cursor(ctx, pos)
     }
 
-    fn get_child_at_pos<'c>(
-        &self,
+    fn find_widget_at_pos<'c>(
+        &'c self,
         ctx: QueryCtx<'c>,
         pos: Point,
     ) -> Option<WidgetRef<'c, dyn Widget>> {
-        self.deref().get_child_at_pos(ctx, pos)
+        self.deref().find_widget_at_pos(ctx, pos)
     }
 
     fn as_any(&self) -> &dyn Any {
diff --git a/masonry/src/widget/widget_ref.rs b/masonry/src/widget/widget_ref.rs
index f7cad13ee..1bbf3dfd7 100644
--- a/masonry/src/widget/widget_ref.rs
+++ b/masonry/src/widget/widget_ref.rs
@@ -159,30 +159,38 @@ impl<'w> WidgetRef<'w, dyn Widget> {
     }
 
     /// Recursively find the innermost widget at the given position, using
-    /// [`Widget::get_child_at_pos`] to descend the widget tree. If `self` does not contain the
+    /// [`Widget::find_widget_at_pos`] to descend the widget tree. If `self` does not contain the
     /// given position in its layout rect or clip path, this returns `None`.
     ///
     /// **pos** - the position in global coordinates (e.g. `(0,0)` is the top-left corner of the
     /// window).
-    pub fn find_widget_at_pos(&self, pos: Point) -> Option<WidgetRef<'_, dyn Widget>> {
-        let local_pos = self.ctx.widget_state.window_transform.inverse() * pos;
-        let mut innermost_widget = *self;
+    pub fn find_widget_at_pos(&self, pos: Point) -> Option<WidgetRef<'w, dyn Widget>> {
+        if self.ctx.widget_state.bbox.contains(pos) {
+            let local_pos = self.ctx().widget_state.window_transform.inverse() * pos;
 
-        if !self.ctx.size().to_rect().contains(local_pos) {
-            return None;
-        }
+            if Some(false) == self.ctx.clip_path().map(|clip| clip.contains(local_pos)) {
+                return None;
+            }
 
-        // TODO: add debug assertion to check whether the child returned by
-        // `Widget::get_child_at_pos` upholds the conditions of that method. See
-        // https://github.com/linebender/xilem/pull/565#discussion_r1756536870
-        while let Some(child) = innermost_widget
-            .widget
-            .get_child_at_pos(innermost_widget.ctx, pos)
-        {
-            innermost_widget = child;
+            // Assumes `Self::children_ids` is in increasing "z-order", picking the last child in case
+            // of overlapping children.
+            for child_id in self.children_ids().iter().rev() {
+                let child_ref = self.ctx.get(*child_id);
+                if let Some(child) = child_ref.widget.find_widget_at_pos(child_ref.ctx, pos) {
+                    return Some(child);
+                }
+            }
+            if !self.ctx.is_stashed()
+                && self.ctx.accepts_pointer_interaction()
+                && self.ctx.size().to_rect().contains(local_pos)
+            {
+                Some(*self)
+            } else {
+                None
+            }
+        } else {
+            None
         }
-
-        Some(innermost_widget)
     }
 }
 
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index ea17cf53b..d68252a5f 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -53,6 +53,8 @@ pub(crate) struct WidgetState {
     // TODO - Document
     // The computed paint rect, in local coordinates.
     pub(crate) local_paint_rect: Rect,
+    /// An axis aligned bounding box (AABB), containing itself and all its descendents.
+    pub(crate) bbox: Rect,
     /// The offset of the baseline relative to the bottom of the widget.
     ///
     /// In general, this will be zero; the bottom of the widget will be considered
@@ -195,6 +197,7 @@ impl WidgetState {
             #[cfg(debug_assertions)]
             widget_name,
             window_transform: Affine::IDENTITY,
+            bbox: Rect::ZERO,
         }
     }
 
diff --git a/xilem/examples/http_cats.rs b/xilem/examples/http_cats.rs
index f3dd486dd..05111fb8d 100644
--- a/xilem/examples/http_cats.rs
+++ b/xilem/examples/http_cats.rs
@@ -8,6 +8,7 @@
 #![expect(clippy::match_same_arms, reason = "Deferred: Noisy")]
 #![expect(clippy::missing_assert_message, reason = "Deferred: Noisy")]
 
+use std::f64::consts::PI;
 use std::sync::Arc;
 
 use vello::peniko::{Blob, Image};
@@ -18,7 +19,7 @@ use xilem::core::fork;
 use xilem::core::one_of::OneOf3;
 use xilem::view::{
     button, flex, image, inline_prose, portal, prose, sized_box, spinner, worker, Axis, FlexExt,
-    FlexSpacer, Padding,
+    FlexSpacer, Padding, Transformable,
 };
 use xilem::{Color, EventLoop, EventLoopBuilder, TextAlignment, WidgetView, Xilem};
 
@@ -47,13 +48,17 @@ enum ImageState {
 
 impl HttpCats {
     fn view(&mut self) -> impl WidgetView<HttpCats> {
-        let left_column = sized_box(portal(flex((
-            prose("Status"),
-            self.statuses
-                .iter_mut()
-                .map(Status::list_view)
-                .collect::<Vec<_>>(),
-        ))))
+        let left_column = sized_box(
+            portal(flex((
+                prose("Status"),
+                self.statuses
+                    .iter_mut()
+                    .map(Status::list_view)
+                    .collect::<Vec<_>>(),
+            )))
+            .rotate(PI * 0.125)
+            .translate((200.0, 0.0)),
+        )
         .padding(Padding::leading(5.));
 
         let (info_area, worker_value) = if let Some(selected_code) = self.selected_code {
diff --git a/xilem/examples/mason.rs b/xilem/examples/mason.rs
index 101f7e9b5..0d987523d 100644
--- a/xilem/examples/mason.rs
+++ b/xilem/examples/mason.rs
@@ -141,7 +141,7 @@ fn toggleable(data: &mut AppData) -> impl WidgetView<AppData> {
                 button("Unlimited Power", |data: &mut AppData| {
                     data.count = -1_000_000;
                 })
-                .translate((-100.0, -20.0).into())
+                .translate((-100.0, -20.0))
                 .rotate(secs_since_start)
                 .scale(secs_since_start.sin() + 1.5),
             ))
diff --git a/xilem/src/view/mod.rs b/xilem/src/view/mod.rs
index ae31ae2b0..722ff4359 100644
--- a/xilem/src/view/mod.rs
+++ b/xilem/src/view/mod.rs
@@ -28,9 +28,9 @@ pub trait Transformable: Sized {
     }
 
     #[must_use]
-    fn translate(mut self, v: masonry::Vec2) -> Self {
+    fn translate(mut self, v: impl Into<masonry::Vec2>) -> Self {
         let transform = self.transform_mut();
-        *transform = transform.then_translate(v);
+        *transform = transform.then_translate(v.into());
         self
     }
 }
diff --git a/xilem/src/view/portal.rs b/xilem/src/view/portal.rs
index 5f906296a..90100d339 100644
--- a/xilem/src/view/portal.rs
+++ b/xilem/src/view/portal.rs
@@ -3,11 +3,13 @@
 
 use std::marker::PhantomData;
 
-use masonry::widget;
+use masonry::{widget, Affine};
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{MessageResult, Pod, View, ViewCtx, ViewId, WidgetView};
 
+use super::Transformable;
+
 /// A view which puts `child` into a scrollable region.
 ///
 /// This corresponds to the Masonry [`Portal`](masonry::widget::Portal) widget.
@@ -17,6 +19,7 @@ where
 {
     Portal {
         child,
+        transform: Affine::IDENTITY,
         phantom: PhantomData,
     }
 }
@@ -24,6 +27,7 @@ where
 #[must_use = "View values do nothing unless provided to Xilem."]
 pub struct Portal<V, State, Action> {
     child: V,
+    transform: Affine,
     phantom: PhantomData<(State, Action)>,
 }
 
@@ -41,7 +45,8 @@ where
         // The Portal `View` doesn't get any messages directly (yet - scroll events?), so doesn't need to
         // use ctx.with_id.
         let (child, child_state) = self.child.build(ctx);
-        let widget_pod = ctx.new_pod(widget::Portal::new_pod(child.inner));
+        let widget_pod =
+            ctx.new_pod(widget::Portal::new_pod(child.inner).with_transform(self.transform));
         (widget_pod, child_state)
     }
 
@@ -52,6 +57,9 @@ where
         ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            widget::Portal::set_transform(&mut element, self.transform);
+        }
         let child_element = widget::Portal::child_mut(&mut element);
         self.child
             .rebuild(&prev.child, view_state, ctx, child_element);
@@ -77,3 +85,9 @@ where
         self.child.message(view_state, id_path, message, app_state)
     }
 }
+
+impl<V, State, Action> Transformable for Portal<V, State, Action> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}

From fd8cba1524d7d84f202d78ea25a97f4ec72d3871 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 23 Nov 2024 00:46:15 +0100
Subject: [PATCH 03/18] Fix Text pointer events in `TextArea` when a transform
 is applied.

---
 masonry/src/widget/text_area.rs | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/masonry/src/widget/text_area.rs b/masonry/src/widget/text_area.rs
index 5dd81530a..01e5d72ec 100644
--- a/masonry/src/widget/text_area.rs
+++ b/masonry/src/widget/text_area.rs
@@ -466,15 +466,11 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
             return;
         }
 
-        let window_origin = ctx.widget_state.window_origin();
         let (fctx, lctx) = ctx.text_contexts();
         let is_rtl = self.editor.layout(fctx, lctx).is_rtl();
-        let inner_origin = Point::new(
-            window_origin.x + self.padding.get_left(is_rtl),
-            window_origin.y + self.padding.top,
-        );
+        let padding = Point::new(self.padding.get_left(is_rtl), self.padding.top);
         match event {
-            PointerEvent::PointerDown(button, state) => {
+            PointerEvent::PointerDown(button, _) => {
                 if !ctx.is_disabled() && *button == PointerButton::Primary {
                     let now = Instant::now();
                     if let Some(last) = self.last_click_time.take() {
@@ -488,7 +484,7 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
                     }
                     self.last_click_time = Some(now);
                     let click_count = self.click_count;
-                    let cursor_pos = Point::new(state.position.x, state.position.y) - inner_origin;
+                    let cursor_pos = event.local_position(ctx) - padding;
                     let (fctx, lctx) = ctx.text_contexts();
                     let mut drv = self.editor.driver(fctx, lctx);
                     match click_count {
@@ -505,9 +501,9 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
                     ctx.capture_pointer();
                 }
             }
-            PointerEvent::PointerMove(state) => {
+            PointerEvent::PointerMove(_) => {
                 if !ctx.is_disabled() && ctx.has_pointer_capture() {
-                    let cursor_pos = Point::new(state.position.x, state.position.y) - inner_origin;
+                    let cursor_pos = event.local_position(ctx) - padding;
                     let (fctx, lctx) = ctx.text_contexts();
                     self.editor
                         .driver(fctx, lctx)

From 61a0b133519c8fdc579e6a3117a0d215538eb256 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 23 Nov 2024 00:48:31 +0100
Subject: [PATCH 04/18] Remove unused code

---
 masonry/src/testing/helper_widgets.rs |  2 +-
 masonry/src/widget/widget.rs          | 32 ---------------------------
 2 files changed, 1 insertion(+), 33 deletions(-)

diff --git a/masonry/src/testing/helper_widgets.rs b/masonry/src/testing/helper_widgets.rs
index 0a8aabaf9..29040e817 100644
--- a/masonry/src/testing/helper_widgets.rs
+++ b/masonry/src/testing/helper_widgets.rs
@@ -16,7 +16,7 @@ use accesskit::{Node, Role};
 use smallvec::SmallVec;
 use tracing::trace_span;
 use vello::Scene;
-use widget::widget::{get_child_at_pos, AsDynWidget as _};
+use widget::widget::AsDynWidget as _;
 use widget::WidgetRef;
 
 use crate::event::{PointerEvent, TextEvent};
diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index ac758983b..2e19c07c6 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -327,38 +327,6 @@ pub trait Widget: AsAny + AsDynWidget {
     }
 }
 
-pub(crate) fn get_child_at_pos<'c>(
-    widget: &(impl Widget + ?Sized),
-    ctx: QueryCtx<'c>,
-    pos: Point,
-) -> Option<WidgetRef<'c, dyn Widget>> {
-    let local_pos = ctx.widget_state.window_transform.inverse() * pos;
-    if !ctx
-        .clip_path()
-        .map_or(true, |clip| clip.contains(local_pos))
-    {
-        return None;
-    }
-
-    // Assumes `Self::children_ids` is in increasing "z-order", picking the last child in case
-    // of overlapping children.
-    for child_id in widget.children_ids().iter().rev() {
-        let child = ctx.get(*child_id);
-        let local_pos = child.ctx().widget_state.window_transform.inverse() * pos;
-
-        // The position must be inside the child's layout and inside the child's clip path (if
-        // any).
-        if !child.ctx().is_stashed()
-            && child.ctx().accepts_pointer_interaction()
-            && child.ctx().size().to_rect().contains(local_pos)
-        {
-            return Some(child);
-        }
-    }
-
-    None
-}
-
 /// Marker trait for Widgets whose parents can get a raw mutable reference to them.
 ///
 /// "Raw mut" means using a mutable reference (eg `&mut MyWidget`) to the data

From 7f0b1a7a3940c47552eeafe4916627802e75f298 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 23 Nov 2024 01:54:22 +0100
Subject: [PATCH 05/18] Make find_widget_at_pos behavior more correct

---
 masonry/src/widget/widget.rs     | 44 ++++++++++++++++++++++++++++----
 masonry/src/widget/widget_ref.rs | 27 +-------------------
 2 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index 2e19c07c6..34735490f 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -281,11 +281,13 @@ pub trait Widget: AsAny + AsDynWidget {
         ctx: QueryCtx<'c>,
         pos: Point,
     ) -> Option<WidgetRef<'c, dyn Widget>> {
-        (WidgetRef {
-            widget: self.as_dyn(),
-            ctx,
-        })
-        .find_widget_at_pos(pos)
+        find_widget_at_pos(
+            &WidgetRef {
+                widget: self.as_dyn(),
+                ctx,
+            },
+            pos,
+        )
     }
 
     /// Get the (verbose) type name of the widget for debugging purposes.
@@ -327,6 +329,38 @@ pub trait Widget: AsAny + AsDynWidget {
     }
 }
 
+pub(crate) fn find_widget_at_pos<'c>(
+    widget: &WidgetRef<'c, dyn Widget>,
+    pos: Point,
+) -> Option<WidgetRef<'c, dyn Widget>> {
+    if widget.ctx.widget_state.bbox.contains(pos) {
+        let local_pos = widget.ctx().widget_state.window_transform.inverse() * pos;
+
+        if Some(false) == widget.ctx.clip_path().map(|clip| clip.contains(local_pos)) {
+            return None;
+        }
+
+        // Assumes `Self::children_ids` is in increasing "z-order", picking the last child in case
+        // of overlapping children.
+        for child_id in widget.children_ids().iter().rev() {
+            let child_ref = widget.ctx.get(*child_id);
+            if let Some(child) = child_ref.widget.find_widget_at_pos(child_ref.ctx, pos) {
+                return Some(child);
+            }
+        }
+        if !widget.ctx.is_stashed()
+            && widget.ctx.accepts_pointer_interaction()
+            && widget.ctx.size().to_rect().contains(local_pos)
+        {
+            Some(*widget)
+        } else {
+            None
+        }
+    } else {
+        None
+    }
+}
+
 /// Marker trait for Widgets whose parents can get a raw mutable reference to them.
 ///
 /// "Raw mut" means using a mutable reference (eg `&mut MyWidget`) to the data
diff --git a/masonry/src/widget/widget_ref.rs b/masonry/src/widget/widget_ref.rs
index 1bbf3dfd7..55798289f 100644
--- a/masonry/src/widget/widget_ref.rs
+++ b/masonry/src/widget/widget_ref.rs
@@ -165,32 +165,7 @@ impl<'w> WidgetRef<'w, dyn Widget> {
     /// **pos** - the position in global coordinates (e.g. `(0,0)` is the top-left corner of the
     /// window).
     pub fn find_widget_at_pos(&self, pos: Point) -> Option<WidgetRef<'w, dyn Widget>> {
-        if self.ctx.widget_state.bbox.contains(pos) {
-            let local_pos = self.ctx().widget_state.window_transform.inverse() * pos;
-
-            if Some(false) == self.ctx.clip_path().map(|clip| clip.contains(local_pos)) {
-                return None;
-            }
-
-            // Assumes `Self::children_ids` is in increasing "z-order", picking the last child in case
-            // of overlapping children.
-            for child_id in self.children_ids().iter().rev() {
-                let child_ref = self.ctx.get(*child_id);
-                if let Some(child) = child_ref.widget.find_widget_at_pos(child_ref.ctx, pos) {
-                    return Some(child);
-                }
-            }
-            if !self.ctx.is_stashed()
-                && self.ctx.accepts_pointer_interaction()
-                && self.ctx.size().to_rect().contains(local_pos)
-            {
-                Some(*self)
-            } else {
-                None
-            }
-        } else {
-            None
-        }
+        self.widget.find_widget_at_pos(self.ctx, pos)
     }
 }
 

From e9d09b753bd7a3e6db819fecb754f48d31717311 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 23 Nov 2024 14:31:28 +0100
Subject: [PATCH 06/18] Fix stack overflow in tests

---
 masonry/src/testing/helper_widgets.rs | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/masonry/src/testing/helper_widgets.rs b/masonry/src/testing/helper_widgets.rs
index 29040e817..70c551526 100644
--- a/masonry/src/testing/helper_widgets.rs
+++ b/masonry/src/testing/helper_widgets.rs
@@ -16,7 +16,7 @@ use accesskit::{Node, Role};
 use smallvec::SmallVec;
 use tracing::trace_span;
 use vello::Scene;
-use widget::widget::AsDynWidget as _;
+use widget::widget::{find_widget_at_pos, AsDynWidget as _};
 use widget::WidgetRef;
 
 use crate::event::{PointerEvent, TextEvent};
@@ -395,11 +395,13 @@ impl<S: 'static> Widget for ModularWidget<S> {
         ctx: QueryCtx<'c>,
         pos: Point,
     ) -> Option<WidgetRef<'c, dyn Widget>> {
-        (WidgetRef {
-            widget: self.as_dyn(),
-            ctx,
-        })
-        .find_widget_at_pos(pos)
+        find_widget_at_pos(
+            &WidgetRef {
+                widget: self.as_dyn(),
+                ctx,
+            },
+            pos,
+        )
     }
 
     fn type_name(&self) -> &'static str {

From 8b6f311501e7229588a2eda78767532ba1147d23 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sun, 24 Nov 2024 21:34:33 +0100
Subject: [PATCH 07/18] Fix `get_ime_area()`

---
 masonry/src/widget/widget_state.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index d68252a5f..caa6324a0 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -271,8 +271,8 @@ impl WidgetState {
     ///
     /// By default, returns the same as [`Self::window_layout_rect`].
     pub(crate) fn get_ime_area(&self) -> Rect {
-        // TODO correctly calculate IME area based on transform
-        self.ime_area.unwrap_or_else(|| self.size.to_rect()) + self.window_origin.to_vec2()
+        self.window_transform
+            .transform_rect_bbox(self.ime_area.unwrap_or_else(|| self.size.to_rect()))
     }
 
     pub(crate) fn window_origin(&self) -> Point {

From 151d0b822ab6e6325fa588d9fbe3caaa0ee88c46 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sun, 24 Nov 2024 23:19:37 +0100
Subject: [PATCH 08/18] Replace `window_layout_rect` with `bbox` (and thus fix
 accessibility).

---
 masonry/src/contexts.rs                   |  7 ++++---
 masonry/src/passes/accessibility.rs       |  2 +-
 masonry/src/testing/harness.rs            |  4 ++--
 masonry/src/widget/tests/status_change.rs |  8 ++++----
 masonry/src/widget/widget_state.rs        | 11 ++++-------
 5 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/masonry/src/contexts.rs b/masonry/src/contexts.rs
index d470109bf..93dae89dc 100644
--- a/masonry/src/contexts.rs
+++ b/masonry/src/contexts.rs
@@ -258,8 +258,9 @@ impl_context_method!(
             self.widget_state.window_origin()
         }
 
-        pub fn window_layout_rect(&self) -> Rect {
-            self.widget_state.window_layout_rect()
+        /// The axis aligned bounding box of this widget in window coordinates.
+        pub fn bbox(&self) -> Rect {
+            self.widget_state.bbox()
         }
 
         pub fn paint_rect(&self) -> Rect {
@@ -278,7 +279,7 @@ impl_context_method!(
         ///
         /// The returned point is relative to the content area; it excludes window chrome.
         pub fn to_window(&self, widget_point: Point) -> Point {
-            self.window_origin() + widget_point.to_vec2()
+            self.widget_state.window_transform * widget_point
         }
     }
 );
diff --git a/masonry/src/passes/accessibility.rs b/masonry/src/passes/accessibility.rs
index 03b61ff25..334a1c1fa 100644
--- a/masonry/src/passes/accessibility.rs
+++ b/masonry/src/passes/accessibility.rs
@@ -91,7 +91,7 @@ fn build_accessibility_tree(
 // --- MARK: BUILD NODE ---
 fn build_access_node(widget: &mut dyn Widget, ctx: &mut AccessCtx) -> Node {
     let mut node = Node::new(widget.accessibility_role());
-    node.set_bounds(to_accesskit_rect(ctx.widget_state.window_layout_rect()));
+    node.set_bounds(to_accesskit_rect(ctx.widget_state.bbox()));
 
     node.set_children(
         widget
diff --git a/masonry/src/testing/harness.rs b/masonry/src/testing/harness.rs
index 938df768e..e8adea9fc 100644
--- a/masonry/src/testing/harness.rs
+++ b/masonry/src/testing/harness.rs
@@ -418,7 +418,7 @@ impl TestHarness {
     ///
     /// Combines [`mouse_move`](Self::mouse_move), [`mouse_button_press`](Self::mouse_button_press), and [`mouse_button_release`](Self::mouse_button_release).
     pub fn mouse_click_on(&mut self, id: WidgetId) {
-        let widget_rect = self.get_widget(id).ctx().window_layout_rect();
+        let widget_rect = self.get_widget(id).ctx().bbox();
         let widget_center = widget_rect.center();
 
         self.mouse_move(widget_center);
@@ -430,7 +430,7 @@ impl TestHarness {
     pub fn mouse_move_to(&mut self, id: WidgetId) {
         // FIXME - handle case where the widget isn't visible
         // FIXME - assert that the widget correctly receives the event otherwise?
-        let widget_rect = self.get_widget(id).ctx().window_layout_rect();
+        let widget_rect = self.get_widget(id).ctx().bbox();
         let widget_center = widget_rect.center();
 
         self.mouse_move(widget_center);
diff --git a/masonry/src/widget/tests/status_change.rs b/masonry/src/widget/tests/status_change.rs
index 7b355a9bb..93f89bd88 100644
--- a/masonry/src/widget/tests/status_change.rs
+++ b/masonry/src/widget/tests/status_change.rs
@@ -72,10 +72,10 @@ fn propagate_hovered() {
 
     harness.mouse_move_to(empty);
 
-    dbg!(harness.get_widget(button).ctx().window_layout_rect());
-    dbg!(harness.get_widget(pad).ctx().window_layout_rect());
-    dbg!(harness.get_widget(root).ctx().window_layout_rect());
-    dbg!(harness.get_widget(empty).ctx().window_layout_rect());
+    dbg!(harness.get_widget(button).ctx().bbox());
+    dbg!(harness.get_widget(pad).ctx().bbox());
+    dbg!(harness.get_widget(root).ctx().bbox());
+    dbg!(harness.get_widget(empty).ctx().bbox());
 
     eprintln!("root: {root:?}");
     eprintln!("empty: {empty:?}");
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index caa6324a0..0acdce433 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -259,17 +259,14 @@ impl WidgetState {
         Rect::from_origin_size(self.origin, self.size)
     }
 
-    /// The [`layout_rect`](crate::WidgetPod::layout_rect) in window coordinates.
-    ///
-    /// This might not map to a visible area of the screen, eg if the widget is scrolled
-    /// away.
-    pub fn window_layout_rect(&self) -> Rect {
-        Rect::from_origin_size(self.window_origin(), self.size)
+    /// The axis aligned bounding box of this widget in window coordinates.
+    pub fn bbox(&self) -> Rect {
+        self.bbox
     }
 
     /// Returns the area being edited by an IME, in global coordinates.
     ///
-    /// By default, returns the same as [`Self::window_layout_rect`].
+    /// By default, returns the same as [`Self::bbox`].
     pub(crate) fn get_ime_area(&self) -> Rect {
         self.window_transform
             .transform_rect_bbox(self.ime_area.unwrap_or_else(|| self.size.to_rect()))

From e2ad4de073a94bbb14ab5b8c88829d312fb88cd6 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Mon, 25 Nov 2024 12:56:49 +0100
Subject: [PATCH 09/18] Rename bbox to bounding_rect as it's more appropriate
 in 2D space

---
 masonry/src/contexts.rs                   |  8 ++++----
 masonry/src/passes/accessibility.rs       |  2 +-
 masonry/src/passes/compose.rs             | 10 +++++-----
 masonry/src/passes/paint.rs               |  4 ++--
 masonry/src/testing/harness.rs            |  4 ++--
 masonry/src/widget/flex.rs                |  2 +-
 masonry/src/widget/tests/status_change.rs |  8 ++++----
 masonry/src/widget/text_area.rs           |  2 +-
 masonry/src/widget/widget.rs              |  2 +-
 masonry/src/widget/widget_state.rs        | 18 +++++++++---------
 10 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/masonry/src/contexts.rs b/masonry/src/contexts.rs
index 93dae89dc..a7baf8c61 100644
--- a/masonry/src/contexts.rs
+++ b/masonry/src/contexts.rs
@@ -258,9 +258,9 @@ impl_context_method!(
             self.widget_state.window_origin()
         }
 
-        /// The axis aligned bounding box of this widget in window coordinates.
-        pub fn bbox(&self) -> Rect {
-            self.widget_state.bbox()
+        /// The axis aligned bounding rect of this widget in window coordinates.
+        pub fn bounding_rect(&self) -> Rect {
+            self.widget_state.bounding_rect()
         }
 
         pub fn paint_rect(&self) -> Rect {
@@ -951,7 +951,7 @@ impl LayoutCtx<'_> {
     ) -> Insets {
         self.assert_layout_done(child, "compute_insets_from_child");
         self.assert_placed(child, "compute_insets_from_child");
-        let parent_bounds = Rect::ZERO.with_size(my_size);
+        let parent_bounds = my_size.to_rect();
         let union_paint_rect = self
             .get_child_state(child)
             .paint_rect()
diff --git a/masonry/src/passes/accessibility.rs b/masonry/src/passes/accessibility.rs
index 334a1c1fa..70569b994 100644
--- a/masonry/src/passes/accessibility.rs
+++ b/masonry/src/passes/accessibility.rs
@@ -91,7 +91,7 @@ fn build_accessibility_tree(
 // --- MARK: BUILD NODE ---
 fn build_access_node(widget: &mut dyn Widget, ctx: &mut AccessCtx) -> Node {
     let mut node = Node::new(widget.accessibility_role());
-    node.set_bounds(to_accesskit_rect(ctx.widget_state.bbox()));
+    node.set_bounds(to_accesskit_rect(ctx.widget_state.bounding_rect()));
 
     node.set_children(
         widget
diff --git a/masonry/src/passes/compose.rs b/masonry/src/passes/compose.rs
index 2f403166b..3d39261d7 100644
--- a/masonry/src/passes/compose.rs
+++ b/masonry/src/passes/compose.rs
@@ -31,13 +31,13 @@ fn compose_widget(
     }
 
     let local_translation = state.item.translation + state.item.origin.to_vec2();
+
     state.item.window_transform =
         parent_window_transform * widget.item.transform().then_translate(local_translation);
     state.item.window_origin = state.item.window_transform.translation().to_point();
-    state.item.bbox = state
-        .item
-        .window_transform
-        .transform_rect_bbox(state.item.size.to_rect());
+
+    let local_rect = state.item.size.to_rect();
+    state.item.bounding_rect = state.item.window_transform.transform_rect_bbox(local_rect);
 
     let mut ctx = ComposeCtx {
         global_state,
@@ -79,7 +79,7 @@ fn compose_widget(
                 transformed,
                 parent_transform,
             );
-            parent_state.bbox = parent_state.bbox.union(state.item.bbox);
+            parent_state.bounding_rect = parent_state.bounding_rect.union(state.item.bounding_rect);
             parent_state.merge_up(state.item);
         },
     );
diff --git a/masonry/src/passes/paint.rs b/masonry/src/passes/paint.rs
index 5a08c06dd..2e8904e68 100644
--- a/masonry/src/passes/paint.rs
+++ b/masonry/src/passes/paint.rs
@@ -63,7 +63,7 @@ fn paint_widget(
     complete_scene.append(scene, Some(transform));
 
     let id = state.item.id;
-    let bbox = state.item.bbox;
+    let bounding_rect = state.item.bounding_rect;
     let parent_state = state.item;
     recurse_on_children(
         id,
@@ -94,7 +94,7 @@ fn paint_widget(
     if debug_paint {
         const BORDER_WIDTH: f64 = 1.0;
         let color = get_debug_color(id.to_raw());
-        let rect = bbox.inset(BORDER_WIDTH / -2.0);
+        let rect = bounding_rect.inset(BORDER_WIDTH / -2.0);
         stroke(complete_scene, &rect, color, BORDER_WIDTH);
     }
 
diff --git a/masonry/src/testing/harness.rs b/masonry/src/testing/harness.rs
index e8adea9fc..a11ec61db 100644
--- a/masonry/src/testing/harness.rs
+++ b/masonry/src/testing/harness.rs
@@ -418,7 +418,7 @@ impl TestHarness {
     ///
     /// Combines [`mouse_move`](Self::mouse_move), [`mouse_button_press`](Self::mouse_button_press), and [`mouse_button_release`](Self::mouse_button_release).
     pub fn mouse_click_on(&mut self, id: WidgetId) {
-        let widget_rect = self.get_widget(id).ctx().bbox();
+        let widget_rect = self.get_widget(id).ctx().bounding_rect();
         let widget_center = widget_rect.center();
 
         self.mouse_move(widget_center);
@@ -430,7 +430,7 @@ impl TestHarness {
     pub fn mouse_move_to(&mut self, id: WidgetId) {
         // FIXME - handle case where the widget isn't visible
         // FIXME - assert that the widget correctly receives the event otherwise?
-        let widget_rect = self.get_widget(id).ctx().bbox();
+        let widget_rect = self.get_widget(id).ctx().bounding_rect();
         let widget_center = widget_rect.center();
 
         self.mouse_move(widget_center);
diff --git a/masonry/src/widget/flex.rs b/masonry/src/widget/flex.rs
index bff9e815d..b7940eb08 100644
--- a/masonry/src/widget/flex.rs
+++ b/masonry/src/widget/flex.rs
@@ -1161,7 +1161,7 @@ impl Widget for Flex {
         // or be clipped (e.g. if its parent is a Portal).
         let my_size: Size = self.direction.pack(major, minor_dim).into();
 
-        let my_bounds = Rect::ZERO.with_size(my_size);
+        let my_bounds = my_size.to_rect();
         let insets = child_paint_rect - my_bounds;
         ctx.set_paint_insets(insets);
 
diff --git a/masonry/src/widget/tests/status_change.rs b/masonry/src/widget/tests/status_change.rs
index 93f89bd88..689f94519 100644
--- a/masonry/src/widget/tests/status_change.rs
+++ b/masonry/src/widget/tests/status_change.rs
@@ -72,10 +72,10 @@ fn propagate_hovered() {
 
     harness.mouse_move_to(empty);
 
-    dbg!(harness.get_widget(button).ctx().bbox());
-    dbg!(harness.get_widget(pad).ctx().bbox());
-    dbg!(harness.get_widget(root).ctx().bbox());
-    dbg!(harness.get_widget(empty).ctx().bbox());
+    dbg!(harness.get_widget(button).ctx().bounding_rect());
+    dbg!(harness.get_widget(pad).ctx().bounding_rect());
+    dbg!(harness.get_widget(root).ctx().bounding_rect());
+    dbg!(harness.get_widget(empty).ctx().bounding_rect());
 
     eprintln!("root: {root:?}");
     eprintln!("empty: {empty:?}");
diff --git a/masonry/src/widget/text_area.rs b/masonry/src/widget/text_area.rs
index 01e5d72ec..b2fadb7ce 100644
--- a/masonry/src/widget/text_area.rs
+++ b/masonry/src/widget/text_area.rs
@@ -468,7 +468,7 @@ impl<const EDITABLE: bool> Widget for TextArea<EDITABLE> {
 
         let (fctx, lctx) = ctx.text_contexts();
         let is_rtl = self.editor.layout(fctx, lctx).is_rtl();
-        let padding = Point::new(self.padding.get_left(is_rtl), self.padding.top);
+        let padding = Vec2::new(self.padding.get_left(is_rtl), self.padding.top);
         match event {
             PointerEvent::PointerDown(button, _) => {
                 if !ctx.is_disabled() && *button == PointerButton::Primary {
diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index 34735490f..40f6c4c54 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -333,7 +333,7 @@ pub(crate) fn find_widget_at_pos<'c>(
     widget: &WidgetRef<'c, dyn Widget>,
     pos: Point,
 ) -> Option<WidgetRef<'c, dyn Widget>> {
-    if widget.ctx.widget_state.bbox.contains(pos) {
+    if widget.ctx.widget_state.bounding_rect.contains(pos) {
         let local_pos = widget.ctx().widget_state.window_transform.inverse() * pos;
 
         if Some(false) == widget.ctx.clip_path().map(|clip| clip.contains(local_pos)) {
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index 0acdce433..8788abd2b 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -53,8 +53,8 @@ pub(crate) struct WidgetState {
     // TODO - Document
     // The computed paint rect, in local coordinates.
     pub(crate) local_paint_rect: Rect,
-    /// An axis aligned bounding box (AABB), containing itself and all its descendents.
-    pub(crate) bbox: Rect,
+    /// An axis aligned bounding rect (AABB in 2D), containing itself and all its descendents.
+    pub(crate) bounding_rect: Rect,
     /// The offset of the baseline relative to the bottom of the widget.
     ///
     /// In general, this will be zero; the bottom of the widget will be considered
@@ -81,9 +81,9 @@ pub(crate) struct WidgetState {
     // efficiently hold an arbitrary shape.
     pub(crate) clip_path: Option<Rect>,
 
-    /// This is being computed out of the descendant transforms and `translation`
+    // TODO is it worth to compute/cache the inverse as well (or does it just take valuable memory)?
+    /// This is being computed out of all ancestor transforms and `translation`
     pub(crate) window_transform: Affine,
-    // TODO - Handle matrix transforms correctly
     pub(crate) translation: Vec2,
     pub(crate) transform_changed: bool,
 
@@ -197,7 +197,7 @@ impl WidgetState {
             #[cfg(debug_assertions)]
             widget_name,
             window_transform: Affine::IDENTITY,
-            bbox: Rect::ZERO,
+            bounding_rect: Rect::ZERO,
         }
     }
 
@@ -259,14 +259,14 @@ impl WidgetState {
         Rect::from_origin_size(self.origin, self.size)
     }
 
-    /// The axis aligned bounding box of this widget in window coordinates.
-    pub fn bbox(&self) -> Rect {
-        self.bbox
+    /// The axis aligned bounding rect of this widget in window coordinates.
+    pub fn bounding_rect(&self) -> Rect {
+        self.bounding_rect
     }
 
     /// Returns the area being edited by an IME, in global coordinates.
     ///
-    /// By default, returns the same as [`Self::bbox`].
+    /// By default, returns the same as [`Self::bounding_rect`].
     pub(crate) fn get_ime_area(&self) -> Rect {
         self.window_transform
             .transform_rect_bbox(self.ime_area.unwrap_or_else(|| self.size.to_rect()))

From 045af4d6ca3575ef0467c032c4ea8ad134050f93 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Mon, 25 Nov 2024 14:04:11 +0100
Subject: [PATCH 10/18] Revert unnecessary changes

---
 masonry/src/passes/event.rs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/masonry/src/passes/event.rs b/masonry/src/passes/event.rs
index 288bcdc78..3a9e3c23a 100644
--- a/masonry/src/passes/event.rs
+++ b/masonry/src/passes/event.rs
@@ -22,10 +22,9 @@ fn get_target_widget(
     if let Some(pointer_pos) = pointer_pos {
         // TODO - Apply scale?
         let pointer_pos = (pointer_pos.x, pointer_pos.y).into();
-        let root_widget = root.get_root_widget();
-        return root_widget
-            .widget
-            .find_widget_at_pos(root_widget.ctx, pointer_pos)
+        return root
+            .get_root_widget()
+            .find_widget_at_pos(pointer_pos)
             .map(|widget| widget.id());
     }
 

From d8126e3a4bbb48cff08a5fbb3f7372b0a2a0b3bb Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 7 Dec 2024 20:09:49 +0100
Subject: [PATCH 11/18] Factor the widgets transform out of the widget trait to
 the widget state, to avoid a lot of boilerplate

---
 masonry/src/contexts.rs               | 18 +++++++++++-----
 masonry/src/passes/compose.rs         |  2 +-
 masonry/src/testing/helper_widgets.rs |  8 -------
 masonry/src/widget/button.rs          | 17 ---------------
 masonry/src/widget/flex.rs            | 17 ---------------
 masonry/src/widget/mod.rs             |  1 +
 masonry/src/widget/portal.rs          | 18 +---------------
 masonry/src/widget/widget.rs          |  8 -------
 masonry/src/widget/widget_mut.rs      |  6 +++++-
 masonry/src/widget/widget_pod.rs      | 31 ++++++++++++++++++++++-----
 masonry/src/widget/widget_state.rs    |  2 ++
 xilem/src/lib.rs                      |  8 ++++++-
 xilem/src/view/button.rs              | 10 ++++-----
 xilem/src/view/flex.rs                | 12 +++++------
 xilem/src/view/portal.rs              |  4 ++--
 15 files changed, 69 insertions(+), 93 deletions(-)

diff --git a/masonry/src/contexts.rs b/masonry/src/contexts.rs
index a7baf8c61..98b593d70 100644
--- a/masonry/src/contexts.rs
+++ b/masonry/src/contexts.rs
@@ -10,7 +10,6 @@ use dpi::LogicalPosition;
 use parley::{FontContext, LayoutContext};
 use tracing::{trace, warn};
 use tree_arena::{ArenaMutChildren, ArenaRefChildren};
-use vello::kurbo::Vec2;
 use vello::peniko::Color;
 use winit::window::ResizeDirection;
 
@@ -19,8 +18,11 @@ use crate::passes::layout::run_layout_on;
 use crate::render_root::{MutateCallback, RenderRootSignal, RenderRootState};
 use crate::text::BrushIndex;
 use crate::theme::get_debug_color;
-use crate::widget::{WidgetMut, WidgetRef, WidgetState};
-use crate::{AllowRawMut, BoxConstraints, Insets, Point, Rect, Size, Widget, WidgetId, WidgetPod};
+use crate::widget::{CreatedWidget, WidgetMut, WidgetRef, WidgetState};
+use crate::{
+    Affine, AllowRawMut, BoxConstraints, Insets, Point, Rect, Size, Vec2, Widget, WidgetId,
+    WidgetPod,
+};
 
 // Note - Most methods defined in this file revolve around `WidgetState` fields.
 // Consider reading `WidgetState` documentation (especially the documented naming scheme)
@@ -591,6 +593,11 @@ impl_context_method!(MutateCtx<'_>, EventCtx<'_>, UpdateCtx<'_>, {
         self.widget_state.needs_update_disabled = true;
         self.widget_state.is_explicitly_disabled = disabled;
     }
+
+    pub fn set_transform(&mut self, transform: Affine) {
+        self.widget_state.transform = transform;
+        self.transform_changed();
+    }
 });
 
 // --- MARK: OTHER METHODS ---
@@ -858,7 +865,7 @@ impl RegisterCtx<'_> {
     /// Container widgets should call this on all their children in
     /// their implementation of [`Widget::register_children`].
     pub fn register_child(&mut self, child: &mut WidgetPod<impl Widget>) {
-        let Some(widget) = child.take_inner() else {
+        let Some(CreatedWidget { widget, transform }) = child.take_inner() else {
             return;
         };
 
@@ -868,7 +875,8 @@ impl RegisterCtx<'_> {
         }
 
         let id = child.id();
-        let state = WidgetState::new(child.id(), widget.short_type_name());
+        let mut state = WidgetState::new(child.id(), widget.short_type_name());
+        state.transform = transform;
 
         self.widget_children.insert_child(id, Box::new(widget));
         self.widget_state_children.insert_child(id, state);
diff --git a/masonry/src/passes/compose.rs b/masonry/src/passes/compose.rs
index 3d39261d7..a0b5e64ef 100644
--- a/masonry/src/passes/compose.rs
+++ b/masonry/src/passes/compose.rs
@@ -33,7 +33,7 @@ fn compose_widget(
     let local_translation = state.item.translation + state.item.origin.to_vec2();
 
     state.item.window_transform =
-        parent_window_transform * widget.item.transform().then_translate(local_translation);
+        parent_window_transform * state.item.transform.then_translate(local_translation);
     state.item.window_origin = state.item.window_transform.translation().to_point();
 
     let local_rect = state.item.size.to_rect();
diff --git a/masonry/src/testing/helper_widgets.rs b/masonry/src/testing/helper_widgets.rs
index 70c551526..c0bcad256 100644
--- a/masonry/src/testing/helper_widgets.rs
+++ b/masonry/src/testing/helper_widgets.rs
@@ -419,10 +419,6 @@ impl<S: 'static> Widget for ModularWidget<S> {
     fn as_mut_any(&mut self) -> &mut dyn std::any::Any {
         self.as_mut_dyn_any()
     }
-
-    fn transform(&self) -> Affine {
-        Affine::IDENTITY
-    }
 }
 
 impl ReplaceChild {
@@ -623,8 +619,4 @@ impl<W: Widget> Widget for Recorder<W> {
     fn as_mut_any(&mut self) -> &mut dyn std::any::Any {
         self.child.as_mut_any()
     }
-
-    fn transform(&self) -> Affine {
-        self.child.transform()
-    }
 }
diff --git a/masonry/src/widget/button.rs b/masonry/src/widget/button.rs
index 0eead488f..9b983ddaf 100644
--- a/masonry/src/widget/button.rs
+++ b/masonry/src/widget/button.rs
@@ -6,7 +6,6 @@
 use accesskit::{Node, Role};
 use smallvec::{smallvec, SmallVec};
 use tracing::{trace, trace_span, Span};
-use vello::kurbo::Affine;
 use vello::Scene;
 
 use crate::action::Action;
@@ -29,7 +28,6 @@ const LABEL_INSETS: Insets = Insets::uniform_xy(8., 2.);
 /// Emits [`Action::ButtonPressed`] when pressed.
 pub struct Button {
     label: WidgetPod<Label>,
-    transform: Affine,
 }
 
 // --- MARK: BUILDERS ---
@@ -61,14 +59,8 @@ impl Button {
     pub fn from_label(label: Label) -> Self {
         Button {
             label: WidgetPod::new(label),
-            transform: Affine::IDENTITY,
         }
     }
-
-    pub fn with_transform(mut self, transform: Affine) -> Self {
-        self.transform = transform;
-        self
-    }
 }
 
 // --- MARK: WIDGETMUT ---
@@ -81,11 +73,6 @@ impl Button {
     pub fn label_mut<'t>(this: &'t mut WidgetMut<'_, Self>) -> WidgetMut<'t, Label> {
         this.ctx.get_mut(&mut this.widget.label)
     }
-
-    pub fn set_transform(this: &mut WidgetMut<'_, Self>, transform: Affine) {
-        this.widget.transform = transform;
-        this.ctx.transform_changed();
-    }
 }
 
 // --- MARK: IMPL WIDGET ---
@@ -226,10 +213,6 @@ impl Widget for Button {
     fn get_debug_text(&self) -> Option<String> {
         Some(self.label.as_ref().text().as_ref().to_string())
     }
-
-    fn transform(&self) -> Affine {
-        self.transform
-    }
 }
 
 // --- MARK: TESTS ---
diff --git a/masonry/src/widget/flex.rs b/masonry/src/widget/flex.rs
index b7940eb08..6f58208ae 100644
--- a/masonry/src/widget/flex.rs
+++ b/masonry/src/widget/flex.rs
@@ -21,7 +21,6 @@ use crate::{
 /// This widget is the foundation of most layouts, and is highly configurable.
 pub struct Flex {
     direction: Axis,
-    transform: Affine,
     cross_alignment: CrossAxisAlignment,
     main_alignment: MainAxisAlignment,
     fill_major_axis: bool,
@@ -129,7 +128,6 @@ impl Flex {
             fill_major_axis: false,
             old_bc: BoxConstraints::tight(Size::ZERO),
             gap: None,
-            transform: Affine::IDENTITY,
         }
     }
 
@@ -167,11 +165,6 @@ impl Flex {
         self
     }
 
-    pub fn with_transform(mut self, transform: Affine) -> Self {
-        self.transform = transform;
-        self
-    }
-
     /// Builder-style method for setting the spacing along the
     /// major axis between any two elements in logical pixels.
     ///
@@ -335,12 +328,6 @@ impl Flex {
         this.ctx.request_layout();
     }
 
-    /// Set the transform (see [`Affine`]).
-    pub fn set_transform(this: &mut WidgetMut<'_, Self>, transform: Affine) {
-        this.widget.transform = transform;
-        this.ctx.transform_changed();
-    }
-
     /// Set the spacing along the major axis between any two elements in logical pixels.
     ///
     /// Equivalent to the css [gap] property.
@@ -1217,10 +1204,6 @@ impl Widget for Flex {
     fn make_trace_span(&self, ctx: &QueryCtx<'_>) -> Span {
         trace_span!("Flex", id = ctx.widget_id().trace())
     }
-
-    fn transform(&self) -> Affine {
-        self.transform
-    }
 }
 
 // --- MARK: TESTS ---
diff --git a/masonry/src/widget/mod.rs b/masonry/src/widget/mod.rs
index b4cd5d89a..cc26a6f8c 100644
--- a/masonry/src/widget/mod.rs
+++ b/masonry/src/widget/mod.rs
@@ -56,6 +56,7 @@ pub use widget_pod::WidgetPod;
 pub use widget_ref::WidgetRef;
 
 pub(crate) use widget_arena::WidgetArena;
+pub(crate) use widget_pod::CreatedWidget;
 pub(crate) use widget_state::WidgetState;
 
 use crate::{Affine, Size};
diff --git a/masonry/src/widget/portal.rs b/masonry/src/widget/portal.rs
index e3f8d3ec6..6fa5169e0 100644
--- a/masonry/src/widget/portal.rs
+++ b/masonry/src/widget/portal.rs
@@ -8,7 +8,7 @@ use std::ops::Range;
 use accesskit::{Node, Role};
 use smallvec::{smallvec, SmallVec};
 use tracing::{trace_span, Span};
-use vello::kurbo::{Affine, Point, Rect, Size, Vec2};
+use vello::kurbo::{Point, Rect, Size, Vec2};
 use vello::Scene;
 
 use crate::widget::{Axis, ScrollBar, WidgetMut};
@@ -37,7 +37,6 @@ pub struct Portal<W: Widget> {
     scrollbar_horizontal_visible: bool,
     scrollbar_vertical: WidgetPod<ScrollBar>,
     scrollbar_vertical_visible: bool,
-    transform: Affine,
 }
 
 // --- MARK: BUILDERS ---
@@ -58,7 +57,6 @@ impl<W: Widget> Portal<W> {
             scrollbar_horizontal_visible: false,
             scrollbar_vertical: WidgetPod::new(ScrollBar::new(Axis::Vertical, 1.0, 1.0)),
             scrollbar_vertical_visible: false,
-            transform: Affine::IDENTITY,
         }
     }
 
@@ -101,11 +99,6 @@ impl<W: Widget> Portal<W> {
         self.must_fill = must_fill;
         self
     }
-
-    pub fn with_transform(mut self, transform: Affine) -> Self {
-        self.transform = transform;
-        self
-    }
 }
 
 fn compute_pan_range(mut viewport: Range<f64>, target: Range<f64>) -> Range<f64> {
@@ -260,11 +253,6 @@ impl<W: Widget> Portal<W> {
 
         Self::set_viewport_pos(this, Point::new(new_pos_x, new_pos_y))
     }
-
-    pub fn set_transform(this: &mut WidgetMut<'_, Self>, transform: Affine) {
-        this.widget.transform = transform;
-        this.ctx.transform_changed();
-    }
 }
 
 // --- MARK: IMPL WIDGET ---
@@ -482,10 +470,6 @@ impl<W: Widget> Widget for Portal<W> {
     fn make_trace_span(&self, ctx: &QueryCtx<'_>) -> Span {
         trace_span!("Portal", id = ctx.widget_id().trace())
     }
-
-    fn transform(&self) -> Affine {
-        self.transform
-    }
 }
 
 // --- MARK: TESTS ---
diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index 40f6c4c54..f5afc3859 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -194,10 +194,6 @@ pub trait Widget: AsAny + AsDynWidget {
     /// responsible for visiting all their children during `layout` and `register_children`.
     fn children_ids(&self) -> SmallVec<[WidgetId; 16]>;
 
-    fn transform(&self) -> Affine {
-        Affine::IDENTITY
-    }
-
     /// Whether this widget gets pointer events and hovered status. True by default.
     ///
     /// If false, the widget will be treated as "transparent" for the pointer, meaning
@@ -534,8 +530,4 @@ impl Widget for Box<dyn Widget> {
     fn as_mut_any(&mut self) -> &mut dyn Any {
         self.deref_mut().as_mut_any()
     }
-
-    fn transform(&self) -> Affine {
-        self.deref().transform()
-    }
 }
diff --git a/masonry/src/widget/widget_mut.rs b/masonry/src/widget/widget_mut.rs
index aaeb48230..7a80d945f 100644
--- a/masonry/src/widget/widget_mut.rs
+++ b/masonry/src/widget/widget_mut.rs
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use crate::contexts::MutateCtx;
-use crate::Widget;
+use crate::{Affine, Widget};
 
 // TODO - Document extension trait workaround.
 // See https://xi.zulipchat.com/#narrow/stream/317477-masonry/topic/Thoughts.20on.20simplifying.20WidgetMut/near/436478885
@@ -47,6 +47,10 @@ impl<W: Widget> WidgetMut<'_, W> {
             widget,
         }
     }
+
+    pub fn set_transform(&mut self, transform: Affine) {
+        self.ctx.set_transform(transform);
+    }
 }
 
 impl WidgetMut<'_, Box<dyn Widget>> {
diff --git a/masonry/src/widget/widget_pod.rs b/masonry/src/widget/widget_pod.rs
index 85e81cacf..de0939bd6 100644
--- a/masonry/src/widget/widget_pod.rs
+++ b/masonry/src/widget/widget_pod.rs
@@ -1,7 +1,7 @@
 // Copyright 2018 the Xilem Authors and the Druid Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use crate::{Widget, WidgetId};
+use crate::{Affine, Widget, WidgetId};
 
 // TODO - rewrite links in doc
 
@@ -24,8 +24,13 @@ pub struct WidgetPod<W> {
 // through context methods where they already have access to the arena.
 // Implementing that requires solving non-trivial design questions.
 
+pub(crate) struct CreatedWidget<W> {
+    pub(crate) widget: W,
+    pub(crate) transform: Affine,
+}
+
 enum WidgetPodInner<W> {
-    Created(W),
+    Created(CreatedWidget<W>),
     Inserted,
 }
 
@@ -41,9 +46,21 @@ impl<W: Widget> WidgetPod<W> {
 
     /// Create a new widget pod with fixed id.
     pub fn new_with_id(inner: W, id: WidgetId) -> WidgetPod<W> {
+        Self::new_with_id_and_transform(inner, id, Affine::IDENTITY)
+    }
+
+    /// Create a new widget pod with a custom transform.
+    pub fn new_with_transform(inner: W, transform: Affine) -> WidgetPod<W> {
+        Self::new_with_id_and_transform(inner, WidgetId::next(), transform)
+    }
+
+    pub fn new_with_id_and_transform(inner: W, id: WidgetId, transform: Affine) -> WidgetPod<W> {
         WidgetPod {
             id,
-            inner: WidgetPodInner::Created(inner),
+            inner: WidgetPodInner::Created(CreatedWidget {
+                widget: inner,
+                transform,
+            }),
         }
     }
 
@@ -51,7 +68,7 @@ impl<W: Widget> WidgetPod<W> {
         matches!(self.inner, WidgetPodInner::Created(_))
     }
 
-    pub(crate) fn take_inner(&mut self) -> Option<W> {
+    pub(crate) fn take_inner(&mut self) -> Option<CreatedWidget<W>> {
         match std::mem::replace(&mut self.inner, WidgetPodInner::Inserted) {
             WidgetPodInner::Created(widget) => Some(widget),
             WidgetPodInner::Inserted => None,
@@ -71,7 +88,11 @@ impl<W: Widget + 'static> WidgetPod<W> {
     /// into a dynamically boxed widget.
     pub fn boxed(self) -> WidgetPod<Box<dyn Widget>> {
         match self.inner {
-            WidgetPodInner::Created(inner) => WidgetPod::new_with_id(Box::new(inner), self.id),
+            WidgetPodInner::Created(inner) => WidgetPod::new_with_id_and_transform(
+                Box::new(inner.widget),
+                self.id,
+                inner.transform,
+            ),
             WidgetPodInner::Inserted => {
                 panic!("Cannot box a widget after it has been inserted into the widget graph")
             }
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index 8788abd2b..a0d35918c 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -84,6 +84,7 @@ pub(crate) struct WidgetState {
     // TODO is it worth to compute/cache the inverse as well (or does it just take valuable memory)?
     /// This is being computed out of all ancestor transforms and `translation`
     pub(crate) window_transform: Affine,
+    pub(crate) transform: Affine,
     pub(crate) translation: Vec2,
     pub(crate) transform_changed: bool,
 
@@ -198,6 +199,7 @@ impl WidgetState {
             widget_name,
             window_transform: Affine::IDENTITY,
             bounding_rect: Rect::ZERO,
+            transform: Affine::IDENTITY,
         }
     }
 
diff --git a/xilem/src/lib.rs b/xilem/src/lib.rs
index bf23d1e6d..30456592e 100644
--- a/xilem/src/lib.rs
+++ b/xilem/src/lib.rs
@@ -45,7 +45,7 @@ use std::sync::Arc;
 
 use masonry::dpi::LogicalSize;
 use masonry::widget::{RootWidget, WidgetMut};
-use masonry::{event_loop_runner, Widget, WidgetId, WidgetPod};
+use masonry::{event_loop_runner, Affine, Widget, WidgetId, WidgetPod};
 use winit::error::EventLoopError;
 use winit::window::{Window, WindowAttributes};
 
@@ -293,6 +293,12 @@ impl ViewCtx {
         }
     }
 
+    pub fn new_pod_with_transform<W: Widget>(&mut self, widget: W, transform: Affine) -> Pod<W> {
+        Pod {
+            inner: WidgetPod::new_with_transform(widget, transform),
+        }
+    }
+
     pub fn boxed_pod<W: Widget>(&mut self, pod: Pod<W>) -> Pod<Box<dyn Widget>> {
         Pod {
             inner: pod.inner.boxed(),
diff --git a/xilem/src/view/button.rs b/xilem/src/view/button.rs
index 258c44415..957511afa 100644
--- a/xilem/src/view/button.rs
+++ b/xilem/src/view/button.rs
@@ -62,7 +62,7 @@ where
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
         ctx.with_leaf_action_widget(|ctx| {
-            ctx.new_pod(widget::Button::new(self.label.clone()).with_transform(self.transform))
+            ctx.new_pod_with_transform(widget::Button::new(self.label.clone()), self.transform)
         })
     }
 
@@ -73,12 +73,12 @@ where
         _ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
-        if prev.label != self.label {
-            widget::Button::set_text(&mut element, self.label.clone());
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
         }
 
-        if prev.transform != self.transform {
-            widget::Button::set_transform(&mut element, self.transform);
+        if prev.label != self.label {
+            widget::Button::set_text(&mut element, self.label.clone());
         }
     }
 
diff --git a/xilem/src/view/flex.rs b/xilem/src/view/flex.rs
index 60b39e9a5..6c31ac3c4 100644
--- a/xilem/src/view/flex.rs
+++ b/xilem/src/view/flex.rs
@@ -110,8 +110,7 @@ where
             .raw_gap(self.gap)
             .cross_axis_alignment(self.cross_axis_alignment)
             .must_fill_main_axis(self.fill_major_axis)
-            .main_axis_alignment(self.main_axis_alignment)
-            .with_transform(self.transform);
+            .main_axis_alignment(self.main_axis_alignment);
         let seq_state = self.sequence.seq_build(ctx, &mut elements);
         for child in elements.into_inner() {
             widget = match child {
@@ -122,7 +121,8 @@ where
                 FlexElement::FlexSpacer(flex) => widget.with_flex_spacer(flex),
             }
         }
-        (ctx.new_pod(widget), seq_state)
+        let pod = ctx.new_pod_with_transform(widget, self.transform);
+        (pod, seq_state)
     }
 
     fn rebuild(
@@ -132,12 +132,12 @@ where
         ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.axis != self.axis {
             widget::Flex::set_direction(&mut element, self.axis);
         }
-        if prev.transform != self.transform {
-            widget::Flex::set_transform(&mut element, self.transform);
-        }
         if prev.cross_axis_alignment != self.cross_axis_alignment {
             widget::Flex::set_cross_axis_alignment(&mut element, self.cross_axis_alignment);
         }
diff --git a/xilem/src/view/portal.rs b/xilem/src/view/portal.rs
index 90100d339..9c023e871 100644
--- a/xilem/src/view/portal.rs
+++ b/xilem/src/view/portal.rs
@@ -46,7 +46,7 @@ where
         // use ctx.with_id.
         let (child, child_state) = self.child.build(ctx);
         let widget_pod =
-            ctx.new_pod(widget::Portal::new_pod(child.inner).with_transform(self.transform));
+            ctx.new_pod_with_transform(widget::Portal::new_pod(child.inner), self.transform);
         (widget_pod, child_state)
     }
 
@@ -58,7 +58,7 @@ where
         mut element: Mut<Self::Element>,
     ) {
         if prev.transform != self.transform {
-            widget::Portal::set_transform(&mut element, self.transform);
+            element.set_transform(self.transform);
         }
         let child_element = widget::Portal::child_mut(&mut element);
         self.child

From e73c9ceaf6358bd720c80862f7b60f0f9edfacae Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 7 Dec 2024 20:10:29 +0100
Subject: [PATCH 12/18] Move `Transformable` trait below the view modules, and
 add basic documentation

---
 xilem/src/view/mod.rs | 65 ++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/xilem/src/view/mod.rs b/xilem/src/view/mod.rs
index 722ff4359..2fb4d746a 100644
--- a/xilem/src/view/mod.rs
+++ b/xilem/src/view/mod.rs
@@ -3,38 +3,6 @@
 
 //! Views for the widgets which are built-in to Masonry. These are the primitives your Xilem app's view tree will generally be constructed from.
 
-pub trait Transformable: Sized {
-    fn transform_mut(&mut self) -> &mut masonry::Affine;
-
-    #[must_use]
-    fn rotate(mut self, radians: f64) -> Self {
-        let transform = self.transform_mut();
-        *transform = transform.then_rotate(radians);
-        self
-    }
-
-    #[must_use]
-    fn scale(mut self, uniform: f64) -> Self {
-        let transform = self.transform_mut();
-        *transform = transform.then_scale(uniform);
-        self
-    }
-
-    #[must_use]
-    fn scale_non_uniform(mut self, x: f64, y: f64) -> Self {
-        let transform = self.transform_mut();
-        *transform = transform.then_scale_non_uniform(x, y);
-        self
-    }
-
-    #[must_use]
-    fn translate(mut self, v: impl Into<masonry::Vec2>) -> Self {
-        let transform = self.transform_mut();
-        *transform = transform.then_translate(v.into());
-        self
-    }
-}
-
 mod task;
 pub use task::*;
 
@@ -79,3 +47,36 @@ pub use textbox::*;
 
 mod portal;
 pub use portal::*;
+
+/// An extension trait, to allow common transformations of the views transform.
+pub trait Transformable: Sized {
+    fn transform_mut(&mut self) -> &mut masonry::Affine;
+
+    #[must_use]
+    fn rotate(mut self, radians: f64) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_rotate(radians);
+        self
+    }
+
+    #[must_use]
+    fn scale(mut self, uniform: f64) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_scale(uniform);
+        self
+    }
+
+    #[must_use]
+    fn scale_non_uniform(mut self, x: f64, y: f64) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_scale_non_uniform(x, y);
+        self
+    }
+
+    #[must_use]
+    fn translate(mut self, v: impl Into<masonry::Vec2>) -> Self {
+        let transform = self.transform_mut();
+        *transform = transform.then_translate(v.into());
+        self
+    }
+}

From 4b4969ef27a58a8232d2af9ab04c64869174a460 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 7 Dec 2024 20:43:32 +0100
Subject: [PATCH 13/18] xilem: Wire up all views with transforms

---
 xilem/src/view/checkbox.rs       | 20 ++++++++++++++++++--
 xilem/src/view/grid.rs           | 18 ++++++++++++++++--
 xilem/src/view/image.rs          | 18 +++++++++++++++++-
 xilem/src/view/label.rs          | 18 ++++++++++++++++--
 xilem/src/view/progress_bar.rs   | 23 ++++++++++++++++++++---
 xilem/src/view/prose.rs          | 14 ++++++++++++++
 xilem/src/view/sized_box.rs      | 18 ++++++++++++++++--
 xilem/src/view/spinner.rs        | 22 +++++++++++++++++++---
 xilem/src/view/textbox.rs        | 15 ++++++++++++++-
 xilem/src/view/variable_label.rs |  8 ++++++--
 10 files changed, 156 insertions(+), 18 deletions(-)

diff --git a/xilem/src/view/checkbox.rs b/xilem/src/view/checkbox.rs
index 2cc1e9fcc..29944cf0e 100644
--- a/xilem/src/view/checkbox.rs
+++ b/xilem/src/view/checkbox.rs
@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::text::ArcStr;
-use masonry::widget;
+use masonry::{widget, Affine};
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
 
+use super::Transformable;
+
 pub fn checkbox<F, State, Action>(
     label: impl Into<ArcStr>,
     checked: bool,
@@ -19,6 +21,7 @@ where
         label: label.into(),
         callback,
         checked,
+        transform: Affine::IDENTITY,
     }
 }
 
@@ -27,6 +30,13 @@ pub struct Checkbox<F> {
     label: ArcStr,
     checked: bool,
     callback: F,
+    transform: Affine,
+}
+
+impl<F> Transformable for Checkbox<F> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
 }
 
 impl<F> ViewMarker for Checkbox<F> {}
@@ -39,7 +49,10 @@ where
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
         ctx.with_leaf_action_widget(|ctx| {
-            ctx.new_pod(widget::Checkbox::new(self.checked, self.label.clone()))
+            ctx.new_pod_with_transform(
+                widget::Checkbox::new(self.checked, self.label.clone()),
+                self.transform,
+            )
         })
     }
 
@@ -50,6 +63,9 @@ where
         _ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.label != self.label {
             widget::Checkbox::set_text(&mut element, self.label.clone());
         }
diff --git a/xilem/src/view/grid.rs b/xilem/src/view/grid.rs
index c68bff56a..72e33129b 100644
--- a/xilem/src/view/grid.rs
+++ b/xilem/src/view/grid.rs
@@ -4,7 +4,7 @@
 use std::marker::PhantomData;
 
 use masonry::widget::{self, GridParams, WidgetMut};
-use masonry::Widget;
+use masonry::{Affine, Widget};
 
 use crate::core::{
     AppendVec, DynMessage, ElementSplice, MessageResult, Mut, SuperElement, View, ViewElement,
@@ -12,6 +12,8 @@ use crate::core::{
 };
 use crate::{Pod, ViewCtx, WidgetView};
 
+use super::Transformable;
+
 pub fn grid<State, Action, Seq: GridSequence<State, Action>>(
     sequence: Seq,
     width: i32,
@@ -23,6 +25,7 @@ pub fn grid<State, Action, Seq: GridSequence<State, Action>>(
         phantom: PhantomData,
         height,
         width,
+        transform: Affine::IDENTITY,
     }
 }
 
@@ -32,6 +35,7 @@ pub struct Grid<Seq, State, Action = ()> {
     spacing: f64,
     width: i32,
     height: i32,
+    transform: Affine,
     /// Used to associate the State and Action in the call to `.grid()` with the State and Action
     /// used in the View implementation, to allow inference to flow backwards, allowing State and
     /// Action to be inferred properly
@@ -50,6 +54,12 @@ impl<Seq, State, Action> Grid<Seq, State, Action> {
     }
 }
 
+impl<Seq, State, Action> Transformable for Grid<Seq, State, Action> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl<Seq, State, Action> ViewMarker for Grid<Seq, State, Action> {}
 
 impl<State, Action, Seq> View<State, Action, ViewCtx> for Grid<Seq, State, Action>
@@ -72,7 +82,8 @@ where
                 GridElement::Child(child, params) => widget.with_child_pod(child.inner, params),
             }
         }
-        (ctx.new_pod(widget), seq_state)
+        let pod = ctx.new_pod_with_transform(widget, self.transform);
+        (pod, seq_state)
     }
 
     fn rebuild(
@@ -82,6 +93,9 @@ where
         ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.height != self.height {
             widget::Grid::set_height(&mut element, self.height);
         }
diff --git a/xilem/src/view/image.rs b/xilem/src/view/image.rs
index 1961def0a..c25418f97 100644
--- a/xilem/src/view/image.rs
+++ b/xilem/src/view/image.rs
@@ -4,10 +4,13 @@
 //! The bitmap image widget.
 
 use masonry::widget::{self, ObjectFit};
+use masonry::Affine;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
 
+use super::Transformable;
+
 /// Displays the bitmap `image`.
 ///
 /// By default, the Image will scale to fit its box constraints ([`ObjectFit::Fill`]).
@@ -25,6 +28,7 @@ pub fn image(image: &vello::peniko::Image) -> Image {
         // easier than documenting that cloning is cheap.
         image: image.clone(),
         object_fit: ObjectFit::default(),
+        transform: Affine::IDENTITY,
     }
 }
 
@@ -35,6 +39,7 @@ pub fn image(image: &vello::peniko::Image) -> Image {
 pub struct Image {
     image: vello::peniko::Image,
     object_fit: ObjectFit,
+    transform: Affine,
 }
 
 impl Image {
@@ -45,13 +50,21 @@ impl Image {
     }
 }
 
+impl Transformable for Image {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl ViewMarker for Image {}
 impl<State, Action> View<State, Action, ViewCtx> for Image {
     type Element = Pod<widget::Image>;
     type ViewState = ();
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
-        (ctx.new_pod(widget::Image::new(self.image.clone())), ())
+        let pod =
+            ctx.new_pod_with_transform(widget::Image::new(self.image.clone()), self.transform);
+        (pod, ())
     }
 
     fn rebuild(
@@ -61,6 +74,9 @@ impl<State, Action> View<State, Action, ViewCtx> for Image {
         _: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.object_fit != self.object_fit {
             widget::Image::set_fit_mode(&mut element, self.object_fit);
         }
diff --git a/xilem/src/view/label.rs b/xilem/src/view/label.rs
index da6676f80..bad664a2f 100644
--- a/xilem/src/view/label.rs
+++ b/xilem/src/view/label.rs
@@ -3,12 +3,14 @@
 
 use masonry::parley::FontStack;
 use masonry::text::{ArcStr, StyleProperty};
-use masonry::widget;
+use masonry::{widget, Affine};
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{Color, MessageResult, Pod, TextAlignment, TextWeight, View, ViewCtx, ViewId};
 
+use super::Transformable;
+
 pub fn label(label: impl Into<ArcStr>) -> Label {
     Label {
         label: label.into(),
@@ -17,6 +19,7 @@ pub fn label(label: impl Into<ArcStr>) -> Label {
         text_size: masonry::theme::TEXT_SIZE_NORMAL,
         weight: TextWeight::NORMAL,
         font: FontStack::List(std::borrow::Cow::Borrowed(&[])),
+        transform: Affine::IDENTITY,
     }
 }
 
@@ -30,6 +33,7 @@ pub struct Label {
     pub(in crate::view) text_size: f32,
     pub(in crate::view) weight: TextWeight,
     pub(in crate::view) font: FontStack<'static>, // TODO: add more attributes of `masonry::widget::Label`
+    pub(in crate::view) transform: Affine,
 }
 
 impl Label {
@@ -65,19 +69,26 @@ impl Label {
     }
 }
 
+impl Transformable for Label {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl ViewMarker for Label {}
 impl<State, Action> View<State, Action, ViewCtx> for Label {
     type Element = Pod<widget::Label>;
     type ViewState = ();
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
-        let widget_pod = ctx.new_pod(
+        let widget_pod = ctx.new_pod_with_transform(
             widget::Label::new(self.label.clone())
                 .with_brush(self.text_brush.clone())
                 .with_alignment(self.alignment)
                 .with_style(StyleProperty::FontSize(self.text_size))
                 .with_style(StyleProperty::FontWeight(self.weight))
                 .with_style(StyleProperty::FontStack(self.font.clone())),
+            self.transform,
         );
         (widget_pod, ())
     }
@@ -89,6 +100,9 @@ impl<State, Action> View<State, Action, ViewCtx> for Label {
         _ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.label != self.label {
             widget::Label::set_text(&mut element, self.label.clone());
         }
diff --git a/xilem/src/view/progress_bar.rs b/xilem/src/view/progress_bar.rs
index 7917788b8..2830145f7 100644
--- a/xilem/src/view/progress_bar.rs
+++ b/xilem/src/view/progress_bar.rs
@@ -1,17 +1,29 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use masonry::widget;
+use masonry::{widget, Affine};
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
 
+use super::Transformable;
+
 pub fn progress_bar(progress: Option<f64>) -> ProgressBar {
-    ProgressBar { progress }
+    ProgressBar {
+        progress,
+        transform: Affine::IDENTITY,
+    }
 }
 
 pub struct ProgressBar {
     progress: Option<f64>,
+    transform: Affine,
+}
+
+impl Transformable for ProgressBar {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
 }
 
 impl ViewMarker for ProgressBar {}
@@ -20,7 +32,9 @@ impl<State, Action> View<State, Action, ViewCtx> for ProgressBar {
     type ViewState = ();
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
-        ctx.with_leaf_action_widget(|ctx| ctx.new_pod(widget::ProgressBar::new(self.progress)))
+        ctx.with_leaf_action_widget(|ctx| {
+            ctx.new_pod_with_transform(widget::ProgressBar::new(self.progress), self.transform)
+        })
     }
 
     fn rebuild(
@@ -30,6 +44,9 @@ impl<State, Action> View<State, Action, ViewCtx> for ProgressBar {
         _ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.progress != self.progress {
             widget::ProgressBar::set_progress(&mut element, self.progress);
         }
diff --git a/xilem/src/view/prose.rs b/xilem/src/view/prose.rs
index 191ab4d01..4198d12ba 100644
--- a/xilem/src/view/prose.rs
+++ b/xilem/src/view/prose.rs
@@ -3,11 +3,14 @@
 
 use masonry::text::{ArcStr, StyleProperty};
 use masonry::widget::{self, LineBreaking};
+use masonry::Affine;
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{Color, MessageResult, Pod, TextAlignment, View, ViewCtx, ViewId};
 
+use super::Transformable;
+
 pub fn prose(content: impl Into<ArcStr>) -> Prose {
     Prose {
         content: content.into(),
@@ -15,6 +18,7 @@ pub fn prose(content: impl Into<ArcStr>) -> Prose {
         alignment: TextAlignment::default(),
         text_size: masonry::theme::TEXT_SIZE_NORMAL,
         line_break_mode: LineBreaking::WordWrap,
+        transform: Affine::IDENTITY,
     }
 }
 
@@ -36,6 +40,7 @@ pub struct Prose {
     alignment: TextAlignment,
     text_size: f32,
     line_break_mode: LineBreaking,
+    transform: Affine,
     // TODO: disabled: bool,
     // TODO: add more attributes of `masonry::widget::Prose`
 }
@@ -67,6 +72,12 @@ fn line_break_clips(linebreaking: LineBreaking) -> bool {
     matches!(linebreaking, LineBreaking::Clip | LineBreaking::WordWrap)
 }
 
+impl Transformable for Prose {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl ViewMarker for Prose {}
 impl<State, Action> View<State, Action, ViewCtx> for Prose {
     type Element = Pod<widget::Prose>;
@@ -92,6 +103,9 @@ impl<State, Action> View<State, Action, ViewCtx> for Prose {
         _ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         let mut text_area = widget::Prose::text_mut(&mut element);
         if prev.content != self.content {
             widget::TextArea::reset_text(&mut text_area, &self.content);
diff --git a/xilem/src/view/sized_box.rs b/xilem/src/view/sized_box.rs
index 78c98f1ae..2bffa186c 100644
--- a/xilem/src/view/sized_box.rs
+++ b/xilem/src/view/sized_box.rs
@@ -3,14 +3,16 @@
 
 use std::marker::PhantomData;
 
-use masonry::widget;
 pub use masonry::widget::Padding;
+use masonry::{widget, Affine};
 use vello::kurbo::RoundedRectRadii;
 use vello::peniko::{Brush, Color};
 
 use crate::core::{DynMessage, Mut, View, ViewId, ViewMarker};
 use crate::{Pod, ViewCtx, WidgetView};
 
+use super::Transformable;
+
 /// A widget with predefined size.
 ///
 /// This widget forces its child to have a specific width and/or height (assuming values are permitted by
@@ -29,6 +31,7 @@ where
         corner_radius: RoundedRectRadii::from_single_radius(0.0),
         padding: Padding::ZERO,
         phantom: PhantomData,
+        transform: Affine::IDENTITY,
     }
 }
 
@@ -42,6 +45,7 @@ pub struct SizedBox<V, State, Action = ()> {
     corner_radius: RoundedRectRadii,
     padding: Padding,
     phantom: PhantomData<fn() -> (State, Action)>,
+    transform: Affine,
 }
 
 impl<V, State, Action> SizedBox<V, State, Action> {
@@ -120,6 +124,12 @@ impl<V, State, Action> SizedBox<V, State, Action> {
     }
 }
 
+impl<V, State, Action> Transformable for SizedBox<V, State, Action> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl<V, State, Action> ViewMarker for SizedBox<V, State, Action> {}
 impl<V, State, Action> View<State, Action, ViewCtx> for SizedBox<V, State, Action>
 where
@@ -143,7 +153,8 @@ where
         if let Some(border) = &self.border {
             widget = widget.border(border.color, border.width);
         }
-        (ctx.new_pod(widget), child_state)
+        let pod = ctx.new_pod_with_transform(widget, self.transform);
+        (pod, child_state)
     }
 
     fn rebuild(
@@ -153,6 +164,9 @@ where
         ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if self.width != prev.width {
             match self.width {
                 Some(width) => widget::SizedBox::set_width(&mut element, width),
diff --git a/xilem/src/view/spinner.rs b/xilem/src/view/spinner.rs
index 7a920b407..f059fa784 100644
--- a/xilem/src/view/spinner.rs
+++ b/xilem/src/view/spinner.rs
@@ -1,11 +1,13 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use masonry::{widget, Color};
+use masonry::{widget, Affine, Color};
 
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
 
+use super::Transformable;
+
 /// An indefinite spinner.
 ///
 /// This can be used to display that progress is happening on some process,
@@ -32,7 +34,10 @@ use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
 /// }
 /// ```
 pub fn spinner() -> Spinner {
-    Spinner { color: None }
+    Spinner {
+        color: None,
+        transform: Affine::IDENTITY,
+    }
 }
 
 /// The [`View`] created by [`spinner`].
@@ -41,6 +46,7 @@ pub fn spinner() -> Spinner {
 #[must_use = "View values do nothing unless provided to Xilem."]
 pub struct Spinner {
     color: Option<Color>,
+    transform: Affine,
 }
 
 impl Spinner {
@@ -51,13 +57,20 @@ impl Spinner {
     }
 }
 
+impl Transformable for Spinner {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl ViewMarker for Spinner {}
 impl<State, Action> View<State, Action, ViewCtx> for Spinner {
     type Element = Pod<widget::Spinner>;
     type ViewState = ();
 
     fn build(&self, ctx: &mut ViewCtx) -> (Self::Element, Self::ViewState) {
-        (ctx.new_pod(widget::Spinner::new()), ())
+        let pod = ctx.new_pod_with_transform(widget::Spinner::new(), self.transform);
+        (pod, ())
     }
 
     fn rebuild(
@@ -67,6 +80,9 @@ impl<State, Action> View<State, Action, ViewCtx> for Spinner {
         _: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         if prev.color != self.color {
             match self.color {
                 Some(color) => widget::Spinner::set_color(&mut element, color),
diff --git a/xilem/src/view/textbox.rs b/xilem/src/view/textbox.rs
index 03b9472ed..7af687f28 100644
--- a/xilem/src/view/textbox.rs
+++ b/xilem/src/view/textbox.rs
@@ -1,12 +1,14 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use masonry::widget;
+use masonry::{widget, Affine};
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, View, ViewMarker};
 use crate::{Color, MessageResult, Pod, TextAlignment, ViewCtx, ViewId};
 
+use super::Transformable;
+
 // FIXME - A major problem of the current approach (always setting the textbox contents)
 // is that if the user forgets to hook up the modify the state's contents in the callback,
 // the textbox will always be reset to the initial state. This will be very annoying for the user.
@@ -24,6 +26,7 @@ where
         on_enter: None,
         text_brush: Color::WHITE.into(),
         alignment: TextAlignment::default(),
+        transform: Affine::IDENTITY,
         // TODO?: disabled: false,
     }
 }
@@ -35,6 +38,7 @@ pub struct Textbox<State, Action> {
     on_enter: Option<Callback<State, Action>>,
     text_brush: Brush,
     alignment: TextAlignment,
+    transform: Affine,
     // TODO: add more attributes of `masonry::widget::TextBox`
 }
 
@@ -59,6 +63,12 @@ impl<State, Action> Textbox<State, Action> {
     }
 }
 
+impl<State, Action> Transformable for Textbox<State, Action> {
+    fn transform_mut(&mut self) -> &mut Affine {
+        &mut self.transform
+    }
+}
+
 impl<State, Action> ViewMarker for Textbox<State, Action> {}
 impl<State: 'static, Action: 'static> View<State, Action, ViewCtx> for Textbox<State, Action> {
     type Element = Pod<widget::Textbox>;
@@ -85,6 +95,9 @@ impl<State: 'static, Action: 'static> View<State, Action, ViewCtx> for Textbox<S
         _ctx: &mut ViewCtx,
         mut element: Mut<Self::Element>,
     ) {
+        if prev.transform != self.transform {
+            element.set_transform(self.transform);
+        }
         let mut text_area = widget::Textbox::text_mut(&mut element);
 
         // Unlike the other properties, we don't compare to the previous value;
diff --git a/xilem/src/view/variable_label.rs b/xilem/src/view/variable_label.rs
index f0ba080b4..1c314cf9d 100644
--- a/xilem/src/view/variable_label.rs
+++ b/xilem/src/view/variable_label.rs
@@ -11,7 +11,7 @@ use xilem_core::ViewPathTracker;
 use crate::core::{DynMessage, Mut, ViewMarker};
 use crate::{MessageResult, Pod, TextWeight, View, ViewCtx, ViewId};
 
-use super::{label, Label};
+use super::{label, Label, Transformable};
 
 /// A view for displaying non-editable text, with a variable [weight](masonry::parley::style::FontWeight).
 pub fn variable_label(text: impl Into<ArcStr>) -> VariableLabel {
@@ -85,7 +85,11 @@ impl VariableLabel {
     }
 }
 
-impl VariableLabel {}
+impl Transformable for VariableLabel {
+    fn transform_mut(&mut self) -> &mut masonry::Affine {
+        &mut self.label.transform
+    }
+}
 
 impl ViewMarker for VariableLabel {}
 impl<State, Action> View<State, Action, ViewCtx> for VariableLabel {

From 90ae403abbc220564ece4a4472cd7542028afeba Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sat, 7 Dec 2024 21:09:37 +0100
Subject: [PATCH 14/18] Fix clippy lints

---
 masonry/src/widget/widget.rs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index f5afc3859..40bc02561 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -12,7 +12,6 @@ use cursor_icon::CursorIcon;
 use smallvec::SmallVec;
 use tracing::field::DisplayValue;
 use tracing::{trace_span, Span};
-use vello::kurbo::Affine;
 use vello::Scene;
 
 use crate::contexts::ComposeCtx;

From 961caf85cd3cf58f06f3861f74f13a495292ebe1 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Fri, 20 Dec 2024 21:07:31 +0100
Subject: [PATCH 15/18] * Rename translation to scroll translation * Consider
 clip_path when building the bounding rect from the children * Fix pointer
 issue in the test harness to click a widget

---
 masonry/src/contexts.rs            |  8 ++++----
 masonry/src/passes/compose.rs      | 19 ++++++++++++++++---
 masonry/src/passes/update.rs       |  2 +-
 masonry/src/testing/harness.rs     |  5 +++--
 masonry/src/widget/portal.rs       |  2 +-
 masonry/src/widget/widget.rs       | 18 ++++++++++--------
 masonry/src/widget/widget_state.rs | 12 ++++--------
 7 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/masonry/src/contexts.rs b/masonry/src/contexts.rs
index 98b593d70..7eefe1480 100644
--- a/masonry/src/contexts.rs
+++ b/masonry/src/contexts.rs
@@ -1127,7 +1127,7 @@ impl ComposeCtx<'_> {
     /// Set a translation for the child widget.
     ///
     /// The translation is applied on top of the position from [`LayoutCtx::place_child`].
-    pub fn set_child_translation<W: Widget>(
+    pub fn set_child_scroll_translation<W: Widget>(
         &mut self,
         child: &mut WidgetPod<W>,
         translation: Vec2,
@@ -1138,7 +1138,7 @@ impl ComposeCtx<'_> {
             || translation.y.is_infinite()
         {
             debug_panic!(
-                "Error in {}: trying to call 'set_child_translation' with child '{}' {} with invalid translation {:?}",
+                "Error in {}: trying to call 'set_child_scroll_translation' with child '{}' {} with invalid translation {:?}",
                 self.widget_id(),
                 self.get_child(child).short_type_name(),
                 child.id(),
@@ -1146,8 +1146,8 @@ impl ComposeCtx<'_> {
             );
         }
         let child = self.get_child_state_mut(child);
-        if translation != child.translation {
-            child.translation = translation;
+        if translation != child.scroll_translation {
+            child.scroll_translation = translation;
             child.transform_changed = true;
         }
     }
diff --git a/masonry/src/passes/compose.rs b/masonry/src/passes/compose.rs
index a0b5e64ef..f78664755 100644
--- a/masonry/src/passes/compose.rs
+++ b/masonry/src/passes/compose.rs
@@ -30,11 +30,11 @@ fn compose_widget(
         return;
     }
 
-    let local_translation = state.item.translation + state.item.origin.to_vec2();
+    // the translation needs to be applied *after* applying the transform, as translation by scrolling should be within the transformed coordinate space. Same is true for the (layout) origin, to behave similar as in CSS.
+    let local_translation = state.item.scroll_translation + state.item.origin.to_vec2();
 
     state.item.window_transform =
         parent_window_transform * state.item.transform.then_translate(local_translation);
-    state.item.window_origin = state.item.window_transform.translation().to_point();
 
     let local_rect = state.item.size.to_rect();
     state.item.bounding_rect = state.item.window_transform.transform_rect_bbox(local_rect);
@@ -79,7 +79,20 @@ fn compose_widget(
                 transformed,
                 parent_transform,
             );
-            parent_state.bounding_rect = parent_state.bounding_rect.union(state.item.bounding_rect);
+            let parent_bounding_rect = parent_state.bounding_rect;
+
+            // This could be further optimized by more tightly clipping the child bounding rect according to the clip path.
+            let clipped_child_bounding_rect = if let Some(clip_path) = parent_state.clip_path {
+                let clip_path_bounding_rect =
+                    parent_state.window_transform.transform_rect_bbox(clip_path);
+                state.item.bounding_rect.intersect(clip_path_bounding_rect)
+            } else {
+                state.item.bounding_rect
+            };
+            if !clipped_child_bounding_rect.is_zero_area() {
+                parent_state.bounding_rect =
+                    parent_bounding_rect.union(clipped_child_bounding_rect);
+            }
             parent_state.merge_up(state.item);
         },
     );
diff --git a/masonry/src/passes/update.rs b/masonry/src/passes/update.rs
index b6c66ef69..9e1cbc93f 100644
--- a/masonry/src/passes/update.rs
+++ b/masonry/src/passes/update.rs
@@ -561,7 +561,7 @@ pub(crate) fn run_update_scroll_pass(root: &mut RenderRoot) {
             // is more accurate.
 
             let state = &ctx.widget_state;
-            target_rect = target_rect + state.translation + state.origin.to_vec2();
+            target_rect = target_rect + state.scroll_translation + state.origin.to_vec2();
         });
     }
 }
diff --git a/masonry/src/testing/harness.rs b/masonry/src/testing/harness.rs
index a11ec61db..6a592adf3 100644
--- a/masonry/src/testing/harness.rs
+++ b/masonry/src/testing/harness.rs
@@ -418,8 +418,9 @@ impl TestHarness {
     ///
     /// Combines [`mouse_move`](Self::mouse_move), [`mouse_button_press`](Self::mouse_button_press), and [`mouse_button_release`](Self::mouse_button_release).
     pub fn mouse_click_on(&mut self, id: WidgetId) {
-        let widget_rect = self.get_widget(id).ctx().bounding_rect();
-        let widget_center = widget_rect.center();
+        let widget = self.get_widget(id);
+        let local_widget_center = (widget.ctx().size() / 2.0).to_vec2().to_point();
+        let widget_center = widget.ctx().widget_state.window_transform * local_widget_center;
 
         self.mouse_move(widget_center);
         self.mouse_button_press(PointerButton::Primary);
diff --git a/masonry/src/widget/portal.rs b/masonry/src/widget/portal.rs
index 6fa5169e0..d6b2a490a 100644
--- a/masonry/src/widget/portal.rs
+++ b/masonry/src/widget/portal.rs
@@ -426,7 +426,7 @@ impl<W: Widget> Widget for Portal<W> {
     }
 
     fn compose(&mut self, ctx: &mut ComposeCtx) {
-        ctx.set_child_translation(&mut self.child, Vec2::new(0.0, -self.viewport_pos.y));
+        ctx.set_child_scroll_translation(&mut self.child, Vec2::new(0.0, -self.viewport_pos.y));
     }
 
     fn paint(&mut self, _ctx: &mut PaintCtx, _scene: &mut Scene) {}
diff --git a/masonry/src/widget/widget.rs b/masonry/src/widget/widget.rs
index 40bc02561..047a25d0c 100644
--- a/masonry/src/widget/widget.rs
+++ b/masonry/src/widget/widget.rs
@@ -52,6 +52,7 @@ impl WidgetId {
     }
 }
 
+/// A trait to access a `Widget` as trait object. It is implemented for all types that implement `Widget`.
 pub trait AsDynWidget {
     fn as_dyn(&self) -> &dyn Widget;
     fn as_mut_dyn(&mut self) -> &mut dyn Widget;
@@ -260,11 +261,10 @@ pub trait Widget: AsAny + AsDynWidget {
 
     // --- Auto-generated implementations ---
 
-    /// Return which child, if any, has the given `pos` in its layout rect. In case of overlapping
-    /// children, the last child as determined by [`Widget::children_ids`] is chosen. No child is
-    /// returned if `pos` is outside the widget's clip path.
+    /// Return the first innermost widget composed by this (including `self`), that contains/intersects with `pos` and accepts pointer interaction, if any.
     ///
-    /// The child returned is a direct child, not e.g. a grand-child.
+    /// In case of overlapping children, the last child as determined by [`Widget::children_ids`] is chosen. No widget is
+    /// returned if `pos` is outside the widget's clip path.
     ///
     /// Has a default implementation that can be overridden to search children more efficiently.
     /// Custom implementations must uphold the conditions outlined above.
@@ -324,14 +324,17 @@ pub trait Widget: AsAny + AsDynWidget {
     }
 }
 
-pub(crate) fn find_widget_at_pos<'c>(
+/// See [`Widget::find_widget_at_pos`] for more details.
+pub fn find_widget_at_pos<'c>(
     widget: &WidgetRef<'c, dyn Widget>,
     pos: Point,
 ) -> Option<WidgetRef<'c, dyn Widget>> {
     if widget.ctx.widget_state.bounding_rect.contains(pos) {
         let local_pos = widget.ctx().widget_state.window_transform.inverse() * pos;
 
-        if Some(false) == widget.ctx.clip_path().map(|clip| clip.contains(local_pos)) {
+        if widget.ctx.is_stashed()
+            || Some(false) == widget.ctx.clip_path().map(|clip| clip.contains(local_pos))
+        {
             return None;
         }
 
@@ -343,8 +346,7 @@ pub(crate) fn find_widget_at_pos<'c>(
                 return Some(child);
             }
         }
-        if !widget.ctx.is_stashed()
-            && widget.ctx.accepts_pointer_interaction()
+        if widget.ctx.accepts_pointer_interaction()
             && widget.ctx.size().to_rect().contains(local_pos)
         {
             Some(*widget)
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index a0d35918c..f85e31c00 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -44,8 +44,6 @@ pub(crate) struct WidgetState {
     /// The origin of the widget in the parent's coordinate space; together with
     /// `size` these constitute the widget's layout rect.
     pub(crate) origin: Point,
-    /// The origin of the widget in the window coordinate space;
-    pub(crate) window_origin: Point,
     /// The insets applied to the layout rect to generate the paint rect.
     /// In general, these will be zero; the exception is for things like
     /// drop shadows or overflowing text.
@@ -53,7 +51,7 @@ pub(crate) struct WidgetState {
     // TODO - Document
     // The computed paint rect, in local coordinates.
     pub(crate) local_paint_rect: Rect,
-    /// An axis aligned bounding rect (AABB in 2D), containing itself and all its descendents.
+    /// An axis aligned bounding rect (AABB in 2D), containing itself and all its descendents in window coordinates.
     pub(crate) bounding_rect: Rect,
     /// The offset of the baseline relative to the bottom of the widget.
     ///
@@ -81,11 +79,10 @@ pub(crate) struct WidgetState {
     // efficiently hold an arbitrary shape.
     pub(crate) clip_path: Option<Rect>,
 
-    // TODO is it worth to compute/cache the inverse as well (or does it just take valuable memory)?
     /// This is being computed out of all ancestor transforms and `translation`
     pub(crate) window_transform: Affine,
     pub(crate) transform: Affine,
-    pub(crate) translation: Vec2,
+    pub(crate) scroll_translation: Vec2,
     pub(crate) transform_changed: bool,
 
     // --- PASSES ---
@@ -160,7 +157,6 @@ impl WidgetState {
         WidgetState {
             id,
             origin: Point::ORIGIN,
-            window_origin: Point::ORIGIN,
             size: Size::ZERO,
             is_expecting_place_child_call: false,
             paint_insets: Insets::ZERO,
@@ -170,7 +166,7 @@ impl WidgetState {
             accepts_text_input: false,
             ime_area: None,
             clip_path: Default::default(),
-            translation: Vec2::ZERO,
+            scroll_translation: Vec2::ZERO,
             transform_changed: false,
             is_explicitly_disabled: false,
             is_explicitly_stashed: false,
@@ -275,7 +271,7 @@ impl WidgetState {
     }
 
     pub(crate) fn window_origin(&self) -> Point {
-        self.window_origin
+        self.window_transform.translation().to_point()
     }
 
     pub(crate) fn needs_rewrite_passes(&self) -> bool {

From a715a43438b6a696aa091244a49b16f0c89c2955 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Fri, 27 Dec 2024 16:05:10 +0100
Subject: [PATCH 16/18] Refactor

* Cosmetics
* `CreatedWidget` -> `CreateWidget`
* Support `Transformable` for `OneOf` and `TextBox` in Xilem
---
 masonry/src/contexts.rs            |  7 +++----
 masonry/src/widget/mod.rs          |  2 +-
 masonry/src/widget/widget_pod.rs   | 26 ++++++++++----------------
 masonry/src/widget/widget_state.rs |  6 +++---
 xilem/src/one_of.rs                | 30 +++++++++++++++++++++++++++++-
 xilem/src/view/textbox.rs          |  2 +-
 6 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/masonry/src/contexts.rs b/masonry/src/contexts.rs
index 7eefe1480..7ec385a1b 100644
--- a/masonry/src/contexts.rs
+++ b/masonry/src/contexts.rs
@@ -18,7 +18,7 @@ use crate::passes::layout::run_layout_on;
 use crate::render_root::{MutateCallback, RenderRootSignal, RenderRootState};
 use crate::text::BrushIndex;
 use crate::theme::get_debug_color;
-use crate::widget::{CreatedWidget, WidgetMut, WidgetRef, WidgetState};
+use crate::widget::{CreateWidget, WidgetMut, WidgetRef, WidgetState};
 use crate::{
     Affine, AllowRawMut, BoxConstraints, Insets, Point, Rect, Size, Vec2, Widget, WidgetId,
     WidgetPod,
@@ -865,7 +865,7 @@ impl RegisterCtx<'_> {
     /// Container widgets should call this on all their children in
     /// their implementation of [`Widget::register_children`].
     pub fn register_child(&mut self, child: &mut WidgetPod<impl Widget>) {
-        let Some(CreatedWidget { widget, transform }) = child.take_inner() else {
+        let Some(CreateWidget { widget, transform }) = child.take_inner() else {
             return;
         };
 
@@ -875,8 +875,7 @@ impl RegisterCtx<'_> {
         }
 
         let id = child.id();
-        let mut state = WidgetState::new(child.id(), widget.short_type_name());
-        state.transform = transform;
+        let state = WidgetState::new(child.id(), widget.short_type_name(), transform);
 
         self.widget_children.insert_child(id, Box::new(widget));
         self.widget_state_children.insert_child(id, state);
diff --git a/masonry/src/widget/mod.rs b/masonry/src/widget/mod.rs
index cc26a6f8c..0e3d2e086 100644
--- a/masonry/src/widget/mod.rs
+++ b/masonry/src/widget/mod.rs
@@ -56,7 +56,7 @@ pub use widget_pod::WidgetPod;
 pub use widget_ref::WidgetRef;
 
 pub(crate) use widget_arena::WidgetArena;
-pub(crate) use widget_pod::CreatedWidget;
+pub(crate) use widget_pod::CreateWidget;
 pub(crate) use widget_state::WidgetState;
 
 use crate::{Affine, Size};
diff --git a/masonry/src/widget/widget_pod.rs b/masonry/src/widget/widget_pod.rs
index de0939bd6..1ea8b730d 100644
--- a/masonry/src/widget/widget_pod.rs
+++ b/masonry/src/widget/widget_pod.rs
@@ -24,13 +24,13 @@ pub struct WidgetPod<W> {
 // through context methods where they already have access to the arena.
 // Implementing that requires solving non-trivial design questions.
 
-pub(crate) struct CreatedWidget<W> {
+pub(crate) struct CreateWidget<W> {
     pub(crate) widget: W,
     pub(crate) transform: Affine,
 }
 
 enum WidgetPodInner<W> {
-    Created(CreatedWidget<W>),
+    Create(CreateWidget<W>),
     Inserted,
 }
 
@@ -57,7 +57,7 @@ impl<W: Widget> WidgetPod<W> {
     pub fn new_with_id_and_transform(inner: W, id: WidgetId, transform: Affine) -> WidgetPod<W> {
         WidgetPod {
             id,
-            inner: WidgetPodInner::Created(CreatedWidget {
+            inner: WidgetPodInner::Create(CreateWidget {
                 widget: inner,
                 transform,
             }),
@@ -65,12 +65,12 @@ impl<W: Widget> WidgetPod<W> {
     }
 
     pub(crate) fn incomplete(&self) -> bool {
-        matches!(self.inner, WidgetPodInner::Created(_))
+        matches!(self.inner, WidgetPodInner::Create(_))
     }
 
-    pub(crate) fn take_inner(&mut self) -> Option<CreatedWidget<W>> {
+    pub(crate) fn take_inner(&mut self) -> Option<CreateWidget<W>> {
         match std::mem::replace(&mut self.inner, WidgetPodInner::Inserted) {
-            WidgetPodInner::Created(widget) => Some(widget),
+            WidgetPodInner::Create(widget) => Some(widget),
             WidgetPodInner::Inserted => None,
         }
     }
@@ -87,15 +87,9 @@ impl<W: Widget + 'static> WidgetPod<W> {
     /// Convert a `WidgetPod` containing a widget of a specific concrete type
     /// into a dynamically boxed widget.
     pub fn boxed(self) -> WidgetPod<Box<dyn Widget>> {
-        match self.inner {
-            WidgetPodInner::Created(inner) => WidgetPod::new_with_id_and_transform(
-                Box::new(inner.widget),
-                self.id,
-                inner.transform,
-            ),
-            WidgetPodInner::Inserted => {
-                panic!("Cannot box a widget after it has been inserted into the widget graph")
-            }
-        }
+        let WidgetPodInner::Create(inner) = self.inner else {
+            panic!("Cannot box a widget after it has been inserted into the widget graph")
+        };
+        WidgetPod::new_with_id_and_transform(Box::new(inner.widget), self.id, inner.transform)
     }
 }
diff --git a/masonry/src/widget/widget_state.rs b/masonry/src/widget/widget_state.rs
index f85e31c00..3b045725e 100644
--- a/masonry/src/widget/widget_state.rs
+++ b/masonry/src/widget/widget_state.rs
@@ -153,7 +153,7 @@ pub(crate) struct WidgetState {
 }
 
 impl WidgetState {
-    pub(crate) fn new(id: WidgetId, widget_name: &'static str) -> WidgetState {
+    pub(crate) fn new(id: WidgetId, widget_name: &'static str, transform: Affine) -> WidgetState {
         WidgetState {
             id,
             origin: Point::ORIGIN,
@@ -195,7 +195,7 @@ impl WidgetState {
             widget_name,
             window_transform: Affine::IDENTITY,
             bounding_rect: Rect::ZERO,
-            transform: Affine::IDENTITY,
+            transform,
         }
     }
 
@@ -219,7 +219,7 @@ impl WidgetState {
             needs_update_stashed: false,
             children_changed: false,
             update_focus_chain: false,
-            ..WidgetState::new(id, "<root>")
+            ..WidgetState::new(id, "<root>", Affine::IDENTITY)
         }
     }
 
diff --git a/xilem/src/one_of.rs b/xilem/src/one_of.rs
index 897170e09..e5b212786 100644
--- a/xilem/src/one_of.rs
+++ b/xilem/src/one_of.rs
@@ -13,7 +13,8 @@ use vello::Scene;
 
 use crate::core::one_of::OneOf;
 use crate::core::Mut;
-use crate::{Pod, ViewCtx};
+use crate::view::Transformable;
+use crate::{Affine, Pod, ViewCtx};
 
 impl<
         A: Widget,
@@ -142,6 +143,33 @@ impl<
     }
 }
 
+impl<A, B, C, D, E, F, G, H, I> Transformable for OneOf<A, B, C, D, E, F, G, H, I>
+where
+    A: Transformable,
+    B: Transformable,
+    C: Transformable,
+    D: Transformable,
+    E: Transformable,
+    F: Transformable,
+    G: Transformable,
+    H: Transformable,
+    I: Transformable,
+{
+    fn transform_mut(&mut self) -> &mut Affine {
+        match self {
+            OneOf::A(w) => w.transform_mut(),
+            OneOf::B(w) => w.transform_mut(),
+            OneOf::C(w) => w.transform_mut(),
+            OneOf::D(w) => w.transform_mut(),
+            OneOf::E(w) => w.transform_mut(),
+            OneOf::F(w) => w.transform_mut(),
+            OneOf::G(w) => w.transform_mut(),
+            OneOf::H(w) => w.transform_mut(),
+            OneOf::I(w) => w.transform_mut(),
+        }
+    }
+}
+
 impl crate::core::one_of::PhantomElementCtx for ViewCtx {
     type PhantomElement = Pod<Box<dyn Widget>>;
 }
diff --git a/xilem/src/view/textbox.rs b/xilem/src/view/textbox.rs
index 7af687f28..42f23e07e 100644
--- a/xilem/src/view/textbox.rs
+++ b/xilem/src/view/textbox.rs
@@ -84,7 +84,7 @@ impl<State: 'static, Action: 'static> View<State, Action, ViewCtx> for Textbox<S
         // Ensure that the actions from the *inner* TextArea get routed correctly.
         let id = textbox.area_pod().id();
         ctx.record_action(id);
-        let widget_pod = ctx.new_pod(textbox);
+        let widget_pod = ctx.new_pod_with_transform(textbox, self.transform);
         (widget_pod, ())
     }
 

From 4cbfc6560bbd37c8de3295f8a67edd8a21531b1e Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Fri, 27 Dec 2024 17:30:08 +0100
Subject: [PATCH 17/18] Fix clippy lint (`OneOf` -> `Self`)

---
 xilem/src/one_of.rs | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/xilem/src/one_of.rs b/xilem/src/one_of.rs
index 780f926d6..61c474d81 100644
--- a/xilem/src/one_of.rs
+++ b/xilem/src/one_of.rs
@@ -157,15 +157,15 @@ where
 {
     fn transform_mut(&mut self) -> &mut Affine {
         match self {
-            OneOf::A(w) => w.transform_mut(),
-            OneOf::B(w) => w.transform_mut(),
-            OneOf::C(w) => w.transform_mut(),
-            OneOf::D(w) => w.transform_mut(),
-            OneOf::E(w) => w.transform_mut(),
-            OneOf::F(w) => w.transform_mut(),
-            OneOf::G(w) => w.transform_mut(),
-            OneOf::H(w) => w.transform_mut(),
-            OneOf::I(w) => w.transform_mut(),
+            Self::A(w) => w.transform_mut(),
+            Self::B(w) => w.transform_mut(),
+            Self::C(w) => w.transform_mut(),
+            Self::D(w) => w.transform_mut(),
+            Self::E(w) => w.transform_mut(),
+            Self::F(w) => w.transform_mut(),
+            Self::G(w) => w.transform_mut(),
+            Self::H(w) => w.transform_mut(),
+            Self::I(w) => w.transform_mut(),
         }
     }
 }

From 4945288eb26b2629263640ba3c1b3d679f1bc0d7 Mon Sep 17 00:00:00 2001
From: Philipp Mildenberger <philipp@mildenberger.me>
Date: Sun, 29 Dec 2024 19:23:25 +0100
Subject: [PATCH 18/18] Add transforms example and expose `masonry::{Affine,
 Vec2}` in Xilem

---
 xilem/examples/transforms.rs     | 93 ++++++++++++++++++++++++++++++++
 xilem/src/lib.rs                 |  4 +-
 xilem/src/view/button.rs         |  4 +-
 xilem/src/view/checkbox.rs       |  4 +-
 xilem/src/view/flex.rs           |  4 +-
 xilem/src/view/grid.rs           |  4 +-
 xilem/src/view/image.rs          |  3 +-
 xilem/src/view/label.rs          |  4 +-
 xilem/src/view/mod.rs            | 10 +++-
 xilem/src/view/portal.rs         |  4 +-
 xilem/src/view/progress_bar.rs   |  4 +-
 xilem/src/view/prose.rs          |  6 +--
 xilem/src/view/sized_box.rs      |  4 +-
 xilem/src/view/spinner.rs        |  4 +-
 xilem/src/view/textbox.rs        |  4 +-
 xilem/src/view/variable_label.rs |  2 +-
 16 files changed, 128 insertions(+), 30 deletions(-)
 create mode 100644 xilem/examples/transforms.rs

diff --git a/xilem/examples/transforms.rs b/xilem/examples/transforms.rs
new file mode 100644
index 000000000..d061ba2e7
--- /dev/null
+++ b/xilem/examples/transforms.rs
@@ -0,0 +1,93 @@
+// Copyright 2024 the Xilem Authors
+// SPDX-License-Identifier: Apache-2.0
+
+//! The transform for all views can be modified similar to CSS transforms.
+
+use std::f64::consts::{PI, TAU};
+
+use winit::error::EventLoopError;
+use xilem::view::{button, grid, label, GridExt as _, Transformable as _};
+use xilem::{EventLoop, Vec2, WidgetView, Xilem};
+
+struct TransformsGame {
+    rotation: f64,
+    translation: Vec2,
+    scale: f64,
+}
+
+impl TransformsGame {
+    fn view(&mut self) -> impl WidgetView<Self> {
+        let rotation_correct = (self.rotation % TAU).abs() < 0.001;
+        let scale_correct = self.scale >= 0.99 && self.scale <= 1.01;
+        let translation_correct = self.translation.x == 0.0 && self.translation.y == 0.0;
+
+        let status = if rotation_correct && scale_correct && translation_correct {
+            label("Great success!")
+        } else {
+            let rotation_mark = if rotation_correct { "✓" } else { "⨯" };
+            let scale_mark = if scale_correct { "✓" } else { "⨯" };
+            let translation_mark = if translation_correct { "✓" } else { "⨯" };
+            label(format!(
+                "rotation: {rotation_mark}\nscale: {scale_mark}\ntranslation: {translation_mark}"
+            ))
+        };
+
+        // Every view can be transformed similar as with CSS transforms in the web.
+        // Currently only 2D transforms are supported.
+        let transformed_status = status
+            .translate(self.translation)
+            .rotate(self.rotation)
+            .scale(self.scale);
+
+        let controls = (
+            button("↶", |this: &mut Self| {
+                this.rotation -= PI * 0.125;
+            })
+            .grid_pos(0, 0),
+            button("↑", |this: &mut Self| {
+                this.translation.y -= 10.0;
+            })
+            .grid_pos(1, 0),
+            button("↷", |this: &mut Self| {
+                this.rotation += PI * 0.125;
+            })
+            .grid_pos(2, 0),
+            button("←", |this: &mut Self| {
+                this.translation.x -= 10.0;
+            })
+            .grid_pos(0, 1),
+            button("→", |this: &mut Self| {
+                this.translation.x += 10.0;
+            })
+            .grid_pos(2, 1),
+            button("-", |this: &mut Self| {
+                // 2 ^ (1/3) for 3 clicks to reach the target.
+                this.scale /= 1.2599210498948732;
+            })
+            .grid_pos(0, 2),
+            button("↓", |this: &mut Self| {
+                this.translation.y += 10.0;
+            })
+            .grid_pos(1, 2),
+            button("+", |this: &mut Self| {
+                this.scale *= 1.2599210498948732;
+            })
+            .grid_pos(2, 2),
+        );
+
+        grid((controls, transformed_status.grid_pos(1, 1)), 3, 3)
+    }
+}
+
+fn main() -> Result<(), EventLoopError> {
+    let app = Xilem::new(
+        TransformsGame {
+            rotation: PI * 0.25,
+            translation: Vec2::new(20.0, 30.0),
+            scale: 2.0,
+        },
+        TransformsGame::view,
+    );
+    app.run_windowed(EventLoop::with_user_event(), "Transforms".into())?;
+    Ok(())
+}
diff --git a/xilem/src/lib.rs b/xilem/src/lib.rs
index dee574a8c..6d899c0df 100644
--- a/xilem/src/lib.rs
+++ b/xilem/src/lib.rs
@@ -44,7 +44,7 @@ use std::sync::Arc;
 
 use masonry::dpi::LogicalSize;
 use masonry::widget::{RootWidget, WidgetMut};
-use masonry::{event_loop_runner, Affine, Widget, WidgetId, WidgetPod};
+use masonry::{event_loop_runner, Widget, WidgetId, WidgetPod};
 use winit::error::EventLoopError;
 use winit::window::{Window, WindowAttributes};
 
@@ -53,7 +53,7 @@ use crate::core::{
     ViewPathTracker, ViewSequence,
 };
 pub use masonry::event_loop_runner::{EventLoop, EventLoopBuilder};
-pub use masonry::{dpi, palette, Color, FontWeight, TextAlignment};
+pub use masonry::{dpi, palette, Affine, Color, FontWeight, TextAlignment, Vec2};
 pub use xilem_core as core;
 
 /// Tokio is the async runner used with Xilem.
diff --git a/xilem/src/view/button.rs b/xilem/src/view/button.rs
index afcdba7bc..171d1949e 100644
--- a/xilem/src/view/button.rs
+++ b/xilem/src/view/button.rs
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::text::StyleProperty;
+use masonry::widget;
 pub use masonry::PointerButton;
-use masonry::{widget, Affine};
 
 use crate::core::{DynMessage, Mut, View, ViewMarker};
 use crate::view::Label;
-use crate::{MessageResult, Pod, ViewCtx, ViewId};
+use crate::{Affine, MessageResult, Pod, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/checkbox.rs b/xilem/src/view/checkbox.rs
index 29944cf0e..d7deed189 100644
--- a/xilem/src/view/checkbox.rs
+++ b/xilem/src/view/checkbox.rs
@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 use masonry::text::ArcStr;
-use masonry::{widget, Affine};
+use masonry::widget;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
+use crate::{Affine, MessageResult, Pod, View, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/flex.rs b/xilem/src/view/flex.rs
index 126be45bb..cdf27acd1 100644
--- a/xilem/src/view/flex.rs
+++ b/xilem/src/view/flex.rs
@@ -5,13 +5,13 @@ use std::marker::PhantomData;
 
 use masonry::widget::{self, WidgetMut};
 pub use masonry::widget::{Axis, CrossAxisAlignment, FlexParams, MainAxisAlignment};
-use masonry::{Affine, Widget};
+use masonry::Widget;
 
 use crate::core::{
     AppendVec, DynMessage, ElementSplice, MessageResult, Mut, SuperElement, View, ViewElement,
     ViewId, ViewMarker, ViewPathTracker, ViewSequence,
 };
-use crate::{AnyWidgetView, Pod, ViewCtx, WidgetView};
+use crate::{Affine, AnyWidgetView, Pod, ViewCtx, WidgetView};
 
 pub fn flex<State, Action, Seq: FlexSequence<State, Action>>(
     sequence: Seq,
diff --git a/xilem/src/view/grid.rs b/xilem/src/view/grid.rs
index 0fd44b02e..cc951a475 100644
--- a/xilem/src/view/grid.rs
+++ b/xilem/src/view/grid.rs
@@ -4,13 +4,13 @@
 use std::marker::PhantomData;
 
 use masonry::widget::{self, GridParams, WidgetMut};
-use masonry::{Affine, Widget};
+use masonry::Widget;
 
 use crate::core::{
     AppendVec, DynMessage, ElementSplice, MessageResult, Mut, SuperElement, View, ViewElement,
     ViewId, ViewMarker, ViewSequence,
 };
-use crate::{Pod, ViewCtx, WidgetView};
+use crate::{Affine, Pod, ViewCtx, WidgetView};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/image.rs b/xilem/src/view/image.rs
index c25418f97..200b4e65d 100644
--- a/xilem/src/view/image.rs
+++ b/xilem/src/view/image.rs
@@ -4,10 +4,9 @@
 //! The bitmap image widget.
 
 use masonry::widget::{self, ObjectFit};
-use masonry::Affine;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
+use crate::{Affine, MessageResult, Pod, View, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/label.rs b/xilem/src/view/label.rs
index e6c880703..1c387497b 100644
--- a/xilem/src/view/label.rs
+++ b/xilem/src/view/label.rs
@@ -3,11 +3,11 @@
 
 use masonry::parley::style::{FontStack, FontWeight};
 use masonry::text::{ArcStr, StyleProperty};
-use masonry::{widget, Affine};
+use masonry::widget;
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{Color, MessageResult, Pod, TextAlignment, View, ViewCtx, ViewId};
+use crate::{Affine, Color, MessageResult, Pod, TextAlignment, View, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/mod.rs b/xilem/src/view/mod.rs
index 2fb4d746a..43bd696e2 100644
--- a/xilem/src/view/mod.rs
+++ b/xilem/src/view/mod.rs
@@ -50,7 +50,7 @@ pub use portal::*;
 
 /// An extension trait, to allow common transformations of the views transform.
 pub trait Transformable: Sized {
-    fn transform_mut(&mut self) -> &mut masonry::Affine;
+    fn transform_mut(&mut self) -> &mut crate::Affine;
 
     #[must_use]
     fn rotate(mut self, radians: f64) -> Self {
@@ -74,9 +74,15 @@ pub trait Transformable: Sized {
     }
 
     #[must_use]
-    fn translate(mut self, v: impl Into<masonry::Vec2>) -> Self {
+    fn translate(mut self, v: impl Into<crate::Vec2>) -> Self {
         let transform = self.transform_mut();
         *transform = transform.then_translate(v.into());
         self
     }
+
+    #[must_use]
+    fn transform(mut self, v: impl Into<crate::Affine>) -> Self {
+        *self.transform_mut() *= v.into();
+        self
+    }
 }
diff --git a/xilem/src/view/portal.rs b/xilem/src/view/portal.rs
index 9c023e871..814b9e260 100644
--- a/xilem/src/view/portal.rs
+++ b/xilem/src/view/portal.rs
@@ -3,10 +3,10 @@
 
 use std::marker::PhantomData;
 
-use masonry::{widget, Affine};
+use masonry::widget;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{MessageResult, Pod, View, ViewCtx, ViewId, WidgetView};
+use crate::{Affine, MessageResult, Pod, View, ViewCtx, ViewId, WidgetView};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/progress_bar.rs b/xilem/src/view/progress_bar.rs
index 2830145f7..ef83c3ecf 100644
--- a/xilem/src/view/progress_bar.rs
+++ b/xilem/src/view/progress_bar.rs
@@ -1,10 +1,10 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use masonry::{widget, Affine};
+use masonry::widget;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
+use crate::{Affine, MessageResult, Pod, View, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/prose.rs b/xilem/src/view/prose.rs
index 4198d12ba..749ee4f05 100644
--- a/xilem/src/view/prose.rs
+++ b/xilem/src/view/prose.rs
@@ -3,11 +3,10 @@
 
 use masonry::text::{ArcStr, StyleProperty};
 use masonry::widget::{self, LineBreaking};
-use masonry::Affine;
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{Color, MessageResult, Pod, TextAlignment, View, ViewCtx, ViewId};
+use crate::{Affine, Color, MessageResult, Pod, TextAlignment, View, ViewCtx, ViewId};
 
 use super::Transformable;
 
@@ -89,9 +88,10 @@ impl<State, Action> View<State, Action, ViewCtx> for Prose {
             .with_alignment(self.alignment)
             .with_style(StyleProperty::FontSize(self.text_size))
             .with_word_wrap(self.line_break_mode == LineBreaking::WordWrap);
-        let widget_pod = ctx.new_pod(
+        let widget_pod = ctx.new_pod_with_transform(
             widget::Prose::from_text_area(text_area)
                 .with_clip(line_break_clips(self.line_break_mode)),
+            self.transform,
         );
         (widget_pod, ())
     }
diff --git a/xilem/src/view/sized_box.rs b/xilem/src/view/sized_box.rs
index cb7eac390..6020e7a3e 100644
--- a/xilem/src/view/sized_box.rs
+++ b/xilem/src/view/sized_box.rs
@@ -3,13 +3,13 @@
 
 use std::marker::PhantomData;
 
+use masonry::widget;
 pub use masonry::widget::Padding;
-use masonry::{widget, Affine};
 use vello::kurbo::RoundedRectRadii;
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, View, ViewId, ViewMarker};
-use crate::{Pod, ViewCtx, WidgetView};
+use crate::{Affine, Pod, ViewCtx, WidgetView};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/spinner.rs b/xilem/src/view/spinner.rs
index f059fa784..d2319f8f1 100644
--- a/xilem/src/view/spinner.rs
+++ b/xilem/src/view/spinner.rs
@@ -1,10 +1,10 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use masonry::{widget, Affine, Color};
+use masonry::{widget, Color};
 
 use crate::core::{DynMessage, Mut, ViewMarker};
-use crate::{MessageResult, Pod, View, ViewCtx, ViewId};
+use crate::{Affine, MessageResult, Pod, View, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/textbox.rs b/xilem/src/view/textbox.rs
index 42f23e07e..8ce8f8c2a 100644
--- a/xilem/src/view/textbox.rs
+++ b/xilem/src/view/textbox.rs
@@ -1,11 +1,11 @@
 // Copyright 2024 the Xilem Authors
 // SPDX-License-Identifier: Apache-2.0
 
-use masonry::{widget, Affine};
+use masonry::widget;
 use vello::peniko::Brush;
 
 use crate::core::{DynMessage, Mut, View, ViewMarker};
-use crate::{Color, MessageResult, Pod, TextAlignment, ViewCtx, ViewId};
+use crate::{Affine, Color, MessageResult, Pod, TextAlignment, ViewCtx, ViewId};
 
 use super::Transformable;
 
diff --git a/xilem/src/view/variable_label.rs b/xilem/src/view/variable_label.rs
index dd6a6be97..2bc3508c3 100644
--- a/xilem/src/view/variable_label.rs
+++ b/xilem/src/view/variable_label.rs
@@ -85,7 +85,7 @@ impl VariableLabel {
 }
 
 impl Transformable for VariableLabel {
-    fn transform_mut(&mut self) -> &mut masonry::Affine {
+    fn transform_mut(&mut self) -> &mut crate::Affine {
         &mut self.label.transform
     }
 }