1
0
Fork 0

style to cover page

This commit is contained in:
Enoch Riese 2022-08-24 00:23:45 -05:00
parent 553ac7b25a
commit 0022d7ba8e
4 changed files with 78 additions and 18 deletions

View file

@ -1,7 +1,15 @@
import PDFDocument from 'pdfkit/js/pdfkit.standalone'
import SVGtoPDF from 'svg-to-pdfkit'
import fileSaver from 'file-saver'
import {logo} from '@freesewing/plugin-logo'
const logoSvg = `<svg viewBox="-22 -36 46 50">
<style> path {fill: none; stroke: #555555; stroke-width: 0.5} </style>
<defs>${logo}</defs>
<use xlink:href="#logo" x="0" y="0"></use>
</svg>`
console.log(logoSvg)
/**
* About these numbers, as they are the hardest part of all this:
* PdfKit, the library we're using for pdf generation, uses points as a unit, so when we tell it things like where to put the svg and how big the svg is, we need those numbers to be in points
@ -32,6 +40,7 @@ export default class Exporter {
/** the pdfKit instance that is writing the document */
pdf
buffers
strings
/** the usable width (excluding margin) of the pdf page, in points */
pageWidth
@ -53,10 +62,11 @@ export default class Exporter {
pagesWithContent = {}
constructor({svg, settings, pages}) {
constructor({svg, settings, pages, strings}) {
this.settings = settings
this.pagesWithContent = pages.withContent;
this.svg = svg
this.strings = strings
this.createPdf()
this.margin = this.settings.margin * mmToPoints // margin is in mm because it comes from us, so we convert it to points
@ -116,17 +126,49 @@ export default class Exporter {
return
}
//abitrary margin for visual space
let coverMargin = 50
let lineLevel = 50
let lineStart = 50
let coverHeight = this.pageHeight - coverMargin * 2
let coverWidth = this.pageWidth - coverMargin * 2
this.pdf.fontSize(28)
this.pdf.text('FreeSewing', lineStart, lineLevel)
lineLevel += 28
this.pdf.fontSize(12)
this.pdf.text(this.strings.tagline, lineStart, lineLevel)
lineLevel += 12 + 20
this.pdf.fontSize(48)
this.pdf.text(this.strings.design, lineStart, lineLevel)
lineLevel += 48
await SVGtoPDF(this.pdf, logoSvg, this.pdf.page.width - lineStart - 100, lineStart, {
width: 100,
height: lineLevel - lineStart - 8,
preserveAspectRatio: 'xMaxYMin meet'
})
this.pdf.lineWidth(1)
this.pdf.moveTo(lineStart, lineLevel - 8)
.lineTo(this.pdf.page.width - lineStart, lineLevel - 8)
.stroke()
this.pdf.fillColor('#888888')
this.pdf.fontSize(10)
this.pdf.text(this.strings.url, lineStart, lineLevel)
//abitrary margin for visual space
let coverMargin = 85
let coverHeight = this.pdf.page.height - coverMargin * 2
let coverWidth = this.pdf.page.width - coverMargin * 2
// add the entire pdf to the page, so that it fills the available space as best it can
await SVGtoPDF(this.pdf, this.svg, coverMargin, coverMargin, {
await SVGtoPDF(this.pdf, this.svg, coverMargin, coverMargin * 1.5, {
width: coverWidth,
height: coverHeight,
assumePt: true,
assumePt: false,
// use aspect ratio to center it
preserveAspectRatio: 'xMidYMid meet'
});