svg.rs

//! Turns a figure whose positions are already set into SVG
//!
//! A coordinate of 1 equals 1 em of the font size. The width and height are also written in
//! em, so the figure scales with the text around it. The color is left to currentColor.
//!
//! Glyphs can be written out in two ways. Placed as outlines, they need no font on the viewing
//! side and look the same wherever they are opened, but they cannot be selected and copied.
//! Placed as text, they can be selected and copied and the output is smaller, but the viewing
//! side needs the same font.
//!
//! A character the typeface does not have cannot be drawn as an outline, so it is placed as
//! text either way.

use crate::font::{self, Font};
use crate::label::Placed;
use crate::layout::{Figure, PlacedAtom};
use crate::outline;
use crate::style::Style;
use crate::text::{escape, number};


/// How glyphs are written out
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum Shape {
    /// Place as outlines. The viewing side needs no font
    Outline,
    /// Place as text. It can be selected and copied, but the viewing side needs the same font
    Text,
}


/// Turns a figure into one `<svg>`. label becomes the alternative text
pub fn render(figure: &Figure, font: &Font, style: &Style, shape: Shape, label: &str) -> String {
    let extent = figure.extent.grow(style.margin);
    let width = (extent.right - extent.left).max(style.margin * 2.0);
    let height = (extent.bottom - extent.top).max(style.margin * 2.0);
    let mut out = String::new();

    out.push_str("<svg xmlns=\"http://www.w3.org/2000/svg\"");
    out.push_str(&format!(" width=\"{}em\" height=\"{}em\"", number(width), number(height)));
    out.push_str(&format!(
        " viewBox=\"{} {} {} {}\"",
        number(extent.left),
        number(extent.top),
        number(width),
        number(height)
    ));
    // When the figure is placed in a line of text, put the baseline of its letters on the
    // baseline of the text around it. A replaced element sits with its bottom edge on the
    // baseline by default, so lower the figure by that amount
    let baseline = font::cap_height(font) / 2.0;
    let drop = extent.bottom - baseline;
    out.push_str(&format!(" style=\"vertical-align:{}em\"", number(-drop)));
    out.push_str(&format!(" role=\"img\" aria-label=\"{}\">", escape(label)));

    // Put the bonds first and the letters after. Where they overlap, the letters are on top
    push_bond(&mut out, figure, style);
    push_wedge(&mut out, figure, style);
    push_circle(&mut out, figure, style);

    match shape {
        Shape::Outline => push_outline(&mut out, figure, font, style),
        Shape::Text => push_text(&mut out, figure, font),
    }

    push_fallback(&mut out, figure);

    out.push_str("</svg>");
    out
}


/// The atoms placed in the figure, and the name under it
fn every_atom(figure: &Figure) -> impl Iterator<Item = &PlacedAtom> {
    figure.atom.iter().chain(figure.name.iter())
}


/// The glyph outlines. They are put together in one path
fn push_outline(out: &mut String, figure: &Figure, font: &Font, style: &Style) {
    let unit = font::units_per_em(font);
    let mut data = String::new();

    for atom in every_atom(figure) {
        for placed in &atom.label.placed {
            let Some(glyph) = placed.glyph else {
                continue;
            };
            let drawn = font::outline_of(font, glyph);

            if drawn.segment.is_empty() {
                continue;
            }

            let scale = placed.size / unit;
            let x = atom.origin_x + placed.x;
            let y = atom.origin_y + placed.y;
            data.push_str(&outline::path_data(&drawn, scale, x, y));
        }
    }

    if data.is_empty() {
        return;
    }

    out.push_str("<path fill=\"currentColor\"");

    if style.darken > 0.0 {
        let weight = number(style.darken);
        out.push_str(&format!(
            " stroke=\"currentColor\" stroke-width=\"{weight}\" stroke-linejoin=\"round\""
        ));
    }

    out.push_str(&format!(" d=\"{data}\"/>"));
}


/// Places glyphs as text
///
/// While letters of the same size and height follow one another, they go into one `<text>`,
/// and a list of x values sets the position of each letter.
/// The advances are not left to the browser, so the letters line up in the same places as
/// the outlines
fn push_text(out: &mut String, figure: &Figure, font: &Font) {
    let family = escape(font::family(font));

    for atom in every_atom(figure) {
        let mut start = 0;
        let placed = &atom.label.placed;

        while start < placed.len() {
            if placed[start].glyph.is_none() {
                start += 1;

                continue;
            }

            let mut end = start + 1;

            while end < placed.len() && continues(&placed[start], &placed[end]) {
                end += 1;
            }

            push_run(out, atom, &placed[start..end], &family);
            start = end;
        }
    }
}


/// Whether the two may go into the same `<text>`
fn continues(first: &Placed, next: &Placed) -> bool {
    next.glyph.is_some() && next.size == first.size && next.y == first.y
}


/// Turns a run of letters with the same size and height into one `<text>`
fn push_run(out: &mut String, atom: &PlacedAtom, run: &[Placed], family: &str) {
    let mut horizontal = String::new();
    let mut body = String::new();

    for placed in run {
        if !horizontal.is_empty() {
            horizontal.push(' ');
        }

        horizontal.push_str(&number(atom.origin_x + placed.x));
        body.push(placed.character);
    }

    out.push_str(&format!(
        "<text x=\"{horizontal}\" y=\"{}\" font-size=\"{}\" font-family=\"{family}\" \
         fill=\"currentColor\">{}</text>",
        number(atom.origin_y + run[0].y),
        number(run[0].size),
        escape(&body)
    ));
}


/// The bond lines. They are put together in one path
fn push_bond(out: &mut String, figure: &Figure, style: &Style) {
    if figure.line.is_empty() {
        return;
    }

    let mut data = String::new();

    for line in &figure.line {
        data.push('M');
        data.push_str(&number(line.x1));
        data.push(' ');
        data.push_str(&number(line.y1));
        data.push('L');
        data.push_str(&number(line.x2));
        data.push(' ');
        data.push_str(&number(line.y2));
    }

    out.push_str(&format!(
        "<path fill=\"none\" stroke=\"currentColor\" stroke-width=\"{}\" \
         stroke-linecap=\"round\" d=\"{data}\"/>",
        number(style.line_width)
    ));
}


/// The wedge triangles. Filled ones and unfilled ones are kept apart, each kind in one path
fn push_wedge(out: &mut String, figure: &Figure, style: &Style) {
    for filled in [true, false] {
        let mut data = String::new();

        for wedge in figure.wedge.iter().filter(|one| one.filled == filled) {
            data.push('M');
            data.push_str(&spot(wedge.tip));
            data.push('L');
            data.push_str(&spot(wedge.base[0]));
            data.push('L');
            data.push_str(&spot(wedge.base[1]));
            data.push('Z');
        }

        if data.is_empty() {
            continue;
        }

        if filled {
            out.push_str(&format!("<path fill=\"currentColor\" d=\"{data}\"/>"));

        } else {
            out.push_str(&format!(
                "<path fill=\"none\" stroke=\"currentColor\" stroke-width=\"{}\" \
                 stroke-linejoin=\"round\" d=\"{data}\"/>",
                number(style.line_width)
            ));
        }
    }
}


/// The circle of an aromatic ring
fn push_circle(out: &mut String, figure: &Figure, style: &Style) {
    for circle in &figure.circle {
        out.push_str(&format!(
            "<circle cx=\"{}\" cy=\"{}\" r=\"{}\" fill=\"none\" stroke=\"currentColor\" \
             stroke-width=\"{}\"/>",
            number(circle.x),
            number(circle.y),
            number(circle.radius),
            number(style.line_width)
        ));
    }
}


/// Formats a point the way it is written inside a path
fn spot(point: (f64, f64)) -> String {
    format!("{} {}", number(point.0), number(point.1))
}


/// Characters the typeface does not have. They cannot be drawn as outlines, so they are
/// placed as text
fn push_fallback(out: &mut String, figure: &Figure) {
    for atom in every_atom(figure) {
        for placed in &atom.label.placed {
            if placed.glyph.is_some() {
                continue;
            }

            let x = number(atom.origin_x + placed.x);
            let y = number(atom.origin_y + placed.y);
            let size = number(placed.size);
            let text = escape(&placed.character.to_string());
            out.push_str(&format!(
                "<text x=\"{x}\" y=\"{y}\" font-size=\"{size}\" \
                 font-family=\"{}\" fill=\"currentColor\">{text}</text>",
                font::FALLBACK
            ));
        }
    }
}


#[cfg(test)]
mod tests {
    use super::*;
    use crate::font::sample;
    use crate::layout::layout;
    use crate::parse::parse;

    fn draw(source: &str) -> String {
        let font = sample();
        let style = Style::default();
        let figure = layout(&parse(source).unwrap(), &font, &style).unwrap();

        render(&figure, &font, &style, Shape::Outline, source)
    }

    fn write(source: &str) -> String {
        let font = sample();
        let style = Style::default();
        let figure = layout(&parse(source).unwrap(), &font, &style).unwrap();

        render(&figure, &font, &style, Shape::Text, source)
    }

    #[test]
    fn writes_one_svg_element() {
        let found = draw("H-O-H");
        assert!(found.starts_with("<svg xmlns=\"http://www.w3.org/2000/svg\""));
        assert!(found.ends_with("</svg>"));
        assert_eq!(found.matches("<svg").count(), 1);
    }

    #[test]
    fn the_size_is_written_in_em() {
        let found = draw("H-O-H");
        assert!(found.contains("em\" height=\""));
        assert!(found.contains("viewBox=\""));
    }

    #[test]
    fn the_figure_sits_on_the_baseline_of_the_text_around_it() {
        let found = draw("H-O-H");
        let at = found.find("vertical-align:").expect("基準線がありません");
        let rest = &found[at + "vertical-align:".len()..];
        let value: f64 = rest[..rest.find("em").unwrap()].parse().unwrap();
        // The figure's bottom edge is below the baseline by the letters' depth plus the margin
        assert!(value < 0.0, "図が下がっていません");
        assert!(value > -1.0, "下げすぎです: {value}");
    }

    #[test]
    fn a_taller_figure_hangs_lower() {
        let flat = draw("H-H");
        let tall = draw("H-[:-90]H");
        let of = |markup: &str| {
            let at = markup.find("vertical-align:").unwrap() + "vertical-align:".len();
            let rest = &markup[at..];
            rest[..rest.find("em").unwrap()].parse::<f64>().unwrap()
        };
        assert!(of(&tall) < of(&flat), "下へ伸びた図が下がっていません");
    }

    #[test]
    fn the_glyphs_come_out_as_outlines() {
        let found = draw("H-O-H");
        assert!(found.contains("<path fill=\"currentColor\""));
        assert!(found.contains("C"), "曲線の命令がありません");
    }

    #[test]
    fn the_bonds_come_out_as_one_stroked_path() {
        let found = draw("H-O-H");
        assert_eq!(found.matches("stroke-linecap=\"round\"").count(), 1);
        assert_eq!(found.matches("fill=\"none\"").count(), 1);
    }

    #[test]
    fn a_molecule_with_no_bond_still_draws() {
        let found = draw("H_2O");
        assert!(found.contains("<path fill=\"currentColor\""));
        assert!(!found.contains("fill=\"none\""));
    }

    #[test]
    fn the_label_becomes_the_alternative_text() {
        assert!(draw("O=C=O").contains("aria-label=\"O=C=O\""));
    }

    #[test]
    fn markup_in_the_label_is_escaped() {
        let font = sample();
        let style = Style::default();
        let figure = layout(&parse("A-B").unwrap(), &font, &style).unwrap();
        let found = render(&figure, &font, &style, Shape::Outline, "<a>&");
        assert!(found.contains("aria-label=\"&lt;a&gt;&amp;\""));
    }

    #[test]
    fn a_filled_wedge_is_a_closed_path() {
        let found = draw("C>H");
        let at = found.find("<path fill=\"currentColor\" d=\"M").expect("三角形がありません");
        let data = &found[at..found[at..].find("\"/>").unwrap() + at];
        // It is closed with three vertices
        assert_eq!(data.matches('L').count(), 2);
        assert_eq!(data.matches('Z').count(), 1);
    }

    #[test]
    fn a_hollow_wedge_is_stroked_instead() {
        let found = draw("C>|H");
        assert!(found.contains("stroke-linejoin=\"round\" d=\"M"));
        assert!(found.contains('Z'));
    }

    #[test]
    fn an_aromatic_ring_writes_a_circle() {
        let found = draw("**6(------)");
        assert_eq!(found.matches("<circle").count(), 1);
        assert!(found.contains("fill=\"none\" stroke=\"currentColor\""));
    }

    #[test]
    fn a_plain_ring_writes_no_circle() {
        assert!(!draw("*6(------)").contains("<circle"));
    }

    #[test]
    fn the_bonds_are_written_before_the_letters() {
        let found = draw("H-O-H");
        let bond = found.find("fill=\"none\"").unwrap();
        let glyph = found.find("<path fill=\"currentColor\"").unwrap();
        assert!(bond < glyph, "字が結合の下に隠れます");
    }

    #[test]
    fn the_text_shape_writes_letters_instead_of_outlines() {
        let found = write("H-O-H");
        assert_eq!(found.matches("<text").count(), 3);
        assert!(!found.contains("<path fill=\"currentColor\""), "輪郭が残っています");
        assert!(found.contains("font-family=\"Latin Modern Math\""));
        assert!(found.contains("fill=\"none\""), "結合が消えています");
    }

    #[test]
    fn letters_of_the_same_size_and_height_share_one_text() {
        // C and H have the same size and height, so they share one.
        // 3 is lowered, so it gets its own
        let found = write("CH_3");
        assert_eq!(found.matches("<text").count(), 2);
        assert!(found.contains(">CH</text>"));
        assert!(found.contains(">3</text>"));
    }

    #[test]
    fn every_letter_gets_its_own_place() {
        let found = write("CH_3");
        let at = found.find("<text x=\"").unwrap() + "<text x=\"".len();
        let list = &found[at..at + found[at..].find('"').unwrap()];
        assert_eq!(list.split(' ').count(), 2, "x が 1 字ずつ並んでいません");
    }

    #[test]
    fn the_two_shapes_place_the_letters_alike() {
        // The size of the figure is the same with outlines and with text
        let outline = draw("H_3C-CH_3");
        let text = write("H_3C-CH_3");
        let size = |markup: &str| {
            let at = markup.find("viewBox=\"").unwrap() + "viewBox=\"".len();
            markup[at..at + markup[at..].find('"').unwrap()].to_string()
        };
        assert_eq!(size(&outline), size(&text));
    }

    #[test]
    fn a_character_the_font_lacks_is_written_as_text() {
        let found = draw("\u{3042}-H");
        assert!(found.contains("<text"));
        assert!(found.contains("\u{3042}"));
    }

    #[test]
    fn an_empty_source_still_makes_a_box() {
        let found = draw("");
        assert!(found.starts_with("<svg"));
        assert!(found.ends_with("</svg>"));
    }
}