@ngroznykh/papirus 0.3.6 → 0.3.8

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/papirus.js

@@ -8677,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;
       }
@@ -8707,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 = this.renderNodeLabel(node, bounds);
+    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("");
   }
@@ -8721,14 +8727,72 @@ class SvgExporter {
     const style = edge.style;
     const stroke = style.strokeColor ?? "#666666";
     const strokeWidth = style.strokeWidth ?? 2;
-    const opacity = style.opacity ?? 1;
+    const strokeOpacity = (style.strokeOpacity ?? 1) * (style.opacity ?? 1);
+    const lineCap = style.lineCap ? ` stroke-linecap="${style.lineCap}"` : "";
+    const lineJoin = style.lineJoin ? ` stroke-linejoin="${style.lineJoin}"` : "";
     const dashValues = style.flowDash ?? style.lineDash;
     const dash = dashValues ? ` stroke-dasharray="${dashValues.join(" ")}"` : "";
     const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
     const d = this.buildPath(edge);
     const markerShapes = this.renderEdgeMarkers(edge, stroke);
-    const label = edge.label ? this.renderTextLabel(edge.label.text, this.getEdgeLabelPoint(edge, edgeLabelOffset), edge.label.style) : "";
-    return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" opacity="${opacity}" color="${stroke}"${dash}${dashOffset}/>${markerShapes}${label}`;
+    const label = this.renderEdgeLabel(edge, edgeLabelOffset);
+    return `<path d="${d}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}" color="${stroke}"${lineCap}${lineJoin}${dash}${dashOffset}/>${markerShapes}${label}`;
+  }
+  renderEdgeLabel(edge, edgeLabelOffset) {
+    if (!edge.label) {
+      return "";
+    }
+    const labelPoint = this.getEdgeLabelPoint(edge, edgeLabelOffset);
+    const text = this.renderTextLabel(edge.label.text, labelPoint, edge.label.style);
+    const bg = this.renderEdgeLabelBackground(edge, labelPoint);
+    return `${bg}${text}`;
+  }
+  renderEdgeLabelBackground(edge, point) {
+    if (!edge.label) {
+      return "";
+    }
+    const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.padding, edge.label.margin);
+    const bgPadding = edge.labelBackground?.padding ?? EDGE_LABEL_BACKGROUND_PADDING;
+    const bgColor = edge.labelBackground?.color ?? "#ffffff";
+    const bgOpacity = edge.labelBackground?.opacity ?? 1;
+    const bgRadius = edge.labelBackground?.borderRadius ?? EDGE_LABEL_BACKGROUND_RADIUS;
+    const x = point.x - metrics.width / 2 - bgPadding;
+    const y = point.y - metrics.height / 2 - bgPadding;
+    const width = metrics.width + bgPadding * 2;
+    const height = metrics.height + bgPadding * 2;
+    const radius = Math.max(0, Math.min(bgRadius, width / 2, height / 2));
+    if (radius <= 0) {
+      return `<rect x="${x}" y="${y}" width="${width}" height="${height}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
+    }
+    return `<rect x="${x}" y="${y}" width="${width}" height="${height}" rx="${radius}" ry="${radius}" fill="${bgColor}" fill-opacity="${bgOpacity}"/>`;
+  }
+  measureTextLabel(text, style = {}, padding = 8, margin = 0) {
+    const fontSize = style.fontSize ?? 14;
+    const fontFamily = style.fontFamily ?? "sans-serif";
+    const fontWeight = style.fontWeight ?? "normal";
+    const lineHeight = fontSize * 1.2;
+    const lines = text.split("\n");
+    let maxWidth = 0;
+    if (typeof document !== "undefined") {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+        for (const line of lines) {
+          maxWidth = Math.max(maxWidth, ctx.measureText(line).width);
+        }
+      }
+    }
+    if (maxWidth === 0) {
+      const longestLine = lines.reduce((max, line) => line.length > max.length ? line : max, "");
+      maxWidth = longestLine.length * fontSize * 0.6;
+    }
+    const resolvedPadding = Math.max(0, padding);
+    const resolvedMargin = Math.max(0, margin);
+    return {
+      width: maxWidth + resolvedPadding * 2 + resolvedMargin * 2,
+      height: lines.length * lineHeight + resolvedPadding * 2 + resolvedMargin * 2
+    };
   }
   resolveMarkerConfig(edge, side) {
     const marker = side === "start" ? edge.startMarker : edge.endMarker;
@@ -8896,11 +8960,281 @@ 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(
-      text
-    )}</text>`;
+    const lines = text.split("\n");
+    if (lines.length <= 1) {
+      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>`;
+    }
+    const lineHeight = fontSize * 1.2;
+    const startY = point.y - (lines.length - 1) * lineHeight / 2;
+    const tspans = lines.map((line, index) => `<tspan x="${point.x}" y="${startY + index * lineHeight}">${this.escapeText(line)}</tspan>`).join("");
+    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}">${tspans}</text>`;
+  }
+  renderNodeLabel(node, bounds) {
+    const label = node.label;
+    if (!label) {
+      return "";
+    }
+    const style = label.style;
+    const fontSize = style.fontSize ?? 14;
+    const lineHeight = fontSize * 1.2;
+    const lines = label.text.split("\n");
+    const textHeight = Math.max(lineHeight, lines.length * lineHeight);
+    const padding = Math.max(0, label.padding);
+    const margin = Math.max(0, label.margin);
+    const inset = padding + margin;
+    const align = style.align ?? "center";
+    const placement = node.labelPlacement === "auto" ? "center" : node.labelPlacement;
+    const inner = {
+      x: bounds.x + margin,
+      y: bounds.y + margin,
+      width: Math.max(0, bounds.width - margin * 2),
+      height: Math.max(0, bounds.height - margin * 2)
+    };
+    let x = inner.x + inner.width / 2;
+    if (align === "left") {
+      x = inner.x + inset;
+    } else if (align === "right") {
+      x = inner.x + inner.width - inset;
+    }
+    let y = inner.y + inner.height / 2;
+    if (placement === "top") {
+      y = inner.y + inset + textHeight / 2;
+    } else if (placement === "bottom") {
+      y = inner.y + inner.height - inset - textHeight / 2;
+    } else if (placement === "left") {
+      x = inner.x + inset;
+    } else if (placement === "right") {
+      x = inner.x + inner.width - inset;
+    }
+    return this.renderTextLabel(label.text, { x, y }, style);
+  }
+  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 [