@mapcreator/sdk 0.0.7 → 0.0.9

package/dist/esm/utils/svgHelpers.js

@@ -0,0 +1,1512 @@
+import { bindingToPrimitive, bindingToString, clamp, fnv32b } from '@/utils/helpers';
+import { isFirefox } from '@/utils/browser';
+import 'path-data-polyfill';
+export function escapeXML(str) {
+    return str
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+export async function loadFonts(fontNames, vapiUrl, accessToken) {
+    for (const fontName of fontNames) {
+        try {
+            const buffer = await fetch(`${vapiUrl}/fonts/${fontName}.woff2?access_token=${accessToken}`).then(response => response.arrayBuffer());
+            document.fonts.add(new FontFace(fontName, buffer));
+        }
+        catch {
+            //
+        }
+    }
+}
+function almostEqual(a, b, delta = 0.0001) {
+    return Math.abs(a - b) < delta;
+}
+async function createImage(svgString, width, height, token) {
+    if (isFirefox() || svgString.length < 2000000) {
+        // If it's smaller than 2M
+        try {
+            // await for catch to work
+            return { token, image: await createImageFast(svgString, width, height) };
+        }
+        catch (e) {
+            // do nothing, fail-over to safe creation
+        }
+    }
+    const blob = new Blob([svgString], { type: 'image/svg+xml' });
+    return { token, image: await createImageSafe(blob, width, height) };
+}
+function createImageFast(svgString, width, height) {
+    const image = new Image();
+    image.width = width;
+    image.height = height;
+    return new Promise((resolve, reject) => {
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error('Failed to quickly generate image from svg'));
+        image.src = `data:image/svg+xml;base64,${btoa(svgString)}`;
+    });
+}
+async function createImageSafe(blob, width, height) {
+    const image = new Image();
+    image.width = width;
+    image.height = height;
+    const url = URL.createObjectURL(blob);
+    try {
+        await new Promise((resolve, reject) => {
+            image.onload = () => resolve();
+            image.onerror = () => reject(new Error('Failed to safely generate image from svg'));
+            image.src = url;
+        });
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+    return image;
+}
+const interpolation = /\$\{([^}]+)}/g;
+const parser = new DOMParser();
+const serializer = new XMLSerializer();
+const svgCache = new Map();
+function getElement(svg) {
+    let element = svgCache.get(svg);
+    if (!element) {
+        element = parser.parseFromString(svg, 'image/svg+xml')
+            .documentElement;
+        svgCache.set(svg, element);
+    }
+    return element;
+}
+function getSvg(element) {
+    const svg = serializer.serializeToString(element);
+    if (!svgCache.has(svg)) {
+        svgCache.set(svg, element);
+    }
+    return svg;
+}
+export class SvgHelper {
+    _seen = [];
+    _svg = null;
+    _element = null;
+    constructor(svg) {
+        this._svg = svg;
+    }
+    setElement() {
+        this._element = getElement(this._svg).cloneNode(true);
+        this._svg = null;
+        return this._element;
+    }
+    getSvgString() {
+        return this._svg ?? getSvg(this._element);
+    }
+    getSvgSize() {
+        const element = this._element ?? getElement(this._svg);
+        return [element.width.baseVal.value, element.height.baseVal.value];
+    }
+    getSvgColors() {
+        const output = [];
+        const seen = [];
+        const element = this._element ?? getElement(this._svg);
+        const nodeList = element.querySelectorAll('[mol_edit_style=true]');
+        for (let i = 0; i < nodeList.length; ++i) {
+            const node = nodeList[i];
+            const name = node.id; // || node.firstElementChild?.id;
+            if (name && seen.every(seenNode => seenNode.id !== name)) {
+                const fill = node.getAttribute('fill')?.trim();
+                if (fill) {
+                    const color = new Color(fill);
+                    if (color.badValue) {
+                        output.push({ name: `fill#${name}`, color: fill });
+                    }
+                    else {
+                        const { rgba } = color;
+                        const a = node.getAttribute('fill-opacity');
+                        rgba[3] *= a ? clamp(Number(a), 0, 1) : 1;
+                        output.push({ name: `fill#${name}`, color: Color.fromRGB(rgba) });
+                    }
+                    seen.push(node);
+                }
+                const stroke = node.getAttribute('stroke')?.trim();
+                if (stroke) {
+                    const color = new Color(stroke);
+                    if (color.badValue) {
+                        output.push({ name: `stroke#${name}`, color: stroke });
+                    }
+                    else {
+                        const { rgba } = color;
+                        const a = node.getAttribute('stroke-opacity');
+                        rgba[3] *= a ? clamp(Number(a), 0, 1) : 1;
+                        output.push({ name: `stroke#${name}`, color: Color.fromRGB(rgba) });
+                    }
+                    seen.push(node);
+                }
+            }
+        }
+        return output;
+    }
+    setSvgColors(values) {
+        const seen = [];
+        const element = this._element ?? this.setElement();
+        const nodeList = element.querySelectorAll('[mol_edit_style=true]');
+        for (let i = 0; i < nodeList.length; ++i) {
+            const node = nodeList[i];
+            const name = node.id;
+            if (name &&
+                seen.every(seenNode => seenNode.id !== name) &&
+                (node.getAttribute('fill')?.trim() || node.getAttribute('stroke')?.trim())) {
+                const fill = values.find(value => value.name === `fill#${name}`);
+                if (fill?.color) {
+                    const [r, g, b, a] = fill.color.rgba;
+                    node.setAttribute('fill', `rgb(${r},${g},${b})`);
+                    node.setAttribute(`fill-opacity`, String(a));
+                }
+                const stroke = values.find(value => value.name === `stroke#${name}`);
+                if (stroke?.color) {
+                    const [r, g, b, a] = stroke.color.rgba;
+                    node.setAttribute('stroke', `rgb(${r},${g},${b})`);
+                    node.setAttribute(`stroke-opacity`, String(a));
+                }
+                seen.push(node);
+            }
+        }
+        return this;
+    }
+    getSvgTexts() {
+        const output = [];
+        const element = this._element ?? getElement(this._svg);
+        const nodeList = element.querySelectorAll('[mol_edit_text=true]');
+        for (let i = 0; i < nodeList.length; ++i) {
+            const node = nodeList[i];
+            const name = node.id;
+            if (name && output.every(svgText => svgText.name !== name)) {
+                output.push({
+                    name,
+                    text: node.textContent || undefined,
+                    isMultiline: /^\s*true/i.test(node.getAttribute('mol_wrap') ?? 'false'),
+                });
+            }
+        }
+        return output;
+    }
+    setSvgTexts(values) {
+        this._seen = [];
+        const element = this._element ?? this.setElement();
+        const nodeList = element.querySelectorAll('[mol_edit_text=true]');
+        document.body.appendChild(element);
+        try {
+            const scale = element.width.baseVal.value / element.viewBox.baseVal.width;
+            for (let i = 0; i < nodeList.length; ++i) {
+                const node = nodeList[i];
+                const name = node.id;
+                if (name && this._seen.every(seenNode => seenNode.id !== name)) {
+                    const svgText = values.find(value => value.name === name);
+                    if (node.querySelector('textPath')) {
+                        if (svgText) {
+                            for (let j = 0; j < node.childNodes.length; ++j) {
+                                if (node.childNodes[j].nodeName === 'textPath') {
+                                    node.childNodes[j].childNodes[0].nodeValue = svgText.text ?? '';
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        this.wrapText(element, node, svgText && (svgText.text ?? ''));
+                    }
+                    this.nodeChanged(node); // this._seen.push(node)
+                }
+            }
+            if (this._seen.length) {
+                this.resetSize(scale);
+                this.resetAnchor();
+            }
+        }
+        finally {
+            document.body.removeChild(element);
+        }
+        return this;
+    }
+    nodeChanged(node) {
+        if (!node.id || this._seen.includes(node)) {
+            return;
+        }
+        const element = this._element ?? this.setElement();
+        const bbox = this.getBBox(node);
+        let i = 0;
+        let refs = element.querySelectorAll(`[mol_wrap~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.wrapText(element, refs[i]);
+        }
+        refs = element.querySelectorAll(`[mol_autoresizeid~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.autoResizeId(refs[i], bbox);
+        }
+        refs = element.querySelectorAll(`[mol_samewidth~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.sameWidth(refs[i], bbox);
+        }
+        refs = element.querySelectorAll(`[mol_sameheight~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.sameHeight(refs[i], bbox);
+        }
+        refs = element.querySelectorAll(`[mol_stack~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.stack(refs[i], bbox);
+        }
+        refs = element.querySelectorAll(`[mol_rectposition~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.rectPosition(refs[i], bbox);
+        }
+        refs = element.querySelectorAll(`[mol_pathposition~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.pathPosition(refs[i], node);
+        }
+        refs = element.querySelectorAll(`[mol_copyposition~="${node.id}"]`) ?? [];
+        for (i = 0; i < refs.length; ++i) {
+            this.copyPosition(refs[i], node);
+        }
+        this._seen.push(node);
+    }
+    autoResizeId(node, bbox) {
+        const marginAttrib = node.attributes.mol_autoresizemargin?.value;
+        let margins = [0, 0, 0, 0];
+        if (marginAttrib) {
+            const v = marginAttrib.split(' ').map((x) => parseFloat(x));
+            if (v.length === 1) {
+                margins = [v[0], v[0], v[0], v[0]];
+            }
+            else {
+                margins = [v[0], v[1], v[2], v[3]];
+            }
+        }
+        const changed = !(almostEqual(node.attributes.x.value, bbox.x - margins[0]) &&
+            almostEqual(node.attributes.y.value, bbox.y - margins[2]) &&
+            almostEqual(node.attributes.width.value, bbox.width + margins[0] + margins[1]) &&
+            almostEqual(node.attributes.height.value, bbox.height + margins[2] + margins[3]));
+        if (changed) {
+            node.attributes.x.value = bbox.x - margins[0];
+            node.attributes.y.value = bbox.y - margins[2];
+            node.attributes.width.value = bbox.width + margins[0] + margins[1];
+            node.attributes.height.value = bbox.height + margins[2] + margins[3];
+            this.nodeChanged(node);
+        }
+    }
+    sameWidth(node, bbox) {
+        const width = bbox.width + 2 * parseFloat(node.attributes.mol_samewidth.value.split(' ')[1]);
+        if (!almostEqual(node.attributes.width.value, width)) {
+            node.attributes.width.value = width;
+            this.nodeChanged(node);
+        }
+    }
+    sameHeight(node, bbox) {
+        const height = bbox.height + 2 * parseFloat(node.attributes.mol_sameheight.value.split(' ')[1]);
+        if (!almostEqual(node.attributes.height.value, height)) {
+            this._seen.push(node);
+            node.attributes.height.value = height;
+            this.nodeChanged(node);
+        }
+    }
+    stack(node, bbox) {
+        let changed = false;
+        const side = node.attributes.mol_stack.value.split(' ')[0];
+        switch (side) {
+            case 'top':
+                changed = !(almostEqual(node.attributes.width.value, bbox.width) &&
+                    almostEqual(node.attributes.x.value, bbox.x) &&
+                    almostEqual(node.attributes.y.value, bbox.y - node.attributes.height.value));
+                if (changed) {
+                    node.attributes.width.value = bbox.width;
+                    node.attributes.x.value = bbox.x;
+                    node.attributes.y.value = bbox.y - node.attributes.height.value;
+                }
+                break;
+            case 'bottom':
+                changed = !(almostEqual(node.attributes.width.value, bbox.width) &&
+                    almostEqual(node.attributes.x.value, bbox.x) &&
+                    almostEqual(node.attributes.y.value, bbox.y + bbox.height));
+                if (changed) {
+                    node.attributes.width.value = bbox.width;
+                    node.attributes.x.value = bbox.x;
+                    node.attributes.y.value = bbox.y + bbox.height;
+                }
+                break;
+            case 'left':
+                changed = !(almostEqual(node.attributes.height.value, bbox.height) &&
+                    almostEqual(node.attributes.x.value, bbox.x - node.attributes.width.value) &&
+                    almostEqual(node.attributes.y.value, bbox.y));
+                if (changed) {
+                    node.attributes.height.value = bbox.height;
+                    node.attributes.x.value = bbox.x - node.attributes.width.value;
+                    node.attributes.y.value = bbox.y;
+                }
+                break;
+            case 'right':
+                changed = !(almostEqual(node.attributes.height.value, bbox.height) &&
+                    almostEqual(node.attributes.x.value, bbox.x + bbox.width) &&
+                    almostEqual(node.attributes.y.value, bbox.y));
+                if (changed) {
+                    node.attributes.height.value = bbox.height;
+                    node.attributes.x.value = bbox.x + bbox.width;
+                    node.attributes.y.value = bbox.y;
+                }
+                break;
+        }
+        if (changed) {
+            this.nodeChanged(node);
+        }
+    }
+    rectPosition(node, bbox) {
+        const side = node.attributes.mol_rectposition.value.split(' ')[1];
+        const pos = node.attributes.mol_rectposition.value.split(' ')[2];
+        const offset = parseFloat(node.attributes.mol_rectposition.value.split(' ')[3]) || 0;
+        let svgCrd = { x: 0, y: 0 };
+        switch (side) {
+            case 'center':
+                svgCrd = { x: bbox.x + bbox.width / 2, y: bbox.y + bbox.height / 2 };
+                break;
+            case 'top':
+            case 'bottom':
+                svgCrd.x = bbox.x;
+                switch (pos) {
+                    case 'start':
+                        svgCrd.x += offset;
+                        break;
+                    case 'middle':
+                        svgCrd.x += bbox.width / 2 + offset;
+                        break;
+                    case 'end':
+                        svgCrd.x += bbox.width - offset;
+                        break;
+                }
+                svgCrd.y = bbox.y;
+                if (side === 'bottom') {
+                    svgCrd.y += bbox.height;
+                }
+                break;
+            case 'left':
+            case 'right':
+                svgCrd.y = bbox.y;
+                switch (pos) {
+                    case 'start':
+                        svgCrd.y += offset;
+                        break;
+                    case 'middle':
+                        svgCrd.y += bbox.height / 2 + offset;
+                        break;
+                    case 'end':
+                        svgCrd.y += bbox.height + offset;
+                        break;
+                }
+                svgCrd.x = bbox.x;
+                if (side === 'right') {
+                    svgCrd.x += bbox.width;
+                }
+                break;
+        }
+        const oriCrd = this.getCoordinate(node, 0, 0);
+        if (oriCrd && !(almostEqual(oriCrd.x, svgCrd.x) && almostEqual(oriCrd.y, svgCrd.y))) {
+            this.moveElement(node, svgCrd);
+            this.nodeChanged(node);
+        }
+    }
+    pathPosition(nodeTo, nodeFrom) {
+        const vars = nodeTo.attributes.mol_pathposition.value
+            .split(' ')
+            .map((x) => parseFloat(x));
+        const toCrd = this.getCoordinate(nodeTo, 0, 0);
+        const fromCrd = this.getCoordinate(nodeFrom, vars[1], vars[2]);
+        if (fromCrd && toCrd && !(almostEqual(fromCrd.x, toCrd.x) && almostEqual(fromCrd.y, toCrd.y))) {
+            this.moveElement(nodeTo, fromCrd);
+            this.nodeChanged(nodeTo);
+        }
+    }
+    copyPosition(nodeTo, nodeFrom) {
+        const vars = nodeTo.attributes.mol_copyposition.value
+            .split(' ')
+            .map((x) => parseFloat(x));
+        const toCrd = this.getCoordinate(nodeTo, vars[0], vars[1]);
+        const fromCrd = this.getCoordinate(nodeFrom, vars[3], vars[4]);
+        if (fromCrd && toCrd && !(almostEqual(fromCrd.x, toCrd.x) && almostEqual(fromCrd.y, toCrd.y))) {
+            this.setCoordinate(nodeTo, fromCrd, vars[0], vars[1]);
+            this.nodeChanged(nodeTo);
+        }
+    }
+    resetSize(scale) {
+        const element = this._element ?? this.setElement();
+        // resize width and height
+        const newBBox = this.getBBox(element);
+        // add 10% of width and height for strokes and markers (they are not taken into account by getBBox / the DOM)
+        newBBox.x -= 0.1 * newBBox.width;
+        newBBox.y -= 0.1 * newBBox.height;
+        newBBox.width *= 1.2;
+        newBBox.height *= 1.2;
+        element.setAttribute('viewBox', `${newBBox.x} ${newBBox.y} ${newBBox.width} ${newBBox.height}`);
+        element.setAttribute('width', `${newBBox.width * scale}`);
+        element.setAttribute('height', `${newBBox.height * scale}`);
+    }
+    resetAnchor() {
+        const editAnchorElement = (this._element ?? getElement(this._svg)).querySelector('[mol_edit_anchor]');
+        if (editAnchorElement) {
+            const editAnchor = editAnchorElement.getAttribute('mol_edit_anchor');
+            const anchorIndex = editAnchor.split(' ').map((x) => parseFloat(x));
+            const anchorCrd = this.getCoordinate(editAnchorElement, anchorIndex[0], anchorIndex[1]);
+            const element = this._element ?? this.setElement();
+            // see if there is a scale group and scale the anchor accordingly (its outside the scaled svg)
+            const scaleNode = element.getElementById('scale');
+            if (scaleNode) {
+                const transform = scaleNode.getAttribute('transform');
+                const scaleRe = /scale\(([\d.]+)\)/i;
+                const scale = (scaleRe.exec(transform) || ['', '1']).map(Number.parseFloat)[1];
+                anchorCrd.x *= scale;
+                anchorCrd.y *= scale;
+            }
+            element.setAttribute('mol_svganchor', `${anchorCrd.x} ${anchorCrd.y}`);
+        }
+    }
+    getBBox(node) {
+        // our own implementation to getBBox to make sure it returns what we want
+        // Note that the DOM getBBox used below doesn't work in fireFox when display:none. Use visibility:hidden instead
+        // see: https://github.com/susielu/d3-annotation/issues/25
+        function textContentLocal(n) {
+            // textContent concatenates the texts in the childNodes, and finds the largest string,
+            // but we do not want leading and trailing empty textNodes to be added
+            // We create them with spaces when we had leading or trailing \n
+            // because otherwise they would not be measured in getBBox
+            // This function create the text content but removes trailing 'empty' textSpans
+            if (n.nodeName !== 'text') {
+                return '';
+            }
+            let retVal = n.textContent;
+            // remove leading empty tspans
+            let i = 0;
+            while (i < n.childNodes.length &&
+                n.childNodes[i].nodeName === 'tspan' &&
+                n.childNodes[i].textContent.match(/\S+/) === null) {
+                retVal = retVal.slice(n.childNodes[i].textContent.length);
+                i++;
+            }
+            // remove trailing empty tspans
+            i = n.childNodes.length - 1;
+            while (i >= 0 &&
+                n.childNodes[i].nodeName === 'tspan' &&
+                n.childNodes[i].textContent.match(/\S+/) === null) {
+                retVal = retVal.slice(0, retVal.length - n.childNodes[i].textContent.length);
+                i--;
+            }
+            // split on \n
+            const lines = retVal.split('\n');
+            // find the longest string (taking number of characters instead of actual character size)
+            retVal = lines[0];
+            for (i = 1; i < lines.length; ++i) {
+                if (lines[i].length > retVal.length) {
+                    retVal = lines[i];
+                }
+            }
+            return retVal;
+        }
+        let retVal = null;
+        // measure the reference shape.
+        const bBox = node.getBBox();
+        // measures spaces for single line text
+        if (node.nodeName === 'text') {
+            const textContent = textContentLocal(node);
+            let CTL = bBox.width;
+            let x = bBox.x;
+            const meat = textContent.match(/\S+.*\S+/); // meat of the string
+            if (meat && meat.length > 0) {
+                const lead = textContent.match(/^\s*/);
+                if (lead.length > 0) {
+                    x -= (CTL / meat[0].length) * lead[0].length; // move x over for leading spaces
+                }
+                CTL += (CTL / meat[0].length) * (textContent.length - meat[0].length);
+            }
+            retVal = {
+                width: CTL,
+                height: bBox.height,
+                x,
+                y: bBox.y,
+                descent: bBox.y + bBox.height - Number(node.getAttribute('y')),
+            };
+        }
+        else {
+            retVal = {
+                x: bBox.x,
+                y: bBox.y,
+                width: Math.max(1, bBox.width),
+                height: Math.max(1, bBox.height),
+            };
+        }
+        return retVal;
+    }
+    /**
+     * Convert the points in the path shape into an array of points
+     * @param {Object} node of the shape to be used for this object
+     * @return {Object} node Array of coordinates
+     */
+    nodeToPoints(node) {
+        const pnts = [];
+        let p;
+        let len;
+        let i;
+        if (node.points.length) {
+            len = node.points.length;
+        }
+        else {
+            len = node.points.numberOfItems;
+        }
+        for (i = 0; i < len; ++i) {
+            p = node.points.getItem(i);
+            pnts.push(p);
+        }
+        return pnts;
+    }
+    /**
+     * Convert the points in the given array into a path string
+     * @param {Object} pnts Node of the shape to be used for this object
+     * @return {String} String of the SVG path
+     */
+    pointsToString(pnts) {
+        let val = '';
+        let i;
+        for (i = 0; i < pnts.length; ++i) {
+            val = `${val} ${pnts[i].x.toString()}, ${pnts[i].y.toString()}`;
+        }
+        return val;
+    }
+    getCoordinate(node, iCrd, iSeg) {
+        // MULTIPLE RETURN POINTS!
+        const svgCrd = { x: 0, y: 0 };
+        let pnts = [];
+        let pathData = [];
+        switch (node.nodeName) {
+            case 'rect':
+                if (iCrd === 0) {
+                    svgCrd.x = parseFloat(node.getAttribute('x'));
+                    svgCrd.y = parseFloat(node.getAttribute('y'));
+                    return svgCrd;
+                }
+                if (iCrd === 1) {
+                    svgCrd.x = parseFloat(node.getAttribute('x')) + parseFloat(node.getAttribute('width'));
+                    svgCrd.y = parseFloat(node.getAttribute('y')) + parseFloat(node.getAttribute('height'));
+                    return svgCrd;
+                }
+                break;
+            case 'circle':
+                if (iCrd === 0) {
+                    svgCrd.x = parseFloat(node.getAttribute('cx'));
+                    svgCrd.y = parseFloat(node.getAttribute('cy'));
+                    return svgCrd;
+                }
+                if (iCrd === 1) {
+                    svgCrd.x = parseFloat(node.getAttribute('cx')) + parseFloat(node.getAttribute('r'));
+                    svgCrd.y = parseFloat(node.getAttribute('cy'));
+                    return svgCrd;
+                }
+                break;
+            case 'ellipse':
+                if (iCrd === 0) {
+                    svgCrd.x = parseFloat(node.getAttribute('cx'));
+                    svgCrd.y = parseFloat(node.getAttribute('cy'));
+                    return svgCrd;
+                }
+                if (iCrd === 1) {
+                    svgCrd.x = parseFloat(node.getAttribute('cx')) + parseFloat(node.getAttribute('rx'));
+                    svgCrd.y = parseFloat(node.getAttribute('cy'));
+                    return svgCrd;
+                }
+                if (iCrd === 2) {
+                    svgCrd.x = parseFloat(node.getAttribute('cx'));
+                    svgCrd.y = parseFloat(node.getAttribute('cy')) - parseFloat(node.getAttribute('ry'));
+                    return svgCrd;
+                }
+                break;
+            case 'line':
+                if (iCrd === 0) {
+                    svgCrd.x = parseFloat(node.getAttribute('x1'));
+                    svgCrd.y = parseFloat(node.getAttribute('y1'));
+                    return svgCrd;
+                }
+                if (iCrd === 1) {
+                    svgCrd.x = parseFloat(node.getAttribute('x2'));
+                    svgCrd.y = parseFloat(node.getAttribute('y2'));
+                    return svgCrd;
+                }
+                break;
+            case 'polyline':
+                pnts = this.nodeToPoints(node);
+                if (iCrd < pnts.length) {
+                    svgCrd.x = pnts[iCrd].x;
+                    svgCrd.y = pnts[iCrd].y;
+                    return svgCrd;
+                }
+                break;
+            case 'polygon':
+                pnts = this.nodeToPoints(node);
+                if (iCrd < pnts.length) {
+                    svgCrd.x = pnts[iCrd].x;
+                    svgCrd.y = pnts[iCrd].y;
+                    return svgCrd;
+                }
+                break;
+            case 'path':
+                pathData = node.getPathData({ normalize: true });
+                switch (pathData[iSeg].type) {
+                    case 'M':
+                        switch (iCrd) {
+                            case 0:
+                                svgCrd.x = pathData[iSeg].values[0];
+                                svgCrd.y = pathData[iSeg].values[1];
+                                return svgCrd;
+                        }
+                        break;
+                    case 'L':
+                        switch (iCrd) {
+                            case 0:
+                                svgCrd.x = pathData[iSeg].values[0];
+                                svgCrd.y = pathData[iSeg].values[1];
+                                return svgCrd;
+                        }
+                        break;
+                }
+                break;
+        }
+        return null;
+    }
+    setCoordinate(node, svgCrd, iCrd, iSeg) {
+        // todo fix this function and its calls
+        // because sometimes it's called with parameters
+        // that will throw error or do nothing
+        let val = '';
+        let pnts = [];
+        let pathData = [];
+        let v = 0;
+        let a = 0;
+        let b = 0;
+        switch (node.nodeName) {
+            case 'rect':
+                if (iCrd === 0) {
+                    node.setAttribute('x', svgCrd.x.toString());
+                    node.setAttribute('y', svgCrd.y.toString());
+                }
+                if (iCrd === 1) {
+                    v = svgCrd.x - Number(node.getAttribute('x'));
+                    if (v >= 0) {
+                        node.setAttribute('width', v.toString());
+                    }
+                    else {
+                        // move x down to -v
+                        a = Number(node.getAttribute('x')) + v;
+                        node.setAttribute('x', a.toString());
+                        node.setAttribute('width', '0');
+                    }
+                    v = svgCrd.y - Number(node.getAttribute('y'));
+                    if (v >= 0) {
+                        node.setAttribute('height', v.toString());
+                    }
+                    else {
+                        // move y up to -v
+                        a = Number(node.getAttribute('y')) + v;
+                        node.setAttribute('y', a.toString());
+                        node.setAttribute('height', '0');
+                    }
+                }
+                break;
+            case 'circle':
+                if (iCrd === 0) {
+                    node.setAttribute('cx', svgCrd.x.toString());
+                    node.setAttribute('cy', svgCrd.y.toString());
+                }
+                if (iCrd === 1) {
+                    a = parseFloat(node.getAttribute('cx')) - svgCrd.x;
+                    b = parseFloat(node.getAttribute('cy')) - svgCrd.y;
+                    v = Math.sqrt(a * a + b * b);
+                    node.setAttribute('r', v.toString());
+                }
+                break;
+            case 'ellipse':
+                if (iCrd === 0) {
+                    node.setAttribute('cx', svgCrd.x.toString());
+                    node.setAttribute('cy', svgCrd.y.toString());
+                }
+                if (iCrd === 1) {
+                    v = Math.abs(parseFloat(node.getAttribute('cx')) - svgCrd.x);
+                    node.setAttribute('rx', v.toString());
+                }
+                if (iCrd === 2) {
+                    v = Math.abs(parseFloat(node.getAttribute('cy')) - svgCrd.y);
+                    node.setAttribute('ry', v.toString());
+                }
+                break;
+            case 'line':
+                if (iCrd === 0) {
+                    node.setAttribute('x1', svgCrd.x.toString());
+                    node.setAttribute('y2', svgCrd.y.toString());
+                }
+                if (iCrd === 1) {
+                    node.setAttribute('x2', svgCrd.x.toString());
+                    node.setAttribute('y2', svgCrd.y.toString());
+                }
+                break;
+            case 'polyline':
+                pnts = this.nodeToPoints(node);
+                if (iCrd < pnts.length) {
+                    pnts[iCrd].x = svgCrd.x;
+                    pnts[iCrd].y = svgCrd.y;
+                    val = this.pointsToString(pnts);
+                    node.setAttribute('points', val);
+                }
+                break;
+            case 'polygon':
+                pnts = this.nodeToPoints(node);
+                if (iCrd < pnts.length) {
+                    pnts[iCrd].x = svgCrd.x;
+                    pnts[iCrd].y = svgCrd.y;
+                    val = this.pointsToString(pnts);
+                    node.setAttribute('points', val);
+                }
+                break;
+            case 'path':
+                if (!iSeg) {
+                    break;
+                }
+                pathData = node.getPathData({ normalize: true });
+                switch (pathData[iSeg].type) {
+                    case 'M':
+                        pathData[iSeg].values[0] = svgCrd.x;
+                        pathData[iSeg].values[1] = svgCrd.y;
+                        break;
+                    case 'L':
+                        pathData[iSeg].values[0] = svgCrd.x;
+                        pathData[iSeg].values[1] = svgCrd.y;
+                        break;
+                }
+                node.setPathData(pathData);
+                break;
+        }
+    }
+    moveElement(node, svgCrd) {
+        let svgOriCrd = { x: 0, y: 0 };
+        const vector = { x: 0, y: 0 };
+        let j = 0;
+        let changed = false;
+        let pathData = [];
+        switch (node.nodeName) {
+            case 'rect':
+            case 'circle':
+            case 'ellipse':
+                svgOriCrd = this.getCoordinate(node, 0, 0);
+                changed = !almostEqual(svgOriCrd.x, svgCrd.x) || !almostEqual(svgOriCrd.y, svgCrd.y);
+                if (changed) {
+                    this.setCoordinate(node, svgCrd, 0, 0);
+                }
+                break;
+            case 'polyline':
+            case 'polygon':
+                svgOriCrd = this.getCoordinate(node, 0, 0);
+                vector.x = svgCrd.x - svgOriCrd.x;
+                vector.y = svgCrd.y - svgOriCrd.y;
+                changed = !almostEqual(vector.x, 0) || !almostEqual(vector.y, 0);
+                if (changed) {
+                    this.setCoordinate(node, svgCrd, 0, 0);
+                    // loop through all coords and move them
+                    j = 1;
+                    svgOriCrd = this.getCoordinate(node, j, 0);
+                    while (svgOriCrd !== null) {
+                        svgOriCrd.x += vector.x;
+                        svgOriCrd.y += vector.y;
+                        this.setCoordinate(svgOriCrd, j, 0, undefined);
+                        // next
+                        j++;
+                        svgOriCrd = this.getCoordinate(node, j, 0);
+                    }
+                }
+                break;
+            case 'path':
+                svgOriCrd = this.getCoordinate(node, 0, 0);
+                vector.x = svgCrd.x - svgOriCrd.x;
+                vector.y = svgCrd.y - svgOriCrd.y;
+                changed = !almostEqual(vector.x, 0) || !almostEqual(vector.y, 0);
+                if (changed) {
+                    // loop through all coords and move them
+                    pathData = node.getPathData({ normalize: true });
+                    for (let i = 0; i < pathData.length; ++i) {
+                        const path = pathData[i];
+                        if (path?.type === 'M' || path?.type === 'L') {
+                            path.values[0] += vector.x;
+                            path.values[1] += vector.y;
+                        }
+                    }
+                    node.setPathData(pathData);
+                }
+                break;
+        }
+        return changed;
+    }
+    /**
+     * TODO Needs to be made DRY
+     */
+    wrapText(element, textNode, text) {
+        let words = [];
+        let wordsInThisLine = 0;
+        let i;
+        let cumulY = 0;
+        let line = '';
+        let newLine = '';
+        let myTextNode;
+        let tspanEl;
+        let tspanElId;
+        let id = 0;
+        let idString = '';
+        let computedTextLength;
+        const svgNS = 'http://www.w3.org/2000/svg';
+        // const gatherText = text === undefined;
+        text = text ?? textNode.textContent;
+        while (textNode.hasChildNodes()) {
+            textNode.removeChild(textNode.firstChild);
+        }
+        // find the wrap parameters
+        // add a dummy textnode for measurement
+        const temp = document.createTextNode('gh');
+        textNode.appendChild(temp);
+        const ytn = textNode.getAttribute('y');
+        // measure the reference shape
+        let bBox = null;
+        let wrapId = '';
+        let attrs = [];
+        let wrapMargin = 0;
+        let lineDist = 0;
+        let newlineOnly = false;
+        if (textNode.hasAttribute('mol_wrap')) {
+            attrs = textNode.getAttribute('mol_wrap').split(' ', 4);
+            if (attrs[0] === 'true') {
+                wrapId = attrs[1];
+                if (wrapId === 'newlineOnly') {
+                    newlineOnly = true;
+                    wrapId = '';
+                    wrapMargin = 0;
+                }
+                else {
+                    wrapMargin = parseFloat(attrs[2]);
+                }
+                lineDist = attrs.length >= 4 ? parseFloat(attrs[3]) : wrapMargin;
+            }
+        }
+        if (wrapId) {
+            const node = element.getElementById(wrapId);
+            bBox = this.getBBox(node || textNode);
+        }
+        else {
+            bBox = this.getBBox(textNode);
+        }
+        let x = bBox.x;
+        let y = bBox.y;
+        const textWidth = bBox.width;
+        let maxWidth = 10000;
+        if (wrapId !== '' && !newlineOnly) {
+            maxWidth = textWidth - 2 * wrapMargin;
+        }
+        // measure the text
+        bBox = this.getBBox(textNode);
+        let textHeight = bBox.height;
+        if (textNode.hasAttribute('font-size')) {
+            textHeight = parseFloat(textNode.getAttribute('font-size'));
+        }
+        const descent = bBox.y + bBox.height - ytn;
+        // remove the dummy textnode
+        textNode.removeChild(temp);
+        // update x, y for margin and text-anchor
+        // (x, y) is the lower left corner of the first line
+        // start
+        x += wrapMargin;
+        y += wrapMargin + bBox.height;
+        // y = y + lineDist + bBox.height;
+        if (textNode.hasAttribute('text-anchor')) {
+            switch (textNode.getAttribute('text-anchor')) {
+                case 'end':
+                    x = x - wrapMargin + textWidth - wrapMargin;
+                    break;
+                case 'middle':
+                    x = x - wrapMargin + textWidth / 2;
+                    break;
+            }
+        }
+        idString = textNode.getAttribute('id');
+        textNode.setAttribute('x', x.toString());
+        textNode.setAttribute('y', (y - descent).toString());
+        // split the text at all spaces and dashes
+        // also split after a newline, but keep the newline
+        // also keep the -
+        if (text) {
+            words = text
+                .replace(/\n/g, '\n§')
+                .replace(/-/g, '-§')
+                .replace(/ /g, ' §')
+                .replace(/\t/g, '  §')
+                .split('§');
+        }
+        // create first textSpan
+        const baseY = parseFloat(textNode.attributes.y.value);
+        tspanEl = document.createElementNS(svgNS, 'tspan');
+        tspanEl.setAttributeNS(null, 'x', String(x));
+        tspanEl.setAttributeNS(null, 'y', String(baseY + cumulY));
+        tspanElId = idString + id.toString();
+        tspanEl.setAttribute('id', tspanElId);
+        id++;
+        line = '';
+        wordsInThisLine = 0;
+        myTextNode = document.createTextNode(line);
+        tspanEl.appendChild(myTextNode);
+        textNode.appendChild(tspanEl);
+        cumulY += textHeight;
+        i = 0;
+        while (i < words.length) {
+            // see if word fits behind current line
+            newLine = line + words[i];
+            wordsInThisLine++;
+            myTextNode.nodeValue = newLine;
+            computedTextLength = element.querySelector(`#${tspanElId}`).getComputedTextLength();
+            // so what is the situation?
+            if (computedTextLength < maxWidth) {
+                // word fits perfectly
+                line = newLine;
+                // but if it ends in a newline-char and is not the last word, create new tspan
+                if (line.length > 0 && line[line.length - 1] === '\n' && i < words.length - 1) {
+                    // if (!line.match(/\S+/)) {
+                    //   line = `§${line}`;
+                    //   tspanEl.setAttribute('visibility', 'hidden'); // empty line fix (dummy content and hidden)
+                    // }
+                    myTextNode.nodeValue = line;
+                    // create new tspan
+                    tspanEl = document.createElementNS(svgNS, 'tspan');
+                    tspanEl.setAttributeNS(null, 'x', String(x));
+                    tspanEl.setAttributeNS(null, 'y', String(baseY + cumulY));
+                    tspanElId = idString + id.toString();
+                    tspanEl.setAttribute('id', tspanElId);
+                    cumulY += textHeight + lineDist;
+                    id++;
+                    line = '';
+                    wordsInThisLine = 0;
+                    myTextNode = document.createTextNode(line);
+                    tspanEl.appendChild(myTextNode);
+                    textNode.appendChild(tspanEl);
+                }
+                // move on
+                i++;
+            }
+            else {
+                // so, line too long or newline
+                if (wordsInThisLine > 1) {
+                    // if word is not the only word, do not add it
+                    myTextNode.nodeValue = line;
+                }
+                else {
+                    // if word is the only word, leave it and move on
+                    line = newLine;
+                    i++;
+                }
+                if (line.length > 0 && line[line.length - 1] === '\n') {
+                    // remove the newline-char and space
+                    line = line.substr(0, line.length - 1);
+                    myTextNode.nodeValue = line;
+                }
+                // create new tspan
+                tspanEl = document.createElementNS(svgNS, 'tspan');
+                tspanEl.setAttributeNS(null, 'x', String(x));
+                tspanEl.setAttributeNS(null, 'y', String(baseY + cumulY));
+                tspanElId = idString + id.toString();
+                tspanEl.setAttribute('id', tspanElId);
+                cumulY += textHeight + lineDist;
+                id++;
+                line = '';
+                wordsInThisLine = 0;
+                myTextNode = document.createTextNode(line);
+                tspanEl.appendChild(myTextNode);
+                textNode.appendChild(tspanEl);
+            }
+        }
+        // If we only have one line, we don’t need tspans at all, so instead we just
+        // put the whole text directly into the textNode. This also fixes MC-991.
+        if (textNode.childElementCount === 1) {
+            textNode.firstElementChild.replaceWith(textNode.firstElementChild.textContent);
+        }
+        // return the cumulY
+        return cumulY;
+    }
+}
+export class SvgCache {
+    map;
+    keyCache = new Map();
+    constructor(map) {
+        this.map = map;
+    }
+    getMapLibreImageKey(svg, pixelRatio) {
+        let subCache = this.keyCache.get(pixelRatio);
+        if (!subCache) {
+            subCache = new Map();
+            this.keyCache.set(pixelRatio, subCache);
+        }
+        let mapLibreKey = subCache.get(svg);
+        if (!mapLibreKey) {
+            const key = svg + pixelRatio;
+            const size = new SvgHelper(svg).getSvgSize();
+            const scaledWidth = Math.max(size[0] * pixelRatio, 1);
+            const scaledHeight = Math.max(size[1] * pixelRatio, 1);
+            mapLibreKey = `mc-image-${fnv32b(key)}`;
+            createImage(svg, scaledWidth, scaledHeight, mapLibreKey)
+                .then(({ token, image }) => this.map.addImage(token, image, { pixelRatio }))
+                .catch(error => console.log(error));
+            subCache.set(svg, mapLibreKey);
+        }
+        return mapLibreKey;
+    }
+}
+let measureFontSize = 0;
+let measureFontFamily = '';
+const mcx = document.createElement('canvas').getContext('2d');
+export function measureTextBlock(lines, fontFamily, fontSize) {
+    let width = 0;
+    let height = 0;
+    let ascent = 0;
+    let descent = 0;
+    if (mcx) {
+        if (measureFontSize !== fontSize || measureFontFamily !== fontFamily) {
+            mcx.font = `${fontSize}px ${fontFamily}`;
+            measureFontFamily = fontFamily;
+            measureFontSize = fontSize;
+        }
+        ({ actualBoundingBoxAscent: ascent, actualBoundingBoxDescent: descent } = mcx.measureText('█'));
+        for (let i = 0; i < lines.length; ++i) {
+            const { actualBoundingBoxLeft, actualBoundingBoxRight } = mcx.measureText(lines[i]);
+            if (actualBoundingBoxLeft + actualBoundingBoxRight > width) {
+                width = actualBoundingBoxLeft + actualBoundingBoxRight;
+            }
+        }
+        height = (ascent + descent) * lines.length;
+    }
+    return { width, height, ascent, descent };
+}
+export function getColorValue(dataBindings, modelOrigValue, groupOrigValue, colorGenerator, unmatchedColor) {
+    const origValue = groupOrigValue ?? modelOrigValue;
+    const doRawValue = !colorGenerator;
+    const columnName = origValue?.match(/\$\{([^}]+)}/)?.[1];
+    const columnValue = columnName
+        ? doRawValue
+            ? bindingToString(dataBindings[columnName])
+            : bindingToPrimitive(dataBindings[columnName])
+        : null;
+    const value = columnName
+        ? doRawValue
+            ? columnValue
+            : typeof columnValue !== 'boolean' && columnValue !== null && columnValue !== ''
+                ? colorGenerator(columnValue)
+                : unmatchedColor
+        : origValue;
+    return value && !new Color(value).badValue ? value : '#000000';
+}
+export function getTextValue(dataBindings, modelOrigValue, groupOrigValue) {
+    return ((groupOrigValue ?? modelOrigValue)
+        ?.split(interpolation)
+        .map((part, index) => (index & 1 ? bindingToString(dataBindings[part]) : part))
+        .join('') || undefined);
+}
+export function getSvgValue(dataBindings, modelOrigValue, groupOrigValue) {
+    let value = modelOrigValue;
+    if (modelOrigValue) {
+        const svgHelper = new SvgHelper(modelOrigValue);
+        const svgColors = svgHelper.getSvgColors();
+        const svgTexts = svgHelper.getSvgTexts();
+        const colorsOverride = groupOrigValue
+            ? new Map(new SvgHelper(groupOrigValue).getSvgColors().map(({ name, color }) => [name, color]))
+            : new Map();
+        const textsOverride = groupOrigValue
+            ? new Map(new SvgHelper(groupOrigValue).getSvgTexts().map(({ name, text }) => [name, text]))
+            : new Map();
+        const colorValues = svgColors
+            .map(({ name, color }) => ({
+            name,
+            color: new Color(getColorValue(dataBindings, color?.toString(), colorsOverride.get(name)?.toString())),
+        }))
+            .filter((value, index) => typeof svgColors[index].color === 'string' ||
+            !value.color.sameColor(svgColors[index].color));
+        const textValues = svgTexts
+            .map(({ name, text }) => ({
+            name,
+            text: getTextValue(dataBindings, text, textsOverride.get(name)),
+        }))
+            .filter((value, index) => value.text !== svgTexts[index].text);
+        if (colorValues.length) {
+            svgHelper.setSvgColors(colorValues);
+        }
+        if (textValues.length) {
+            svgHelper.setSvgTexts(textValues);
+        }
+        if (colorValues.length || textValues.length) {
+            value = svgHelper.getSvgString();
+        }
+    }
+    return value;
+}
+class Color {
+    _error = false;
+    _rgba;
+    static fromRGB(rgb) {
+        const color = new Color('transparent');
+        color._rgba[0] = rgb[0];
+        color._rgba[1] = rgb[1];
+        color._rgba[2] = rgb[2];
+        color._rgba[3] = rgb.length > 3 ? rgb[3] : 1;
+        return color;
+    }
+    constructor(cstr) {
+        cstr = String(cstr).trim().toLowerCase();
+        const rgba = (this._rgba = [0, 0, 0, 1]);
+        const size = cstr.length;
+        let m;
+        if (size === 0) {
+            this._error = true;
+        }
+        else if (cstr === 'transparent' || cstr === 'none') {
+            rgba[3] = 0;
+        }
+        else if (cstr[0] === '#') {
+            if (size < 6) {
+                rgba[0] = parseInt(cstr[1] + cstr[1], 16) || 0;
+                rgba[1] = parseInt(cstr[2] + cstr[2], 16) || 0;
+                rgba[2] = parseInt(cstr[3] + cstr[3], 16) || 0;
+                if (size === 5) {
+                    rgba[3] = parseInt(cstr[4] + cstr[4], 16) / 255;
+                }
+            }
+            else {
+                rgba[0] = parseInt(cstr[1] + cstr[2], 16) || 0;
+                rgba[1] = parseInt(cstr[3] + cstr[4], 16) || 0;
+                rgba[2] = parseInt(cstr[5] + cstr[6], 16) || 0;
+                if (size > 8) {
+                    rgba[3] = parseInt(cstr[7] + cstr[8], 16) / 255;
+                }
+            }
+        }
+        else if (cstr in colorNames) {
+            const namedColor = colorNames[cstr];
+            rgba[0] = namedColor[0];
+            rgba[1] = namedColor[1];
+            rgba[2] = namedColor[2];
+        }
+        else if ((m = /^(rgba?|hs[lv]a?)\s*\(([^)]*)\)/.exec(cstr))) {
+            const space = m[1].replace(/a$/, '');
+            const parts = m[2].trim().split(/\s*[,/]\s*|\s+/);
+            const color = parts.map(parsePart, { space });
+            if (space === 'rgb') {
+                rgba[0] = color[0];
+                rgba[1] = color[1];
+                rgba[2] = color[2];
+                if (color.length > 3) {
+                    rgba[3] = color[3];
+                }
+            }
+            else if (space === 'hsl') {
+                hslToRgb(color, rgba);
+            }
+            else if (space === 'hsv') {
+                hsvToRgb(color, rgba);
+            } // TODO: process other spaces
+        }
+        else {
+            this._error = true;
+        }
+    }
+    get badValue() {
+        return this._error;
+    }
+    get a() {
+        return this._rgba[3];
+    }
+    get hex() {
+        // prettier-ignore
+        return `#${(Math.round(this._rgba[0]) << 16 |
+            Math.round(this._rgba[1]) << 8 |
+            Math.round(this._rgba[2])).toString(16).padStart(6, '0')}`;
+    }
+    get rgba() {
+        return this._rgba.slice();
+    }
+    sameColor(color) {
+        return (almostEqual(this._rgba[0], color._rgba[0]) &&
+            almostEqual(this._rgba[1], color._rgba[1]) &&
+            almostEqual(this._rgba[2], color._rgba[2]) &&
+            almostEqual(this._rgba[3], color._rgba[3]));
+    }
+    toString() {
+        const [r, g, b, a] = this._rgba;
+        return a === 1 ? this.hex : `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${a})`;
+    }
+}
+const baseHues = {
+    red: 0,
+    orange: 60,
+    yellow: 120,
+    green: 180,
+    blue: 240,
+    purple: 300,
+};
+// prettier-ignore
+function parsePart(s, i) {
+    const { space } = this;
+    if (s[s.length - 1] === '%') {
+        const x = parseFloat(s);
+        const mul = i < 3 && space === 'rgb' ? 255 : 1;
+        const div = i > 0 && i < 3 && space[0] === 'h' ? 1 : 100;
+        return (x < 0 ? 0 : x > 100 ? 100 : x) / div * mul;
+    }
+    if (space[i] === 'h' || (i === 2 && space[space.length - 1] === 'h')) {
+        if (s in baseHues) {
+            return baseHues[s];
+        }
+        let x = parseFloat(s);
+        switch (true) {
+            // case s.endsWith('deg'): break;
+            case s.endsWith('turn'):
+                x *= 360;
+                break;
+            case s.endsWith('grad'):
+                x = x * 360 / 400;
+                break;
+            case s.endsWith('rad'):
+                x = x * 180 / Math.PI;
+                break;
+        }
+        return ((x % 360) + 360) % 360;
+    }
+    if (s === 'none') {
+        return 0;
+    }
+    {
+        const x = parseFloat(s);
+        const max = i < 3 && space === 'rgb' ? 255 : 1;
+        return x < 0 ? 0 : x > max ? max : x;
+    }
+}
+// prettier-ignore
+function hue2rgb(p, q, t) {
+    if (t < 0) {
+        t += 1;
+    }
+    if (t > 1) {
+        t -= 1;
+    }
+    return (t < 1 / 6 ? p + (q - p) * 6 * t : t < 1 / 2 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p) * 255;
+}
+function hslToRgb(hsl, rgba = [0, 0, 0, 1]) {
+    const h = hsl[0] / 360;
+    const s = hsl[1] / 100;
+    const l = hsl[2] / 100;
+    if (s === 0) {
+        rgba[2] = rgba[1] = rgba[0] = l * 255;
+    }
+    else {
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        rgba[0] = hue2rgb(p, q, h + 1 / 3);
+        rgba[1] = hue2rgb(p, q, h);
+        rgba[2] = hue2rgb(p, q, h - 1 / 3);
+    }
+    if (hsl.length > 3) {
+        rgba[3] = hsl[3];
+    }
+    return rgba;
+}
+// prettier-ignore
+function hsvToRgb(hsv, rgba = [0, 0, 0, 1]) {
+    const h = hsv[0] / 60;
+    const s = hsv[1] / 100;
+    const v = hsv[2] / 100 * 255;
+    const i = Math.floor(h);
+    const f = h - i;
+    const p = v * (1 - s);
+    const q = v * (1 - f * s);
+    const t = v * (1 - (1 - f) * s);
+    switch (i % 6) {
+        case 0:
+            rgba[0] = v;
+            rgba[1] = t;
+            rgba[2] = p;
+            break;
+        case 1:
+            rgba[0] = q;
+            rgba[1] = v;
+            rgba[2] = p;
+            break;
+        case 2:
+            rgba[0] = p;
+            rgba[1] = v;
+            rgba[2] = t;
+            break;
+        case 3:
+            rgba[0] = p;
+            rgba[1] = q;
+            rgba[2] = v;
+            break;
+        case 4:
+            rgba[0] = t;
+            rgba[1] = p;
+            rgba[2] = v;
+            break;
+        case 5:
+            rgba[0] = v;
+            rgba[1] = p;
+            rgba[2] = q;
+            break;
+    }
+    if (hsv.length > 3) {
+        rgba[3] = hsv[3];
+    }
+    return rgba;
+}
+const colorNames = {
+    aliceblue: [240, 248, 255],
+    antiquewhite: [250, 235, 215],
+    aqua: [0, 255, 255],
+    aquamarine: [127, 255, 212],
+    azure: [240, 255, 255],
+    beige: [245, 245, 220],
+    bisque: [255, 228, 196],
+    black: [0, 0, 0],
+    blanchedalmond: [255, 235, 205],
+    blue: [0, 0, 255],
+    blueviolet: [138, 43, 226],
+    brown: [165, 42, 42],
+    burlywood: [222, 184, 135],
+    cadetblue: [95, 158, 160],
+    chartreuse: [127, 255, 0],
+    chocolate: [210, 105, 30],
+    coral: [255, 127, 80],
+    cornflowerblue: [100, 149, 237],
+    cornsilk: [255, 248, 220],
+    crimson: [220, 20, 60],
+    cyan: [0, 255, 255],
+    darkblue: [0, 0, 139],
+    darkcyan: [0, 139, 139],
+    darkgoldenrod: [184, 134, 11],
+    darkgray: [169, 169, 169],
+    darkgreen: [0, 100, 0],
+    darkgrey: [169, 169, 169],
+    darkkhaki: [189, 183, 107],
+    darkmagenta: [139, 0, 139],
+    darkolivegreen: [85, 107, 47],
+    darkorange: [255, 140, 0],
+    darkorchid: [153, 50, 204],
+    darkred: [139, 0, 0],
+    darksalmon: [233, 150, 122],
+    darkseagreen: [143, 188, 143],
+    darkslateblue: [72, 61, 139],
+    darkslategray: [47, 79, 79],
+    darkslategrey: [47, 79, 79],
+    darkturquoise: [0, 206, 209],
+    darkviolet: [148, 0, 211],
+    deeppink: [255, 20, 147],
+    deepskyblue: [0, 191, 255],
+    dimgray: [105, 105, 105],
+    dimgrey: [105, 105, 105],
+    dodgerblue: [30, 144, 255],
+    firebrick: [178, 34, 34],
+    floralwhite: [255, 250, 240],
+    forestgreen: [34, 139, 34],
+    fuchsia: [255, 0, 255],
+    gainsboro: [220, 220, 220],
+    ghostwhite: [248, 248, 255],
+    gold: [255, 215, 0],
+    goldenrod: [218, 165, 32],
+    gray: [128, 128, 128],
+    green: [0, 128, 0],
+    greenyellow: [173, 255, 47],
+    grey: [128, 128, 128],
+    honeydew: [240, 255, 240],
+    hotpink: [255, 105, 180],
+    indianred: [205, 92, 92],
+    indigo: [75, 0, 130],
+    ivory: [255, 255, 240],
+    khaki: [240, 230, 140],
+    lavender: [230, 230, 250],
+    lavenderblush: [255, 240, 245],
+    lawngreen: [124, 252, 0],
+    lemonchiffon: [255, 250, 205],
+    lightblue: [173, 216, 230],
+    lightcoral: [240, 128, 128],
+    lightcyan: [224, 255, 255],
+    lightgoldenrodyellow: [250, 250, 210],
+    lightgray: [211, 211, 211],
+    lightgreen: [144, 238, 144],
+    lightgrey: [211, 211, 211],
+    lightpink: [255, 182, 193],
+    lightsalmon: [255, 160, 122],
+    lightseagreen: [32, 178, 170],
+    lightskyblue: [135, 206, 250],
+    lightslategray: [119, 136, 153],
+    lightslategrey: [119, 136, 153],
+    lightsteelblue: [176, 196, 222],
+    lightyellow: [255, 255, 224],
+    lime: [0, 255, 0],
+    limegreen: [50, 205, 50],
+    linen: [250, 240, 230],
+    magenta: [255, 0, 255],
+    maroon: [128, 0, 0],
+    mediumaquamarine: [102, 205, 170],
+    mediumblue: [0, 0, 205],
+    mediumorchid: [186, 85, 211],
+    mediumpurple: [147, 112, 219],
+    mediumseagreen: [60, 179, 113],
+    mediumslateblue: [123, 104, 238],
+    mediumspringgreen: [0, 250, 154],
+    mediumturquoise: [72, 209, 204],
+    mediumvioletred: [199, 21, 133],
+    midnightblue: [25, 25, 112],
+    mintcream: [245, 255, 250],
+    mistyrose: [255, 228, 225],
+    moccasin: [255, 228, 181],
+    navajowhite: [255, 222, 173],
+    navy: [0, 0, 128],
+    oldlace: [253, 245, 230],
+    olive: [128, 128, 0],
+    olivedrab: [107, 142, 35],
+    orange: [255, 165, 0],
+    orangered: [255, 69, 0],
+    orchid: [218, 112, 214],
+    palegoldenrod: [238, 232, 170],
+    palegreen: [152, 251, 152],
+    paleturquoise: [175, 238, 238],
+    palevioletred: [219, 112, 147],
+    papayawhip: [255, 239, 213],
+    peachpuff: [255, 218, 185],
+    peru: [205, 133, 63],
+    pink: [255, 192, 203],
+    plum: [221, 160, 221],
+    powderblue: [176, 224, 230],
+    purple: [128, 0, 128],
+    rebeccapurple: [102, 51, 153],
+    red: [255, 0, 0],
+    rosybrown: [188, 143, 143],
+    royalblue: [65, 105, 225],
+    saddlebrown: [139, 69, 19],
+    salmon: [250, 128, 114],
+    sandybrown: [244, 164, 96],
+    seagreen: [46, 139, 87],
+    seashell: [255, 245, 238],
+    sienna: [160, 82, 45],
+    silver: [192, 192, 192],
+    skyblue: [135, 206, 235],
+    slateblue: [106, 90, 205],
+    slategray: [112, 128, 144],
+    slategrey: [112, 128, 144],
+    snow: [255, 250, 250],
+    springgreen: [0, 255, 127],
+    steelblue: [70, 130, 180],
+    tan: [210, 180, 140],
+    teal: [0, 128, 128],
+    thistle: [216, 191, 216],
+    tomato: [255, 99, 71],
+    turquoise: [64, 224, 208],
+    violet: [238, 130, 238],
+    wheat: [245, 222, 179],
+    white: [255, 255, 255],
+    whitesmoke: [245, 245, 245],
+    yellow: [255, 255, 0],
+    yellowgreen: [154, 205, 50],
+};