feat(stammbaum): Desktop-Ansicht passt den ganzen Baum ein + höhere Zeichenfläche
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 <noreply@anthropic.com>
This commit is contained in:
@@ -259,16 +259,27 @@ export default function StammbaumPage() {
|
|||||||
return () => observer.disconnect()
|
return () => observer.disconnect()
|
||||||
}, [hasRoot])
|
}, [hasRoot])
|
||||||
|
|
||||||
/* ── Ansicht (Zoom/Position): Wurzelkarte links, vertikal zentriert —
|
/* ── Ansicht (Zoom/Position) ──
|
||||||
so sind die Eltern auch auf dem Smartphone sofort sichtbar. ── */
|
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<View | null>(() => {
|
const defaultView = useMemo<View | null>(() => {
|
||||||
if (!size) return null
|
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 {
|
return {
|
||||||
zoom,
|
zoom,
|
||||||
translate: { x: (CARD_W / 2) * zoom + 24, y: size.h / 2 },
|
translate: { x: (CARD_W / 2) * zoom + 24, y: size.h / 2 },
|
||||||
}
|
}
|
||||||
}, [size])
|
}, [size, datum])
|
||||||
|
|
||||||
const [viewOverride, setViewOverride] = useState<(View & { forId: string }) | null>(null)
|
const [viewOverride, setViewOverride] = useState<(View & { forId: string }) | null>(null)
|
||||||
const view = viewOverride && viewOverride.forId === id ? viewOverride : defaultView
|
const view = viewOverride && viewOverride.forId === id ? viewOverride : defaultView
|
||||||
|
|||||||
@@ -171,7 +171,7 @@
|
|||||||
.stammbaum-canvas {
|
.stammbaum-canvas {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
height: clamp(18rem, 62dvh, 46rem);
|
height: clamp(18rem, 72dvh, 58rem);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
border-radius: 0.6rem;
|
border-radius: 0.6rem;
|
||||||
background:
|
background:
|
||||||
|
|||||||
Reference in New Issue
Block a user