From f0fe877d451a596e848c3169ff41826f97ba2548 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Mon, 24 Aug 2026 11:55:04 +0200 Subject: [PATCH] feat(diagram): `#`-Umschalter blendet die Knoten-IDs vor dem Titel ein MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die ID ist die Adresse eines Knotens — Ziel der Abhängigkeiten, Schlüssel der Beschreibungsblöcke —, stand im Diagramm aber nur im Tooltip (D36). Jetzt umschaltbar und geschrieben wie im Text: `#some.id: Titel`. - Als RENDERER-Option, nicht per CSS versteckt: `diagramToSvg()` zieht den Knotentext aus `textContent`, ein `display:none` hätte die IDs trotzdem in jeden Export geschrieben. Nachgemessen im SVG: `>#not.line: Line format<` mit Umschalter, `>Line format<` ohne. - Zurückgenommen dargestellt (Mono wie im Textfeld, --muted), `aria-hidden` — der Screenreader bekommt die ID über a11yId (D36). Zustand persistiert. Das zehnte Bedienelement hat die Kopfzeile gekippt, zweimal dieselbe Rechnung wie D17-Nachtrag 5: - Schreibtisch: 738 nötig, 728 da -> 82 statt 49 px. Nicht die Knöpfe (566 px für elf Elemente), sondern zehn Lücken à 14 px = 140 px. `gap:10` gibt 40 px zurück; danach 698 von 728 und wieder 49 px mit UND ohne Knopf. - Telefon (375 px): alle Ziele schon auf 29 px, Lücken auf 6 — ein zehntes passt arithmetisch nicht (386 gegen 359). D50s Umbruch-Schwelle wandert von 360 auf 440 px. Greift nur mit dem „Was ist neu?"-Knopf: mit allen zehn 78 px/zwei Reihen, ohne ihn 49 px/eine Reihe. SPEC §9 + D56; Plan: #ed.showids [x] (160 Knoten, 0 Warnungen). 293 Tests grün (288+5); i18n `idsTooltip` in 9 Sprachen. Co-Authored-By: Claude Opus 5 --- docs/DECISIONS.md | 52 +++++++++++++++++++++++++++++++++ docs/SPEC.md | 11 +++++++ docs/examples/werkbaum.werkbaum | 6 ++++ frontend/index.html | 6 ++++ frontend/src/app.js | 29 +++++++++++++++++- frontend/src/render.js | 11 ++++++- frontend/src/style.css | 37 +++++++++++++++++++---- frontend/tests/render.test.js | 39 +++++++++++++++++++++++++ 8 files changed, 183 insertions(+), 8 deletions(-) diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index a3de911..536087c 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -3922,3 +3922,55 @@ erste `#`-Token, zeichengenaue Erhaltung von Einrückung, Zeichen, Statusbox und Faltmarke, und dass das Ergebnis denselben Baum ergibt wie die von Hand ausgeschriebene Fassung). Das Zusammenspiel mit dem Textfeld bleibt Browser-Sache — die Lehre aus D54-Nachtrag 3. + +## D56 — `#`-Umschalter: die Knoten-ID vor dem Titel, geschrieben wie im Text +Die ID ist die **Adresse** eines Knotens — Ziel der Abhängigkeiten (§1), Schlüssel +der Beschreibungsblöcke, und seit D55 auch das, was man beim Tippen abkürzt. Im +Diagramm stand sie bisher nur im Tooltip (D36: „eine eigene Darstellung hat sie +(noch) nicht"). Wer Text und Bild nebeneinander liest, musste jeden Knoten +antippen, um zu wissen, welcher er ist. + +Ein Umschalter im Diagramm-Kopf blendet sie ein, **geschrieben wie im Text**: +`#some.id: Titel`, mit Doppelpunkt und Leerzeichen. Dieselbe Schreibweise auf +beiden Seiten ist der ganze Zweck — eine eigene Darstellung (Badge in der Ecke, +Klammern, Kapitälchen) wäre eine zweite Konvention für dieselbe Sache. + +**Als Renderer-Option, nicht per CSS versteckt.** Der naheliegende Weg wäre eine +Klasse an `#out` und `display:none` gewesen. Dann aber stünde die ID trotzdem im +`textContent` — und genau daraus zieht `diagramToSvg()` den Knotentext. Der +Export hätte die IDs also **immer** enthalten, egal was auf dem Schirm steht. +Als Option in `renderTreeHtml(roots, {…, showIds})` folgt er von selbst; +nachgemessen im ausgegebenen SVG: `>#not.line: Line format` mit +Umschalter, `>Line format` ohne. Das entspricht der Hausregel, UI-State +als **Parameter** zu übergeben (frontend/CLAUDE.md), und der Linie von D38/D44: +Export und Druck zeigen, was sichtbar ist. + +**Zurückgenommen dargestellt:** Mono-Schrift wie im Textfeld, 0,86 em, in +`--muted` (am dunklen Wurzelknoten in Weiß mit 75 %). Die ID ist die Adresse, +nicht der Name — der Titel soll die Zeile weiter anführen. `aria-hidden`, weil +der Screenreader sie über `a11yId` ohnehin bekommt (D36) und sie sonst doppelt +vorläse. Der Zustand gehört zur Ansicht und wird wie Modus, Zoom und Aufteilung +global gemerkt (D22). + +**Der Knopf trägt das Zeichen selbst.** Ein gezeichnetes Icon sagte hier +weniger als `#` — dasselbe Argument wie beim Fenster-Wähler in D31, nur +umgekehrt: Wo es ein etabliertes Schriftzeichen gibt, ist es das beste Symbol. + +**Das zehnte Bedienelement hat die Kopfzeile gekippt — zweimal dieselbe +Rechnung wie D17-Nachtrag 5.** Nachgemessen statt geschätzt: + +- **Schreibtisch:** 738 px nötig, 728 verfügbar — 10 px zu wenig, die Zeile ging + auf 82 statt 49 px. Nicht die Knöpfe waren das Problem (566 px für elf + Elemente), sondern der Weißraum: zehn Lücken à 14 px sind 140 px. `gap:10` + statt `14` gibt 40 px zurück, also fast genau die Breite des neuen Knopfes; + danach 698 von 728 und wieder 49 px — mit **und** ohne den Knopf. +- **Telefon (375 px):** Dort sind alle Ziele schon auf dem 29-px-Fingerminimum + und die Lücken auf 6 px; ein zehntes passt arithmetisch nicht (386 gegen + 359 px). Die Umbruch-Schwelle aus D50 wandert deshalb von 360 auf 440 px — + dieselbe Rechnung, ein Element mehr. Sie greift auch nur dann wirklich: Der + „Was ist neu?"-Knopf (44 px) erscheint nur bei Neuigkeiten, ohne ihn bleiben + 336 px und damit eine Reihe. Gemessen: mit allen zehn 78 px und zwei Reihen, + alles innerhalb; ohne den Neuigkeiten-Knopf 49 px und eine Reihe. + +Ein `overflow` an der Kopfzeile bleibt weiterhin ausgeschlossen — es klippt die +beiden Aufklapp-Menüs (D50). diff --git a/docs/SPEC.md b/docs/SPEC.md index b900403..cc19219 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -703,6 +703,17 @@ verknüpft (siehe D25): - Die Hervorhebung ist eine reine Editierhilfe: nicht im Grafikexport, nicht im Druck. +### Knoten-IDs im Diagramm einblenden (`#`) +Ein Umschalter im Diagramm-Kopf stellt die Knoten-ID **vor den Titel**, in +derselben Schreibweise wie im Text (§1/D36): `#some.id: Titel`. Dargestellt in +der Mono-Schrift des Textfelds und zurückgenommen gefärbt — die ID ist die +Adresse, der Titel führt die Zeile weiter an. Der Zustand wird gemerkt. + +**Grafikexport und Druck folgen dem Umschalter** (wie beim „verworfene +einblenden"-Filter und der Faltung): Ist er an, stehen die IDs auch im +ausgegebenen Bild. Für Screenreader ändert sich nichts — sie bekommen die ID +ohnehin über das `aria-label`. Siehe D56. + ### Kurzschreibweise der Knoten-ID beim Tippen (`#.name`) Eine **Eingabehilfe**, keine Notation: Wer `#.kc` unter einem Knoten mit der ID `#prod-stage` schreibt, findet beim **Verlassen der Zeile** `#prod-stage.kc` im diff --git a/docs/examples/werkbaum.werkbaum b/docs/examples/werkbaum.werkbaum index cdfa152..c86d05a 100644 --- a/docs/examples/werkbaum.werkbaum +++ b/docs/examples/werkbaum.werkbaum @@ -68,6 +68,7 @@ - [^] #ed.jump: Jump between diagram and text (S) - [^] #ed.lineno: Line numbers in the text editor (XS) %% the warnings name them - [x] #ed.shortid: Type #.kc under #prod-stage, get #prod-stage.kc (XS) %% an input aid, not notation + - [x] #ed.showids: A # button shows the ids before the titles (XS) %% written as in the text, with a colon - [^] #ed.lineno.tip: The warning is the tooltip of its number (XS) %% no hunting in the list - [^] #ed.fold: Collapsible subtrees (M) - [^] #ed.fold.marks: Initial state from the text: > collapses, < re-opens (S) @@ -498,6 +499,11 @@ typing, not while parsing: the file keeps the full id, so it stays greppable and survives re-ordering, which is what the :#... references rely on. +#ed.showids + The id is the address of a node, but the diagram only carried it in the + tooltip. The switch writes it before the title the same way the text does, + so both can be read side by side; the graphic export follows the switch. + #ed.fold A large plan is unreadable unless parts of it can be put away. Folding is view only — warnings from folded subtrees are still reported, because they diff --git a/frontend/index.html b/frontend/index.html index ee54918..6776c96 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -192,6 +192,12 @@ + +