diff --git a/index.html b/index.html index b8db1a9..8290ccc 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,11 @@
+ +

diff --git a/src/main.js b/src/main.js index 76bf07b..02b2706 100644 --- a/src/main.js +++ b/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()); diff --git a/src/print.js b/src/print.js index 3f4264d..21b3bb5 100644 --- a/src/print.js +++ b/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; }