Maximilian Stubhan
00df973824
Opening the org chart PDF preview locked up the browser tab. The measurement that fits each sheet to the page fed itself: the effect listed onFaktor in its dependencies, and onFaktor was an arrow function created fresh on every render, so the effect re-ran after every render. It measured, reported the scale, and the report called setState with a newly built object every time — new object, so React saw a change, re-rendered, and the effect ran again. Measure, render, measure, until React gave up with "Maximum update depth exceeded". Two changes, and the mutation test says either one closes the loop on its own: the callback now lives in a ref so the effect depends only on the sheet identity, and the reducer returns the previous state unchanged when the scale has not moved. Both are worth keeping — the ref stops the effect from re-running, the guard stops pointless renders. This shipped broken, and the reason it shipped is in the test file now. Every element in jsdom is zero pixels, so the measurement bailed out on its first line and the feedback never started; nine tests covering the selection, the page count and the hierarchy all passed against a component that froze on contact with a real browser. The new test gives the elements a size, and fails with the exact error a user hits. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
610 lines
25 KiB
TypeScript
610 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronRight, Printer } from "lucide-react";
|
|
import Link from "next/link";
|
|
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
import { Button } from "@/components/ui/Button";
|
|
import { fmtDate } from "@/lib/format";
|
|
import type { PrintModel, PrintPerson, PrintUnit } from "@/lib/orgchart-print";
|
|
|
|
// Auswahl, dann Vorschau, dann Papier.
|
|
//
|
|
// Drei Entscheidungen prägen das hier:
|
|
//
|
|
// **Erstens wird gefragt, bevor gedruckt wird.** Ein Organigramm mit 810
|
|
// Personen auf Papier ist fast nie das, was jemand braucht — meist geht es um
|
|
// einen Bereich, oder um die oberen zwei Ebenen für eine Besprechung. Wer
|
|
// alles bekommt, druckt vierzig Blätter und wirft achtunddreissig weg.
|
|
//
|
|
// **Zweitens wird hierarchisch gezeichnet, nicht aufgelistet.** Kästen mit
|
|
// Verbindungslinien zeigen die Über- und Unterordnung; eine Spaltenliste
|
|
// zeigt sie nicht, egal wie sauber sie gesetzt ist. Die Linien entstehen aus
|
|
// Rahmen von Pseudo-Elementen — damit sind sie im PDF Vektoren und bleiben
|
|
// beim Hineinzoomen scharf.
|
|
//
|
|
// **Drittens breitet sich nur eine Ebene waagrecht aus.** Ein Baum, der auf
|
|
// jeder Stufe in die Breite geht, wächst exponentiell: sechs Bereiche mit je
|
|
// drei Abteilungen sind achtzehn Kästen nebeneinander, und quer über ein A4
|
|
// bleiben davon zwei Millimeter je Kasten — die erste Fassung lief genau
|
|
// deshalb über den Blattrand hinaus. Jetzt stehen die Bereiche in einer
|
|
// Reihe, und alles darunter hängt längs an einer Linie: die Breite ist die
|
|
// Zahl der Bereiche, unabhängig von der Tiefe. Was dann immer noch übersteht,
|
|
// wird als Ganzes so weit verkleinert, bis es aufs Blatt passt.
|
|
|
|
type Tiefe = "bereich" | "abteilung" | "team" | "personen";
|
|
|
|
const TIEFEN: { wert: Tiefe; label: string; hinweis: string }[] = [
|
|
{ wert: "bereich", label: "Bereiche", hinweis: "Gesellschaft und Bereiche — ein Blatt" },
|
|
{ wert: "abteilung", label: "bis Abteilung", hinweis: "eine Ebene tiefer, noch immer ein Blatt" },
|
|
{ wert: "team", label: "bis Team", hinweis: "je Bereich ein Blatt, ohne Namen" },
|
|
{ wert: "personen", label: "mit Personen", hinweis: "je Abteilung ein Blatt, mit allen Namen" },
|
|
];
|
|
|
|
type Format = "a4" | "a3";
|
|
// Die Satzfläche ist die Blattgrösse abzüglich der Ränder aus @page, ein
|
|
// wenig knapper gerechnet. Die Vorschau bekommt genau diese Masse fest
|
|
// zugewiesen — dadurch ist das, was am Bildschirm zu sehen ist, dasselbe, was
|
|
// aufs Papier passt, und nicht bloss ungefähr.
|
|
const FORMATE: Record<Format, { label: string; css: string; blatt: string; satzBreite: string; satzHoehe: string }> = {
|
|
a4: { label: "A4 quer", css: "A4 landscape", blatt: "297mm", satzBreite: "268mm", satzHoehe: "182mm" },
|
|
a3: { label: "A3 quer", css: "A3 landscape", blatt: "420mm", satzBreite: "390mm", satzHoehe: "269mm" },
|
|
};
|
|
|
|
/** Unter diesem Massstab wird es auf A4 mühsam — dann lieber A3. */
|
|
const LESBAR = 0.55;
|
|
|
|
type Seite = {
|
|
key: string;
|
|
titel: string;
|
|
unterzeile: string;
|
|
wurzel: PrintUnit;
|
|
/** Nur auf der Übersicht: die gewählten Bereiche statt aller Kinder. */
|
|
kinder?: PrintUnit[];
|
|
/** Wie viele Ebenen unter der Wurzel gezeichnet werden. */
|
|
ebenen: number;
|
|
mitPersonen: boolean;
|
|
};
|
|
|
|
function seitenBauen(model: PrintModel, bereiche: PrintUnit[], tiefe: Tiefe, asOf: string): Seite[] {
|
|
const stand = `Stand ${fmtDate(asOf)}`;
|
|
const seiten: Seite[] = [];
|
|
|
|
if (model.root) {
|
|
seiten.push({
|
|
key: "uebersicht",
|
|
titel: model.root.name,
|
|
unterzeile: `Organigramm · ${stand} · ${model.totals.people} Personen`,
|
|
wurzel: model.root,
|
|
kinder: bereiche,
|
|
// Bei „bis Abteilung" ist die Übersicht das ganze Ergebnis. Sonst folgen
|
|
// Detailblätter, und dann bleibt sie eine reine Bereichsübersicht.
|
|
ebenen: tiefe === "abteilung" ? 2 : 1,
|
|
mitPersonen: false,
|
|
});
|
|
}
|
|
|
|
if (tiefe === "team") {
|
|
for (const b of bereiche) {
|
|
seiten.push({
|
|
key: b.id,
|
|
titel: b.name,
|
|
unterzeile: `${b.totalPeople} Personen · ${stand}`,
|
|
wurzel: b,
|
|
ebenen: 2,
|
|
mitPersonen: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
if (tiefe === "personen") {
|
|
for (const b of bereiche) {
|
|
// Wer unmittelbar im Bereich sitzt, hätte sonst kein Blatt — die
|
|
// Leitung steht auf der Übersicht, die übrigen nirgends.
|
|
if (b.members.length > 0) {
|
|
seiten.push({
|
|
key: `${b.id}-direkt`,
|
|
titel: b.name,
|
|
unterzeile: `Bereichsleitung und Stab · ${stand}`,
|
|
wurzel: b,
|
|
ebenen: 0,
|
|
mitPersonen: true,
|
|
});
|
|
}
|
|
for (const a of b.children) {
|
|
seiten.push({
|
|
key: a.id,
|
|
titel: `${b.name} · ${a.name}`,
|
|
unterzeile: `${a.totalPeople} Personen · ${stand}`,
|
|
wurzel: a,
|
|
ebenen: 1,
|
|
mitPersonen: true,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
return seiten;
|
|
}
|
|
|
|
export function PrintChart({ model, asOf, today }: { model: PrintModel; asOf: string; today: string }) {
|
|
const [format, setFormat] = useState<Format>("a4");
|
|
const [tiefe, setTiefe] = useState<Tiefe>("team");
|
|
const [gewaehlt, setGewaehlt] = useState<Set<string>>(() => new Set(model.divisions.map((d) => d.id)));
|
|
const [schritt, setSchritt] = useState<"auswahl" | "vorschau">("auswahl");
|
|
|
|
const bereiche = useMemo(() => model.divisions.filter((d) => gewaehlt.has(d.id)), [model.divisions, gewaehlt]);
|
|
const seiten = useMemo(() => seitenBauen(model, bereiche, tiefe, asOf), [model, bereiche, tiefe, asOf]);
|
|
|
|
// Der kleinste Massstab aller Blätter — daran hängt der Hinweis auf A3.
|
|
//
|
|
// Die gemeldeten Werte tragen die Auswahl mit, für die sie gemessen wurden:
|
|
// ändert sie sich, sind die alten Werte nicht mehr gültig und werden
|
|
// verworfen, sobald das erste Blatt der neuen Auswahl meldet. Das erspart
|
|
// einen Effekt, der beim Wechsel aufräumt — und damit eine Renderrunde,
|
|
// in der noch der Hinweis der vorherigen Auswahl stünde.
|
|
const signatur = `${format}|${tiefe}|${[...gewaehlt].sort().join(",")}`;
|
|
const [gemessen, setGemessen] = useState<{ signatur: string; werte: Record<string, number> }>({ signatur, werte: {} });
|
|
const meldeMassstab = useCallback(
|
|
(key: string, faktor: number) => {
|
|
setGemessen((prev) => {
|
|
// Unverändert heisst unverändert: denselben Zustand zurückgeben, nicht
|
|
// ein gleich aussehendes neues Objekt. Ein neues Objekt zählt für React
|
|
// als Änderung und löst ein Rendern aus — und da das Rendern die
|
|
// Messung anstösst, die wieder hier landet, dreht sich das ohne Ende.
|
|
// Genau daran ist die Vorschau eingefroren.
|
|
if (prev.signatur === signatur && prev.werte[key] === faktor) return prev;
|
|
return prev.signatur === signatur
|
|
? { signatur, werte: { ...prev.werte, [key]: faktor } }
|
|
: { signatur, werte: { [key]: faktor } };
|
|
});
|
|
},
|
|
[signatur]
|
|
);
|
|
const engste = Math.min(1, ...Object.values(gemessen.signatur === signatur ? gemessen.werte : {}));
|
|
|
|
function umschalten(id: string) {
|
|
setGewaehlt((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<style>{`
|
|
@page { size: ${FORMATE[format].css}; margin: 12mm 14mm 14mm; }
|
|
@media print {
|
|
html, body { background: #fff; }
|
|
.nur-bildschirm { display: none !important; }
|
|
.blatt {
|
|
box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
|
|
margin: 0 !important; width: auto !important; padding: 0 !important;
|
|
break-after: page;
|
|
}
|
|
.blatt:last-child { break-after: auto; }
|
|
/* Die Satzfläche behält ihre Masse — der Massstab wurde für genau
|
|
diese berechnet. Nur der Rand fällt weg, den setzt @page. */
|
|
.satz { margin: 0 !important; }
|
|
}
|
|
|
|
/* Eine Reihe: waagrechte Geschwister mit Winkeln nach oben. Das erste
|
|
und das letzte Kind lassen ihre Aussenseite weg — zusammen ergibt
|
|
das eine durchgehende Querlinie ohne ein einziges Hilfselement. */
|
|
ul.reihe {
|
|
position: relative; display: flex; justify-content: center;
|
|
list-style: none; margin: 0; padding: 18px 0 0;
|
|
}
|
|
ul.reihe::before {
|
|
content: ""; position: absolute; top: 0; left: 50%;
|
|
height: 18px; border-left: 1px solid var(--color-border);
|
|
}
|
|
ul.reihe > li { position: relative; width: var(--spalte); padding: 18px 6px 0; }
|
|
ul.reihe > li::before, ul.reihe > li::after {
|
|
content: ""; position: absolute; top: 0; width: 50%; height: 18px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
ul.reihe > li::before { right: 50%; }
|
|
ul.reihe > li::after { left: 50%; border-left: 1px solid var(--color-border); }
|
|
ul.reihe > li:first-child::before { border-top: 0; }
|
|
ul.reihe > li:last-child::after { border-top: 0; }
|
|
|
|
/* Ein Stapel: längs an einer Linie, mit Winkel in jeden Kasten. Kostet
|
|
Höhe statt Breite — und Höhe ist auf einem Querformat übrig. */
|
|
ul.stapel { list-style: none; margin: 0; padding: 0; text-align: left; }
|
|
ul.stapel > li { position: relative; padding: 8px 0 0 20px; }
|
|
ul.stapel > li::before {
|
|
content: ""; position: absolute; left: 9px; top: 0; bottom: 0;
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
ul.stapel > li:last-child::before { bottom: auto; height: 22px; }
|
|
ul.stapel > li::after {
|
|
content: ""; position: absolute; left: 9px; top: 22px; width: 11px;
|
|
border-top: 1px solid var(--color-border);
|
|
}
|
|
`}</style>
|
|
|
|
{/* ── Auswahl ─────────────────────────────────────────── */}
|
|
<section className="nur-bildschirm rounded border border-border bg-white p-5">
|
|
<div className="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-sm font-bold text-ink">Was soll aufs Papier?</h2>
|
|
<p className="mt-0.5 max-w-prose text-sm text-ink-muted">
|
|
Das vollständige Organigramm sind {model.totals.people} Personen. Gedruckt wird selten alles — hier steht,
|
|
wie tief und welche Bereiche.
|
|
</p>
|
|
</div>
|
|
<p className="whitespace-nowrap text-sm text-ink-muted">
|
|
Stand {fmtDate(asOf)}
|
|
{asOf !== today && " · abweichender Stichtag"}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-muted">Tiefe</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{TIEFEN.map((t) => (
|
|
<button
|
|
key={t.wert}
|
|
type="button"
|
|
onClick={() => setTiefe(t.wert)}
|
|
aria-pressed={tiefe === t.wert}
|
|
className={`rounded-md border px-3 py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
|
|
tiefe === t.wert ? "border-brand-500 bg-brand-50" : "border-border hover:bg-surface"
|
|
}`}
|
|
>
|
|
<span className="block text-sm font-semibold text-ink">{t.label}</span>
|
|
<span className="block text-xs text-ink-muted">{t.hinweis}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5">
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<p className="text-xs font-bold uppercase tracking-wide text-ink-muted">
|
|
Bereiche ({gewaehlt.size} von {model.divisions.length})
|
|
</p>
|
|
<div className="flex gap-3 text-xs">
|
|
<button
|
|
type="button"
|
|
onClick={() => setGewaehlt(new Set(model.divisions.map((d) => d.id)))}
|
|
className="rounded font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
|
>
|
|
Alle
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setGewaehlt(new Set())}
|
|
className="rounded font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
|
>
|
|
Keine
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
|
{model.divisions.map((d) => (
|
|
<label
|
|
key={d.id}
|
|
className={`flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 ${
|
|
gewaehlt.has(d.id) ? "border-brand-500 bg-brand-50" : "border-border"
|
|
}`}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={gewaehlt.has(d.id)}
|
|
onChange={() => umschalten(d.id)}
|
|
className="mt-0.5 h-4 w-4 rounded border-border text-brand-600"
|
|
/>
|
|
<span>
|
|
<span className="block text-sm font-semibold text-ink">{d.name}</span>
|
|
<span className="block text-xs text-ink-muted">
|
|
{d.totalPeople} Personen · {d.children.length} Abteilungen
|
|
</span>
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-border-subtle pt-4">
|
|
<p className="text-sm text-ink-muted">
|
|
{gewaehlt.size === 0 ? (
|
|
<span className="text-danger-text">Kein Bereich gewählt — es bliebe nur die Übersicht.</span>
|
|
) : (
|
|
<>
|
|
Ergibt <strong className="text-ink">{seiten.length}</strong> {seiten.length === 1 ? "Seite" : "Seiten"}
|
|
</>
|
|
)}
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<Link
|
|
href="/orgchart"
|
|
className="rounded-md border border-border px-3 py-2 text-sm font-semibold text-ink hover:bg-brand-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
|
|
>
|
|
Zurück
|
|
</Link>
|
|
<Button onClick={() => setSchritt("vorschau")}>
|
|
Vorschau <ChevronRight className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{schritt === "vorschau" && (
|
|
<>
|
|
<div className="nur-bildschirm flex flex-wrap items-center justify-between gap-3">
|
|
<p className="text-sm text-ink-muted">
|
|
{seiten.length} {seiten.length === 1 ? "Seite" : "Seiten"} · so kommt es aus dem Drucker
|
|
</p>
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex rounded-md border border-border p-0.5">
|
|
{(Object.keys(FORMATE) as Format[]).map((f) => (
|
|
<button
|
|
key={f}
|
|
type="button"
|
|
onClick={() => setFormat(f)}
|
|
aria-pressed={format === f}
|
|
className={`rounded px-3 py-1.5 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
|
|
format === f ? "bg-brand-500 text-white" : "text-ink-muted hover:bg-surface"
|
|
}`}
|
|
>
|
|
{FORMATE[f].label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<Button onClick={() => window.print()}>
|
|
<Printer className="h-4 w-4" />
|
|
Als PDF speichern
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{format === "a4" && engste < LESBAR && (
|
|
<p className="nur-bildschirm rounded border border-warning-text/30 bg-warning-bg px-3 py-2 text-sm text-warning-text">
|
|
Ein Blatt musste auf {Math.round(engste * 100)} % verkleinert werden, damit es passt — auf A4 kaum noch
|
|
lesbar. A3 wählen oder weniger Bereiche.
|
|
</p>
|
|
)}
|
|
|
|
<p className="nur-bildschirm max-w-prose text-xs leading-relaxed text-ink-muted">
|
|
Im Druckdialog „Als PDF speichern“ wählen. Hintergrundgrafiken müssen dort eingeschaltet sein,
|
|
sonst fehlen die farbigen Kopfzeilen — in Chrome unter „Weitere Einstellungen“.
|
|
</p>
|
|
|
|
<div className="flex flex-col items-center gap-8">
|
|
{seiten.map((seite, i) => (
|
|
<Blatt key={seite.key} format={format}>
|
|
<Kopf
|
|
titel={seite.titel}
|
|
unterzeile={seite.unterzeile}
|
|
seite={i === 0 ? "Übersicht" : `Seite ${i + 1} von ${seiten.length}`}
|
|
/>
|
|
<Skaliert kennung={`${seite.key}|${format}|${tiefe}`} onFaktor={(f) => meldeMassstab(seite.key, f)}>
|
|
<Chart seite={seite} />
|
|
</Skaliert>
|
|
</Blatt>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Blatt({ children, format }: { children: React.ReactNode; format: Format }) {
|
|
const { blatt, satzBreite, satzHoehe } = FORMATE[format];
|
|
return (
|
|
<div className="blatt rounded border border-border bg-white shadow-[var(--shadow-card)]" style={{ width: blatt }}>
|
|
<div className="satz flex flex-col" style={{ width: satzBreite, height: satzHoehe, margin: "12mm 14mm 14mm" }}>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Kopf({ titel, unterzeile, seite }: { titel: string; unterzeile: string; seite: string }) {
|
|
return (
|
|
<header className="mb-5 flex shrink-0 items-end justify-between border-b-2 border-brand-500 pb-2">
|
|
<div>
|
|
<h1 className="text-lg font-extrabold tracking-tight text-ink">{titel}</h1>
|
|
<p className="mt-0.5 text-xs text-ink-muted">{unterzeile}</p>
|
|
</div>
|
|
<p className="whitespace-nowrap text-xs font-semibold text-ink-muted">{seite}</p>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Verkleinert den Inhalt so weit, dass er in die Satzfläche passt.
|
|
*
|
|
* Ein Organigramm hat keine Grösse, die man vorher kennt — sie hängt daran,
|
|
* wie viele Bereiche jemand angehakt hat und wie tief. Statt zu raten wird
|
|
* gemessen: die natürliche Grösse steht im Layout, die verfügbare auch, und
|
|
* `transform: scale` ändert nur die Darstellung, nicht das Layout. Damit ist
|
|
* die Messung stabil und läuft nicht gegen sich selbst.
|
|
*/
|
|
function Skaliert({
|
|
kennung,
|
|
onFaktor,
|
|
children,
|
|
}: {
|
|
kennung: string;
|
|
onFaktor: (faktor: number) => void;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const rahmen = useRef<HTMLDivElement>(null);
|
|
const inhalt = useRef<HTMLDivElement>(null);
|
|
const [faktor, setFaktor] = useState(1);
|
|
const [versatz, setVersatz] = useState(0);
|
|
|
|
// Die Meldefunktion wird beim Aufruf frisch erzeugt und ist daher bei jedem
|
|
// Rendern eine andere. Stünde sie in den Abhängigkeiten, liefe der Effekt
|
|
// nach jedem Rendern erneut — samt Messung, die das nächste Rendern
|
|
// auslöst. Über eine Referenz bleibt der aktuelle Stand erreichbar, ohne
|
|
// dass der Effekt daran hängt.
|
|
const melden = useRef(onFaktor);
|
|
useEffect(() => {
|
|
melden.current = onFaktor;
|
|
});
|
|
|
|
useLayoutEffect(() => {
|
|
const aussen = rahmen.current;
|
|
const innen = inhalt.current;
|
|
if (!aussen || !innen) return;
|
|
|
|
function messen() {
|
|
if (!aussen || !innen) return;
|
|
const breite = aussen.clientWidth;
|
|
const hoehe = aussen.clientHeight;
|
|
const noetigeBreite = innen.offsetWidth;
|
|
const noetigeHoehe = innen.offsetHeight;
|
|
if (!breite || !hoehe || !noetigeBreite || !noetigeHoehe) return;
|
|
const f = Math.min(1, breite / noetigeBreite, hoehe / noetigeHoehe);
|
|
setFaktor(f);
|
|
// Waagrecht mittig: die Verkleinerung geht von links oben aus, sonst
|
|
// klebt ein schmales Diagramm am linken Blattrand.
|
|
setVersatz(Math.max(0, (breite - noetigeBreite * f) / 2));
|
|
melden.current(f);
|
|
}
|
|
|
|
messen();
|
|
// Schriften kommen nach dem ersten Layout — bis dahin sind alle Kästen in
|
|
// der Ersatzschrift gesetzt und damit anders breit.
|
|
void document.fonts?.ready.then(messen);
|
|
const beobachter = new ResizeObserver(messen);
|
|
beobachter.observe(aussen);
|
|
return () => beobachter.disconnect();
|
|
}, [kennung]);
|
|
|
|
return (
|
|
<div ref={rahmen} className="min-h-0 flex-1 overflow-hidden">
|
|
<div
|
|
ref={inhalt}
|
|
style={{
|
|
width: "max-content",
|
|
transform: `scale(${faktor})`,
|
|
transformOrigin: "top left",
|
|
marginLeft: versatz,
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Chart({ seite }: { seite: Seite }) {
|
|
const kinder = seite.kinder ?? seite.wurzel.children;
|
|
const zeigeKinder = seite.ebenen > 0 && kinder.length > 0;
|
|
|
|
return (
|
|
// Feste Spaltenbreite: dadurch sitzt jeder Kasten mittig unter seiner
|
|
// Verbindungslinie, und die Gesamtbreite ist die Zahl der Spalten mal
|
|
// dieser Breite — berechenbar, statt vom längsten Namen abzuhängen.
|
|
<div className="inline-block text-center" style={{ ["--spalte" as string]: "13rem" }}>
|
|
<div className="mx-auto w-[15rem]">
|
|
<Kasten unit={seite.wurzel} mitPersonen={seite.mitPersonen} />
|
|
</div>
|
|
{zeigeKinder && (
|
|
<ul className="reihe">
|
|
{kinder.map((k) => (
|
|
<li key={k.id}>
|
|
<Kasten unit={k} mitPersonen={seite.mitPersonen} />
|
|
<Stapel units={k.children} ebenen={seite.ebenen - 1} mitPersonen={seite.mitPersonen} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Stapel({ units, ebenen, mitPersonen }: { units: PrintUnit[]; ebenen: number; mitPersonen: boolean }) {
|
|
if (ebenen <= 0 || units.length === 0) return null;
|
|
return (
|
|
<ul className="stapel">
|
|
{units.map((u) => (
|
|
<li key={u.id}>
|
|
<Kasten unit={u} mitPersonen={mitPersonen} />
|
|
<Stapel units={u.children} ebenen={ebenen - 1} mitPersonen={mitPersonen} />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
const KOPFFARBE: Record<PrintUnit["unitType"], string> = {
|
|
// Nach unten hin blasser: so bleibt die Rangfolge auch auf dem
|
|
// Schwarzweissdrucker sichtbar, auf dem die meisten Ausdrucke landen.
|
|
Gesellschaft: "bg-brand-500 text-white",
|
|
Bereich: "bg-brand-100 text-ink",
|
|
Abteilung: "bg-brand-50 text-ink",
|
|
Team: "bg-surface text-ink",
|
|
};
|
|
|
|
function Kasten({ unit, mitPersonen }: { unit: PrintUnit; mitPersonen: boolean }) {
|
|
const offen = unit.vacancies.filter((v) => !v.isChief);
|
|
// Lange Namenslisten in zwei Spalten: sonst wächst der Kasten in die Höhe,
|
|
// und die Höhe ist es, die den Massstab drückt.
|
|
const zweispaltig = mitPersonen && unit.members.length > 8;
|
|
|
|
return (
|
|
<div className="w-full overflow-hidden rounded border border-border text-left">
|
|
<div className={`px-2 py-1 ${KOPFFARBE[unit.unitType]}`}>
|
|
<p className="text-[11px] font-bold leading-tight">{unit.name}</p>
|
|
<p
|
|
className={`text-[9px] uppercase tracking-wide ${
|
|
unit.unitType === "Gesellschaft" ? "text-white/75" : "text-ink-muted"
|
|
}`}
|
|
>
|
|
{unit.unitType} · {unit.totalPeople}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="px-2 py-1">
|
|
{unit.chief ? (
|
|
<PersonZeile p={unit.chief} leitung />
|
|
) : (
|
|
<p className="text-[10px] italic text-ink-muted">Leitung unbesetzt</p>
|
|
)}
|
|
|
|
{mitPersonen && unit.members.length > 0 && (
|
|
<div className={`mt-1 border-t border-border-subtle pt-1 ${zweispaltig ? "columns-2 gap-2" : ""}`}>
|
|
{unit.members.map((p) => (
|
|
<div key={p.id} className="break-inside-avoid">
|
|
<PersonZeile p={p} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{mitPersonen &&
|
|
offen.map((v) => (
|
|
<p key={v.positionNumber} className="text-[10px] italic text-ink-muted">
|
|
offen · {v.jobTitle}
|
|
</p>
|
|
))}
|
|
|
|
{!mitPersonen && unit.members.length > 0 && (
|
|
<p className="text-[10px] text-ink-muted">
|
|
{unit.members.length} {unit.members.length === 1 ? "Person" : "Personen"}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PersonZeile({ p, leitung }: { p: PrintPerson; leitung?: boolean }) {
|
|
return (
|
|
<p className="text-[10px] leading-tight">
|
|
<span className={leitung ? "font-bold text-ink" : "text-ink"}>{p.name}</span>
|
|
{p.absent && <span className="text-ink-muted"> · abwesend</span>}
|
|
<br />
|
|
<span className="text-ink-muted">{p.jobTitle}</span>
|
|
</p>
|
|
);
|
|
}
|