From a6df590ab713c6159d5a32ea3c3b96da298840f4 Mon Sep 17 00:00:00 2001 From: Ivan Goethals Date: Tue, 15 Oct 2024 22:58:48 +0200 Subject: [PATCH] PDF wordt nu gegenereerd voor alle pagina's in plaats van enkel de zichtbare pagina. --- builddate.js | 2 +- eendraadschema.js | 59 ++++++++++++-------------- jsPDF/print.js | 96 +++++++++++++++++++++++++++---------------- src/eendraadschema.js | 59 ++++++++++++-------------- src/general.ts | 2 +- src/main.ts | 69 +++++++++++++++---------------- 6 files changed, 151 insertions(+), 136 deletions(-) diff --git a/builddate.js b/builddate.js index 2c5dcbb..0927b58 100644 --- a/builddate.js +++ b/builddate.js @@ -1 +1 @@ -var CONF_builddate="20241014-135814" +var CONF_builddate="20241015-223338" diff --git a/eendraadschema.js b/eendraadschema.js index d9e96f7..2151f16 100644 --- a/eendraadschema.js +++ b/eendraadschema.js @@ -28,12 +28,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge }); }; var __generator = (this && this.__generator) || function (thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); - while (_) try { + while (g && (g = 0, op[0] && (_ = 0)), _) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { @@ -6191,11 +6191,10 @@ function updateDPI() { } function dopdfdownload() { updateDPI(); - printPDF(document.getElementById("printsvgarea").innerHTML, structure.print_table.papersize, //Page format can be "A4" and "A3", nothing else - structure.print_table.pages[structure.print_table.displaypage].stop - structure.print_table.pages[structure.print_table.displaypage].start, - /*structure.print_table.pages[structure.print_table.displaypage].height, */ - structure.print_table.stopy - structure.print_table.starty, structure.properties.owner, structure.properties.installer, structure.properties.control, structure.properties.info, structure.properties.dpi, structure.print_table.displaypage + 1, //starts counting at zero so we need to add 1 - structure.print_table.pages.length, document.getElementById("dopdfname").value, //filename + //let page = structure.print_table.displaypage+1; //starts counting at zero so we need to add 1 + var svg = flattenSVGfromString(structure.toSVG(0, "horizontal").data); + var pages = Array.from({ length: structure.print_table.pages.length }, function (_, i) { return i + 1; }); + printPDF(svg, /*document.getElementById("printsvgarea").innerHTML*/ structure.print_table, structure.properties, pages, document.getElementById("dopdfname").value, //filename document.getElementById("progress_pdf") //HTML element where callback status can be given ); } @@ -6235,12 +6234,12 @@ function renderAddressStacked() { ''; return outHTML; } -function getPrintSVGWithoutAddress() { +function getPrintSVGWithoutAddress(page) { + if (page === void 0) { page = structure.print_table.displaypage; } var outSVG = new SVGelement(); outSVG = structure.toSVG(0, "horizontal"); var scale = 1; //var height = outSVG.yup + outSVG.ydown; - var page = structure.print_table.displaypage; var startx = structure.print_table.pages[page].start; var width = structure.print_table.pages[page].stop - startx; var starty = structure.print_table.getstarty(); @@ -6275,15 +6274,29 @@ function printsvg() { var width = outSVG.xleft + outSVG.xright; structure.print_table.setHeight(height); structure.print_table.setMaxWidth(width); + strleft += '
'; + switch (structure.print_table.getPaperSize()) { + case "A3": + strleft += ' '; + break; + case "A4": + default: strleft += ' '; + } + if (structure.properties.dpi == 600) { + strleft += ' '; + } + else { + strleft += ' '; + } + strleft += '   
'; strleft += '
'; strleft += structure.print_table.toHTML() + '
'; strleft += '		'; strleft += 'Klik op de groene pijl om het schema over meerdere pagina\'s te printen en kies voor elke pagina de start- en stop-positie in het schema (in pixels). ' - + '

Onderaan kan je bekijken welk deel van het schema op welke pagina belandt en de pagina exporteren en/of omzetten naar PDF. ' - + "Het exporteren of omzetten naar PDF dient voor elke pagina herhaald te worden."; + + '

Onderaan kan je bekijken welk deel van het schema op welke pagina belandt. '; strleft += '
'; strleft += '
'; - strleft += 'Pagina '; for (var i = 0; i < structure.print_table.pages.length; i++) { if (i == structure.print_table.displaypage) { strleft += ''; @@ -6293,16 +6306,6 @@ function printsvg() { } } strleft += '  '; - strleft += 'Layout '; - switch (structure.print_table.getPaperSize()) { - case "A3": - strleft += ''; - break; - case "A4": - strleft += ''; - default: - } - strleft += '  '; switch (structure.print_table.getModeVertical()) { case "kies": strleft += 'Hoogte '; @@ -6316,15 +6319,7 @@ function printsvg() { strleft += 'Hoogte '; } strleft += '

'; - strleft += '
   Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).

'; - strleft += ''; - if (structure.properties.dpi == 600) { - strleft += ''; - } - else { - strleft += ''; - } - strleft += '
   Sla tekening dadelijk op als PDF.

'; + strleft += '
   Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).

'; strleft += displayButtonPrintToPdf(); strleft += '
'; document.getElementById("configsection").innerHTML = strleft; diff --git a/jsPDF/print.js b/jsPDF/print.js index 0c7fe28..02db6e8 100644 --- a/jsPDF/print.js +++ b/jsPDF/print.js @@ -1,6 +1,6 @@ -function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", control="", info="", DPI=300, page=1, maxpage=1, filename="eendraadschema_print.pdf", statuscallback) { // Defaults to A4 and 300 DPI but 600 DPI is better +function printPDF(svg, print_table, properties, pages=[1], filename="eendraadschema_print.pdf", statuscallback) { // Defaults to A4 and 300 DPI but 600 DPI is better - if (format=="A3") { + if (print_table.papersize=="A3") { paperdetails = { // All sizes in millimeters paperwidth: 420, paperheight: 297, @@ -38,8 +38,8 @@ function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", contro let max_height_in_mm = paperdetails.paperheight - 2 * paperdetails.paper_margin - paperdetails.owner_box_height - paperdetails.drawnby_box_height - paperdetails.svg_padding; let max_width_in_mm = paperdetails.paperwidth - 2 * paperdetails.paper_margin; - let max_height_in_pixels = max_height_in_mm/25.4*DPI; - let max_width_in_pixels = max_width_in_mm/25.4*DPI; + let max_height_in_pixels = max_height_in_mm/25.4*properties.dpi; + let max_width_in_pixels = max_width_in_mm/25.4*properties.dpi; let scale = Math.min(max_height_in_pixels/sizey, max_width_in_pixels/sizex); @@ -69,9 +69,6 @@ function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", contro // Create a temporary element to hold the HTML const tempElement = document.createElement('div'); tempElement.innerHTML = html; - - // Replace
tags with \n - //tempElement.innerHTML = tempElement.innerHTML.replace(/
/g, "\n"); // Use the textContent property to get the Unicode string const unicodeString = tempElement.textContent || tempElement.innerText || ''; @@ -90,20 +87,26 @@ function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", contro return printlines; } - // ___ FUNCTION generatePDF ___ - // - // Makes the actual PDF - - function generatePDF(svg, sizex, sizey) { + function init() { const { jsPDF } = window.jspdf; var doc; - if (format=="A3") { + if (print_table.papersize=="A3") { doc = new jsPDF('landscape', 'mm', 'a3', true); } else { doc = new jsPDF('landscape', 'mm', 'a4', true); } + return(doc); + } + + // ___ FUNCTION generatePDF ___ + // + // Makes the actual PDF + + function addPage(doc, svg, sizex, sizey, callback, iter=0) { + const { jsPDF } = window.jspdf; + svgToPng(svg, sizex, sizey, function(png,scale) { let canvasx = (paperdetails.paperwidth - 2*paperdetails.paper_margin); @@ -111,7 +114,7 @@ function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", contro if (sizex/sizey > canvasx/canvasy) { //width is leading let max_height_in_mm = paperdetails.paperheight - 2 * paperdetails.paper_margin - paperdetails.owner_box_height - paperdetails.drawnby_box_height - paperdetails.svg_padding; - //let max_height_in_pixels = max_height_in_mm/25.4*DPI; + //let max_height_in_pixels = max_height_in_mm/25.4*properties.dpi; let shiftdown = (max_height_in_mm - sizey/sizex*canvasx)/2; doc.addImage(png, 'PNG', paperdetails.paper_margin, paperdetails.paper_margin+shiftdown, canvasx, sizey/sizex * canvasx, undefined, 'FAST'); } else { //height is leading @@ -160,7 +163,7 @@ function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", contro startx + 2, // Leave 2mm at the left of the drawn by text paperdetails.paperheight - paperdetails.paper_margin - (paperdetails.drawnby_box_height-textHeight)/2 - textHeight/6); - doc.text('pagina. ' + page + '/' + maxpage, + doc.text('pagina. ' + pages[iter] + '/' + print_table.pages.length, startx + 3 * paperdetails.owner_box_width + 2, //Leave 2mm at the left paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight + 1.5 ); //Leave 1.55mm at the top @@ -182,42 +185,65 @@ function printPDF(svg, format="A4", sizex, sizey, owner="", installer="", contro doc.setFont("helvetica", "normal"); - doc.text(htmlToPDFlines(doc,control).slice(0,8), + doc.text(htmlToPDFlines(doc,properties.control).slice(0,8), startx + 2 + 3, paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight * (1+1.2) + 1.5); - doc.text(htmlToPDFlines(doc,owner).slice(0,8), + doc.text(htmlToPDFlines(doc,properties.owner).slice(0,8), startx + paperdetails.owner_box_width + 2 + 3, paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight * (1+1.2) + 1.5); - doc.text(htmlToPDFlines(doc,installer).slice(0,8), + doc.text(htmlToPDFlines(doc,properties.installer).slice(0,8), startx + (2*paperdetails.owner_box_width) + 2 + 3, paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight * (1+1.2) + 1.5); - let infoshorter = info.replace('https://www.eendraadschema.goethals-jacobs.be','eendraadschema'); + let infoshorter = properties.info.replace('https://www.eendraadschema.goethals-jacobs.be','eendraadschema'); doc.text(htmlToPDFlines(doc,infoshorter).slice(0,8), startx + (3*paperdetails.owner_box_width) + 2 + 3, paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight * (1+3*1.2) + 1.5); - doc.save(filename); - statuscallback.innerHTML = 'PDF is klaar. Kijk in uw Downloads folder indien deze niet spontaan wordt geopend.'; - - //--- functions that could be useful some day --- - //const textWidth = doc.getTextWidth("Page 1"); - //doc.addPage(); - - // Open PDF in a new tab with the correct filename - //const pdfBlob = doc.output('blob'); - //doc.output('dataurlnewwindow'); - /*const pdfBlob = doc.output('pdfjsnewwindow'); - const url = URL.createObjectURL(pdfBlob); - window.open(url, '_blank');*/ - - //window.open(doc.output('bloburl'), '_blank'); + callback(doc, iter+1); }); } + function cropSVG(svg, page) { + + let startx = print_table.pages[page].start; + let width = print_table.pages[page].stop; + let starty = print_table.starty; + let height = print_table.stopy - starty; + + let viewbox = '' + startx + ' ' + starty + ' ' + width + ' ' + height; + + let outsvg = '' + + svg + ''; + + return(outsvg); + } + + function nextpage(doc, iter=0) { + + if (iter < pages.length ) { + statuscallback.innerHTML = 'Pagina ' + pages[iter] + ' wordt gegenereerd. Even geduld..'; + if (iter > 0) doc.addPage(); + let sizex = print_table.pages[pages[iter]-1].stop - print_table.pages[pages[iter]-1].start; + let sizey = print_table.stopy - print_table.starty; + addPage(doc, cropSVG(svg, pages[iter]-1), sizex, sizey, nextpage, iter); //add one more page and callback here + } else { + save(doc); //we are done + } + } + + function save(doc) { + doc.save(filename); + statuscallback.innerHTML = 'PDF is klaar. Kijk in uw Downloads folder indien deze niet spontaan wordt geopend.'; + } + statuscallback.innerHTML = 'PDF wordt gegenereerd. Even geduld..'; - generatePDF(svg, sizex, sizey); + + doc = init(); + nextpage(doc, 0) + } \ No newline at end of file diff --git a/src/eendraadschema.js b/src/eendraadschema.js index d9e96f7..2151f16 100644 --- a/src/eendraadschema.js +++ b/src/eendraadschema.js @@ -28,12 +28,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge }); }; var __generator = (this && this.__generator) || function (thisArg, body) { - var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; - return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype); + return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); - while (_) try { + while (g && (g = 0, op[0] && (_ = 0)), _) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { @@ -6191,11 +6191,10 @@ function updateDPI() { } function dopdfdownload() { updateDPI(); - printPDF(document.getElementById("printsvgarea").innerHTML, structure.print_table.papersize, //Page format can be "A4" and "A3", nothing else - structure.print_table.pages[structure.print_table.displaypage].stop - structure.print_table.pages[structure.print_table.displaypage].start, - /*structure.print_table.pages[structure.print_table.displaypage].height, */ - structure.print_table.stopy - structure.print_table.starty, structure.properties.owner, structure.properties.installer, structure.properties.control, structure.properties.info, structure.properties.dpi, structure.print_table.displaypage + 1, //starts counting at zero so we need to add 1 - structure.print_table.pages.length, document.getElementById("dopdfname").value, //filename + //let page = structure.print_table.displaypage+1; //starts counting at zero so we need to add 1 + var svg = flattenSVGfromString(structure.toSVG(0, "horizontal").data); + var pages = Array.from({ length: structure.print_table.pages.length }, function (_, i) { return i + 1; }); + printPDF(svg, /*document.getElementById("printsvgarea").innerHTML*/ structure.print_table, structure.properties, pages, document.getElementById("dopdfname").value, //filename document.getElementById("progress_pdf") //HTML element where callback status can be given ); } @@ -6235,12 +6234,12 @@ function renderAddressStacked() { ''; return outHTML; } -function getPrintSVGWithoutAddress() { +function getPrintSVGWithoutAddress(page) { + if (page === void 0) { page = structure.print_table.displaypage; } var outSVG = new SVGelement(); outSVG = structure.toSVG(0, "horizontal"); var scale = 1; //var height = outSVG.yup + outSVG.ydown; - var page = structure.print_table.displaypage; var startx = structure.print_table.pages[page].start; var width = structure.print_table.pages[page].stop - startx; var starty = structure.print_table.getstarty(); @@ -6275,15 +6274,29 @@ function printsvg() { var width = outSVG.xleft + outSVG.xright; structure.print_table.setHeight(height); structure.print_table.setMaxWidth(width); + strleft += '
'; + switch (structure.print_table.getPaperSize()) { + case "A3": + strleft += ' '; + break; + case "A4": + default: strleft += ' '; + } + if (structure.properties.dpi == 600) { + strleft += ' '; + } + else { + strleft += ' '; + } + strleft += '   
'; strleft += '
'; strleft += structure.print_table.toHTML() + '
'; strleft += '		'; strleft += 'Klik op de groene pijl om het schema over meerdere pagina\'s te printen en kies voor elke pagina de start- en stop-positie in het schema (in pixels). ' - + '

Onderaan kan je bekijken welk deel van het schema op welke pagina belandt en de pagina exporteren en/of omzetten naar PDF. ' - + "Het exporteren of omzetten naar PDF dient voor elke pagina herhaald te worden."; + + '

Onderaan kan je bekijken welk deel van het schema op welke pagina belandt. '; strleft += '
'; strleft += '
'; - strleft += 'Pagina '; for (var i = 0; i < structure.print_table.pages.length; i++) { if (i == structure.print_table.displaypage) { strleft += ''; @@ -6293,16 +6306,6 @@ function printsvg() { } } strleft += '  '; - strleft += 'Layout '; - switch (structure.print_table.getPaperSize()) { - case "A3": - strleft += ''; - break; - case "A4": - strleft += ''; - default: - } - strleft += '  '; switch (structure.print_table.getModeVertical()) { case "kies": strleft += 'Hoogte '; @@ -6316,15 +6319,7 @@ function printsvg() { strleft += 'Hoogte '; } strleft += '

'; - strleft += '
   Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).

'; - strleft += ''; - if (structure.properties.dpi == 600) { - strleft += ''; - } - else { - strleft += ''; - } - strleft += '
   Sla tekening dadelijk op als PDF.

'; + strleft += '
   Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).

'; strleft += displayButtonPrintToPdf(); strleft += '
'; document.getElementById("configsection").innerHTML = strleft; diff --git a/src/general.ts b/src/general.ts index 5d007f3..8d4fe94 100644 --- a/src/general.ts +++ b/src/general.ts @@ -1,5 +1,5 @@ declare var pako: any; -declare function printPDF(svg, format, sizex, sizey, owner, installer, control, info, DPI, page, maxpage, filename, statuscallback): any; +declare function printPDF(svgs, print_table, properties, pages, filename, statuscallback): any; function deepClone (obj) { var _out = new obj.constructor; diff --git a/src/main.ts b/src/main.ts index 4058ed0..e5f1078 100644 --- a/src/main.ts +++ b/src/main.ts @@ -317,19 +317,16 @@ function updateDPI() { function dopdfdownload() { updateDPI(); + //let page = structure.print_table.displaypage+1; //starts counting at zero so we need to add 1 + + let svg = flattenSVGfromString(structure.toSVG(0,"horizontal").data); + const pages = Array.from({ length: structure.print_table.pages.length }, (_, i) => i+1); + printPDF( - document.getElementById("printsvgarea").innerHTML, - structure.print_table.papersize, //Page format can be "A4" and "A3", nothing else - structure.print_table.pages[structure.print_table.displaypage].stop - structure.print_table.pages[structure.print_table.displaypage].start, - /*structure.print_table.pages[structure.print_table.displaypage].height, */ - structure.print_table.stopy - structure.print_table.starty, - structure.properties.owner, - structure.properties.installer, - structure.properties.control, - structure.properties.info, - structure.properties.dpi, - structure.print_table.displaypage+1, //starts counting at zero so we need to add 1 - structure.print_table.pages.length, + svg, /*document.getElementById("printsvgarea").innerHTML*/ + structure.print_table, + structure.properties, + pages, (document.getElementById("dopdfname") as HTMLInputElement).value, //filename document.getElementById("progress_pdf") //HTML element where callback status can be given ); @@ -377,14 +374,13 @@ function renderAddressStacked() { return outHTML; } -function getPrintSVGWithoutAddress() { +function getPrintSVGWithoutAddress(page:number = structure.print_table.displaypage) { var outSVG = new SVGelement(); outSVG = structure.toSVG(0,"horizontal"); var scale = 1; //var height = outSVG.yup + outSVG.ydown; - var page = structure.print_table.displaypage; var startx = structure.print_table.pages[page].start; var width = structure.print_table.pages[page].stop - startx; var starty = structure.print_table.getstarty(); @@ -430,6 +426,23 @@ function printsvg() { structure.print_table.setHeight(height); structure.print_table.setMaxWidth(width); + strleft += '
'; + + switch (structure.print_table.getPaperSize()) { + case "A3": strleft += ' '; break; + case "A4": default: strleft += ' '; + } + + if (structure.properties.dpi==600) { + strleft += ' ' + } else { + strleft += ' ' + } + + strleft += '   
'; + + + strleft += '
'; strleft += structure.print_table.toHTML() + '
'; @@ -437,14 +450,14 @@ function printsvg() { strleft += '		'; strleft += 'Klik op de groene pijl om het schema over meerdere pagina\'s te printen en kies voor elke pagina de start- en stop-positie in het schema (in pixels). ' - + '

Onderaan kan je bekijken welk deel van het schema op welke pagina belandt en de pagina exporteren en/of omzetten naar PDF. ' - + "Het exporteren of omzetten naar PDF dient voor elke pagina herhaald te worden."; + + '

Onderaan kan je bekijken welk deel van het schema op welke pagina belandt. '; strleft += '
' + strleft += '
'; - strleft += 'Pagina ' for (let i=0; i' + (i+1) + ''; @@ -453,16 +466,7 @@ function printsvg() { } } strleft += '  '; - strleft += 'Layout '; - switch (structure.print_table.getPaperSize()) { - case "A3": - strleft += ''; - break; - case "A4": - strleft += ''; - default: - } - strleft += '  '; + switch (structure.print_table.getModeVertical()) { case "kies": @@ -478,14 +482,9 @@ function printsvg() { } strleft += '

'; - strleft += '
   Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).

'; - strleft += ''; - if (structure.properties.dpi==600) { - strleft += '' - } else { - strleft += '' - } - strleft += '
   Sla tekening dadelijk op als PDF.

'; + strleft += '
   Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).

'; + + strleft += displayButtonPrintToPdf(); strleft += '
';