frus_widgets/

transform.rs

//! [`Transform`]: offsets its child at **paint** time, without touching layout, and
//! [`FractionalTranslation`]: the same offset stated as a fraction of the child's own size.

use frus_core::{Alignment, Curve, Rect, Scene};
use frus_layout::Style;

use crate::interaction::Status;
use crate::theme::Theme;
use crate::widget::Widget;

/// Transforms its child **at paint time** (both rendering **and** hit-testing),
/// without changing layout: the siblings do not move, and the child may overflow
/// its box, since there is no clipping.
///
/// Two transformations, each combinable with a `Tween` read in `view()` to
/// **animate**:
/// - **`translate(dx, dy)`** — offsets the subtree (a dot in a corner, an entry
///   that slides in, an error shake…).
/// - **`scale(factor)`** / **`scale_xy(sx, sy)`** — scales the subtree about a
///   pivot (the centre by default), uniformly or **per axis** (stretching,
///   flattening): a button's "pop" effect, a thumbnail zoom.
/// - **`rotate(radians)`** — rotates the subtree about a pivot (the centre by
///   default): a needle, a chevron that flips, a spinner.
///
/// Scale and rotation (and their composition) are melted into **a single affine
/// matrix** carried by a transformed composited layer; hit-testing applies the
/// **inverse** matrix to the point. They **compose** within one widget through the
/// chainers `and_translate`, `and_scale` / `and_scale_xy`, `and_rotate` — applied in
/// the order translation → scale → rotation (the translation innermost, through the
/// child offset). So `Transform::scale(1.5).and_rotate(0.2)` enlarges **and**
/// rotates, exactly, with no composition approximation.
pub struct Transform<Msg = crate::callback::Callback> {
    dx: f32,
    dy: f32,
    /// `(sx, sy, pivot)` — `None` = no scaling.
    scale: Option<(f32, f32, Alignment)>,
    /// `(angle_radians, pivot)` — `None` = no rotation.
    rotate: Option<(f32, Alignment)>,
    /// `(duration, curve)` — `None` = the transform jumps to whatever it is told, which
    /// is what every `Transform` did before this and still does unless asked otherwise.
    anim: Option<(f32, Curve)>,
    children: Vec<Box<dyn Widget<Msg>>>,
}

impl<Msg> Transform<Msg> {
    /// Offsets the child by `(dx, dy)` logical pixels (x to the right, y downwards),
    /// without touching layout.
    pub fn translate(dx: f32, dy: f32) -> Self {
        Self {
            dx,
            dy,
            scale: None,
            rotate: None,
            anim: None,
            children: Vec::new(),
        }
    }

    /// Scales the child by `factor` **about its centre**, without touching layout
    /// (`1.0` = neutral, `2.0` = double, `0.5` = half).
    pub fn scale(factor: f32) -> Self {
        Self::scale_xy_from(factor, factor, Alignment::CENTER)
    }

    /// Scales the child **per axis** (`sx` horizontal, `sy` vertical) about its
    /// centre — stretching or flattening. `scale_xy(2.0, 1.0)` doubles the width
    /// while keeping the height.
    pub fn scale_xy(sx: f32, sy: f32) -> Self {
        Self::scale_xy_from(sx, sy, Alignment::CENTER)
    }

    /// Like [`Transform::scale`], but about a `pivot` (an anchor within the box:
    /// `Alignment::TOP_LEFT` pins the top-left corner, and so on).
    pub fn scale_from(factor: f32, pivot: Alignment) -> Self {
        Self::scale_xy_from(factor, factor, pivot)
    }

    /// Per-axis scaling about a `pivot` — the most general form.
    pub fn scale_xy_from(sx: f32, sy: f32, pivot: Alignment) -> Self {
        Self {
            dx: 0.0,
            dy: 0.0,
            scale: Some((sx, sy, pivot)),
            rotate: None,
            anim: None,
            children: Vec::new(),
        }
    }

    /// Rotates the child by `radians` (clockwise) **about its centre**, without
    /// touching layout.
    pub fn rotate(radians: f32) -> Self {
        Self::rotate_from(radians, Alignment::CENTER)
    }

    /// Like [`Transform::rotate`], but about a `pivot` (an anchor within the box).
    pub fn rotate_from(radians: f32, pivot: Alignment) -> Self {
        Self {
            dx: 0.0,
            dy: 0.0,
            scale: None,
            rotate: Some((radians, pivot)),
            anim: None,
            children: Vec::new(),
        }
    }

    /// **Adds** a translation to the current transformation (composition):
    /// `Transform::scale(1.2).and_translate(0, -4)` enlarges *and* moves up.
    pub fn and_translate(mut self, dx: f32, dy: f32) -> Self {
        self.dx = dx;
        self.dy = dy;
        self
    }

    /// **Adds** a uniform scaling (about the centre) to the current
    /// transformation.
    pub fn and_scale(self, factor: f32) -> Self {
        self.and_scale_xy(factor, factor)
    }

    /// **Adds** a per-axis scaling (about the centre) to the current transformation.
    pub fn and_scale_xy(mut self, sx: f32, sy: f32) -> Self {
        self.scale = Some((sx, sy, Alignment::CENTER));
        self
    }

    /// **Adds** a rotation (about the centre) to the current transformation:
    /// `Transform::scale(1.5).and_rotate(0.2)` enlarges *and* rotates.
    pub fn and_rotate(mut self, radians: f32) -> Self {
        self.rotate = Some((radians, Alignment::CENTER));
        self
    }

    /// **Moves to this transform rather than jumping to it**, over `duration` seconds
    /// along `curve`.
    ///
    /// The widget does not time anything: it declares where it is going and the runtime
    /// drives the scales and the turn there, which is how every implicit animation in
    /// this framework works and why they all share one clock.
    ///
    /// The **pivot** does not animate. It is a choice of origin rather than a quantity,
    /// and interpolating it would slide a shape across the screen while every number
    /// describing the shape stood still.
    ///
    /// ```
    /// use frus_core::Curve;
    /// use frus_widgets::{Text, Transform};
    ///
    /// let pressed = true;
    /// let _button: Transform<()> = Transform::scale(if pressed { 0.95 } else { 1.0 })
    ///     .animated(0.12, Curve::ease_out())
    ///     .child(Text::new("Tap"));
    /// ```
    #[must_use]
    pub fn animated(mut self, duration: f32, curve: Curve) -> Self {
        self.anim = Some((duration, curve));
        self
    }

    /// Sets the transformed child.
    pub fn child(mut self, child: impl Widget<Msg> + 'static) -> Self {
        self.children.clear();
        self.children.push(Box::new(child));
        self
    }
}

impl<Msg: Clone> Widget<Msg> for Transform<Msg> {
    fn style(&self) -> Style {
        // A pass-through: the box takes its size from the context, like the child;
        // the offset only acts at paint time (see `transform_translate`).
        Style::default()
    }

    fn children(&self) -> &[Box<dyn Widget<Msg>>] {
        &self.children
    }

    fn paint(&self, _bounds: Rect, _status: Status, _theme: &Theme, _scene: &mut Scene) {
        // A pure transformation widget: no decoration of its own.
    }

    fn on_click(&self) -> Option<Msg> {
        None
    }

    fn transform_translate(&self) -> Option<(f32, f32)> {
        ((self.dx != 0.0) || (self.dy != 0.0)).then_some((self.dx, self.dy))
    }

    fn transform_scale(&self) -> Option<(f32, f32, Alignment)> {
        self.scale
    }

    fn transform_rotate(&self) -> Option<(f32, Alignment)> {
        self.rotate
    }

    /// Where the transform is heading, when it was told to animate. The **target** and
    /// not the current value: `transform_scale` and `transform_rotate` above still
    /// answer with it too, which is what an isolated frame — a test, a golden, the frame
    /// before the loop has advanced anything — draws.
    fn anim_transform(&self) -> Option<crate::runtime::TransformValues> {
        self.anim.as_ref().map(|_| {
            let (scale_x, scale_y) = self.scale.map_or((1.0, 1.0), |(x, y, _)| (x, y));
            crate::runtime::TransformValues {
                scale_x,
                scale_y,
                rotation: self.rotate.map_or(0.0, |(a, _)| a),
            }
        })
    }

    fn anim_duration(&self) -> f32 {
        self.anim.as_ref().map_or(0.0, |(d, _)| *d)
    }

    fn anim_curve(&self) -> Curve {
        self.anim.as_ref().map_or(Curve::Linear, |(_, c)| c.clone())
    }
}

/// Offsets its child by a **fraction of the child's own size**, at paint time, without
/// touching layout.
///
/// `FractionalTranslation::new(0.5, 0.0)` slides the subtree half its own width to the
/// right; `(-1.0, 0.0)` slides it a whole width to the left, exactly clear of where it
/// was. Like [`Transform::translate`], it moves the render **and** the hit-test, and it
/// moves nothing else: the box stays where the layout put it and the siblings do not
/// budge.
///
/// The reason it exists next to `Transform::translate` is that the number is not known
/// where the widget is written. A panel that has to sit exactly off the edge of itself, a
/// badge half outside its anchor, a row that slides its own width aside to uncover what is
/// under it — each of those is a multiple of a size the layout decides, and a caller that
/// had to pass pixels would be passing a guess.
///
/// ```ignore
/// // A panel parked one full width off the left, sliding in as `open` runs 0 → 1.
/// FractionalTranslation::new(open - 1.0, 0.0).child(panel())
/// ```
///
/// In a right-to-left script the horizontal fraction follows the reading direction, as
/// `Transform::translate` does: a positive `x` moves towards the end of the line.
pub struct FractionalTranslation<Msg = crate::callback::Callback> {
    fx: f32,
    fy: f32,
    /// `(duration, curve)` — `None` = the offset jumps to whatever it is told.
    anim: Option<(f32, Curve)>,
    children: Vec<Box<dyn Widget<Msg>>>,
}

impl<Msg> FractionalTranslation<Msg> {
    /// A translation of `fx` widths across and `fy` heights down, with no child yet.
    pub fn new(fx: f32, fy: f32) -> Self {
        Self {
            fx,
            fy,
            anim: None,
            children: Vec::new(),
        }
    }

    /// **Slides** to each new fraction over `duration` instead of jumping to it, on the
    /// framework's own clock. See [`crate::AnimatedSlide`], which is this and a name.
    pub fn animated(mut self, duration: f32, curve: Curve) -> Self {
        self.anim = Some((duration, curve));
        self
    }

    /// Sets the child, replacing any already there.
    pub fn child(mut self, child: impl Widget<Msg> + 'static) -> Self {
        self.children.clear();
        self.children.push(Box::new(child));
        self
    }
}

impl<Msg: Clone> Widget<Msg> for FractionalTranslation<Msg> {
    fn style(&self) -> Style {
        Style::default()
    }

    fn children(&self) -> &[Box<dyn Widget<Msg>>] {
        &self.children
    }

    fn paint(&self, _bounds: Rect, _status: Status, _theme: &Theme, _scene: &mut Scene) {}

    fn on_click(&self) -> Option<Msg> {
        None
    }

    fn translate_fraction(&self) -> Option<(f32, f32)> {
        Some((self.fx, self.fy))
    }

    fn anim_offset(&self) -> Option<(f32, f32)> {
        self.anim.as_ref().map(|_| (self.fx, self.fy))
    }

    fn anim_duration(&self) -> f32 {
        self.anim.as_ref().map_or(0.0, |(d, _)| *d)
    }

    fn anim_curve(&self) -> Curve {
        self.anim.as_ref().map_or(Curve::Linear, |(_, c)| c.clone())
    }

    fn debug_name(&self) -> &'static str {
        "FractionalTranslation"
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::Container;
    use frus_core::{Color, Primitive, Size};

    /// `Transform::translate(30, 10)` offsets the (20×20) child at paint time: its
    /// background, normally at the top left, is painted at about (30, 10).
    #[test]
    fn translate_offsets_the_child_at_paint() {
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(100.0).child(
            Transform::translate(30.0, 10.0)
                .child(Container::new().width(20.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let rect = ui
            .scene()
            .primitives()
            .iter()
            .find_map(|p| match p {
                Primitive::Rect { rect, color, .. } if color.r > 0.5 => Some(*rect),
                _ => None,
            })
            .expect("the child's red background");
        assert!(
            (rect.x - 30.0).abs() < 0.5 && (rect.y - 10.0).abs() < 0.5,
            "offset to (30, 10): {rect:?}"
        );
    }

    /// The offset is **purely visual**: a sibling placed after a transformed child
    /// keeps its layout position (the Transform neither grows nor moves its box).
    /// Here the 2nd child stays at `y = 20`, despite the 1st being offset 50
    /// vertically.
    #[test]
    fn translate_does_not_affect_layout() {
        let red = Color::rgb(1.0, 0.0, 0.0);
        let green = Color::rgb(0.0, 1.0, 0.0);
        let root = crate::Flex::<()>::column()
            .width(100.0)
            .child(
                Transform::translate(0.0, 50.0)
                    .child(Container::new().flex(1.0).height(20.0).color(red)),
            )
            .child(Container::new().height(20.0).color(green));
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let green_y = ui
            .scene()
            .primitives()
            .iter()
            .find_map(|p| match p {
                Primitive::Rect { rect, color, .. } if color.g > 0.5 && color.r < 0.5 => {
                    Some(rect.y)
                }
                _ => None,
            })
            .expect("the 2nd child's green background");
        // The 1st child takes 20px of height in layout (its offset of 50 is visual):
        // the 2nd child follows at y = 20.
        assert!(
            (green_y - 20.0).abs() < 0.5,
            "sibling in its layout place: y = {green_y}"
        );
    }

    /// Extracts the [`Affine`] of the scene's transformed layer (the subtree is
    /// painted flat *inside* that layer; the transformation is carried by its matrix).
    fn layer_affine<Msg: Clone>(ui: &crate::ui::Ui<Msg>) -> frus_core::Affine {
        ui.scene()
            .primitives()
            .iter()
            .find_map(|p| match p {
                Primitive::Layer {
                    transform: Some(t), ..
                } => Some(t.affine),
                _ => None,
            })
            .expect("a transformed layer")
    }

    /// `Transform::scale(2.0)` carries a matrix that doubles (a linear part of 2) and
    /// leaves **the child's centre (10, 10) fixed**.
    #[test]
    fn scale_grows_the_child_about_its_center() {
        use frus_core::Point;
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(100.0).child(
            Transform::scale(2.0).child(Container::new().width(20.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let m = layer_affine(&ui);
        assert!(
            (m.m[0] - 2.0).abs() < 1e-3 && (m.m[3] - 2.0).abs() < 1e-3,
            "×2 : {:?}",
            m.m
        );
        let c = m.apply(Point::new(10.0, 10.0));
        assert!(
            (c.x - 10.0).abs() < 0.5 && (c.y - 10.0).abs() < 0.5,
            "centre fixe : {c:?}"
        );
    }

    /// `scale_from(2.0, TOP_LEFT)` scales about the child's top-left corner: that
    /// corner (0, 0) stays fixed.
    #[test]
    fn scale_from_pins_the_pivot_corner() {
        use frus_core::{Alignment, Point};
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(100.0).child(
            Transform::scale_from(2.0, Alignment::TOP_LEFT)
                .child(Container::new().width(20.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let m = layer_affine(&ui);
        assert!(
            (m.m[0] - 2.0).abs() < 1e-3 && (m.m[3] - 2.0).abs() < 1e-3,
            "×2 : {:?}",
            m.m
        );
        let c = m.apply(Point::new(0.0, 0.0));
        assert!(
            c.x.abs() < 0.5 && c.y.abs() < 0.5,
            "top-left corner unmoved: {c:?}"
        );
    }

    /// `Transform::scale_xy(3.0, 1.0)` carries a **per-axis** scale matrix (×3 in x,
    /// ×1 in y), with the centre fixed.
    #[test]
    fn scale_xy_stretches_per_axis() {
        use frus_core::Point;
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(200.0).child(
            Transform::scale_xy(3.0, 1.0)
                .child(Container::new().width(20.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(200.0, 200.0), &rt, &theme);
        let m = layer_affine(&ui);
        assert!(
            (m.m[0] - 3.0).abs() < 1e-3 && (m.m[3] - 1.0).abs() < 1e-3,
            "×3 en x, ×1 en y : {:?}",
            m.m
        );
        let c = m.apply(Point::new(10.0, 10.0));
        assert!(
            (c.x - 10.0).abs() < 0.5 && (c.y - 10.0).abs() < 0.5,
            "centre fixe : {c:?}"
        );
    }

    /// `Transform::rotate(π/2)` carries a pure rotation matrix (a linear part of
    /// `[0, 1, -1, 0]`) that leaves the 40×20 child's centre fixed → (20, 10).
    #[test]
    fn rotate_emits_a_rotated_layer() {
        use frus_core::Point;
        use std::f32::consts::FRAC_PI_2;
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(100.0).child(
            Transform::rotate(FRAC_PI_2)
                .child(Container::new().width(40.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let m = layer_affine(&ui);
        assert!(
            m.m[0].abs() < 1e-3
                && (m.m[1] - 1.0).abs() < 1e-3
                && (m.m[2] + 1.0).abs() < 1e-3
                && m.m[3].abs() < 1e-3,
            "rotation +90° : {:?}",
            m.m
        );
        let c = m.apply(Point::new(20.0, 10.0));
        assert!(
            (c.x - 20.0).abs() < 0.5 && (c.y - 10.0).abs() < 0.5,
            "centre fixe : {c:?}"
        );
    }

    /// **Composition**: `scale(2.0).and_rotate(π/2)` melts the two into **a single**
    /// matrix = rotation ∘ scale: the linear part is `[0, 2, -2, 0]` (magnitude 2 =
    /// the scaling, off-diagonal = the rotation).
    #[test]
    fn scale_and_rotate_compose() {
        use std::f32::consts::FRAC_PI_2;
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(100.0).child(
            Transform::scale(2.0)
                .and_rotate(FRAC_PI_2)
                .child(Container::new().width(20.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let m = layer_affine(&ui);
        assert!(
            m.m[0].abs() < 1e-3
                && (m.m[1] - 2.0).abs() < 1e-3
                && (m.m[2] + 2.0).abs() < 1e-3
                && m.m[3].abs() < 1e-3,
            "rotation ∘ scale: {:?}",
            m.m
        );
    }

    /// Under an **axis-aligned** transformation (pure scaling), the **focus** targets
    /// follow too: a point outside the flat button but inside its enlarged image is
    /// focusable, and its focus rectangle is about 2× wider.
    #[test]
    fn axis_aligned_transform_scales_the_focus_rect() {
        use frus_core::Point;
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let flat_ui = crate::ui::build_ui(
            &crate::Flex::<i32>::column()
                .width(200.0)
                .child(crate::Button::new("Ok").on_press(1)),
            Size::new(200.0, 200.0),
            &rt,
            &theme,
        );
        let flat = flat_ui
            .focus_hit(Point::new(2.0, 2.0))
            .expect("a focusable button")
            .1;
        let cy = flat.y + flat.height / 2.0;
        // A point just right of the flat button (200 wide): outside its target.
        let probe = Point::new(flat.x + flat.width + 2.0, cy);
        assert!(
            flat_ui.focus_hit(probe).is_none(),
            "outside the flat button"
        );

        let scaled_ui = crate::ui::build_ui(
            &crate::Flex::<i32>::column()
                .width(200.0)
                .child(Transform::scale(2.0).child(crate::Button::new("Ok").on_press(1))),
            Size::new(200.0, 200.0),
            &rt,
            &theme,
        );
        let (_, r) = scaled_ui
            .focus_hit(probe)
            .expect("the button's enlarged image covers the point");
        assert!(
            (r.width - flat.width * 2.0).abs() < 1.0,
            "rectangle de focus ~2× : {} vs {}",
            r.width,
            flat.width * 2.0
        );
    }

    /// Hit-testing **counter-rotates** the point: a click at a clickable child's
    /// *rotated* position reaches it, while its original (unrotated) position no
    /// longer does. A 40×20 child rotated +90° about (20, 10): the internal point
    /// (35, 10) appears on screen at (20, 25).
    #[test]
    fn rotate_hit_test_counter_rotates_the_point() {
        use frus_core::Point;
        use std::f32::consts::FRAC_PI_2;
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<i32>::column().width(100.0).child(
            Transform::rotate(FRAC_PI_2).child(
                Container::new()
                    .width(40.0)
                    .height(20.0)
                    .color(red)
                    .on_click(7),
            ),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        // On screen, the internal point (35, 10) is painted at (20, 25) after rotation.
        assert!(
            ui.hit(Point::new(20.0, 25.0)).is_some(),
            "a click on the rotated position"
        );
        // The original (unrotated) position no longer covers the child.
        assert!(
            ui.hit(Point::new(35.0, 10.0)).is_none(),
            "l'ancienne position rate"
        );
    }

    /// A fraction is a multiple of the child's **own** box: half a width across and a
    /// whole height down, from a 20 × 20 child, is (10, 20).
    #[test]
    fn a_fractional_translation_offsets_by_the_child_s_own_size() {
        let red = Color::rgb(1.0, 0.0, 0.0);
        let root = crate::Flex::<()>::column().width(100.0).child(
            FractionalTranslation::new(0.5, 1.0)
                .child(Container::new().width(20.0).height(20.0).color(red)),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let rect = ui
            .scene()
            .primitives()
            .iter()
            .find_map(|p| match p {
                Primitive::Rect { rect, color, .. } if color.r > 0.5 => Some(*rect),
                _ => None,
            })
            .expect("the child's red background");
        assert!(
            (rect.x - 10.0).abs() < 0.5 && (rect.y - 20.0).abs() < 0.5,
            "half a width across, a height down: {rect:?}"
        );
    }

    /// And it moves the **hit test** with the paint, as `Transform::translate` does: a
    /// widget you can see somewhere and click somewhere else is the bug this rules out.
    #[test]
    fn a_fractional_translation_moves_the_input_too() {
        let root = crate::Flex::<i32>::column().width(100.0).child(
            FractionalTranslation::new(1.0, 0.0).child(
                Container::<i32>::new()
                    .width(20.0)
                    .height(20.0)
                    .color(Color::rgb(1.0, 0.0, 0.0))
                    .on_click(7),
            ),
        );
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let at = |x: f32| {
            ui.hit(frus_core::Point::new(x, 10.0))
                .and_then(|id| ui.msg_for(id))
        };
        assert_eq!(at(30.0), Some(7), "where it is painted");
        assert_eq!(at(10.0), None, "not where it was laid out");
    }

    /// The offset is a paint offset: the box does not move, so the sibling below it does
    /// not either.
    #[test]
    fn a_fractional_translation_moves_nothing_else() {
        let blue = Color::rgb(0.0, 0.0, 1.0);
        let root = crate::Flex::<()>::column()
            .width(100.0)
            .child(
                FractionalTranslation::new(0.0, 2.0).child(
                    Container::new()
                        .width(20.0)
                        .height(20.0)
                        .color(Color::rgb(1.0, 0.0, 0.0)),
                ),
            )
            .child(Container::new().width(20.0).height(20.0).color(blue));
        let rt = crate::runtime::Runtime::default();
        let theme = crate::Theme::dark();
        let ui = crate::ui::build_ui(&root, Size::new(100.0, 200.0), &rt, &theme);
        let sibling = ui
            .scene()
            .primitives()
            .iter()
            .find_map(|p| match p {
                Primitive::Rect { rect, color, .. } if color.b > 0.5 => Some(*rect),
                _ => None,
            })
            .expect("the sibling");
        assert!(
            (sibling.y - 20.0).abs() < 0.5,
            "the sibling stayed where the layout put it: {sibling:?}"
        );
    }
}