enhancement
major
minor
defect
critical
major
minor
minor
#30181
Flow-Diagram (Gantt): Diagramm wird immer komplett eingepasst – kein vertikales Scrollen, unlesbar bei vielen Zeilen
Problem
Das Gantt-Diagramm der Flow-Engine wird stets vollständig in die sichtbare Fläche skaliert. Bei 7 Zeilen ergibt das etwa 72 %, bei 200 Zeilen etwa 17 %.
Es gibt keine Möglichkeit, die Zeilen in natürlicher Höhe anzuzeigen und vertikal zu scrollen, wobei die fixierten Kopfzeilen stehen bleiben. Strg+Mausrad zoomt nur die Zeitachse (horizontal), nicht die Gesamtgröße.
Version: 8.0.0-alpha12, Module tl-react-flow-*.
Reproduktion
- Gantt-Diagramm mit 200 Zeilen, z. B. synthetisch erzeugt, und frozenRows: 1.
- Im Panel anzeigen: Die Schrift ist bei etwa 17 % Skalierung nicht mehr lesbar. Es gibt keinen Scrollbalken.
Performance
Unproblematisch: 200 Zeilen, 600 Meilensteine, 200 Kanten, rund 3.100 SVG-Knoten. Der Aufbau dauert etwa 200 ms, ein Zoomschritt etwa 55 ms.
Erwartetes Verhalten (Vorschlag)
Eine Option am Gantt-Layout bzw. am Diagramm, z. B. fit="width" oder fit="none":
- vertikal: natürliche Zeilenhöhe, Scrollen innerhalb des Panels
- horizontal: Breite eingepasst bzw. per Strg+Mausrad zoombar
- Die fixierten Kopfzeilen (frozenRows) bleiben beim vertikalen Scrollen oben stehen.
- wünschenswert: fixierte Zeilenbeschriftungen links beim horizontalen Scrollen
Auswirkung
Ein Projekt-Terminplan hat in der Praxis 50 bis 300 Zeilen. Ohne Scrollen ist nur ein kleiner Ausschnitt sinnvoll darstellbar. Behelfsweise begrenzen Tiefen- und Teilbaumfilter die Zeilenzahl.
Weiterer Befund
Nach einem Drag im Diagramm fällt das SVG des Diagramms auf etwa 154 px Höhe zusammen, und die Höhe der viewBox wird negativ. Bei jedem Neuzeichnen ändert sich die Höhe des SVG. Ursache: Das Diagramm-Element hatte height: 100%, was in einem Panel ohne fill zu auto wird; die Höhe des SVG ergab sich dann aus dem Seitenverhältnis seiner viewBox. Ein Neuzeichnen schrieb eine veraltete viewBox zurück, der ResizeObserver rechnete die Höhenänderung skaliert auf die viewBox auf, bis deren Höhe negativ wurde und der Browser auf die Standardgröße zurückfiel.
Lösung
Keine Option am Diagramm für das Einpassen: Ein Flussdiagramm wird als Ganzes skaliert (eingepasst oder 100 %), ein Gantt-Diagramm hat dagegen einen eigenen Sichtbereich, in dem es scrollt und die Zeitachse zoomt.
- Verfügbare Fläche an das Layout: DiagramOperations.layout(context, availableWidth, availableHeight) bietet dem Diagramm die Größe seines Sichtbereichs an (im Browser die Größe des Panels bei Maßstab 1, bisher immer unendlich). Die Container reichen den jeweils verbleibenden Platz weiter; eine Überschrift über dem Gantt-Diagramm nimmt sich also ihren Anteil, das Gantt-Diagramm bekommt den Rest. Bei einer Größenänderung des Panels wird neu gelayoutet. Ein Export (reactFlowToSvg) bekommt weiterhin unbegrenzt Platz und zeigt das vollständige Gantt-Diagramm.
- Größe des Diagramms: Ein Diagramm füllt immer den Platz seines Containers (wie eine Tabelle); seine Höhe ergibt sich nie aus seiner Zeichnung. Das behebt den Zusammenbruch des SVG nach einem Drag. Ein Panel mit einem Diagramm füllt damit, sofern es nicht fill="false" hat.
- Gantt-Diagramm: Ist sein Inhalt größer als die angebotene Fläche, begrenzt es sich auf diese und scrollt intern: Zeilen in natürlicher Höhe, fixierte Kopfzeilen bleiben oben, Zeilenbeschriftungen bleiben links stehen. Mausrad und Ziehen auf freier Fläche scrollen. Das funktioniert unabhängig von frozenRows (bei frozenRows: 0 ohne fixierte Kopfzeile). Ohne initialZoom wird die Zeitachse in die angebotene Breite eingepasst, bis der Benutzer mit Strg+Mausrad zoomt; Strg+Mausrad über einem Gantt-Diagramm zoomt immer dessen Zeitachse.
- Scrollbalken: Das Gantt-Diagramm zeichnet eigene Scrollbalken für die Richtungen, in denen es scrollt. Der Schieber lässt sich ziehen, ein Klick auf die Leiste blättert um eine sichtbare Seite. Die Scrollbalken belegen eigenen Platz, so dass die letzte Zeile und das Ende der Zeitachse vollständig sichtbar werden.
- Option fixedView an reactFlowChart: schaltet das Verschieben und Zoomen des gesamten Diagramms ab; das Diagramm wird unskaliert an seinem Ursprung angezeigt. Boxen mit eigenem Sichtbereich wie das Gantt-Diagramm scrollen und zoomen weiterhin intern. Gedacht für ein Diagramm, das nur ein Gantt-Diagramm (ggf. mit Überschrift) zeigt.
- Demo in tl-demo-react: "Gantt-Terminplan" mit 200 Zeilen und Überschrift (fixedView: true).
- Dokumentation: Abschnitt "Size and view" im Artikel view-layer/flow-diagrams.