@pixldocs/canvas-renderer 0.3.20 → 0.3.22

package/dist/index.d.ts

@@ -201,12 +201,24 @@ export declare class PixldocsRenderer {
      * Convenience: fetch by ID with simple flat data and render.
      */
     renderById(templateId: string, formData?: Record<string, any>, options?: RenderOptions): Promise<RenderResult>;
+    /**
+     * Convenience: fetch by ID with flat data and render ALL pages.
+     */
+    renderAllById(templateId: string, formData?: Record<string, any>, options?: Omit<RenderOptions, 'pageIndex'>): Promise<RenderResult[]>;
     private getExpectedImageCount;
     private waitForCanvasImages;
     private getNormalizedGradientStops;
     private paintPageBackground;
     private renderPageViaPreviewCanvas;
     private captureSvgViaPreviewCanvas;
+    /**
+     * Normalize the SVG's width/height/viewBox to match the logical page dimensions.
+     * Fabric's toSVG() may output dimensions scaled by the canvas element's actual
+     * pixel size (e.g., 2x due to devicePixelRatio), causing svg2pdf to render
+     * content at the wrong scale. This rewrites the root <svg> attributes to ensure
+     * the SVG coordinate system matches the intended page size exactly.
+     */
+    private normalizeSvgDimensions;
     /**
      * Find the Fabric.Canvas instance that belongs to a given container element,
      * using the global __fabricCanvasRegistry (set by PageCanvas).

package/dist/index.js

@@ -10758,6 +10758,18 @@ class PixldocsRenderer {
     });
     return this.render(resolved.config, options);
   }
+  /**
+   * Convenience: fetch by ID with flat data and render ALL pages.
+   */
+  async renderAllById(templateId, formData, options) {
+    const resolved = await resolveTemplateData({
+      templateId,
+      formData,
+      supabaseUrl: this.config.supabaseUrl,
+      supabaseAnonKey: this.config.supabaseAnonKey
+    });
+    return this.renderAllPages(resolved.config, options);
+  }
   // ─── Internal: render a page using the full PreviewCanvas engine ───
   getExpectedImageCount(config, pageIndex) {
     const page = config.pages[pageIndex];
@@ -11063,7 +11075,8 @@ class PixldocsRenderer {
             const prevSvgVPT = fabricInstance.svgViewportTransformation;
             fabricInstance.viewportTransform = [1, 0, 0, 1, 0, 0];
             fabricInstance.svgViewportTransformation = false;
-            const svgString = fabricInstance.toSVG();
+            let svgString = fabricInstance.toSVG();
+            svgString = this.normalizeSvgDimensions(svgString, canvasWidth, canvasHeight);
             if (prevVPT) fabricInstance.viewportTransform = prevVPT;
             fabricInstance.svgViewportTransformation = prevSvgVPT;
             const page = config.pages[pageIndex];
@@ -11096,6 +11109,33 @@ class PixldocsRenderer {
       );
     });
   }
+  /**
+   * Normalize the SVG's width/height/viewBox to match the logical page dimensions.
+   * Fabric's toSVG() may output dimensions scaled by the canvas element's actual
+   * pixel size (e.g., 2x due to devicePixelRatio), causing svg2pdf to render
+   * content at the wrong scale. This rewrites the root <svg> attributes to ensure
+   * 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 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}`
+    );
+    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}"`);
+    } else {
+      normalized = normalized.replace(/<svg\b/, `<svg viewBox="${viewBox}"`);
+    }
+    return normalized;
+  }
   /**
    * Find the Fabric.Canvas instance that belongs to a given container element,
    * using the global __fabricCanvasRegistry (set by PageCanvas).