@pixldocs/canvas-renderer 0.3.23 → 0.3.25

package/dist/index.js

@@ -11038,6 +11038,14 @@ class PixldocsRenderer {
     });
   }
   // ─── Internal: capture SVG from a rendered Fabric canvas ───
+  //
+  // APPROACH: Use the SAME PreviewCanvas that renders perfect PNGs, then call
+  // Fabric's toSVG() on that canvas. This guarantees 100% layout parity —
+  // the SVG is a vector snapshot of exactly what's on screen.
+  //
+  // The trick: before calling toSVG(), we temporarily neutralize the viewport
+  // transform and retina scaling so Fabric emits coordinates in logical
+  // document space (e.g. 612x792) instead of inflated pixel space.
   captureSvgViaPreviewCanvas(config, pageIndex, canvasWidth, canvasHeight) {
     return new Promise(async (resolve, reject) => {
       const { PreviewCanvas: PreviewCanvas2 } = await Promise.resolve().then(() => PreviewCanvas$1);
@@ -11073,17 +11081,25 @@ class PixldocsRenderer {
             }
             const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
-            const prevCanvasWidth = fabricInstance.width;
-            const prevCanvasHeight = fabricInstance.height;
+            const prevRetina = fabricInstance.enableRetinaScaling;
+            const prevWidth = fabricInstance.width;
+            const prevHeight = fabricInstance.height;
+            fabricInstance.viewportTransform = [1, 0, 0, 1, 0, 0];
+            fabricInstance.svgViewportTransformation = false;
+            fabricInstance.enableRetinaScaling = false;
             fabricInstance.setDimensions(
               { width: canvasWidth, height: canvasHeight },
               { cssOnly: false, backstoreOnly: false }
             );
-            fabricInstance.viewportTransform = [1, 0, 0, 1, 0, 0];
-            fabricInstance.svgViewportTransformation = false;
-            const svgString = fabricInstance.toSVG();
+            const rawSvgString = fabricInstance.toSVG();
+            const svgString = this.normalizeSvgDimensions(
+              rawSvgString,
+              canvasWidth,
+              canvasHeight
+            );
+            fabricInstance.enableRetinaScaling = prevRetina;
             fabricInstance.setDimensions(
-              { width: prevCanvasWidth, height: prevCanvasHeight },
+              { width: prevWidth, height: prevHeight },
               { cssOnly: false, backstoreOnly: false }
             );
             if (prevVPT) fabricInstance.viewportTransform = prevVPT;
@@ -11111,7 +11127,7 @@ class PixldocsRenderer {
           config,
           pageIndex,
           zoom: 1,
-          // 1:1 — no scaling for SVG capture
+          // 1:1 — no UI scaling for SVG capture
           absoluteZoom: true,
           onReady
         })
@@ -11126,22 +11142,43 @@ class PixldocsRenderer {
    * the SVG coordinate system matches the intended page size exactly.
    */
   normalizeSvgDimensions(svg, targetWidth, targetHeight) {
-    const widthMatch = svg.match(/<svg[^>]*\bwidth="([^"]+)"/);
-    const heightMatch = svg.match(/<svg[^>]*\bheight="([^"]+)"/);
+    const widthMatch = svg.match(/<svg[^>]*\bwidth="([^"]+)"/i);
+    const heightMatch = svg.match(/<svg[^>]*\bheight="([^"]+)"/i);
     const svgWidth = widthMatch ? parseFloat(widthMatch[1]) : targetWidth;
     const svgHeight = heightMatch ? parseFloat(heightMatch[1]) : targetHeight;
-    if (Math.abs(svgWidth - targetWidth) < 1 && Math.abs(svgHeight - targetHeight) < 1) {
-      return svg;
-    }
     console.log(
-      `[canvas-renderer][svg-normalize] SVG dimensions ${svgWidth}x${svgHeight} → ${targetWidth}x${targetHeight}`
+      `[canvas-renderer][svg-normalize] root ${svgWidth}x${svgHeight} → page ${targetWidth}x${targetHeight}`
     );
-    let normalized = svg.replace(/(<svg[^>]*\b)width="[^"]*"/, `$1width="${targetWidth}"`).replace(/(<svg[^>]*\b)height="[^"]*"/, `$1height="${targetHeight}"`);
-    const viewBox = `0 0 ${svgWidth} ${svgHeight}`;
-    if (/viewBox="[^"]*"/.test(normalized)) {
-      normalized = normalized.replace(/viewBox="[^"]*"/, `viewBox="${viewBox}"`);
+    let normalized = svg;
+    if (/\bwidth="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)width="[^"]*"/i, `$1width="${targetWidth}"`);
+    } else {
+      normalized = normalized.replace(/<svg\b/i, `<svg width="${targetWidth}"`);
+    }
+    if (/\bheight="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)height="[^"]*"/i, `$1height="${targetHeight}"`);
     } else {
-      normalized = normalized.replace(/<svg\b/, `<svg viewBox="${viewBox}"`);
+      normalized = normalized.replace(/<svg\b/i, `<svg height="${targetHeight}"`);
+    }
+    const viewBox = `0 0 ${targetWidth} ${targetHeight}`;
+    if (/\bviewBox="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/viewBox="[^"]*"/i, `viewBox="${viewBox}"`);
+    } else {
+      normalized = normalized.replace(/<svg\b/i, `<svg viewBox="${viewBox}"`);
+    }
+    if (/\bx="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)x="[^"]*"/i, '$1x="0"');
+    } else {
+      normalized = normalized.replace(/<svg\b/i, '<svg x="0"');
+    }
+    if (/\by="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/(<svg[^>]*\b)y="[^"]*"/i, '$1y="0"');
+    } else {
+      normalized = normalized.replace(/<svg\b/i, '<svg y="0"');
+    }
+    normalized = normalized.replace(/\bpreserveAspectRatio="[^"]*"/i, 'preserveAspectRatio="none"');
+    if (!/\bpreserveAspectRatio="[^"]*"/i.test(normalized)) {
+      normalized = normalized.replace(/<svg\b/i, '<svg preserveAspectRatio="none"');
     }
     return normalized;
   }