4 Commits

Author SHA1 Message Date
s4luorth
af08202981 Adresszeilen als Platzhalter [[Zeile1]]..[[Zeile5]] (5-Zeilen-Modus)
All checks were successful
Build & Deploy / deploy (push) Successful in 10s
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-11 20:55:22 +02:00
s4luorth
e56a71dfdd Postkarte: kein falscher „Text zu lang"-Fehler mehr
All checks were successful
Build & Deploy / deploy (push) Successful in 10s
- Überlauf nur noch am Brieftext messen (echte lineCount/lineLimit statt 0/0) –
  behebt die Meldung „1 Zeile zu lang – 0 statt max. 0".
- Empfänger-Adresse wird automatisch verkleinert, wenn sie nicht ins sichere
  Adressfeld passt → Codierzone bleibt immer frei, keine Blockade der Vorschau.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-11 20:53:41 +02:00
s4luorth
41a3bb46a1 Postkarten-Layout nach Plotter-Maßblatt (A6 Dialogpost)
All checks were successful
Build & Deploy / deploy (push) Successful in 13s
Absender oben links (x2–72/y2–12), Text L-förmig links (x2–72/y14–40 +
x2–81,4/y40–88), Empfänger im sicheren Adressfeld (x86,6–146/y42–88), Trennstrich
bei x84 (1,2 mm). Frankierzone (x74–148/y0–40) und Codierzone (y90–105) bleiben
frei. Zonen an W/H verankert (auch DIN lang). Variabler L-förmiger Textfluss.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-11 19:52:09 +02:00
s4luorth
3399cece23 Umschlag-Empfänger (mit Absender): Mindestabstand rechts für den Plotter
All checks were successful
Build & Deploy / deploy (push) Successful in 13s
Der Empfänger-Adressblock (Kuvert mit Absender) hielt rechts nur ~8 mm Abstand –
der Plotter braucht mehr Greiffläche. Startpunkt leicht nach links (0.55) und
Textbreite so begrenzt, dass rechts RAND_RECHTS_MM (15 mm) frei bleiben. Dieselbe
Konstante nutzt jetzt auch das Postkarten-Layout.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-09-11 14:15:45 +02:00
2 changed files with 102 additions and 42 deletions

View File

@@ -32,6 +32,8 @@ function addressText(entry) {
/** Platzhalterwerte einer Zeile (strukturierte Felder + freie Platzhalter). */
function placeholdersOf(entry) {
// Die 5 Adresszeilen (5-Zeilen-Modus) auch als [[Zeile1]]..[[Zeile5]] verfügbar.
const zeilen = String(entry.free_text || '').split('\n');
return {
Anrede: entry.salutation || '',
Vorname: entry.first_name || '',
@@ -41,6 +43,8 @@ function placeholdersOf(entry) {
Ort: entry.city || '',
Land: entry.country || '',
Briefnummer: entry.letter_number ?? '',
Zeile1: zeilen[0] || '', Zeile2: zeilen[1] || '', Zeile3: zeilen[2] || '',
Zeile4: zeilen[3] || '', Zeile5: zeilen[4] || '',
...(entry.placeholders && typeof entry.placeholders === 'object' ? entry.placeholders : {}),
};
}

View File

@@ -18,6 +18,10 @@ const {
const SIG_CANVAS_W = 600;
const SIG_CANVAS_H = 160;
// Mindestabstand des Adressblocks zum rechten Rand (mm). Der Plotter braucht rechts
// Greiffläche – gilt einheitlich für Postkarte UND Umschlag-Empfänger (mit Absender).
const RAND_RECHTS_MM = 15;
/**
* Extrahiert Path- und Polyline-Elemente aus einem SVG-String und gibt sie als
* umgeformte <g>-Gruppe zurück, die an Position (x, y) mit Skalierung scale eingebettet ist.
@@ -297,7 +301,12 @@ function generateEnvelopeSVG(text, format, type, options = {}) {
// 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.36 : 0.6));
// Empfänger unten rechts (mit Absender): Startpunkt zuerst festlegen, dann die
// Textbreite so begrenzen, dass rechts der Plotter-Mindestabstand frei bleibt.
const startXEmpf = Math.round(widthPx * 0.55);
const maxWidthPx = hatAbsender
? Math.max(mmToPx(30), (widthPx - mmToPx(RAND_RECHTS_MM)) - startXEmpf)
: Math.min(widthPx - marginLeftPx - 20, widthPx * 0.6);
lines = wrapTextToLinesByWidth({
text: String(text || ''),
@@ -309,7 +318,7 @@ function generateEnvelopeSVG(text, format, type, options = {}) {
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.60);
startX = startXEmpf;
const untenBaseline = heightPx * 0.80; // unterste Zeile ~20 % über der Unterkante
startY = Math.round(untenBaseline - Math.max(0, lines.length - 1) * lineHeightPx);
} else {
@@ -428,18 +437,25 @@ function splitPostcardText(text) {
}
/**
* Postkarte (einseitig): Text auf der LINKEN Hälfte, Absender + Empfänger auf der
* RECHTEN Hälfte, Briefmarkenfeld (leerer Bereich) oben rechts. Für A6/DIN-lang-
* Postkarten – ein SVG je Karte (ein Plotter-Durchlauf). Der Text kommt bereits
* scriptalisiert an und enthält die Marker [[pk_abs]] / [[pk_adr]].
* Postkarte (einseitig) nach dem Plotter-Maßblatt (Dialogpost A6, Ursprung oben
* links, Maße in mm):
* • Absender: x 2–72, y 2–12 (2 Zeilen, klein)
* • Text: x 2–72, y 14–40 (oben, schmal, links neben der Frankierzone)
* und x 2–81,4, y 40–88 (unten, breiter) – L-förmiger Textfluss
* • Empfänger: x 86,6–146, y 42–88 (sicheres Adressfeld)
* • Trennstrich: x 84, y 42–88, Breite 1,2 mm
* • FREI: Frankierzone (x 74–148, y 0–40) und Codierzone (y 90–105)
* Andere Kartengrößen: Zonen an W/H verankert (Adresse rechts, Text links,
* Frankierzone rechts oben, Codierzone unten frei). Text kommt scriptalisiert
* mit den Markern [[pk_abs]] / [[pk_adr]].
*/
function generatePostcardSVG(text, format, options = {}) {
const fontKey = normalizeFontKey(options.font);
const fontConfig = SVG_FONT_CONFIG[fontKey];
const fontFile = SVG_FONT_CONFIG[fontKey].file;
const realistic = options.realisticHandwriting ?? false;
const { widthPx, heightPx, widthMm, heightMm } = getPageDimensions(format);
const { marginTopPx, marginLeftPx, lineHeightPx: baseLineHeightPx } = getLayoutForFormat(format);
const { widthPx, heightPx, widthMm: W, heightMm: H } = getPageDimensions(format);
const { lineHeightPx: baseLineHeightPx } = getLayoutForFormat(format);
const { body, sender, recipient } = splitPostcardText(text);
@@ -447,50 +463,89 @@ function generatePostcardSVG(text, format, options = {}) {
const fontSizePx = FONT_SIZE_PX * fontScale;
const lineHeightPx = baseLineHeightPx * fontScale;
// Zonen: linke Hälfte Text, rechte Hälfte Adresse; Briefmarke oben rechts frei.
const textLeft = marginLeftPx;
const textRight = widthPx * 0.48;
const textWidth = Math.max(mmToPx(30), textRight - textLeft);
const addrLeft = widthPx * 0.52;
const addrRight = widthPx - mmToPx(8);
const addrWidth = Math.max(mmToPx(30), addrRight - addrLeft);
const stampW = mmToPx(25);
const stampX = widthPx - mmToPx(6) - stampW;
// Zonen in mm (Maßblatt), für andere Größen an den Rändern verankert.
const maxYmm = H - 17; // Codierzone (unten 15 mm) frei → A6: 88
const frankBottomMm = 40; // Frankierzone-Unterkante (Briefmarke)
const frankLeftMm = W - 74; // Frankierzone links → A6: 74
const addrRightMm = W - 2; // A6: 146
const addrLeftMm = addrRightMm - 59.4; // A6: 86,6
const addrTopMm = 42;
const textLeftMm = 2;
const textUpperRightMm = frankLeftMm - 2; // A6: 72
const textLowerRightMm = addrLeftMm - 5.2; // A6: 81,4
const trennXmm = (textLowerRightMm + addrLeftMm) / 2; // A6: 84
const paths = [];
let bodyLineCount = 0;
let bodyLineLimit = 1;
let overflow = false;
// Text links.
// Variabler (L-förmiger) Textfluss: oben schmal (bis Frankierzone), unten breit.
const breiteBeiY = (yPx) => (yPx < mmToPx(frankBottomMm)
? mmToPx(textUpperRightMm - textLeftMm)
: mmToPx(textLowerRightMm - textLeftMm));
function flowVariabel(txt, size, baseline0, lh) {
const paras = String(txt).split(/\r?\n/);
const out = [];
let y = baseline0;
for (const para of paras) {
const words = para.split(/\s+/).filter(Boolean);
if (!words.length) { out.push(''); y += lh; continue; }
let cur = '';
for (const w of words) {
const test = cur ? cur + ' ' + w : w;
const wpx = measureTextWidthPx({ text: test, fontFileName: fontFile, fontSizePx: size });
if (cur && wpx > breiteBeiY(y)) { out.push(cur); y += lh; cur = w; } else cur = test;
}
if (cur !== '') { out.push(cur); y += lh; }
}
return out;
}
// Text links (L-förmig). Nur DER Text kann „zu lang" sein (Nutzer kürzt ihn).
const baseline0 = mmToPx(14) + fontSizePx;
bodyLineLimit = Math.max(1, Math.floor((mmToPx(maxYmm) - baseline0) / lineHeightPx) + 1);
if (body) {
const bodyLines = wrapTextToLinesByWidth({ text: body, maxWidthPx: textWidth, fontFileName: fontConfig.file, fontSizePx });
const bodyLines = flowVariabel(body, fontSizePx, baseline0, lineHeightPx);
bodyLineCount = bodyLines.length;
if (bodyLineCount > bodyLineLimit) overflow = true;
paths.push(...layoutTextToPaths({
lines: bodyLines, fontFileName: fontConfig.file, fontSizePx,
startX: textLeft, startY: marginTopPx + fontSizePx, lineHeightPx, realisticHandwriting: realistic,
lines: bodyLines, fontFileName: fontFile, fontSizePx,
startX: mmToPx(textLeftMm), startY: baseline0, lineHeightPx, realisticHandwriting: realistic,
}));
}
// Absender klein oben in der Adresszone, links neben dem Briefmarkenfeld.
// Absender oben links (2 Zeilen), klein genug für die 10-mm-Zone.
if (sender) {
const senderScale = Math.max(0.5, Math.min(2, Number(options.senderScale) || 1));
const senderSize = FONT_SIZE_PX * 0.7 * senderScale;
const senderLH = lineHeightPx * (senderSize / fontSizePx);
const senderWidth = Math.max(mmToPx(30), Math.min(addrWidth, stampX - addrLeft - mmToPx(3)));
const senderLines = wrapTextToLinesByWidth({ text: sender, maxWidthPx: senderWidth, fontFileName: fontConfig.file, fontSizePx: senderSize });
const senderSize = FONT_SIZE_PX * 0.55 * Math.max(0.7, Math.min(1.2, Number(options.senderScale) || 1));
const senderLH = (baseLineHeightPx / FONT_SIZE_PX) * senderSize;
const senderLines = wrapTextToLinesByWidth({ text: sender, maxWidthPx: mmToPx(textUpperRightMm - textLeftMm), fontFileName: fontFile, fontSizePx: senderSize }).slice(0, 2);
paths.push(...layoutTextToPaths({
lines: senderLines, fontFileName: fontConfig.file, fontSizePx: senderSize,
startX: addrLeft, startY: mmToPx(8) + senderSize, lineHeightPx: senderLH, realisticHandwriting: realistic,
lines: senderLines, fontFileName: fontFile, fontSizePx: senderSize,
startX: mmToPx(textLeftMm), startY: mmToPx(2) + senderSize, lineHeightPx: senderLH, realisticHandwriting: realistic,
}));
}
// Empfänger in der unteren Hälfte der Adresszone (klassische Anschriftzone).
// Empfänger im sicheren Adressfeld (rechts unten). Passt der Block nicht in die
// 46 mm hohe Zone, wird die Schrift automatisch verkleinert – so bleibt die
// Codierzone (unten) IMMER frei und es gibt keinen „Adresse zu lang"-Fehler.
if (recipient) {
const recLines = wrapTextToLinesByWidth({ text: recipient, maxWidthPx: addrWidth, fontFileName: fontConfig.file, fontSizePx });
const recBottom = heightPx * 0.90;
const recStartY = recBottom - Math.max(0, recLines.length - 1) * lineHeightPx;
const feldOben = mmToPx(addrTopMm);
const feldUnten = mmToPx(maxYmm);
const feldBreite = mmToPx(addrRightMm - addrLeftMm);
let recSize = fontSizePx;
let recLH = lineHeightPx;
let recLines = [];
for (const scale of [1, 0.9, 0.8, 0.72, 0.65, 0.6]) {
recSize = fontSizePx * scale;
recLH = lineHeightPx * scale;
recLines = wrapTextToLinesByWidth({ text: recipient, maxWidthPx: feldBreite, fontFileName: fontFile, fontSizePx: recSize });
const blockUnten = feldOben + recSize + Math.max(0, recLines.length - 1) * recLH + recSize * 0.3;
if (blockUnten <= feldUnten) break;
}
paths.push(...layoutTextToPaths({
lines: recLines, fontFileName: fontConfig.file, fontSizePx,
startX: addrLeft, startY: recStartY, lineHeightPx, realisticHandwriting: realistic,
lines: recLines, fontFileName: fontFile, fontSizePx: recSize,
startX: mmToPx(addrLeftMm), startY: feldOben + recSize, lineHeightPx: recLH, realisticHandwriting: realistic,
}));
}
@@ -506,18 +561,19 @@ function generatePostcardSVG(text, format, options = {}) {
/>`)
.join('\n ');
// Trennstrich (solide Linie, 1,2 mm breit) zwischen Text und Adressfeld.
const trennstrich = `<path d="M ${mmToPx(trennXmm).toFixed(1)} ${mmToPx(addrTopMm).toFixed(1)} L ${mmToPx(trennXmm).toFixed(1)} ${mmToPx(maxYmm).toFixed(1)}" stroke="#000000" stroke-width="${mmToPx(1.2).toFixed(1)}" stroke-linecap="butt" fill="none"/>`;
const svg = `<svg xmlns="http://www.w3.org/2000/svg"
width="${widthMm}mm"
height="${heightMm}mm"
width="${W}mm"
height="${H}mm"
viewBox="0 0 ${widthPx} ${heightPx}">
<rect x="0" y="0" width="${widthPx}" height="${heightPx}" fill="#FFFFFF" />
${trennstrich}
${pathElements}
</svg>`;
// Überlauf: passt der Text in die linke Hälfte (Höhe)?
const available = heightPx - (marginTopPx + fontSizePx) - fontSizePx * 0.5;
const lineLimit = Math.max(1, Math.floor(available / lineHeightPx) + 1);
return { svg: svg.trim(), overflow: bodyLineCount > lineLimit, lineCount: bodyLineCount, lineLimit };
return { svg: svg.trim(), overflow, lineCount: bodyLineCount, lineLimit: bodyLineLimit };
}
/**