Skip to content

Commit fe22ed2

Browse files
RodriSanchez1RodriSanchez1
authored
Merge pull request #1570 from RodriSanchez1/fix/exportPDF
Fix / Export PDF
2 parents 8d4e9a8 + 052270d commit fe22ed2

File tree

2 files changed

+122
-64
lines changed

2 files changed

+122
-64
lines changed

‎src/components/Settings/Export/Export.constants.js

+66
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ export const NOT_FOUND_IMAGE =
3232
export const EMPTY_IMAGE =
3333
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
3434

35+
export const PICSEEPAL_GRID_WIDTH = 553;
36+
export const PDF_GRID_WIDTH = 800;
37+
export const PDF_BORDER_WIDTH = 2;
38+
3539
export const EXPORT_CONFIG_BY_TYPE = {
3640
cboard: {
3741
filename: 'board.json',
@@ -65,3 +69,65 @@ export const PDF_GRID_BORDER = {
6569
labelData: [true, false, true, true]
6670
}
6771
};
72+
73+
export const PICSEEPAL_IMAGES_WIDTH = {
74+
column: {
75+
1: 130,
76+
2: 130,
77+
3: 80,
78+
4: 84,
79+
5: 75,
80+
6: 60,
81+
7: 55,
82+
8: 55,
83+
9: 45,
84+
10: 45,
85+
11: 40,
86+
12: 37
87+
},
88+
row: {
89+
1: 130,
90+
2: 130,
91+
3: 86,
92+
4: 59,
93+
5: 45,
94+
6: 33,
95+
7: 29,
96+
8: 23,
97+
9: 17,
98+
10: 14,
99+
11: 11,
100+
12: 9
101+
}
102+
};
103+
104+
export const PDF_IMAGES_WIDTH = {
105+
column: {
106+
1: 130,
107+
2: 130,
108+
3: 130,
109+
4: 100,
110+
5: 100,
111+
6: 100,
112+
7: 100,
113+
8: 90,
114+
9: 80,
115+
10: 70,
116+
11: 70,
117+
12: 60
118+
},
119+
row: {
120+
1: 130,
121+
2: 130,
122+
3: 130,
123+
4: 100,
124+
5: 80,
125+
6: 60,
126+
7: 50,
127+
8: 40,
128+
9: 35,
129+
10: 30,
130+
11: 30,
131+
12: 25
132+
}
133+
};

‎src/components/Settings/Export/Export.helpers.js

+56-64
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@ import {
1414
CBOARD_ZIP_OPTIONS,
1515
NOT_FOUND_IMAGE,
1616
EMPTY_IMAGE,
17-
PDF_GRID_BORDER
17+
PDF_GRID_BORDER,
18+
PICSEEPAL_GRID_WIDTH,
19+
PDF_GRID_WIDTH,
20+
PDF_BORDER_WIDTH,
21+
PICSEEPAL_IMAGES_WIDTH,
22+
PDF_IMAGES_WIDTH
1823
} from './Export.constants';
1924
import {
2025
LABEL_POSITION_ABOVE,
@@ -360,10 +365,10 @@ async function toDataURL(url, styles = {}, outputFormat = 'image/jpeg') {
360365
pdfMake.tableLayouts = {
361366
pdfGridLayout: {
362367
hLineWidth: function(i, node) {
363-
return 2;
368+
return PDF_BORDER_WIDTH;
364369
},
365370
vLineWidth: function(i) {
366-
return 2;
371+
return PDF_BORDER_WIDTH;
367372
},
368373
hLineColor: function(i) {
369374
return '#ffffff';
@@ -380,21 +385,35 @@ pdfMake.tableLayouts = {
380385
}
381386
};
382387

388+
function getCellWidths(columns, picsee = false) {
389+
const GRID_WIDTH = picsee ? PICSEEPAL_GRID_WIDTH : PDF_GRID_WIDTH;
390+
const cellWidht = (GRID_WIDTH - PDF_BORDER_WIDTH * columns) / columns;
391+
const cellWidths = new Array(columns).fill(cellWidht);
392+
return cellWidths;
393+
}
394+
383395
async function generatePDFBoard(board, intl, breakPage = true, picsee = false) {
384-
const header = board.name || '';
396+
const header = {
397+
absolutePosition: { x: 0, y: 5 },
398+
text: board.name || '',
399+
alignment: 'center',
400+
fontSize: 8
401+
};
385402
const columns =
386403
board.isFixed && board.grid ? board.grid.columns : CBOARD_COLUMNS;
387404
const rows = board.isFixed && board.grid ? board.grid.rows : CBOARD_ROWS;
405+
const cellWidths = getCellWidths(columns, picsee);
406+
388407
const table = {
389408
table: {
390-
widths: '*',
409+
widths: cellWidths,
391410
body: [{}]
392411
},
393412
layout: 'pdfGridLayout'
394413
};
395414

396415
if (breakPage) {
397-
table.pageBreak = 'before';
416+
picsee ? (table.pageBreak = 'before') : (header.pageBreak = 'before');
398417
}
399418

400419
if (!board.tiles || !board.tiles.length) {
@@ -507,14 +526,26 @@ async function generateNonFixedBoard(
507526
// Wait for previous tile
508527
await prev;
509528
currentRow = i >= (currentRow + 1) * columns ? currentRow + 1 : currentRow;
529+
530+
// Add a page break when we reach the maximum number of rows on the
531+
// current page.
532+
let pageBreak = false;
533+
if (
534+
(currentRow + 1) % rows === 1 &&
535+
currentRow + 1 > rows &&
536+
currentRow !== 0
537+
) {
538+
pageBreak = true;
539+
}
540+
510541
return await addTileToGrid(
511542
tile,
512543
intl,
513544
grid,
514545
rows,
515546
columns,
516547
currentRow,
517-
false,
548+
pageBreak,
518549
picsee
519550
);
520551
}, Promise.resolve());
@@ -591,59 +622,16 @@ const addTileToGrid = async (
591622
border: PDF_GRID_BORDER[labelPosition].labelData
592623
};
593624

594-
if (picsee) {
595-
// This scales down images to fit inside PicseePal
596-
// dimensions depending on number of columns
597-
var colImgWidths = {
598-
1: 130,
599-
2: 130,
600-
3: 80,
601-
4: 84,
602-
5: 75,
603-
6: 60,
604-
7: 55,
605-
8: 55,
606-
9: 45,
607-
10: 45,
608-
11: 40,
609-
12: 37
610-
// max num of columns is 12
611-
};
612-
var rowImgWidths = {
613-
1: 130,
614-
2: 130,
615-
3: 86,
616-
4: 59,
617-
5: 45,
618-
6: 33,
619-
7: 32,
620-
8: 26,
621-
9: 21,
622-
10: 17,
623-
11: 14,
624-
12: 11
625-
// max num of rows is 12
626-
};
625+
const IMG_WIDTH = picsee ? PICSEEPAL_IMAGES_WIDTH : PDF_IMAGES_WIDTH;
627626

628-
imageData.width = Math.min(colImgWidths[columns], rowImgWidths[rows]);
627+
imageData.width = Math.min(IMG_WIDTH.column[columns], IMG_WIDTH.row[rows]);
629628

630-
if (imageData.width <= 37) {
631-
labelData.fontSize = 7;
632-
} else if (imageData.width <= 40) {
633-
labelData.fontSize = 8;
634-
} else if (imageData.width <= 45) {
635-
labelData.fontSize = 9;
636-
}
637-
} else {
638-
// if not picseepal PDF, then retain old method for computing image widths
639-
if (11 === columns || columns === 12 || rows >= 6) {
640-
imageData.width = '59';
641-
labelData.fontSize = 9;
642-
} else if (9 === columns || columns === 10 || rows === 5) {
643-
imageData.width = '70';
644-
} else if (7 === columns || columns === 8) {
645-
imageData.width = '90';
646-
}
629+
if (imageData.width <= 37) {
630+
labelData.fontSize = 7;
631+
} else if (imageData.width <= 40) {
632+
labelData.fontSize = 8;
633+
} else if (imageData.width <= 45) {
634+
labelData.fontSize = 9;
647635
}
648636

649637
let value1,
@@ -908,16 +896,17 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) {
908896
return {
909897
stack: [
910898
{
899+
absolutePosition: { x: 0, y: 3 },
911900
text: [
912901
{
913902
text: '\nPicseePal compatible PDF',
914903
fontSize: 18,
915-
alignment: 'center',
916-
bold: true
904+
alignment: 'center'
917905
}
918906
]
919907
},
920908
{
909+
absolutePosition: { x: 0, y: 48 },
921910
canvas: [
922911
{
923912
// rectangle showing PicseePal viewable area
@@ -943,6 +932,10 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) {
943932
]
944933
},
945934
{
935+
absolutePosition: {
936+
x: 0,
937+
y: 500
938+
},
946939
text: [
947940
{
948941
text: `\nPlease print on A4 / US Letter paper at 100% scale.
@@ -956,13 +949,12 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) {
956949
};
957950
};
958951

959-
docDefinition.pageMargins = [144, 93, 144, 130];
952+
docDefinition.pageMargins = [144, 100, 144, 120];
960953
}
961954

962-
const lastBoardIndex = boards.length - 1;
963955
const content = await boards.reduce(async (prev, board, i) => {
964956
const prevContent = await prev;
965-
const breakPage = i !== lastBoardIndex;
957+
const breakPage = i !== 0;
966958
const boardPDFData = await generatePDFBoard(board, intl, breakPage, picsee);
967959
return prevContent.concat(boardPDFData);
968960
}, Promise.resolve([]));
@@ -973,7 +965,7 @@ export async function pdfExportAdapter(boards = [], intl, picsee = false) {
973965
if (pdfObj) {
974966
let prefix = getDatetimePrefix();
975967
if (content.length === 2) {
976-
prefix = prefix + content[0] + ' ';
968+
prefix = prefix + content[0].text + ' ';
977969
} else {
978970
prefix = prefix + 'boardsset ';
979971
}

0 commit comments

Comments
 (0)