Rework generation page and settings
This commit is contained in:
Roman Krček
@@ -1,157 +1,97 @@
|
||||
// PDF Layout Configuration Module
|
||||
// Centralized configuration for PDF generation layouts
|
||||
// Centralized configuration for PDF generation layouts, using millimeters.
|
||||
|
||||
export interface PDFDimensions {
|
||||
pageWidth: number;
|
||||
pageHeight: number;
|
||||
margin: number;
|
||||
}
|
||||
import {
|
||||
PHOTO_DIMENSIONS,
|
||||
TEXT_FIELD_LAYOUT,
|
||||
PHOTO_FIELD_LAYOUT
|
||||
} from './pdfSettings';
|
||||
|
||||
// Conversion factor from millimeters to points (1 inch = 72 points, 1 inch = 25.4 mm)
|
||||
export const MM_TO_PT = 72 / 25.4;
|
||||
|
||||
export interface GridLayout {
|
||||
cols: number;
|
||||
rows: number;
|
||||
cellWidth: number;
|
||||
cellHeight: number;
|
||||
cols: number;
|
||||
rows: number;
|
||||
cellWidth: number; // mm
|
||||
cellHeight: number; // mm
|
||||
}
|
||||
|
||||
export interface TextPosition {
|
||||
x: number;
|
||||
y: number;
|
||||
size: number;
|
||||
}
|
||||
|
||||
export interface PhotoPosition {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
export interface TextFieldLayout {
|
||||
name: TextPosition;
|
||||
nationality: TextPosition;
|
||||
birthday: TextPosition;
|
||||
}
|
||||
|
||||
export interface PhotoFieldLayout {
|
||||
photo: PhotoPosition;
|
||||
name: TextPosition;
|
||||
}
|
||||
|
||||
// A4 dimensions in points
|
||||
export const PDF_DIMENSIONS: PDFDimensions = {
|
||||
pageWidth: 595.28,
|
||||
pageHeight: 841.89,
|
||||
margin: 40
|
||||
};
|
||||
|
||||
// Text PDF Layout (3x7 grid)
|
||||
export const TEXT_PDF_GRID = {
|
||||
cols: 3,
|
||||
rows: 7
|
||||
};
|
||||
|
||||
// Photo PDF Layout (3x5 grid)
|
||||
export const PHOTO_PDF_GRID = {
|
||||
cols: 3,
|
||||
rows: 5
|
||||
};
|
||||
|
||||
// Calculate grid layout
|
||||
export function calculateGridLayout(
|
||||
dimensions: PDFDimensions,
|
||||
grid: { cols: number; rows: number }
|
||||
// Calculate how many cards can fit on a page.
|
||||
export function calculateGrid(
|
||||
pageWidth: number,
|
||||
pageHeight: number,
|
||||
margin: number,
|
||||
cardWidth: number,
|
||||
cardHeight: number
|
||||
): GridLayout {
|
||||
const cellWidth = (dimensions.pageWidth - 2 * dimensions.margin) / grid.cols;
|
||||
const cellHeight = (dimensions.pageHeight - 2 * dimensions.margin) / grid.rows;
|
||||
|
||||
return {
|
||||
cols: grid.cols,
|
||||
rows: grid.rows,
|
||||
cellWidth,
|
||||
cellHeight
|
||||
};
|
||||
const printableWidth = pageWidth - 2 * margin;
|
||||
const printableHeight = pageHeight - 2 * margin;
|
||||
|
||||
const cols = Math.floor(printableWidth / cardWidth);
|
||||
const rows = Math.floor(printableHeight / cardHeight);
|
||||
|
||||
return {
|
||||
cols,
|
||||
rows,
|
||||
cellWidth: cardWidth,
|
||||
cellHeight: cardHeight
|
||||
};
|
||||
}
|
||||
|
||||
// Text PDF Field Positions (relative to cell)
|
||||
export const TEXT_FIELD_LAYOUT: TextFieldLayout = {
|
||||
name: {
|
||||
x: 5, // 5pt from left edge of cell
|
||||
y: -15, // 15pt from top of cell (negative because PDF coords are bottom-up)
|
||||
size: 10
|
||||
},
|
||||
nationality: {
|
||||
x: 5, // 5pt from left edge of cell
|
||||
y: -29, // 29pt from top of cell (15 + 14 line height)
|
||||
size: 10
|
||||
},
|
||||
birthday: {
|
||||
x: 5, // 5pt from left edge of cell
|
||||
y: -43, // 43pt from top of cell (15 + 14 + 14 line height)
|
||||
size: 10
|
||||
}
|
||||
};
|
||||
|
||||
// Photo PDF Field Positions (relative to cell)
|
||||
export const PHOTO_FIELD_LAYOUT: PhotoFieldLayout = {
|
||||
photo: {
|
||||
x: 10, // 10pt from left edge of cell
|
||||
y: 40, // 40pt from bottom of cell
|
||||
width: -20, // cell width minus 20pt (10pt margin on each side)
|
||||
height: -60 // cell height minus 60pt (40pt bottom margin + 20pt top margin)
|
||||
},
|
||||
name: {
|
||||
x: 10, // 10pt from left edge of cell
|
||||
y: 20, // 20pt from bottom of cell
|
||||
size: 10
|
||||
}
|
||||
};
|
||||
|
||||
// Helper function to get absolute position within a cell
|
||||
export function getAbsolutePosition(
|
||||
cellX: number,
|
||||
cellY: number,
|
||||
cellHeight: number,
|
||||
relativePos: TextPosition
|
||||
// Helper function to get absolute position in points for pdf-lib
|
||||
export function getAbsolutePositionPt(
|
||||
cellX_mm: number,
|
||||
cellY_mm: number,
|
||||
pageHeight_mm: number,
|
||||
relativePos_mm: any
|
||||
): { x: number; y: number; size: number } {
|
||||
return {
|
||||
x: cellX + relativePos.x,
|
||||
y: cellY + cellHeight + relativePos.y, // Convert relative Y to absolute
|
||||
size: relativePos.size
|
||||
};
|
||||
const absoluteX_mm = cellX_mm + relativePos_mm.x;
|
||||
// pdf-lib Y-coordinate is from bottom, so we invert
|
||||
const absoluteY_mm = pageHeight_mm - (cellY_mm + relativePos_mm.y);
|
||||
|
||||
return {
|
||||
x: absoluteX_mm * MM_TO_PT,
|
||||
y: absoluteY_mm * MM_TO_PT,
|
||||
size: relativePos_mm.size // size is already in points
|
||||
};
|
||||
}
|
||||
|
||||
// Helper function to get absolute photo dimensions
|
||||
export function getAbsolutePhotoDimensions(
|
||||
cellX: number,
|
||||
cellY: number,
|
||||
cellWidth: number,
|
||||
cellHeight: number,
|
||||
relativePhoto: PhotoPosition
|
||||
// Helper function to get absolute photo dimensions in points for pdf-lib
|
||||
export function getAbsolutePhotoDimensionsPt(
|
||||
cellX_mm: number,
|
||||
cellY_mm: number,
|
||||
pageHeight_mm: number,
|
||||
relativePhoto_mm: any
|
||||
): { x: number; y: number; width: number; height: number } {
|
||||
return {
|
||||
x: cellX + relativePhoto.x,
|
||||
y: cellY + relativePhoto.y,
|
||||
width: relativePhoto.width < 0 ? cellWidth + relativePhoto.width : relativePhoto.width,
|
||||
height: relativePhoto.height < 0 ? cellHeight + relativePhoto.height : relativePhoto.height
|
||||
};
|
||||
const absoluteX_mm = cellX_mm + relativePhoto_mm.x;
|
||||
// pdf-lib Y-coordinate is from bottom, so we invert and account for height
|
||||
const absoluteY_mm = pageHeight_mm - (cellY_mm + relativePhoto_mm.y + relativePhoto_mm.height);
|
||||
|
||||
return {
|
||||
x: absoluteX_mm * MM_TO_PT,
|
||||
y: absoluteY_mm * MM_TO_PT,
|
||||
width: relativePhoto_mm.width * MM_TO_PT,
|
||||
height: relativePhoto_mm.height * MM_TO_PT
|
||||
};
|
||||
}
|
||||
|
||||
// Border configuration
|
||||
export const BORDER_CONFIG = {
|
||||
color: { r: 0.8, g: 0.8, b: 0.8 },
|
||||
width: 1
|
||||
color: { r: 0.8, g: 0.8, b: 0.8 },
|
||||
width: 1 // in points
|
||||
};
|
||||
|
||||
// Text configuration
|
||||
export const TEXT_CONFIG = {
|
||||
color: { r: 0, g: 0, b: 0 },
|
||||
lineHeight: 14
|
||||
color: { r: 0, g: 0, b: 0 },
|
||||
lineHeight: 14 // in points
|
||||
};
|
||||
|
||||
// Placeholder text configuration
|
||||
export const PLACEHOLDER_CONFIG = {
|
||||
text: 'Photo placeholder',
|
||||
color: { r: 0.5, g: 0.5, b: 0.5 },
|
||||
size: 8
|
||||
text: 'Photo placeholder',
|
||||
color: { r: 0.5, g: 0.5, b: 0.5 },
|
||||
size: 8 // in points
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user