@jbrowse/svgcanvas 6.4.2 → 7.0.0

package/dist/index.js

@@ -9,50 +9,13 @@
  * Copyright (c) 2014 Gliffy Inc.
  * Copyright (c) 2021 Zeno Zeng
  *
- * Vendored and converted to ESM/TypeScript for pure ESM compatibility.
+ * Vendored and converted to ESM/TypeScript for pure ESM compatibility, and cut
+ * down to the drawing calls the renderers make: what a multiple sequence
+ * alignment needs is rectangles, paths, arcs and a great many glyphs. Gradients,
+ * patterns, clipping, rotation, bezier curves, stroked text, shadows and image
+ * drawing are gone with the state they carried.
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-function toString(obj) {
-    if (!obj) {
-        return obj;
-    }
-    if (typeof obj === 'string') {
-        return obj;
-    }
-    return obj + '';
-}
-function format(str, args) {
-    const keys = Object.keys(args);
-    for (const key of keys) {
-        str = str.replace(new RegExp('\\{' + key + '\\}', 'gi'), args[key]);
-    }
-    return str;
-}
-function randomString(holder) {
-    if (!holder) {
-        throw new Error('cannot create a random attribute name for an undefined object');
-    }
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
-    let randomstring = '';
-    do {
-        randomstring = '';
-        for (let i = 0; i < 12; i++) {
-            randomstring += chars[Math.floor(Math.random() * chars.length)];
-        }
-    } while (holder[randomstring]);
-    return randomstring;
-}
-function createNamedToNumberedLookup(items, radix = 10) {
-    const lookup = {};
-    const parts = items.split(',');
-    for (let i = 0; i < parts.length; i += 2) {
-        const entity = '&' + parts[i + 1] + ';';
-        const base10 = parseInt(parts[i], radix);
-        lookup[entity] = '&#' + base10 + ';';
-    }
-    lookup['\\xa0'] = '&#160;';
-    return lookup;
-}
 function getTextAnchor(textAlign) {
     const mapping = {
         left: 'start',
@@ -81,38 +44,12 @@ function getDominantBaseline(textBaseline) {
 const TEXT_ATTR_DEFAULTS = {
     'font-style': 'normal',
     'font-weight': 'normal',
-    'font-variant': 'normal',
     // the initial value is `auto`, which resolves to the alphabetic baseline
     'dominant-baseline': 'alphabetic',
 };
 function omitDefault(attr, value) {
     return value === TEXT_ATTR_DEFAULTS[attr] ? undefined : value;
 }
-const namedEntities = createNamedToNumberedLookup('50,nbsp,51,iexcl,52,cent,53,pound,54,curren,55,yen,56,brvbar,57,sect,58,uml,59,copy,' +
-    '5a,ordf,5b,laquo,5c,not,5d,shy,5e,reg,5f,macr,5g,deg,5h,plusmn,5i,sup2,5j,sup3,5k,acute,' +
-    '5l,micro,5m,para,5n,middot,5o,cedil,5p,sup1,5q,ordm,5r,raquo,5s,frac14,5t,frac12,5u,frac34,' +
-    '5v,iquest,60,Agrave,61,Aacute,62,Acirc,63,Atilde,64,Auml,65,Aring,66,AElig,67,Ccedil,' +
-    '68,Egrave,69,Eacute,6a,Ecirc,6b,Euml,6c,Igrave,6d,Iacute,6e,Icirc,6f,Iuml,6g,ETH,6h,Ntilde,' +
-    '6i,Ograve,6j,Oacute,6k,Ocirc,6l,Otilde,6m,Ouml,6n,times,6o,Oslash,6p,Ugrave,6q,Uacute,' +
-    '6r,Ucirc,6s,Uuml,6t,Yacute,6u,THORN,6v,szlig,70,agrave,71,aacute,72,acirc,73,atilde,74,auml,' +
-    '75,aring,76,aelig,77,ccedil,78,egrave,79,eacute,7a,ecirc,7b,euml,7c,igrave,7d,iacute,7e,icirc,' +
-    '7f,iuml,7g,eth,7h,ntilde,7i,ograve,7j,oacute,7k,ocirc,7l,otilde,7m,ouml,7n,divide,7o,oslash,' +
-    '7p,ugrave,7q,uacute,7r,ucirc,7s,uuml,7t,yacute,7u,thorn,7v,yuml,ci,fnof,sh,Alpha,si,Beta,' +
-    'sj,Gamma,sk,Delta,sl,Epsilon,sm,Zeta,sn,Eta,so,Theta,sp,Iota,sq,Kappa,sr,Lambda,ss,Mu,' +
-    'st,Nu,su,Xi,sv,Omicron,t0,Pi,t1,Rho,t3,Sigma,t4,Tau,t5,Upsilon,t6,Phi,t7,Chi,t8,Psi,' +
-    't9,Omega,th,alpha,ti,beta,tj,gamma,tk,delta,tl,epsilon,tm,zeta,tn,eta,to,theta,tp,iota,' +
-    'tq,kappa,tr,lambda,ts,mu,tt,nu,tu,xi,tv,omicron,u0,pi,u1,rho,u2,sigmaf,u3,sigma,u4,tau,' +
-    'u5,upsilon,u6,phi,u7,chi,u8,psi,u9,omega,uh,thetasym,ui,upsih,um,piv,812,bull,816,hellip,' +
-    '81i,prime,81j,Prime,81u,oline,824,frasl,88o,weierp,88h,image,88s,real,892,trade,89l,alefsym,' +
-    '8cg,larr,8ch,uarr,8ci,rarr,8cj,darr,8ck,harr,8dl,crarr,8eg,lArr,8eh,uArr,8ei,rArr,8ej,dArr,' +
-    '8ek,hArr,8g0,forall,8g2,part,8g3,exist,8g5,empty,8g7,nabla,8g8,isin,8g9,notin,8gb,ni,8gf,prod,' +
-    '8gh,sum,8gi,minus,8gn,lowast,8gq,radic,8gt,prop,8gu,infin,8h0,ang,8h7,and,8h8,or,8h9,cap,8ha,cup,' +
-    '8hb,int,8hk,there4,8hs,sim,8i5,cong,8i8,asymp,8j0,ne,8j1,equiv,8j4,le,8j5,ge,8k2,sub,8k3,sup,8k4,' +
-    'nsub,8k6,sube,8k7,supe,8kl,oplus,8kn,otimes,8l5,perp,8m5,sdot,8o8,lceil,8o9,rceil,8oa,lfloor,8ob,' +
-    'rfloor,8p9,lang,8pa,rang,9ea,loz,9j0,spades,9j3,clubs,9j5,hearts,9j6,diams,ai,OElig,aj,oelig,b0,' +
-    'Scaron,b1,scaron,bo,Yuml,m6,circ,ms,tilde,802,ensp,803,emsp,809,thinsp,80c,zwnj,80d,zwj,80e,lrm,' +
-    '80f,rlm,80j,ndash,80k,mdash,80o,lsquo,80p,rsquo,80q,sbquo,80s,ldquo,80t,rdquo,80u,bdquo,810,dagger,' +
-    '811,Dagger,81g,permil,81p,lsaquo,81q,rsaquo,85c,euro', 32);
 const STYLES = {
     strokeStyle: {
         svgAttr: 'stroke',
@@ -126,111 +63,40 @@ const STYLES = {
         svg: null,
         apply: 'fill',
     },
-    lineCap: {
-        svgAttr: 'stroke-linecap',
-        canvas: 'butt',
-        svg: 'butt',
-        apply: 'stroke',
-    },
-    lineJoin: {
-        svgAttr: 'stroke-linejoin',
-        canvas: 'miter',
-        svg: 'miter',
-        apply: 'stroke',
-    },
-    miterLimit: {
-        svgAttr: 'stroke-miterlimit',
-        canvas: 10,
-        svg: 4,
-        apply: 'stroke',
-    },
     lineWidth: {
         svgAttr: 'stroke-width',
         canvas: 1,
         svg: 1,
         apply: 'stroke',
     },
-    globalAlpha: {
-        svgAttr: 'opacity',
-        canvas: 1,
-        svg: 1,
-        apply: 'fill stroke',
-    },
     font: {
         canvas: '10px sans-serif',
     },
-    shadowColor: {
-        canvas: '#000000',
-    },
-    shadowOffsetX: {
-        canvas: 0,
-    },
-    shadowOffsetY: {
-        canvas: 0,
-    },
-    shadowBlur: {
-        canvas: 0,
-    },
     textAlign: {
         canvas: 'start',
     },
     textBaseline: {
         canvas: 'alphabetic',
     },
+    // null rather than an empty array: the canvas default is "no dashes", which is
+    // also the svg default, and the two have to compare equal or every stroke
+    // carries an empty stroke-dasharray
     lineDash: {
         svgAttr: 'stroke-dasharray',
-        canvas: [],
+        canvas: null,
         svg: null,
         apply: 'stroke',
     },
 };
-class CanvasGradient {
-    __root;
-    __ctx;
-    constructor(gradientNode, ctx) {
-        this.__root = gradientNode;
-        this.__ctx = ctx;
-    }
-    addColorStop(offset, color) {
-        const stop = this.__ctx.__createElement('stop');
-        stop.setAttribute('offset', String(offset));
-        if (toString(color).includes('rgba')) {
-            const regex = /rgba\(\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
-            const matches = regex.exec(color);
-            if (matches) {
-                stop.setAttribute('stop-color', format('rgb({r},{g},{b})', {
-                    r: matches[1],
-                    g: matches[2],
-                    b: matches[3],
-                }));
-                stop.setAttribute('stop-opacity', matches[4]);
-            }
-        }
-        else {
-            stop.setAttribute('stop-color', toString(color));
-        }
-        this.__root.appendChild(stop);
-    }
-}
-class CanvasPattern {
-    __root;
-    __ctx;
-    constructor(pattern, ctx) {
-        this.__root = pattern;
-        this.__ctx = ctx;
-    }
-}
+const rgbaRegex = /rgba\(\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\s*,\s*(\d?\.?\d*)\s*\)/i;
 export class Context {
     width;
     height;
-    enableMirroring;
     canvas;
     __document;
     __ctx;
     __canvas;
     __root;
-    __ids;
-    __defs;
     __currentElement;
     __styleStack;
     __groupStack;
@@ -238,48 +104,20 @@ export class Context {
     __currentPosition;
     __transformMatrix;
     __transformMatrixStack;
-    __currentElementsToStyle;
-    __options;
-    __id;
-    __fontUnderline;
-    __fontHref;
+    // the parsed font, keyed by the `font` string that produced it: parsing costs
+    // a DOM element and a CSS parse, and a text-heavy export asks per glyph
+    __fontCache = new Map();
     // Style properties
     strokeStyle;
     fillStyle;
-    lineCap;
-    lineJoin;
-    miterLimit;
     lineWidth;
-    globalAlpha;
     font;
-    shadowColor;
-    shadowOffsetX;
-    shadowOffsetY;
-    shadowBlur;
     textAlign;
     textBaseline;
     lineDash;
-    constructor(o, height) {
-        const defaultOptions = { width: 500, height: 500, enableMirroring: false };
-        let options;
-        if (typeof o === 'number' && height !== undefined) {
-            options = { ...defaultOptions, width: o, height };
-        }
-        else if (!o) {
-            options = defaultOptions;
-        }
-        else if (typeof o === 'object') {
-            options = o;
-        }
-        else {
-            options = defaultOptions;
-        }
-        this.width = options.width || defaultOptions.width;
-        this.height = options.height || defaultOptions.height;
-        this.enableMirroring =
-            options.enableMirroring !== undefined
-                ? options.enableMirroring
-                : defaultOptions.enableMirroring;
+    constructor(width, height, options = {}) {
+        this.width = width;
+        this.height = height;
         this.canvas = this;
         this.__document = options.document || document;
         if (options.ctx) {
@@ -295,31 +133,28 @@ export class Context {
         this.__root = this.__document.createElementNS('http://www.w3.org/2000/svg', 'svg');
         this.__root.setAttribute('version', '1.1');
         this.__root.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-        this.__root.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink');
-        this.__root.setAttribute('width', String(this.width));
-        this.__root.setAttribute('height', String(this.height));
-        this.__ids = {};
-        this.__defs = this.__document.createElementNS('http://www.w3.org/2000/svg', 'defs');
-        this.__root.appendChild(this.__defs);
+        this.__root.setAttribute('width', String(width));
+        this.__root.setAttribute('height', String(height));
         this.__currentElement = this.__document.createElementNS('http://www.w3.org/2000/svg', 'g');
         this.__root.appendChild(this.__currentElement);
         this.__currentDefaultPath = '';
         this.__currentPosition = {};
         this.__transformMatrix = new DOMMatrix();
         this.resetTransform();
-        this.__options = options;
-        this.__id = Math.random().toString(16).substring(2, 8);
     }
     __createElement(elementName, properties = {}, resetFill) {
         const element = this.__document.createElementNS('http://www.w3.org/2000/svg', elementName);
         if (resetFill) {
+            // a placeholder: whichever of fill()/stroke() paints this element
+            // overwrites its own, and __applyStyleToCurrentElement drops the other
+            // when it is the svg default anyway
             element.setAttribute('fill', 'none');
             element.setAttribute('stroke', 'none');
         }
         for (const key of Object.keys(properties)) {
             // an unset property means "no such attribute", not the string
-            // "undefined". __applyText passes text-decoration through unconditionally,
-            // so without this every glyph in an export carries
+            // "undefined". __applyText passes optional attributes through
+            // unconditionally, so without this every glyph in an export carries
             // text-decoration="undefined" -- invalid, and ~28 wasted bytes per letter
             const value = properties[key];
             if (value !== undefined && value !== null) {
@@ -347,77 +182,60 @@ export class Context {
         }
         return styleState;
     }
+    /**
+     * A translation is what an element's own x/y already say, and repeating it as
+     * a matrix costs ~35 bytes on every glyph of an alignment. Anything else --
+     * the scale a sequence-logo letter is stretched by -- still needs the matrix.
+     */
     __applyTransformation(element, matrix) {
         const { a, b, c, d, e, f } = matrix || this.getTransform();
+        if (a === 1 &&
+            b === 0 &&
+            c === 0 &&
+            d === 1 &&
+            element.hasAttribute('x') &&
+            element.hasAttribute('y')) {
+            if (e !== 0) {
+                element.setAttribute('x', String(Number(element.getAttribute('x')) + e));
+            }
+            if (f !== 0) {
+                element.setAttribute('y', String(Number(element.getAttribute('y')) + f));
+            }
+            return;
+        }
         element.setAttribute('transform', `matrix(${a} ${b} ${c} ${d} ${e} ${f})`);
     }
     __applyStyleToCurrentElement(type) {
-        let currentElement = this.__currentElement;
-        const currentStyleGroup = this.__currentElementsToStyle;
-        if (currentStyleGroup) {
-            currentElement.setAttribute(type, '');
-            currentElement = currentStyleGroup.element;
-            for (const node of currentStyleGroup.children) {
-                node.setAttribute(type, '');
-            }
-        }
-        const keys = Object.keys(STYLES);
-        for (const key of keys) {
+        const currentElement = this.__currentElement;
+        for (const key of Object.keys(STYLES)) {
             const style = STYLES[key];
             const value = this[key];
-            if (style.apply) {
-                if (value instanceof CanvasPattern) {
-                    if (value.__ctx) {
-                        for (const node of Array.from(value.__ctx.__defs.childNodes)) {
-                            const id = node.getAttribute('id');
-                            if (id) {
-                                this.__ids[id] = id;
-                                this.__defs.appendChild(node);
-                            }
-                        }
-                    }
-                    currentElement.setAttribute(style.apply, format('url(#{id})', { id: value.__root.getAttribute('id') }));
-                }
-                else if (value instanceof CanvasGradient) {
-                    currentElement.setAttribute(style.apply, format('url(#{id})', { id: value.__root.getAttribute('id') }));
-                }
-                else if (style.apply.includes(type) && style.svg !== value) {
-                    if ((style.svgAttr === 'stroke' || style.svgAttr === 'fill') &&
-                        value &&
-                        value.includes('rgba')) {
-                        const regex = /rgba\(\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\s*,\s*(\d*\.?\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
-                        const matches = regex.exec(value);
-                        if (matches) {
-                            currentElement.setAttribute(style.svgAttr, format('rgb({r},{g},{b})', {
-                                r: matches[1],
-                                g: matches[2],
-                                b: matches[3],
-                            }));
-                            let opacity = Number(matches[4]);
-                            const globalAlpha = this.globalAlpha;
-                            if (globalAlpha != null) {
-                                opacity *= globalAlpha;
-                            }
-                            currentElement.setAttribute(style.svgAttr + '-opacity', String(opacity));
-                        }
-                    }
-                    else {
-                        let attr = style.svgAttr;
-                        let val = value;
-                        if (key === 'globalAlpha') {
-                            attr = type + '-' + style.svgAttr;
-                            if (currentElement.getAttribute(attr)) {
-                                continue;
-                            }
-                        }
-                        else if (key === 'lineWidth') {
-                            const scale = this.__getTransformScale();
-                            val = value * Math.max(scale.x, scale.y);
-                        }
-                        currentElement.setAttribute(attr, val);
-                    }
-                }
+            if (!style.apply?.includes(type) || style.svg === value) {
+                continue;
+            }
+            const matches = (style.svgAttr === 'stroke' || style.svgAttr === 'fill') &&
+                typeof value === 'string' &&
+                value.includes('rgba')
+                ? rgbaRegex.exec(value)
+                : null;
+            if (matches) {
+                // SVG has no rgba(): the alpha belongs in its own -opacity attribute
+                currentElement.setAttribute(style.svgAttr, `rgb(${matches[1]},${matches[2]},${matches[3]})`);
+                currentElement.setAttribute(`${style.svgAttr}-opacity`, matches[4]);
+            }
+            else if (key === 'lineWidth') {
+                const scale = this.__getTransformScale();
+                currentElement.setAttribute(style.svgAttr, String(value * Math.max(scale.x, scale.y)));
             }
+            else {
+                currentElement.setAttribute(style.svgAttr, value);
+            }
+        }
+        // a filled element with no stroke does not have to say so: `none` is what
+        // svg assumes. The reverse is not true -- an unstroked fill defaults to
+        // black -- so a stroked element keeps its fill="none"
+        if (type === 'fill' && currentElement.getAttribute('stroke') === 'none') {
+            currentElement.removeAttribute('stroke');
         }
     }
     __closestGroupOrSvg(node) {
@@ -427,22 +245,6 @@ export class Context {
         }
         return this.__closestGroupOrSvg(node.parentNode);
     }
-    getSerializedSvg(fixNamedEntities) {
-        let serialized = new XMLSerializer().serializeToString(this.__root);
-        const xmlns = /xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi;
-        if (xmlns.test(serialized)) {
-            serialized = serialized.replace('xmlns="http://www.w3.org/2000/svg', 'xmlns:xlink="http://www.w3.org/1999/xlink');
-        }
-        if (fixNamedEntities) {
-            for (const key of Object.keys(namedEntities)) {
-                const regexp = new RegExp(key, 'gi');
-                if (regexp.test(serialized)) {
-                    serialized = serialized.replace(regexp, namedEntities[key]);
-                }
-            }
-        }
-        return serialized;
-    }
     getSvg() {
         return this.__root;
     }
@@ -452,8 +254,7 @@ export class Context {
         this.__groupStack.push(parent);
         parent.appendChild(group);
         this.__currentElement = group;
-        const style = this.__getStyleState();
-        this.__styleStack.push(style);
+        this.__styleStack.push(this.__getStyleState());
         if (!this.__transformMatrixStack) {
             this.__transformMatrixStack = [];
         }
@@ -461,12 +262,10 @@ export class Context {
     }
     restore() {
         this.__currentElement = this.__groupStack.pop();
-        this.__currentElementsToStyle = undefined;
         if (!this.__currentElement) {
-            this.__currentElement = this.__root.childNodes[1];
+            this.__currentElement = this.__root.childNodes[0];
         }
-        const state = this.__styleStack.pop();
-        this.__applyStyleState(state);
+        this.__applyStyleState(this.__styleStack.pop());
         if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) {
             this.setTransform(this.__transformMatrixStack.pop());
         }
@@ -475,14 +274,12 @@ export class Context {
         this.__currentDefaultPath = '';
         this.__currentPosition = {};
         const path = this.__createElement('path', {}, true);
-        const parent = this.__closestGroupOrSvg();
-        parent.appendChild(path);
+        this.__closestGroupOrSvg().appendChild(path);
         this.__currentElement = path;
     }
     __applyCurrentDefaultPath() {
-        const currentElement = this.__currentElement;
-        if (currentElement.nodeName === 'path') {
-            currentElement.setAttribute('d', this.__currentDefaultPath);
+        if (this.__currentElement.nodeName === 'path') {
+            this.__currentElement.setAttribute('d', this.__currentDefaultPath);
         }
     }
     __addPathCommand(command) {
@@ -494,10 +291,8 @@ export class Context {
             this.beginPath();
         }
         this.__currentPosition = { x, y };
-        this.__addPathCommand(format('M {x} {y}', {
-            x: this.__matrixTransform(x, y).x,
-            y: this.__matrixTransform(x, y).y,
-        }));
+        const p = this.__matrixTransform(x, y);
+        this.__addPathCommand(`M ${p.x} ${p.y}`);
     }
     closePath() {
         if (this.__currentDefaultPath) {
@@ -506,171 +301,108 @@ export class Context {
     }
     lineTo(x, y) {
         this.__currentPosition = { x, y };
-        if (this.__currentDefaultPath.includes('M')) {
-            this.__addPathCommand(format('L {x} {y}', {
-                x: this.__matrixTransform(x, y).x,
-                y: this.__matrixTransform(x, y).y,
-            }));
-        }
-        else {
-            this.__addPathCommand(format('M {x} {y}', {
-                x: this.__matrixTransform(x, y).x,
-                y: this.__matrixTransform(x, y).y,
-            }));
-        }
-    }
-    bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-        this.__currentPosition = { x, y };
-        this.__addPathCommand(format('C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}', {
-            cp1x: this.__matrixTransform(cp1x, cp1y).x,
-            cp1y: this.__matrixTransform(cp1x, cp1y).y,
-            cp2x: this.__matrixTransform(cp2x, cp2y).x,
-            cp2y: this.__matrixTransform(cp2x, cp2y).y,
-            x: this.__matrixTransform(x, y).x,
-            y: this.__matrixTransform(x, y).y,
-        }));
+        const p = this.__matrixTransform(x, y);
+        this.__addPathCommand(this.__currentDefaultPath.includes('M')
+            ? `L ${p.x} ${p.y}`
+            : `M ${p.x} ${p.y}`);
     }
     quadraticCurveTo(cpx, cpy, x, y) {
         this.__currentPosition = { x, y };
-        this.__addPathCommand(format('Q {cpx} {cpy} {x} {y}', {
-            cpx: this.__matrixTransform(cpx, cpy).x,
-            cpy: this.__matrixTransform(cpx, cpy).y,
-            x: this.__matrixTransform(x, y).x,
-            y: this.__matrixTransform(x, y).y,
-        }));
+        const cp = this.__matrixTransform(cpx, cpy);
+        const p = this.__matrixTransform(x, y);
+        this.__addPathCommand(`Q ${cp.x} ${cp.y} ${p.x} ${p.y}`);
     }
-    stroke() {
-        if (this.__currentElement.nodeName === 'path') {
-            this.__currentElement.setAttribute('paint-order', 'fill stroke markers');
+    // paint-order only says something when the element carries both a fill and a
+    // stroke, which is the collapsed-clade triangle and nothing else
+    __applyPaintOrder(order, other) {
+        const current = this.__currentElement;
+        if (current.nodeName === 'path' &&
+            current.hasAttribute(other) &&
+            current.getAttribute(other) !== 'none') {
+            current.setAttribute('paint-order', order);
         }
+    }
+    stroke() {
+        this.__applyPaintOrder('fill stroke markers', 'fill');
         this.__applyCurrentDefaultPath();
         this.__applyStyleToCurrentElement('stroke');
     }
     fill() {
-        if (this.__currentElement.nodeName === 'path') {
-            this.__currentElement.setAttribute('paint-order', 'stroke fill markers');
-        }
+        this.__applyPaintOrder('stroke fill markers', 'stroke');
         this.__applyCurrentDefaultPath();
         this.__applyStyleToCurrentElement('fill');
     }
-    rect(x, y, width, height) {
-        if (this.__currentElement.nodeName !== 'path') {
-            this.beginPath();
-        }
-        this.moveTo(x, y);
-        this.lineTo(x + width, y);
-        this.lineTo(x + width, y + height);
-        this.lineTo(x, y + height);
-        this.lineTo(x, y);
-        this.closePath();
-    }
-    __clearCanvas() {
-        const rootGroup = this.__root.childNodes[1];
-        this.__root.removeChild(rootGroup);
-        this.__currentElement = this.__document.createElementNS('http://www.w3.org/2000/svg', 'g');
-        this.__root.appendChild(this.__currentElement);
-        this.__groupStack = [];
-    }
+    // A fill that happens to cover the context is still a fill: it paints over
+    // what is under it, exactly as the canvas would. Treating it as a clear threw
+    // the drawing away instead -- a full-width highlight band over an alignment
+    // took the export from 124 letters to 4.
     fillRect(x, y, width, height) {
-        const { a, b, c, d, e, f } = this.getTransform();
-        if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
-            if (x === 0 &&
-                y === 0 &&
-                width === this.width &&
-                height === this.height) {
-                this.__clearCanvas();
-            }
-        }
         const rect = this.__createElement('rect', { x, y, width, height }, true);
-        const parent = this.__closestGroupOrSvg();
-        parent.appendChild(rect);
+        this.__closestGroupOrSvg().appendChild(rect);
         this.__currentElement = rect;
         this.__applyTransformation(rect);
         this.__applyStyleToCurrentElement('fill');
     }
     strokeRect(x, y, width, height) {
         const rect = this.__createElement('rect', { x, y, width, height }, true);
-        const parent = this.__closestGroupOrSvg();
-        parent.appendChild(rect);
+        this.__closestGroupOrSvg().appendChild(rect);
         this.__currentElement = rect;
         this.__applyTransformation(rect);
         this.__applyStyleToCurrentElement('stroke');
     }
     clearRect(x, y, width, height) {
         const { a, b, c, d, e, f } = this.getTransform();
-        if (JSON.stringify([a, b, c, d, e, f]) === JSON.stringify([1, 0, 0, 1, 0, 0])) {
-            if (x === 0 &&
-                y === 0 &&
-                width === this.width &&
-                height === this.height) {
-                this.__clearCanvas();
-                return;
-            }
+        if (a === 1 &&
+            b === 0 &&
+            c === 0 &&
+            d === 1 &&
+            e === 0 &&
+            f === 0 &&
+            x === 0 &&
+            y === 0 &&
+            width === this.width &&
+            height === this.height) {
+            this.__clearCanvas();
+            return;
         }
         const rect = this.__createElement('rect', { x, y, width, height, fill: '#FFFFFF' }, true);
         this.__applyTransformation(rect);
-        const parent = this.__closestGroupOrSvg();
-        parent.appendChild(rect);
-    }
-    createLinearGradient(x1, y1, x2, y2) {
-        const grad = this.__createElement('linearGradient', {
-            id: randomString(this.__ids),
-            x1: x1 + 'px',
-            x2: x2 + 'px',
-            y1: y1 + 'px',
-            y2: y2 + 'px',
-            gradientUnits: 'userSpaceOnUse',
-        });
-        this.__defs.appendChild(grad);
-        return new CanvasGradient(grad, this);
-    }
-    createRadialGradient(x0, y0, r0, x1, y1, r1) {
-        const grad = this.__createElement('radialGradient', {
-            id: randomString(this.__ids),
-            cx: x1 + 'px',
-            cy: y1 + 'px',
-            r: r1 + 'px',
-            fx: x0 + 'px',
-            fy: y0 + 'px',
-            gradientUnits: 'userSpaceOnUse',
-        });
-        this.__defs.appendChild(grad);
-        return new CanvasGradient(grad, this);
-    }
-    __applyText(text, x, y, action) {
+        this.__closestGroupOrSvg().appendChild(rect);
+    }
+    __clearCanvas() {
+        this.__root.removeChild(this.__root.childNodes[0]);
+        this.__currentElement = this.__document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        this.__root.appendChild(this.__currentElement);
+        this.__groupStack = [];
+    }
+    __parsedFont() {
+        const hit = this.__fontCache.get(this.font);
+        if (hit) {
+            return hit;
+        }
         const el = document.createElement('span');
-        el.setAttribute('style', 'font:' + this.font);
-        const style = el.style;
+        el.setAttribute('style', `font:${this.font}`);
+        this.__fontCache.set(this.font, el.style);
+        return el.style;
+    }
+    fillText(text, x, y) {
+        const style = this.__parsedFont();
         const parent = this.__closestGroupOrSvg();
         const textElement = this.__createElement('text', {
             'font-family': style.fontFamily,
             'font-size': style.fontSize,
             'font-style': omitDefault('font-style', style.fontStyle),
             'font-weight': omitDefault('font-weight', style.fontWeight),
-            'text-decoration': this.__fontUnderline,
-            x: x,
-            y: y,
+            x,
+            y,
             'text-anchor': getTextAnchor(this.textAlign),
             'dominant-baseline': omitDefault('dominant-baseline', getDominantBaseline(this.textBaseline)),
         }, true);
         textElement.appendChild(this.__document.createTextNode(text));
         this.__currentElement = textElement;
         this.__applyTransformation(textElement);
-        this.__applyStyleToCurrentElement(action);
-        let finalElement = textElement;
-        if (this.__fontHref) {
-            const a = this.__createElement('a');
-            a.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', this.__fontHref);
-            a.appendChild(textElement);
-            finalElement = a;
-        }
-        parent.appendChild(finalElement);
-    }
-    fillText(text, x, y) {
-        this.__applyText(text, x, y, 'fill');
-    }
-    strokeText(text, x, y) {
-        this.__applyText(text, x, y, 'stroke');
+        this.__applyStyleToCurrentElement('fill');
+        parent.appendChild(textElement);
     }
     measureText(text) {
         this.__ctx.font = this.font;
@@ -692,60 +424,31 @@ export class Context {
         const startX = x + radius * Math.cos(startAngle);
         const startY = y + radius * Math.sin(startAngle);
         const sweepFlag = counterClockwise ? 0 : 1;
-        let largeArcFlag = 0;
         let diff = endAngle - startAngle;
         if (diff < 0) {
             diff += 2 * Math.PI;
         }
-        if (counterClockwise) {
-            largeArcFlag = diff > Math.PI ? 0 : 1;
-        }
-        else {
-            largeArcFlag = diff > Math.PI ? 1 : 0;
-        }
-        const scaleX = Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b);
-        const scaleY = Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d);
+        const largeArcFlag = counterClockwise
+            ? diff > Math.PI
+                ? 0
+                : 1
+            : diff > Math.PI
+                ? 1
+                : 0;
+        const { x: scaleX, y: scaleY } = this.__getTransformScale();
+        const end = this.__matrixTransform(endX, endY);
         this.lineTo(startX, startY);
-        this.__addPathCommand(format('A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}', {
-            rx: radius * scaleX,
-            ry: radius * scaleY,
-            xAxisRotation: 0,
-            largeArcFlag,
-            sweepFlag,
-            endX: this.__matrixTransform(endX, endY).x,
-            endY: this.__matrixTransform(endX, endY).y,
-        }));
+        this.__addPathCommand(`A ${radius * scaleX} ${radius * scaleY} 0 ${largeArcFlag} ${sweepFlag} ${end.x} ${end.y}`);
         this.__currentPosition = { x: endX, y: endY };
     }
-    clip() {
-        const group = this.__closestGroupOrSvg();
-        const clipPath = this.__createElement('clipPath');
-        const id = randomString(this.__ids);
-        const newGroup = this.__createElement('g');
-        this.__applyCurrentDefaultPath();
-        group.removeChild(this.__currentElement);
-        clipPath.setAttribute('id', id);
-        clipPath.appendChild(this.__currentElement);
-        this.__defs.appendChild(clipPath);
-        group.setAttribute('clip-path', format('url(#{id})', { id }));
-        group.appendChild(newGroup);
-        this.__currentElement = newGroup;
-    }
     setLineDash(dashArray) {
-        if (dashArray && dashArray.length > 0) {
-            this.lineDash = dashArray.join(',');
-        }
-        else {
-            this.lineDash = null;
-        }
+        this.lineDash = dashArray.length > 0 ? dashArray.join(',') : null;
     }
     setTransform(a, b, c, d, e, f) {
-        if (a instanceof DOMMatrix) {
-            this.__transformMatrix = new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f]);
-        }
-        else {
-            this.__transformMatrix = new DOMMatrix([a, b, c, d, e, f]);
-        }
+        this.__transformMatrix =
+            a instanceof DOMMatrix
+                ? new DOMMatrix([a.a, a.b, a.c, a.d, a.e, a.f])
+                : new DOMMatrix([a, b, c, d, e, f]);
     }
     getTransform() {
         const { a, b, c, d, e, f } = this.__transformMatrix;
@@ -761,27 +464,10 @@ export class Context {
         if (isNaN(x) || isNaN(y) || !isFinite(x) || !isFinite(y)) {
             return;
         }
-        const matrix = this.getTransform().scale(x, y);
-        this.setTransform(matrix);
-    }
-    rotate(angle) {
-        const matrix = this.getTransform().multiply(new DOMMatrix([
-            Math.cos(angle),
-            Math.sin(angle),
-            -Math.sin(angle),
-            Math.cos(angle),
-            0,
-            0,
-        ]));
-        this.setTransform(matrix);
+        this.setTransform(this.getTransform().scale(x, y));
     }
     translate(x, y) {
-        const matrix = this.getTransform().translate(x, y);
-        this.setTransform(matrix);
-    }
-    transform(a, b, c, d, e, f) {
-        const matrix = this.getTransform().multiply(new DOMMatrix([a, b, c, d, e, f]));
-        this.setTransform(matrix);
+        this.setTransform(this.getTransform().translate(x, y));
     }
     __matrixTransform(x, y) {
         return new DOMPoint(x, y).matrixTransform(this.__transformMatrix);
@@ -792,62 +478,5 @@ export class Context {
             y: Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d),
         };
     }
-    __getTransformRotation() {
-        return Math.atan2(this.__transformMatrix.b, this.__transformMatrix.a);
-    }
-    /**
-     * An <image> of the source, cropped and scaled the way the canvas call asks:
-     * a nested <svg> whose viewBox is the source rectangle maps it onto the
-     * destination rectangle exactly. Throws rather than dropping the image, so a
-     * renderer that draws one into an export finds out.
-     */
-    drawImage(image, ...args) {
-        const source = image;
-        if (typeof source.toDataURL !== 'function') {
-            throw new TypeError('svgcanvas drawImage needs a source with toDataURL (a canvas); an OffscreenCanvas has to be copied onto one first');
-        }
-        const [sx, sy, sw, sh, dx, dy, dw, dh] = args.length >= 8
-            ? args
-            : [
-                0,
-                0,
-                source.width,
-                source.height,
-                args[0],
-                args[1],
-                args[2] ?? source.width,
-                args[3] ?? source.height,
-            ];
-        const group = this.__createElement('g');
-        const viewport = this.__createElement('svg', {
-            x: dx,
-            y: dy,
-            width: dw,
-            height: dh,
-            viewBox: `${sx} ${sy} ${sw} ${sh}`,
-            preserveAspectRatio: 'none',
-        });
-        const img = this.__createElement('image', {
-            href: source.toDataURL('image/png'),
-            width: source.width,
-            height: source.height,
-            preserveAspectRatio: 'none',
-            'image-rendering': this.imageSmoothingEnabled ? undefined : 'pixelated',
-        });
-        viewport.appendChild(img);
-        group.appendChild(viewport);
-        this.__closestGroupOrSvg().appendChild(group);
-        this.__currentElement = group;
-        this.__applyTransformation(group);
-    }
-    imageSmoothingEnabled = true;
-    // Stubs for unimplemented methods
-    drawFocusRing() { }
-    createImageData() { }
-    putImageData() { }
-    globalCompositeOperation() { }
-    createPattern() {
-        return null;
-    }
 }
 //# sourceMappingURL=index.js.map