added multipage printing

index.html

@@ -14,6 +14,11 @@
             <option value="cm">Centimetres</option>
             <option value="in">Inches</option>
         </select> <br>
+	<label for="p">Paper size: </label>
+	<select id="p">
+		<option value="a3">A3</option>
+		<option value="a4">A4</option>
+	</select> <br>
         <label for="h">Height of parachute (h):</label>
         <input type="number" id="h" min="0"/><br>
         <label for="r">Radius of parachute (r):</label>

src/main.js

@@ -9,6 +9,7 @@ let npInput = document.getElementById("np");
 let outputdiv = document.getElementById("output");
 let stepInput = document.getElementById("steps");
 let lenOutput = document.getElementById("len");
+let paperInput = document.getElementById("p");
 
 let height = 0;
 let radius = 0;
@@ -29,6 +30,7 @@ let panelPoints = [];
 let panelPaths = [];
 let svgSize = { width: 0, height: 0 };
 let scaleFactor = 1;
+let paperSize = "a3";
 
 let n = 0;
 let unit = "px";
@@ -45,6 +47,7 @@ function getValues() {
     spillRadius = /* Math.floor */(parseFloat(rsInput.value) * multiplier);
     numberOfPanels = /* Math.floor */(parseFloat(npInput.value) * multiplier);
     step = radius / parseInt(stepInput.value);
+	paperSize = paperInput.value;
     if (isNaN(spillRadius)) {
         spillRadius = /* Math.floor */(0.05 * radius);
         rsInput.value = 0.05 * radius / multiplier;
@@ -180,7 +183,7 @@ function generatePanel() {
     generateCoordinates();
     plotSVG();
 	calculateScaleFactor(unit);
-	createPdf(panelPaths, svgSize, scaleFactor);
+	createPdf(panelPaths, svgSize, scaleFactor, paperSize);
 }
 
 document.getElementById("generate").addEventListener("click", () => generatePanel());

src/print.js

@@ -1,30 +1,89 @@
 import { PDFDocument, degrees, rgb } from "pdf-lib";
 
-export async function createPdf(paths, svgSize, scaleFactor) {
+export async function createPdf(paths, svgSize, scaleFactor, paperSize) {
 	const pdfDocument = await PDFDocument.create();
-	const page = pdfDocument.addPage();
 
-	const { width, height } = page.getSize();
+	// calculate number of pages needed
+	
+	const margins = { x: 15, y: 15 };
 	console.log(svgSize);
 	console.log(`Scale factor ${scaleFactor}`);
 
-	const svgSettings = { 
-		x: (width + svgSize.height * scaleFactor)/2, 
-		y: height,
-		rotate: degrees(-90),
-		borderColor: rgb(0,0,0),
-		borderWidth: 1,
-		scale: scaleFactor
-	};
+	// paper sizes in pt 
+	let sizes = {
+		"a3": {
+			x: 841.89-2*margins.x,
+			y: 1190.55-2*margins.y,
+		},
+		"a4": {
+			x: 595.28-2*margins.x,
+			y: 841.89-2*margins.y,
+		}
+	}
 
-	page.drawLine({
-		start: { x: width/2, y: height },
-		end: { x: width/2, y: 0 },
-	});
+	let nPages = Math.ceil((svgSize.width *scaleFactor) / sizes[paperSize].y);
+	console.log(`${svgSize.width} * ${scaleFactor} / ${sizes[paperSize].y} = ${((svgSize.width *scaleFactor) / sizes[paperSize].y)}`);
+	let needsMarkers = false;
+	if (1 < nPages) {
+		needsMarkers = true; 
+	}
+
+	console.log(nPages);
+	 
+	// make enough pages
+	for (let i = 0; i < nPages; i++) {
+		let offset = i*(sizes[paperSize].y - 4 * margins.y);
+		let page = pdfDocument.addPage();
+		page.setSize(sizes[paperSize].x, sizes[paperSize].y);
+		const { width, height } = page.getSize();
+
+		console.log(page.getSize());
+
+		const svgSettings = { 
+			x: (width + svgSize.height * scaleFactor)/2, 
+			y: height + offset - margins.y,
+			rotate: degrees(-90),
+			borderColor: rgb(0,0,0),
+			borderWidth: 1,
+			scale: scaleFactor
+		};
+		
+		// centre line
+		// page.drawLine({
+		//	start: { x: width/2, y: height },
+		//	end: { x: width/2, y: 0 },
+		// });
+
+		page.moveTo(5, height - 5);
+		// panel
+		page.drawSvgPath(paths[0], svgSettings);
+		page.drawSvgPath(paths[1], svgSettings);
+
+		// margins
+		page.drawSvgPath(`M ${margins.x/2},${margins.y/2} ${margins.x/2},${height-margins.y/2} ${width-margins.x/2},${height-margins.y/2} ${width-margins.x/2},${margins.y/2} ${margins.x/2},${margins.y/2} Z`, {
+			x:0,
+			y:height,
+			borderColor: rgb(1,1,1),
+			borderWidth: margins.x
+		});
+		
+		// draw top alignmnet marker 
+		if (i != 0 && needsMarkers) {
+			page.drawLine({
+				start: { x: 0, y: height - 2 * margins.y },
+				end: { x: width, y: height - 2 * margins.y },
+			});
+		} 
+
+		// draw bottom alignment marker
+		if (i != (nPages-1) && needsMarkers) {
+			page.drawLine({
+				start: { x: 0, y: 2 * margins.y },
+				end: { x: width, y: 2 * margins.y },
+			});
+		}
+	}
 
-	page.moveTo(5, height - 5);
-	page.drawSvgPath(paths[0], svgSettings);
-	page.drawSvgPath(paths[1], svgSettings);
 	const pdfDataUri = await pdfDocument.saveAsBase64({ dataUri: true });
 	document.getElementById("pdf").src = pdfDataUri;
 }