From 7e2c7cd3e015af401c2afac59857a08bd9f4fb71 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Sun, 23 Aug 2026 10:19:17 +0200 Subject: [PATCH] fix: vordere Zeichenebenen liegen wirklich vorn (D25-Nachtrag 3) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Der aktive Knoten deckte seinen eigenen Stationspunkt zu. Ursache ist der z-index:3 der Cursor-Zeile (D25-Nachtrag 1) — dort richtig begründet, aber mit einer zweiten Wirkung, die nicht mitgedacht wurde: Er hebt den Knoten über jede Ebene ohne eigene Stapelposition, und svg.cheap-front hatte keine. Betroffen war nicht nur die Cursor-Zeile: Die Strahlenkränze tragen aus demselben Grund z-index:2 (D28/D32), und svg.dep-front hing mit dran — die hervorgehobenen Abhängigkeits-Kanten gehören zum ausgewählten Knoten und endeten deshalb unter ihm. Behoben an der Ebene, nicht am Knoten: dep-front 4, cheap-front 5. Die hinteren Ebenen bleiben ohne z-index, dort trägt die DOM-Reihenfolge. Export und Druck waren nie betroffen. Co-Authored-By: Claude Fable 5 --- docs/DECISIONS.md | 32 ++++++++++++++++++++++++++++++++ frontend/CLAUDE.md | 5 +++++ frontend/src/style.css | 7 +++++++ 3 files changed, 44 insertions(+) diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index b35b947..c72cabd 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -852,6 +852,10 @@ verschiebt sich für diesen einen Knoten um ~4 px; das ist flüchtig und fällt nicht auf. Ein Spalt zur Anschlusslinie entsteht nicht — der Knoten wächst darüber, statt sich zurückzuziehen. +*(Die Prüfung übersah eine Wirkung des `z-index`, die nicht die Geometrie +betrifft: Er hebt den Knoten auch über die vorderen Zeichenebenen. Korrigiert +in Nachtrag 3.)* + **Dazu ein einmaliger Puls beim Zeilenwechsel:** Man verliert den Knoten beim **Bewegen**, nicht im Stillstand — also meldet er sich genau dann einmal, mit einem kurzen Hüpfer und einem auslaufenden Ring. Kein WCAG-Problem: 2.2.2 zielt @@ -912,6 +916,34 @@ Puls muss trotzdem neu anlaufen — genau dafür steht das Lesen von `offsetWidth` zwischen Entfernen und Setzen der Klasse. Nachgemessen: vor dem Klick keine laufende Animation, 80 ms danach beide bei `currentTime ≈ 67 ms`. +**Nachtrag 3 — „vorn" heißt vorn: die vorderen Zeichenebenen brauchen einen +eigenen `z-index`.** Gemeldet als „wenn der Knoten der aktive ist, fehlt der +blasse Kreis für den Lean Path". Die Ursache ist der `z-index:3`, den Nachtrag 1 +dem Knoten gegeben hat — richtig begründet (ohne ihn beschneiden später gemalte +Geschwister den Schlagschatten), aber mit einer zweiten Wirkung, die dort nicht +mitgedacht wurde: Er hebt den Knoten nicht nur über seine Geschwister, sondern +über **jede** Ebene ohne eigene Stapelposition — und genau das waren die +Overlay-SVGs. `svg.cheap-front` trug nur `position:absolute`; die +Zeichenreihenfolge kam allein aus der DOM-Position. Damit lag ausgerechnet der +hervorgehobene Knoten über seinem eigenen Stationspunkt. + +Der Fehler ist **nicht** auf die Cursor-Zeile beschränkt: Die Strahlenkränze +haben aus demselben Grund `z-index:2` (D28/D32), verdeckten den Punkt also +ebenso. Und `svg.dep-front` (D41) hing daran mit — die hervorgehobenen +Abhängigkeits-Kanten gehören per Definition zum ausgewählten Knoten und endeten +deshalb unter ihm, also genau dort, wo man hinsieht. + +Behoben an der Ebene, nicht am Knoten: `.dep-front{z-index:4}` und +`.cheap-front{z-index:5}` — beide über der höchsten Knoten-Stufe. Die +**hinteren** Ebenen bleiben ohne `z-index`; sie sollen hinter den Knoten +liegen, und dort funktioniert die DOM-Reihenfolge. Den `z-index` am Knoten zu +senken wäre der falsche Griff gewesen: Er hat seinen Grund, und die +Overlay-Ebenen heißen nicht ohne Absicht „front". + +Export und Druck waren nie betroffen — dort zeichnet `diagramToSvg()` die +Punkte nach den Knoten (Reihenfolge statt Stapelung), und die Cursor-Zeile +erscheint ohnehin nicht (D25 oben). + ## D26 — Legende scrollbar: eigener Container statt `
`, plus Splitter Die Legende („Agenda") im Editor-Panel war zu hoch für ihren Platz und wurde **abgeschnitten** statt scrollbar zu sein — obwohl `.hint` seit jeher diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md index 8d66a6e..a9f4aa4 100644 --- a/frontend/CLAUDE.md +++ b/frontend/CLAUDE.md @@ -320,6 +320,11 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der (D38-Nachtrag 3): `drawCheapPath()` steigt nur bei **null** Stationen aus, die Zwei-Punkte-Schranke gilt allein der Linie (`catmullRom`) — im Export ebenso. Sonst verschwindet der Pfad beim eingeklappten Wurzelknoten ganz. + **Die vorderen Overlay-Ebenen brauchen einen `z-index`** (D25-Nachtrag 3): + `.cheap-front{z-index:5}`, `.dep-front{z-index:4}` — sonst deckt jeder + Knoten mit eigener Stapelposition (`current` 3, `fresh`/`focusmark` 2) den + Stationspunkt und die hervorgehobenen Dep-Kanten zu. Die **hinteren** Ebenen + bleiben ohne, dort trägt die DOM-Reihenfolge. **Umklappen schreibt in den TEXT zurück** (`writeFoldToText`, D38-Nachtrag 2): Die Ableitung Text → Zustand ist nicht umkehrbar (mehrere Markensätze ergeben denselben Zustand; `<` faltet Knoten ohne eigene Marke), deshalb **minimal diff --git a/frontend/src/style.css b/frontend/src/style.css index 5f56a60..d416296 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -773,6 +773,13 @@ Blättern zeigen, welche Knoten wirklich auf dem Pfad enden — durchquerte Fremdknoten tragen keinen Punkt. Reihenfolge im DOM steuert vorn/hinten. */ .cheap-overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none} + /* Die VORDEREN Ebenen müssen über JEDEN Knoten — auch über die, die sich + selbst eine Stapelposition nehmen: Cursor-Zeile (`z-index:3`, D25), + Strahlenkränze (`z-index:2`, D28/D32). Ohne das deckt ausgerechnet der + hervorgehobene Knoten seinen eigenen Stationspunkt zu, und die + hervorgehobenen Abhängigkeits-Kanten enden unter ihm. „Vorn" heißt vorn. */ + .dep-overlay.dep-front{z-index:4} + .cheap-overlay.cheap-front{z-index:5} /* Querverbindungen der Abhängigkeiten (SPEC §9, D41): blassgrau GEPUNKTET und gekrümmt — Punktierung und Krümmung unterscheiden sie doppelt von den Baumlinien (durchgezogen/gestrichelt, orthogonal) und halten sie leise