From 2befe53df944fc07d3bddd91864e808d3fd8b315 Mon Sep 17 00:00:00 2001 From: Gulum Date: Mon, 22 Jun 2026 16:26:50 +0200 Subject: [PATCH] =?UTF-8?q?feat(stammbaum):=20Desktop-Ansicht=20passt=20de?= =?UTF-8?q?n=20ganzen=20Baum=20ein=20+=20h=C3=B6here=20Zeichenfl=C3=A4che?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Auf dem Desktop wurde der Baum bei festem Zoom 1 rechts abgeschnitten (man sah nur 1–2 Generationen, der Rest lag außerhalb) und viel Fläche blieb leer. Die Standard-Ansicht passt jetzt den gesamten geladenen Baum ein — gedeckelt auf Zoom 1, damit Karten bei kleinen Bäumen nicht vergrößert/unscharf werden. Mobil bleibt es bei „Wurzel links + Pan" (sonst würden die Karten winzig). Zeichen- fläche von 62dvh auf 72dvh erhöht (füllt die Desktop-Höhe besser). Co-Authored-By: Claude Opus 4.8 --- .../src/pages/StammbaumPage.tsx | 19 +++++++++++++++---- gerbil-manager-web/src/pages/stammbaum.css | 2 +- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/gerbil-manager-web/src/pages/StammbaumPage.tsx b/gerbil-manager-web/src/pages/StammbaumPage.tsx index a5e7609..d1d0833 100644 --- a/gerbil-manager-web/src/pages/StammbaumPage.tsx +++ b/gerbil-manager-web/src/pages/StammbaumPage.tsx @@ -259,16 +259,27 @@ export default function StammbaumPage() { return () => observer.disconnect() }, [hasRoot]) - /* ── Ansicht (Zoom/Position): Wurzelkarte links, vertikal zentriert — - so sind die Eltern auch auf dem Smartphone sofort sichtbar. ── */ + /* ── Ansicht (Zoom/Position) ── + Desktop: den gesamten geladenen Baum einpassen, aber nie über 1 + vergrößern (Karten bleiben lesbar). So sind alle geladenen Generationen + sofort sichtbar und die Fläche wird genutzt, statt rechte Generationen + abzuschneiden. Mobil: Wurzel links, vertikal zentriert (Pan), damit die + Karten auf dem kleinen Schirm nicht winzig werden. ── */ const defaultView = useMemo(() => { if (!size) return null - const zoom = size.w < 520 ? 0.8 : 1 + const isPhone = size.w < 520 + let zoom = isPhone ? 0.8 : 1 + if (!isPhone && datum) { + const extent = datumExtent(datum) + const width = extent.depth * NODE_X + CARD_W + 32 + const height = extent.leaves * NODE_Y + 32 + zoom = clamp(Math.min(1, size.w / width, size.h / height), ZOOM_MIN, ZOOM_MAX) + } return { zoom, translate: { x: (CARD_W / 2) * zoom + 24, y: size.h / 2 }, } - }, [size]) + }, [size, datum]) const [viewOverride, setViewOverride] = useState<(View & { forId: string }) | null>(null) const view = viewOverride && viewOverride.forId === id ? viewOverride : defaultView diff --git a/gerbil-manager-web/src/pages/stammbaum.css b/gerbil-manager-web/src/pages/stammbaum.css index a7a56ef..ae4ff17 100644 --- a/gerbil-manager-web/src/pages/stammbaum.css +++ b/gerbil-manager-web/src/pages/stammbaum.css @@ -171,7 +171,7 @@ .stammbaum-canvas { flex: 1 1 auto; min-width: 0; - height: clamp(18rem, 62dvh, 46rem); + height: clamp(18rem, 72dvh, 58rem); border: 1px solid var(--color-border); border-radius: 0.6rem; background: