@jbrowse/svgcanvas 1.0.0

package/dist/index.js

@@ -0,0 +1,780 @@
+/**
+ * SVGCanvas v2.0.3
+ * Draw on SVG using Canvas's 2D Context API.
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Original Authors: Kerry Liu, Zeno Zeng
+ * Copyright (c) 2014 Gliffy Inc.
+ * Copyright (c) 2021 Zeno Zeng
+ *
+ * Vendored and converted to ESM/TypeScript for pure ESM compatibility.
+ */
+/* 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',
+        right: 'end',
+        center: 'middle',
+        start: 'start',
+        end: 'end',
+    };
+    return mapping[textAlign] || mapping.start;
+}
+function getDominantBaseline(textBaseline) {
+    const mapping = {
+        alphabetic: 'alphabetic',
+        hanging: 'hanging',
+        top: 'text-before-edge',
+        bottom: 'text-after-edge',
+        middle: 'central',
+    };
+    return mapping[textBaseline] || mapping.alphabetic;
+}
+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',
+        canvas: '#000000',
+        svg: 'none',
+        apply: 'stroke',
+    },
+    fillStyle: {
+        svgAttr: 'fill',
+        canvas: '#000000',
+        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',
+    },
+    lineDash: {
+        svgAttr: 'stroke-dasharray',
+        canvas: [],
+        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;
+    }
+}
+export class Context {
+    width;
+    height;
+    enableMirroring;
+    canvas;
+    __document;
+    __ctx;
+    __canvas;
+    __root;
+    __ids;
+    __defs;
+    __currentElement;
+    __styleStack;
+    __groupStack;
+    __currentDefaultPath;
+    __currentPosition;
+    __transformMatrix;
+    __transformMatrixStack;
+    __currentElementsToStyle;
+    __options;
+    __id;
+    __fontUnderline;
+    __fontHref;
+    // 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;
+        this.canvas = this;
+        this.__document = options.document || document;
+        if (options.ctx) {
+            this.__ctx = options.ctx;
+        }
+        else {
+            this.__canvas = this.__document.createElement('canvas');
+            this.__ctx = this.__canvas.getContext('2d');
+        }
+        this.__setDefaultStyles();
+        this.__styleStack = [this.__getStyleState()];
+        this.__groupStack = [];
+        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.__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) {
+            element.setAttribute('fill', 'none');
+            element.setAttribute('stroke', 'none');
+        }
+        for (const key of Object.keys(properties)) {
+            element.setAttribute(key, properties[key]);
+        }
+        return element;
+    }
+    __setDefaultStyles() {
+        for (const key of Object.keys(STYLES)) {
+            ;
+            this[key] = STYLES[key].canvas;
+        }
+    }
+    __applyStyleState(styleState) {
+        for (const key of Object.keys(styleState)) {
+            ;
+            this[key] = styleState[key];
+        }
+    }
+    __getStyleState() {
+        const styleState = {};
+        for (const key of Object.keys(STYLES)) {
+            styleState[key] = this[key];
+        }
+        return styleState;
+    }
+    __applyTransformation(element, matrix) {
+        const { a, b, c, d, e, f } = matrix || this.getTransform();
+        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 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);
+                    }
+                }
+            }
+        }
+    }
+    __closestGroupOrSvg(node) {
+        node = node || this.__currentElement;
+        if (node.nodeName === 'g' || node.nodeName === 'svg') {
+            return node;
+        }
+        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;
+    }
+    save() {
+        const group = this.__createElement('g');
+        const parent = this.__closestGroupOrSvg();
+        this.__groupStack.push(parent);
+        parent.appendChild(group);
+        this.__currentElement = group;
+        const style = this.__getStyleState();
+        this.__styleStack.push(style);
+        if (!this.__transformMatrixStack) {
+            this.__transformMatrixStack = [];
+        }
+        this.__transformMatrixStack.push(this.getTransform());
+    }
+    restore() {
+        this.__currentElement = this.__groupStack.pop();
+        this.__currentElementsToStyle = undefined;
+        if (!this.__currentElement) {
+            this.__currentElement = this.__root.childNodes[1];
+        }
+        const state = this.__styleStack.pop();
+        this.__applyStyleState(state);
+        if (this.__transformMatrixStack && this.__transformMatrixStack.length > 0) {
+            this.setTransform(this.__transformMatrixStack.pop());
+        }
+    }
+    beginPath() {
+        this.__currentDefaultPath = '';
+        this.__currentPosition = {};
+        const path = this.__createElement('path', {}, true);
+        const parent = this.__closestGroupOrSvg();
+        parent.appendChild(path);
+        this.__currentElement = path;
+    }
+    __applyCurrentDefaultPath() {
+        const currentElement = this.__currentElement;
+        if (currentElement.nodeName === 'path') {
+            currentElement.setAttribute('d', this.__currentDefaultPath);
+        }
+    }
+    __addPathCommand(command) {
+        this.__currentDefaultPath += ' ';
+        this.__currentDefaultPath += command;
+    }
+    moveTo(x, y) {
+        if (this.__currentElement.nodeName !== 'path') {
+            this.beginPath();
+        }
+        this.__currentPosition = { x, y };
+        this.__addPathCommand(format('M {x} {y}', {
+            x: this.__matrixTransform(x, y).x,
+            y: this.__matrixTransform(x, y).y,
+        }));
+    }
+    closePath() {
+        if (this.__currentDefaultPath) {
+            this.__addPathCommand('Z');
+        }
+    }
+    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,
+        }));
+    }
+    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,
+        }));
+    }
+    stroke() {
+        if (this.__currentElement.nodeName === 'path') {
+            this.__currentElement.setAttribute('paint-order', 'fill stroke markers');
+        }
+        this.__applyCurrentDefaultPath();
+        this.__applyStyleToCurrentElement('stroke');
+    }
+    fill() {
+        if (this.__currentElement.nodeName === 'path') {
+            this.__currentElement.setAttribute('paint-order', 'stroke fill markers');
+        }
+        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 = [];
+    }
+    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.__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.__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;
+            }
+        }
+        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) {
+        const el = document.createElement('span');
+        el.setAttribute('style', 'font:' + this.font);
+        const style = el.style;
+        const parent = this.__closestGroupOrSvg();
+        const textElement = this.__createElement('text', {
+            'font-family': style.fontFamily,
+            'font-size': style.fontSize,
+            'font-style': style.fontStyle,
+            'font-weight': style.fontWeight,
+            'text-decoration': this.__fontUnderline,
+            x: x,
+            y: y,
+            'text-anchor': getTextAnchor(this.textAlign),
+            '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');
+    }
+    measureText(text) {
+        this.__ctx.font = this.font;
+        return this.__ctx.measureText(text);
+    }
+    arc(x, y, radius, startAngle, endAngle, counterClockwise) {
+        if (startAngle === endAngle) {
+            return;
+        }
+        startAngle = startAngle % (2 * Math.PI);
+        endAngle = endAngle % (2 * Math.PI);
+        if (startAngle === endAngle) {
+            endAngle =
+                ((endAngle + 2 * Math.PI - 0.001 * (counterClockwise ? -1 : 1)) %
+                    (2 * Math.PI));
+        }
+        const endX = x + radius * Math.cos(endAngle);
+        const endY = y + radius * Math.sin(endAngle);
+        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);
+        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.__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;
+        }
+    }
+    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]);
+        }
+    }
+    getTransform() {
+        const { a, b, c, d, e, f } = this.__transformMatrix;
+        return new DOMMatrix([a, b, c, d, e, f]);
+    }
+    resetTransform() {
+        this.setTransform(1, 0, 0, 1, 0, 0);
+    }
+    scale(x, y) {
+        if (y === undefined) {
+            y = x;
+        }
+        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);
+    }
+    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);
+    }
+    __matrixTransform(x, y) {
+        return new DOMPoint(x, y).matrixTransform(this.__transformMatrix);
+    }
+    __getTransformScale() {
+        return {
+            x: Math.hypot(this.__transformMatrix.a, this.__transformMatrix.b),
+            y: Math.hypot(this.__transformMatrix.c, this.__transformMatrix.d),
+        };
+    }
+    __getTransformRotation() {
+        return Math.atan2(this.__transformMatrix.b, this.__transformMatrix.a);
+    }
+    // Stubs for unimplemented methods
+    drawFocusRing() { }
+    createImageData() { }
+    putImageData() { }
+    globalCompositeOperation() { }
+    drawImage() { }
+    createPattern() {
+        return null;
+    }
+}
+//# sourceMappingURL=index.js.map