llimphi_compositor/hero.rs
1//! **Hero / shared-element transitions** — un mismo nodo lógico (key estable)
2//! que aparece en posiciones distintas entre frames "vuela" del rect anterior
3//! al actual en vez de saltar. Es el Hero de Flutter auténtico.
4//!
5//! Modelo:
6//! - El caller marca un nodo con [`View::hero(key, duration)`](crate::View::hero).
7//! `key` enlaza "el mismo nodo lógico" entre dos `view()` distintos (entre
8//! rutas, paneles, layouts) — dos nodos con la misma `key` en frames distintos
9//! son la misma identidad para el runtime.
10//! - El runtime mantiene una instancia de [`HeroRegistry`] entre frames y llama
11//! [`HeroRegistry::reconcile`] DESPUÉS de `compute` y ANTES de `paint`. Por
12//! cada nodo hero:
13//! - Lee su rect absoluto del [`ComputedLayout`].
14//! - Si en el frame anterior la misma `key` vivió en un rect distinto,
15//! arranca un tween: durante `duration`, escribe en `node.transform` una
16//! afín que "lleva visualmente" el nodo del rect actual al rect anterior y
17//! converge a `IDENTITY`. El nodo se ve VOLAR del rect anterior al actual.
18//! - Mientras el tween esté vivo, devuelve `true` y el runtime pide otro
19//! frame (ticker autodetenido).
20//! - Al asentarse, deja `node.transform = None`: cero costo de transform
21//! residual en frames posteriores.
22//!
23//! No depende de [`crate::AnimRegistry`] — el wiring es independiente; sólo
24//! reusa el campo `transform` del [`MountedNode`](crate::MountedNode), que el
25//! `paint` ya respeta como cualquier otro afín.
26//!
27//! ## Reglas de uso
28//!
29//! - `key` debe ser estable y **única** entre los nodos hero presentes en un
30//! mismo frame. Dos hero con la misma key en el mismo árbol generan
31//! ambigüedad; el runtime se queda con la última que recorra.
32//! - El rect "anterior" es el del frame anterior — no funciona como
33//! shared-element entre dos *vistas montadas a la vez* (eso requeriría dos
34//! rect simultáneos por key). Funciona entre transiciones de rutas.
35
36use std::collections::HashMap;
37use std::time::{Duration, Instant};
38
39use llimphi_layout::{ComputedLayout, Rect};
40use vello::kurbo::Affine;
41
42/// Declara un nodo como **hero**: la `key` enlaza la identidad entre frames; si
43/// el rect cambia, el runtime anima la transición.
44#[derive(Clone, Copy, Debug)]
45pub struct Hero {
46 pub key: u64,
47 pub duration: Duration,
48 /// Easing aplicado a `t ∈ [0,1]`. Por defecto, los setters de [`View`]
49 /// usan un ease-out cúbico (igual que las animaciones implícitas).
50 pub easing: fn(f32) -> f32,
51}
52
53/// Registro de heroes, vivo entre frames. Guarda el último rect por `key` para
54/// detectar el delta y un tween activo si está animando.
55#[derive(Default)]
56pub struct HeroRegistry {
57 /// Último rect donde se pintó un nodo con esta `key`. Se actualiza en cada
58 /// `reconcile`. Es contra esto que detectamos el cambio que dispara el
59 /// tween.
60 last: HashMap<u64, Rect>,
61 /// Tweens en curso. Cada uno conoce su `from_rect`, el reloj y el easing.
62 /// Una key con tween activo NO arranca uno nuevo si vuelve a moverse —
63 /// reusamos el `from_rect` original para que la trayectoria sea continua
64 /// (si el target cambia a mitad, vuela hacia el nuevo destino, no cambia
65 /// el origen).
66 tweens: HashMap<u64, Tween>,
67}
68
69struct Tween {
70 from_rect: Rect,
71 start: Instant,
72 duration: Duration,
73 easing: fn(f32) -> f32,
74}
75
76impl HeroRegistry {
77 pub fn new() -> Self {
78 Self::default()
79 }
80
81 /// Reconcilia heroes con el árbol montado. Para cada nodo con [`Hero`]:
82 /// - Si el rect cambió respecto del frame anterior, arranca tween.
83 /// - Si hay tween activo y vivo, escribe `node.transform` con la afín
84 /// interpolada (cur → from).
85 /// - Cuando el tween termina, lo limpia y deja `node.transform = None`.
86 ///
87 /// Llamar DESPUÉS de `compute` y ANTES de `paint`. Devuelve `true` si
88 /// algún tween sigue en curso → el runtime pide otro frame.
89 pub fn reconcile<Msg>(
90 &mut self,
91 mounted: &mut crate::Mounted<Msg>,
92 computed: &ComputedLayout,
93 now: Instant,
94 ) -> bool {
95 let mut animating = false;
96 let mut seen: Vec<u64> = Vec::new();
97 for node in &mut mounted.nodes {
98 let Some(hero) = node.hero else { continue };
99 let Some(cur) = computed.get(node.id) else { continue };
100 seen.push(hero.key);
101
102 // ¿Cambió el rect respecto del último frame? Arrancar tween (si no
103 // hay uno activo; si lo hay, no re-resetamos el origen).
104 if let Some(last) = self.last.get(&hero.key).copied() {
105 if last != cur && !self.tweens.contains_key(&hero.key) {
106 self.tweens.insert(
107 hero.key,
108 Tween {
109 from_rect: last,
110 start: now,
111 duration: hero.duration,
112 easing: hero.easing,
113 },
114 );
115 }
116 }
117
118 // Aplicar tween si está vivo. Calcula la afín que mapea `cur` al
119 // `from_rect` y la interpola hacia identidad a medida que `t` crece.
120 if let Some(tw) = self.tweens.get(&hero.key) {
121 let elapsed = now.saturating_duration_since(tw.start).as_secs_f32();
122 let raw = (elapsed / tw.duration.as_secs_f32().max(1e-6)).clamp(0.0, 1.0);
123 if raw >= 1.0 {
124 // Aterrizó: dejamos el nodo sin transform y limpiamos.
125 node.transform = None;
126 self.tweens.remove(&hero.key);
127 } else {
128 let t = (tw.easing)(raw);
129 let back = back_transform(cur, tw.from_rect);
130 let xf = lerp_affine(back, Affine::IDENTITY, t);
131 node.transform = Some(xf);
132 animating = true;
133 }
134 }
135
136 self.last.insert(hero.key, cur);
137 }
138 // Las keys que no aparecieron este frame se descartan (un hero que se
139 // va deja de recordarse; si vuelve, su rect "anterior" será el nuevo
140 // primero — no anima desde el último que tuvo hace varios frames).
141 if self.last.len() != seen.len() {
142 self.last.retain(|k, _| seen.contains(k));
143 self.tweens.retain(|k, _| seen.contains(k));
144 }
145 animating
146 }
147}
148
149/// Afín local que, aplicada con [`View::transform`]'s convención (alrededor
150/// del centro del rect actual), mapea visualmente cada punto del `cur_rect`
151/// al punto correspondiente del `from_rect`. Es la base de un "fly":
152/// el nodo se pinta en `cur` pero con esta xf VOLVIÓ a `from` —
153/// interpolando hacia identidad, "vuela" de `from` a `cur`.
154fn back_transform(cur: Rect, from: Rect) -> Affine {
155 // El compositor aplica xf como `T(centro_cur) · xf_local · T(-centro_cur)`,
156 // así que xf_local debe ser `scale + translate` que mapea:
157 // esquina superior izquierda de cur → esquina superior izquierda de from.
158 //
159 // Si scale = (from.w/cur.w, from.h/cur.h) y t = (cx_from - cx_cur,
160 // cy_from - cy_cur), entonces `T(t) · S` cumple esa propiedad (despejo en
161 // los comentarios del módulo).
162 let sx = (from.w as f64) / (cur.w as f64).max(1e-6);
163 let sy = (from.h as f64) / (cur.h as f64).max(1e-6);
164 let cx_cur = (cur.x + cur.w * 0.5) as f64;
165 let cy_cur = (cur.y + cur.h * 0.5) as f64;
166 let cx_from = (from.x + from.w * 0.5) as f64;
167 let cy_from = (from.y + from.h * 0.5) as f64;
168 Affine::translate((cx_from - cx_cur, cy_from - cy_cur)) * Affine::scale_non_uniform(sx, sy)
169}
170
171/// Lerp componente-a-componente de las 6 coefs del afín. Idéntica al helper
172/// privado de [`crate::anim`] — vive separada para mantener el módulo `hero`
173/// auto-contenido (sin acoplar a Anim).
174fn lerp_affine(a: Affine, b: Affine, t: f32) -> Affine {
175 let p = a.as_coeffs();
176 let q = b.as_coeffs();
177 let ft = t as f64;
178 Affine::new([
179 p[0] + (q[0] - p[0]) * ft,
180 p[1] + (q[1] - p[1]) * ft,
181 p[2] + (q[2] - p[2]) * ft,
182 p[3] + (q[3] - p[3]) * ft,
183 p[4] + (q[4] - p[4]) * ft,
184 p[5] + (q[5] - p[5]) * ft,
185 ])
186}
187
188#[cfg(test)]
189mod tests {
190 use super::*;
191 use crate::{mount, View};
192 use llimphi_layout::{LayoutTree, Style};
193 use llimphi_layout::taffy::prelude::length;
194 use llimphi_layout::taffy::Size;
195
196 /// Monta un único nodo hero con su Style + key=1 + dur=200ms. Devuelve
197 /// `Mounted` y el `ComputedLayout` ya resuelto contra un viewport de
198 /// 1000×1000 — los rects salen del propio Style.
199 fn one(x: f32, y: f32, w: f32, h: f32) -> (crate::Mounted<()>, ComputedLayout) {
200 let v = View::<()>::new(Style {
201 size: Size { width: length(w), height: length(h) },
202 inset: llimphi_layout::taffy::Rect {
203 left: length(x),
204 top: length(y),
205 right: llimphi_layout::taffy::prelude::auto(),
206 bottom: llimphi_layout::taffy::prelude::auto(),
207 },
208 position: llimphi_layout::taffy::Position::Absolute,
209 ..Default::default()
210 })
211 .hero(1, Duration::from_millis(200));
212 let mut layout = LayoutTree::new();
213 let mounted = mount(&mut layout, v);
214 let computed = layout
215 .compute(mounted.root, (1000.0_f32, 1000.0_f32))
216 .expect("layout");
217 (mounted, computed)
218 }
219
220 #[test]
221 fn primera_aparicion_no_anima() {
222 let mut reg = HeroRegistry::new();
223 let (mut m, c) = one(10.0, 10.0, 50.0, 50.0);
224 let animating = reg.reconcile(&mut m, &c, Instant::now());
225 assert!(!animating, "primera aparición no debe animar");
226 assert!(m.nodes[0].transform.is_none(), "sin xf en primer frame");
227 }
228
229 #[test]
230 fn cambio_de_rect_arranca_tween_y_aplica_xf() {
231 let mut reg = HeroRegistry::new();
232 let t0 = Instant::now();
233 // Frame 1: rect (10, 10, 50, 50).
234 let (mut m, c) = one(10.0, 10.0, 50.0, 50.0);
235 reg.reconcile(&mut m, &c, t0);
236 // Frame 2: el nodo ahora vive en (200, 200, 100, 100) → arranca tween.
237 let (mut m, c) = one(200.0, 200.0, 100.0, 100.0);
238 let animating = reg.reconcile(&mut m, &c, t0 + Duration::from_millis(50));
239 assert!(animating, "cambio de rect → tween");
240 let xf = m.nodes[0].transform.expect("xf");
241 // A 50ms en una anim de 200ms, raw ≈ 0.25; con ease-out cúbico t > 0.25.
242 // La afín NO debe ser identidad (algún coef se ve).
243 let c = xf.as_coeffs();
244 assert!(c[0] != 1.0 || c[3] != 1.0 || c[4] != 0.0 || c[5] != 0.0,
245 "xf no debe ser identidad a mitad del tween: {:?}", c);
246 }
247
248 #[test]
249 fn al_terminar_limpia_la_xf() {
250 let mut reg = HeroRegistry::new();
251 let t0 = Instant::now();
252 let (mut m, c) = one(10.0, 10.0, 50.0, 50.0);
253 reg.reconcile(&mut m, &c, t0);
254 let (mut m, c) = one(200.0, 200.0, 100.0, 100.0);
255 reg.reconcile(&mut m, &c, t0 + Duration::from_millis(10));
256 // Pasada la duración: el tween se descarta y deja el nodo sin xf.
257 let (mut m, c) = one(200.0, 200.0, 100.0, 100.0);
258 let animating = reg.reconcile(&mut m, &c, t0 + Duration::from_millis(500));
259 assert!(!animating);
260 assert!(m.nodes[0].transform.is_none());
261 }
262
263 #[test]
264 fn back_transform_es_identidad_si_los_rects_coinciden() {
265 let r = Rect { x: 50.0, y: 50.0, w: 100.0, h: 100.0 };
266 let xf = back_transform(r, r);
267 let c = xf.as_coeffs();
268 assert!((c[0] - 1.0).abs() < 1e-9);
269 assert!((c[3] - 1.0).abs() < 1e-9);
270 assert!(c[4].abs() < 1e-9);
271 assert!(c[5].abs() < 1e-9);
272 }
273}