Sergio
ccab39f140
Re-sincroniza las fuentes desde el monorepo (estaba en vello 0.5/wgpu 24 y con la estructura vieja de eventloop) y suma el 3D: - bump del workspace a vello 0.7 / wgpu 27 / parley 0.6, + accesskit 0.24 / accesskit_winit 0.33 / vello_hybrid 0.0.9. - nuevos crates: llimphi-3d (voxels ray-march + mallas en un depth compartido, montable dentro de un View 2D vía set_viewport+scissor) y llimphi-voxel (world-gen, personajes, director de escenas) + shared/foreign-vox (puente .vox). - README: sección "Not just 2D — a 3D voxel engine" + GIF (docs/llimphi_voxel.gif). - excluido modules/allichay (arrastra deps fuera del alcance del front-door). - cargo check --workspace: verde. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
698 lines
31 KiB
Rust
698 lines
31 KiB
Rust
//! Pantallazo headless del motor — **una UI real y densa** compuesta sólo con
|
|
//! primitivas del compositor (View → layout → vello → wgpu → PNG), pensada
|
|
//! para la tarjeta pública "Un motor gráfico soberano".
|
|
//!
|
|
//! Muestra en una sola pasada: tema oscuro de `llimphi-theme`, top bar con
|
|
//! tabs, sidebar con filas seleccionadas, un editor de código con resaltado
|
|
//! sintáctico vía `TextSpan`s sobre fuente mono, un párrafo de texto rico
|
|
//! (pesos, cursiva, subrayado, mono inline), tarjetas de métricas con
|
|
//! gradientes y sombras, un mini gráfico de barras hecho con puros rects,
|
|
//! chips/botones, y un toast flotante con esquinas asimétricas.
|
|
//!
|
|
//! `cargo run -p llimphi-compositor --example pantallazo_motor --release -- [out.png]`
|
|
|
|
use std::fs::File;
|
|
use std::io::BufWriter;
|
|
|
|
use llimphi_compositor::{measure_text_node, mount, paint, Shadow, View};
|
|
use llimphi_hal::{wgpu, Hal};
|
|
use llimphi_layout::taffy;
|
|
use llimphi_layout::taffy::prelude::{auto, length, percent, FlexDirection, Size, Style};
|
|
use llimphi_layout::taffy::{AlignItems, JustifyContent, Position, Rect};
|
|
use llimphi_layout::LayoutTree;
|
|
use llimphi_raster::peniko::{Color, Gradient};
|
|
use llimphi_raster::{vello, Renderer};
|
|
use llimphi_text::{Alignment, TextSpan, TextSpanStyle, Typesetter};
|
|
use vello::kurbo::Point;
|
|
|
|
const W: u32 = 1280;
|
|
const H: u32 = 800;
|
|
const FMT: wgpu::TextureFormat = wgpu::TextureFormat::Rgba8Unorm;
|
|
|
|
fn rgb(r: u8, g: u8, b: u8) -> Color {
|
|
Color::from_rgba8(r, g, b, 255)
|
|
}
|
|
|
|
fn rgba(r: u8, g: u8, b: u8, a: u8) -> Color {
|
|
Color::from_rgba8(r, g, b, a)
|
|
}
|
|
|
|
/// Caja vacía con tamaño fijo — separadores, swatches, barras.
|
|
fn rect(w: f32, h: f32) -> View<()> {
|
|
View::<()>::new(Style { size: Size { width: length(w), height: length(h) }, ..Default::default() })
|
|
}
|
|
|
|
/// Nodo de texto de una línea con alto fijo (mismo patrón que los demos vecinos).
|
|
fn txt(w: taffy::Dimension, h: f32, s: &str, size: f32, c: Color) -> View<()> {
|
|
View::<()>::new(Style { size: Size { width: w, height: length(h) }, ..Default::default() })
|
|
.text_aligned(s.to_string(), size, c, Alignment::Start)
|
|
}
|
|
|
|
/// Spans sintácticos: pinta TODAS las ocurrencias de cada `needle` con su estilo.
|
|
fn spans_all(text: &str, reglas: &[(&str, TextSpanStyle)]) -> Vec<TextSpan> {
|
|
let mut out = Vec::new();
|
|
for (needle, style) in reglas {
|
|
for (i, _) in text.match_indices(needle) {
|
|
out.push(TextSpan::new(i, i + needle.len(), style.clone()));
|
|
}
|
|
}
|
|
out
|
|
}
|
|
|
|
fn color_span(c: Color) -> TextSpanStyle {
|
|
TextSpanStyle { color: Some(c), ..Default::default() }
|
|
}
|
|
|
|
fn main() {
|
|
let out = std::env::args().nth(1).unwrap_or_else(|| "pantallazo_motor.png".to_string());
|
|
// Default dark (el look histórico de esta tarjeta); `LLIMPHI_THEME=<nombre>`
|
|
// fuerza otro preset por nombre canónico (p. ej. `Tawa`) para evidenciar la
|
|
// paleta firma sin alterar el default del pipeline público.
|
|
let theme = std::env::var("LLIMPHI_THEME")
|
|
.ok()
|
|
.and_then(|n| llimphi_theme::Theme::by_name(&n))
|
|
.unwrap_or_else(llimphi_theme::Theme::dark);
|
|
|
|
// Paleta de sintaxis (sobre el panel oscuro del theme).
|
|
let kw = rgb(198, 120, 221); // keywords — violeta
|
|
let ty = rgb(229, 192, 123); // tipos — ámbar
|
|
let fnc = rgb(97, 175, 239); // funciones — azul
|
|
let strv = rgb(152, 195, 121); // strings — verde
|
|
let cmt = rgb(92, 104, 124); // comentarios — gris azulado
|
|
let lit = rgb(209, 154, 102); // literales numéricos — naranja
|
|
let code_fg = rgb(171, 178, 191);
|
|
|
|
// ───────────────────────────── top bar ─────────────────────────────
|
|
let tab = |name: &str, activo: bool| {
|
|
let base = View::<()>::new(Style {
|
|
size: Size { width: auto(), height: length(30.0) },
|
|
align_items: Some(AlignItems::Center),
|
|
padding: Rect { left: length(14.0), right: length(14.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.radius(8.0);
|
|
let fg = if activo { theme.fg_text } else { theme.fg_muted };
|
|
let v = if activo { base.fill(theme.bg_selected) } else { base };
|
|
v.children(vec![txt(auto(), 18.0, name, 13.0, fg)])
|
|
};
|
|
let brand_dot = rect(10.0, 10.0)
|
|
.radius(5.0)
|
|
.fill_gradient(
|
|
Gradient::new_linear(Point::new(0.0, 0.0), Point::new(1.0, 1.0))
|
|
.with_stops([theme.accent, rgb(80, 200, 200)].as_slice()),
|
|
);
|
|
let buscador = View::<()>::new(Style {
|
|
size: Size { width: length(230.0), height: length(28.0) },
|
|
align_items: Some(AlignItems::Center),
|
|
padding: Rect { left: length(12.0), right: length(12.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_input)
|
|
.radius(14.0)
|
|
.border(1.0, theme.border)
|
|
.children(vec![txt(auto(), 16.0, "buscar en el haz… ⌘K", 12.0, theme.fg_placeholder)]);
|
|
let topbar = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(46.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
gap: Size { width: length(10.0), height: length(0.0) },
|
|
padding: Rect { left: length(16.0), right: length(16.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel_alt)
|
|
.border(1.0, theme.border)
|
|
.children(vec![
|
|
brand_dot,
|
|
txt(auto(), 18.0, "llimphi", 15.0, theme.fg_text).bold(),
|
|
rect(14.0, 1.0),
|
|
tab("pluma", true),
|
|
tab("khipu", false),
|
|
tab("cosmos", false),
|
|
tab("shuma", false),
|
|
// empuja el buscador a la derecha
|
|
View::<()>::new(Style { flex_grow: 1.0, ..Default::default() }),
|
|
buscador,
|
|
]);
|
|
|
|
// ───────────────────────────── sidebar ─────────────────────────────
|
|
let fila = |nombre: &str, badge: Option<&str>, sel: bool, dot: Color| {
|
|
let base = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(30.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
justify_content: Some(JustifyContent::SpaceBetween),
|
|
padding: Rect { left: length(10.0), right: length(10.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.radius(7.0);
|
|
let v = if sel { base.fill(theme.bg_selected) } else { base };
|
|
let izq = View::<()>::new(Style {
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
gap: Size { width: length(8.0), height: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![
|
|
rect(8.0, 8.0).radius(2.5).fill(dot),
|
|
txt(length(135.0), 17.0, nombre, 13.0, if sel { theme.fg_text } else { theme.fg_muted }),
|
|
]);
|
|
let mut hijos = vec![izq];
|
|
if let Some(b) = badge {
|
|
hijos.push(
|
|
View::<()>::new(Style {
|
|
size: Size { width: auto(), height: length(17.0) },
|
|
align_items: Some(AlignItems::Center),
|
|
padding: Rect { left: length(7.0), right: length(7.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_button)
|
|
.radius(8.5)
|
|
.children(vec![txt(auto(), 13.0, b, 10.5, theme.fg_muted)]),
|
|
);
|
|
}
|
|
v.children(hijos)
|
|
};
|
|
let seccion = |t: &str| txt(percent(1.0), 16.0, t, 11.0, theme.fg_placeholder).bold();
|
|
let sidebar = View::<()>::new(Style {
|
|
size: Size { width: length(236.0), height: percent(1.0) },
|
|
flex_shrink: 0.0,
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(4.0) },
|
|
padding: Rect { left: length(12.0), right: length(12.0), top: length(14.0), bottom: length(14.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel)
|
|
.border(1.0, theme.border)
|
|
.children(vec![
|
|
seccion("HAZ DE CUERPOS"),
|
|
fila("ensayo · español", None, true, theme.accent),
|
|
fila("ensayo · english", Some("stale"), false, rgb(209, 154, 102)),
|
|
fila("ensayo · runasimi", None, false, rgb(80, 200, 200)),
|
|
fila("resumen ejecutivo", None, false, rgb(152, 195, 121)),
|
|
rect(1.0, 10.0),
|
|
seccion("MÓDULOS"),
|
|
fila("nodegraph.rs", Some("12"), false, fnc),
|
|
fila("text_editor.rs", Some("3"), false, fnc),
|
|
fila("typesetter.rs", None, false, fnc),
|
|
fila("raster/scene.rs", None, false, fnc),
|
|
rect(1.0, 10.0),
|
|
seccion("DAEMONS"),
|
|
fila("verbo · e5-small", Some("384d"), false, rgb(152, 195, 121)),
|
|
fila("chasqui · DHT", Some("9"), false, rgb(152, 195, 121)),
|
|
]);
|
|
|
|
// ─────────────────────── editor de código (centro) ───────────────────────
|
|
// (líneas unidas a mano — la continuación `\` de Rust se comería la indentación)
|
|
let codigo = [
|
|
"// bucle Elm del motor: input → update → view → layout → raster",
|
|
"pub fn frame(&mut self, msg: Msg) -> Scene {",
|
|
" self.app.update(msg);",
|
|
" let view = self.app.view();",
|
|
" let tree = mount(&mut self.layout, view);",
|
|
" let computed = self.layout.compute(tree.root, self.size);",
|
|
" let mut scene = Scene::new();",
|
|
" paint(&mut scene, &tree, &computed, &mut self.ts);",
|
|
" scene // vello la rasteriza en GPU vía wgpu",
|
|
"}",
|
|
"",
|
|
"let sombra = Shadow::soft(90, 24.0).offset(0.0, 12.0);",
|
|
"let card = View::new(estilo)",
|
|
" .fill_gradient(grad) // gradiente en [0,1]²",
|
|
" .radius_corners(18.0, 18.0, 4.0, 4.0)",
|
|
" .shadow(sombra);",
|
|
]
|
|
.join("\n");
|
|
let codigo = codigo.as_str();
|
|
let reglas = [
|
|
("// bucle Elm del motor: input → update → view → layout → raster", TextSpanStyle { color: Some(cmt), italic: Some(true), ..Default::default() }),
|
|
("// vello la rasteriza en GPU vía wgpu", TextSpanStyle { color: Some(cmt), italic: Some(true), ..Default::default() }),
|
|
("// gradiente en [0,1]²", TextSpanStyle { color: Some(cmt), italic: Some(true), ..Default::default() }),
|
|
("pub fn ", color_span(kw)),
|
|
("let ", color_span(kw)),
|
|
("&mut ", color_span(kw)),
|
|
("self", color_span(rgb(224, 108, 117))),
|
|
("Msg", color_span(ty)),
|
|
("Scene", color_span(ty)),
|
|
("Shadow", color_span(ty)),
|
|
("View", color_span(ty)),
|
|
("frame", TextSpanStyle { color: Some(fnc), weight: Some(700.0), ..Default::default() }),
|
|
("update", color_span(fnc)),
|
|
("view()", color_span(fnc)),
|
|
("mount", color_span(fnc)),
|
|
("compute", color_span(fnc)),
|
|
("new", color_span(fnc)),
|
|
("paint", color_span(fnc)),
|
|
("soft", color_span(fnc)),
|
|
("offset", color_span(fnc)),
|
|
("fill_gradient", color_span(fnc)),
|
|
("radius_corners", color_span(fnc)),
|
|
("shadow(", color_span(fnc)),
|
|
("90, 24.0", color_span(lit)),
|
|
("0.0, 12.0", color_span(lit)),
|
|
("18.0, 18.0, 4.0, 4.0", color_span(lit)),
|
|
];
|
|
let code_spans = spans_all(codigo, ®las);
|
|
let code_text = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(360.0) },
|
|
..Default::default()
|
|
})
|
|
.text_spans(codigo, 13.5, code_fg, code_spans, Alignment::Start)
|
|
.mono()
|
|
.line_height(1.55);
|
|
// header del editor: tres puntos + nombre de archivo + chip de lenguaje
|
|
let punto = |c: Color| rect(11.0, 11.0).radius(5.5).fill(c);
|
|
let editor_header = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(36.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
gap: Size { width: length(8.0), height: length(0.0) },
|
|
padding: Rect { left: length(14.0), right: length(14.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel_alt)
|
|
.radius_corners(12.0, 12.0, 0.0, 0.0)
|
|
.children(vec![
|
|
punto(rgb(224, 108, 117)),
|
|
punto(rgb(229, 192, 123)),
|
|
punto(rgb(152, 195, 121)),
|
|
rect(6.0, 1.0),
|
|
txt(auto(), 17.0, "eventloop.rs", 13.0, theme.fg_text).mono(),
|
|
txt(length(96.0), 16.0, "— llimphi-ui", 12.0, theme.fg_placeholder),
|
|
View::<()>::new(Style { flex_grow: 1.0, ..Default::default() }),
|
|
txt(auto(), 16.0, "rust", 11.0, theme.accent).mono(),
|
|
]);
|
|
let editor = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: auto() },
|
|
flex_grow: 1.0,
|
|
flex_direction: FlexDirection::Column,
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel)
|
|
.radius(12.0)
|
|
.border(1.0, theme.border)
|
|
.shadow(Shadow::soft(110, 26.0).offset(0.0, 12.0))
|
|
.children(vec![
|
|
editor_header,
|
|
View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: auto() },
|
|
flex_grow: 1.0,
|
|
padding: Rect { left: length(16.0), right: length(16.0), top: length(12.0), bottom: length(8.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![code_text]),
|
|
]);
|
|
|
|
// ─────────────────── párrafo rico (debajo del editor) ───────────────────
|
|
let parrafo = "Un solo nodo de texto, varios lentes por rango de bytes: \
|
|
NEGRITA para el énfasis, cursiva para la voz, un enlace.qu subrayado, \
|
|
texto tachado para lo descartado, y Typesetter en mono inline — todo \
|
|
medido y pintado por el mismo layout_spans, sin HTML ni DOM.";
|
|
let find = |n: &str| {
|
|
let i = parrafo.find(n).expect("needle");
|
|
(i, i + n.len())
|
|
};
|
|
let (b0, b1) = find("NEGRITA");
|
|
let (i0, i1) = find("cursiva");
|
|
let (l0, l1) = find("enlace.qu");
|
|
let (t0, t1) = find("tachado");
|
|
let (m0, m1) = find("Typesetter");
|
|
let rich_spans = vec![
|
|
TextSpan::new(b0, b1, TextSpanStyle { weight: Some(700.0), color: Some(theme.fg_text), ..Default::default() }),
|
|
TextSpan::new(i0, i1, TextSpanStyle { italic: Some(true), color: Some(theme.fg_text), ..Default::default() }),
|
|
TextSpan::new(l0, l1, TextSpanStyle { color: Some(theme.accent), underline: Some(true), ..Default::default() }),
|
|
TextSpan::new(t0, t1, TextSpanStyle { color: Some(theme.fg_destructive), strikethrough: Some(true), ..Default::default() }),
|
|
TextSpan::new(m0, m1, TextSpanStyle { font_family: Some(llimphi_text::MONOSPACE.to_string()), color: Some(rgb(80, 200, 200)), ..Default::default() }),
|
|
];
|
|
let rich_card = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(150.0) },
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(8.0) },
|
|
padding: Rect { left: length(18.0), right: length(18.0), top: length(14.0), bottom: length(14.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel)
|
|
.radius(12.0)
|
|
.border(1.0, theme.border)
|
|
.children(vec![
|
|
txt(percent(1.0), 20.0, "Texto rico — spans nativos", 14.5, theme.fg_text).bold(),
|
|
View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(78.0) },
|
|
..Default::default()
|
|
})
|
|
.text_spans(parrafo, 13.5, theme.fg_muted, rich_spans, Alignment::Start)
|
|
.line_height(1.45),
|
|
]);
|
|
|
|
let centro = View::<()>::new(Style {
|
|
size: Size { width: auto(), height: percent(1.0) },
|
|
flex_grow: 1.0,
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(14.0) },
|
|
padding: Rect { left: length(14.0), right: length(14.0), top: length(14.0), bottom: length(14.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![editor, rich_card]);
|
|
|
|
// ───────────────────────── columna derecha ─────────────────────────
|
|
// 1) Tarjeta de métricas con gradiente + sombra (el look "hero card").
|
|
let grad_hero = Gradient::new_linear(Point::new(0.0, 0.0), Point::new(1.0, 1.0))
|
|
.with_stops([rgb(64, 92, 180), rgb(34, 46, 96)].as_slice());
|
|
let metrica = |valor: &str, label: &str| {
|
|
View::<()>::new(Style {
|
|
size: Size { width: length(80.0), height: auto() },
|
|
flex_shrink: 0.0,
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(2.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![
|
|
txt(length(80.0), 26.0, valor, 21.0, rgb(240, 244, 252)).bold(),
|
|
txt(length(80.0), 15.0, label, 11.0, rgba(214, 222, 240, 190)),
|
|
])
|
|
};
|
|
let hero = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(120.0) },
|
|
flex_direction: FlexDirection::Column,
|
|
justify_content: Some(JustifyContent::Center),
|
|
gap: Size { width: length(0.0), height: length(10.0) },
|
|
padding: Rect { left: length(18.0), right: length(18.0), top: length(12.0), bottom: length(12.0) },
|
|
..Default::default()
|
|
})
|
|
.fill_gradient(grad_hero)
|
|
.radius(14.0)
|
|
.border(1.0, rgba(150, 175, 240, 120))
|
|
.shadow(Shadow::soft(120, 28.0).offset(0.0, 14.0))
|
|
.children(vec![
|
|
txt(percent(1.0), 16.0, "RENDER · ÚLTIMO FRAME", 11.0, rgba(214, 222, 240, 200)).bold(),
|
|
View::<()>::new(Style {
|
|
flex_direction: FlexDirection::Row,
|
|
gap: Size { width: length(16.0), height: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![metrica("1.8 ms", "scene → GPU"), metrica("2 411", "nodos"), metrica("60 fps", "vsync")]),
|
|
]);
|
|
|
|
// 2) Mini gráfico de barras: puros rects con gradiente, alineados al piso.
|
|
let alturas = [34.0_f32, 52.0, 41.0, 66.0, 58.0, 78.0, 49.0, 88.0, 71.0, 60.0, 94.0, 80.0];
|
|
let barras: Vec<View<()>> = alturas
|
|
.iter()
|
|
.enumerate()
|
|
.map(|(i, &h)| {
|
|
let g = if i == 10 {
|
|
Gradient::new_linear(Point::new(0.0, 0.0), Point::new(0.0, 1.0))
|
|
.with_stops([rgb(120, 220, 200), rgb(60, 150, 140)].as_slice())
|
|
} else {
|
|
Gradient::new_linear(Point::new(0.0, 0.0), Point::new(0.0, 1.0))
|
|
.with_stops([rgb(110, 140, 220), rgb(58, 78, 128)].as_slice())
|
|
};
|
|
rect(15.0, h).radius_corners(4.0, 4.0, 0.0, 0.0).fill_gradient(g)
|
|
})
|
|
.collect();
|
|
let chart = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(168.0) },
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(10.0) },
|
|
padding: Rect { left: length(18.0), right: length(18.0), top: length(14.0), bottom: length(14.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel)
|
|
.radius(12.0)
|
|
.border(1.0, theme.border)
|
|
.children(vec![
|
|
View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(18.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
justify_content: Some(JustifyContent::SpaceBetween),
|
|
..Default::default()
|
|
})
|
|
.children(vec![
|
|
txt(length(200.0), 18.0, "Throughput del raster", 13.0, theme.fg_text).bold(),
|
|
View::<()>::new(Style {
|
|
size: Size { width: length(70.0), height: length(16.0) },
|
|
..Default::default()
|
|
})
|
|
.text_aligned("12 frames".to_string(), 11.0, theme.fg_placeholder, Alignment::End),
|
|
]),
|
|
View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(94.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::FlexEnd),
|
|
justify_content: Some(JustifyContent::SpaceBetween),
|
|
..Default::default()
|
|
})
|
|
.children(barras),
|
|
]);
|
|
|
|
// 3) Botones / chips — el acento del theme en acción.
|
|
let boton = |label: &str, primario: bool| {
|
|
let base = View::<()>::new(Style {
|
|
size: Size { width: auto(), height: length(34.0) },
|
|
align_items: Some(AlignItems::Center),
|
|
justify_content: Some(JustifyContent::Center),
|
|
padding: Rect { left: length(18.0), right: length(18.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.radius(17.0);
|
|
if primario {
|
|
base.fill_gradient(
|
|
Gradient::new_linear(Point::new(0.0, 0.0), Point::new(0.0, 1.0))
|
|
.with_stops([rgb(124, 154, 232), rgb(92, 120, 198)].as_slice()),
|
|
)
|
|
.shadow(Shadow::soft(90, 16.0).offset(0.0, 6.0))
|
|
.children(vec![txt(auto(), 18.0, label, 13.0, rgb(244, 247, 255)).bold()])
|
|
} else {
|
|
base.fill(theme.bg_button)
|
|
.border(1.0, theme.border)
|
|
.children(vec![txt(auto(), 18.0, label, 13.0, theme.fg_text)])
|
|
}
|
|
};
|
|
let acciones = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(34.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
gap: Size { width: length(10.0), height: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![boton("Regenerar", true), boton("Difundir", false), boton("Alinear", false)]);
|
|
|
|
// 4) Tarjeta de hebras (estado del haz multilienzo) — filas con dot de estado.
|
|
let hebra = |de: &str, a: &str, estado: &str, c: Color| {
|
|
View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(26.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
justify_content: Some(JustifyContent::SpaceBetween),
|
|
..Default::default()
|
|
})
|
|
.children(vec![
|
|
View::<()>::new(Style {
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
gap: Size { width: length(8.0), height: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![
|
|
rect(7.0, 7.0).radius(3.5).fill(c),
|
|
txt(length(170.0), 16.0, &format!("{de} → {a}"), 12.0, theme.fg_text),
|
|
]),
|
|
View::<()>::new(Style {
|
|
size: Size { width: length(80.0), height: length(15.0) },
|
|
..Default::default()
|
|
})
|
|
.text_aligned(estado.to_string(), 11.0, c, Alignment::End),
|
|
])
|
|
};
|
|
let hebras = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(148.0) },
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(6.0) },
|
|
padding: Rect { left: length(18.0), right: length(18.0), top: length(14.0), bottom: length(14.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel)
|
|
.radius(12.0)
|
|
.border(1.0, theme.border)
|
|
.children(vec![
|
|
txt(percent(1.0), 18.0, "Hebras del haz", 13.0, theme.fg_text).bold(),
|
|
hebra("español", "english", "stale", rgb(229, 192, 123)),
|
|
hebra("español", "runasimi", "al día", rgb(152, 195, 121)),
|
|
hebra("español", "resumen", "al día", rgb(152, 195, 121)),
|
|
hebra("english", "tono formal", "derivando…", theme.accent),
|
|
]);
|
|
|
|
let derecha = View::<()>::new(Style {
|
|
size: Size { width: length(330.0), height: percent(1.0) },
|
|
flex_shrink: 0.0,
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(14.0) },
|
|
padding: Rect { left: length(0.0), right: length(14.0), top: length(14.0), bottom: length(14.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![hero, chart, acciones, hebras]);
|
|
|
|
// ───────────────────────── status bar ─────────────────────────
|
|
let status_item = |w: f32, s: &str, c: Color| txt(length(w), 16.0, s, 11.5, c);
|
|
let statusbar = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: length(30.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
gap: Size { width: length(18.0), height: length(0.0) },
|
|
padding: Rect { left: length(16.0), right: length(16.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_panel_alt)
|
|
.border(1.0, theme.border)
|
|
.children(vec![
|
|
status_item(70.0, "git · main", theme.accent),
|
|
status_item(250.0, "wgpu 27 · vello 0.7 · taffy · parley", theme.fg_muted),
|
|
status_item(80.0, "BLAKE3 ok", rgb(152, 195, 121)),
|
|
View::<()>::new(Style { flex_grow: 1.0, ..Default::default() }),
|
|
status_item(45.0, "UTF-8", theme.fg_placeholder),
|
|
status_item(85.0, "Ln 7, Col 23", theme.fg_placeholder),
|
|
status_item(50.0, "100 Hz", theme.fg_placeholder),
|
|
]);
|
|
|
|
// ─────────────── toast flotante (absoluto, esquinas asimétricas) ───────────────
|
|
let toast = View::<()>::new(Style {
|
|
position: Position::Absolute,
|
|
inset: Rect { left: auto(), top: auto(), right: length(360.0), bottom: length(48.0) },
|
|
size: Size { width: length(290.0), height: length(64.0) },
|
|
flex_direction: FlexDirection::Row,
|
|
align_items: Some(AlignItems::Center),
|
|
gap: Size { width: length(12.0), height: length(0.0) },
|
|
padding: Rect { left: length(14.0), right: length(14.0), top: length(0.0), bottom: length(0.0) },
|
|
..Default::default()
|
|
})
|
|
.fill(rgb(28, 34, 48))
|
|
.radius_corners(18.0, 18.0, 18.0, 4.0)
|
|
.border(1.0, rgba(110, 140, 220, 160))
|
|
.shadow(Shadow::soft(150, 30.0).offset(0.0, 14.0))
|
|
.children(vec![
|
|
rect(34.0, 34.0)
|
|
.radius(10.0)
|
|
.fill_gradient(
|
|
Gradient::new_linear(Point::new(0.0, 0.0), Point::new(1.0, 1.0))
|
|
.with_stops([rgb(120, 220, 200), rgb(60, 140, 170)].as_slice()),
|
|
),
|
|
View::<()>::new(Style {
|
|
flex_direction: FlexDirection::Column,
|
|
gap: Size { width: length(0.0), height: length(2.0) },
|
|
..Default::default()
|
|
})
|
|
.children(vec![
|
|
txt(auto(), 17.0, "Cuerpo regenerado", 13.0, theme.fg_text).bold(),
|
|
txt(auto(), 15.0, "english · 42 átomos realineados", 11.5, theme.fg_muted),
|
|
]),
|
|
]);
|
|
|
|
// ───────────────────────── árbol raíz ─────────────────────────
|
|
let fila_central = View::<()>::new(Style {
|
|
size: Size { width: percent(1.0), height: auto() },
|
|
flex_grow: 1.0,
|
|
flex_direction: FlexDirection::Row,
|
|
..Default::default()
|
|
})
|
|
.children(vec![sidebar, centro, derecha]);
|
|
|
|
let root = View::<()>::new(Style {
|
|
size: Size { width: length(W as f32), height: length(H as f32) },
|
|
flex_direction: FlexDirection::Column,
|
|
..Default::default()
|
|
})
|
|
.fill(theme.bg_app)
|
|
.children(vec![topbar, fila_central, statusbar, toast]);
|
|
|
|
// view → layout → scene → render headless → PNG (misma secuencia que el eventloop).
|
|
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("pantallazo-motor"),
|
|
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!("pantallazo_motor: escrito {out} ({W}x{H})");
|
|
}
|
|
|
|
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);
|
|
});
|
|
let _ = 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();
|
|
}
|