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

frontend: Vertikale Darstellung als zentrierten LR-Baum

Browse Source 
Der vertikale Modus zeigt all-of jetzt als exakt transponierten
Organigramm-Fächer: der Überknoten sitzt vertikal mittig zu seiner
Kindergruppe, die Verbindung tritt rechts auf halber Höhe aus und
verteilt über eine Sammelleiste (erste bis letzte Kindmitte) auf die
Kinder. Horizontal und kompakt bleiben unverändert. SPEC §9 angepasst.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-21 12:03:41 +02:00
co-authored by Claude Opus 4.8
parent 15bcfe75eb
commit 7aa33220ff
2 changed files with 17 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/SPEC.md
+5 -3
View File
@@ -113,9 +113,11 @@ ist grau (`#6B7A8C`) — kein Petrol mehr im Diagramm. Der Modus ändert nur die
unterhalb des Parents, gestrichelte graue Abzweige zu den Alternativen.
### Vertikal (transponiert)
- **all of:** Linie tritt **rechts auf halber Höhe** aus dem Parent aus
(entspricht Richtung LR), vertikale Sammelleiste, durchgezogene Abzweige;
Kinder rechts eingerückt untereinander.
- **all of:** exakter transponierter Organigramm-Fächer (horizontal um 90°
gedreht): Der Parent sitzt **vertikal mittig** zu seiner Kindergruppe, die
Linie tritt **rechts auf halber Höhe** aus (entspricht Richtung LR), eine
vertikale Sammelleiste (von erster bis letzter Kindmitte) verteilt mit
durchgezogenen Abzweigen; Kinder rechts untereinander.
- **any of:** Austritt **unten links**, gestrichelte graue Abzweige.
- Merkregel: Austrittsseite codiert das Gate (rechts = und, unten = oder),
Linienstil bestätigt es.
frontend/index.html
+12 -6
View File
@@ -413,16 +413,22 @@
}
.tree.vertical ul.and>li:last-child::after, .tree.kompakt ul.and>li:last-child::after{height:23px}
/* Nur vertikal: All-of tritt rechts aus dem Überknoten heraus (wie Richtung LR),
Any-of bleibt unten-links — klar unterscheidbare Austrittsseiten, aber breit. */
.tree.vertical li.has-and{flex-direction:row;align-items:flex-start}
/* Nur vertikal: echter transponierter, ZENTRIERTER LR-Baum — analog zur
horizontalen Darstellung, nur um 90° gedreht. Der Überknoten sitzt
vertikal mittig zu seiner Kindergruppe; die all-of-Verbindung tritt rechts
auf halber Höhe aus, eine vertikale Sammelleiste verteilt auf die Kinder.
Kompakt bleibt unberührt (führt all-of nach unten). */
.tree.vertical li.has-and{flex-direction:row;align-items:center}
.tree.vertical li.has-and>ul.and{padding-top:0}
/* Stub von der Parent-Mitte (halbe Höhe) zur vertikalen Sammelleiste */
.tree.vertical li.has-and>ul.and::before{
left:0;top:17px;width:9px;height:0;
left:0;top:50%;width:9px;height:0;
border-left:0;border-top:2px solid var(--line);
}
.tree.vertical li.has-and>ul.and>li:first-child::after{top:17px;height:calc(100% - 17px)}
.tree.vertical li.has-and>ul.and>li:only-child::after{top:17px;height:6px}
/* Sammelleiste nur von erster bis letzter Kindmitte (23-px-Offset);
mittlere Kinder tragen die volle Höhe (Basis), Rand-Kinder halbieren. */
.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}
/* 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