mi/werkbaum
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

frontend: Vertikale Ansicht — Abzweige treffen die Knotenmitte

Browse Source 
In der zentrierten vertikalen Darstellung sind all-of-Zwischenknoten selbst
vertikal mittig zu ihrem Teilbaum. Der Abzweig war jedoch fest auf 23 px
verankert und lief daher bei diesen Knoten ins Leere. Abzweig und die Enden
der Sammelleiste zielen für all-of-Kinder nun auf 50 % (Knotenmitte);
Blatt- und Any-of-Kinder bleiben bei 23 px. Verifiziert: alle Abzweige
treffen ihren Knoten.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-21 12:30:07 +02:00
co-authored by Claude Opus 4.8
parent 650be7c0a7
commit 63c9e79a9d
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+9 -2
View File
@@ -432,10 +432,17 @@
left:0;top:50%;width:9px;height:0; left:0;top:50%;width:9px;height:0;
border-left:0;border-top:2px solid var(--line); border-left:0;border-top:2px solid var(--line);
} }
/* Sammelleiste nur von erster bis letzter Kindmitte (23-px-Offset); /* Abzweig trifft die tatsächliche Knotenmitte des Kindes:
mittlere Kinder tragen die volle Höhe (Basis), Rand-Kinder halbieren. */ Blatt- und Any-of-Kinder sitzen oben (Offset 23 px), all-of-Zwischenknoten
sind selbst vertikal zentriert (50 %). Ohne diese Unterscheidung liefen die
Linien zu zentrierten Zwischenknoten ins Leere. Die Enden der Sammelleiste
folgen demselben Abzweigpunkt des jeweiligen Rand-Kindes. */
.tree.vertical li.has-and>ul.and>li:first-child::after{top:23px;height:calc(100% - 23px)} .tree.vertical li.has-and>ul.and>li:first-child::after{top:23px;height:calc(100% - 23px)}
.tree.vertical li.has-and>ul.and>li:only-child::after{border:0} .tree.vertical li.has-and>ul.and>li:only-child::after{border:0}
.tree.vertical li.has-and>ul.and>li.has-and::before{top:50%}
.tree.vertical li.has-and>ul.and>li.has-and:first-child::after{top:50%;height:50%}
.tree.vertical li.has-and>ul.and>li.has-and:last-child::after{top:0;height:50%}
.tree.vertical li.has-and>ul.and>li.has-and:only-child::after{border:0}
/* Kompakt: auch All-of läuft nach unten (spart Breite) — kein Rechts-Fächer. /* Kompakt: auch All-of läuft nach unten (spart Breite) — kein Rechts-Fächer.
Die graue, gestrichelte Any-of-Führung kommt aus der Basis und gilt hier Die graue, gestrichelte Any-of-Führung kommt aus der Basis und gilt hier