diff --git a/docs/DECISIONS.md b/docs/DECISIONS.md index d461a04..8a0c761 100644 --- a/docs/DECISIONS.md +++ b/docs/DECISIONS.md @@ -197,6 +197,52 @@ und die vollständige Sprachliste dennoch erreichbar (frühere Lösung Voreinstellung greift nur, wenn noch **keine** gespeicherte Nutzerwahl vorliegt (eine bewusste Abschaltung bleibt so erhalten, siehe localStorage-Persistenz). +**Nachtrag — auf Mobil ist jetzt immer genau EIN Bereich zu sehen; der Splitter +entfällt dort ganz.** Die oben beschriebene stufenlose Aufteilung hat das +eigentliche Problem nur verwaltet, statt es zu lösen: Auf 375 px ist für zwei +Bereiche kein Platz. Jede Aufteilung war ein Kompromiss, in dem **beide** +Bereiche zu klein waren, und die praktisch einzigen sinnvollen Stellungen waren +ohnehin die Extreme — also genau das, was ein Umschalter direkt anbietet. Der +Splitter kostete außerdem dauerhaft eine zweite Titelzeile plus 14 px Griff für +etwas, das man auf dem Telefon nicht dosiert, sondern wechselt. + +**Der Umschalter zeigt das Ziel, nicht den Zustand.** Damit weicht er bewusst +vom Modus-Wähler daneben ab, der das aktive Icon zeigt und reihum schaltet: +Der hat drei Zustände, die man ohne Anzeige nicht auseinanderhält; hier gibt es +zwei, und welcher gerade gilt, sieht man am ganzen Bildschirm. Ein Knopf, der +den Zustand anzeigt, den man ohnehin vor sich hat, sagt nichts — einer, der +das Ziel zeigt, sagt, was passiert. Umgesetzt als **zwei feste Knöpfe**, je +einer pro Titelzeile: Weil immer nur eine Zeile sichtbar ist, braucht keiner +sein Icon zu wechseln. + +**Der Dokumenten-Wähler steht neben dem Umschalter** und damit nur im +Textbereich. Das ist keine Platzentscheidung, sondern die richtige Zuordnung: +Er bestimmt, *welchen Text* man bearbeitet (D22) — im Diagrammbereich wäre er +ein Fremdkörper. Die übrigen Aktions-Knöpfe bleiben, wo sie sind, und werden +dadurch von selbst mitgeschaltet; ihre komprimierte Mobil-Form (Modus-Wähler +als Reihum-Icon, Download als Overlay) bleibt unverändert. + +**Die Falle beim Bauen: ein `display:none`-Panel misst sich zu null.** Der +verborgene Bereich wird wirklich ausgeblendet — nur so bekommt der sichtbare +die ganze Höhe. Alles, was aus der Live-Geometrie zeichnet, liefert dann aber +Unsinn, und `render()` läuft bei **jedem Tastendruck** im Textbereich. +Nachgemessen nach einer Eingabe bei verborgenem Diagramm: Pfad-Linie **weg**, +null Stationspunkte, kein `--stem-x`. Das Umschalten zeichnet deshalb neu — +zum Diagramm hin dieselben vier Schritte wie ein Moduswechsel +(`applyOptStairs`, `alignStems`, `drawCheapPath`, `drawDepLinks`), zum Text hin +der Zeilennummern-Streifen, der ebenso am Spiegel misst (D33). Danach wieder +48 px Pfadlänge, 5 Punkte, `--stem-x: 67,4px`. + +Der sichtbare Bereich wird in `werkbaum-ui` gemerkt — global über alle +Dokumente wie der übrige Ansichts-Zustand (D22). Die Sprünge zwischen Diagramm +und Text (D25) holen den nötigen Bereich selbst nach vorn: `revealEditor()` +schaltet auf Text (wie es auf dem Desktop ein zugeklapptes Panel aufklappt), +`focusNodeOfCaret()` auf das Diagramm — und zwar **vor** dem Zentrieren, sonst +misst sich der Zielknoten noch zu null. Entfallen sind damit `--drow` auf +Mobil, die Grid-Minima `--pmin-d`/`--pmin-e`, `syncPanelMins()`, +`setMobileDrow()` und das Titelzeilen-Tippen; Desktop behält Splitter, +Presets und Fenster-Buttons unverändert. + ## D18 — Günstigsten Pfad per Inversion zeigen, fehlende Größe = M Der kostengünstigste Weg durch den Baum wird hervorgehoben (Umschalter im Diagramm-Kopf, Default an, Zustand persistiert). Nötig sind bei **all of** alle diff --git a/docs/SPEC.md b/docs/SPEC.md index 2500466..c3fedc9 100644 --- a/docs/SPEC.md +++ b/docs/SPEC.md @@ -391,16 +391,19 @@ Siehe D29. (50 %-Höhe) weiterhin auf der Knotenmitte liegt. ### Kleiner Bildschirm (mobil) -Ab schmaler Breite (≤ 640 px, z. B. Smartphone) werden Diagramm und Texteditor -**gestapelt** und über den **Splitter** frei geteilt: Ziehen verteilt beliebig, -jederzeit erneut verstellbar; die beiden **Titelzeilen bleiben dabei immer -stehen** (jedes Panel schrumpft höchstens bis auf seine volle Titelzeile — die -Zeilen-Minima entsprechen den gemessenen Kopfhöhen). Ein **Antippen einer -Titelzeile klappt dieses Panel ganz aus** (das andere schrumpft auf seine -Titelzeile). Es gibt hier kein diskretes Minimieren/Einrasten mehr (kein Snap, -keine Min/Normal/Max-Buttons) — die Aufteilung ist durchgehend stufenlos. -Voreinstellung ist Diagramm maximiert (Editor als Titelzeile). Die **Legende** -bekommt hier einen eigenen +Ab schmaler Breite (≤ 640 px, z. B. Smartphone) ist **immer genau ein Bereich** +zu sehen — Diagramm **oder** Text, jeweils über die ganze Fläche. Oben links in +der Titelzeile schaltet ein **Knopf** auf den anderen um; er zeigt das Ziel +(Textzeilen bzw. Baum), denn den Zustand hat man ohnehin vor sich. Es gibt hier +weder Splitter noch Min/Normal/Max-Buttons — es ist nichts zu teilen. Der +Bereichstitel „DIAGRAMM" entfällt; die Zeile wird für Umschalter und Aktionen +gebraucht. Der **Dokumenten-Wähler** steht direkt neben dem Umschalter und ist +damit genau dann zu sehen, wenn der Text vorn ist. Die übrigen +**Aktions-Knöpfe** bleiben rechts in der Titelzeile und werden mit +umgeschaltet — jeder Bereich zeigt seine eigenen, in der unten beschriebenen +komprimierten Form. Der sichtbare Bereich wird gemerkt; ein Sprung zwischen +Diagramm und Text (§9) holt den nötigen Bereich selbst nach vorn. +Voreinstellung ist das Diagramm. Die **Legende** bekommt hier einen eigenen Umschalter im Editor-Kopf (statt der dauerhaften „AGENDA“-Zeile), damit sie zugeklappt keinen Platz kostet. Der **Modus-Wähler** zeigt nur das aktive Icon und schaltet bei jedem Tippen reihum weiter (horizontal → kompakt → vertikal → diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md index 967ceae..e27323a 100644 --- a/frontend/CLAUDE.md +++ b/frontend/CLAUDE.md @@ -383,12 +383,19 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der der any-of-Teilbaum. `alignStems()` misst deshalb nach jedem `render()` (und in `applyLayout`) die Knotenmitte und setzt `--stem-x`; Fallback im CSS ist `50%`. Messwerte durch `zoom` zurückrechnen, sonst stimmt es nur bei 100 %. -- Kleiner Bildschirm: `body.mobile` (per `matchMedia`, ≤ 640 px) stapelt - Diagramm/Editor mit **stufenlosem** Splitter (kein Snap/Collapse wie auf - Desktop): der Gutter-Drag ruft `setMobileDrow()` (klemmt `--drow` zwischen den - Kopfhöhen `--pmin-d`/`--pmin-e`, per `syncPanelMins()` gemessen), ein Tipp auf - eine Titelzeile maximiert das Panel. `applyLayout` ruft auf Mobil **kein** - `applySplit` (das würde `--drow` löschen). Dazu eigener Legenden-Umschalter +- Kleiner Bildschirm: `body.mobile` (per `matchMedia`, ≤ 640 px) zeigt **genau + einen** Bereich — `body.pane-diagram` bzw. `body.pane-text`, umgeschaltet über + je einen festen Knopf pro Titelzeile (`#paneToText`/`#paneToDiagram`, + `setMobilePane()`); kein Splitter, keine Fenster-Buttons (D17-Nachtrag). + **Der verborgene Bereich ist `display:none` und misst sich damit zu null** — + `setMobilePane()` MUSS neu zeichnen: zum Diagramm hin dieselben vier Schritte + wie `applyLayout` (`applyOptStairs`/`alignStems`/`drawCheapPath`/ + `drawDepLinks`), zum Text hin `renderLineNos()`. Ohne das ist nach dem Tippen + im Textbereich die Pfad-Linie weg (gemessen). Die Sprünge (D25) schalten den + Bereich selbst um: `revealEditor()` auf Text, `focusNodeOfCaret()` aufs + Diagramm — **vor** dem Zentrieren. Zustand in `werkbaum-ui` (`mobilePane`), + Variable oben bei `padView` deklariert (saveUI liest sie). + `applyLayout` ruft auf Mobil **kein** `applySplit`. Dazu eigener Legenden-Umschalter (`#legendBtn`), schlanke Sprachwahl, Download-Overlay; Default Vollbild + Diagramm maximiert. Layout-CSS hängt an `body.mobile`, nicht an einer eigenen `@media`-Regel — beide Seiten müssen denselben 640-px-Schwellwert nutzen diff --git a/frontend/index.html b/frontend/index.html index 4779ce7..5b6ebce 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -46,6 +46,12 @@
+ +