@polotno/pdf-export 0.1.18 → 0.1.19

package/lib/spot-colors.js

@@ -0,0 +1,141 @@
+import { Util } from 'konva/lib/Util.js';
+/**
+ * Normalize color to a consistent format for matching using Konva's color parser
+ * This ensures consistency with how Polotno/Konva handles colors
+ * @param color - Color in any format (string or [r, g, b, a] array)
+ * @returns Normalized color string in rgba format
+ */
+export function normalizeColor(color) {
+    if (!color) {
+        return null;
+    }
+    try {
+        // Handle array format [r, g, b, a]
+        if (Array.isArray(color)) {
+            const r = Math.round(color[0]);
+            const g = Math.round(color[1]);
+            const b = Math.round(color[2]);
+            const a = color[3] !== undefined ? color[3] : 1;
+            return `rgba(${r},${g},${b},${a})`;
+        }
+        // Handle string format
+        if (typeof color !== 'string') {
+            return null;
+        }
+        // Use Konva's colorToRGBA for consistent color parsing
+        const rgba = Util.colorToRGBA(color);
+        if (!rgba) {
+            return null;
+        }
+        // Konva returns {r, g, b, a} object
+        // Normalize to rgba string format
+        return `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a})`;
+    }
+    catch (error) {
+        return null;
+    }
+}
+/**
+ * Get spot color definition for a given color
+ * @param color - Color to check
+ * @param spotColorConfig - Spot color configuration
+ * @returns Spot color definition or null
+ */
+export function getSpotColorForColor(color, spotColorConfig) {
+    if (!spotColorConfig || !color) {
+        return null;
+    }
+    const normalizedColor = normalizeColor(color);
+    if (!normalizedColor) {
+        return null;
+    }
+    // Check direct match first
+    if (spotColorConfig[color]) {
+        return spotColorConfig[color];
+    }
+    // Check normalized match
+    if (spotColorConfig[normalizedColor]) {
+        return spotColorConfig[normalizedColor];
+    }
+    // Check all configured colors with normalization
+    for (const [configColor, definition] of Object.entries(spotColorConfig)) {
+        const normalizedConfigColor = normalizeColor(configColor);
+        if (normalizedConfigColor === normalizedColor) {
+            return definition;
+        }
+    }
+    return null;
+}
+/**
+ * Register a spot color using PDFKit's built-in addSpotColor method
+ * @param doc - PDFKit document
+ * @param spotName - Name of the spot color
+ * @param spotColorDef - Spot color definition with CMYK fallback
+ * @returns Reference to the registered spot color
+ */
+export function registerSpotColor(doc, spotName, spotColorDef) {
+    const { cmyk = [0, 0, 0, 1] } = spotColorDef;
+    // Convert CMYK from 0-1 range to 0-100 percentage range for PDFKit
+    const c = Math.max(0, Math.min(100, cmyk[0] * 100));
+    const m = Math.max(0, Math.min(100, cmyk[1] * 100));
+    const y = Math.max(0, Math.min(100, cmyk[2] * 100));
+    const k = Math.max(0, Math.min(100, cmyk[3] * 100));
+    // Sanitize spot color name for PDF (no spaces or special characters)
+    const sanitizedName = spotName.replace(/[^a-zA-Z0-9-_]/g, '_');
+    // Use PDFKit's built-in spot color support
+    doc.addSpotColor(sanitizedName, c, m, y, k);
+    return {
+        name: sanitizedName,
+        cmyk: [c / 100, m / 100, y / 100, k / 100], // Store in 0-1 range
+    };
+}
+/**
+ * Enable spot color support on a PDFDocument by intercepting color methods
+ * @param doc - PDFKit document
+ * @param spotColorConfig - Spot color configuration mapping
+ */
+export function enableSpotColorSupport(doc, spotColorConfig) {
+    if (!spotColorConfig || Object.keys(spotColorConfig).length === 0) {
+        return;
+    }
+    // Store configuration and registered spot colors on the document
+    doc._spotColors = new Map();
+    doc._spotColorConfig = spotColorConfig;
+    // Register all spot colors using PDFKit's built-in addSpotColor method
+    for (const [color, definition] of Object.entries(spotColorConfig)) {
+        const spotName = definition.name || `Spot_${color}`;
+        const registered = registerSpotColor(doc, spotName, definition);
+        // Cache the registered color definition
+        const normalizedColor = normalizeColor(color);
+        doc._spotColors.set(normalizedColor, registered);
+        doc._spotColors.set(color, registered); // Also store original format
+    }
+    // Intercept fillColor method to automatically use spot colors
+    const originalFillColor = doc.fillColor.bind(doc);
+    doc.fillColor = function (color, opacity) {
+        const spotColorDef = getSpotColorForColor(color, spotColorConfig);
+        if (spotColorDef) {
+            const normalizedColor = normalizeColor(color);
+            const registered = doc._spotColors.get(normalizedColor) || doc._spotColors.get(color);
+            if (registered) {
+                // Use PDFKit's fillColor with the spot color name directly
+                return originalFillColor(registered.name, opacity);
+            }
+        }
+        return originalFillColor(color, opacity);
+    };
+    // Intercept strokeColor method to automatically use spot colors
+    const originalStrokeColor = doc.strokeColor.bind(doc);
+    doc.strokeColor = function (color, opacity) {
+        const spotColorDef = getSpotColorForColor(color, spotColorConfig);
+        if (spotColorDef) {
+            const normalizedColor = normalizeColor(color);
+            const registered = doc._spotColors.get(normalizedColor) || doc._spotColors.get(color);
+            if (registered) {
+                // Use PDFKit's strokeColor with the spot color name directly
+                return originalStrokeColor(registered.name, opacity);
+            }
+        }
+        return originalStrokeColor(color, opacity);
+    };
+}

package/lib/svg-render.d.ts

@@ -0,0 +1,9 @@
+import { ImageCache } from './utils.js';
+export interface SVGElement {
+    src: string;
+    width: number;
+    height: number;
+    opacity: number;
+    colorsReplace: Record<string, string>;
+}
+export declare function renderSVG(doc: any, element: SVGElement, cache?: ImageCache | null): Promise<void>;

package/lib/svg-render.js

@@ -1,29 +1,20 @@
-const svg = require('./svg');
-
-async function renderSVG(doc, element) {
-  const svgStr = await svg.urlToString(element.src);
-  const src = svg.replaceColors(
-    svgStr,
-    new Map(Object.entries(element.colorsReplace))
-  );
-  const str = await svg.urlToString(src);
-
-  doc.addSVG(str, 0, 0, {
-    // Use 'none' to allow stretching to exact dimensions, 'xMinYMin meet' to preserve aspect ratio
-    preserveAspectRatio: 'none',
-    width: element.width,
-    height: element.height,
-    opacity: element.opacity,
-    colorCallback: (colors) => {
-      if (!colors) {
-        return colors;
-      }
-      const [color, opacity] = colors;
-      return [color, opacity * element.opacity];
-    },
-  });
+import * as svg from './svg.js';
+export async function renderSVG(doc, element, cache = null) {
+    const svgStr = await svg.urlToString(element.src, cache);
+    const src = svg.replaceColors(svgStr, new Map(Object.entries(element.colorsReplace)));
+    const str = await svg.urlToString(src, cache);
+    doc.addSVG(str, 0, 0, {
+        // Use 'none' to allow stretching to exact dimensions, 'xMinYMin meet' to preserve aspect ratio
+        preserveAspectRatio: 'none',
+        width: element.width,
+        height: element.height,
+        opacity: element.opacity,
+        colorCallback: (colors) => {
+            if (!colors) {
+                return colors;
+            }
+            const [color, opacity] = colors;
+            return [color, opacity * element.opacity];
+        },
+    });
 }
-
-module.exports = {
-  renderSVG,
-};

package/lib/svg.d.ts

@@ -0,0 +1,11 @@
+import { ImageCache } from './utils.js';
+export declare function urlToBase64(url: string, cache?: ImageCache | null): Promise<string>;
+export declare function urlToString(url: string, cache?: ImageCache | null): Promise<string>;
+export declare function getColors(svgString: string): string[];
+export declare function svgToURL(s: string): string;
+export declare function getSvgSize(url: string): Promise<{
+    width: number;
+    height: number;
+}>;
+export declare function fixSize(svgString: string): string;
+export declare function replaceColors(svgString: string, replaceMap: Map<string, string>): string;

package/lib/svg.js

@@ -1,245 +1,216 @@
-const Konva = require('konva');
-var nodeFetch = require('node-fetch').default;
-const xmldom = require('xmldom');
-
-const DOMParser = xmldom.DOMParser;
-const XMLSerializer = xmldom.XMLSerializer;
-
-const originalFetch = nodeFetch;
-
-const fetch = (url) => {
-  if (url.indexOf('base64') >= 0) {
-    return {
-      text: async () => {
-        let buff = Buffer.from(url.split('base64,')[1], 'base64');
-        return buff.toString('ascii');
-      },
-      buffer: async () => {
-        return Buffer.from(url.split('base64,')[1], 'base64');
-      },
-    };
-  }
-  return originalFetch(url);
-};
-
+import { Util } from 'konva/lib/Util.js';
+import fetch from 'node-fetch';
+import { DOMParser, XMLSerializer } from 'xmldom';
 function isInsideDef(element) {
-  while (element.parentNode) {
-    if (element.nodeName === 'defs') {
-      return true;
+    while (element.parentNode) {
+        if (element.nodeName === 'defs') {
+            return true;
+        }
+        element = element.parentNode;
+    }
+    return false;
+}
+function parseStyleAttribute(style) {
+    if (!style) {
+        return {};
     }
-    element = element.parentNode;
-  }
-  return false;
+    const styles = style.split(';');
+    const result = {};
+    styles.forEach((style) => {
+        const [key, value] = style.split(':');
+        if (key && value) {
+            result[key] = value;
+        }
+    });
+    return result;
+}
+function buildStyleAttribute(styleObject) {
+    return Object.keys(styleObject)
+        .map((key) => `${key}:${styleObject[key]}`)
+        .join(';');
 }
-
 function getElementColors(e) {
-  const style = parseStyleAttribute(e.getAttribute('style'));
-
-  const colors = {
-    fill: '',
-    stroke: '',
-  };
-  if (e.getAttribute('fill') && e.getAttribute('fill') !== 'none') {
-    colors.fill = e.getAttribute('fill');
-  }
-  if (!colors.fill && style && style.fill && style.fill !== 'none') {
-    colors.fill = style.fill;
-  }
-  if (e.getAttribute('stroke')) {
-    colors.stroke = e.getAttribute('stroke');
-  }
-  if (!colors.stroke && style && style.stroke) {
-    colors.stroke = style.stroke;
-  }
-  if (!colors.stroke && !colors.fill) {
-    colors.fill = 'black';
-  }
-  return colors;
+    const style = parseStyleAttribute(e.getAttribute('style'));
+    const colors = {
+        fill: '',
+        stroke: '',
+    };
+    if (e.getAttribute('fill') && e.getAttribute('fill') !== 'none') {
+        colors.fill = e.getAttribute('fill');
+    }
+    if (!colors.fill && style && style.fill && style.fill !== 'none') {
+        colors.fill = style.fill;
+    }
+    if (e.getAttribute('stroke')) {
+        colors.stroke = e.getAttribute('stroke');
+    }
+    if (!colors.stroke && style && style.stroke) {
+        colors.stroke = style.stroke;
+    }
+    if (!colors.stroke && !colors.fill) {
+        colors.fill = 'black';
+    }
+    return colors;
 }
-
 const SVG_SHAPES = ['path', 'rect', 'circle'];
-
 function getAllElementsWithColor(doc) {
-  var matchingElements = [];
-  var allElements = doc.getElementsByTagName('*');
-  for (var i = 0, n = allElements.length; i < n; i++) {
-    const element = allElements[i];
-    if (isInsideDef(element)) {
-      continue;
-    }
-    if (element.getAttribute('fill') !== null) {
-      matchingElements.push(element);
-    }
-
-    const style = element.getAttribute('style');
-
-    if (style != null && style.indexOf('fill') >= 0) {
-      matchingElements.push(element);
-    }
-
-    if (element.getAttribute('stroke') !== null) {
-      matchingElements.push(element);
-    } else if (element.style && element.style['fill']) {
-      matchingElements.push(element);
-    } else if (SVG_SHAPES.indexOf(element.nodeName) >= 0) {
-      matchingElements.push(element);
-    }
-  }
-  return matchingElements;
+    var matchingElements = [];
+    var allElements = doc.getElementsByTagName('*');
+    for (var i = 0, n = allElements.length; i < n; i++) {
+        const element = allElements[i];
+        if (isInsideDef(element)) {
+            continue;
+        }
+        if (element.getAttribute('fill') !== null) {
+            matchingElements.push(element);
+        }
+        const style = element.getAttribute('style');
+        if (style != null && style.indexOf('fill') >= 0) {
+            matchingElements.push(element);
+        }
+        if (element.getAttribute('stroke') !== null) {
+            matchingElements.push(element);
+        }
+        else if (element.style && element.style['fill']) {
+            matchingElements.push(element);
+        }
+        else if (SVG_SHAPES.indexOf(element.nodeName) >= 0) {
+            matchingElements.push(element);
+        }
+    }
+    return matchingElements;
 }
-
-module.exports.urlToBase64 = async function urlToBase64(url) {
-  const req = await fetch(url);
-  if (req.buffer) {
-    const buffer = await req.buffer();
-    return `data:image/svg+xml;base64,${buffer.toString('base64')}`;
-  } else {
-    const svgString = await req.text();
-    return svgToURL(svgString);
-  }
-};
-
-module.exports.urlToString = async function urlToString(url) {
-  if (url.startsWith('data:')) {
-    // console.log(Buffer.from(url.split('base64,')[1], 'base64').toString());
-    return Buffer.from(url.split('base64,')[1], 'base64').toString();
-  }
-  const req = await fetch(url, { mode: 'cors' });
-  const svgString = await req.text();
-  return svgString;
-};
-
-module.exports.getColors = function getColors(svgString) {
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(svgString, 'text/xml');
-
-  const elements = getAllElementsWithColor(doc);
-
-  const colors = [];
-
-  elements.forEach((e) => {
-    const { fill, stroke } = getElementColors(e);
-    const results = [fill, stroke];
-    results.forEach((color) => {
-      if (!color) {
-        return;
-      }
-      const rgba = Konva.Util.colorToRGBA(color);
-      if (!rgba) {
-        return;
-      }
-      if (colors.indexOf(color) === -1) {
-        colors.push(color);
-      }
+export async function urlToBase64(url, cache = null) {
+    // Check cache first
+    if (cache && cache.buffers.has(url)) {
+        return cache.buffers.get(url);
+    }
+    const req = await fetch(url);
+    let result;
+    if (req.buffer) {
+        const buffer = await req.buffer();
+        result = `data:image/svg+xml;base64,${buffer.toString('base64')}`;
+    }
+    else {
+        const svgString = await req.text();
+        result = svgToURL(svgString);
+    }
+    // Store in cache
+    if (cache) {
+        cache.buffers.set(url, result);
+    }
+    return result;
+}
+export async function urlToString(url, cache = null) {
+    // Check cache first
+    if (cache && cache.buffers.has(url)) {
+        const cached = cache.buffers.get(url);
+        // If cached value is a base64 data URL, decode it
+        if (cached.startsWith('data:')) {
+            return Buffer.from(cached.split('base64,')[1], 'base64').toString();
+        }
+        return cached;
+    }
+    let svgString;
+    if (url.startsWith('data:')) {
+        svgString = Buffer.from(url.split('base64,')[1], 'base64').toString();
+    }
+    else {
+        const req = await fetch(url);
+        svgString = await req.text();
+    }
+    // Store in cache
+    if (cache) {
+        cache.buffers.set(url, svgString);
+    }
+    return svgString;
+}
+export function getColors(svgString) {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgString, 'text/xml');
+    const elements = getAllElementsWithColor(doc);
+    const colors = [];
+    elements.forEach((e) => {
+        const { fill, stroke } = getElementColors(e);
+        const results = [fill, stroke];
+        results.forEach((color) => {
+            if (!color) {
+                return;
+            }
+            const rgba = Util.colorToRGBA(color);
+            if (!rgba) {
+                return;
+            }
+            if (colors.indexOf(color) === -1) {
+                colors.push(color);
+            }
+        });
     });
-  });
-  return colors;
-};
-
-module.exports.svgToURL = function svgToURL(s) {
-  const uri = Buffer.from(unescape(encodeURIComponent(s))).toString('base64');
-  return 'data:image/svg+xml;base64,' + uri;
-};
-
-module.exports.getSvgSize = async function getSvgSize(url) {
-  const svgString = await urlToString(url);
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(svgString, 'image/svg+xml');
-  const viewBox = doc.documentElement.getAttribute('viewBox');
-  const [x, y, width, height] = viewBox?.split(' ') || [];
-  return { width: parseFloat(width), height: parseFloat(height) };
-};
-
-module.exports.fixSize = function fixSize(svgString) {
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(svgString, 'image/svg+xml');
-  const viewBox = doc.documentElement.getAttribute('viewBox');
-  const [x, y, width, height] = viewBox?.split(' ') || [];
-  if (!doc.documentElement.getAttribute('width')) {
-    doc.documentElement.setAttribute('width', width + 'px');
-  }
-
-  if (!doc.documentElement.getAttribute('height')) {
-    doc.documentElement.setAttribute('height', height + 'px');
-  }
-  var xmlSerializer = new XMLSerializer();
-  const str = xmlSerializer.serializeToString(doc);
-  return str;
-};
-
+    return colors;
+}
+export function svgToURL(s) {
+    const uri = Buffer.from(unescape(encodeURIComponent(s))).toString('base64');
+    return 'data:image/svg+xml;base64,' + uri;
+}
+export async function getSvgSize(url) {
+    const svgString = await urlToString(url);
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const viewBox = doc.documentElement.getAttribute('viewBox');
+    const [x, y, width, height] = viewBox?.split(' ') || [];
+    return { width: parseFloat(width), height: parseFloat(height) };
+}
+export function fixSize(svgString) {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const viewBox = doc.documentElement.getAttribute('viewBox');
+    const [x, y, width, height] = viewBox?.split(' ') || [];
+    if (!doc.documentElement.getAttribute('width')) {
+        doc.documentElement.setAttribute('width', width + 'px');
+    }
+    if (!doc.documentElement.getAttribute('height')) {
+        doc.documentElement.setAttribute('height', height + 'px');
+    }
+    var xmlSerializer = new XMLSerializer();
+    const str = xmlSerializer.serializeToString(doc);
+    return str;
+}
 const sameColors = (c1, c2) => {
-  if (!c2 || !c2) {
-    return false;
-  }
-  return c1.r === c2.r && c1.g === c2.g && c1.b === c2.b && c1.a === c2.a;
+    if (!c1 || !c2) {
+        return false;
+    }
+    return c1.r === c2.r && c1.g === c2.g && c1.b === c2.b && c1.a === c2.a;
 };
-
-module.exports.replaceColors = function replaceColors(svgString, replaceMap) {
-  var parser = new DOMParser();
-  var doc = parser.parseFromString(svgString, 'text/xml');
-
-  const elements = getAllElementsWithColor(doc);
-
-  const oldColors = Array.from(replaceMap.keys());
-
-  elements.forEach((el) => {
-    const { fill, stroke } = getElementColors(el);
-    const colors = [
-      { prop: 'fill', color: fill },
-      { prop: 'stroke', color: stroke },
-    ];
-    colors.forEach(({ prop, color }) => {
-      // find matched oldColor
-      const marchedOldValue = oldColors.find((oldColor) => {
-        return sameColors(
-          Konva.Util.colorToRGBA(oldColor),
-          Konva.Util.colorToRGBA(color)
-        );
-      });
-      if (!marchedOldValue) {
-        return;
-      } else {
-        el.setAttribute(prop, replaceMap.get(marchedOldValue));
-
-        const style = parseStyleAttribute(el.getAttribute('style'));
-
-        if (style && style[prop]) {
-          style[prop] = replaceMap.get(marchedOldValue);
-          el.setAttribute('style', buildStyleAttribute(style));
-        }
-
-        // el[prop] = replaceMap.get(marchedOldValue);
-      }
+export function replaceColors(svgString, replaceMap) {
+    var parser = new DOMParser();
+    var doc = parser.parseFromString(svgString, 'text/xml');
+    const elements = getAllElementsWithColor(doc);
+    const oldColors = Array.from(replaceMap.keys());
+    elements.forEach((el) => {
+        const { fill, stroke } = getElementColors(el);
+        const colors = [
+            { prop: 'fill', color: fill },
+            { prop: 'stroke', color: stroke },
+        ];
+        colors.forEach(({ prop, color }) => {
+            // find matched oldColor
+            const marchedOldValue = oldColors.find((oldColor) => {
+                return sameColors(Util.colorToRGBA(oldColor), Util.colorToRGBA(color));
+            });
+            if (!marchedOldValue) {
+                return;
+            }
+            else {
+                el.setAttribute(prop, replaceMap.get(marchedOldValue));
+                const style = parseStyleAttribute(el.getAttribute('style'));
+                if (style && style[prop]) {
+                    style[prop] = replaceMap.get(marchedOldValue);
+                    el.setAttribute('style', buildStyleAttribute(style));
+                }
+            }
+        });
     });
-  });
-  var xmlSerializer = new XMLSerializer();
-  const str = xmlSerializer.serializeToString(doc);
-
-  // console.log(str);
-  // Array.from(replaceMap.keys()).forEach((oldColor) => {
-  //   svgString = svgString.replace(
-  //     new RegExp(oldColor, 'g'),
-  //     replaceMap.get(oldColor) as string
-  //   );
-  // });
-  return module.exports.svgToURL(str);
-};
-
-function parseStyleAttribute(style) {
-  if (!style) {
-    return {};
-  }
-  const styles = style.split(';');
-  const result = {};
-  styles.forEach((style) => {
-    const [key, value] = style.split(':');
-    result[key] = value;
-  });
-  return result;
-}
-
-function buildStyleAttribute(styleObject) {
-  return Object.keys(styleObject)
-    .map((key) => `${key}:${styleObject[key]}`)
-    .join(';');
+    var xmlSerializer = new XMLSerializer();
+    const str = xmlSerializer.serializeToString(doc);
+    return svgToURL(str);
 }