@mapcreator/sdk 0.0.9 → 0.0.10

package/dist/esm/utils/svgHelpers.js

@@ -1,1512 +0,0 @@
-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],
-};