@7365admin1/layer-common 4.99.1 → 4.100.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @iservice365/layer-common
 
+## 4.100.0
+
+### Minor Changes
+
+- 106d207: Vehicle QR stickers: save as PNG (300/600 dpi, real size; several stickers in one ZIP) and save the print sheet as a file to print the same stickers again later.
+
 ## 4.99.1
 
 ### Patch Changes

package/components/VehicleQrStickerDialog.vue

@@ -142,11 +142,17 @@
             then cut round each sticker {{ design.cutLines ? "on the light-grey line" : "along its edge" }} - with scissors
             or a cutting machine. Cut off the strip with the unit and owner before pasting.
           </v-alert>
+          <v-alert type="info" variant="tonal" density="compact" class="mt-2" data-test="vehicle-qr-save-guide">
+            To print the same stickers again later: <b>Save sheet file</b> keeps this exact sheet on your computer - open
+            it any time and print (at 100%). <b>Save as PNG</b> gives one picture per sticker (300 or 600 dpi, real size),
+            e.g. for a print shop; several stickers come in one ZIP file. You can also come back to Vehicles any time and
+            print again - a vehicle keeps the same QR code until it is regenerated.
+          </v-alert>
           <iframe ref="frame" title="Sticker sheet preview" :srcdoc="docHtml" class="sticker-preview mt-3" />
         </template>
       </v-card-text>
 
-      <v-card-actions>
+      <v-card-actions class="flex-wrap ga-2">
         <v-btn v-if="step === 'review' && !fromReissue" variant="text" class="text-none" @click="step = 'select'">Back</v-btn>
         <v-spacer />
         <v-btn variant="text" class="text-none" @click="close(false)">Cancel</v-btn>
@@ -154,7 +160,25 @@
           :loading="loading" @click="goReview">
           Preview {{ selected.length }} sticker{{ selected.length === 1 ? "" : "s" }}
         </v-btn>
-        <v-btn v-else color="primary" variant="flat" class="text-none" prepend-icon="mdi-printer"
+        <template v-if="step === 'review'">
+          <v-btn variant="tonal" class="text-none" prepend-icon="mdi-content-save" :disabled="!ticked.length || !docHtml"
+            data-test="vehicle-qr-save-sheet" @click="saveSheet">
+            Save sheet file
+          </v-btn>
+          <v-menu location="top">
+            <template #activator="{ props: menu }">
+              <v-btn v-bind="menu" variant="tonal" class="text-none" prepend-icon="mdi-file-image"
+                :disabled="!ticked.length || !docHtml" :loading="savingPng" data-test="vehicle-qr-save-png">
+                Save as PNG
+              </v-btn>
+            </template>
+            <v-list density="compact">
+              <v-list-item v-for="d in [300, 600]" :key="d" :title="`${d} dpi${d === 600 ? ' (sharpest)' : ''}`"
+                :data-test="`vehicle-qr-png-${d}`" @click="savePng(d)" />
+            </v-list>
+          </v-menu>
+        </template>
+        <v-btn v-if="step === 'review'" color="primary" variant="flat" class="text-none" prepend-icon="mdi-printer"
           :disabled="!ticked.length || !docHtml" @click="print">
           Print {{ ticked.length }} sticker{{ ticked.length === 1 ? "" : "s" }}
         </v-btn>
@@ -167,6 +191,7 @@
 import QRCode from "qrcode";
 import useVehicle from "../composables/useVehicle";
 import { errorConverter } from "../utils/data";
+import { pngWithDpi, saveFile, stickerBundleName, stickerFileNames, svgToPng, zipFiles } from "../utils/vehicle-qr-export";
 import {
   STICKER_MAX_PER_REQUEST,
   buildStickerDocument,
@@ -179,6 +204,7 @@ import {
   stickerPlateRows,
   stickerSizeInfo,
   stickerSizeLines,
+  stickerCardSvgs,
   stickerWarning,
   type StickerItem,
   type StickerPlateRow,
@@ -369,19 +395,57 @@ async function goReview() {
 watch(
   [items, ticked, design, siteName],
   () => {
-    const chosen = items.value.filter((i) => ticked.value.includes(i.vehicleId));
+    const chosen = chosenItems();
     if (!chosen.length) {
       docHtml.value = "";
       return;
     }
-    const look = normalizeDesign(design);
-    const codes = chosen.map((i) => QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules);
-    const faces = chosen.map((i, k) => stickerFaceSvg(codes[k], look, i.qr));
-    docHtml.value = buildStickerDocument(chosen, faces, { design: look, siteName: siteName.value, modules: codes[0].size });
+    docHtml.value = buildStickerDocument(chosen, ...faceArgs(chosen));
   },
   { deep: true },
 );
 
+function chosenItems() {
+  return items.value.filter((i) => ticked.value.includes(i.vehicleId));
+}
+
+// The QR content and error correction (Q) are the same on every design.
+function faceArgs(chosen: StickerItem[]) {
+  const look = normalizeDesign(design);
+  const codes = chosen.map((i) => QRCode.create(i.qr, { errorCorrectionLevel: QR_ECC as QRCode.QRCodeErrorCorrectionLevel }).modules);
+  const faces = chosen.map((i, k) => stickerFaceSvg(codes[k], look, i.qr));
+  return [faces, { design: look, siteName: siteName.value, modules: codes[0].size }] as const;
+}
+
+/** The print sheet as an HTML file: open it later and print the same stickers again. */
+function saveSheet() {
+  if (!docHtml.value) return;
+  saveFile(`${stickerBundleName(siteName.value)}.html`, docHtml.value, "text/html");
+}
+
+const savingPng = ref(false);
+/** One PNG per sticker at real size; more than one come in a ZIP. */
+async function savePng(dpi: number) {
+  const chosen = chosenItems();
+  if (!chosen.length) return;
+  savingPng.value = true;
+  error.value = "";
+  try {
+    const [faces, opts] = faceArgs(chosen);
+    const cards = stickerCardSvgs(chosen, faces, { ...opts, dpi });
+    const names = stickerFileNames(chosen.map((i) => i.plateNumber));
+    const files = [];
+    for (const [k, c] of cards.entries()) files.push({ name: names[k], data: pngWithDpi(await svgToPng(c.svg, c.width, c.height), dpi) });
+    if (files.length === 1) saveFile(files[0].name, files[0].data, "image/png");
+    else saveFile(`${stickerBundleName(siteName.value)}.zip`, zipFiles(files), "application/zip");
+  } catch (e: any) {
+    console.error(e);
+    error.value = "The PNG files could not be made in this browser - use Save sheet file instead, or try Chrome or Edge.";
+  } finally {
+    savingPng.value = false;
+  }
+}
+
 function print() {
   const win = frame.value?.contentWindow;
   if (!win) return;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "4.99.1",
+  "version": "4.100.0",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",

package/utils/vehicle-qr-export.ts

@@ -0,0 +1,150 @@
+/**
+ * Vehicle QR stickers - saving them as files (PNG images, a ZIP of PNGs, or the
+ * print sheet itself) so the same stickers can be printed again later.
+ *
+ * The byte work (PNG print size, ZIP) is pure so `node --test` can run it; the
+ * browser part (SVG -> canvas -> PNG, download) is at the bottom.
+ */
+
+const CRC_TABLE = Array.from({ length: 256 }, (_, n) => {
+  let c = n;
+  for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+  return c >>> 0;
+});
+
+export function crc32(bytes: Uint8Array): number {
+  let c = 0xffffffff;
+  for (const b of bytes) c = CRC_TABLE[(c ^ b) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+}
+
+const PNG_SIGNATURE_AND_IHDR = 8 + 25;
+
+/**
+ * Stamp the print size into a PNG (a pHYs chunk right after IHDR), so photo and
+ * print programs print it at real size instead of guessing 72/96 dpi.
+ */
+export function pngWithDpi(png: Uint8Array, dpi: number): Uint8Array {
+  const ppm = Math.round(dpi / 0.0254);
+  const chunk = new Uint8Array(21);
+  const v = new DataView(chunk.buffer);
+  v.setUint32(0, 9);
+  chunk.set([0x70, 0x48, 0x59, 0x73], 4); // "pHYs"
+  v.setUint32(8, ppm);
+  v.setUint32(12, ppm);
+  chunk[16] = 1; // unit: metre
+  v.setUint32(17, crc32(chunk.subarray(4, 17)));
+  const out = new Uint8Array(png.length + chunk.length);
+  out.set(png.subarray(0, PNG_SIGNATURE_AND_IHDR));
+  out.set(chunk, PNG_SIGNATURE_AND_IHDR);
+  out.set(png.subarray(PNG_SIGNATURE_AND_IHDR), PNG_SIGNATURE_AND_IHDR + chunk.length);
+  return out;
+}
+
+/**
+ * A plain ZIP (stored, no compression - PNGs are already compressed) that
+ * Windows, macOS and phones open without extra software.
+ */
+export function zipFiles(files: { name: string; data: Uint8Array }[]): Uint8Array {
+  const enc = new TextEncoder();
+  const parts: Uint8Array[] = [];
+  const central: Uint8Array[] = [];
+  let offset = 0;
+  for (const f of files) {
+    const name = enc.encode(f.name);
+    const crc = crc32(f.data);
+    const local = new Uint8Array(30 + name.length);
+    const l = new DataView(local.buffer);
+    l.setUint32(0, 0x04034b50, true);
+    l.setUint16(4, 20, true);
+    l.setUint16(6, 0x0800, true); // names are UTF-8
+    l.setUint32(14, crc, true);
+    l.setUint32(18, f.data.length, true);
+    l.setUint32(22, f.data.length, true);
+    l.setUint16(26, name.length, true);
+    local.set(name, 30);
+    const dir = new Uint8Array(46 + name.length);
+    const d = new DataView(dir.buffer);
+    d.setUint32(0, 0x02014b50, true);
+    d.setUint16(4, 20, true);
+    d.setUint16(6, 20, true);
+    d.setUint16(8, 0x0800, true);
+    d.setUint32(16, crc, true);
+    d.setUint32(20, f.data.length, true);
+    d.setUint32(24, f.data.length, true);
+    d.setUint16(28, name.length, true);
+    d.setUint32(42, offset, true);
+    dir.set(name, 46);
+    parts.push(local, f.data);
+    central.push(dir);
+    offset += local.length + f.data.length;
+  }
+  const dirSize = central.reduce((n, c) => n + c.length, 0);
+  const end = new Uint8Array(22);
+  const e = new DataView(end.buffer);
+  e.setUint32(0, 0x06054b50, true);
+  e.setUint16(8, files.length, true);
+  e.setUint16(10, files.length, true);
+  e.setUint32(12, dirSize, true);
+  e.setUint32(16, offset, true);
+  const all = [...parts, ...central, end];
+  const out = new Uint8Array(all.reduce((n, p) => n + p.length, 0));
+  let at = 0;
+  for (const p of all) {
+    out.set(p, at);
+    at += p.length;
+  }
+  return out;
+}
+
+/** A safe file name part: letters, digits and dashes only. */
+export function fileNamePart(value: unknown, fallback = "sticker"): string {
+  const s = String(value ?? "").trim().replace(/[^A-Za-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return s || fallback;
+}
+
+/** One PNG name per sticker, by plate; the same plate twice gets -2, -3. */
+export function stickerFileNames(plates: unknown[]): string[] {
+  const seen = new Map<string, number>();
+  return plates.map((p) => {
+    const base = fileNamePart(p).toUpperCase();
+    const n = (seen.get(base) ?? 0) + 1;
+    seen.set(base, n);
+    return `${base}${n > 1 ? `-${n}` : ""}.png`;
+  });
+}
+
+/** "vehicle-qr-stickers-<site>-<yyyy-mm-dd>" - the date the files were saved. */
+export function stickerBundleName(siteName: unknown, when = new Date()): string {
+  const day = `${when.getFullYear()}-${String(when.getMonth() + 1).padStart(2, "0")}-${String(when.getDate()).padStart(2, "0")}`;
+  return `vehicle-qr-stickers-${fileNamePart(siteName, "site")}-${day}`;
+}
+
+// ---- browser only -------------------------------------------------------
+
+/** Draw an SVG image (sized in pixels) onto a canvas and return the PNG bytes. */
+export async function svgToPng(svg: string, width: number, height: number): Promise<Uint8Array> {
+  const img = new Image();
+  img.decoding = "sync";
+  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+  await img.decode();
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  canvas.getContext("2d")!.drawImage(img, 0, 0, width, height);
+  const blob = await new Promise<Blob | null>((ok) => canvas.toBlob(ok, "image/png"));
+  if (!blob) throw new Error("This browser could not make the picture.");
+  return new Uint8Array(await blob.arrayBuffer());
+}
+
+/** Hand the browser a file to save (it goes to the Downloads folder). */
+export function saveFile(name: string, data: BlobPart, type: string): void {
+  const url = URL.createObjectURL(new Blob([data], { type }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 10_000);
+}

package/utils/vehicle-qr-sticker.ts

@@ -337,6 +337,49 @@ function plateSizeMm(plate: string, boxW: number, max = 4.6): number {
   return Math.round(Math.min(max, (boxW / Math.max(plate.length, 1) - 0.3) / 0.74) * 100) / 100;
 }
 
+/**
+ * One full HTML document: A4 sheets of stickers. `faceSvgs` is parallel to
+ * `items` (each sticker's frame + QR, already drawn for the chosen design).
+ * Every value is HTML-escaped - an owner or site name is typed by a person.
+ */
+type CardContext = { ink: string; label: string; layout: SheetLayout; k: number; shaped: boolean; bare: boolean; wordsTop: number; tag: { x: number; y: number; w: number; h: number } | null };
+
+function cardContext(design: StickerDesign, siteName: string | undefined, n: number): CardContext {
+  const g = stickerGeometry(design, n);
+  const k = g.scale;
+  // Shaped codes: plate (and words) in ink on the paper tab under the shape - or no text at all.
+  const shaped = !!g.pts;
+  return {
+    ink: stickerTheme(design.theme).ink,
+    label: stickerLabel(design, siteName),
+    layout: sheetLayout(design),
+    k,
+    shaped,
+    bare: shaped && design.frame === "none",
+    wordsTop: mm(((g.qrTop ?? 0) + QR_MM + 0.8) * k),
+    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,
+  };
+}
+
+/** The sticker itself (frame + QR + plate words) - what goes on the car. */
+function cardHtml(item: StickerItem, face: string, c: CardContext): string {
+  const plate = escapeHtml(item.plateNumber);
+  const label = c.label ? `<div class="hint">${escapeHtml(c.label)}</div>` : "";
+  const words = c.shaped && !c.tag
+    ? ""
+    : c.tag
+    ? `<div class="words band" style="left:${c.tag.x}mm;right:auto;top:${c.tag.y}mm;width:${c.tag.w}mm;height:${c.tag.h}mm">` +
+      `<div class="plate" style="font-size:${plateSizeMm(text(item.plateNumber), c.tag.w, 4.6 * c.k)}mm">${plate}</div>` +
+      label +
+      `</div>`
+    : `<div class="words" style="top:${c.wordsTop}mm">` +
+      `<div class="plate">${plate}</div>` +
+      label +
+      `<div class="brand"><span class="mark" style="background:${c.ink}">7</span>Powered by Seven365</div>` +
+      `</div>`;
+  return `<div class="card" style="color:${c.ink}"><div class="face">${face}</div>${words}</div>`;
+}
+
 /**
  * One full HTML document: A4 sheets of stickers. `faceSvgs` is parallel to
  * `items` (each sticker's frame + QR, already drawn for the chosen design).
@@ -349,42 +392,52 @@ export function buildStickerDocument(
 ): string {
   const design = opts.design ?? DEFAULT_STICKER_DESIGN;
   const n = opts.modules ?? STICKER_QR_MODULES;
-  const { ink } = stickerTheme(design.theme);
-  const label = stickerLabel(design, opts.siteName);
-  const layout = sheetLayout(design);
-  const g = stickerGeometry(design, n);
-  const k = g.scale;
-  // Shaped codes: plate (and words) in ink on the paper tab under the shape - or no text at all.
-  const shaped = !!g.pts;
-  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 = shaped && design.frame === "none";
-  const wordsTop = mm(((g.qrTop ?? 0) + QR_MM + 0.8) * k);
+  const c = cardContext(design, opts.siteName, n);
   const cells = items.map((item, i) => {
     const { place, owner } = installerLine(item);
-    const plate = escapeHtml(item.plateNumber);
-    const words = shaped && !tag
-      ? ""
-      : tag
-      ? `<div class="words band" style="left:${tag.x}mm;right:auto;top:${tag.y}mm;width:${tag.w}mm;height:${tag.h}mm">` +
-        `<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">` +
-        `<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>` +
-      words +
-      `</div>` +
-      `<div class="cut${bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
+      `<div class="cell">${cardHtml(item, faceSvgs[i] ?? "", c)}` +
+      `<div class="cut${c.bare ? " free" : ""}"><div><b>${escapeHtml(place || "-")}</b></div>` +
       `<div class="owner">Owner: ${escapeHtml(owner || "-")}</div></div></div>`
     );
   });
-  const marks = cropMarksSvg(layout);
+  const marks = cropMarksSvg(c.layout);
   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>`;
+  const pages = stickerPages(cells, perSheet(c.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(c.layout)}</style></head><body>${pages.join("")}</body></html>`;
+}
+
+/** CSS px per mm (CSS fixes 1 in = 96 px = 25.4 mm). */
+const PX_PER_MM = 96 / 25.4;
+
+/**
+ * Each sticker on its own, as a standalone SVG image (the same card HTML and CSS
+ * as the print sheet, inside a foreignObject) sized `dpi` dots per inch - for
+ * turning into a PNG. Clear outside the sticker; no installer strip (the PNG
+ * file is named after the plate instead). A 1 mm border keeps the cut line in.
+ */
+export function stickerCardSvgs(
+  items: StickerItem[],
+  faceSvgs: string[],
+  opts: { design?: StickerDesign; siteName?: string; modules?: number; dpi?: number } = {},
+): { svg: string; width: number; height: number }[] {
+  const design = opts.design ?? DEFAULT_STICKER_DESIGN;
+  const c = cardContext(design, opts.siteName, opts.modules ?? STICKER_QR_MODULES);
+  const pad = CUT_LINE_GAP + 1;
+  const wMm = c.layout.cellW + pad * 2;
+  const hMm = c.layout.cardH + pad * 2;
+  const vw = mm(wMm * PX_PER_MM);
+  const vh = mm(hMm * PX_PER_MM);
+  const width = Math.round((wMm / 25.4) * (opts.dpi ?? 600));
+  const height = Math.round((hMm / 25.4) * (opts.dpi ?? 600));
+  const css = printCss(c.layout).replace(/@media screen[^\n]*\n/, "");
+  return items.map((item, i) => ({
+    width,
+    height,
+    svg:
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${vw} ${vh}">` +
+      `<foreignObject x="0" y="0" width="${vw}" height="${vh}">` +
+      `<div xmlns="http://www.w3.org/1999/xhtml" style="padding:${pad}mm;font-family:Arial, Helvetica, sans-serif">` +
+      `<style>${css}</style>${cardHtml(item, faceSvgs[i] ?? "", c)}</div></foreignObject></svg>`,
+  }));
 }