//! Volcado headless de **RichText spans** (Bloque 13 de PARIDAD-FLUTTER: //! cierra Tier 2 final): un mismo nodo de texto con defaults a nivel //! bloque (tamaño 16 px, color gris oscuro, weight 400, sin italic) más //! un arreglo de `TextSpan` que sobreescriben por rango de bytes //! `weight=700` (bold), `italic=true`, `color`, `underline=true`, //! `size_px=22` (heading inline), `font_family=mono` (``-like) y //! `strikethrough=true`. Verifica que la **medida** y el **pintado** //! consumen el mismo `layout_spans` (taffy reserva el alto del span más //! alto en su línea). //! //! `cargo run -p llimphi-compositor --example rich_text_demo -- [out.png]` use std::fs::File; use std::io::BufWriter; use llimphi_compositor::{measure_text_node, mount, paint, View}; use llimphi_hal::{wgpu, Hal}; use llimphi_layout::taffy; use llimphi_layout::taffy::prelude::{length, percent, FlexDirection, Size, Style}; use llimphi_layout::taffy::{AlignItems, JustifyContent, Rect}; use llimphi_layout::LayoutTree; use llimphi_raster::peniko::Color; use llimphi_raster::{vello, Renderer}; use llimphi_text::{Alignment, TextSpan, TextSpanStyle, Typesetter, MONOSPACE}; const W: u32 = 980; const H: u32 = 380; const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm; fn rgb(r: u8, g: u8, b: u8) -> Color { Color::from_rgba8(r, g, b, 255) } /// Helper para localizar un substring exacto en `text` y devolver el /// `[start, end)` en bytes — así los spans del demo son legibles ("apply /// bold to 'NEGRITA'") sin offsets a mano. fn range_of(text: &str, needle: &str) -> (usize, usize) { let start = text.find(needle).unwrap_or_else(|| panic!("'{needle}' not found")); (start, start + needle.len()) } fn main() { let out = std::env::args().nth(1).unwrap_or_else(|| "rich_text.png".to_string()); let theme = llimphi_theme::Theme::light(); let panel = theme.bg_panel; let dark = rgb(30, 34, 44); let accent = rgb(52, 152, 219); let danger = rgb(231, 76, 60); let muted = rgb(128, 132, 144); // Párrafo con seis tipos de override + texto plano alrededor para que // se note el contraste de cada lente. let parrafo = "Esto es un párrafo que mezcla NEGRITA, cursiva, un \ link.com, un cambio de TAMAÑO inline, una palabra \ tachada y código de muestra inline."; let (b0, b1) = range_of(parrafo, "NEGRITA"); let (i0, i1) = range_of(parrafo, "cursiva"); let (l0, l1) = range_of(parrafo, "link.com"); let (sz0, sz1) = range_of(parrafo, "TAMAÑO"); let (st0, st1) = range_of(parrafo, "tachada"); let (m0, m1) = range_of(parrafo, "código de muestra"); let spans = vec![ TextSpan::new(b0, b1, TextSpanStyle { weight: Some(700.0), ..Default::default() }), TextSpan::new(i0, i1, TextSpanStyle { italic: Some(true), ..Default::default() }), TextSpan::new( l0, l1, TextSpanStyle { color: Some(accent), underline: Some(true), ..Default::default() }, ), TextSpan::new( sz0, sz1, TextSpanStyle { size_px: Some(24.0), weight: Some(700.0), color: Some(rgb(46, 204, 113)), ..Default::default() }, ), TextSpan::new( st0, st1, TextSpanStyle { color: Some(danger), strikethrough: Some(true), ..Default::default() }, ), TextSpan::new( m0, m1, TextSpanStyle { font_family: Some(MONOSPACE.to_string()), color: Some(rgb(155, 89, 182)), ..Default::default() }, ), ]; let texto_rico = View::<()>::new(Style { size: Size { width: percent(1.0_f32), height: length(160.0_f32) }, ..Default::default() }) .text_spans(parrafo, 16.0, dark, spans, Alignment::Start); // Subtítulo + descripción + el párrafo rico, todo dentro de una card // (apilada con flex_direction Column). let titulo = View::<()>::new(Style { size: Size { width: percent(1.0_f32), height: length(28.0_f32) }, ..Default::default() }) .text_aligned( "RichText spans (Bloque 13 — cierra Tier 2)", 18.0, dark, Alignment::Start, ) .bold(); let descripcion = View::<()>::new(Style { size: Size { width: percent(1.0_f32), height: length(20.0_f32) }, ..Default::default() }) .text_aligned( "Un solo nodo, seis tipos de override aplicados por rango de bytes:", 13.0, muted, Alignment::Start, ); let card = View::<()>::new(Style { size: Size { width: length(W as f32 - 80.0), height: length(H as f32 - 60.0) }, flex_direction: FlexDirection::Column, align_items: Some(AlignItems::FlexStart), justify_content: Some(JustifyContent::FlexStart), gap: Size { width: length(0.0_f32), height: length(12.0_f32) }, padding: Rect { left: length(24.0_f32), right: length(24.0_f32), top: length(20.0_f32), bottom: length(20.0_f32), }, ..Default::default() }) .fill(panel) .radius(16.0) .border(1.0, rgb(220, 224, 232)) .children(vec![titulo, descripcion, texto_rico]); let root = View::<()>::new(Style { size: Size { width: percent(1.0_f32), height: percent(1.0_f32) }, align_items: Some(AlignItems::Center), justify_content: Some(JustifyContent::Center), ..Default::default() }) .fill(theme.bg_app) .children(vec![card]); let mut layout = LayoutTree::new(); let mounted = mount(&mut layout, root); let mut ts = Typesetter::new(); let computed = { let tmap = &mounted.text_measures; layout .compute_with_measure(mounted.root, (W as f32, H as f32), |nid, known, avail| { match tmap.get(&nid) { Some(tm) => measure_text_node(&mut ts, tm, known, avail), None => taffy::Size::ZERO, } }) .expect("layout") }; let mut scene = vello::Scene::new(); paint(&mut scene, &mounted, &computed, &mut ts, None, None); let hal = pollster::block_on(Hal::new(None)).expect("hal"); let mut renderer = Renderer::new(&hal).expect("renderer"); let target = hal.device.create_texture(&wgpu::TextureDescriptor { label: Some("dump-rich-text"), size: wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 }, mip_level_count: 1, sample_count: 1, dimension: wgpu::TextureDimension::D2, format: FMT, usage: wgpu::TextureUsages::STORAGE_BINDING | wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC, view_formats: &[], }); let view = target.create_view(&wgpu::TextureViewDescriptor::default()); let [r, g, b, _] = theme.bg_app.components; let bg = Color::from_rgba8((r * 255.0) as u8, (g * 255.0) as u8, (b * 255.0) as u8, 255); renderer .render_to_view(&hal, &scene, &view, W, H, bg) .expect("render_to_view"); write_png(&hal, &target, &out); eprintln!( "rich_text_demo: escrito {out} ({W}x{H}) — un nodo de texto con \ seis spans aplicados por rango de bytes: bold, italic, link \ (color + underline), heading inline (size 24 + bold + verde), \ strikethrough rojo, y un fragmento en mono morado." ); } fn write_png(hal: &Hal, target: &wgpu::Texture, path: &str) { let unpadded = (W * 4) as usize; let align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT as usize; let padded = unpadded.div_ceil(align) * align; let buf = hal.device.create_buffer(&wgpu::BufferDescriptor { label: Some("readback"), size: (padded * H as usize) as u64, usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST, mapped_at_creation: false, }); let mut enc = hal .device .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None }); enc.copy_texture_to_buffer( wgpu::TexelCopyTextureInfo { texture: target, mip_level: 0, origin: wgpu::Origin3d::ZERO, aspect: wgpu::TextureAspect::All, }, wgpu::TexelCopyBufferInfo { buffer: &buf, layout: wgpu::TexelCopyBufferLayout { offset: 0, bytes_per_row: Some(padded as u32), rows_per_image: Some(H), }, }, wgpu::Extent3d { width: W, height: H, depth_or_array_layers: 1 }, ); hal.queue.submit(std::iter::once(enc.finish())); let slice = buf.slice(..); let (tx, rx) = std::sync::mpsc::channel(); slice.map_async(wgpu::MapMode::Read, move |r| { let _ = tx.send(r); }); hal.device.poll(wgpu::PollType::wait_indefinitely()); rx.recv().unwrap().unwrap(); let data = slice.get_mapped_range(); let mut pixels = Vec::with_capacity((W * H * 4) as usize); for row in 0..H as usize { let s = row * padded; pixels.extend_from_slice(&data[s..s + unpadded]); } drop(data); buf.unmap(); let file = File::create(path).expect("png"); let mut enc = png::Encoder::new(BufWriter::new(file), W, H); enc.set_color(png::ColorType::Rgba); enc.set_depth(png::BitDepth::Eight); let mut w = enc.write_header().unwrap(); w.write_image_data(&pixels).unwrap(); }