Seeing a template

import { createServer } from "node:http";

const API = "https://app.vumasign.com/api/v1";
const auth = { Authorization: `Bearer ${process.env.VUMASIGN_KEY}` };

// GET /template/{templateId}            -> the template, as JSON
// GET /page/{documentId}/{pageNumber}   -> one page, as PDF
createServer(async (req, res) => {
  // Put your own sign-in check here: these are your organisation's documents.
  const [, kind, id, page] = req.url.split("/");
  const upstream =
    kind === "template" ? `${API}/templates/${id}`
    : kind === "page" ? `${API}/documents/${id}/pages/${page}`
    : null;
  if (!upstream) return res.writeHead(404).end();
  const answer = await fetch(upstream, { headers: auth });
  res.writeHead(answer.status, {
    "content-type": answer.headers.get("content-type") ?? "application/octet-stream",
    "cache-control": "private, no-store",
  });
  res.end(Buffer.from(await answer.arrayBuffer()));
}).listen(3000);

import * as pdfjs from "pdfjs-dist";

pdfjs.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).href;

export async function drawFields(templateId, documentId, pageNumber, container) {
  const template = await (await fetch(`/template/${templateId}`)).json();
  const response = await fetch(`/page/${documentId}/${pageNumber}`);
  if (!response.ok) throw new Error((await response.json()).error.message);
  const pdf = await pdfjs.getDocument({ data: await response.arrayBuffer() }).promise;
  const page = await pdf.getPage(1); // the response holds one page

  const viewport = page.getViewport({ scale: 1.5 });
  const canvas = document.createElement("canvas");
  canvas.width = viewport.width;
  canvas.height = viewport.height;
  await page.render({ canvasContext: canvas.getContext("2d"), viewport }).promise;

  // Check the render against the size the API measured the rects against.
  const size = template.pages.find((p) => p.document_id === documentId && p.page === pageNumber);
  const ratio = (viewport.width / viewport.height) / (size.width / size.height);
  if (Math.abs(ratio - 1) > 0.01) throw new Error("the renderer did not honour the page rotation");

  const context = canvas.getContext("2d");
  context.strokeStyle = "#d00";
  context.fillStyle = "#d00";
  context.font = "12px sans-serif";
  for (const field of template.fields) {
    if (field.document_id !== documentId || field.page !== pageNumber) continue;
    const x = field.rect.x * viewport.width;
    const y = field.rect.y * viewport.height;
    const w = field.rect.w * viewport.width;
    const h = field.rect.h * viewport.height;
    context.strokeRect(x, y, w, h);
    context.fillText(field.data_key ?? field.label ?? field.type, x, y - 2);
  }

  container.append(canvas);
}