feat: type-safe API with FontHandle, DrawContext, enums and default trait methods

Author: franzos

TODO.md

@@ -0,0 +1,59 @@
+# Vello GPU Rendering Backend
+
+## Cargo.toml
+- [ ] Add `vello` feature flag: `vello = ["dep:vello", "dep:parley", "dep:image"]`
+- [ ] Add `vello = { version = "0.7", optional = true }`
+- [ ] Add `parley = { version = "0.7", optional = true }`
+- [ ] Add dev-deps: `pollster = "0.4"`, `winit = "0.30"`, `wgpu = "27"`
+- [ ] Add `[[example]] name = "render_vello"` with `required-features = ["vello"]`
+
+## lib.rs
+- [ ] Add `#[cfg(feature = "vello")] pub mod vello_backend;`
+
+## vello_backend.rs — Struct + Constructors
+- [ ] `VelloContainer` struct (scene, font_ctx, layout_ctx, fonts, clip_stack, images, viewport, etc.)
+- [ ] `new(width, height)` / `new_with_scale(width, height, scale)`
+- [ ] `scene(&self)` / `into_scene(self)` / `clear(&mut self)`
+- [ ] `resize(&mut self, width, height)`
+- [ ] `load_image_data(&mut self, url, data)` — decode + store as `peniko::Image`
+- [ ] `scale_factor(&self)` getter
+
+## vello_backend.rs — Font Management
+- [ ] `FontData` internal struct (family, size, weight, style, metrics)
+- [ ] `create_font` — store metadata, measure metrics via parley Layout
+- [ ] `delete_font` — remove from HashMap
+- [ ] `text_width` — build parley Layout, return `layout.width()`
+
+## vello_backend.rs — Text Drawing
+- [ ] `draw_text` — build parley Layout, iterate glyph runs, `scene.draw_glyphs()`
+
+## vello_backend.rs — Fill / Gradient / Image
+- [ ] `draw_solid_fill` — `scene.fill()` with solid brush on rounded rect
+- [ ] `draw_linear_gradient` — `Gradient::new_linear().with_stops()` → `scene.fill()`
+- [ ] `draw_radial_gradient` — `Gradient::new_radial().with_stops()` → `scene.fill()`
+- [ ] `draw_conic_gradient` — `Gradient::new_sweep().with_stops()` → `scene.fill()`
+- [ ] `draw_image` — `scene.draw_image()` with transform
+
+## vello_backend.rs — Borders + Clipping
+- [ ] `draw_borders` — build `kurbo::BezPath` per side, `scene.stroke()` with dash patterns
+- [ ] `draw_list_marker` — disc/circle/square fills, numbered via `draw_text`
+- [ ] `set_clip` — `scene.push_layer(Mix::Clip, ...)` or `push_clip_layer`
+- [ ] `del_clip` — `scene.pop_layer()`
+
+## vello_backend.rs — Remaining Trait Methods
+- [ ] `set_caption` / `set_base_url` / `on_anchor_click` / `set_cursor`
+- [ ] `get_viewport` — return stored viewport
+- [ ] `get_media_features` — return features with scale-adjusted resolution
+- [ ] `transform_text` — uppercase/lowercase/capitalize
+- [ ] `load_image` / `get_image_size`
+
+## vello_backend.rs — Headless Helper
+- [ ] `render_to_rgba(html, width, height)` — wgpu headless → RGBA buffer
+- [ ] `render_to_rgba_scaled(html, width, height, scale)` — same with scale factor
+
+## Example
+- [ ] `render_vello.rs` — winit window, wgpu surface, `vello::Renderer::render_to_surface()`
+
+## Verification
+- [ ] `cargo check --features vello` compiles
+- [ ] Example renders sample HTML in a window

litehtml/examples/browse.rs

@@ -15,8 +15,8 @@ use litehtml::pixbuf::PixbufContainer;
 use litehtml::selection::Selection;
 use litehtml::{
     BackgroundLayer, BorderRadiuses, Borders, Color, ConicGradient, DocumentContainer,
-    FontDescription, FontMetrics, LinearGradient, ListMarker, MediaFeatures, Position,
-    RadialGradient, Size, TextTransform,
+    DrawContext, FontDescription, FontHandle, FontMetrics, LinearGradient, ListMarker,
+    MediaFeatures, Position, RadialGradient, Size, TextTransform,
 };
 
 const USER_AGENT: &str = "Mozilla/5.0 (X11; Linux x86_64; rv:122.0) Gecko/20100101 Firefox/122.0";
@@ -83,19 +83,19 @@ impl BrowseContainer {
 
 // Delegate everything to inner, override import_css, set_base_url, load_image
 impl DocumentContainer for BrowseContainer {
-    fn create_font(&mut self, descr: &FontDescription) -> (usize, FontMetrics) {
+    fn create_font(&mut self, descr: &FontDescription) -> (FontHandle, FontMetrics) {
         self.inner.create_font(descr)
     }
-    fn delete_font(&mut self, font: usize) {
+    fn delete_font(&mut self, font: FontHandle) {
         self.inner.delete_font(font);
     }
-    fn text_width(&self, text: &str, font: usize) -> f32 {
+    fn text_width(&self, text: &str, font: FontHandle) -> f32 {
         self.inner.text_width(text, font)
     }
-    fn draw_text(&mut self, hdc: usize, text: &str, font: usize, color: Color, pos: Position) {
+    fn draw_text(&mut self, hdc: DrawContext, text: &str, font: FontHandle, color: Color, pos: Position) {
         self.inner.draw_text(hdc, text, font, color, pos);
     }
-    fn draw_list_marker(&mut self, hdc: usize, marker: &ListMarker) {
+    fn draw_list_marker(&mut self, hdc: DrawContext, marker: &ListMarker) {
         self.inner.draw_list_marker(hdc, marker);
     }
     fn load_image(&mut self, src: &str, baseurl: &str, redraw_on_ready: bool) {
@@ -110,42 +110,39 @@ impl DocumentContainer for BrowseContainer {
     fn get_image_size(&self, src: &str, baseurl: &str) -> Size {
         self.inner.get_image_size(src, baseurl)
     }
-    fn draw_image(&mut self, hdc: usize, layer: &BackgroundLayer, url: &str, base_url: &str) {
+    fn draw_image(&mut self, hdc: DrawContext, layer: &BackgroundLayer, url: &str, base_url: &str) {
         self.inner.draw_image(hdc, layer, url, base_url);
     }
-    fn draw_solid_fill(&mut self, hdc: usize, layer: &BackgroundLayer, color: Color) {
+    fn draw_solid_fill(&mut self, hdc: DrawContext, layer: &BackgroundLayer, color: Color) {
         self.inner.draw_solid_fill(hdc, layer, color);
     }
     fn draw_linear_gradient(
         &mut self,
-        hdc: usize,
+        hdc: DrawContext,
         layer: &BackgroundLayer,
         gradient: &LinearGradient,
     ) {
         self.inner.draw_linear_gradient(hdc, layer, gradient);
     }
     fn draw_radial_gradient(
         &mut self,
-        hdc: usize,
+        hdc: DrawContext,
         layer: &BackgroundLayer,
         gradient: &RadialGradient,
     ) {
         self.inner.draw_radial_gradient(hdc, layer, gradient);
     }
     fn draw_conic_gradient(
         &mut self,
-        hdc: usize,
+        hdc: DrawContext,
         layer: &BackgroundLayer,
         gradient: &ConicGradient,
     ) {
         self.inner.draw_conic_gradient(hdc, layer, gradient);
     }
-    fn draw_borders(&mut self, hdc: usize, borders: &Borders, draw_pos: Position, root: bool) {
+    fn draw_borders(&mut self, hdc: DrawContext, borders: &Borders, draw_pos: Position, root: bool) {
         self.inner.draw_borders(hdc, borders, draw_pos, root);
     }
-    fn set_caption(&mut self, caption: &str) {
-        self.inner.set_caption(caption);
-    }
     fn set_base_url(&mut self, base_url: &str) {
         if let Ok(u) = Url::parse(base_url) {
             self.base_url = u;
@@ -154,12 +151,6 @@ impl DocumentContainer for BrowseContainer {
         }
         self.inner.set_base_url(base_url);
     }
-    fn on_anchor_click(&mut self, url: &str) {
-        self.inner.on_anchor_click(url);
-    }
-    fn set_cursor(&mut self, cursor: &str) {
-        self.inner.set_cursor(cursor);
-    }
     fn transform_text(&self, text: &str, tt: TextTransform) -> String {
         self.inner.transform_text(text, tt)
     }
@@ -397,7 +388,7 @@ fn main() {
     if let Ok(mut doc) = litehtml::Document::from_html(&html, &mut container, None, None) {
         let _ = doc.render(width as f32);
         doc.draw(
-            0,
+            DrawContext::default(),
             0.0,
             0.0,
             Some(Position {

litehtml/examples/render.rs

@@ -8,7 +8,7 @@ use std::{env, fs, process};
 
 use litehtml::pixbuf::PixbufContainer;
 use litehtml::selection::Selection;
-use litehtml::{Document, Position};
+use litehtml::{Document, DrawContext, Position};
 
 /// Minimum drag distance (px) before selection starts.
 const DRAG_THRESHOLD: f32 = 4.0;
@@ -64,7 +64,7 @@ fn main() {
     if let Ok(mut doc) = Document::from_html(&html, &mut container, None, None) {
         let _ = doc.render(width as f32);
         doc.draw(
-            0,
+            DrawContext::default(),
             0.0,
             0.0,
             Some(Position {