From ac81f0a2099550fa905d5c4b9bae04c2c7d7c771 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Tue, 21 Jul 2026 14:04:30 +0200 Subject: [PATCH] frontend: Mehr Abstand zwischen gestapelten Knoten (vertikal/kompakt) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In den transponierten Modi ueberlappte das Groessen-Badge (oben rechts) eines Knotens oft mit den Namens-Tags (unten rechts) des Knotens darueber (gemessen: nur 10 px Luecke, 6 px Ueberlappung). Jetzt +20 px Abstand nach unten fuer gestapelte Blaetter/any-of/kompakt (Luecke 25 px, ~9 px Freiraum); der obere 23-px-Abzweig bleibt unveraendert. Vertikal zentrierte all-of-Zwischenknoten bekommen den Abstand symmetrisch (16 px), damit ihr 50%-Abzweig auf der Knotenmitte bleibt. Verifiziert (headless): keine Ueberlappung mehr; alle Abzweige treffen die Knotenmitte (|delta| <= 1 px) in vertikal und kompakt. Horizontal unveraendert. SPEC §9 (Geometrie-Invarianten) ergaenzt. Co-Authored-By: Claude Opus 4.8 --- docs/SPEC.md | 7 +++++++ frontend/index.html | 16 ++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/docs/SPEC.md b/docs/SPEC.md index 756084b..62ee191 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -133,6 +133,13 @@ ist grau (`#6B7A8C`) — kein Petrol mehr im Diagramm. Der Modus ändert nur die deterministisch auf Knotenmitte liegen (Offset 23 px = 5 px Listenabstand + halbe Knotenhöhe). Abzweige zielen auf den **Knoten**, nie auf die Mitte des Teilbaums. +- In den transponierten Modi (vertikal, kompakt) stehen untereinander + gestapelte Geschwister mit **zusätzlichem Abstand nach unten** (damit das + Größen-Badge oben rechts nicht mit den Tags unten rechts des darüber + liegenden Knotens überlappt). Der Abstand wird nur **unterhalb** ergänzt, der + 23-px-Abzweig oben bleibt unverändert; die vertikal **zentrierten** + all-of-Zwischenknoten bekommen ihn **symmetrisch**, damit ihr Abzweig + (50 %-Höhe) weiterhin auf der Knotenmitte liegt. ### Grafikexport des Diagramms Das Diagramm wird aus der Live-Geometrie in ein eigenständiges SVG (nur Formen diff --git a/frontend/index.html b/frontend/index.html index 0091711..236c161 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -464,6 +464,22 @@ .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} + /* Mehr Luft zwischen gestapelten Knoten (transponierte Modi): sonst + überlappt das Größen-Badge (oben rechts) eines Knotens mit den + Namens-Tags (unten rechts) des Knotens darüber. Nur zusätzlicher Abstand + NACH unten, damit der obere 23-px-Abzweig unverändert bleibt. */ + .tree.kompakt ul.and>li, + .tree.kompakt ul.or>li, + .tree.vertical ul.or>li, + .tree.vertical ul.and>li:not(.has-and){ + padding-bottom:20px; + } + /* Zentrierte all-of-Zwischenknoten (nur vertikal) brauchen den Abstand + symmetrisch, damit ihr 50%-Abzweig auf der Knotenmitte bleibt. */ + .tree.vertical li.has-and>ul.and>li.has-and{ + padding-top:16px;padding-bottom:16px; + } + /* 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 wie in allen Modi. Gate-Codierung: und = durchgezogen dunkel (Tinte),