@pixldocs/canvas-renderer 0.5.46 → 0.5.48

package/dist/index.d.ts

@@ -221,7 +221,7 @@ export declare function normalizeFontFamily(fontStack: string): string;
  * Package version banner. Bump alongside package.json so we can confirm
  * (via browser:log) that the deployed bundle matches the expected build.
  */
-export declare const PACKAGE_VERSION = "0.5.46";
+export declare const PACKAGE_VERSION = "0.5.48";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -4919,35 +4919,30 @@ function applyTextBackground(obj, cfg) {
       const bgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(bgFill)}" />` : "";
       svg = svg.replace(/style="[^"]*filter:\s*url\([^)]+\)[^"]*"/i, "");
       svg = svg.replace(/<filter[\s\S]*?<\/filter>/gi, "");
-      let bgShadowLayer = "";
-      let textShadowLayer = "";
+      let bgShadowMarker = "";
+      let textShadowMarker = "";
       if (hasShadow) {
         const ox = Number(shadow.offsetX ?? 0) || 0;
         const oy = Number(shadow.offsetY ?? 0) || 0;
         const blur = Math.max(0, Number(shadow.blur ?? 0));
         const shadowColor = String(shadow.color);
-        const shadowBgPath = hasBg ? `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />` : "";
+        const pad = Math.max(8, Math.ceil(blur * 3) + Math.ceil(Math.max(Math.abs(ox), Math.abs(oy))) + 4);
+        const bx = -w / 2 - pL - pad;
+        const by = -h / 2 - pT - pad;
+        const bw = w + pL + pR + pad * 2;
+        const bh = h + pT + pB + pad * 2;
+        const dataAttrs = `data-blur="${blur.toFixed(3)}" data-ox="${ox.toFixed(3)}" data-oy="${oy.toFixed(3)}" data-bx="${bx.toFixed(3)}" data-by="${by.toFixed(3)}" data-bw="${bw.toFixed(3)}" data-bh="${bh.toFixed(3)}" data-color="${escapeXmlAttr(shadowColor)}"`;
+        const wrapShadow = (markup) => blur <= 0 ? `<g transform="translate(${ox.toFixed(3)} ${oy.toFixed(3)})">${markup}</g>` : `<g class="__pdShadowRaster" ${dataAttrs}>${markup}</g>`;
+        if (hasBg) {
+          const shadowBgPath = `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />`;
+          bgShadowMarker = wrapShadow(shadowBgPath);
+        }
         const inner = extractGInnerMarkup(svg);
         const recoloredText = recolorSvgFills(inner, shadowColor);
-        const bgLayers = [];
-        const textLayers = [];
-        const pushShadowPass = (tx, ty, opacity) => {
-          const attrs = `transform="translate(${tx.toFixed(3)} ${ty.toFixed(3)})"${opacity ? ` opacity="${opacity}"` : ""}`;
-          if (shadowBgPath) bgLayers.push(`<g ${attrs}>${shadowBgPath}</g>`);
-          if (recoloredText) textLayers.push(`<g ${attrs}>${recoloredText}</g>`);
-        };
-        if (blur > 0) {
-          for (const pass of buildNormalizedShadowPasses(blur)) {
-            pushShadowPass(ox + pass.dx, oy + pass.dy, pass.opacity);
-          }
-        } else {
-          pushShadowPass(ox, oy);
-        }
-        bgShadowLayer = bgLayers.join("");
-        textShadowLayer = textLayers.join("");
+        if (recoloredText) textShadowMarker = wrapShadow(recoloredText);
       }
       const openTagMatch = svg.match(/^\s*<g\b[^>]*>/);
-      const inserted = bgShadowLayer + bgPath + textShadowLayer;
+      const inserted = bgShadowMarker + bgPath + textShadowMarker;
       if (openTagMatch) {
         const openTag = openTagMatch[0];
         return svg.replace(openTag, openTag + inserted);
@@ -4975,36 +4970,6 @@ function recolorSvgFills(svg, color) {
   );
   return out;
 }
-function buildNormalizedShadowPasses(blur) {
-  const safeBlur = Math.max(0, Number(blur) || 0);
-  const ringCount = Math.min(5, Math.max(2, Math.round(safeBlur / 5)));
-  const targetOpacity = Math.max(0.16, Math.min(0.38, 0.46 - safeBlur * 0.01));
-  const weighted = [
-    { dx: 0, dy: 0, weight: 0.7 }
-  ];
-  for (let i = 1; i <= ringCount; i++) {
-    const t = i / ringCount;
-    const dist = safeBlur * t * 0.42;
-    const weight = Math.exp(-2.4 * t * t);
-    const diag = dist * 0.7071;
-    weighted.push(
-      { dx: dist, dy: 0, weight },
-      { dx: -dist, dy: 0, weight },
-      { dx: 0, dy: dist, weight },
-      { dx: 0, dy: -dist, weight },
-      { dx: diag, dy: diag, weight: weight * 0.72 },
-      { dx: -diag, dy: diag, weight: weight * 0.72 },
-      { dx: diag, dy: -diag, weight: weight * 0.72 },
-      { dx: -diag, dy: -diag, weight: weight * 0.72 }
-    );
-  }
-  const totalWeight = weighted.reduce((sum, pass) => sum + pass.weight, 0) || 1;
-  return weighted.map((pass) => ({
-    dx: pass.dx,
-    dy: pass.dy,
-    opacity: Math.max(3e-3, targetOpacity * pass.weight / totalWeight).toFixed(4)
-  }));
-}
 function buildRoundedRectPathD(x, y, w, h, rTL, rTR, rBR, rBL) {
   const maxR = Math.min(w, h) / 2;
   const tl = Math.min(Math.max(0, rTL), maxR);
@@ -12356,7 +12321,7 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
-const PACKAGE_VERSION = "0.5.46";
+const PACKAGE_VERSION = "0.5.48";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -15022,6 +14987,130 @@ async function convertTextDecorationsToLines(svg) {
     }
   }
 }
+async function rasterizeShadowMarkers(svg) {
+  var _a, _b, _c, _d, _e;
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  const markers = Array.from(svg.querySelectorAll("g.__pdShadowRaster"));
+  if (markers.length === 0) return;
+  const SVG_NS = "http://www.w3.org/2000/svg";
+  const XLINK_NS = "http://www.w3.org/1999/xlink";
+  try {
+    if ((_a = document.fonts) == null ? void 0 : _a.ready) await document.fonts.ready;
+  } catch {
+  }
+  const fontFaceCss = collectDocumentFontFaceCss();
+  for (const marker of markers) {
+    try {
+      const blur = parseFloat(marker.getAttribute("data-blur") || "0");
+      const ox = parseFloat(marker.getAttribute("data-ox") || "0");
+      const oy = parseFloat(marker.getAttribute("data-oy") || "0");
+      const bx = parseFloat(marker.getAttribute("data-bx") || "0");
+      const by = parseFloat(marker.getAttribute("data-by") || "0");
+      const bw = parseFloat(marker.getAttribute("data-bw") || "0");
+      const bh = parseFloat(marker.getAttribute("data-bh") || "0");
+      if (!Number.isFinite(bw) || !Number.isFinite(bh) || bw <= 0 || bh <= 0) {
+        (_b = marker.parentNode) == null ? void 0 : _b.removeChild(marker);
+        continue;
+      }
+      const innerXml = Array.from(marker.childNodes).map((n) => n instanceof Element ? new XMLSerializer().serializeToString(n) : "").join("");
+      const scale = 2;
+      const pxW = Math.min(4096, Math.max(8, Math.ceil(bw * scale)));
+      const pxH = Math.min(4096, Math.max(8, Math.ceil(bh * scale)));
+      const stdDev = Math.max(0, blur);
+      const filterId = `pdShadowBlur_${Math.random().toString(36).slice(2, 9)}`;
+      const styleBlock = fontFaceCss ? `<style>${fontFaceCss}</style>` : "";
+      const miniSvg = `<svg xmlns="${SVG_NS}" xmlns:xlink="${XLINK_NS}" width="${pxW}" height="${pxH}" viewBox="${bx} ${by} ${bw} ${bh}"><defs>${styleBlock}<filter id="${filterId}" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB"><feOffset dx="${ox}" dy="${oy}" result="offsetShadow" /><feGaussianBlur in="offsetShadow" stdDeviation="${stdDev}" /></filter></defs><g filter="url(#${filterId})">${innerXml}</g></svg>`;
+      const dataUrl = await rasterSvgToPngDataUrl(miniSvg, pxW, pxH);
+      if (!dataUrl) {
+        (_c = marker.parentNode) == null ? void 0 : _c.removeChild(marker);
+        continue;
+      }
+      const img = svg.ownerDocument.createElementNS(SVG_NS, "image");
+      img.setAttribute("x", String(bx));
+      img.setAttribute("y", String(by));
+      img.setAttribute("width", String(bw));
+      img.setAttribute("height", String(bh));
+      img.setAttribute("preserveAspectRatio", "none");
+      img.setAttributeNS(XLINK_NS, "xlink:href", dataUrl);
+      img.setAttribute("href", dataUrl);
+      (_d = marker.parentNode) == null ? void 0 : _d.replaceChild(img, marker);
+    } catch (e) {
+      console.warn("[pdf-export] rasterizeShadowMarkers failed for one marker:", e);
+      try {
+        (_e = marker.parentNode) == null ? void 0 : _e.removeChild(marker);
+      } catch {
+      }
+    }
+  }
+}
+function rasterSvgToPngDataUrl(svgMarkup, pxW, pxH) {
+  return new Promise((resolve) => {
+    try {
+      const blob = new Blob([svgMarkup], { type: "image/svg+xml;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      const cleanup = () => {
+        try {
+          URL.revokeObjectURL(url);
+        } catch {
+        }
+      };
+      img.onload = () => {
+        try {
+          const canvas = document.createElement("canvas");
+          canvas.width = pxW;
+          canvas.height = pxH;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            cleanup();
+            resolve(null);
+            return;
+          }
+          ctx.drawImage(img, 0, 0, pxW, pxH);
+          const dataUrl = canvas.toDataURL("image/png");
+          cleanup();
+          resolve(dataUrl);
+        } catch (e) {
+          cleanup();
+          resolve(null);
+        }
+      };
+      img.onerror = () => {
+        cleanup();
+        resolve(null);
+      };
+      img.src = url;
+    } catch {
+      resolve(null);
+    }
+  });
+}
+let cachedFontFaceCss = null;
+function collectDocumentFontFaceCss() {
+  if (cachedFontFaceCss !== null) return cachedFontFaceCss;
+  const out = [];
+  try {
+    for (const sheet of Array.from(document.styleSheets)) {
+      let rules = null;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        rules = null;
+      }
+      if (!rules) continue;
+      for (const rule of Array.from(rules)) {
+        const r = rule;
+        if (r && (r.type === 5 || /@font-face/i.test(r.cssText || ""))) {
+          if (r.cssText) out.push(r.cssText);
+        }
+      }
+    }
+  } catch {
+  }
+  cachedFontFaceCss = out.join("\n");
+  return cachedFontFaceCss;
+}
 async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey, options) {
   try {
     const parser = new DOMParser();
@@ -15051,6 +15140,7 @@ async function prepareLiveCanvasSvgForPdf(rawSvg, pageWidth, pageHeight, pageKey
     stripSuspiciousFullPageOverlayNodes(svgToDraw);
     if (options == null ? void 0 : options.stripPageBackground) stripRootPageBackgroundFromSvg(svgToDraw);
     sanitizeSvgTreeForPdf(svgToDraw);
+    await rasterizeShadowMarkers(svgToDraw);
     return svgToDraw;
   } catch {
     return null;