From 16424c8d771255c146d38b0cc4847b15704f880e Mon Sep 17 00:00:00 2001 From: chitraa-jain <164042739+chitraa-cj@users.noreply.github.com> Date: Thu, 27 Jun 2024 00:20:29 +0530 Subject: [PATCH 1/2] fixed the pdf flowchart issue --- src/app/workspace/[fileId]/page.tsx | 45 +++++++++++++---------------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/src/app/workspace/[fileId]/page.tsx b/src/app/workspace/[fileId]/page.tsx index c2725ee..62b6536 100644 --- a/src/app/workspace/[fileId]/page.tsx +++ b/src/app/workspace/[fileId]/page.tsx @@ -33,7 +33,7 @@ function Workspace({ params }: any) { }); setFileData(result); }; - + const saveAsPdf = async () => { const { default: jsPDF } = await jsPDFPromise; const { exportToSvg } = await excalidrawPromise; @@ -68,7 +68,6 @@ function Workspace({ params }: any) { case "list": lines = block.data.items.map((item: string) => ({ text: `• ${item}`, style: 'normal' })); break; - // Add more cases if needed for different block types default: lines = [{ text: block.data.text, style: 'normal' }]; } @@ -97,7 +96,6 @@ function Workspace({ params }: any) { } if (line.style !== 'header') { - // Split text if it's too wide and handle separately const wrappedLines = pdf.splitTextToSize(line.text, textWidth); wrappedLines.forEach((wrappedLine: string) => { if (y + 10 > textHeight) { @@ -110,7 +108,6 @@ function Workspace({ params }: any) { } }); - // Reset font style and size after each block pdf.setFont("helvetica", "normal"); pdf.setFontSize(12); }); @@ -122,21 +119,9 @@ function Workspace({ params }: any) { exportToSvg({ elements: elements, - appState: { ...appState, exportBackground: false }, // No background + appState: { ...appState, exportBackground: false }, files: files, }).then((svg: SVGSVGElement) => { - // Add heading for the flowchart - pdf.setFont("helvetica", "bold"); - pdf.setFontSize(16); // Set font size for the heading - const headingText = "Flowchart"; - const headingWidth = pdf.getStringUnitWidth(headingText) * pdf.internal.scaleFactor; - const headingX = (pageWidth - headingWidth) / 2; - pdf.text(headingText, headingX, y + 10); - pdf.setFontSize(12); // Reset font size - pdf.setFont("helvetica", "normal"); - y += 20; // Adjust y position to avoid overlap with the heading - - // Convert SVG to PNG using the Canvas API const svgData = new XMLSerializer().serializeToString(svg); const canvas = document.createElement("canvas"); const context = canvas.getContext("2d"); @@ -150,13 +135,24 @@ function Workspace({ params }: any) { const imgData = canvas.toDataURL("image/png"); const imgProps = pdf.getImageProperties(imgData); - const imgHeight = (imgProps.height * pageWidth) / imgProps.width; + let imgWidth = pageWidth - margin * 2; + let imgHeight = (imgProps.height * imgWidth) / imgProps.width; + + // Check if the image height exceeds the remaining page height + if (y + imgHeight > pageHeight - margin) { + pdf.addPage(); + y = margin; + } - // Add canvas image just below the heading - pdf.addImage(imgData, "PNG", margin, y, pageWidth - margin * 2, imgHeight); - y += imgHeight; + // Check if the image height exceeds the page height and scale it down if necessary + if (imgHeight > pageHeight - margin * 2) { + const scaleFactor = (pageHeight - margin * 2) / imgHeight; + imgHeight *= scaleFactor; + imgWidth *= scaleFactor; + } + + pdf.addImage(imgData, "PNG", margin, y, imgWidth, imgHeight, undefined, "FAST"); - // Save the PDF pdf.save("document.pdf"); } else { console.error("Failed to get canvas context"); @@ -169,8 +165,8 @@ function Workspace({ params }: any) { } else { console.error("Unable to find the content to save as PDF"); } - }; - + }; + const parseText = (text: string) => { const lines: any[] = []; const parser = new DOMParser(); @@ -186,7 +182,6 @@ function Workspace({ params }: any) { }); return lines; }; - return (
From 9de07e62afaf4cb7996908c3e0d99011b781e282 Mon Sep 17 00:00:00 2001 From: chitraa-jain <164042739+chitraa-cj@users.noreply.github.com> Date: Thu, 27 Jun 2024 00:31:59 +0530 Subject: [PATCH 2/2] added --- src/app/workspace/[fileId]/page.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/app/workspace/[fileId]/page.tsx b/src/app/workspace/[fileId]/page.tsx index 62b6536..97898e8 100644 --- a/src/app/workspace/[fileId]/page.tsx +++ b/src/app/workspace/[fileId]/page.tsx @@ -139,11 +139,21 @@ function Workspace({ params }: any) { let imgHeight = (imgProps.height * imgWidth) / imgProps.width; // Check if the image height exceeds the remaining page height - if (y + imgHeight > pageHeight - margin) { + if (y + imgHeight + 20 > pageHeight - margin) { // 20 for the heading space pdf.addPage(); y = margin; } + // Add heading for the flowchart + pdf.setFont("helvetica", "bold"); + pdf.setFontSize(16); // Set font size for the heading + const headingText = "Flowchart"; + const headingWidth = pdf.getStringUnitWidth(headingText) * 16 / pdf.internal.scaleFactor; + pdf.text(headingText, (pageWidth - headingWidth) / 2, y); + pdf.setFontSize(12); // Reset font size + pdf.setFont("helvetica", "normal"); + y += 20; // Adjust y position to avoid overlap with the heading + // Check if the image height exceeds the page height and scale it down if necessary if (imgHeight > pageHeight - margin * 2) { const scaleFactor = (pageHeight - margin * 2) / imgHeight;