@pixldocs/canvas-renderer 0.5.45 → 0.5.47

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.45";
+export declare const PACKAGE_VERSION = "0.5.47";
 
 export declare interface PageSettings {
     backgroundColor?: string;

package/dist/index.js

@@ -4919,52 +4919,31 @@ 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)}"`;
+        if (hasBg) {
+          const shadowBgPath = `<path d="${bgD}" fill="${escapeXmlAttr(shadowColor)}" />`;
+          bgShadowMarker = `<g class="__pdShadowRaster" ${dataAttrs}>${shadowBgPath}</g>`;
+        }
         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) {
-          const ringCount = Math.min(6, Math.max(2, Math.round(blur / 2)));
-          for (let i = 1; i <= ringCount; i++) {
-            const t = i / ringCount;
-            const dist = blur * t * 0.6;
-            const op = (0.18 * (1 - t * 0.7)).toFixed(3);
-            const ringOffsets = [
-              [dist, 0],
-              [-dist, 0],
-              [0, dist],
-              [0, -dist],
-              [dist * 0.7, dist * 0.7],
-              [-dist * 0.7, dist * 0.7],
-              [dist * 0.7, -dist * 0.7],
-              [-dist * 0.7, -dist * 0.7]
-            ];
-            for (const [dx, dy] of ringOffsets) {
-              pushShadowPass(ox + dx, oy + dy, op);
-            }
-          }
-          pushShadowPass(ox, oy, "0.25");
-        } else {
-          pushShadowPass(ox, oy);
+        if (recoloredText) {
+          textShadowMarker = `<g class="__pdShadowRaster" ${dataAttrs}>${recoloredText}</g>`;
         }
-        bgShadowLayer = bgLayers.join("");
-        textShadowLayer = textLayers.join("");
       }
       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);
@@ -12343,7 +12322,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.45";
+const PACKAGE_VERSION = "0.5.47";
 let __underlineFixInstalled = false;
 function installUnderlineFix(fab) {
   var _a;
@@ -15009,6 +14988,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 / 2);
+      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"><feGaussianBlur 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 + ox));
+      img.setAttribute("y", String(by + oy));
+      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();
@@ -15038,6 +15141,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;