blockworx/canvas/

svg.rs

//! SVG export backend.
//!
//! [`SvgRenderer`] implements the [`Renderer`] trait,
//! so the exact same render path that draws the diagram on screen can be pointed
//! at it to produce a standalone `.svg`. Geometry has a single source of truth;
//! this module only translates the primitive calls into SVG nodes (built with
//! the `svg` crate). Like the on-screen [`Painter`](crate::canvas::painter::Painter)
//! it holds a [`Palette`] and resolves each [`Swatch`] to a color at draw time —
//! the canvas never sees an app-level role.
//!
//! Text layout comes from epaint — the very engine that lays the diagram out on
//! screen — driven through a standalone [`Fonts`] built from
//! the same [`FontDefinitions`](egui::FontDefinitions) the app installs. Shaping,
//! kerning and line breaking are therefore identical to the screen's, so an
//! export never drifts from what the user was looking at. Only rasterization is
//! ours: each glyph the galley places is traced to a filled `<path>` via
//! `ttf-parser`, which leaves the output free of any font dependency.
//!
//! A galley records the *character* under each glyph but not the glyph the
//! shaper chose, so ligatures and other substitutions are unrecoverable from it
//! alone; each run is therefore re-shaped here — with epaint's own shaper, over
//! the same bytes — for identity only. See [`SvgRenderer::identify`].
//!
//! Coordinates are world space and written out directly (no zoom/pan); the
//! final `<svg viewBox>` frames whatever was drawn. Layout runs at
//! `pixels_per_point = 1.0` so no display DPI is baked into a resolution-
//! independent format.

use std::cell::{Cell, RefCell};
use std::mem;
use std::sync::Arc;

use blockworx_doc::block_model::Asset;
use blockworx_geom::{Align2, Pos2, Rect, Vec2, WorldPx, vec2};
use blockworx_paint::{Color, Font};
use egui::Stroke;
use egui::epaint::text::Glyph;
use egui::text::{Fonts, Galley};
use svg::Document;
use svg::node::Node;
use svg::node::element::path::Data;
use svg::node::element::{Circle, Group, Image, Line, Path, Polygon, Polyline, Rectangle};

use blockworx_paint::{FontChoice, Palette, PaletteStroke, Renderer, Swatch, extent::Bounds};

use crate::canvas::egui_compat::{IntoEgui as _, IntoGeom as _};
/// SVG is resolution independent, so layout must not inherit a display's DPI.
const PIXELS_PER_POINT: f32 = 1.0;

pub struct SvgRenderer {
    palette: Palette,
    face: ttf_parser::Face<'static>,
    units_per_em: f32,
    /// The same bytes `face` wraps, seen through epaint's font reader — what
    /// [`Self::shape`] builds its shaper over.
    font_ref: skrifa::FontRef<'static>,
    /// The shaper's parsed layout tables. Cached per face, as epaint caches
    /// them: building a `Shaper` from them is cheap, parsing them is not.
    shaper_data: harfrust::ShaperData,
    /// Layout engine, shared with the on-screen path. Laying out needs `&mut`,
    /// hence the cell; the font atlas it fills along the way is never read.
    fonts: RefCell<Fonts>,
    /// The document under construction; draw calls `append` nodes to it.
    doc: RefCell<Document>,
    /// Running world-space bounding box of everything drawn so far.
    bounds: Bounds,
    /// One [`Identity::ByChar`] warning per export, not per run.
    warned: Cell<bool>,
}

impl SvgRenderer {
    /// `font` is the active UI font choice: its definitions lay the text out and
    /// its outlines draw it, so the export matches the on-screen typeface.
    #[expect(clippy::expect_used)]
    pub fn new(palette: Palette, font: FontChoice) -> Self {
        let bytes = font.bytes();
        let face = ttf_parser::Face::parse(bytes, 0).expect("embedded font is valid");
        let units_per_em = face.units_per_em() as f32;
        let font_ref = skrifa::FontRef::from_index(bytes, 0).expect("embedded font is valid");
        let shaper_data = harfrust::ShaperData::new(&font_ref);
        let fonts = Fonts::new(
            egui::epaint::text::TextOptions::default(),
            crate::font::build_fonts(font),
        );
        Self {
            palette,
            face,
            units_per_em,
            font_ref,
            shaper_data,
            fonts: RefCell::new(fonts),
            doc: RefCell::new(Document::new()),
            bounds: Bounds::default(),
            warned: Cell::new(false),
        }
    }

    /// Resolve a [`Swatch`] to a concrete color through the palette.
    fn color(&self, swatch: impl Into<Swatch>) -> Color {
        self.palette.resolve(swatch.into())
    }

    /// Resolve a palette-based stroke to a concrete egui `Stroke` (color resolved
    /// through the palette).
    fn resolve_stroke(&self, stroke: impl Into<PaletteStroke>) -> Stroke {
        let s = stroke.into();
        Stroke::new(s.width.get(), self.color(s.color).egui())
    }

    /// Finalize the `<svg>` root: set its `viewBox`/size to frame the content
    /// (with a small margin) and serialize it, with the viewBox rect — the
    /// exact world-space region the SVG depicts, for callers that place the
    /// output back into world coordinates (the PDF export's page fit).
    pub fn finish(self) -> (String, Rect) {
        const MARGIN: f32 = crate::grid::GRID_SIZE;
        let view = self
            .bounds
            .get()
            .map_or(Rect::from_min_size(Pos2::ZERO, vec2(1.0, 1.0)), |r| {
                r.expand(MARGIN)
            });
        let svg = self
            .doc
            .into_inner()
            .set(
                "viewBox",
                (view.min.x, view.min.y, view.width(), view.height()),
            )
            .set("width", view.width())
            .set("height", view.height())
            .to_string();
        (svg, view)
    }

    fn append(&self, node: impl Into<Box<dyn Node>>) {
        self.doc.borrow_mut().append(node);
    }

    /// Lay `text` out through epaint at [`PIXELS_PER_POINT`], word-wrapped to
    /// `max_width`.
    fn layout(&self, text: String, font: &Font, max_width: WorldPx) -> Arc<Galley> {
        self.fonts
            .borrow_mut()
            .with_pixels_per_point(PIXELS_PER_POINT)
            .layout(
                text,
                font.egui(),
                Color::PLACEHOLDER.egui(),
                max_width.get(),
            )
    }

    /// Append each glyph of `galley`, anchored at world `pos`, as a filled
    /// `<path>`. When `angle` is non-zero the run is wrapped in a `rotate(...)`
    /// group about `pos`, matching egui's rotated-text behaviour. Returns the
    /// unrotated anchored bounding rect.
    // Mirrors egui's `Painter::text(pos, anchor, text, font, color)`, extended with
    // the rotation this canvas needs. Grouping these into a struct would make
    // every call site diverge from the API it wraps.
    #[expect(clippy::too_many_arguments)]
    fn draw_galley(
        &self,
        pos: Pos2,
        anchor: Align2,
        galley: &Galley,
        font: &Font,
        color: Color,
        angle: f32,
    ) -> Rect {
        let scale = font.size / self.units_per_em;
        let rect = anchor.anchor_size(pos, galley.size().geom());

        let mut glyphs: Vec<Path> = Vec::new();
        // epaint shapes one paragraph at a time, so re-shape by paragraph too:
        // `ends_with_newline` closes one, whatever wrapping did to its rows.
        for paragraph in galley.rows.split_inclusive(|row| row.ends_with_newline) {
            let run: Vec<Placed<'_>> = paragraph
                .iter()
                .flat_map(|row| {
                    row.glyphs.iter().map(|glyph| Placed {
                        pen: rect.min + row.pos.to_vec2().geom() + glyph.pos.to_vec2().geom(),
                        glyph,
                    })
                })
                .collect();
            for (placed, gid) in run.iter().zip(self.identify(&run)) {
                let Some(gid) = gid else {
                    continue;
                };
                let mut builder = GlyphPath {
                    data: Data::new(),
                    ox: placed.pen.x,
                    baseline: placed.pen.y,
                    scale,
                };
                if self.face.outline_glyph(gid, &mut builder).is_some() && !builder.data.is_empty()
                {
                    let mut path = Path::new().set("d", builder.data);
                    apply_fill(&mut path, color);
                    glyphs.push(path);
                }
            }
        }

        if !glyphs.is_empty() {
            if angle == 0.0 {
                for path in glyphs {
                    self.append(path);
                }
            } else {
                let mut group = Group::new().set(
                    "transform",
                    format!("rotate({} {} {})", angle.to_degrees(), pos.x, pos.y),
                );
                for path in glyphs {
                    group = group.add(path);
                }
                self.append(group);
                // Rotated extent is awkward to compute exactly; the anchor point
                // and the unrotated rect together bound it well enough.
                self.bounds.point(pos);
            }
            self.bounds.rect(rect);
        }
        rect
    }

    /// Which outline each glyph of `run` draws, in order; `None` draws nothing.
    ///
    /// A galley records the *character* behind each glyph, never the glyph the
    /// shaper picked, so `fi` in a font with `liga` arrives as a ligature filed
    /// under `'f'` plus a continuation glyph for `'i'` — and outlining that
    /// `'i'` by cmap stacks it on the next character. Re-shaping recovers the
    /// identity the galley dropped; the positions stay the galley's.
    fn identify(&self, run: &[Placed<'_>]) -> Vec<Option<ttf_parser::GlyphId>> {
        let text: String = run.iter().map(|p| p.glyph.chr).collect();
        let clusters: Vec<Cluster> = run.iter().map(|p| Cluster::of(p.glyph)).collect();
        match Identity::zip(&self.shape(&text), &clusters) {
            Identity::Shaped(ids) => ids,
            Identity::ByChar => {
                if !self.warned.replace(true) {
                    tracing::warn!(
                        text,
                        "export: re-shaping disagreed with the layout; \
                         glyph identity falls back to the character map, \
                         which draws ligature clusters stacked"
                    );
                }
                run.iter()
                    .map(|p| self.face.glyph_index(p.glyph.chr))
                    .collect()
            }
        }
    }

    /// Shape one paragraph the way epaint's `shape_text` shapes a single-face
    /// run: same engine, same font bytes, same features and flags, so the
    /// glyphs chosen here are the glyphs the canvas rasterized.
    fn shape(&self, text: &str) -> Vec<ttf_parser::GlyphId> {
        let shaper = self.shaper_data.shaper(&self.font_ref).build();
        let mut buffer = harfrust::UnicodeBuffer::new();
        buffer.set_flags(
            harfrust::BufferFlags::BEGINNING_OF_TEXT | harfrust::BufferFlags::END_OF_TEXT,
        );
        buffer.push_str(text);
        buffer.guess_segment_properties();
        shaper
            .shape(buffer, harfrust::ShapeOptions::new())
            .glyph_infos()
            .iter()
            // harfrust guarantees a shaped `glyph_id` fits in a `u16`.
            .map(|info| ttf_parser::GlyphId(info.glyph_id as u16))
            .collect()
    }
}

/// A galley glyph with its pen position already resolved into world space.
struct Placed<'a> {
    pen: Pos2,
    glyph: &'a Glyph,
}

/// A galley glyph's place in its shaping cluster. epaint keeps one glyph per
/// *character* so cursor arithmetic stays simple, padding a many-to-one
/// substitution with zero-advance continuations — so a row can hold more glyphs
/// than the shaper produced.
#[derive(Clone, Copy, PartialEq, Eq, Debug)]
enum Cluster {
    /// Carries the cluster's advance, and so the cluster's shaped glyph.
    Head,
    /// Padding for a character folded into the head's glyph; draws nothing.
    Continuation,
}

impl Cluster {
    fn of(glyph: &Glyph) -> Self {
        if glyph.advance_width > 0.0 {
            Self::Head
        } else {
            Self::Continuation
        }
    }
}

/// Where a run's glyph identity came from.
enum Identity {
    /// One entry per galley glyph, zipped onto the shaper's output in visual
    /// order: the glyph to outline, or `None` at a continuation, whose cluster
    /// is already drawn at its head.
    Shaped(Vec<Option<ttf_parser::GlyphId>>),
    /// The shaper and the layout disagree on how many glyphs the run holds, so
    /// there is nothing to zip. The caller falls back to a per-character
    /// lookup: wrong for ligature clusters, but it never drops text.
    ByChar,
}

impl Identity {
    fn zip(shaped: &[ttf_parser::GlyphId], clusters: &[Cluster]) -> Self {
        if shaped.len() != clusters.iter().filter(|c| **c == Cluster::Head).count() {
            return Self::ByChar;
        }
        let mut shaped = shaped.iter();
        Self::Shaped(
            clusters
                .iter()
                .map(|cluster| match cluster {
                    Cluster::Head => shaped.next().copied(),
                    Cluster::Continuation => None,
                })
                .collect(),
        )
    }
}

impl Renderer for SvgRenderer {
    fn rect(
        &self,
        rect: Rect,
        rounding: WorldPx,
        fill: impl Into<Swatch>,
        stroke: impl Into<PaletteStroke>,
    ) {
        let stroke = stroke.into();
        self.bounds.stroked(rect, &stroke);
        let stroke = self.resolve_stroke(stroke);
        let mut el = Rectangle::new()
            .set("x", rect.min.x)
            .set("y", rect.min.y)
            .set("width", rect.width())
            .set("height", rect.height())
            .set("rx", rounding.get());
        apply_fill(&mut el, self.color(fill));
        apply_stroke(&mut el, stroke);
        self.append(el);
    }

    fn line_segment(&self, points: [Pos2; 2], stroke: impl Into<PaletteStroke>) {
        let stroke = self.resolve_stroke(stroke);
        self.bounds.path(&points);
        let mut el = Line::new()
            .set("x1", points[0].x)
            .set("y1", points[0].y)
            .set("x2", points[1].x)
            .set("y2", points[1].y)
            .set("stroke-linecap", "round");
        apply_stroke(&mut el, stroke);
        self.append(el);
    }

    fn line(&self, points: Vec<Pos2>, stroke: impl Into<PaletteStroke>) {
        let stroke = self.resolve_stroke(stroke);
        self.bounds.path(&points);
        let mut el = Polyline::new()
            .set("points", point_list(&points))
            .set("fill", "none")
            .set("stroke-linecap", "round")
            .set("stroke-linejoin", "round");
        apply_stroke(&mut el, stroke);
        self.append(el);
    }

    fn circle(
        &self,
        center: Pos2,
        radius: WorldPx,
        fill: impl Into<Swatch>,
        stroke: impl Into<PaletteStroke>,
    ) {
        let stroke = stroke.into();
        self.bounds.disc(center, radius, &stroke);
        let stroke = self.resolve_stroke(stroke);
        let mut el = Circle::new()
            .set("cx", center.x)
            .set("cy", center.y)
            .set("r", radius.get());
        apply_fill(&mut el, self.color(fill));
        apply_stroke(&mut el, stroke);
        self.append(el);
    }

    fn add_convex_polygon(
        &self,
        points: Vec<Pos2>,
        fill: impl Into<Swatch>,
        stroke: impl Into<PaletteStroke>,
    ) {
        let stroke = self.resolve_stroke(stroke);
        self.bounds.path(&points);
        let mut el = Polygon::new().set("points", point_list(&points));
        apply_fill(&mut el, self.color(fill));
        apply_stroke(&mut el, stroke);
        self.append(el);
    }

    fn text(
        &self,
        pos: Pos2,
        anchor: Align2,
        text: impl ToString,
        font: &Font,
        color: impl Into<Swatch>,
    ) -> Rect {
        let color = self.color(color);
        let galley = self.layout(text.to_string(), font, WorldPx::UNBOUNDED);
        self.draw_galley(pos, anchor, &galley, font, color, 0.0)
    }

    fn rotated_text(
        &self,
        pos: Pos2,
        anchor: Align2,
        text: impl ToString,
        font: &Font,
        color: impl Into<Swatch>,
        angle: f32,
    ) {
        let color = self.color(color);
        let galley = self.layout(text.to_string(), font, WorldPx::UNBOUNDED);
        self.draw_galley(pos, anchor, &galley, font, color, angle);
    }

    fn text_wrapped(
        &self,
        pos: Pos2,
        anchor: Align2,
        text: impl ToString,
        font: &Font,
        color: impl Into<Swatch>,
        max_width: WorldPx,
    ) -> Rect {
        let color = self.color(color);
        let galley = self.layout(text.to_string(), font, max_width);
        self.draw_galley(pos, anchor, &galley, font, color, 0.0)
    }

    fn text_size(&self, text: impl ToString, font: &Font) -> Vec2 {
        self.layout(text.to_string(), font, WorldPx::UNBOUNDED)
            .size()
            .geom()
    }

    fn text_size_wrapped(&self, text: impl ToString, font: &Font, max_width: WorldPx) -> Vec2 {
        self.layout(text.to_string(), font, max_width).size().geom()
    }

    fn draw_image(&self, rect: Rect, image: &Asset) {
        use base64::Engine as _;
        self.bounds.rect(rect);
        // Embed the image as a base64 data URI so the export is self-contained,
        // with the MIME type matching the payload. `rect` is already
        // aspect-correct; `meet` keeps the image centered and undistorted within
        // it.
        let mime = match image {
            Asset::Svg(_) => "image/svg+xml",
            Asset::Png(_) => "image/png",
        };
        let href = format!(
            "data:{mime};base64,{}",
            base64::engine::general_purpose::STANDARD.encode(image.bytes())
        );
        let el = Image::new()
            .set("x", rect.min.x)
            .set("y", rect.min.y)
            .set("width", rect.width())
            .set("height", rect.height())
            .set("preserveAspectRatio", "xMidYMid meet")
            .set("href", href.as_str());
        self.append(el);
    }

    fn image_intrinsic_size(&self, image: &Asset) -> Option<Vec2> {
        crate::canvas::image::image_intrinsic_size(image).ok()
    }
}

/// The leftmost x of every glyph `<path>` in an exported SVG, in draw order —
/// enough to tell whether a run's glyphs march rightwards or stack. Lives here
/// so the exporter's own tests and the end-to-end render-path tests read the
/// output the same way; the exporter never reads what it writes.
#[cfg(test)]
pub(crate) fn glyph_pen_xs(svg: &str) -> Vec<f32> {
    svg.match_indices("d=\"")
        .map(|(at, _)| {
            let d = &svg[at + 3..];
            let d = &d[..d.find('"').expect("a path's d attribute is closed")];
            d.split([' ', ','])
                .filter_map(|t| {
                    t.trim_start_matches(char::is_alphabetic)
                        .parse::<f32>()
                        .ok()
                })
                .step_by(2)
                .fold(f32::INFINITY, f32::min)
        })
        .collect()
}

/// Builds a `<path>` `d` from a glyph outline, applying the world-space
/// transform (pen origin, baseline, scale) and the font's Y-up → SVG Y-down
/// flip as it goes.
struct GlyphPath {
    data: Data,
    ox: f32,
    baseline: f32,
    scale: f32,
}

impl GlyphPath {
    fn tx(&self, x: f32) -> f32 {
        self.ox + x * self.scale
    }
    fn ty(&self, y: f32) -> f32 {
        self.baseline - y * self.scale
    }
}

impl ttf_parser::OutlineBuilder for GlyphPath {
    fn move_to(&mut self, x: f32, y: f32) {
        let p = (self.tx(x), self.ty(y));
        self.data = mem::take(&mut self.data).move_to(p);
    }
    fn line_to(&mut self, x: f32, y: f32) {
        let p = (self.tx(x), self.ty(y));
        self.data = mem::take(&mut self.data).line_to(p);
    }
    fn quad_to(&mut self, x1: f32, y1: f32, x: f32, y: f32) {
        let p = (self.tx(x1), self.ty(y1), self.tx(x), self.ty(y));
        self.data = mem::take(&mut self.data).quadratic_curve_to(p);
    }
    fn curve_to(&mut self, x1: f32, y1: f32, x2: f32, y2: f32, x: f32, y: f32) {
        let p = (
            self.tx(x1),
            self.ty(y1),
            self.tx(x2),
            self.ty(y2),
            self.tx(x),
            self.ty(y),
        );
        self.data = mem::take(&mut self.data).cubic_curve_to(p);
    }
    fn close(&mut self) {
        self.data = mem::take(&mut self.data).close();
    }
}

/// Build the `points` attribute value for a polyline/polygon. `Vec<(f32, f32)>`
/// serializes to `"x y x y …"`, which SVG accepts.
fn point_list(points: &[Pos2]) -> Vec<(f32, f32)> {
    points.iter().map(|p| (p.x, p.y)).collect()
}

fn color_hex(c: Color) -> String {
    let [r, g, b, _] = c.to_srgba_unmultiplied();
    format!("#{r:02x}{g:02x}{b:02x}")
}

/// Set `fill`/`fill-opacity`, or `fill="none"` when fully transparent.
fn apply_fill(node: &mut impl Node, c: Color) {
    let [.., a] = c.to_srgba_unmultiplied();
    if a == 0 {
        node.assign("fill", "none");
        return;
    }
    node.assign("fill", color_hex(c));
    if a != 255 {
        node.assign("fill-opacity", a as f32 / 255.0);
    }
}

/// Set `stroke`/`stroke-width`(+opacity); no-op when there's no visible stroke.
fn apply_stroke(node: &mut impl Node, s: Stroke) {
    let color = s.color.geom();
    let [.., a] = color.to_srgba_unmultiplied();
    if s.width <= 0.0 || a == 0 {
        return;
    }
    node.assign("stroke", color_hex(color));
    node.assign("stroke-width", s.width);
    if a != 255 {
        node.assign("stroke-opacity", a as f32 / 255.0);
    }
}

#[cfg(test)]
mod tests {
    use super::*;
    use blockworx_paint::Base;

    fn px(v: f32) -> WorldPx {
        WorldPx::new(v)
    }

    fn palette() -> Palette {
        Palette::tokyo_night_moon()
    }

    fn renderer() -> SvgRenderer {
        SvgRenderer::new(palette(), FontChoice::Sketchy)
    }

    fn draw(choice: FontChoice, text: &str) -> Vec<f32> {
        let r = SvgRenderer::new(palette(), choice);
        r.text(Pos2::ZERO, Align2::LEFT_TOP, text, &font(), Base::B00);
        let (svg, _) = r.finish();
        glyph_pen_xs(&svg)
    }

    fn assert_marches_right(xs: &[f32], what: &str) {
        assert!(xs.len() > 1, "{what}: expected glyphs, got {xs:?}");
        for pair in xs.windows(2) {
            assert!(
                pair[0] < pair[1],
                "{what}: glyphs must march rightwards, got {xs:?}",
            );
        }
    }

    #[test]
    fn a_ligature_draws_once_and_its_cluster_does_not_stack() {
        // Roboto's `liga` shapes "fi" into a single glyph. epaint files it under
        // `chr: 'f'` and pads the cluster with a zero-advance continuation glyph
        // for 'i' parked at the *next* pen position — 'g''s. Looking identity up
        // by character therefore drew a standalone 'i' on top of the 'g'.
        let xs = draw(FontChoice::Basic, "Config");
        assert_eq!(
            xs.len(),
            5,
            "C o n <fi> g is five outlines, not six: {xs:?}",
        );
        assert_marches_right(&xs, "Config");
    }

    #[test]
    fn ligature_rich_text_places_every_glyph_in_order() {
        // Latin ligatures and Cyrillic, both covered by Roboto. Seventeen
        // non-space characters, but `ffl`/`fi`/`fl`/`ffi` are four glyphs, so
        // eleven outlines — one per shaped glyph, none per continuation.
        let xs = draw(FontChoice::Basic, "waffle офис fi fl ffi");
        assert_eq!(xs.len(), 11, "one outline per shaped glyph: {xs:?}");
        assert_marches_right(&xs, "liga");
    }

    #[test]
    fn every_paragraph_is_shaped_on_its_own() {
        // Re-shaping is per paragraph, so a second line must resolve the same
        // ligature as the first and place it at the same pen positions.
        let xs = draw(FontChoice::Basic, "Config\nConfig");
        assert_eq!(xs.len(), 10, "five outlines per line: {xs:?}");
        assert_eq!(xs[..5], xs[5..], "both lines start at the same left edge");
        assert_marches_right(&xs[..5], "line 1");
    }

    #[test]
    fn a_font_that_substitutes_nothing_is_unaffected() {
        // Iosevka ships `calt` but no default-on code ligatures, so "->" stays
        // two glyphs: the guard is that re-shaping leaves such a font exactly
        // where the character map left it.
        let xs = draw(FontChoice::Monospace, "a -> b");
        assert_eq!(xs.len(), 4, "a - > b, spaces drawing nothing: {xs:?}");
        assert_marches_right(&xs, "calt");
    }

    #[test]
    fn a_count_disagreement_falls_back_to_the_character_map() {
        let gid = ttf_parser::GlyphId;
        let clusters = [Cluster::Head, Cluster::Continuation, Cluster::Head];
        assert!(matches!(
            Identity::zip(&[gid(7), gid(8), gid(9)], &clusters),
            Identity::ByChar,
        ));
        let Identity::Shaped(ids) = Identity::zip(&[gid(7), gid(8)], &clusters) else {
            panic!("two shaped glyphs match the run's two cluster heads");
        };
        assert_eq!(ids, vec![Some(gid(7)), None, Some(gid(8))]);
    }

    /// The family the canvas actually draws in — the one `renderer`'s outlines
    /// come from, so layout and glyphs agree.
    fn font() -> Font {
        Font::canvas(12.0)
    }

    #[test]
    fn text_becomes_glyph_paths() {
        let r = renderer();
        let rect = r.text(
            Pos2::new(0.0, 0.0),
            Align2::LEFT_TOP,
            "Ab",
            &font(),
            // B00 of Tokyo Night Moon (#222436).
            Base::B00,
        );
        let (svg, _) = r.finish();
        // Two letters with outlines → at least one filled path with a move command.
        assert!(svg.contains("<path"), "expected a glyph path:\n{svg}");
        assert!(
            svg.contains("d=\"M"),
            "path should start with a move command"
        );
        assert!(
            svg.contains("fill=\"#222436\""),
            "resolved palette fill expected"
        );
        assert!(rect.width() > 0.0, "measured width should be positive");
    }

    #[test]
    fn multiline_text_stacks_lines() {
        let r = renderer();
        let font = font();
        // Two `\n`-separated lines measure two rows tall, one row wide.
        let one = r.text_size("aaaa", &font);
        let two = r.text_size("aa\naa", &font);
        assert!(
            (two.y - 2.0 * one.y).abs() < 0.001,
            "two lines should be twice as tall: {} vs {}",
            two.y,
            one.y
        );
        assert!(
            two.x < one.x + 0.001,
            "width is the widest line, not the sum: {} vs {}",
            two.x,
            one.x
        );
        // A trailing newline keeps an empty final row (matching egui).
        assert!((r.text_size("aa\n", &font).y - two.y).abs() < 0.001);
    }

    #[test]
    fn wrapped_text_breaks_long_lines_within_the_width() {
        let r = renderer();
        let font = font();
        let line = "the quick brown fox jumps over the lazy dog";
        let unwrapped = r.text_size(line, &font);
        // Wrap to a third of the unwrapped width: it must take more rows, and no
        // row may exceed the wrap width.
        let max = unwrapped.x / 3.0;
        let wrapped = r.text_size_wrapped(line, &font, px(max));
        assert!(
            wrapped.y > unwrapped.y,
            "wrapping a long line adds rows: {} vs {}",
            wrapped.y,
            unwrapped.y
        );
        assert!(
            wrapped.x <= max + 0.001,
            "no wrapped row exceeds the wrap width: {} vs {}",
            wrapped.x,
            max
        );
        // An infinite width is a no-op (matches the no-wrap default).
        assert!(
            (r.text_size_wrapped(line, &font, WorldPx::UNBOUNDED).x - unwrapped.x).abs() < 0.001
        );
    }

    #[test]
    fn primitives_and_viewbox() {
        let r = renderer();
        r.rect(
            Rect::from_min_size(Pos2::new(10.0, 10.0), vec2(30.0, 20.0)),
            px(3.0),
            Base::B01,
            (1.0, Base::B0D),
        );
        r.line(
            vec![Pos2::new(0.0, 0.0), Pos2::new(40.0, 0.0)],
            (1.7, Base::B0B),
        );
        let (svg, _) = r.finish();
        assert!(svg.contains("<svg"));
        assert!(svg.contains("viewBox="));
        assert!(svg.contains("<rect"));
        assert!(svg.contains("<polyline"));
        assert!(svg.contains("</svg>"));
    }

    #[test]
    fn image_embeds_as_data_uri() {
        let r = renderer();
        r.draw_image(
            Rect::from_min_size(Pos2::new(0.0, 0.0), vec2(10.0, 10.0)),
            &Asset::Svg(r#"<svg viewBox="0 0 1 1"/>"#.as_bytes().into()),
        );
        let (svg, _) = r.finish();
        assert!(
            svg.contains("<image"),
            "image exports as an <image>:\n{svg}"
        );
        assert!(
            svg.contains("data:image/svg+xml;base64,"),
            "image href is a base64 SVG data URI"
        );
        assert!(svg.contains(r#"preserveAspectRatio="xMidYMid meet""#));
    }

    #[test]
    fn png_image_embeds_as_png_data_uri() {
        let r = renderer();
        r.draw_image(
            Rect::from_min_size(Pos2::new(0.0, 0.0), vec2(10.0, 10.0)),
            &Asset::Png(vec![0x89, b'P', b'N', b'G', 1, 2, 3].into()),
        );
        let (svg, _) = r.finish();
        assert!(
            svg.contains("data:image/png;base64,"),
            "PNG image href is a base64 PNG data URI:\n{svg}"
        );
    }
}