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 `