frontend: Sprung zwischen Diagramm und Text (beide Richtungen)
Knoten und Notationszeile sind nun verknüpft. Der Parser hängte die
Zeilennummer ohnehin schon an jeden Knoten — sie wandert jetzt als data-line
ins Markup.
- Diagramm -> Text: Alt+Klick markiert die ganze Zeile im Editor (Fokus,
in Sicht gescrollt); Tastatur Alt+Enter, Touch langer Druck (500 ms,
Wischen bricht ab). Ein zugeklapptes Editor-Panel wird zuerst geöffnet.
- Text -> Diagramm: der Knoten der Cursor-Zeile bekommt weißen Halo +
Tinte-Ring und wird beim Zeilenwechsel ins Bild gescrollt.
- Alt statt einfachem Klick, weil ein Knoten mit URL als <a> den ganzen
Kasten belegt (SPEC §6 bleibt unverändert). Der Handler ruft
preventDefault() — sonst lädt Alt+Klick auf einen Link das Ziel herunter.
Neuer Tooltip-Hinweis an jedem Knoten (i18n `jumpHint`, 9 Sprachen).
- Gescrollt wird über einen Spiegel-div, nicht über Zeilenhöhe x n: lange
Zeilen brechen weich um, die naive Rechnung lag im Test bei 60 Zeilen um
bis zu 525 px daneben.
Beim Verifizieren gefunden und behoben: `ul.or .node{box-shadow:none}` ist
spezifischer als `.node.current` und schluckte den Ring überall unterhalb
einer any-of-Gruppe — die Regel braucht den #out-Präfix.
Verifiziert im Browser (Alt+Klick auf <a>- und div-Knoten, Klick aufs
Größen-Badge, Klick/Enter ohne Alt unverändert, Alt+Enter, kurzer/langer
Druck und Wischen auf Mobil, Panel-Aufklappen aus dem minimierten Zustand,
Zeile nach Sprung immer im sichtbaren Band, Kommentar-/verworfene Zeilen
heben nichts hervor). Vitest 37/37 (3 neue data-line-Tests, Snapshots
aktualisiert). Dokumentiert als D25 + SPEC §9 + frontend/CLAUDE.md + README.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.8
parent
cdf843e2e3
commit
1f6988b047
@@ -434,6 +434,15 @@
|
||||
/* Sichtbarer Tastatur-Fokus (Knoten sind fokussierbar: Fokusreihenfolge =
|
||||
Lese-/Dokumentreihenfolge; Screenreader liest den aria-label). */
|
||||
.node:focus-visible{outline:2px solid var(--or);outline-offset:2px;box-shadow:0 2px 8px rgba(36,52,71,.22)}
|
||||
/* Knoten der Cursor-Zeile im Editor (D25). Weißer Halo + Tinte-Ring: hebt sich
|
||||
von allen Pastell-Status UND vom dunklen Wurzelknoten ab und ist vom
|
||||
petrolfarbenen Fokusring unterscheidbar. Rein visuelle Editierhilfe — nicht
|
||||
im Druck. Der `#out`-Präfix ist nötig: `ul.or .node{box-shadow:none}`
|
||||
(weiter unten) ist spezifischer als `.node.current` und schluckte den Ring
|
||||
sonst überall unterhalb einer any-of-Gruppe. */
|
||||
#out .node.current{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink)}
|
||||
/* Auf Touch ist der lange Druck die Sprung-Geste — kein iOS-Link-Callout. */
|
||||
a.node{-webkit-touch-callout:none}
|
||||
.ext{font-size:.72em;margin-left:5px;opacity:.55}
|
||||
.size{
|
||||
position:absolute;top:-9px;right:-9px;
|
||||
@@ -747,5 +756,6 @@
|
||||
*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
|
||||
/* Knoten nicht über den Seitenrand zerschneiden */
|
||||
#out li{break-inside:avoid}
|
||||
.node.current{box-shadow:none!important} /* Editierhilfe, nicht drucken (D25) */
|
||||
@page{margin:12mm}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user