tawasuyu/llimphi

1//! Demo headless del **LayoutBuilder** (Bloque 9 de PARIDAD-FLUTTER): el MISMO
2//! árbol declarativo, renderizado a dos anchos de viewport. Un panel central
3//! usa `View::layout_builder`: si su slot es **angosto** apila las tarjetas en
4//! **1 columna**; si es **ancho**, en **2 columnas**. La decisión depende del
5//! tamaño del slot (no de la ventana), resuelto en dos pasadas — exactamente lo
6//! que el runtime hace por frame.
7//!
8//! Emula el camino del runtime (`resolve_layout_builders`) con las funciones
9//! puras del compositor: `has_layout_builder` → mount pasada 1 → compute →
10//! `collect_builder_constraints` → `expand_layout_builders` → mount/paint.
11//!
12//! Vuelca dos PNGs (`<base>-angosto.png` y `<base>-ancho.png`).
13//! `cargo run -p llimphi-compositor --example layout_builder_demo -- [base]`
14
15use std::fs::File;
16use std::io::BufWriter;
17
18use llimphi_compositor::{
19    collect_builder_constraints, expand_layout_builders, has_layout_builder, mount, paint,
20    Constraints, View,
21};
22use llimphi_hal::{wgpu, Hal};
23use llimphi_layout::taffy::prelude::{length, percent, FlexDirection, Size, Style};
24use llimphi_layout::taffy::{AlignItems, JustifyContent, LengthPercentage, Rect};
25use llimphi_layout::LayoutTree;
26use llimphi_raster::peniko::Color;
27use llimphi_raster::{vello, Renderer};
28use llimphi_text::{Alignment, Typesetter};
29
30const H: u32 = 360;
31const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
32/// Bajo este ancho de slot, el panel apila en 1 columna; por encima, 2.
33const BREAKPOINT: f32 = 360.0;
34
35fn rgb(r: u8, g: u8, b: u8) -> Color {
36    Color::from_rgba8(r, g, b, 255)
37}
38
39/// Una tarjeta de muestra.
40fn card(label: &str) -> View<()> {
41    View::<()>::new(Style {
42        size: Size { width: percent(1.0), height: length(64.0) },
43        align_items: Some(AlignItems::CENTER),
44        justify_content: Some(JustifyContent::CENTER),
45        ..Default::default()
46    })
47    .fill(rgb(60, 72, 100))
48    .radius(10.0)
49    .children(vec![View::<()>::new(Style {
50        size: Size { width: percent(1.0), height: length(20.0) },
51        ..Default::default()
52    })
53    .text_aligned(label.to_string(), 14.0, rgb(235, 238, 245), Alignment::Center)])
54}
55
56/// El subárbol que el builder produce según sus constraints: 1 columna si
57/// angosto, 2 si ancho. Cada columna es un flex column con tarjetas.
58fn responsive_panel(c: Constraints) -> View<()> {
59    let dos_columnas = c.max_width >= BREAKPOINT;
60    let etiqueta = if dos_columnas {
61        format!("slot {:.0}px = 2 columnas", c.max_width)
62    } else {
63        format!("slot {:.0}px = 1 columna", c.max_width)
64    };
65    let header = View::<()>::new(Style {
66        size: Size { width: percent(1.0), height: length(28.0) },
67        ..Default::default()
68    })
69    .text_aligned(etiqueta, 13.0, rgb(150, 200, 160), Alignment::Center);
70
71    let col = |labels: &[&str]| {
72        View::<()>::new(Style {
73            size: Size { width: percent(1.0), height: percent(1.0) },
74            flex_direction: FlexDirection::Column,
75            gap: Size { width: length(0.0), height: length(10.0) },
76            ..Default::default()
77        })
78        .children(labels.iter().map(|l| card(l)).collect())
79    };
80
81    let cuerpo = if dos_columnas {
82        View::<()>::new(Style {
83            size: Size { width: percent(1.0), height: percent(1.0) },
84            flex_direction: FlexDirection::Row,
85            gap: Size { width: length(12.0), height: length(0.0) },
86            ..Default::default()
87        })
88        .children(vec![col(&["Uno", "Tres"]), col(&["Dos", "Cuatro"])])
89    } else {
90        col(&["Uno", "Dos", "Tres", "Cuatro"])
91    };
92
93    View::<()>::new(Style {
94        size: Size { width: percent(1.0), height: percent(1.0) },
95        flex_direction: FlexDirection::Column,
96        gap: Size { width: length(0.0), height: length(8.0) },
97        ..Default::default()
98    })
99    .children(vec![header, cuerpo])
100}
101
102/// Árbol raíz: una sidebar fija + un panel central que es el `layout_builder`.
103/// El ancho del slot del panel = viewport − sidebar − paddings, así cambia con
104/// el viewport sin que el árbol "sepa" el tamaño al construirse.
105fn root() -> View<()> {
106    let sidebar = View::<()>::new(Style {
107        size: Size { width: length(160.0), height: percent(1.0) },
108        ..Default::default()
109    })
110    .fill(rgb(34, 40, 54))
111    .radius(12.0)
112    .children(vec![View::<()>::new(Style {
113        size: Size { width: percent(1.0), height: length(20.0) },
114        ..Default::default()
115    })
116    .text_aligned("sidebar", 13.0, rgb(140, 150, 170), Alignment::Center)]);
117
118    let panel = View::<()>::new(Style {
119        flex_grow: 1.0,
120        size: Size { width: percent(0.0), height: percent(1.0) },
121        ..Default::default()
122    })
123    .layout_builder(responsive_panel);
124
125    View::<()>::new(Style {
126        size: Size { width: percent(1.0), height: percent(1.0) },
127        flex_direction: FlexDirection::Row,
128        gap: Size { width: length(16.0), height: length(0.0) },
129        padding: Rect {
130            left: LengthPercentage::length(16.0),
131            right: LengthPercentage::length(16.0),
132            top: LengthPercentage::length(16.0),
133            bottom: LengthPercentage::length(16.0),
134        },
135        ..Default::default()
136    })
137    .fill(rgb(24, 28, 38))
138    .children(vec![sidebar, panel])
139}
140
141/// Resuelve los builders (dos pasadas) y vuelca el árbol a un PNG a ese ancho.
142fn render_a(ancho: u32, ts: &mut Typesetter, hal: &Hal, renderer: &mut Renderer, path: &str) {
143    let viewport = (ancho as f32, H as f32);
144    // Pasada 1: montar (builders como hojas) + computar.
145    let v1 = root();
146    assert!(has_layout_builder(&v1), "el demo debe tener un layout_builder");
147    let mut l1 = LayoutTree::new();
148    let m1 = mount(&mut l1, v1);
149    let c1 = l1.compute(m1.root, viewport).expect("layout p1");
150    let cons = collect_builder_constraints(&m1, &c1);
151    // Pasada 2: árbol fresco + expand con las constraints reales.
152    let resolved = expand_layout_builders(root(), &cons);
153    let mut l2 = LayoutTree::new();
154    let m2 = mount(&mut l2, resolved);
155    let c2 = l2.compute(m2.root, viewport).expect("layout p2");
156
157    let mut scene = vello::Scene::new();
158    paint(&mut scene, &m2, &c2, ts, None, None);
159
160    let target = hal.device.create_texture(&wgpu::TextureDescriptor {
161        label: Some("dump-lb"),
162        size: wgpu::Extent3d { width: ancho, height: H, depth_or_array_layers: 1 },
163        mip_level_count: 1,
164        sample_count: 1,
165        dimension: wgpu::TextureDimension::D2,
166        format: FMT,
167        usage: wgpu::TextureUsages::STORAGE_BINDING
168            | wgpu::TextureUsages::RENDER_ATTACHMENT
169            | wgpu::TextureUsages::COPY_SRC,
170        view_formats: &[],
171    });
172    let view = target.create_view(&wgpu::TextureViewDescriptor::default());
173    renderer
174        .render_to_view(hal, &scene, &view, ancho, H, rgb(244, 245, 248))
175        .expect("render_to_view");
176    write_png(hal, &target, ancho, path);
177    eprintln!("layout_builder_demo: escrito {path} ({ancho}x{H}) — slot panel {:.0}px", cons[0].max_width);
178}
179
180fn main() {
181    let base = std::env::args().nth(1).unwrap_or_else(|| "lb".to_string());
182    let hal = pollster::block_on(Hal::new(None)).expect("hal");
183    let mut renderer = Renderer::new(&hal).expect("renderer");
184    let mut ts = Typesetter::new();
185    // Angosto: viewport 460 → slot ~268px (<360) → 1 columna.
186    render_a(460, &mut ts, &hal, &mut renderer, &format!("{base}-angosto.png"));
187    // Ancho: viewport 760 → slot ~568px (≥360) → 2 columnas.
188    render_a(760, &mut ts, &hal, &mut renderer, &format!("{base}-ancho.png"));
189}
190
191fn write_png(hal: &Hal, target: &wgpu::Texture, w: u32, path: &str) {
192    let unpadded = (w * 4) as usize;
193    let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize;
194    let padded = unpadded.div_ceil(align) * align;
195    let buf = hal.device.create_buffer(&wgpu::BufferDescriptor {
196        label: Some("readback"),
197        size: (padded * H as usize) as u64,
198        usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
199        mapped_at_creation: false,
200    });
201    let mut enc = hal
202        .device
203        .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
204    enc.copy_texture_to_buffer(
205        wgpu::TexelCopyTextureInfo {
206            texture: target,
207            mip_level: 0,
208            origin: wgpu::Origin3d::ZERO,
209            aspect: wgpu::TextureAspect::All,
210        },
211        wgpu::TexelCopyBufferInfo {
212            buffer: &buf,
213            layout: wgpu::TexelCopyBufferLayout {
214                offset: 0,
215                bytes_per_row: Some(padded as u32),
216                rows_per_image: Some(H),
217            },
218        },
219        wgpu::Extent3d { width: w, height: H, depth_or_array_layers: 1 },
220    );
221    hal.queue.submit(std::iter::once(enc.finish()));
222    let slice = buf.slice(..);
223    let (tx, rx) = std::sync::mpsc::channel();
224    slice.map_async(wgpu::MapMode::Read, move |r| {
225        let _ = tx.send(r);
226    });
227    let _ = hal.device.poll(wgpu::PollType::wait_indefinitely());
228    rx.recv().unwrap().unwrap();
229    let data = slice.get_mapped_range();
230    let mut pixels = Vec::with_capacity((w * H * 4) as usize);
231    for row in 0..H as usize {
232        let s = row * padded;
233        pixels.extend_from_slice(&data[s..s + unpadded]);
234    }
235    drop(data);
236    buf.unmap();
237    let file = File::create(path).expect("png");
238    let mut enc = png::Encoder::new(BufWriter::new(file), w, H);
239    enc.set_color(png::ColorType::Rgba);
240    enc.set_depth(png::BitDepth::Eight);
241    let mut wr = enc.write_header().unwrap();
242    wr.write_image_data(&pixels).unwrap();
243}