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

package/utils/vehicle-qr-sticker.ts

@@ -9,58 +9,118 @@
  */
 
 import {
+  CUT_LINE_GAP,
   DEFAULT_STICKER_DESIGN,
   QR_MM,
-  cardSize,
   isSilhouette,
-  qrTop,
-  silhouetteLayout,
+  stickerGeometry,
   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 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;
+/** Modules across the sticker QR: "S365V:" + a 22-character token at ECC Q is always version 3. */
+export const STICKER_QR_MODULES = 29;
+
+/** The classic card sheet at Standard size: 4 columns x 4 rows. */
+export const STICKERS_PER_PAGE = 16;
 
 /** 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;
+/** Strip at the foot of every sheet: the sizes, the print-at-100% reminder and the 10 mm size check. */
+export const INFO_H = 11;
+/** The size-check bar printed on every sheet, mm. */
+export const SIZE_CHECK_MM = 10;
 
 /**
  * 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).
+ * the small + cut marks in its middle). As many as fit above the info strip.
  */
 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 };
+const mm = (v: number) => Math.round(v * 100) / 100;
+
+export function sheetLayout(design: StickerDesign): SheetLayout {
+  const g = stickerGeometry(design, STICKER_QR_MODULES);
+  const cellW = mm(g.w * g.scale);
+  const cardH = mm(g.h * g.scale);
+  const stripH = 8;
+  const gap = isSilhouette(design.shape) ? 4 : 3;
+  return {
+    cols: Math.max(1, Math.floor((PAGE_W + gap) / (cellW + gap))),
+    rows: Math.max(1, Math.floor((PAGE_H - INFO_H + gap) / (cardH + stripH + gap))),
+    cellW,
+    cardH,
+    stripH,
+    gap,
+  };
 }
 
 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);
+export function sheetSummary(design: StickerDesign): string {
+  const l = sheetLayout(design);
   return `${perSheet(l)} stickers per A4 sheet with ${l.gap} mm cutting gaps`;
 }
 
+export type StickerSizeInfo = {
+  /** The QR code's data area (what a scanner reads), mm square. */
+  qrMm: number;
+  /** The shape (shaped code) or the card, mm. */
+  shapeW: number;
+  shapeH: number;
+  /** The piece in your hand after cutting (on the grey line when it is shown), mm. */
+  stickerW: number;
+  stickerH: number;
+  perSheet: number;
+  gap: number;
+};
+
+/** Every size the person printing needs to know, before printing. */
+export function stickerSizeInfo(design: StickerDesign, n = STICKER_QR_MODULES): StickerSizeInfo {
+  const g = stickerGeometry(design, n);
+  const l = sheetLayout(design);
+  const cut = design.cutLines !== false ? 2 * CUT_LINE_GAP : 0;
+  const bare = isSilhouette(design.shape) && design.frame === "none";
+  return {
+    qrMm: mm(g.dataMm),
+    shapeW: mm(g.shapeW),
+    shapeH: mm(g.shapeH),
+    // a bare shape is cut round the shape and its plate tag; anything else round the card
+    stickerW: mm((bare ? g.shapeW : g.w * g.scale) + cut),
+    stickerH: mm(g.h * g.scale + cut),
+    perSheet: perSheet(l),
+    gap: l.gap,
+  };
+}
+
+const n1 = (v: number) => String(Math.round(v * 10) / 10);
+
+/** The same size lines in the print preview and at the foot of every sheet. */
+export function stickerSizeLines(design: StickerDesign, n = STICKER_QR_MODULES): string[] {
+  const i = stickerSizeInfo(design, n);
+  const shaped = isSilhouette(design.shape);
+  return [
+    `QR code: ${n1(i.qrMm)} x ${n1(i.qrMm)} mm`,
+    shaped ? `Shape: ${n1(i.shapeW)} x ${n1(i.shapeH)} mm` : `Card: ${n1(i.shapeW)} x ${n1(i.shapeH)} mm`,
+    `Sticker after cutting: ${n1(i.stickerW)} x ${n1(i.stickerH)} mm`,
+    `${i.perSheet} per A4 sheet, ${i.gap} mm gaps`,
+    `Print at 100% ("Actual size") - do not use "Fit to page"`,
+  ];
+}
+
 /** 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 };
+  return { x: mm((PAGE_W - w) / 2), y: mm((PAGE_H - INFO_H - h) / 2), w, h };
 }
 
 /**
@@ -241,18 +301,39 @@ html, body { margin: 0; padding: 0; background: #fff; color: #111; font-family:
 .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; height: ${l.stripH - 1.2}mm; overflow: hidden; }
+.cut { margin-top: 1.2mm; border-top: 0.3mm dashed #666; padding-top: 0.8mm; font-size: 6.5pt; line-height: 1.2; 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; }
+.info { position: absolute; left: 0; right: 0; bottom: 0; height: ${INFO_H}mm; border-top: 0.2mm solid #bbb; padding-top: 1mm; font-size: 6.5pt; line-height: 1.3; color: #333; display: flex; gap: 3mm; align-items: flex-start; }
+.info .sizes { flex: 1; }
+.info b { color: #000; }
+.info .check { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; }
+.info svg { display: block; margin-top: 0.6mm; }
 @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); } }
 `;
 }
 
+/**
+ * The foot of every sheet: the sizes, the print-at-100% reminder and a black
+ * bar that must measure exactly 10 mm - if it does not, the printer scaled the page.
+ */
+function sheetInfoHtml(design: StickerDesign, n: number): string {
+  const lines = stickerSizeLines(design, n);
+  const bar = SIZE_CHECK_MM;
+  const ticks = Array.from({ length: bar + 1 }, (_, i) => `<line x1="${i}" y1="${i % 5 ? 1.2 : 0}" x2="${i}" y2="2.4"/>`).join("");
+  return (
+    `<div class="info"><div class="sizes"><b>Sizes:</b> ${lines.slice(0, 4).map(escapeHtml).join(" &middot; ")}` +
+    `<br><b>${escapeHtml(lines[4])}.</b> Installer: cut out each sticker; the strip under it says which car.</div>` +
+    `<div class="check"><b>Size check: this bar must measure ${bar} mm</b>` +
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.2 0 ${bar + 0.4} 3.4" width="${bar + 0.4}mm" height="3.4mm">` +
+    `<rect x="0" y="2.4" width="${bar}" height="1" fill="#000"/><g stroke="#000" stroke-width="0.15">${ticks}</g></svg></div></div>`
+  );
+}
+
 /** Plate font size (mm) that fits the cut-out shape's plate box. */
-function plateSizeMm(plate: string, boxW: number): number {
+function plateSizeMm(plate: string, boxW: number, max = 4.6): 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;
+  return Math.round(Math.min(max, (boxW / Math.max(plate.length, 1) - 0.3) / 0.74) * 100) / 100;
 }
 
 /**
@@ -263,21 +344,25 @@ function plateSizeMm(plate: string, boxW: number): number {
 export function buildStickerDocument(
   items: StickerItem[],
   faceSvgs: string[],
-  opts: { design?: StickerDesign; siteName?: string } = {},
+  opts: { design?: StickerDesign; siteName?: string; modules?: number } = {},
 ): string {
   const design = opts.design ?? DEFAULT_STICKER_DESIGN;
-  const { ink } = stickerTheme(design.theme);
+  const n = opts.modules ?? STICKER_QR_MODULES;
+  const { ink, paper } = 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 layout = sheetLayout(design);
+  const g = stickerGeometry(design, n);
+  const k = g.scale;
+  // Shaped codes: plate (and words) in paper colour on the ink tag at the bottom.
+  const tag = g.band ? { x: mm(g.band.x * k), y: mm(g.band.y * k), w: mm(g.band.w * k), h: mm(g.band.h * k) } : null;
+  const bare = !!tag && design.frame === "none";
+  const wordsTop = mm(((g.qrTop ?? 0) + QR_MM + 0.8) * k);
   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>` +
+    const words = tag
+      ? `<div class="words band" style="left:${tag.x}mm;right:auto;top:${tag.y}mm;width:${tag.w}mm;height:${tag.h}mm;color:${paper}">` +
+        `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), tag.w, 4.6 * k)}mm">${plate}</div>` +
         (label ? `<div class="hint">${escapeHtml(label)}</div>` : "") +
         `</div>`
       : `<div class="words" style="top:${wordsTop}mm">` +
@@ -290,12 +375,12 @@ export function buildStickerDocument(
       `<div class="face">${faceSvgs[i] ?? ""}</div>` +
       words +
       `</div>` +
-      `<div class="cut${shape ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
-      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</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>`
+      `<div class="cut${bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
+      `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div></div>`
     );
   });
   const marks = cropMarksSvg(layout);
-  const pages = stickerPages(cells, perSheet(layout)).map((p) => `<div class="page">${marks}${p.join("")}</div>`);
+  const info = sheetInfoHtml(design, n);
+  const pages = stickerPages(cells, perSheet(layout)).map((p) => `<div class="page">${marks}${p.join("")}${info}</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>`;
 }