From 7aa33220ff67dc5915bc740cd9f2968d564ea367 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Tue, 21 Jul 2026 12:03:41 +0200 Subject: [PATCH] frontend: Vertikale Darstellung als zentrierten LR-Baum MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- docs/SPEC.md | 8 +++++--- frontend/index.html | 18 ++++++++++++------ 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/docs/SPEC.md b/docs/SPEC.md index 15f05fe..4d132d6 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -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. diff --git a/frontend/index.html b/frontend/index.html index 0178e42..319d617 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -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