Blame for backend/app/slides/render.py

"""A deck as HTML: one standalone page per slide (shown in the app in a sandboxed frame, scaled to fit) and one page
with every slide (printed to PDF). Every word from the model is escaped; the markup is all ours."""

import math

from markupsafe import escape

from app.slides.content import field_limit
from app.slides.decor import Decor, Shape, build, ring_path
from app.slides.layout import Composed, El, Run, compose
from app.slides.themes import FONTS, THEMES, H, Palette, W, theme_id

FONT_LINK = ("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;700"
             "&family=JetBrains+Mono:wght@400;700&display=swap")

_FAMILY = {"display": f"'{FONTS['display']}','{FONTS['body']}',sans-serif", "body": f"'{FONTS['body']}',sans-serif",
           "mono": f"'{FONTS['mono']}',monospace"}


def color(pal: Palette, key: str | None) -> str:
    if not key:
        return "transparent"
    return "#ffffff" if key == "white" else getattr(pal, key)


CSS = f"""
html,body{{margin:0;padding:0}}
.slide{{position:relative;width:{W}px;height:{H}px;overflow:hidden;font-family:{_FAMILY['body']};
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}}
.slide svg.bg{{position:absolute;inset:0}}
.e{{position:absolute;box-sizing:border-box;margin:0}}
.t{{display:flex;flex-direction:column;overflow:visible;overflow-wrap:anywhere}}
.t>.in{{display:block}}
.t.v-middle{{justify-content:center}}.t.v-bottom{{justify-content:flex-end}}
.t p{{margin:0}}
.t b{{font-weight:700}}
.r-heading,.r-quote,.r-closing,.r-term{{text-wrap:balance}}
.dark .r-heading.l-title,.dark .r-value{{text-shadow:0 0 48px rgba(33,124,255,.45)}}
.dark .r-marker{{box-shadow:0 0 36px rgba(33,124,255,.75)}}
.dark .r-bar{{box-shadow:0 0 18px rgba(77,148,255,.8)}}
.light .r-card,.light .r-panel{{box-shadow:0 18px 44px rgba(11,26,58,.14)}}
.light .r-band{{box-shadow:0 18px 44px rgba(11,26,58,.26)}}
"""


def _style(**kw) -> str:
    return ";".join(f"{k.replace('_', '-')}:{v}" for k, v in kw.items() if v is not None)


def _el(e: El, pal: Palette, layout: str, fmt: str) -> str:
    box = dict(left=f"{e.x:.1f}px", top=f"{e.y:.1f}px", width=f"{e.w:.1f}px", height=f"{e.h:.1f}px")
    if e.kind == "text":
        paras = []
        for i, p in enumerate(e.paras):
            runs = "".join(
                f'<span{_editable(r, layout, fmt)} style="color:{color(pal, r.color)}{";font-weight:700" if r.bold else ""}">'
                f'{escape(r.text)}</span>' for r in p)
            gap = f' style="margin-top:{e.gap:.1f}px"' if i and e.gap else ""
            paras.append(f"<p{gap}>{runs}</p>")
        css = _style(**box, font_size=f"{e.size}px", line_height=str(e.lh), font_family=_FAMILY[e.font],
                     text_align=e.align, letter_spacing=f"{e.track}em" if e.track else None,
                     text_transform="uppercase" if e.upper else None,
                     font_weight="700" if e.font == "display" else None)
        return f'<div class="e t r-{e.role} l-{layout} v-{e.valign}" style="{css}"><div class="in">{"".join(paras)}</div></div>'
    if e.kind == "line":
        horizontal = e.h == 0
        css = _style(left=f"{e.x:.1f}px", top=f"{e.y - (e.stroke_w / 2 if horizontal else 0):.1f}px",
                     width=f"{e.w if horizontal else e.stroke_w:.1f}px", height=f"{e.stroke_w if horizontal else e.h:.1f}px",
                     background=color(pal, e.stroke), border_radius="2px")
        return f'<div class="e r-{e.role}" style="{css}"></div>'
    radius = "50%" if e.kind == "circle" else f"{e.radius}px"
    border = f"{e.stroke_w}px solid {color(pal, e.stroke)}" if e.stroke and e.stroke_w else None
    css = _style(**box, background=color(pal, e.fill), border=border, border_radius=radius,
                 opacity=str(e.opacity) if e.opacity < 1 else None)
    return f'<div class="e r-{e.role}" style="{css}"></div>'


def _editable(r: Run, layout: str, fmt: str) -> str:
    """Where a run's text lives and how long it may be, for the page's editor (none on our own text: numbers, footers)."""
    return f' data-f="{r.field}" data-max="{field_limit(layout, r.field, fmt)}"' if r.field else ""


def _svg(d: Decor, pal: Palette, dark: bool, uid: str) -> str:
    defs, out = [], []
    for n, s in enumerate(d.shapes):
        out.append(_shape(s, pal, dark, f"{uid}{n}", defs))
    hx, hy = d.hot
    sky = (f'<radialGradient id="{uid}sky" gradientUnits="userSpaceOnUse" cx="{hx:.0f}" cy="{hy:.0f}" r="{W * 0.85:.0f}">'
           f'<stop offset="0" stop-color="{pal.bg2}"/><stop offset="1" stop-color="{pal.bg1}"/></radialGradient>')
    return (f'<svg class="bg" width="{W}" height="{H}" viewBox="0 0 {W} {H}"><defs>{sky}{"".join(defs)}</defs>'
            f'<rect width="{W}" height="{H}" fill="url(#{uid}sky)"/>{"".join(out)}</svg>')


def _shape(s: Shape, pal: Palette, dark: bool, gid: str, defs: list[str]) -> str:
    c = color(pal, s.color)
    if s.kind == "stars":
        return "".join(f'<circle cx="{x:.0f}" cy="{y:.0f}" r="{r}" fill="{c}" opacity="{o}"/>' for x, y, r, o in s.points)
    if s.kind == "glow":
        defs.append(f'<radialGradient id="{gid}"><stop offset="0" stop-color="{c}" stop-opacity="{s.opacity}"/>'
                    f'<stop offset="1" stop-color="{c}" stop-opacity="0"/></radialGradient>')
        return f'<circle cx="{s.cx:.0f}" cy="{s.cy:.0f}" r="{s.r:.0f}" fill="url(#{gid})"/>'
    if s.kind == "planet":
        hi, lo, rim = planet_colors(pal, dark)
        defs.append(f'<radialGradient id="{gid}" cx="35%" cy="28%" r="80%"><stop offset="0" stop-color="{hi}"/>'
                    f'<stop offset="1" stop-color="{lo}"/></radialGradient>')
        return (f'<circle cx="{s.cx:.0f}" cy="{s.cy:.0f}" r="{s.r:.0f}" fill="url(#{gid})"/>'
                f'<circle cx="{s.cx:.0f}" cy="{s.cy:.0f}" r="{s.r:.0f}" fill="none" stroke="{rim}" stroke-width="3" opacity=".7"/>')
    if s.kind == "band":
        lo, hi = ring_shade(s)
        defs.append(f'<linearGradient id="{gid}" gradientUnits="userSpaceOnUse" x1="{lo:.0f}" y1="0" x2="{hi:.0f}" y2="0">'
                    + "".join(f'<stop offset="{o}" stop-color="{c}" stop-opacity="{a * s.opacity:.3f}"/>' for o, a in SHADE)
                    + "</linearGradient>")
        pts = ring_path(s) + ring_path(s, s.inner)[::-1]
        return f'<path d="M{_pts(pts)}Z" fill="url(#{gid})"/>'
    if s.kind == "ring" and s.arc:
        return (f'<path d="M{_pts(ring_path(s))}" fill="none" stroke="{c}" stroke-width="{s.width}" '
                f'stroke-linecap="round" opacity="{s.opacity}"/>')
    if s.kind == "ring":
        return (f'<ellipse cx="{s.cx:.0f}" cy="{s.cy:.0f}" rx="{s.rx:.0f}" ry="{s.ry:.0f}" fill="none" stroke="{c}" '
                f'stroke-width="{s.width}" opacity="{s.opacity}" transform="rotate({s.rot:.1f} {s.cx:.0f} {s.cy:.0f})"/>')
    if s.kind == "const":
        lines = "".join(f'<line x1="{s.points[a][0]:.0f}" y1="{s.points[a][1]:.0f}" x2="{s.points[b][0]:.0f}" '
                        f'y2="{s.points[b][1]:.0f}" stroke="{c}" stroke-width="1.6" opacity="{s.opacity * 0.5:.2f}"/>'
                        for a, b in s.edges)
        dots = "".join(f'<circle cx="{x:.0f}" cy="{y:.0f}" r="{r}" fill="{c}" opacity="{s.opacity}"/>' for x, y, r, _ in s.points)
        return lines + dots
    return ""


# How brightly a ringed planet's band shows across its width, left to right: lit from the upper left, as the planet is.
SHADE = ((0, 1.0), (0.45, 0.8), (1, 0.3))


def ring_shade(s: Shape) -> tuple[float, float]:
    """The band's left and right extent on the slide, which SHADE runs across."""
    half = math.hypot(s.rx * math.cos(math.radians(s.rot)), s.ry * math.sin(math.radians(s.rot)))
    return s.cx - half, s.cx + half


def _pts(pts: list[tuple[float, float]]) -> str:
    return "L".join(f"{x:.1f} {y:.1f}" for x, y in pts)


def planet_colors(pal: Palette, dark: bool) -> tuple[str, str, str]:
    """Lit side, dark side and rim of a planet."""
    return ("#1d4fb3", "#020713", pal.accent) if dark else ("#5d9bff", pal.accent2, pal.accent)


def slide_body(c: Composed, deck: dict, index: int, theme: str, fmt: str) -> str:
    t = THEMES[theme]
    s = c.slide
    d = build(theme, s["layout"], s["variant"], c.seed, index)
    els = "".join(_el(e, t.pal, s["layout"], fmt) for e in c.elements)
    cls = f"slide {'dark' if t.dark else 'light'} l-{s['layout']} v-{s['variant']}"
    return f'<div class="{cls}" style="background:{t.pal.bg1}">{_svg(d, t.pal, t.dark, f"s{index}g")}{els}</div>'


def _page(body: str, extra_css: str = "") -> str:
    return (f'<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="{FONT_LINK}">'
            f"<style>{CSS}{extra_css}</style></head><body>{body}</body></html>")


def slide_html(deck: dict, index: int, theme: str, fmt: str, seed: int) -> str:
    """One slide as a standalone page."""
    theme = theme_id(theme)
    return _page(slide_body(compose(deck, index, theme, fmt, seed), deck, index, theme, fmt),
                 f"body{{background:{THEMES[theme].pal.bg1}}}")


def slides_html(deck: dict, theme: str, fmt: str, seed: int, start: int, end: int) -> str:
    """Slides start..end-1 of the deck stacked on one page, each as it is in the deck (its number, its sky)."""
    theme = theme_id(theme)
    body = "".join(slide_body(compose(deck, i, theme, fmt, seed), deck, i, theme, fmt) for i in range(start, end))
    return _page(body, f"body{{background:{THEMES[theme].pal.bg1}}}")


def deck_print_html(deck: dict, theme: str, fmt: str, seed: int, script: str = "") -> str:
    """Every slide on one page, one per printed page."""
    theme = theme_id(theme)
    body = "".join(slide_body(compose(deck, i, theme, fmt, seed), deck, i, theme, fmt) for i in range(len(deck["slides"])))
    css = (f"@page{{size:{W}px {H}px;margin:0}}body{{background:{THEMES[theme].pal.bg1}}}"
           ".slide{break-after:page;page-break-after:always}.slide:last-child{break-after:auto;page-break-after:auto}"
           "*{-webkit-print-color-adjust:exact;print-color-adjust:exact}")
    return _page(body + script, css)