Feature: Auto Design Grid & Footer

[suchislife801]

I wanted to propose an optional property called grid placed outside content which when set to true, displays a grid spaced 9pt vertically and horizontally which proved to be incredibly helpful to me over the years where trying to place and align items in PDF documents.

Currently, this example uses background: drawPageGrid(), in order to show the grid on every page.

Proposed feature would use: grid: true,

Playground Example:

// playground requires you to assign document definition to a variable called dd

// Manual Input
const PAGE_SIZE = "LETTER";
const PAGE_ORIENTATION = "portrait";
const PAGE_MARGINS = [36, 36, 36, 36];

// Page sizes in points (1 point = 1/72 inch)
const PAGE_SIZES = {
  'A0': [2383.94, 3370.39],
  'A1': [1683.78, 2383.94],
  'A2': [1190.55, 1683.78],
  'A3': [841.89, 1190.55],
  'A4': [595.28, 841.89],
  'A5': [419.53, 595.28],
  'A6': [297.64, 419.53],
  'A7': [209.76, 297.64],
  'A8': [147.40, 209.76],
  'A9': [104.88, 147.40],
  'A10': [73.70, 104.88],
  'EXECUTIVE': [521.86, 756.00],
  'FOLIO': [612.00, 936.00],
  'LEGAL': [612.00, 1008.00],
  'LETTER': [612.00, 792.00],
  'TABLOID': [792.00, 1224.00]
};

function drawPageGrid(space = 9, color = '#1565C0') {
  const size = PAGE_SIZES[PAGE_SIZE.toUpperCase()];
  if (!size) return false;
  
  const dimensions = PAGE_ORIENTATION === 'landscape' ? [size[1], size[0]] : size;
  const width = dimensions[0] - (PAGE_MARGINS[0] + PAGE_MARGINS[2]);
  const height = dimensions[1] - (PAGE_MARGINS[1] + PAGE_MARGINS[3]);
  // const color = '#1565C0'; // Material Design blue-800
  
  return {
    // Material Design blue-800
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
    <defs>
    <pattern id="grid" width="${space}" height="${space}" patternUnits="userSpaceOnUse">
    <path d="M ${space} 0 L 0 0 0 ${space}" fill="none" stroke="${color}" stroke-width="0.5" stroke-opacity="0.5" />
    </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" stroke="${color}" stroke-width="0.5" stroke-opacity="1" />
    </svg>`,
    margin: PAGE_MARGINS,
  }
}

function drawPageBorder() {
  const size = PAGE_SIZES[PAGE_SIZE.toUpperCase()];
  if (!size) return false;
  
  const dimensions = PAGE_ORIENTATION === 'landscape' ? [size[1], size[0]] : size;
  const w = dimensions[0] - (PAGE_MARGINS[0] + PAGE_MARGINS[2]);
  const h = dimensions[1] - (PAGE_MARGINS[1] + PAGE_MARGINS[3]);
  
  return {
    // Material Design blue-800
    svg: `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">
    <rect width="${w}" height="${h}" fill="none" stroke="#1565C0" stroke-width="0.5" stroke-opacity="1" />
    </svg>`,
    margin: PAGE_MARGINS,
  }
}

// Doc Definition
var dd = {

  pageSize: PAGE_SIZE,
  pageOrientation: PAGE_ORIENTATION,
  pageMargins: PAGE_MARGINS,
  
  watermark: {
    text: "WATERMARK",
    fontSize: 54, // in pt
    bold: true,
    color: "#1565C0", // Material Design blue-800
    opacity: 0.075,
  },
  
  background: drawPageGrid(),
  
  content: [
    `pageSize: ${PAGE_SIZE}`,
    `pageOrientation: ${PAGE_ORIENTATION}`,
    `pageMargins: ${PAGE_MARGINS}`,
  ],
  
  
  footer: function(currentPage, pageCount) {
    return {
      columns: [
        // Text
        {
          text: "Footer Left",
          // left, top, right, bottom
          margin: [PAGE_MARGINS[0], 0, 0, 0],
          fontSize: 7.5,
          bold: true,
          alignment: "left",
          width: "*",
        },
        // Text
        {
          text: "Footer Center",
          // left, top, right, bottom
          margin: [0, 0, 0, 0],
          fontSize: 7.5,
          bold: true,
          alignment: "center",
          width: "*",
        },
        // Text
        {
          text: "PAGE " + currentPage.toString() + " of " + pageCount.toString(),
          // left, top, right, bottom
          margin: [0, 0, PAGE_MARGINS[2], 0],
          fontSize: 7.5,
          bold: true,
          alignment: "right",
          width: "*",
        }
      ],
      
    }
  },
};