@pixldocs/canvas-renderer 0.5.222 → 0.5.223

package/dist/{index-BKJxI43i.cjs → index-xWTAswf0.cjs}

@@ -19123,9 +19123,9 @@ function captureFabricCanvasSvgForPdf(fabricInstance, canvasWidth, canvasHeight)
   }
   return svgString;
 }
-const resolvedPackageVersion = "0.5.222";
+const resolvedPackageVersion = "0.5.223";
 const PACKAGE_VERSION = resolvedPackageVersion;
-const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.222";
+const DEPLOYMENT_VERSION_MARKER = "__PIXLDOCS_CANVAS_RENDERER_VERSION__:0.5.223";
 const roundParityValue = (value) => {
   if (typeof value !== "number") return value;
   return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
@@ -19869,7 +19869,7 @@ class PixldocsRenderer {
         await this.waitForCanvasScene(container, cloned, i);
       }
       console.log(`[canvas-renderer][pdf-unified] mounted ${cloned.pages.length} page(s), handing off to client exportMultiPagePdf`);
-      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-CDMnc_eW.cjs"));
+      const { exportMultiPagePdf, preparePagesForExport } = await Promise.resolve().then(() => require("./vectorPdfExport-C-l9Vtku.cjs"));
       const prepared = preparePagesForExport(
         cloned.pages,
         canvasWidth,
@@ -21265,6 +21265,8 @@ function normalizeSvgViewBoxOrigin(svg) {
   if (parts.length !== 4) return;
   const [vx, vy, vw, vh] = parts;
   if (vw <= 0 || vh <= 0) return;
+  svg.setAttribute("width", String(vw));
+  svg.setAttribute("height", String(vh));
   if (Math.abs(vx) < 1e-3 && Math.abs(vy) < 1e-3) return;
   const doc = svg.ownerDocument;
   if (!doc) return;
@@ -21351,7 +21353,20 @@ function decodeSvgDataUri(href) {
     }
   }
 }
-function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
+async function readNestedSvgImageMarkup(href) {
+  if (!href) return null;
+  if (href.startsWith("data:image/svg+xml")) return decodeSvgDataUri(href);
+  if (!/\.svg(?:[?#]|$)/i.test(href) && !href.startsWith("blob:")) return null;
+  try {
+    const res = await fetch(href, { cache: "no-store" });
+    if (!res.ok) return null;
+    const text = await res.text();
+    return /<svg[\s>]/i.test(text) ? text : null;
+  } catch {
+    return null;
+  }
+}
+async function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
   var _a;
   try {
     const doc = domParser.parseFromString(svgString, "image/svg+xml");
@@ -21359,47 +21374,161 @@ function inlineNestedSvgImageDataUris(svgString, domParser = new DOMParser()) {
     const root = doc.documentElement;
     if (!root || root.tagName.toLowerCase() !== "svg") return svgString;
     let changed = false;
-    for (const img of Array.from(doc.querySelectorAll("image"))) {
+    let inlined = 0;
+    const images = Array.from(doc.querySelectorAll("image"));
+    for (const [imageIndex, img] of images.entries()) {
       const href = img.getAttribute("href") || img.getAttributeNS("http://www.w3.org/1999/xlink", "href");
-      if (!href || !href.startsWith("data:image/svg+xml")) continue;
+      if (!href) continue;
       try {
-        const svgContent = decodeSvgDataUri(href);
+        const svgContent = await readNestedSvgImageMarkup(href);
         if (!svgContent || !/<svg[\s>]/i.test(svgContent)) continue;
         const innerDoc = domParser.parseFromString(svgContent, "image/svg+xml");
         if (innerDoc.querySelector("parsererror")) continue;
         const innerSvg = innerDoc.documentElement;
         if (!innerSvg || innerSvg.tagName.toLowerCase() !== "svg") continue;
+        const sourceId = img.getAttribute("id") || `image-${imageIndex}`;
+        prefixSvgIds(innerSvg, `inline-${sourceId}`);
         const ix = parseFloat(img.getAttribute("x") || "0") || 0;
         const iy = parseFloat(img.getAttribute("y") || "0") || 0;
         const iw = parseFloat(img.getAttribute("width") || "0");
         const ih = parseFloat(img.getAttribute("height") || "0");
         if (!(iw > 0 && ih > 0)) continue;
-        const nestedSvg = doc.importNode(innerSvg, true);
-        if (!nestedSvg.getAttribute("viewBox")) nestedSvg.setAttribute("viewBox", `0 0 ${iw} ${ih}`);
-        nestedSvg.setAttribute("x", "0");
-        nestedSvg.setAttribute("y", "0");
-        nestedSvg.setAttribute("width", String(iw));
-        nestedSvg.setAttribute("height", String(ih));
-        nestedSvg.setAttribute("preserveAspectRatio", img.getAttribute("preserveAspectRatio") || nestedSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet");
         const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
         const existingTransform = img.getAttribute("transform") || "";
-        g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}translate(${ix},${iy})`);
+        const vb = (innerSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/).map((n) => Number.parseFloat(n));
+        const [vbX, vbY, vbW, vbH] = vb.length === 4 && vb.every((n) => Number.isFinite(n)) && vb[2] > 0 && vb[3] > 0 ? vb : [0, 0, iw, ih];
+        const par = img.getAttribute("preserveAspectRatio") || innerSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet";
+        const parParts = par.trim().split(/\s+/).filter(Boolean);
+        const align = parParts[0] === "defer" ? parParts[1] || "xMidYMid" : parParts[0] || "xMidYMid";
+        const meetOrSlice = parParts[0] === "defer" ? parParts[2] || "meet" : parParts[1] || "meet";
+        let sx = iw / vbW;
+        let sy = ih / vbH;
+        let ox = 0;
+        let oy = 0;
+        if (align !== "none") {
+          const s = meetOrSlice === "slice" ? Math.max(sx, sy) : Math.min(sx, sy);
+          sx = s;
+          sy = s;
+          const extraW = iw - vbW * s;
+          const extraH = ih - vbH * s;
+          if (align.includes("xMid")) ox = extraW / 2;
+          else if (align.includes("xMax")) ox = extraW;
+          if (align.includes("YMid")) oy = extraH / 2;
+          else if (align.includes("YMax")) oy = extraH;
+        }
+        g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}translate(${ix + ox},${iy + oy}) scale(${sx},${sy}) translate(${-vbX},${-vbY})`);
+        const imageClipPath = img.getAttribute("clip-path") || getInlineStyleValue(img, "clip-path");
+        const dropImageClipPath = isRedundantImageClipPathForInlineSvg(root, imageClipPath, ix, iy, iw, ih);
+        if (dropImageClipPath) console.log("[canvas-renderer][pdf] dropped redundant inline SVG image clipPath", { imageIndex, sourceId, clipPath: imageClipPath });
         for (const attr of Array.from(img.attributes)) {
+          if (dropImageClipPath && attr.name === "clip-path") continue;
+          if (dropImageClipPath && attr.name === "style") {
+            const kept = parseInlineSvgStyleDeclarations(attr.value).filter((decl) => decl.key !== "clip-path").map((decl) => `${decl.key}: ${decl.value}`).join("; ");
+            if (kept) g.setAttribute("style", kept);
+            continue;
+          }
           if (["id", "class", "style", "opacity", "display", "visibility", "clip-path", "mask", "filter", "pointer-events"].includes(attr.name)) {
             g.setAttribute(attr.name, attr.value);
           }
         }
-        g.appendChild(nestedSvg);
+        for (const child of Array.from(innerSvg.childNodes)) g.appendChild(doc.importNode(child, true));
         (_a = img.parentNode) == null ? void 0 : _a.replaceChild(g, img);
         changed = true;
+        inlined++;
       } catch {
       }
     }
+    if (inlined > 0) console.log(`[canvas-renderer][pdf] inlined ${inlined} nested SVG image(s)`);
     return changed ? new XMLSerializer().serializeToString(doc.documentElement) : svgString;
   } catch {
     return svgString;
   }
 }
+function parseSvgLength(value, fallback) {
+  if (!value) return fallback;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed.endsWith("%")) return fallback;
+  const parsed = Number.parseFloat(trimmed);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+function isIdentitySvgMatrix(value) {
+  var _a;
+  if (!value) return true;
+  const nums = ((_a = value.match(/-?\d*\.?\d+(?:e[-+]?\d+)?/gi)) == null ? void 0 : _a.map(Number)) ?? [];
+  return nums.length === 6 && Math.abs(nums[0] - 1) < 1e-3 && Math.abs(nums[1]) < 1e-3 && Math.abs(nums[2]) < 1e-3 && Math.abs(nums[3] - 1) < 1e-3 && Math.abs(nums[4]) < 1e-3 && Math.abs(nums[5]) < 1e-3;
+}
+function isRedundantImageClipPathForInlineSvg(root, clipPathRef, ix, iy, iw, ih) {
+  const clipId = extractGradientIdFromPaint(clipPathRef);
+  if (!clipId || !(iw > 0 && ih > 0)) return false;
+  let clip = null;
+  for (const el of root.querySelectorAll("[id]")) {
+    if (el.getAttribute("id") === clipId) {
+      clip = el;
+      break;
+    }
+  }
+  if (!clip || clip.tagName.toLowerCase() !== "clippath") return false;
+  const units = (clip.getAttribute("clipPathUnits") || "userSpaceOnUse").toLowerCase();
+  const rects = Array.from(clip.children).filter((el) => el.tagName.toLowerCase() === "rect");
+  if (rects.length !== 1 || rects[0].parentElement !== clip) return false;
+  const rect = rects[0];
+  if (!isIdentitySvgMatrix(rect.getAttribute("transform"))) return false;
+  const rx = Number.parseFloat(rect.getAttribute("x") || "0") || 0;
+  const ry = Number.parseFloat(rect.getAttribute("y") || "0") || 0;
+  const rw = Number.parseFloat(rect.getAttribute("width") || "0");
+  const rh = Number.parseFloat(rect.getAttribute("height") || "0");
+  if (!(rw > 0 && rh > 0)) return false;
+  const near = (a, b) => Math.abs(a - b) <= Math.max(1, Math.max(Math.abs(a), Math.abs(b)) * 0.01);
+  if (units === "objectboundingbox") return near(rx, 0) && near(ry, 0) && near(rw, 1) && near(rh, 1);
+  return near(rx, ix) && near(ry, iy) && near(rw, iw) && near(rh, ih);
+}
+function flattenNestedSvgViewports(rootSvg) {
+  const nestedSvgs = Array.from(rootSvg.querySelectorAll("svg")).filter((svg) => svg !== rootSvg).reverse();
+  let flattened = 0;
+  for (const nestedSvg of nestedSvgs) {
+    const parent = nestedSvg.parentNode;
+    const doc = nestedSvg.ownerDocument;
+    if (!parent || !doc) continue;
+    const vb = (nestedSvg.getAttribute("viewBox") || "").trim().split(/[\s,]+/).map((n) => Number.parseFloat(n));
+    const hasViewBox = vb.length === 4 && vb.every((n) => Number.isFinite(n)) && vb[2] > 0 && vb[3] > 0;
+    const [vbX, vbY, vbW, vbH] = hasViewBox ? vb : [0, 0, 0, 0];
+    const width = parseSvgLength(nestedSvg.getAttribute("width"), hasViewBox ? vbW : 0);
+    const height = parseSvgLength(nestedSvg.getAttribute("height"), hasViewBox ? vbH : 0);
+    if (!(width > 0 && height > 0)) continue;
+    const x = Number.parseFloat(nestedSvg.getAttribute("x") || "0") || 0;
+    const y = Number.parseFloat(nestedSvg.getAttribute("y") || "0") || 0;
+    const par = nestedSvg.getAttribute("preserveAspectRatio") || "xMidYMid meet";
+    const parParts = par.trim().split(/\s+/).filter(Boolean);
+    const align = parParts[0] === "defer" ? parParts[1] || "xMidYMid" : parParts[0] || "xMidYMid";
+    const meetOrSlice = parParts[0] === "defer" ? parParts[2] || "meet" : parParts[1] || "meet";
+    let sx = hasViewBox ? width / vbW : 1;
+    let sy = hasViewBox ? height / vbH : 1;
+    let ox = 0;
+    let oy = 0;
+    if (hasViewBox && align !== "none") {
+      const s = meetOrSlice === "slice" ? Math.max(sx, sy) : Math.min(sx, sy);
+      sx = s;
+      sy = s;
+      const extraW = width - vbW * s;
+      const extraH = height - vbH * s;
+      if (align.includes("xMid")) ox = extraW / 2;
+      else if (align.includes("xMax")) ox = extraW;
+      if (align.includes("YMid")) oy = extraH / 2;
+      else if (align.includes("YMax")) oy = extraH;
+    }
+    const g = doc.createElementNS("http://www.w3.org/2000/svg", "g");
+    const existingTransform = nestedSvg.getAttribute("transform") || "";
+    const viewBoxTransform = hasViewBox ? `translate(${x + ox},${y + oy}) scale(${sx},${sy}) translate(${-vbX},${-vbY})` : `translate(${x},${y})`;
+    g.setAttribute("transform", `${existingTransform}${existingTransform ? " " : ""}${viewBoxTransform}`);
+    for (const attr of Array.from(nestedSvg.attributes)) {
+      if (["id", "class", "style", "opacity", "display", "visibility", "clip-path", "mask", "filter", "pointer-events"].includes(attr.name)) g.setAttribute(attr.name, attr.value);
+    }
+    for (const child of Array.from(nestedSvg.childNodes)) g.appendChild(child);
+    parent.replaceChild(g, nestedSvg);
+    flattened++;
+  }
+  if (flattened > 0) console.log("[canvas-renderer][pdf] flattened nested SVG viewport(s)", { flattened });
+}
 function inlineComputedStyles(svg) {
   if (typeof document === "undefined") return;
   const wrap = document.createElement("div");
@@ -21440,7 +21569,7 @@ function inlineComputedStyles(svg) {
 function disambiguateNestedSvgIds(rootSvg) {
   const nestedSvgs = Array.from(rootSvg.querySelectorAll("svg"));
   const toProcess = nestedSvgs.filter((s) => s !== rootSvg);
-  if (toProcess.length < 2) return;
+  if (toProcess.length === 0) return;
   toProcess.forEach((nested, idx) => {
     prefixSvgIds(nested, `n${idx}`);
   });
@@ -22032,7 +22161,7 @@ function restoreSourceFontsForShadowRaster(markup) {
 async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey, options) {
   try {
     const parser = new DOMParser();
-    const processedSvg = inlineNestedSvgImageDataUris(rawSvg, parser);
+    const processedSvg = await inlineNestedSvgImageDataUris(rawSvg, parser);
     const doc = parser.parseFromString(processedSvg, "image/svg+xml");
     if (doc.querySelector("parsererror")) return null;
     const svg = doc.documentElement;
@@ -22046,6 +22175,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     svg.setAttribute("viewBox", `0 0 ${pageWidth} ${pageHeight}`);
     sanitizeSvgTreeForPdf(svg);
     normalizeSvgViewBoxOrigin(svg);
+    flattenNestedSvgViewports(svg);
     disambiguateNestedSvgIds(svg);
     expandSvgUseElements(svg);
     const svgToDraw = normalizeSvgExplicitColors(svg);
@@ -22059,7 +22189,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
     try {
-      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-CDMnc_eW.cjs"));
+      const { bakeTextAnchorPositionsFromLiveSvg, logTextMeasurementDiagnostic } = await Promise.resolve().then(() => require("./vectorPdfExport-C-l9Vtku.cjs"));
       try {
         await logTextMeasurementDiagnostic(svgToDraw);
       } catch {
@@ -22159,9 +22289,8 @@ async function assemblePdfFromSvgs(svgResults, options = {}) {
   }
   const pdf = new jspdf.jsPDF({
     orientation,
-    unit: "px",
+    unit: "pt",
     format: [firstPage.width, firstPage.height],
-    hotfixes: ["px_scaling"],
     compress: true
   });
   if (title) pdf.setProperties({ title, creator: "Pixldocs" });
@@ -22456,4 +22585,4 @@ exports.setAutoShrinkDebug = setAutoShrinkDebug;
 exports.setBundledAssetPrefixes = setBundledAssetPrefixes;
 exports.warmResolvedTemplateForPreview = warmResolvedTemplateForPreview;
 exports.warmTemplateFromForm = warmTemplateFromForm;
-//# sourceMappingURL=index-BKJxI43i.cjs.map
+//# sourceMappingURL=index-xWTAswf0.cjs.map