Kuvert: Absender oben links, Empfaenger unten rechts sauber positioniert

Positionierung ueber Hoehen-/Breiten-Anteile statt ueber den grossen Kuvert-Rand
(marginTop bis ~50% der Hoehe): Absender ~14% oben/6% links, Empfaenger ~65-80%
unten/rechts. Vorher klebten beide im mittleren Band.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/api/controllers/directus-controller.js

@@ -167,6 +167,8 @@ async function generateFromDirectus(req, res, next) {
         previewSession: order.preview_session || null,
         // Eingegebener Brieftext → als brieftext.txt im Ausgabeordner ablegen.
         rawText: order.text_template || null,
+        // Absender fürs Kuvert (manuelle Aufträge): oben links, Empfänger unten rechts.
+        envelopeSender: order.envelope_sender || null,
       },
     });
 

src/api/controllers/order-controller.js

@@ -311,8 +311,9 @@ async function runGeneration({ orderNumber, letters, metadata }) {
       const filepath = isEnv ? path.join(envelopesDir, filename) : path.join(outputDir, filename);
 
       // 1:1 aus der Vorschau übernehmen, wenn für dieses Dokument eine
-      // Vorschau-Datei existiert.
-      if (previewSession) {
+      // Vorschau-Datei existiert. Ausnahme: Kuvert mit Absender – das wird frisch
+      // gerendert, damit der Absender (oben links) sicher drauf ist.
+      if (previewSession && !(isEnv && metadata.envelopeSender)) {
         const cached = path.join(previewsRoot, previewSession, filename);
         try {
           await fs.access(cached);
@@ -329,7 +330,7 @@ async function runGeneration({ orderNumber, letters, metadata }) {
         if (isEnv) {
           svgResult = generateEnvelopeSVG(
             scriptalizedText, letter.format, letter.envelopeType,
-            { font: letter.font, realisticHandwriting: letter.realisticHandwriting ?? false, fontScale: letter.fontScale }
+            { font: letter.font, realisticHandwriting: letter.realisticHandwriting ?? false, fontScale: letter.fontScale, sender: metadata.envelopeSender || '' }
           );
         } else {
           svgResult = generateLetterSVG(

src/api/controllers/preview-controller.js

@@ -167,7 +167,7 @@ async function generateBatch(req, res, next) {
         if (letter.type === "envelope") {
           const svgResult = generateEnvelopeSVG(
             scriptalizedText, letter.format, letter.envelopeType,
-            { font: letter.font, realisticHandwriting: letter.realisticHandwriting ?? false, fontScale: letter.fontScale }
+            { font: letter.font, realisticHandwriting: letter.realisticHandwriting ?? false, fontScale: letter.fontScale, sender: letter.sender || '' }
           );
           if (svgResult.overflow) hasOverflow = true;
           const filename = `envelope_${pad}.svg`;

src/lib/svg-generator.js

@@ -294,8 +294,10 @@ function generateEnvelopeSVG(text, format, type, options = {}) {
     startX = 0; // Dummy-Wert, wird für jede Zeile überschrieben
 
   } else {
-    // type === 'recipient' / 'free': Links, max. 60% der Umschlagsbreite
-    const maxWidthPx = Math.min(widthPx - marginLeftPx - 20, widthPx * 0.6);
+    // type === 'recipient' / 'free'. Ist ein Absender gesetzt, sitzt der
+    // Empfänger UNTEN RECHTS (klassisches Kuvert), sonst wie bisher oben links.
+    const hatAbsender = !!String(options.sender || '').trim();
+    const maxWidthPx = Math.min(widthPx - marginLeftPx - 20, widthPx * (hatAbsender ? 0.44 : 0.6));
 
     lines = wrapTextToLinesByWidth({
       text: String(text || ''),
@@ -304,8 +306,16 @@ function generateEnvelopeSVG(text, format, type, options = {}) {
       fontSizePx,
     });
 
-    startX = marginLeftPx;
-    startY = marginTopPx + fontSizePx;
+    if (hatAbsender) {
+      // Empfänger unten rechts – bewusst über Höhen-/Breiten-Anteile, damit der
+      // große Kuvert-Rand (marginTop bis ~50 % der Höhe) nicht alles nach oben zieht.
+      startX = Math.round(widthPx * 0.52);
+      const untenBaseline = heightPx * 0.80; // unterste Zeile ~20 % über der Unterkante
+      startY = Math.round(untenBaseline - Math.max(0, lines.length - 1) * lineHeightPx);
+    } else {
+      startX = marginLeftPx;
+      startY = marginTopPx + fontSizePx;
+    }
   }
 
   let paths = [];
@@ -347,6 +357,25 @@ function generateEnvelopeSVG(text, format, type, options = {}) {
     });
   }
 
+  // Absender oben links (kleiner) – nur wenn gesetzt und kein zentrierter Freitext.
+  const absender = String(options.sender || '').trim();
+  if (absender && type !== 'custom') {
+    const absSize = fontSizePx * 0.62;
+    const absLH = lineHeightPx * 0.62;
+    const absLines = absender.split('\n').map((l) => l.replace(/\s+$/, ''));
+    const absPaths = layoutTextToPaths({
+      lines: absLines,
+      fontFileName: fontConfig.file,
+      fontSizePx: absSize,
+      // Echt oben links – unabhängig vom großen Kuvert-Rand.
+      startX: Math.round(widthPx * 0.06),
+      startY: Math.round(heightPx * 0.14),
+      lineHeightPx: absLH,
+      realisticHandwriting: options.realisticHandwriting ?? false,
+    });
+    paths = [...paths, ...absPaths];
+  }
+
   const pathElements = paths
     .map(
       (p) => `<path d="${escapeXml(p.d)}"

src/services/directus-service.js

@@ -41,7 +41,7 @@ async function directusFetch(path, options = {}) {
 async function fetchOrder(orderId) {
   const fields = [
     'id', 'order_number', 'customer_email', 'font', 'status',
-    'needs_envelope', 'envelope_labeling', 'envelope_text', 'envelope_format',
+    'needs_envelope', 'envelope_labeling', 'envelope_text', 'envelope_format', 'envelope_sender',
     'text_template', 'motif_mode', 'own_cards', 'entries_count', 'preview_session',
     'source_file', 'product.key', 'product.type', 'product.input_mode', 'format.key',
     'font_scale_letter', 'font_scale_envelope', 'signatures_manual', 'multi_page', 'realistic',