feat: Labels brechen balanciert um, ID-Zeile über dem Titel, Falt-Chip — D64

Lange Knotentitel brechen bei ~40 Zeichen um, gleichmäßig auf die Zeilen verteilt — vom Renderer (wrapLabel, headless getestet) statt text-wrap:balance, damit der Kasten auf die längste balancierte Zeile schrumpft. Der 23-px-Abzweig ankert an der ersten Zeile; der Optional-Kreis sitzt fest auf der Abzweighöhe. Der Grafikexport misst die gerenderten Zeilen (labelLines) und gibt je Zeile ein <text> aus. Dazu: die eingeblendete ID (D56) steht in einer eigenen Zeile über dem Titel, und das Falt-Zeichen ist ein gerahmter 19×16-px-Chip mit gedeckelter Höhe. Plan: #ed.render.wrap, #ed.render M→L (D62-Prüfung schlug korrekt an). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-08-24 17:45:11 +02:00
parent 1debb7d9da
commit 52232f2c20
10 changed files with 318 additions and 32 deletions
@@ -41,6 +41,15 @@ verworfene Elemente. Quelle sind ES-Module unter `src/`; `index.html` ist der
 - Abzweig-Linien zielen auf die **Knotenmitte** (fester 23-px-Offset,
  `line-height: 1.3`), nicht auf die Mitte des Teilbaums — bei Layout-
  Änderungen alle drei Modi (horizontal/vertikal/kompakt) prüfen.
+  **Seit D64 brechen lange Labels um** (`wrapLabel()` in render.js setzt `\n`,
+  `white-space:pre-line` macht sie sichtbar): Bei mehrzeiligen Knoten trifft
+  der 23-px-Abzweig die Mitte der **ersten Zeile**; der Optional-Kreis sitzt
+  deshalb fest bei `top:18px` (= Abzweighöhe), nicht bei 50 % (Ausnahme:
+  vertikal zentrierte all-of-Zwischenknoten). Nichts in den Knoten darf die
+  Zeilenbox über die festen ~18,3 px heben — der Falt-Chip hat darum
+  `line-height:14px` ohne vertikales Padding (mit 15 px wuchs der Knoten
+  gemessen um 0,7 px). Der Export zeichnet je gerenderter Zeile ein `<text>`
+  (`labelLines()`, misst zeichenweise per Range am Live-Knoten).
  Vertikal + kompakt teilen die transponierte Basis-CSS; nur vertikal
  bekommt den Rechts-Ausgang für „all of“, kompakt führt auch „all of“
  nach unten. Any-of ist in allen Modi grau: Linien gestrichelt grau und
@@ -470,6 +470,42 @@ out.addEventListener('focusout', () => setTimeout(drawDepLinks, 0));
   der Geister-Knoten werden übernommen; Verbindungslinien werden je Gate
   (und = durchgezogen Tinte, oder = gestrichelt Grau) neu gezogen und treffen
   so garantiert die Knoten — unabhängig vom Darstellungsmodus. */
+/* Die gerenderten Textzeilen eines Knotens, gemessen am LIVE-Element: je
+   Zeile der (whitespace-normalisierte) Text und die Box in Viewport-Pixeln.
+   Zeichenweise per Range — eine neue Zeilen-Oberkante beginnt eine neue Zeile;
+   das deckt auch den Umbruch INNERHALB eines langen Worts (overflow-wrap) ab,
+   den eine Nachbildung der Wort-Umbruchlogik verfehlte. Kollabierter Leerraum
+   (etwa das Leerzeichen, an dem umbrochen wurde) hat eine Null-Box und fällt
+   heraus. `excludeSel` sind die Elemente, die der Export nicht ins Label
+   nimmt (Badges, ↗, ”-Marke, je nach Faltzustand das Falt-Zeichen). */
+function labelLines(node, excludeSel){
+  const range = document.createRange();
+  const lines = [];
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
+    acceptNode: tn => tn.parentElement.closest(excludeSel)
+      ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT,
+  });
+  for(let tn = walker.nextNode(); tn; tn = walker.nextNode()){
+    const s = tn.nodeValue;
+    for(let i = 0; i < s.length; i++){
+      range.setStart(tn, i); range.setEnd(tn, i + 1);
+      const r = range.getBoundingClientRect();
+      if(!r.width && !r.height) continue;
+      const last = lines[lines.length - 1];
+      if(last && Math.abs(r.top - last.top) < 2){
+        last.text += s[i];
+        last.left = Math.min(last.left, r.left);
+        last.right = Math.max(last.right, r.right);
+        last.bottom = Math.max(last.bottom, r.bottom);
+      } else {
+        lines.push({text: s[i], top: r.top, bottom: r.bottom, left: r.left, right: r.right});
+      }
+    }
+  }
+  for(const l of lines) l.text = l.text.replace(/\s+/g, ' ').trim();
+  return lines.filter(l => l.text);
+}
+
 function diagramToSvg(){
  /* Der Export misst die **Live-Geometrie**. Den Ring der Cursor-Zeile liest er
     nie aus (`box-shadow` steht nicht in der Liste), ihre Erhebung
@@ -608,15 +644,17 @@ function diagramToSvg(){
    const b = R(node), cs = getComputedStyle(node);
    const dashed = cs.borderTopStyle === 'dashed';
    parts.push(`<rect x="${b.x.toFixed(1)}" y="${b.y.toFixed(1)}" width="${b.w.toFixed(1)}" height="${b.h.toFixed(1)}" rx="8" fill="${cs.backgroundColor}" stroke="${cs.borderTopColor}" stroke-width="${parseFloat(cs.borderTopWidth)||1.5}"${dashed?' stroke-dasharray="4 3"':''}/>`);
-    const clone = node.cloneNode(true);
    /* Das „▸ n"-Kennzeichen eingeklappter Knoten gehört in den Export (SPEC
       §9/D38 — das Bild darf keine Vollständigkeit behaupten); das ▾ offener
       Knoten ist Bedienelement und fällt weg. */
    const stripFold = node.classList.contains('folded') ? '' : ',.fold';
-    clone.querySelectorAll('.size,.tags,.ext,.risk,.ownst,.desc-mark' + stripFold).forEach(e => e.remove());
-    const label = clone.textContent.replace(/\s+/g,' ').trim();
    const deco = cs.textDecorationLine.includes('line-through') ? ' text-decoration="line-through"' : '';
-    parts.push(`<text x="${b.cx.toFixed(1)}" y="${(b.cy+5).toFixed(1)}" text-anchor="middle" fill="${cs.color}" font-size="14" font-weight="${cs.fontWeight}"${deco}>${esc(label)}</text>`);
+    /* Seit Knoten umbrechen (D64), belegt ein Label mehrere Zeilenboxen — ein
+       SVG-<text> bricht nicht von selbst; je gemessene Zeile ein Element. */
+    for(const ln of labelLines(node, '.size,.tags,.ext,.risk,.ownst,.desc-mark' + stripFold)){
+      const cx = (ln.left + ln.right) / 2 + ox, cy = (ln.top + ln.bottom) / 2 + oy;
+      parts.push(`<text x="${cx.toFixed(1)}" y="${(cy+5).toFixed(1)}" text-anchor="middle" fill="${cs.color}" font-size="14" font-weight="${cs.fontWeight}"${deco}>${esc(ln.text)}</text>`);
+    }
    const riskEl = node.querySelector('.risk');
    if(riskEl){
      const rb = R(riskEl);
@@ -55,6 +55,40 @@ function attr(s){ return esc(String(s)).replace(/"/g,'&quot;'); }
   Beschreibung als data-Attribut wäre der einzige andere Weg gewesen. */
 export const TIP_RULE = '─'.repeat(24);

+/* Lange Labels umbrechen (SPEC §9/D64): höchstens ~40 Zeichen je Zeile, und
+   die Zeichen GLEICHMÄSSIG auf die Zeilen verteilt — der gierige CSS-Umbruch
+   machte aus 44 Zeichen eine volle Zeile plus ein einsames Wort. Bewusst im
+   Renderer statt per `text-wrap:balance`: So schrumpft der Knotenkasten auf
+   die längste BALANCIERTE Zeile (CSS balanciert nur innerhalb der einmal
+   bestimmten Kastenbreite und ließe ihn auf `max-width` stehen), und die
+   Regel ist headless testbar. Gebrochen wird nur an Leerzeichen; ein
+   einzelnes Wort über der Grenze bleibt stehen (das CSS fängt es mit
+   `max-width` + `overflow-wrap` ab). */
+export function wrapLabel(label, max = 40){
+  const text = String(label);
+  if(text.length <= max) return [text];
+  const words = text.split(' ');
+  const n = Math.ceil(text.length / max);      /* so viele Zeilen braucht es */
+  const target = Math.ceil(text.length / n);   /* … und so voll wird jede */
+  const lines = [];
+  let cur = '';
+  for(const w of words){
+    if(!cur){ cur = w; continue; }
+    const withW = cur.length + 1 + w.length;
+    /* Gebrochen wird an der Stelle, die dem Ziel am nächsten kommt: wenn das
+       Wort die Zeile weiter über das Ziel höbe, als sie jetzt darunter liegt —
+       oder wenn es die harte Grenze risse. */
+    if(withW > max || (withW > target && withW - target >= target - cur.length)){
+      lines.push(cur);
+      cur = w;
+    } else {
+      cur = cur + ' ' + w;
+    }
+  }
+  lines.push(cur);
+  return lines;
+}
+
 /* Barrierefreier Name eines Knotens: Label + Status + Aufwand + Zuständige +
   Link. Die visuellen Badges (Größe, Tags, ↗) sind aria-hidden — ihre
   Information steckt hier, sonst würde der Screenreader Kryptisches („M",
@@ -184,19 +218,27 @@ function nodeHtml(n, extra, opts, fold){
  const ownChip = effKey
    ? `<span class="chip ownst st-${n.status.key}" aria-hidden="true">[${n.status.code}]</span>`
    : '';
-  /* ID vor dem Titel, mit `: ` abgetrennt — dieselbe Schreibweise wie im Text
-     (SPEC §1/D36), damit man beides nebeneinander lesen kann. Umschaltbar im
-     Diagramm-Kopf; als Renderer-Option und nicht per CSS versteckt, damit der
-     Grafikexport (er liest den Knotentext) von selbst folgt. `aria-hidden`:
-     Der Screenreader bekommt die ID schon über `a11yId` (D56). */
+  /* ID in einer eigenen Zeile ÜBER dem Titel (D56, geändert mit D64): Das
+     `\n` trennt sie, `white-space:pre-line` macht es sichtbar. Ohne den
+     Trenn-Doppelpunkt — der trennte ID und Titel in DERSELBEN Zeile, hier
+     trennt der Umbruch; mit Doppelpunkt läse sich die Zeile wie ein
+     Block-Kopf (`#auth:`). Umschaltbar im Diagramm-Kopf; als Renderer-Option
+     und nicht per CSS versteckt, damit der Grafikexport (er misst die
+     gerenderten Zeilen) von selbst folgt. `aria-hidden`: Der Screenreader
+     bekommt die ID schon über `a11yId` (D56). */
  /* Nicht bei einem Knoten, dessen Label die ID selbst IST (SPEC §1) — sonst
-     stünde dort `#US-123: #US-123`. */
+     stünde dort `#US-123` zweimal untereinander. */
  const idHtml = showIds && n.id && !n.labelFromId
-    ? `<span class="nid" aria-hidden="true">#${esc(n.id)}:</span> `
+    ? `<span class="nid" aria-hidden="true">#${esc(n.id)}</span>\n`
    : '';
  const inner = foldHtml +
                idHtml +
-                esc(n.label) +
+                /* Die Umbrüche kommen als echte `\n` ins Markup, das CSS macht
+                   sie mit `white-space:pre-line` sichtbar (D64). Kein `<br>`:
+                   Der `textContent` behielte sonst keine Wortgrenze, und alles,
+                   was den Knotentext liest (Export, Fokusmarken-Schlüssel),
+                   bekäme zusammengeklebte Wörter. */
+                esc(wrapLabel(n.label).join('\n')) +
                /* ”-Marke (D40): macht die sonst unsichtbare Beschreibung
                   auffindbar (Lehre aus D25) — spiegelt das "-Zeichen der
                   Notation. Nicht im Export: Der Text selbst kann dort nicht
@@ -684,7 +684,18 @@
    border-radius:var(--r);
    padding:7px 14px;
    font-size:.88rem;font-weight:500;line-height:1.3;
-    white-space:nowrap;
+    /* Lange Labels brechen um, statt den Baum in die Breite zu treiben (D64).
+       Die Umbrüche setzt der RENDERER (wrapLabel: ~40 Zeichen je Zeile,
+       gleichmäßig verteilt) als `\n` — pre-line macht sie sichtbar, und der
+       Kasten schrumpft auf die längste balancierte Zeile. `max-width` +
+       `overflow-wrap` sind nur der Rückhalt für ein einzelnes Wort über der
+       Grenze. Zentriert (Organigramm-Konvention). Die feste Zeilenhöhe
+       bleibt — der 23-px-Abzweig (§9) trifft bei mehrzeiligen Knoten
+       deterministisch die Mitte der ERSTEN Zeile. */
+    white-space:pre-line;
+    max-width:40ch;
+    text-align:center;
+    overflow-wrap:break-word;
    box-shadow:0 1px 2px rgba(36,52,71,.08);
  }
  a.node{text-decoration:none;cursor:pointer}
@@ -692,15 +703,23 @@
  /* Falt-Zeichen (SPEC §9, D38): ▾ offen / „▸ n" eingeklappt, Klickziel fürs
     Umklappen. Gedeckt in Grau — es ist Bedienelement, keine Statusaussage;
     beim Zeigen färbt es sich zur Tinte. */
+  /* Als gerahmter Chip statt bloßem Glyph (D64): das nackte ▾ war ~10px klein
+     und kaum zu treffen. Die Höhe ist bewusst gedeckelt (feste line-height +
+     kein vertikales Padding): Der Chip darf die Zeilenbox des Knotens NICHT
+     über die festen 18,3px heben, sonst wandert die 23-px-Abzweig-Geometrie
+     (§9) um Halbpixel. */
  .node .fold{
    cursor:pointer;color:var(--muted);
-    font-size:.72em;margin-right:6px;
+    font-size:.75em;margin-right:6px;
+    display:inline-block;padding:0 6px;line-height:14px;
+    border:1px solid rgba(36,52,71,.28);border-radius:5px;
+    background:rgba(36,52,71,.04);
    user-select:none;-webkit-user-select:none;
  }
-  .node .fold:hover{color:var(--line)}
+  .node .fold:hover{color:var(--line);border-color:var(--line);background:rgba(36,52,71,.09)}
  /* Der dunkle Wurzelknoten braucht ein helleres Zeichen als das Grau. */
-  .root-node .fold{color:rgba(255,255,255,.75)}
-  .root-node .fold:hover{color:#fff}
+  .root-node .fold{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
+  .root-node .fold:hover{color:#fff;border-color:#fff}
  /* ”-Marke (SPEC §9, D40): der Knoten trägt eine Beschreibung — im Tooltip
     nachlesbar. Spiegelt das "-Zeichen der Notation; gedeckt, kein Klickziel. */
  .node .desc-mark{color:var(--muted);margin-left:4px;font-weight:600}
@@ -1165,7 +1184,12 @@
     Abzweig kommt von links auf halber Knotenhöhe. */
  .node.opt::before{
    content:'';position:absolute;
-    left:-5px;top:50%;transform:translateY(-50%);
+    /* 18px statt 50%: Der gestapelte Abzweig sitzt fest bei 23px im <li>
+       (= 5px Listenabstand + halbe EINZEILIGE Knotenhöhe). Seit Knoten
+       umbrechen (D64), ist 50% bei mehrzeiligen nicht mehr diese Höhe —
+       der Kreis muss auf dem Abzweig sitzen, nicht auf der Knotenmitte.
+       Für einzeilige Knoten sind 18px und 50% dasselbe. */
+    left:-5px;top:18px;transform:translateY(-50%);
    width:10px;height:10px;border-radius:50%;
    background:var(--card);border:2px solid var(--line);
    box-sizing:border-box;
@@ -1177,8 +1201,11 @@
  /* …ausgenommen der gestapelte all-of-Teilbaum unter einer any-of-Gruppe
     (siehe oben): dort kommt der Abzweig wieder von links. */
  .tree:not(.vertical):not(.kompakt) ul.or>li.has-and>ul.and>li>.node.opt::before{
-    left:-5px;top:50%;transform:translateY(-50%);
+    left:-5px;top:18px;transform:translateY(-50%);
  }
+  /* Vertikal zentrierte all-of-Zwischenknoten (unten): dort trifft der Abzweig
+     wirklich die Knotenmitte (50%) — der Kreis geht mit. */
+  .tree.vertical li.has-and>ul.and>li.has-and>.node.opt::before{top:50%}

  /* --- TREPPE: aufeinanderfolgende optionale Endknoten (D29, Nachtrag 3) ---
     Nur im horizontalen Fächer, wo jedes Geschwister sonst eine eigene Spalte
@@ -143,8 +143,10 @@ describe('renderTreeHtml — data-line je Knoten (D25)', () => {
 });

 /* Knoten-IDs im Diagramm (D56). Als Renderer-Option gebaut und nicht per CSS
-   versteckt — nur so folgt der Grafikexport, der den Knotentext ausliest. */
-describe('showIds — die ID vor dem Titel, geschrieben wie im Text', () => {
+   versteckt — nur so folgt der Grafikexport, der den Knotentext ausliest.
+   Seit D64 steht die ID in einer eigenen Zeile ÜBER dem Titel (Trenner ist
+   der Umbruch, nicht mehr der Doppelpunkt). */
+describe('showIds — die ID in einer eigenen Zeile über dem Titel', () => {
  const ids = (text, showIds) => renderTreeHtml(parse(text).roots,
    {t, showDiscarded: false, cheapPath: false, cheapSet: new Set(), showIds}).html;

@@ -154,9 +156,9 @@ describe('showIds — die ID vor dem Titel, geschrieben wie im Text', () => {
    expect(html).not.toContain('nid');
  });

-  it('stellt die ID mit Doppelpunkt und Leerzeichen davor', () => {
+  it('stellt die ID in eine eigene Zeile über den Titel', () => {
    expect(ids('#auth: Backend', true))
-      .toContain('<span class="nid" aria-hidden="true">#auth:</span> Backend');
+      .toContain('<span class="nid" aria-hidden="true">#auth</span>\nBackend');
  });

  it('lässt Knoten ohne ID unangetastet', () => {
@@ -176,7 +178,7 @@ describe('showIds — die ID vor dem Titel, geschrieben wie im Text', () => {
     genau das: `#a<b` ergibt die ID `a`, der Rest bleibt (escaped) im Label. */
  it('endet an einem Zeichen außerhalb der ID-Zeichenmenge', () => {
    const html = ids('#a<b: X', true);
-    expect(html).toContain('<span class="nid" aria-hidden="true">#a:</span>');
+    expect(html).toContain('<span class="nid" aria-hidden="true">#a</span>');
    expect(html).toContain('&lt;b: X');
  });
 });
@@ -0,0 +1,74 @@
+// Umbruch langer Labels (SPEC §9/D64): höchstens ~40 Zeichen je Zeile und
+// gleichmäßig verteilt — nicht gierig (volle Zeile plus einsames Wort).
+import { describe, it, expect } from 'vitest';
+import { wrapLabel, renderTreeHtml } from '../src/render.js';
+import { parse } from '../src/parser.js';
+
+const t = key => key;
+
+describe('wrapLabel: balanciert statt gierig', () => {
+  it('bis 40 Zeichen bleibt es eine Zeile, unverändert', () => {
+    const s = 'Ein gewöhnlicher Knotentitel (39 Zeich.)';
+    expect(s.length).toBe(40);
+    expect(wrapLabel(s)).toEqual([s]);
+  });
+
+  it('44 Zeichen werden zwei etwa gleiche Zeilen — nicht 40 plus Rest', () => {
+    const s = 'Update the agents version of the spec please';
+    expect(s.length).toBe(44);
+    const lines = wrapLabel(s);
+    expect(lines.length).toBe(2);
+    for(const l of lines){
+      expect(l.length).toBeGreaterThanOrEqual(15);
+      expect(l.length).toBeLessThanOrEqual(29);
+    }
+  });
+
+  it('verliert kein Zeichen: die Zeilen ergeben zusammengefügt das Label', () => {
+    const s = 'Offering the status codes, the sizes and the known tags while typing';
+    expect(wrapLabel(s).join(' ')).toBe(s);
+  });
+
+  it('keine Zeile über 40 Zeichen, solange die Wörter es hergeben', () => {
+    const s = 'A dependency needs its target id and nobody remembers a hundred and eighty of them by heart';
+    for(const l of wrapLabel(s)) expect(l.length).toBeLessThanOrEqual(40);
+  });
+
+  it('rund 100 Zeichen ergeben drei gleichmäßige Zeilen', () => {
+    const s = 'The list at the caret offers the document ids filtered by what is typed with the node title as ctx';
+    expect(s.length).toBe(98);
+    const lines = wrapLabel(s);
+    expect(lines.length).toBe(3);
+    for(const l of lines){
+      expect(l.length).toBeGreaterThanOrEqual(25);
+      expect(l.length).toBeLessThanOrEqual(40);
+    }
+  });
+
+  it('ein einzelnes Wort über der Grenze bleibt eine Zeile (CSS fängt es ab)', () => {
+    const w = 'x'.repeat(55);
+    expect(wrapLabel(w)).toEqual([w]);
+    expect(wrapLabel('kurz ' + w)).toEqual(['kurz', w]);
+  });
+
+  it('bricht nie mitten im Wort', () => {
+    const s = 'einige ziemlich lange zusammengesetzte Bandwurmwortgebilde nebeneinander aufgereiht';
+    const words = s.split(' ');
+    for(const l of wrapLabel(s)){
+      for(const w of l.split(' ')) expect(words).toContain(w);
+    }
+  });
+});
+
+describe('Renderer: die Umbrüche stehen als \\n im Knotentext', () => {
+  it('ein langer Titel bekommt sein \\n, ein kurzer nicht', () => {
+    const { roots } = parse(
+      '- Kurzer Titel\n' +
+      '- Ein wirklich sehr langer Titel, der die vierzig Zeichen deutlich reisst');
+    const { html } = renderTreeHtml(roots, {t, showDiscarded: false, cheapPath: false,
+                                            cheapSet: new Set()});
+    expect(html).toContain('Kurzer Titel');
+    expect(html).not.toContain('Kurzer\nTitel');
+    expect(html).toMatch(/Ein wirklich sehr langer Titel,[^<]*\n[^<]*reisst/);
+  });
+});