enhancement
major
minor
defect
critical
major
minor
minor
#30185
Flow-Diagram (Gantt): Beschriftung von LineDeco (z. B. „Heute“) unter fixierten Kopfzeilen abgeschnitten; Kanten ohne Pfeilspitze
Zwei Darstellungsmängel des Gantt-Diagramms im Flow-Diagram (tl-react-flow-*, 8.0.0-alpha12). Der zweite Punkt stammt aus #30186.
1. Beschriftung von Linien-Dekorationen unter fixierten Kopfzeilen
Problem
Eine senkrechte Linien-Dekoration (reactFlowGanttLineDeco(..., label: ...)) wird bei frozenRows > 0 sichtbar gezeichnet. Ihre Beschriftung setzt die Engine aber unter die fixierten Kopfzeilen, wo sie abgeschnitten bzw. verdeckt wird.
Reproduktion
- Gantt mit frozenRows: 2 (Monat/KW) und reactFlowGanttLineDeco(model: "today", at: <heute>, color: "#FFC800", label: "Heute: 06.11.2026").
- Die Linie ist sichtbar, die Beschriftung nicht bzw. nur angeschnitten.
Erwartet
Die Beschriftung steht vollständig sichtbar im fixierten Kopfbereich, z. B. als Marke auf der Zeitachse, oder direkt unterhalb der fixierten Zeilen.
2. Kanten ohne Pfeilspitze (#30186)
Problem
Kanten (reactFlowGanttEdge) werden als Linien ohne Pfeilspitze gezeichnet. Für Abhängigkeiten (Vorgänger → Nachfolger) und Terminverschiebungen (Plan → Prognose) ist die Richtung fachlich wichtig. Erkennbar ist sie derzeit nur an der Lage der Linie.
Erwartet
Eine Option an der Kante, z. B. targetArrow: true bzw. arrowHead: "end". Die Pfeilspitze übernimmt die Strichfarbe, auch violatedStrokeColor.
Lösung
Beschriftung: Die Beschriftung einer Dekoration, die für alle Zeilen gilt oder in einer fixierten Zeile beginnt, steht direkt unterhalb der fixierten Zeilen. Sie wird in einer eigenen Ebene über Kopf- und Datenbereich gezeichnet, die nur horizontal mitscrollt; beim vertikalen Scrollen bleibt sie sichtbar und läuft beim horizontalen Scrollen mit ihrer Linie mit. Die Beschriftung einer Dekoration, die nur für Datenzeilen gilt, steht wie bisher an ihrer ersten Zeile und scrollt mit den Daten. Ohne fixierte Kopfzeilen bleibt die Position unverändert.
Pfeilspitzen: reactFlowGanttEdge erhält die Parameter sourceSymbol und targetSymbol – dieselben Namen und Werte wie reactFlowGraphEdge (none, arrow, closedArrow, filledArrow, diamond, filledDiamond), Vorgabe none. Das Symbol zeigt in das jeweilige Element und wird in der jeweils wirksamen Strichfarbe und -stärke gezeichnet, bei verletzter Abhängigkeit also in violatedStrokeColor; auch bei gestrichelter Kante ist es durchgezogen. Das waagrechte Endstück der Kante wird um die Symbollänge verlängert, so dass die Linie nicht in die Spitze hineinragt und auch bei dicken Kanten nicht zurückknickt.
Gefüllte Symbole (filledArrow, filledDiamond) werden jetzt in der Strichfarbe gefüllt, auch an Kanten von reactFlowGraphEdge; bisher waren sie unabhängig von der Strichfarbe schwarz gefüllt.
Beispiel:
reactFlowGanttEdge(model: $dep, sourceModel: $a, sourceEndpoint: "END", targetModel: $b, targetEndpoint: "START", targetSymbol: "filledArrow")
Die Gantt-Demos der React-Demo-Anwendung zeigen beides (Demos → Gantt-Demo, Gantt-Terminplan).