diff --git a/src/routes/Textmenge.tsx b/src/routes/Textmenge.tsx index bb6f7f8..4330dfb 100644 --- a/src/routes/Textmenge.tsx +++ b/src/routes/Textmenge.tsx @@ -1,7 +1,6 @@ import { useEffect, useMemo, useState } from 'react'; import { fetchFormats, fetchSettings, generatePreview } from '../lib/api'; import type { Format, PublicSettings, PreviewDoc, PreviewOverflow } from '../lib/api'; -import PreviewPanel from '../components/PreviewPanel'; /** Schriftarten wie im Konfigurator/manuellen Druck. */ const SCHRIFTEN = [ @@ -10,6 +9,19 @@ const SCHRIFTEN = [ { key: 'ellie', name: 'Ellie' }, ]; +/** Kugelschreiber-Optik (identisch zum PreviewPanel): blaue Tinte, dezenter Wobble. */ +let inkSeq = 0; +const inkify = (svg: string): string => { + if (typeof svg !== 'string') return svg; + const id = `skink${inkSeq++}`; + return svg + .replace(/stroke="#0{3,6}"/gi, 'stroke="#1a2a6c" stroke-opacity="0.95"') + .replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"') + .replace(/(]*>)/i, `$1`) + .replace(/(]*fill="#FFFFFF"[^>]*\/>)/i, `$1`) + .replace(/<\/svg>\s*$/i, ''); +}; + /** Stabile anonyme Kennung fürs Vorschau-Kontingent (wie im Konfigurator). */ function clientId(): string { const KEY = 'skrift.client'; @@ -32,24 +44,23 @@ function overflowMeldung(overflow?: PreviewOverflow[]) { } /** - * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe mit denselben - * Möglichkeiten wie sonst (Tabulator, gesperrte Zeichen, [[seitenumbruch]]). Über - * „Vorschau generieren" wird das Schriftstück gerendert (Kugelschreiber-Optik) – - * so sieht man, ob der Text passt, sonst kommt eine Fehlermeldung. + * Textmengen-Tool (/textmenge): Format- und Schriftwahl, Texteingabe (Tabulator, + * gesperrte Zeichen) und „Vorschau generieren" → rendert EIN Schriftstück + * (Kugelschreiber-Optik). Passt der Text nicht auf eine Seite, kommt die Fehlermeldung. + * Bewusst einseitig: kein Seitenumbruch. */ export default function Textmenge() { const [formate, setFormate] = useState([]); const [settings, setSettings] = useState(null); const [format, setFormat] = useState('a4'); const [font, setFont] = useState('tilda'); + const [realistic, setRealistic] = useState(true); const [text, setText] = useState(''); const [hinweis, setHinweis] = useState(''); - const [docs, setDocs] = useState([]); + const [doc, setDoc] = useState(null); const [laedt, setLaedt] = useState(false); const [fehler, setFehler] = useState(null); - const [verbleibend, setVerbleibend] = useState(0); - const [maximal, setMaximal] = useState(0); useEffect(() => { fetchFormats() @@ -82,14 +93,14 @@ export default function Textmenge() { return v.replace(verbotenRe, ''); }; - // Neuer Text/Format/Schrift → alte Vorschau verwerfen (nicht live neu laden). + // Änderung an Eingaben → alte Vorschau verwerfen. useEffect(() => { - setDocs([]); + setDoc(null); setFehler(null); - }, [text, font, format]); + }, [text, font, format, realistic]); async function generieren() { - if (!text.trim()) return; + if (!text.trim() || laedt) return; setLaedt(true); setFehler(null); try { @@ -98,18 +109,17 @@ export default function Textmenge() { text, font, format, + realistic, entries: [{}], }); - setVerbleibend(ergebnis.remaining ?? 0); - setMaximal(ergebnis.limit ?? 0); if (ergebnis.has_overflow) { - setDocs([]); + setDoc(null); setFehler(overflowMeldung(ergebnis.overflow)); } else { - setDocs(ergebnis.docs ?? []); + setDoc((ergebnis.docs ?? []).find((d) => d.art === 'brief') ?? ergebnis.docs?.[0] ?? null); } } catch (e) { - setDocs([]); + setDoc(null); setFehler((e as Error)?.message || 'Vorschau fehlgeschlagen.'); } finally { setLaedt(false); @@ -117,15 +127,15 @@ export default function Textmenge() { } return ( -
-

Textmenge prüfen

-

- Text eingeben, Format und Schrift wählen und eine Vorschau erzeugen – so siehst du, ob der Text auf ein Schriftstück passt. +

+

Textmenge prüfen

+

+ Text eingeben, Format und Schrift wählen, dann eine Vorschau erzeugen. So siehst du, ob der Text auf ein Schriftstück passt.

-
-
+
+
+