From 1f6988b04760ec99c5a52711cc58978af639a6a4 Mon Sep 17 00:00:00 2001 From: mhoennig Date: Mon, 27 Jul 2026 13:14:10 +0200 Subject: [PATCH] frontend: Sprung zwischen Diagramm und Text (beide Richtungen) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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 - 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 --- README.de.md | 12 ++ README.md | 10 ++ docs/DECISIONS.md | 55 ++++++ docs/SPEC.md | 18 ++ frontend/CLAUDE.md | 11 ++ frontend/src/app.js | 158 ++++++++++++++++++ frontend/src/render.js | 12 +- frontend/src/style.css | 10 ++ .../tests/__snapshots__/render.test.js.snap | 6 +- frontend/tests/render.test.js | 36 +++- 10 files changed, 321 insertions(+), 7 deletions(-) diff --git a/README.de.md b/README.de.md index 91a8a53..92374e4 100644 --- a/README.de.md +++ b/README.de.md @@ -38,6 +38,18 @@ Den [gehosteten Editor](https://werkbaum.javagil.de) öffnen — links Text bearbeiten, rechts entsteht das Diagramm live. Toggles: transponierte (schmale) Darstellung, verworfene Elemente einblenden. +### Zwischen Diagramm und Text springen + +Diagramm und Editor sind in beide Richtungen verknüpft: + +- **Alt+Klick auf einen Knoten** (Tastatur: **Alt+Enter**, Touch: **langer + Druck**) markiert seine Zeile im Texteditor — ein zugeklapptes Editor-Panel + öffnet sich dabei zuerst. +- **Cursor im Text bewegen** hebt den zugehörigen Knoten im Diagramm hervor. + +Der einfache Klick behält seine bisherige Bedeutung: Ein Knoten mit URL öffnet +sie weiterhin. + ### Diagramm aus einer URL laden Der Editor kann seinen Notationstext über den Query-Parameter `sourceUrl` aus diff --git a/README.md b/README.md index 5b923f0..9ccf26a 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,16 @@ Open the [hosted editor](https://werkbaum.javagil.de) — edit text on the left, the diagram is built live on the right. Toggles: transposed (narrow) layout, show discarded elements. +### Jumping between diagram and text + +Diagram and editor are linked in both directions: + +- **Alt+click a node** (keyboard: **Alt+Enter**, touch: **long press**) selects + its line in the text editor — collapsed editor panel opens first. +- **Moving the cursor in the text** highlights the matching node in the diagram. + +A plain click keeps its old meaning: a node carrying a URL still opens it. + ### Loading a diagram from a URL The editor can pull its notation text from an external text file via the diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index 38dd234..98cb705 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -465,3 +465,58 @@ Dokumenten zeigen lässt: jeder `?sourceUrl=`-Link legt ein eigenes Dokument an `example-werkbaum.werkbaum` beschreibt Werkbaum selbst (Bestand + mögliche Weiterentwicklung, destilliert aus ROADMAP/TASKS/DECISIONS) — zugleich Beispiel und lebende Projektübersicht; bei größeren Änderungen mitpflegen. + +## D25 — Sprung Diagramm ↔ Text per Alt+Klick, Gegenrichtung per Cursor-Zeile +Ein Knoten im Diagramm und „seine" Zeile im Texteditor sind nun verknüpft. Der +Parser hängte die Zeilennummer ohnehin schon an jeden Knoten (`{…, line}`, +bislang nur für Warnungen genutzt); der Renderer gibt sie als `data-line` aus. + +**Alt+Klick statt einfachem Klick.** Ein Knoten mit URL ist als `` gerendert +und belegt mit dem einfachen Klick bereits den ganzen Kasten (SPEC §6, D6). +Erwogen und verworfen: + +- **↗ wird der Link, Knotenfläche springt** — klarste Regel, alles per + einfachem Klick; ändert aber SPEC §6 und schrumpft die Link-Trefferfläche auf + ein Symbol. +- **Klick springt, Strg-Klick öffnet** — behält die große Trefferfläche, macht + das Öffnen aber zur unsichtbaren Geste und ändert §6 ebenfalls. +- **Gewählt: Alt+Klick springt** — das Verlinkungs-Verhalten bleibt exakt wie + bisher, SPEC §6 unverändert. Preis ist die geringe Auffindbarkeit; dagegen + steht der **Tooltip an jedem Knoten** („Alt+Klick: zur Zeile im Text", + i18n-Key `jumpHint`, in allen 9 Sprachen), der bisher nur den Statusnamen + zeigte. + +Wichtig: Der Klick-Handler **muss `preventDefault()`** rufen — Alt+Klick auf +einen Link lädt sonst in Chrome/Firefox das Ziel herunter. Tastatur-Pendant ist +**Alt+Enter** am fokussierten Knoten (Enter allein bleibt dem Link). Auf Touch +gibt es kein Alt: dort **langer Druck** (500 ms), Wischen bricht ab; der +folgende Klick und das Kontextmenü werden unterdrückt (`-webkit-touch-callout` +aus), sonst öffnete ein Link-Knoten zusätzlich seine URL. + +**Ganze Zeile markieren statt nur Cursor setzen.** Ein `