@7365admin1/layer-common 4.96.0 → 4.97.1-staging.500

package/utils/vehicle-qr-sticker.ts

@@ -8,16 +8,97 @@
  * pasted on the car.
  */
 
-import { DEFAULT_STICKER_DESIGN, QR_MM, qrTop, stickerLabel, stickerTheme, type StickerDesign } from "./vehicle-qr-design.ts";
+import {
+  DEFAULT_STICKER_DESIGN,
+  QR_MM,
+  cardSize,
+  isSilhouette,
+  qrTop,
+  silhouetteLayout,
+  stickerLabel,
+  stickerTheme,
+  type FrameShape,
+  type StickerDesign,
+} from "./vehicle-qr-design.ts";
 
 /** The server's most vehicles per request (POST /api/vehicles/qr/stickers). */
 export const STICKER_MAX_PER_REQUEST = 500;
 
-/** A4 sheet: 4 columns x 4 rows of 47 mm cells. */
+/** A4 sheet with the classic cards: 4 columns x 4 rows of 47 mm cells. */
 export const STICKER_COLUMNS = 4;
 export const STICKER_ROWS = 4;
 export const STICKERS_PER_PAGE = STICKER_COLUMNS * STICKER_ROWS;
 
+/** Printer margin on every side of the A4 sheet, mm. */
+export const SHEET_MARGIN = 5;
+const PAGE_W = 210 - SHEET_MARGIN * 2;
+const PAGE_H = 297 - SHEET_MARGIN * 2;
+
+/**
+ * How stickers sit on the A4 sheet. A cell = the sticker + the installer strip
+ * under it; `gap` is the empty cutting gap between cells (no ink in it except
+ * the small + cut marks in its middle).
+ */
+export type SheetLayout = { cols: number; rows: number; cellW: number; cardH: number; stripH: number; gap: number };
+
+export function sheetLayout(frame: FrameShape): SheetLayout {
+  // Cut-out shapes are 62 mm wide: 3 across. Cards stay 4 x 4 = 16.
+  return isSilhouette(frame)
+    ? { cols: 3, rows: 4, cellW: cardSize(frame).w, cardH: cardSize(frame).h, stripH: 10, gap: 4 }
+    : { cols: STICKER_COLUMNS, rows: STICKER_ROWS, cellW: cardSize(frame).w, cardH: cardSize(frame).h, stripH: 11, gap: 3 };
+}
+
+export const perSheet = (l: SheetLayout) => l.cols * l.rows;
+
+/** "12 stickers per A4 sheet with 4 mm cutting gaps" */
+export function sheetSummary(frame: FrameShape): string {
+  const l = sheetLayout(frame);
+  return `${perSheet(l)} stickers per A4 sheet with ${l.gap} mm cutting gaps`;
+}
+
+/** Top-left of the sticker grid inside the printable area, so it sits in the middle of the sheet. */
+function gridOrigin(l: SheetLayout): { x: number; y: number; w: number; h: number } {
+  const w = l.cols * l.cellW + (l.cols - 1) * l.gap;
+  const h = l.rows * (l.cardH + l.stripH) + (l.rows - 1) * l.gap;
+  return { x: (PAGE_W - w) / 2, y: (PAGE_H - h) / 2, w, h };
+}
+
+/**
+ * Cut marks for one sheet, as SVG over the printable area: a small + in the
+ * middle of every cutting gap crossing, and short ticks just outside the grid
+ * where each gap meets its edge - line a ruler up on them to cut the sheet
+ * into pieces.
+ */
+export function cropMarksSvg(l: SheetLayout): string {
+  const g = gridOrigin(l);
+  const cellH = l.cardH + l.stripH;
+  const xs = Array.from({ length: l.cols - 1 }, (_, i) => g.x + (i + 1) * l.cellW + i * l.gap + l.gap / 2);
+  const ys = Array.from({ length: l.rows - 1 }, (_, i) => g.y + (i + 1) * cellH + i * l.gap + l.gap / 2);
+  const r = (v: number) => Math.round(v * 100) / 100;
+  const arm = Math.min(1.2, l.gap / 2 - 0.3);
+  const tickX = Math.max(0.6, g.y - 0.4);
+  const tickY = Math.max(0.6, g.x - 0.4);
+  const lines: string[] = [];
+  const line = (x1: number, y1: number, x2: number, y2: number) =>
+    lines.push(`<line x1="${r(x1)}" y1="${r(y1)}" x2="${r(x2)}" y2="${r(y2)}"/>`);
+  for (const x of xs) {
+    line(x, g.y - tickX, x, g.y - 0.2);
+    line(x, g.y + g.h + 0.2, x, g.y + g.h + tickX);
+    for (const y of ys) {
+      line(x - arm, y, x + arm, y);
+      line(x, y - arm, x, y + arm);
+    }
+  }
+  for (const y of ys) {
+    line(g.x - tickY, y, g.x - 0.2, y);
+    line(g.x + g.w + 0.2, y, g.x + g.w + tickY, y);
+  }
+  return (
+    `<svg class="marks" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${PAGE_W} ${PAGE_H}" width="${PAGE_W}mm" height="${PAGE_H}mm">` +
+    `<g stroke="#555" stroke-width="0.15">${lines.join("")}</g></svg>`
+  );
+}
+
 export type StickerItem = {
   vehicleId: string;
   qr: string;
@@ -141,25 +222,38 @@ export function escapeHtml(value: unknown): string {
     .replace(/'/g, "&#39;");
 }
 
-const PRINT_CSS = `
-@page { size: A4; margin: 6mm; }
+// Printed at 100% ("Actual size"): every size below is real millimetres on paper.
+function printCss(l: SheetLayout): string {
+  const g = gridOrigin(l);
+  return `
+@page { size: A4; margin: ${SHEET_MARGIN}mm; }
 * { box-sizing: border-box; }
 html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family: Arial, Helvetica, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
-.page { display: grid; grid-template-columns: repeat(${STICKER_COLUMNS}, 47mm); gap: 2mm; justify-content: center; align-content: start; width: 198mm; height: 285mm; margin: 0 auto; break-after: page; }
+.page { position: relative; display: grid; grid-template-columns: repeat(${l.cols}, ${l.cellW}mm); grid-auto-rows: ${l.cardH + l.stripH}mm; gap: ${l.gap}mm; justify-content: start; align-content: start; padding: ${g.y}mm 0 0 ${g.x}mm; width: ${PAGE_W}mm; height: ${PAGE_H}mm; margin: 0 auto; overflow: hidden; break-after: page; }
 .page:last-child { break-after: auto; }
-.cell { width: 47mm; break-inside: avoid; }
-.card { position: relative; width: 47mm; height: 58mm; }
-.face, .face svg { position: absolute; inset: 0; width: 47mm; height: 58mm; display: block; }
+.marks { position: absolute; left: 0; top: 0; width: ${PAGE_W}mm; height: ${PAGE_H}mm; pointer-events: none; }
+.cell { width: ${l.cellW}mm; break-inside: avoid; }
+.card { position: relative; width: ${l.cellW}mm; height: ${l.cardH}mm; }
+.face, .face svg { position: absolute; inset: 0; width: ${l.cellW}mm; height: ${l.cardH}mm; display: block; overflow: visible; }
 .words { position: absolute; left: 3mm; right: 3mm; bottom: 2mm; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
-.plate { font-size: 13pt; font-weight: 800; letter-spacing: 0.3mm; line-height: 1.1; }
+.words.band { bottom: auto; justify-content: center; gap: 0.6mm; }
+.plate { font-size: 13pt; font-weight: 800; letter-spacing: 0.3mm; line-height: 1.1; white-space: nowrap; }
 .hint { font-size: 5.8pt; line-height: 1.2; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
 .brand { display: flex; align-items: center; justify-content: center; gap: 1mm; font-size: 6pt; border-top: 0.2mm solid #ccc; width: 100%; padding-top: 1mm; }
 .mark { width: 3.2mm; height: 3.2mm; border-radius: 0.8mm; color: #fff; font-weight: 800; font-size: 5pt; line-height: 3.2mm; text-align: center; }
-.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 1mm; font-size: 6.5pt; line-height: 1.25; color: #111; min-height: 8mm; }
+.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 1mm; font-size: 6.5pt; line-height: 1.25; color: #111; height: ${l.stripH - 1.2}mm; overflow: hidden; }
+.cut.free { margin-top: 1.6mm; border-top: 0; padding-top: 0; height: ${l.stripH - 1.6}mm; }
 .cut .owner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cut .note { color: #666; font-size: 5.5pt; }
-@media screen { body { background: #e9e9e9; zoom: 0.75; padding: 4mm 0; } .page { background: #fff; margin-bottom: 4mm; height: auto; min-height: 285mm; box-shadow: 0 0 2mm rgba(0,0,0,.25); } }
+@media screen { body { background: #e9e9e9; zoom: 0.75; padding: 4mm 0; } .page { background: #fff; margin-bottom: 4mm; box-shadow: 0 0 2mm rgba(0,0,0,.25); } }
 `;
+}
+
+/** Plate font size (mm) that fits the cut-out shape's plate box. */
+function plateSizeMm(plate: string, boxW: number): number {
+  // bold capitals are about 0.74 em wide, plus 0.3 mm letter spacing each
+  return Math.round(Math.min(4.6, (boxW / Math.max(plate.length, 1) - 0.3) / 0.74) * 100) / 100;
+}
 
 /**
  * One full HTML document: A4 sheets of stickers. `faceSvgs` is parallel to
@@ -174,22 +268,34 @@ export function buildStickerDocument(
   const design = opts.design ?? DEFAULT_STICKER_DESIGN;
   const { ink } = stickerTheme(design.theme);
   const label = stickerLabel(design, opts.siteName);
+  const layout = sheetLayout(design.frame);
+  const shape = isSilhouette(design.frame) ? silhouetteLayout(design.frame) : null;
   const wordsTop = qrTop(design.frame) + QR_MM + 0.8;
   const cells = items.map((item, i) => {
     const { place, owner } = installerLine(item);
+    const plate = escapeHtml(item.plateNumber);
+    // Cut-out shapes: plate (and words) in the box under the QR; no brand line - there is no room.
+    const words = shape
+      ? `<div class="words band" style="left:${shape.band.x}mm;right:auto;top:${shape.band.y}mm;width:${shape.band.w}mm;height:${shape.band.h}mm">` +
+        `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), shape.band.w)}mm">${plate}</div>` +
+        (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
+        `</div>`
+      : `<div class="words" style="top:${wordsTop}mm">` +
+        `<div class="plate">${plate}</div>` +
+        (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
+        `<div class="brand"><span class="mark" style="background:${ink}">7</span>Powered by Seven365</div>` +
+        `</div>`;
     return (
       `<div class="cell"><div class="card" style="color:${ink}">` +
       `<div class="face">${faceSvgs[i] ?? ""}</div>` +
-      `<div class="words" style="top:${wordsTop}mm">` +
-      `<div class="plate">${escapeHtml(item.plateNumber)}</div>` +
-      (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
-      `<div class="brand"><span class="mark" style="background:${ink}">7</span>Powered by Seven365</div>` +
-      `</div></div>` +
-      `<div class="cut"><div><b>${escapeHtml(place || "-")}</b></div>` +
+      words +
+      `</div>` +
+      `<div class="cut${shape ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
       `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div>` +
-      `<div class="note">Installer: cut here, then paste on this car</div></div></div>`
+      `<div class="note">${shape ? "Installer: cut out the sticker, then paste on this car" : "Installer: cut here, then paste on this car"}</div></div></div>`
     );
   });
-  const pages = stickerPages(cells).map((p) => `<div class="page">${p.join("")}</div>`);
-  return `<!doctype html><html><head><meta charset="utf-8"><title>Vehicle QR stickers</title><style>${PRINT_CSS}</style></head><body>${pages.join("")}</body></html>`;
+  const marks = cropMarksSvg(layout);
+  const pages = stickerPages(cells, perSheet(layout)).map((p) => `<div class="page">${marks}${p.join("")}</div>`);
+  return `<!doctype html><html><head><meta charset="utf-8"><title>Vehicle QR stickers</title><style>${printCss(layout)}</style></head><body>${pages.join("")}</body></html>`;
 }