@skillpet/circuit 0.5.0 → 0.5.2

package/dist/svg/figure.js

@@ -1,634 +0,0 @@
-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