Logo in der Mitte des QR-Codes

Zur Wahl stehen zwei Quellen: das Logo der Installation aus dem
Erscheinungsbild oder ein eigenes je Code. Die Groesse ist zwischen 10 und
25 Prozent der Kantenlaenge einstellbar, hinter dem Bild liegt eine Flaeche
in der Hintergrundfarbe.

Mit Logo gilt die Fehlerkorrektur H, unabhaengig von der Auswahl — was das
Bild verdeckt, muss sie ausgleichen. Die Auswahl steht dann fest auf H und
sagt auch warum; heimlich geschieht das nicht. Ab 22 Prozent kommt eine
Warnung dazu.

Gerendert wird weiterhin serverseitig, damit Vorschau und Download
uebereinstimmen: das SVG bekommt ein eingebettetes Bild, das PNG wird mit
sharp zusammengesetzt. sharp lag ohnehin als Abhaengigkeit von Next im
Baum und steht jetzt ausdruecklich in der package.json.

Ein eigenes Logo gehoert zur Gestaltung, nicht zum Inhalt — es muss
trotzdem an den Code gehaengt werden. Sonst raeumt die Aufraeumroutine es
nach einem Tag weg und der Code verliert sein Bild.

Refs #8

src/app/(app)/erstellen/[type]/page.tsx

@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
 import { Icon } from "@/components/icons";
 import { QrGenerator } from "@/components/qr-generator";
 import { resolveTargetGroup } from "@/lib/auth/groups";
+import { getBranding } from "@/lib/branding";
 import { can } from "@/lib/auth/policy";
 import { getSettings } from "@/lib/settings";
 import { requirePageActor } from "@/lib/auth/guard";
@@ -85,5 +86,15 @@ export default async function CreatePage({ params }: Props) {
   const groupId = await resolveTargetGroup(actor, undefined).catch(() => undefined);
   const maySetSlug = can(actor, "codes:slug", { groupId, editorsMaySetSlug });
 
-  return <QrGenerator typeId={state.qrType.id} maySetSlug={maySetSlug} />;
+  // Ohne hinterlegtes Logo entfaellt die Wahl der Herkunft — dann bleibt nur
+  // der eigene Upload.
+  const { logoUploadId } = await getBranding();
+
+  return (
+    <QrGenerator
+      typeId={state.qrType.id}
+      maySetSlug={maySetSlug}
+      hasBrandingLogo={logoUploadId !== null}
+    />
+  );
 }

src/app/api/codes/[id]/qr/route.ts

@@ -8,6 +8,7 @@ import { requireImplementedQrType } from "@/lib/qr/availability";
 import { errorResponse } from "@/lib/http";
 import { designSchema } from "@/lib/qr/design";
 import { getQrType } from "@/lib/qr/registry";
+import { ladeLogo } from "@/lib/qr/logo";
 import { CONTENT_TYPES, renderPng, renderSvg } from "@/lib/qr/render";
 import { downloadFilename, QrRequestError } from "@/lib/qr/request";
 
@@ -48,7 +49,11 @@ export async function GET(
       size: code.size,
       ecLevel: code.ecLevel,
       margin: code.margin,
+      logoSource: code.logoSource,
+      logoUploadId: code.logoUploadId,
+      logoScale: code.logoScale,
     });
+    const logo = await ladeLogo(design);
 
     // Was im Bild steckt, haengt an der Betriebsart: Ein dynamischer Code
     // traegt die Kurz-URL, ein statischer seinen Inhalt selbst.
@@ -58,8 +63,8 @@ export async function GET(
         : shortUrl(code.slug, code.domain.hostname);
     const body =
       format === "png"
-        ? new Uint8Array(await renderPng(content, design))
-        : await renderSvg(content, design);
+        ? new Uint8Array(await renderPng(content, design, logo))
+        : await renderSvg(content, design, logo);
 
     const headers: Record<string, string> = {
       "Content-Type": CONTENT_TYPES[format],

src/app/api/codes/[id]/route.ts

@@ -13,7 +13,7 @@ import { assertDynamicPossible } from "@/lib/qr/request";
 import { describeSlugProblem, normalizeSlug } from "@/lib/slug";
 import { assertSlugAvailable } from "@/lib/slug-resolve";
 import { getSettings } from "@/lib/settings";
-import { attachUploads } from "@/lib/uploads";
+import { attachUpload, attachUploads, detachUpload } from "@/lib/uploads";
 import { QrRequestError } from "@/lib/qr/type-module";
 
 export const dynamic = "force-dynamic";
@@ -133,6 +133,18 @@ export async function PATCH(
       Object.assign(update, parsed.data.design);
     }
 
+    // Ein eigenes Logo gehört zur Gestaltung, nicht zum Inhalt. Es muss
+    // trotzdem an den Code gehängt werden — sonst liegt die Datei herrenlos
+    // herum und wird nach einem Tag weggeräumt, mitsamt dem Logo im Code.
+    const logoVorher =
+      existing.logoSource === "upload" ? existing.logoUploadId : null;
+    const logoNachher =
+      parsed.data.design === undefined
+        ? logoVorher
+        : parsed.data.design.logoSource === "upload"
+          ? parsed.data.design.logoUploadId
+          : null;
+
     /* ------------------------------------------------------- Kurz-Link */
 
     const neuerSlug = parsed.data.slug?.trim();
@@ -225,7 +237,18 @@ export async function PATCH(
     // Eine ausgetauschte Datei verliert dabei ihren Bezug zum Code und wird
     // später als verwaist weggeräumt.
     if (neueDateien !== null) {
-      await attachUploads(updated.id, neueDateien);
+      await attachUploads(
+        updated.id,
+        logoNachher ? [...neueDateien, logoNachher] : neueDateien,
+      );
+    } else if (logoNachher && logoNachher !== logoVorher) {
+      await attachUpload(updated.id, logoNachher);
+    }
+
+    // Ein abgelegtes oder ausgetauschtes Logo verliert seinen Bezug und wird
+    // später weggeräumt.
+    if (logoVorher && logoVorher !== logoNachher) {
+      await detachUpload(updated.id, logoVorher);
     }
 
     return Response.json({ code: toQrCodeDto(updated) });

src/app/api/codes/route.ts

@@ -45,6 +45,24 @@ const createSchema = z.object({
   domainId: z.string().trim().min(1).optional(),
 });
 
+/**
+ * Alle Dateien, die zu einem Code gehören.
+ *
+ * Das sind die des Typ-Moduls — ein PDF, ein Bild — **und** ein eigenes Logo
+ * aus der Gestaltung. Wird das vergessen, löst `attachUploads` das Logo beim
+ * nächsten Speichern wieder vom Code und räumt es später als herrenlos weg.
+ */
+function dateienDesCodes(
+  qrType: { uploadIds: (data: never) => string[] },
+  data: unknown,
+  design: { logoSource: string | null; logoUploadId: string | null },
+): string[] {
+  const ids = qrType.uploadIds(data as never);
+  return design.logoSource === "upload" && design.logoUploadId
+    ? [...ids, design.logoUploadId]
+    : ids;
+}
+
 function isUniqueViolation(error: unknown): boolean {
   return (
     typeof error === "object" &&
@@ -160,7 +178,7 @@ export async function POST(request: NextRequest): Promise<Response> {
           aliases: { select: { slug: true }, orderBy: { createdAt: "desc" } },
         },
       });
-      await attachUploads(created.id, qrType.uploadIds(validated.data));
+      await attachUploads(created.id, dateienDesCodes(qrType, validated.data, design));
       return Response.json({ code: toQrCodeDto(created) }, { status: 201 });
     }
 
@@ -187,7 +205,7 @@ export async function POST(request: NextRequest): Promise<Response> {
         });
         // Erst jetzt gehören die hochgeladenen Dateien zu diesem Code —
         // vorher lagen sie ohne Bezug herum.
-        await attachUploads(created.id, qrType.uploadIds(validated.data));
+        await attachUploads(created.id, dateienDesCodes(qrType, validated.data, design));
 
         return Response.json({ code: toQrCodeDto(created) }, { status: 201 });
       } catch (error) {

src/app/api/qr/download/route.ts

@@ -3,6 +3,7 @@ import { z } from "zod";
 
 import { getActor, requireSignedIn } from "@/lib/auth/actor";
 import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { ladeLogo } from "@/lib/qr/logo";
 import { CONTENT_TYPES, renderPng, renderSvg } from "@/lib/qr/render";
 import {
   downloadFilename,
@@ -38,10 +39,11 @@ export async function POST(request: NextRequest): Promise<Response> {
 
     const { qrType, data, content } = await resolveQrRequest(parsed.data);
 
+    const logo = await ladeLogo(design);
     const body =
       format === "png"
-        ? new Uint8Array(await renderPng(content, design))
-        : await renderSvg(content, design);
+        ? new Uint8Array(await renderPng(content, design, logo))
+        : await renderSvg(content, design, logo);
 
     return new Response(body, {
       headers: {

src/app/api/qr/preview/route.ts

@@ -2,6 +2,7 @@ import type { NextRequest } from "next/server";
 
 import { getActor, requireSignedIn } from "@/lib/auth/actor";
 import { errorResponse, firstZodMessage, jsonError } from "@/lib/http";
+import { ladeLogo } from "@/lib/qr/logo";
 import { renderSvg } from "@/lib/qr/render";
 import { qrRequestSchema, resolveQrRequest } from "@/lib/qr/request";
 
@@ -21,7 +22,8 @@ export async function POST(request: NextRequest): Promise<Response> {
     }
 
     const { content } = await resolveQrRequest(parsed.data);
-    const svg = await renderSvg(content, parsed.data.design);
+    const logo = await ladeLogo(parsed.data.design);
+    const svg = await renderSvg(content, parsed.data.design, logo);
 
     return Response.json({
       content,