From 1cd1d30d1b341c6302f61962192c80b3058a15a8 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Sat, 22 Aug 2026 19:18:10 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Querverbindungen=20gepunktet=20=E2=80=94?= =?UTF-8?q?=20zur=C3=BCckhaltender=20(D41-Nachtrag)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Nutzer-Feedback: Die durchgezogene Kurve konkurrierte trotz Blässe noch mit dem Baum. Basis-Kanten jetzt gepunktet (runde Punkte, .1/5) — damit dreifach von den Baumlinien unterschieden (Krümmung, Blässe, Punktierung). Der D29-Einwand gegen einen dritten Linienstil galt den Baum-Abzweigen im kompakten Modus, nicht der eigenen gekrümmten Ebene. Die Fokus-Hervorhebung bleibt durchgezogen in Tinte; Export identisch. Co-Authored-By: Claude Fable 5 --- docs/DECISIONS.md | 12 ++++++++++++ docs/SPEC.md | 5 +++-- frontend/CLAUDE.md | 4 ++-- frontend/src/app.js | 4 ++-- frontend/src/style.css | 15 +++++++++------ 5 files changed, 28 insertions(+), 12 deletions(-) diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index 0cb5488..6ca2993 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -1986,6 +1986,18 @@ auf dem DOM; headless getestet sind die `data-id`/`data-deps`-Attribute des Renderers, geprüft wurde im Browser (alle drei Modi, Fokus- und Cursor-Hervorhebung, Export). +**Nachtrag — die Basis-Kanten sind jetzt gepunktet.** „Zurückhaltender“ +(Nutzer): Die durchgezogene Kurve konkurrierte trotz Blässe noch mit dem +Baum. Punktiert (runde Punkte, `stroke-dasharray: .1 5`) tritt sie weiter +zurück und ist zugleich **dreifach** von den Baumlinien unterschieden — +Krümmung, Blässe, Punktierung; durchgezogen gehört „und“, gestrichelt „oder“. +Der D29-Einwand gegen einen dritten Linienstil greift hier nicht: Er galt den +**Baum-Abzweigen**, die sich im kompakten Modus allein über den Stil +unterscheiden müssen — die Querverbindungen liegen auf ihrer eigenen, +gekrümmten Ebene und begegnen den Rahmenkanten nie. Die **Hervorhebung** +(fokussierter Knoten) bleibt durchgezogen in Tinte: Sie ist ausdrücklich +angefordert und soll sich nach vorn drängen. Export identisch nachgezogen. + ## D42 — Closure-Pfad: erschöpfend über die gekoppelten Gruppen, gierig nur benannt Die letzte Baustelle aus D34: Mit Abhängigkeiten zählt der günstigste Pfad nicht mehr den gewählten Teilbaum, sondern die **Hülle** — jeder nötige Knoten diff --git a/docs/SPEC.md b/docs/SPEC.md index fcc3c0f..f0be00b 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -640,8 +640,9 @@ Siehe D38. ### Querverbindungen der Abhängigkeiten (`:#…`, §1) Abhängigkeiten werden als **optisch sekundäre** Kanten gezeichnet: dünn, -blassgrau (`#6B7A8C`), **geschwungen** — die Krümmung unterscheidet sie von -den orthogonalen Baumlinien (dasselbe Mittel wie beim Pfad-Spline) — auf einer +blassgrau (`#6B7A8C`), **gepunktet** und **geschwungen** — Punktierung und +Krümmung unterscheiden sie doppelt von den Baumlinien (durchgezogen bzw. +gestrichelt, immer orthogonal) und halten sie zurückhaltend — auf einer eigenen Zeichenebene **hinter** den Knoten, mit einer kleinen **Pfeilspitze auf das Gebrauchte** („braucht“-Richtung). Der Baum trägt weiterhin die Hauptaussage. diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md index 4019b69..6efd3d5 100644 --- a/frontend/CLAUDE.md +++ b/frontend/CLAUDE.md @@ -295,8 +295,8 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der - Querverbindungen (SPEC §9, D41): `drawDepLinks()` zeichnet die Abhängigkeits-Kanten als Overlay-SVGs (wie `drawCheapPath`, `/zoom` umrechnen) aus den Renderer-Attributen `data-id`/`data-deps` — gekrümmt - (Merkmal gegenüber den orthogonalen Baumlinien), blassgrau hinter den - Knoten, Pfeil aufs Gebrauchte; Hervorhebung (Fokus bzw. Cursor-Zeile, + und GEPUNKTET (doppelt unterschieden von den orthogonalen Baumlinien, + D41-Nachtrag), blassgrau hinter den Knoten, Pfeil aufs Gebrauchte; Hervorhebung (Fokus bzw. Cursor-Zeile, `activeDepNode()`) in Tinte auf der vorderen Ebene. Aufgerufen aus `highlightCurrentNode()` (läuft in jedem `render()`), `applyLayout()` und den focusin/focusout-Handlern — NICHT doppelt in `render()` einhängen. diff --git a/frontend/src/app.js b/frontend/src/app.js index 0e6df3e..7f50e4c 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -486,8 +486,8 @@ function diagramToSvg(){ Knoten; die Fokus-Hervorhebung ist Interaktion und wird nicht exportiert. */ depEdges().forEach(([from, to]) => { const c = depCurve(R(from), R(to)); - parts.push(``); - parts.push(``); + parts.push(``); + parts.push(``); }); /* 1b) Günstigster-Pfad: kräftige Linie hinter den Knoten */ diff --git a/frontend/src/style.css b/frontend/src/style.css index 4986984..a06be3d 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -702,13 +702,16 @@ 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} - /* Querverbindungen der Abhängigkeiten (SPEC §9, D41): dünn, blassgrau, - gekrümmt — die Krümmung unterscheidet sie von den orthogonalen Baumlinien. - Hervorgehobene Kanten (fokussierter Knoten/Cursor-Zeile) in Tinte. */ + /* 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 + (D41-Nachtrag). Hervorgehobene Kanten (fokussierter Knoten/Cursor-Zeile) + durchgezogen in Tinte. */ .dep-overlay{position:absolute;left:0;top:0;overflow:visible;pointer-events:none} - .dep-edge{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:.35;stroke-linecap:round} - .dep-arrow{fill:var(--muted);opacity:.35} - .dep-edge.hl{stroke:var(--line);stroke-width:2;opacity:.9} + .dep-edge{fill:none;stroke:var(--muted);stroke-width:1.5;opacity:.4; + stroke-linecap:round;stroke-dasharray:.1 5} + .dep-arrow{fill:var(--muted);opacity:.4} + .dep-edge.hl{stroke:var(--line);stroke-width:2;opacity:.9;stroke-dasharray:none} .dep-arrow.hl{fill:var(--line);opacity:.9} .cheap-path{fill:none;stroke:var(--or);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:8 6;opacity:.9}