@ngroznykh/papirus 0.3.5 → 0.3.7

package/LICENSE

@@ -1,21 +1,19 @@
-MIT License
+Papirus Dual License
 
 Copyright (c) 2026 Papirus Contributors
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+This project is dual-licensed:
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
+1) GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later)
+   You may use, modify, and distribute this software under AGPL terms.
+   If you modify and run this software (including over a network), you must
+   provide complete corresponding source code under AGPL.
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+2) Commercial License
+   For proprietary, closed-source, or commercial use cases that are not
+   compatible with AGPL obligations, you must obtain a commercial license.
+   See LICENSE_COMMERCIAL.md for terms and contact details.
+
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+Full AGPL text: https://www.gnu.org/licenses/agpl-3.0.txt

package/LICENSE.ru.md

@@ -0,0 +1,21 @@
+# Лицензирование Papirus (перевод)
+
+Этот документ является русскоязычным переводом и пояснением файла `LICENSE`.
+
+В случае расхождений приоритет имеет оригинальный текст `LICENSE` (английская версия).
+
+## Dual License
+
+Проект распространяется по двойной лицензии:
+
+1. **GNU Affero General Public License v3.0 или новее (AGPL-3.0-or-later)**
+   - Вы можете использовать, изменять и распространять ПО по условиям AGPL.
+   - Если вы модифицируете ПО и запускаете его (включая сетевой доступ), вы обязаны предоставить полный исходный код соответствующей версии по AGPL.
+
+2. **Коммерческая лицензия**
+   - Для проприетарного/закрытого или иного коммерческого использования, несовместимого с обязанностями AGPL, требуется коммерческая лицензия.
+   - См. `LICENSE_COMMERCIAL.md`.
+
+SPDX: `AGPL-3.0-or-later`
+
+Полный текст AGPL: https://www.gnu.org/licenses/agpl-3.0.txt

package/README.md

@@ -1,7 +1,7 @@
 # Papirus
 
 [![npm version](https://img.shields.io/npm/v/%40ngroznykh%2Fpapirus.svg)](https://www.npmjs.com/package/@ngroznykh/papirus)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![License: AGPL%20v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
 
 TypeScript library for building interactive 2D diagrams and flowcharts on HTML Canvas. Supports nodes, edges, groups, styling, serialization, export, and interactivity.
 
@@ -65,6 +65,7 @@ renderer.enableInteractions();
 - [Utils](./docs/utils.md)
 - [Changelog](./CHANGELOG.md)
 - [Security Policy](./SECURITY.md)
+- [Open Source Preparation](./docs/OPEN_SOURCE_PREPARATION.md)
 
 ## Features
 
@@ -193,6 +194,20 @@ npm run test:coverage   # Tests with coverage
 
 Please read [CONTRIBUTING.md](./CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
 
+Key governance and contribution files:
+
+- [CONTRIBUTING.md](./CONTRIBUTING.md) / [CONTRIBUTING.ru.md](./CONTRIBUTING.ru.md)
+- [SECURITY.md](./SECURITY.md) / [SECURITY.ru.md](./SECURITY.ru.md)
+- [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) / [CODE_OF_CONDUCT.ru.md](./CODE_OF_CONDUCT.ru.md)
+
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](./LICENSE) file for details.
+This project uses dual licensing:
+
+- `AGPL-3.0-or-later` for open-source usage
+- Commercial license for proprietary/closed-source commercial usage
+
+See:
+
+- [LICENSE](./LICENSE)
+- [LICENSE_COMMERCIAL.md](./LICENSE_COMMERCIAL.md)

package/README.ru.md

@@ -1,7 +1,7 @@
 # Papirus
 
 [![npm version](https://img.shields.io/npm/v/%40ngroznykh%2Fpapirus.svg)](https://www.npmjs.com/package/@ngroznykh/papirus)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![License: AGPL%20v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
 
 Papirus — библиотека на TypeScript для построения интерактивных 2D‑схем на HTML Canvas. Поддерживает узлы, связи, группы, стили, сериализацию, экспорт и интерактивность.
 
@@ -65,6 +65,7 @@ renderer.enableInteractions();
 - [Утилиты](./docs/utils.md)
 - [Changelog](./CHANGELOG.md)
 - [Политика безопасности](./SECURITY.md)
+- [Чеклист подготовки к Open Source](./docs/OPEN_SOURCE_PREPARATION.ru.md)
 
 ## Возможности
 
@@ -194,6 +195,20 @@ npm run test:coverage   # Тесты с покрытием
 
 См. [CONTRIBUTING.md](./CONTRIBUTING.md).
 
+Ключевые файлы для open-source процесса:
+
+- [CONTRIBUTING.md](./CONTRIBUTING.md) / [CONTRIBUTING.ru.md](./CONTRIBUTING.ru.md)
+- [SECURITY.md](./SECURITY.md) / [SECURITY.ru.md](./SECURITY.ru.md)
+- [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md) / [CODE_OF_CONDUCT.ru.md](./CODE_OF_CONDUCT.ru.md)
+
 ## Лицензия
 
-MIT — см. [LICENSE](./LICENSE).
+Проект использует dual licensing:
+
+- `AGPL-3.0-or-later` для open-source использования
+- Коммерческая лицензия для проприетарного/закрытого коммерческого использования
+
+См.:
+
+- [LICENSE](./LICENSE) / [LICENSE.ru.md](./LICENSE.ru.md)
+- [LICENSE_COMMERCIAL.md](./LICENSE_COMMERCIAL.md) / [LICENSE_COMMERCIAL.ru.md](./LICENSE_COMMERCIAL.ru.md)

package/dist/elements/TextLabel.d.ts

@@ -89,7 +89,7 @@ export declare class TextLabel {
     /**
      * Render the label within bounds
      */
-    render(ctx: CanvasRenderingContext2D, bounds: Bounds): void;
+    render(ctx: CanvasRenderingContext2D, bounds: Bounds, alignOverride?: 'left' | 'center' | 'right'): void;
     /**
      * Render at a specific point (for edge labels)
      */

package/dist/elements/TextLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLabel.d.ts","sourceRoot":"","sources":["../../src/elements/TextLabel.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextLabel.d.ts","sourceRoot":"","sources":["../../src/elements/TextLabel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG1D,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAaD;;GAEG;AACH,qBAAa,SAAS;IACpB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,WAAW,CAAY;IAC/B,OAAO,CAAC,SAAS,CAAC,CAAS;IAC3B,OAAO,CAAC,aAAa,CAAC,CAAS;IAC/B,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAgB;IAC9B,OAAO,CAAC,cAAc,CAAK;IAC3B,OAAO,CAAC,eAAe,CAAK;IAC5B,OAAO,CAAC,WAAW,CAAC,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAC,CAAa;IAC/B,OAAO,CAAC,aAAa,CAAQ;gBAEjB,OAAO,EAAE,gBAAgB;IAYrC;;OAEG;IACH,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAOrB;IAED;;;OAGG;IACH,IAAI,YAAY,IAAI,MAAM,GAAG,SAAS,CAErC;IAED,IAAI,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAKzC;IAED;;OAEG;IACH,IAAI,KAAK,IAAI,SAAS,CAErB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,SAAS,EAMzB;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,GAAG,SAAS,CAEnC;IAED,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAOvC;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS,CAEjC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAQrC;IAED;;OAEG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI;IAShD;;OAEG;IACH,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAQxB;IAED;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAQvB;IAED,iBAAiB,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI;IAWnD,WAAW,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,IAAI;IAIvC;;OAEG;IACH,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED;;OAEG;IACH,OAAO,CAAC,GAAG,EAAE,wBAAwB,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;IAsCzE;;OAEG;IACH,MAAM,CAAC,GAAG,EAAE,wBAAwB,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IA+CxG;;OAEG;IACH,QAAQ,CAAC,GAAG,EAAE,wBAAwB,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI;IAoB3D,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,QAAQ;CA2BjB"}

package/dist/papirus.js

@@ -2081,11 +2081,15 @@ class TextLabel {
   /**
    * Render the label within bounds
    */
-  render(ctx, bounds) {
+  render(ctx, bounds, alignOverride) {
     if (this._lines.length === 0) {
       this.measure(ctx);
     }
     this.applyStyle(ctx);
+    const align = alignOverride ?? this._style.align ?? "center";
+    if (alignOverride) {
+      ctx.textAlign = align;
+    }
     const lineHeight = (this._style.fontSize ?? 14) * 1.2;
     const totalHeight = this._lines.length * lineHeight;
     const margin = this._margin;
@@ -2096,7 +2100,7 @@ class TextLabel {
       height: Math.max(0, bounds.height - margin * 2)
     };
     let x;
-    switch (this._style.align) {
+    switch (align) {
       case "left":
         x = innerBounds.x + this._padding;
         break;
@@ -8673,11 +8677,15 @@ class SvgExporter {
     const fill = style.fillColor ?? "#ffffff";
     const stroke = style.strokeColor ?? "#333333";
     const strokeWidth = style.strokeWidth ?? 2;
-    const opacity = style.opacity ?? 1;
+    const baseOpacity = style.opacity ?? 1;
+    const fillOpacity = (style.fillOpacity ?? 1) * baseOpacity;
+    const strokeOpacity = (style.strokeOpacity ?? 1) * baseOpacity;
+    const dash = style.lineDash?.length ? ` stroke-dasharray="${style.lineDash.join(" ")}"` : "";
+    const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
     let shape;
     switch (node.typeName) {
       case "rectangle": {
-        const radius = (style.cornerRadius ?? 0).toString();
+        const radius = this.getNodeCornerRadius(node, bounds);
         shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" rx="${radius}" ry="${radius}"`;
         break;
       }
@@ -8703,9 +8711,11 @@ class SvgExporter {
         shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
       }
     }
-    const label = node.label ? this.renderTextLabel(node.label.text, node.getCenter(), node.label.style) : "";
+    const label = node.label ? this.renderTextLabel(node.label.text, node.getLabelPosition(), node.label.style) : "";
+    const icon = this.renderNodeIcon(node, bounds);
     return [
-      `${shape} fill="${fill}" stroke="${stroke}" stroke-width="${strokeWidth}" opacity="${opacity}"/>`,
+      `${shape} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`,
+      icon,
       label
     ].join("");
   }
@@ -8892,12 +8902,236 @@ class SvgExporter {
     const fontSize = style.fontSize ?? 14;
     const fontFamily = style.fontFamily ?? "sans-serif";
     const fontWeight = style.fontWeight ?? "normal";
+    const opacity = style.opacity ?? 1;
     const anchor = style.align === "left" ? "start" : style.align === "right" ? "end" : "middle";
     const baseline = style.baseline === "top" ? "text-before-edge" : style.baseline === "bottom" ? "text-after-edge" : "middle";
-    return `<text x="${point.x}" y="${point.y}" fill="${fill}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}">${this.escapeText(
+    return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}">${this.escapeText(
       text
     )}</text>`;
   }
+  getNodeCornerRadius(node, bounds) {
+    const rectangleRadius = "cornerRadius" in node && typeof node.cornerRadius === "number" ? node.cornerRadius ?? 0 : node.style.cornerRadius ?? 0;
+    return Math.max(0, Math.min(rectangleRadius, bounds.width / 2, bounds.height / 2));
+  }
+  renderNodeIcon(node, nodeBounds) {
+    const icon = node.icon;
+    if (!icon) {
+      return "";
+    }
+    const opts = icon.options;
+    const iconSize = icon.getSize();
+    if (iconSize.width <= 0 || iconSize.height <= 0) {
+      return "";
+    }
+    const iconBoxSize = this.getIconBoxSize(opts, iconSize);
+    const iconBounds = this.getIconBounds(nodeBounds, iconBoxSize, opts.placement ?? "center");
+    const drawRect = this.getIconDrawRect(iconBounds, opts, iconSize);
+    if (drawRect.width <= 0 || drawRect.height <= 0) {
+      return "";
+    }
+    const href = this.resolveIconHref(opts);
+    if (!href) {
+      return "";
+    }
+    const opacity = opts.opacity ?? 1;
+    return `<image href="${this.escapeAttribute(href)}" x="${drawRect.x}" y="${drawRect.y}" width="${drawRect.width}" height="${drawRect.height}" opacity="${opacity}" preserveAspectRatio="none"/>`;
+  }
+  getIconBoxSize(opts, imageSize) {
+    const padding = opts.padding ?? 8;
+    const margin = Math.max(0, opts.margin ?? 0);
+    return {
+      width: imageSize.width + padding * 2 + margin * 2,
+      height: imageSize.height + padding * 2 + margin * 2
+    };
+  }
+  getIconBounds(bounds, iconBoxSize, placement) {
+    switch (placement) {
+      case "top":
+        return { x: bounds.x, y: bounds.y, width: bounds.width, height: iconBoxSize.height };
+      case "bottom":
+        return {
+          x: bounds.x,
+          y: bounds.y + bounds.height - iconBoxSize.height,
+          width: bounds.width,
+          height: iconBoxSize.height
+        };
+      case "left":
+        return { x: bounds.x, y: bounds.y, width: iconBoxSize.width, height: bounds.height };
+      case "right":
+        return {
+          x: bounds.x + bounds.width - iconBoxSize.width,
+          y: bounds.y,
+          width: iconBoxSize.width,
+          height: bounds.height
+        };
+      case "top-left":
+        return { x: bounds.x, y: bounds.y, width: iconBoxSize.width, height: iconBoxSize.height };
+      case "top-right":
+        return {
+          x: bounds.x + bounds.width - iconBoxSize.width,
+          y: bounds.y,
+          width: iconBoxSize.width,
+          height: iconBoxSize.height
+        };
+      case "bottom-left":
+        return {
+          x: bounds.x,
+          y: bounds.y + bounds.height - iconBoxSize.height,
+          width: iconBoxSize.width,
+          height: iconBoxSize.height
+        };
+      case "bottom-right":
+        return {
+          x: bounds.x + bounds.width - iconBoxSize.width,
+          y: bounds.y + bounds.height - iconBoxSize.height,
+          width: iconBoxSize.width,
+          height: iconBoxSize.height
+        };
+      case "center":
+      default:
+        return bounds;
+    }
+  }
+  getIconDrawRect(bounds, opts, imageSize) {
+    const padding = opts.padding ?? 8;
+    const margin = Math.max(0, opts.margin ?? 0);
+    const fit = opts.fit ?? "none";
+    const scaleWithBounds = opts.scaleWithBounds ?? false;
+    const align = opts.align ?? "center";
+    const verticalAlign = opts.verticalAlign ?? "center";
+    const offsetX = opts.offsetX ?? 0;
+    const offsetY = opts.offsetY ?? 0;
+    const innerBounds = {
+      x: bounds.x + margin,
+      y: bounds.y + margin,
+      width: Math.max(0, bounds.width - margin * 2),
+      height: Math.max(0, bounds.height - margin * 2)
+    };
+    const availableWidth = Math.max(0, innerBounds.width - padding * 2);
+    const availableHeight = Math.max(0, innerBounds.height - padding * 2);
+    let drawWidth = opts.width ?? imageSize.width;
+    let drawHeight = opts.height ?? imageSize.height;
+    if (scaleWithBounds) {
+      if ((fit === "contain" || fit === "cover") && imageSize.width > 0 && imageSize.height > 0) {
+        const scaleX = availableWidth / imageSize.width;
+        const scaleY = availableHeight / imageSize.height;
+        const scale = fit === "contain" ? Math.min(scaleX, scaleY) : Math.max(scaleX, scaleY);
+        drawWidth = imageSize.width * scale;
+        drawHeight = imageSize.height * scale;
+      } else if (fit === "stretch") {
+        drawWidth = availableWidth;
+        drawHeight = availableHeight;
+      }
+    }
+    drawWidth = Math.min(Math.max(0, drawWidth), Math.max(0, availableWidth));
+    drawHeight = Math.min(Math.max(0, drawHeight), Math.max(0, availableHeight));
+    let x = innerBounds.x + padding;
+    let y = innerBounds.y + padding;
+    if (align === "center") {
+      x = innerBounds.x + (innerBounds.width - drawWidth) / 2;
+    } else if (align === "right") {
+      x = innerBounds.x + innerBounds.width - drawWidth - padding;
+    }
+    if (verticalAlign === "center") {
+      y = innerBounds.y + (innerBounds.height - drawHeight) / 2;
+    } else if (verticalAlign === "bottom") {
+      y = innerBounds.y + innerBounds.height - drawHeight - padding;
+    }
+    return {
+      x: x + offsetX,
+      y: y + offsetY,
+      width: drawWidth,
+      height: drawHeight
+    };
+  }
+  resolveIconHref(opts) {
+    const source = opts.source;
+    if (source instanceof HTMLImageElement) {
+      return source.src;
+    }
+    if (!source) {
+      return "";
+    }
+    if (this.isSvgMarkup(source)) {
+      return this.svgToDataUrl(this.tintSvg(source, opts.strokeColor, opts.fillColor));
+    }
+    const shouldInlineSvg = source.toLowerCase().endsWith(".svg");
+    if (shouldInlineSvg) {
+      const svgText = this.readSvgFromUrlSync(source);
+      if (svgText) {
+        return this.svgToDataUrl(this.tintSvg(svgText, opts.strokeColor, opts.fillColor));
+      }
+    }
+    return source;
+  }
+  readSvgFromUrlSync(url) {
+    if (typeof XMLHttpRequest === "undefined") {
+      return null;
+    }
+    try {
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", url, false);
+      xhr.send();
+      if (xhr.status >= 200 && xhr.status < 300) {
+        return xhr.responseText || null;
+      }
+    } catch {
+    }
+    return null;
+  }
+  isSvgMarkup(value) {
+    const trimmed = value.trim().toLowerCase();
+    return trimmed.startsWith("<svg") || trimmed.includes("<svg");
+  }
+  styleSetColor(style, key, color) {
+    const hasKey = new RegExp(`${key}\\s*:`).test(style);
+    if (hasKey) {
+      return style.replace(new RegExp(`${key}\\s*:[^;]+`), `${key}:${color}`);
+    }
+    const suffix = style.trim().endsWith(";") || style.trim() === "" ? "" : ";";
+    return `${style}${suffix}${key}:${color};`;
+  }
+  tintSvg(svgText, strokeColor, fillColor) {
+    if (!strokeColor && !fillColor) return svgText;
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgText, "image/svg+xml");
+    const root = doc.documentElement;
+    if (!root || root.nodeName.toLowerCase() === "parsererror") {
+      return svgText;
+    }
+    const all = [root, ...Array.from(root.querySelectorAll("*"))];
+    for (const el of all) {
+      const stroke = el.getAttribute("stroke");
+      if (strokeColor && stroke !== null && stroke.toLowerCase() !== "none") {
+        el.setAttribute("stroke", strokeColor);
+      }
+      const fill = el.getAttribute("fill");
+      if (fillColor && fill !== null && fill.toLowerCase() !== "none") {
+        el.setAttribute("fill", fillColor);
+      }
+      const style = el.getAttribute("style");
+      if (style) {
+        let next = style;
+        if (strokeColor && /stroke\s*:\s*(?!none)/.test(style)) {
+          next = this.styleSetColor(next, "stroke", strokeColor);
+        }
+        if (fillColor && /fill\s*:\s*(?!none)/.test(style)) {
+          next = this.styleSetColor(next, "fill", fillColor);
+        }
+        if (next !== style) {
+          el.setAttribute("style", next);
+        }
+      }
+    }
+    return new XMLSerializer().serializeToString(root);
+  }
+  svgToDataUrl(svg) {
+    const encoded = encodeURIComponent(svg).replace(/%0A/g, "").replace(/%0D/g, "").replace(/%09/g, " ").replace(/%20/g, " ");
+    return `data:image/svg+xml;utf8,${encoded}`;
+  }
+  escapeAttribute(value) {
+    return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
   createEmptySvg(width, height, backgroundColor, includeBackground) {
     return [
       `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,