@skillpet/circuit 0.5.0

package/dist/svg/figure.js

@@ -0,0 +1,634 @@
+import { LINE_WIDTH, PT_PER_IN } from "./constants.js";
+import { fmt } from "./fmt.js";
+import { getSvgStyle } from "./svg-style.js";
+import { Point } from "../geometry/point.js";
+// Character-width tables adapted from Python `svgtext.string_width`.
+// Values are in milliinches per character at 12pt reference size.
+const SANS_WIDTHS = {};
+for (const ch of "lij|' ")
+    SANS_WIDTHS[ch] = 37;
+for (const ch of "![]fI.,:;/\\t")
+    SANS_WIDTHS[ch] = 50;
+for (const ch of '`-(){}r"')
+    SANS_WIDTHS[ch] = 60;
+for (const ch of "*^zcsJkvxy\u03BC\u00B0")
+    SANS_WIDTHS[ch] = 85;
+for (const ch of "aebdhnopqug#$L+<>=?_~FZT\u03B10123456789")
+    SANS_WIDTHS[ch] = 95;
+for (const ch of "BSPEAKVXY&UwNRCHD")
+    SANS_WIDTHS[ch] = 112;
+for (const ch of "QGOMm%@\u03A9")
+    SANS_WIDTHS[ch] = 140;
+for (const ch of "W\u2220")
+    SANS_WIDTHS[ch] = 155;
+const SERIF_WIDTHS = {};
+for (const ch of "lij:.,;t")
+    SERIF_WIDTHS[ch] = 47;
+for (const ch of "|")
+    SERIF_WIDTHS[ch] = 37;
+for (const ch of "![]fI/\\")
+    SERIF_WIDTHS[ch] = 55;
+for (const ch of "`-(){}r")
+    SERIF_WIDTHS[ch] = 60;
+for (const ch of "sJ\u00B0")
+    SERIF_WIDTHS[ch] = 68;
+for (const ch of '"zcae?1')
+    SERIF_WIDTHS[ch] = 74;
+for (const ch of "*^kvxy\u03BCbdhnopqug#$_\u03B10123456789")
+    SERIF_WIDTHS[ch] = 85;
+for (const ch of "#$+<>=~FSP")
+    SERIF_WIDTHS[ch] = 95;
+for (const ch of "ELZT")
+    SERIF_WIDTHS[ch] = 105;
+for (const ch of "BRC")
+    SERIF_WIDTHS[ch] = 112;
+for (const ch of "DAwHUKVXYNQGO")
+    SERIF_WIDTHS[ch] = 122;
+for (const ch of "&m\u03A9")
+    SERIF_WIDTHS[ch] = 130;
+for (const ch of "%")
+    SERIF_WIDTHS[ch] = 140;
+for (const ch of "MW@\u2220")
+    SERIF_WIDTHS[ch] = 155;
+function isSerifFont(font) {
+    if (!font)
+        return false;
+    const lc = font.toLowerCase();
+    return (lc.includes("times") || (lc.includes("serif") && !lc.includes("sans")));
+}
+function stringWidth(text, fontsize, font) {
+    const table = isSerifFont(font) ? SERIF_WIDTHS : SANS_WIDTHS;
+    const fallback = isSerifFont(font) ? 60 : 75;
+    let mil = 0;
+    for (const ch of text) {
+        mil += table[ch] ?? fallback;
+    }
+    return (mil * 72) / 1000.0 * (fontsize / 12);
+}
+/**
+ * Estimate text dimensions using per-character width lookup (aligned with
+ * Python `svgtext.text_approx_size`). Returns width and height in points.
+ */
+export function textSize(text, fontsize, font) {
+    if (text === "")
+        return { width: 0, height: 0 };
+    const lines = text.split("\n");
+    let w = 0;
+    for (const line of lines) {
+        w = Math.max(w, stringWidth(line, fontsize, font));
+    }
+    return { width: w, height: lines.length * fontsize };
+}
+function escapeXml(s) {
+    return s
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+export class SvgFigure {
+    static totalClips = 0;
+    bbox;
+    scale;
+    pxwidth;
+    pxheight;
+    elements = [];
+    backgroundColor;
+    showbbox;
+    extraDefs;
+    svgDefs = [];
+    clips = new Map();
+    _groupStack = [];
+    _hasGroups = false;
+    constructor(bbox, opts = {}) {
+        const inchesPerUnit = opts.inchesPerUnit ?? 0.5;
+        const margin = (opts.margin ?? 0.1) + LINE_WIDTH / PT_PER_IN;
+        this.scale = PT_PER_IN * inchesPerUnit;
+        this.showbbox = opts.showbbox ?? false;
+        this.bbox = {
+            xmin: bbox.xmin - margin,
+            ymin: bbox.ymin - margin,
+            xmax: bbox.xmax + margin,
+            ymax: bbox.ymax + margin,
+        };
+        const w = this.bbox.xmax - this.bbox.xmin;
+        const h = this.bbox.ymax - this.bbox.ymin;
+        this.pxwidth = Math.max(5, w * this.scale);
+        this.pxheight = Math.max(5, h * this.scale);
+        this.extraDefs = opts.extraDefs ?? "";
+    }
+    setBbox(bbox) {
+        const margin = 0.1 + LINE_WIDTH / PT_PER_IN;
+        this.bbox = {
+            xmin: bbox.xmin - margin,
+            ymin: bbox.ymin - margin,
+            xmax: bbox.xmax + margin,
+            ymax: bbox.ymax + margin,
+        };
+        const w = this.bbox.xmax - this.bbox.xmin;
+        const h = this.bbox.ymax - this.bbox.ymin;
+        this.pxwidth = Math.max(5, w * this.scale);
+        this.pxheight = Math.max(5, h * this.scale);
+    }
+    /** User coords → SVG px (y-up → y-down). */
+    xform(x, y) {
+        return [x * this.scale, -y * this.scale];
+    }
+    bgcolor(color) {
+        this.backgroundColor = color;
+    }
+    /** Create an SVG hatch `<pattern>` def, returning the pattern id for `fill="url(#id)"`. */
+    hatchpattern(name = "hatch", color = "black", linewidth = 0.5) {
+        const pat = `<pattern id="${name}" patternUnits="userSpaceOnUse" width="4" height="4">`
+            + `<path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" style="stroke:${color}; stroke-width:${linewidth}" />`
+            + `</pattern>`;
+        this.svgDefs.push(pat);
+        return name;
+    }
+    /** Create an SVG `<clipPath>` def from raw path data. */
+    addclip(clipId, pathData) {
+        const clip = `<clipPath id="${clipId}"><path d="${pathData}" /></clipPath>`;
+        this.svgDefs.push(clip);
+    }
+    /** Attach a clip-path to an element by BBox (aligned with Python `Figure.addclip`). */
+    addclipBbox(bboxClip) {
+        const key = `${bboxClip.xmin},${bboxClip.ymin},${bboxClip.xmax},${bboxClip.ymax}`;
+        let clipid;
+        if (this.clips.has(key)) {
+            clipid = this.clips.get(key);
+        }
+        else {
+            clipid = SvgFigure.totalClips++;
+            this.clips.set(key, clipid);
+            const [x0, y0] = this.xform(bboxClip.xmin, bboxClip.ymin);
+            const [x1, y1] = this.xform(bboxClip.xmax, bboxClip.ymax);
+            const rx = Math.min(x0, x1) - 1;
+            const ry = Math.min(y0, y1) - 1;
+            const rw = Math.abs(x1 - x0) + 2;
+            const rh = Math.abs(y1 - y0) + 2;
+            this.svgDefs.push(`<clipPath id="clip${clipid}"><rect x="${fmt(rx)}" y="${fmt(ry)}" width="${fmt(rw)}" height="${fmt(rh)}" /></clipPath>`);
+        }
+        return `url(#clip${clipid})`;
+    }
+    plot(xs, ys, style = {}) {
+        const z = style.zorder ?? 2;
+        const color = style.color ?? "black";
+        const ls = style.ls ?? "-";
+        const lw = style.lw ?? 2;
+        const cap = (style.capstyle ?? "round");
+        const join = (style.joinstyle ?? "round");
+        const fill = typeof style.fill === "string" || style.fill === undefined ? style.fill ?? "none" : "none";
+        let d = "";
+        const [mx0, my0] = this.xform(xs[0], ys[0]);
+        d += `M ${fmt(mx0)} ${fmt(my0)} `;
+        for (let i = 1; i < xs.length; i++) {
+            if (Number.isNaN(xs[i]) || Number.isNaN(ys[i])) {
+                d += "M ";
+                continue;
+            }
+            if (!d.endsWith("M ")) {
+                d += "L ";
+            }
+            const [xx, yy] = this.xform(xs[i], ys[i]);
+            d += `${fmt(xx)},${fmt(yy)} `;
+        }
+        d = d.trim();
+        const st = getSvgStyle({
+            color,
+            ls: ls,
+            lw,
+            capstyle: cap,
+            joinstyle: join,
+            fill: fill,
+        });
+        this.elements.push({ z, xml: `<path d="${d}" style="${escapeXml(st)}"/>` });
+    }
+    circle(cx, cy, radius, style = {}) {
+        const z = style.zorder ?? 1;
+        const [x, y] = this.xform(cx, cy);
+        const r = radius * this.scale;
+        const rawFill = style.fill;
+        const fillNorm = rawFill === undefined || rawFill === null ? "none" : rawFill;
+        const st = getSvgStyle({
+            color: style.color ?? "black",
+            ls: style.ls ?? "-",
+            lw: style.lw ?? 2,
+            fill: fillNorm,
+        });
+        this.elements.push({
+            z,
+            xml: `<circle cx="${fmt(x)}" cy="${fmt(y)}" r="${fmt(r)}" style="${escapeXml(st)}"/>`,
+        });
+    }
+    /** Arrowhead at user-space `xy`, `thetaDeg` is line direction in degrees (see Python `Figure.arrow`). */
+    arrow(xy, thetaDeg, opts = {}) {
+        const arrowwidth = opts.arrowwidth ?? 0.15;
+        const arrowlength = opts.arrowlength ?? 0.25;
+        const color = opts.color ?? "black";
+        const lw = opts.lw ?? 1;
+        const z = opts.zorder ?? 1;
+        const [x, y] = this.xform(xy[0], xy[1]);
+        const dx = (arrowlength / 2) * Math.cos((thetaDeg * Math.PI) / 180) * this.scale;
+        const dy = (arrowlength / 2) * Math.sin((thetaDeg * Math.PI) / 180) * this.scale;
+        const aw = arrowwidth * this.scale;
+        const al = arrowlength * this.scale;
+        const fullen = Math.hypot(dx, dy);
+        const thetaRot = (-Math.atan2(dy, dx) * 180) / Math.PI;
+        const tail = new Point(x - dx, y + dy);
+        const fin1 = new Point(fullen - al, aw / 2).rotate(thetaRot, [0, 0]).add(tail);
+        const fin2 = new Point(fullen - al, -aw / 2).rotate(thetaRot, [0, 0]).add(tail);
+        const headAdj = new Point(x - lw * 2 * Math.cos((thetaRot * Math.PI) / 180), y - lw * 2 * Math.sin((thetaRot * Math.PI) / 180));
+        const st = getSvgStyle({
+            color,
+            lw: 0,
+            capstyle: "butt",
+            joinstyle: "miter",
+            fill: color,
+        });
+        const d = `M ${fmt(headAdj.x)} ${fmt(headAdj.y)} L ${fmt(fin1.x)} ${fmt(fin1.y)} L ${fmt(fin2.x)} ${fmt(fin2.y)} Z`;
+        this.elements.push({ z, xml: `<path d="${d}" style="${escapeXml(st)}"/>` });
+    }
+    text(s, x, y, opts = {}) {
+        if (s === "") {
+            return;
+        }
+        const z = opts.zorder ?? 3;
+        let [x0, y0] = this.xform(x, y);
+        const fontsize = opts.fontsize ?? 14;
+        let font = opts.fontfamily ?? "sans-serif";
+        if (font.toLowerCase() === "sans-serif" || font.toLowerCase() === "arial") {
+            font = "sans";
+        }
+        const valign = opts.valign ?? "center";
+        if (valign === "base") {
+            const nlines = s.split("\n").length;
+            y0 -= (nlines - 1) * fontsize;
+        }
+        const anchor = opts.halign === "left" ? "start" : opts.halign === "right" ? "end" : "middle";
+        const baseline = valign === "top"
+            ? "hanging"
+            : valign === "bottom"
+                ? "ideographic"
+                : "central";
+        const rot = opts.rotation ?? 0;
+        const transform = rot !== 0 ? ` transform="rotate(${fmt(rot)} ${fmt(x0)} ${fmt(y0)})"` : "";
+        const color = opts.color ?? "black";
+        const textY = y0 - fontsize;
+        let textContent;
+        if (opts.textDecoration) {
+            textContent = `<tspan text-decoration="${opts.textDecoration}">${escapeXml(s)}</tspan>`;
+        }
+        else {
+            textContent = escapeXml(s);
+        }
+        let inner = `<text x="${fmt(x0)}" y="${fmt(textY)}" dominant-baseline="${baseline}" fill="${escapeXml(color)}" font-size="${fmt(fontsize)}" font-family="${escapeXml(font)}" text-anchor="${anchor}"${transform}><tspan x="${fmt(x0)}" dy="${fmt(fontsize)}" dominant-baseline="${baseline}">${textContent}</tspan></text>`;
+        if (opts.href) {
+            inner = `<a href="${escapeXml(opts.href)}">${inner}</a>`;
+        }
+        this.elements.push({ z, xml: inner });
+    }
+    /** Polygon / polyline — aligned with Python `Figure.poly`. */
+    poly(verts, opts = {}) {
+        const closed = opts.closed ?? true;
+        const z = opts.zorder ?? 1;
+        const color = opts.color ?? "black";
+        const lw = opts.lw ?? 2;
+        const ls = opts.ls ?? "-";
+        const cap = (opts.capstyle ?? "round");
+        const join = (opts.joinstyle ?? "round");
+        let fill = typeof opts.fill === "string" ? opts.fill : "none";
+        const points = verts
+            .map((p) => {
+            const [px, py] = this.xform(p.x, p.y);
+            return `${fmt(px)},${fmt(py)}`;
+        })
+            .join(" ");
+        const tag = closed ? "polygon" : "polyline";
+        const st = getSvgStyle({
+            color,
+            ls,
+            lw,
+            capstyle: cap,
+            joinstyle: join,
+            fill: fill,
+            hatch: opts.hatch,
+        });
+        this.elements.push({ z, xml: `<${tag} points="${points}" style="${escapeXml(st)}"/>` });
+    }
+    /** Cubic (4 points) or quadratic (3 points) Bézier — aligned with Python `Figure.bezier`. */
+    bezier(pts, opts = {}) {
+        if (pts.length !== 3 && pts.length !== 4) {
+            throw new Error("bezier expects 3 (quadratic) or 4 (cubic) control points");
+        }
+        const z = opts.zorder ?? 1;
+        const color = opts.color ?? "black";
+        const lw = opts.lw ?? 2;
+        const ls = opts.ls ?? "-";
+        const cap = (opts.capstyle ?? "round");
+        const order = pts.length === 4 ? "C" : "Q";
+        const arrow = opts.arrow;
+        const alen = opts.arrowlength ?? 0.25;
+        const aw = opts.arrowwidth ?? 0.15;
+        const adjusted = pts.map((p) => ({ x: p.x, y: p.y }));
+        if (arrow != null) {
+            if (arrow.includes("<")) {
+                const th1 = Math.atan2(pts[0].y - pts[1].y, pts[0].x - pts[1].x);
+                adjusted[0] = {
+                    x: pts[0].x - Math.cos(th1) * alen / 2,
+                    y: pts[0].y - Math.sin(th1) * alen / 2,
+                };
+            }
+            if (arrow.includes(">")) {
+                const last = pts.length - 1;
+                const prev = pts.length - 2;
+                const th2 = Math.atan2(pts[last].y - pts[prev].y, pts[last].x - pts[prev].x);
+                adjusted[last] = {
+                    x: pts[last].x - Math.cos(th2) * alen / 2,
+                    y: pts[last].y - Math.sin(th2) * alen / 2,
+                };
+            }
+        }
+        const lpoints = adjusted.map((p) => {
+            const [px, py] = this.xform(p.x, p.y);
+            return { x: px, y: py };
+        });
+        let d = `M ${fmt(lpoints[0].x)} ${fmt(lpoints[0].y)} ${order}`;
+        for (let i = 1; i < lpoints.length; i++) {
+            d += ` ${fmt(lpoints[i].x)} ${fmt(lpoints[i].y)}`;
+        }
+        const st = getSvgStyle({
+            color,
+            ls: ls,
+            lw,
+            capstyle: cap,
+            fill: "none",
+        });
+        this.elements.push({ z, xml: `<path d="${d}" style="${escapeXml(st)}"/>` });
+        if (arrow != null) {
+            if (arrow.includes("<")) {
+                const dx = pts[0].x - pts[1].x;
+                const dy = pts[0].y - pts[1].y;
+                const th = (Math.atan2(dy, dx) * 180) / Math.PI;
+                this.arrow([pts[0].x, pts[0].y], th, { color, lw: 1, zorder: z, arrowlength: alen, arrowwidth: aw });
+            }
+            else if (arrow.startsWith("o")) {
+                this.circle(pts[0].x, pts[0].y, aw / 2, { color, fill: color, lw: 0, zorder: z });
+            }
+            if (arrow.includes(">")) {
+                const a = pts.length - 1;
+                const b = pts.length - 2;
+                const dx = pts[a].x - pts[b].x;
+                const dy = pts[a].y - pts[b].y;
+                const th = (Math.atan2(dy, dx) * 180) / Math.PI;
+                this.arrow([pts[a].x, pts[a].y], th, { color, lw: 1, zorder: z, arrowlength: alen, arrowwidth: aw });
+            }
+            else if (arrow.endsWith("o")) {
+                const last = pts.length - 1;
+                this.circle(pts[last].x, pts[last].y, aw / 2, { color, fill: color, lw: 0, zorder: z });
+            }
+        }
+    }
+    /** Elliptical arc — aligned with Python `Figure.arc` (subset: no arrow on arc). */
+    arc(center, width, height, opts = {}) {
+        const z = opts.zorder ?? 1;
+        const color = opts.color ?? "black";
+        const lw = opts.lw ?? 2;
+        const ls = opts.ls ?? "-";
+        let fill = opts.fill ?? undefined;
+        if (fill === null || fill === undefined) {
+            fill = "none";
+        }
+        const theta1 = opts.theta1 ?? 0;
+        const theta2 = opts.theta2 ?? 90;
+        let angle = opts.angle ?? 0;
+        const [centerx, centery] = this.xform(center[0], center[1]);
+        let w = width * this.scale;
+        let h = height * this.scale;
+        angle = -angle;
+        let t1 = (-theta1 * Math.PI) / 180;
+        let t2 = (-theta2 * Math.PI) / 180;
+        const anglerad = (angle * Math.PI) / 180;
+        t1 = Math.atan2(w * Math.sin(t1), h * Math.cos(t1));
+        t2 = Math.atan2(w * Math.sin(t2), h * Math.cos(t2));
+        while (t1 < t2) {
+            t1 += 2 * Math.PI;
+        }
+        const startx = centerx +
+            (w / 2) * Math.cos(t2) * Math.cos(anglerad) -
+            (h / 2) * Math.sin(t2) * Math.sin(anglerad);
+        const starty = centery +
+            (w / 2) * Math.cos(t2) * Math.sin(anglerad) +
+            (h / 2) * Math.sin(t2) * Math.cos(anglerad);
+        const endx = centerx +
+            (w / 2) * Math.cos(t1) * Math.cos(anglerad) -
+            (h / 2) * Math.sin(t1) * Math.sin(anglerad);
+        const endy = centery +
+            (w / 2) * Math.cos(t1) * Math.sin(anglerad) +
+            (h / 2) * Math.sin(t1) * Math.cos(anglerad);
+        const dx = endx - startx;
+        const dy = endy - starty;
+        const st = getSvgStyle({
+            color,
+            ls: ls,
+            lw,
+            fill: fill,
+        });
+        if (Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1) {
+            const rotDeg = -(opts.angle ?? 0);
+            const tr = rotDeg !== 0
+                ? ` transform="rotate(${fmt(rotDeg)} ${fmt(centerx)} ${fmt(centery)})"`
+                : "";
+            this.elements.push({
+                z,
+                xml: `<ellipse cx="${fmt(centerx)}" cy="${fmt(centery)}" rx="${fmt(w / 2)}" ry="${fmt(h / 2)}"${tr} style="${escapeXml(st)}"/>`,
+            });
+        }
+        else {
+            const flags = Math.abs(t2 - t1) >= Math.PI ? "1 1" : "0 1";
+            const d = `M ${fmt(startx)} ${fmt(starty)} a ${fmt(w / 2)} ${fmt(h / 2)} ${fmt(angle)} ${flags} ${fmt(dx)} ${fmt(dy)}`;
+            this.elements.push({ z, xml: `<path d="${d}" style="${escapeXml(st)}"/>` });
+        }
+        if (opts.arrow) {
+            const arrowWidth = opts.arrowwidth ?? 0.15;
+            const arrowLength = opts.arrowlength ?? 0.25;
+            const uAngle = opts.angle ?? 0;
+            const uT1 = opts.theta1 ?? 0;
+            const uT2 = opts.theta2 ?? 90;
+            const ar = uAngle * Math.PI / 180;
+            const xc2 = Math.cos(uT2 * Math.PI / 180);
+            const yc2 = Math.sin(uT2 * Math.PI / 180);
+            const th2 = Math.atan2((width / height) * yc2, xc2) * 180 / Math.PI;
+            const xc1 = Math.cos(uT1 * Math.PI / 180);
+            const yc1 = Math.sin(uT1 * Math.PI / 180);
+            const th1 = Math.atan2((width / height) * yc1, xc1) * 180 / Math.PI;
+            const rotPt = (px, py) => {
+                if (uAngle === 0)
+                    return [px, py];
+                const rx = px - center[0], ry = py - center[1];
+                return [center[0] + rx * Math.cos(ar) - ry * Math.sin(ar),
+                    center[1] + rx * Math.sin(ar) + ry * Math.cos(ar)];
+            };
+            const rotVec = (vx, vy) => {
+                if (uAngle === 0)
+                    return [vx, vy];
+                return [vx * Math.cos(ar) - vy * Math.sin(ar),
+                    vx * Math.sin(ar) + vy * Math.cos(ar)];
+            };
+            const dir = opts.arrow;
+            if (dir === "ccw" || dir === "end" || dir === "both") {
+                const adx = Math.cos((th2 + 90) * Math.PI / 180) * arrowLength;
+                const ady = Math.sin((th2 + 90) * Math.PI / 180) * arrowLength;
+                const ep = rotPt(center[0] + width / 2 * Math.cos(th2 * Math.PI / 180), center[1] + height / 2 * Math.sin(th2 * Math.PI / 180));
+                const da = rotVec(adx, ady);
+                const theta = Math.atan2(da[1], da[0]) * 180 / Math.PI;
+                this.arrow([ep[0] + da[0], ep[1] + da[1]], theta, {
+                    arrowwidth: arrowWidth, arrowlength: arrowLength, color, lw: 1, zorder: z,
+                });
+            }
+            if (dir === "cw" || dir === "start" || dir === "both") {
+                const adx = -Math.cos((th1 + 90) * Math.PI / 180) * arrowLength;
+                const ady = -Math.sin((th1 + 90) * Math.PI / 180) * arrowLength;
+                const ep = rotPt(center[0] + width / 2 * Math.cos(th1 * Math.PI / 180), center[1] + height / 2 * Math.sin(th1 * Math.PI / 180));
+                const da = rotVec(adx, ady);
+                const theta = Math.atan2(da[1], da[0]) * 180 / Math.PI;
+                this.arrow([ep[0] + da[0], ep[1] + da[1]], theta, {
+                    arrowwidth: arrowWidth, arrowlength: arrowLength, color, lw: 1, zorder: z,
+                });
+            }
+        }
+    }
+    /** Raw SVG path `d` fragments — aligned with Python `Figure.path`. */
+    path(parts, opts = {}) {
+        const z = opts.zorder ?? 1;
+        const color = opts.color ?? "black";
+        const lw = opts.lw ?? 2;
+        const ls = opts.ls ?? "-";
+        const cap = (opts.capstyle ?? "round");
+        const join = (opts.joinstyle ?? "round");
+        const fill = opts.fill ?? "none";
+        const dstrs = [];
+        for (const p of parts) {
+            if (typeof p === "string") {
+                dstrs.push(p);
+            }
+            else {
+                const [px, py] = this.xform(p.x, p.y);
+                dstrs.push(fmt(px), fmt(py));
+            }
+        }
+        const st = getSvgStyle({
+            color,
+            ls: ls,
+            lw,
+            capstyle: cap,
+            joinstyle: join,
+            fill,
+        });
+        this.elements.push({ z, xml: `<path d="${dstrs.join(" ")}" style="${escapeXml(st)}"/>` });
+    }
+    image(imageData, xy, width, height, opts = {}) {
+        const z = opts.zorder ?? 1;
+        const rotate = opts.rotate ?? 0;
+        const w = width * this.scale;
+        const h = height * this.scale;
+        const [x0, y0raw] = this.xform(xy[0], xy[1]);
+        const y0 = y0raw - h;
+        const href = imageData.startsWith("data:")
+            ? imageData
+            : `data:image/${opts.imgfmt ?? "png"};base64,${imageData}`;
+        const rotAttr = rotate !== 0
+            ? ` transform="rotate(${fmt(-rotate)} ${fmt(x0)} ${fmt(y0 + h)})"`
+            : "";
+        this.elements.push({
+            z,
+            xml: `<image x="${fmt(x0)}" y="${fmt(y0)}" width="${fmt(w)}" height="${fmt(h)}" href="${escapeXml(href)}"${rotAttr}/>`,
+        });
+    }
+    mathText(html, x, y, opts) {
+        const z = opts.zorder ?? 3;
+        const [x0, y0] = this.xform(x, y);
+        const fontsize = opts.fontsize ?? 14;
+        const color = opts.color ?? "black";
+        const w = opts.width;
+        const h = opts.height;
+        const halign = opts.halign ?? "center";
+        const valign = opts.valign ?? "center";
+        let foX = x0;
+        let foY = y0;
+        if (halign === "center")
+            foX -= w / 2;
+        else if (halign === "right")
+            foX -= w;
+        if (valign === "center")
+            foY -= h / 2;
+        else if (valign === "bottom")
+            foY -= h;
+        const rot = opts.rotation ?? 0;
+        const transform = rot !== 0 ? ` transform="rotate(${fmt(rot)} ${fmt(x0)} ${fmt(y0)})"` : "";
+        const justify = halign === "left" ? "flex-start" : halign === "right" ? "flex-end" : "center";
+        const align = valign === "top" ? "flex-start" : valign === "bottom" ? "flex-end" : "center";
+        const fo = `<foreignObject x="${fmt(foX)}" y="${fmt(foY)}" width="${fmt(w)}" height="${fmt(h)}"${transform}>` +
+            `<div xmlns="http://www.w3.org/1999/xhtml" style="color:${escapeXml(color)};font-size:${fontsize}px;` +
+            `display:flex;align-items:${align};justify-content:${justify};width:100%;height:100%;">` +
+            html +
+            `</div></foreignObject>`;
+        this.elements.push({ z, xml: fo });
+    }
+    /** Begin an SVG `<g>` group; elements added after this call will be wrapped on `endGroup()`. */
+    beginGroup(attrs, title) {
+        this._hasGroups = true;
+        this._groupStack.push({ startIndex: this.elements.length, attrs, title });
+    }
+    /** End the most recent `<g>` group opened by `beginGroup()`. */
+    endGroup() {
+        const frame = this._groupStack.pop();
+        if (!frame)
+            throw new Error("endGroup called without matching beginGroup");
+        const grouped = this.elements.splice(frame.startIndex);
+        if (grouped.length === 0) {
+            const attrStr = Object.entries(frame.attrs)
+                .map(([k, v]) => `${k}="${escapeXml(v)}"`)
+                .join(" ");
+            const titleTag = frame.title ? `<title>${escapeXml(frame.title)}</title>` : "";
+            this.elements.push({ z: 0, xml: `<g ${attrStr}>${titleTag}</g>` });
+            return;
+        }
+        let minZ = grouped[0].z;
+        for (let i = 1; i < grouped.length; i++) {
+            if (grouped[i].z < minZ)
+                minZ = grouped[i].z;
+        }
+        const innerXml = grouped.map((e) => e.xml).join("");
+        const attrStr = Object.entries(frame.attrs)
+            .map(([k, v]) => `${k}="${escapeXml(v)}"`)
+            .join(" ");
+        const titleTag = frame.title ? `<title>${escapeXml(frame.title)}</title>` : "";
+        this.elements.push({ z: minZ, xml: `<g ${attrStr}>${titleTag}${innerXml}</g>` });
+    }
+    /** Sorted SVG children inner XML. */
+    toSvgInnerXml() {
+        return [...this.elements]
+            .sort((a, b) => a.z - b.z)
+            .map((e) => e.xml)
+            .join("");
+    }
+    toSvgString() {
+        const x0 = this.bbox.xmin * this.scale;
+        const y0 = -this.bbox.ymax * this.scale;
+        const w = this.pxwidth;
+        const h = this.pxheight;
+        const bg = this.backgroundColor ? ` style="background-color:${escapeXml(this.backgroundColor)}"` : "";
+        let allDefs = this.extraDefs + this.svgDefs.join("");
+        if (this._hasGroups) {
+            allDefs += '<style>'
+                + '.sd-el{cursor:pointer;transition:filter .15s ease}'
+                + '.sd-el:hover path,.sd-el:hover polyline,.sd-el:hover polygon,.sd-el:hover circle,.sd-el:hover ellipse{filter:drop-shadow(0 0 3px rgba(66,133,244,.6))}'
+                + '.sd-el.sd-selected path,.sd-el.sd-selected polyline,.sd-el.sd-selected polygon,.sd-el.sd-selected circle,.sd-el.sd-selected ellipse{stroke:#4285f4;filter:drop-shadow(0 0 4px rgba(66,133,244,.8))}'
+                + '</style>';
+        }
+        const defs = allDefs ? `<defs>${allDefs}</defs>` : "";
+        const inner = this.toSvgInnerXml();
+        return `<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" width="${fmt(w)}pt" height="${fmt(h)}pt" viewBox="${fmt(x0)} ${fmt(y0)} ${fmt(w)} ${fmt(h)}"${bg}>${defs}${inner}</svg>`;
+    }
+}
+//# sourceMappingURL=figure.js.map